/* ── ng-cloak: hide Angular templates until compiled (prevents {{ }} flash) ── */
[ng-cloak], .ng-cloak { display: none !important; }

.body_content {
    margin-left: 88px;
    /* dvh, not vh -- vh on mobile browsers is measured against the LARGEST
       possible viewport (address bar hidden), so a value that "fits" on
       paper can leave the true visible area shorter once browser chrome is
       actually showing, pushing the footer/floating elements partly
       offscreen. dvh tracks the real, currently-visible viewport. */
    min-height: calc(100dvh - 155px);
    overflow-x: hidden;
    transition: margin-left 0.22s ease;
    padding-left: 20px;
    padding-right: 20px;
}
body.sidebar-hovered .body_content {
    margin-left: 240px;
}
body.sidebar-hovered .footer_area {
    margin-left: 240px;
}

.container {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.row {
    margin-left: -9px !important;
    margin-right: -9px !important;
}
.col-lg-2 {
    padding-left: 9px !important;
    padding-right: 9px !important;
}

.col-lg-12 {
    padding-right: 9px !important;
    padding-left: 9px !important;
}
.col-sm-6 {
    padding-right: 9px !important;
    padding-left: 9px !important;
}
.col-sm-3 {
    padding-right: 9px !important;
    padding-left: 9px !important;
}

.ellipsis-text {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #000000;
}
/*  */
.left-side-product-box img {
    width: 100%;
}

.left-side-product-box .sub-img img {
    margin-top: 5px;
    width: 60px;
    height: 60px;
}

.l_product_item .l_p_text h4 {
    padding-top: 5px !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.l_product_item .l_p_text h5 {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.subs_btn {
    height: 55px !important;
}


/* sign and sign up menu css*/
.dropdown_menu ul {
    position: absolute !important;
    top: 40px;
    left: 0;
    background-color: #FFFFFF;
    z-index: 999999999999999999 !important;
    text-align: center;
    padding-right: 0px;
    opacity: 0;
    visibility: hidden;
    webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
    border-left: 1px #e5e5e5 solid;
    border-right: 1px #e5e5e5 solid;
    border-bottom: 1px #e5e5e5 solid;
    min-width: 121px;
}

.content_ul {
    display: block;
    webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
    padding-top: 8px;
    padding-bottom: 8px;
}

.dropdown_menu > ul > li > ul li:first-child {
    position: relative;
}

.dropdown_menu ul li {
    display: inline-block;
    width: 100%;
}

    .dropdown_menu ul li a {
        font-size: 10px;
        display: inline-block;
        text-transform: uppercase;
        padding-left: 18px;
        padding-right: 18px;
        color: #efefef;
        border-right: 1px solid #5d5c5c;
        line-height: 12px;
        width: 100%;
        cursor: pointer;
    }

    .dropdown_menu ul li a {
        font-size: 11px;
        color: #333333 !important;
        padding-top: 8.5px;
        padding-bottom: 8.5px;
        line-height: 25px;
        border: none;
    }

        .dropdown_menu ul li a:hover {
            color: #333333;
        }

    .dropdown_menu ul li:last-child a {
        border-right: none;
    }

    .dropdown_menu ul li:first-child a {
        padding-bottom: 8.5px;
        padding-top: 8.5px;
    }

    .dropdown_menu ul li:last-child a:before {
        content: " ";
        display: block;
        text-align: center;
        height: 1px;
        background: #d9d9d9;
        width: 40px;
        position: absolute;
        top: 49px;
        left: 50%;
        transform: translateX(-50%);
    }

    .dropdown_menu ul li:first-child a:before {
        display: none;
    }

.top_right > li:hover ul {
    opacity: 1;
    visibility: visible;
}
/* Touch devices have no :hover — a tap toggles this class instead (see the
   click handler in _Layout.cshtml) so the Account menu (Sign In/Register,
   or Dashboard/Orders/Wallet/Sign Out when logged in) is reachable at all
   on mobile; without it this menu has no touch entry point. */
.top_right > li.dropdown_menu.open ul {
    opacity: 1;
    visibility: visible;
}
/*header css*/
.header_top_area {
    /*position: fixed;
    top: 0;
    left: 0;
    right: 0;*/
    z-index: 9999999999;
}

.top_right {
    margin-top: 7px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

    .top_right li {
        display: flex;
        margin-left: 3px;
    }

.shop_header_area .navbar .navbar-nav li a {
    padding-left: 10px;
}

.top_right li a {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.top_right li:nth-child(1) a {
    width: 125px;
}

.top_right li:nth-child(2) a {
    width: 125px;
}
/* login css */
.login_form .update_btn {
    line-height: 35px;
}
/* product css */
.l_product_item .l_p_img img {
    height: 156px;
    width: auto;
}

.l_product_item .l_p_img {
    height: 156px;
    display: block;
}

/*login css*/
.login_form {
    margin: auto !important;
}
/* Product Details css
   NOTE: layout (display/columns) for .product_details_row now lives in the
   CSS Grid rules inside ProductDetails.cshtml's own <style> block — this
   used to also set display:flex here, which silently won the cascade (same
   specificity, this file loads after the page's inline style) and made the
   grid rules dead code. .product_details_col/_col_5/_col_7 are unused by
   the current markup (superseded by .pd-area-gallery/mid/right), removed. */
.product_details_row {
    padding-top: 20px;
}


.product_details_text {
    padding-top: 1rem;
}
li.product_details_text {
    padding-top: 0px;
}
.product_details_text .sku-property-image img {
    width: 50px;
    height: 50px;
}
.product_details_text .sku-property-image span {
    line-height: normal;
    height: 50px;
    width: 50px;
}
.p_color .color_list li.selected, .p_color .color_list li:hover {
    box-shadow: inset 0 0 0 2px #ff4747;
}
.p_color .product_details_colorsize .sku_title_value {
    color: #999;
}
.product_details_colorsize {
    font-size: 14px;
    color: #000;
    font-family: "Poppins", sans-serif;
}

.pointer {
    cursor: pointer;
}
.details_modal_body {
    max-height: 320px;
    overflow-y: auto;
}
a:not([href]):not([tabindex]) {
    color: #fff;
}
/* cart css */
.cart_table .table td, .cart_table .table th {
    padding: 5px 0.75rem !important;
}

/* specification css */

.specification .data_view {
    width: 100%;
}

.specification .data_view ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.specification .data_view ul li {
    width: 50%;
    line-height: 28px;
    color: #999;
    font-size: 14px;
}

.specification .data_view ul li span {
    color: #151515;
    cursor: pointer;
    font-size: 14px;
}

/* order history css */
.order_row {
    display: flex;
    align-items: center;
    width: 100%;
    flex-direction: column;
}

.order_row .order_col {
    width: 100%;
    border-bottom: 1px solid #ccc;
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
    align-items: center;
}
.order_row .order_col:first-child {
    border-top: 1px solid #ddd;
}

.order_row .order_col .order_data {
    width: 29%;
    padding: 25px 0;
}
.order_row .order_col .order_data:last-child {
    width: 13%;
}
.order_data h4 {
    color: #cccccc !important;
    text-transform: uppercase;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 0px !important;
}

.order_data p {
    color: #000 !important;
    font-size: 16px !important;
    font-weight: 500;
}
.view_order_btn {
    border: 1px solid #cccccc;
    border-radius: 0px;
    outline: 0 !important;
    color: #333;
    text-transform: uppercase;
    font-size: 14px;
    width: 100%;
}
.view_order_btn:focus{
    box-shadow: none !important;
}


/* order details css */
.order_details_hedader {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.order_details_content {
    padding-top: 0px;
    /*padding-top: 50px;*/
}

.order_details_hedader h3 {
    text-transform: uppercase;
    font-size: 20px;
    border: 1px solid #333;
    padding-bottom: 0px;
    width: 40%;
    display: flex;
    justify-content: center;
    margin-top: 5px;
}

.order_details_row {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    padding-top: 50px;
    padding-bottom: 30px;
}

.order_details_row .order_details_col {
    width: 50%;
}

.order_details_row .order_details_col h4 {
    text-transform: uppercase;
    font-size: 18px;
}

.details_data_row {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-top: 10px;
}
.details_data_col {
    display: flex;
    align-items: center;
    height: 30px;
}

.details_data_col h6 {
    width: 24%;
    text-align: right;
    padding: 0px;
    font-size: 13px;
}

.details_data_col p {
    padding-left: 10px;
    font-size: 13px;
}
.table thead th:nth-child(2) {
    width: 30% !important;
}
.table thead th:nth-child(4) {
    width: 15% !important;
}

.policy_system_container{
    padding: 15px;
    margin-top: 20px;
}
.header_section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 15px;
    flex-wrap: wrap;
}

.header_section .col_header {
    width: 10%;
}
.policy_header .header_section h3 {
    text-align: center;
    width: 80%;
}

.header_section .language_btn {
    text-align: right;
    width: 10%;
}
.header_section .language_btn a {
    font-size: 16px;
    border: 1px solid #cccccc;
    color: #d91522;
    border-radius: 0px;
    outline: none !important;
}
.policy_header p {
    padding-bottom: 30px;
    display: flex;
    text-align: justify;
    flex-direction: column;
}
ul.policy_details {
    display: flex;
    width: 100%;
    flex-direction: column;
}

li.details_row {
    display: flex;
    flex-direction: column;
    padding-bottom: 30px;
}
.details_col {
    width: 100%;
    padding-bottom: 20px;
}
    .details_col:last-child{
        padding-bottom: 0px;
    }
    .details_col h5 {
        padding-bottom: 15px;
    }
.policy_header p span {
    padding-bottom: 10px;
}

    .policy_header p span:last-child {
        padding-bottom: 0px;
    }
.details_col p {
    display: flex;
    text-align: justify;
    flex-direction: column;
    padding-left: 10px;
}
.details_col p span {
    padding-bottom: 10px;
}
.details_col ol {
    list-style: disc;
    padding-bottom: 10px;
}


/* modal css */
.order_details_modal {
    z-index: 999999999;
}
/*Bank css style*/
.bank_info_content {
    box-shadow: 0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);
    background: #f9fafb;
}
.bank_info_content h4 {
    font-weight: 600;
    font-size: 1rem;
}

.bank_content_details {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
}

.bank_text_content {
    display: flex;
    line-height: 23px;
    width: 100%;
}

.bank_text_content .bank_label {
    width: 115px;
}

.bank_text_content .bank_clone {
    width: 7px;
}

.bank_name {
    width: calc(100% - 122px);
}
.bank_info_content h5 {
    font-weight: 500;
    font-size: 1.125rem;
}
.cust_btn {
    background: rgb(242 102 35/1);
    border: 1px solid rgb(242 102 35/1);
    box-shadow: none;
    /* was a hardcoded 304px — wider than its own parent card at any
       viewport under ~340px (BkashPayment/BankPayment's "Pay"/"Submit for
       Verification" buttons), and silently clipped by the site-wide
       .body_content{overflow-x:hidden} rule rather than causing a visible
       scrollbar, so ~25px of the button's right edge was unreachable at
       320-360px. width:100% + the original 304px as a max-width preserves
       the exact desktop size (still centered via the existing text-center
       wrapper) while letting it shrink to fit its card on narrow screens. */
    width: 100%;
    max-width: 304px;
    outline: none !important;
}
.cust_btn:hover {
    background: rgb(242 102 35/1);
    border: 1px solid rgb(242 102 35/1) !important;    
}
.cust_btn:focus {
    background: rgb(242 102 35/1);
    border: 1px solid rgb(242 102 35/1) !important;
    box-shadow: none;
}
.cust_btn:active {
    background: rgb(242 102 35/1);
    border: 1px solid rgb(242 102 35/1) !important;
    box-shadow: none;
}
.cust_btn:not([disabled]):not(.disabled).active, .cust_btn:not([disabled]):not(.disabled):active, .show > .cust_btn.dropdown-toggle {
    background: rgb(242 102 35/1);
    border: 1px solid rgb(242 102 35/1) !important;
    box-shadow: none;
}

.top_header_middle .input-group .form-control {
    border: 2px solid #ff4747 !important;
    border-radius: 5px;
    padding-right: 41px;
    padding-left: 15px;
}

.top_header_middle .input-group .input-group-btn {
    right: 0;
    width: 41px;
    background: #ff4747;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0px 5px 5px 0px;
}
.top_header_middle .input-group .input-group-btn .btn {
    padding: 0px;
    display: flex;
    color: #fff;
    font-weight: bold;
    outline: none !important;
    box-shadow: none !important;
}

@media (min-width: 576px) {
    .order_details_modal .modal-dialog {
        max-width: 1024px;
        margin: 107px auto;
    }
}

/* =====================================================
   MODERN UI OVERHAUL — Primeway Solution Ltd.
   Palette: #d91522 (red) | #1a1a2e (navy) | #ff6b35 (orange)
   ===================================================== */

/* Explicit, non-conditional root baseline. Overrides site.css's leftover
   ASP.NET scaffold rule (14px below 768px, 16px above via media query) —
   that split meant the rem baseline itself changed at a breakpoint. Pinning
   it to one fixed value keeps every rem-based size stable regardless of
   viewport width, OS text-size scaling, or browser default-font-size
   settings. Standard browser zoom (Ctrl+/Ctrl-) still scales everything
   normally since it multiplies on top of this value, not around it. */
html {
    font-size: 16px;
}

:root {
    --pm-red: #d91522;
    --pm-red-dark: #b01019;
    --pm-navy: #1a1a2e;
    --pm-navy-2: #16213e;
    /* Matches the admin panel's --navy-light/--navy-lighter/--border/
       --text-dim exactly (wwwroot/admin/admin.css) — used to bring the
       customer Sign In/Sign Up pages onto the same dark chrome. */
    --pm-navy-light: #232342;
    --pm-navy-lighter: #2d2d52;
    --pm-border-dark: #33335a;
    --pm-text-dim: #9b9bb5;
    --pm-orange: #ff6b35;
    --pm-light: #f8f9fa;
    --pm-border: #e8e8e8;
    --pm-muted: #6c757d;
    /* Body/UI text — not pure black. Replaces ad hoc #000/#262121/#0b1033
       scattered across older template CSS. */
    --pm-text: #333d47;
    /* Shared with the admin panel's --green (#1fbf75) — a semantic
       success/positive color (credits, delivered, completed), never used
       as a competing brand/CTA color. */
    --pm-success: #1fbf75;
    /* WhatsApp brand green — the one deliberate non-Preorder-palette color,
       used only by the floating chat button so it reads as WhatsApp. */
    --pm-whatsapp: #25d366;
    --pm-shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --pm-shadow-md: 0 4px 20px rgba(0,0,0,0.12);
    --pm-shadow-lg: 0 8px 30px rgba(0,0,0,0.16);
    --pm-radius: 8px;
    --pm-transition: 0.3s ease;

    /* --- Theme surfaces (light default; see [data-theme="dark"] override
       block further down) --- */
    --pm-bg: #f4f5f7;          /* page background */
    --pm-surface: #ffffff;     /* cards, header, dropdowns, modals */
    --pm-surface-2: #f8f9fa;   /* subtle secondary surface / hover fill (== old --pm-light) */
    /* Ring drawn around notification badges to separate them from the icon
       underneath — must match whatever surface they sit on (header/menu
       background), not a fixed color, or it reads as a stray dark circle. */
    --pm-badge-ring: #ffffff;

    /* Type scale (px): micro / body-UI / buttons / card titles / section
       headings / page titles. Body/UI already sat at 13px — kept as-is. */
    --pm-fs-xs: 12px;
    --pm-fs-sm: 13px;
    --pm-fs-md: 14px;
    --pm-fs-lg: 16px;
    --pm-fs-xl: 20px;
    --pm-fs-xxl: 24px;

    /* Spacing scale (px), 8px base. */
    --pm-sp-1: 4px;
    --pm-sp-2: 8px;
    --pm-sp-3: 12px;
    --pm-sp-4: 16px;
    --pm-sp-5: 24px;
    --pm-sp-6: 32px;
}

/* ══════════════════════════════════════════════════════════════════════
   DARK MODE — token overrides + explicit surface fixes.
   Toggled via data-theme="dark" on <html> (_Layout.cshtml's early <head>
   script + the .theme-toggle-btn in the header; both share one
   window.applyPreorderTheme/PREORDER_THEME_KEY mechanism, localStorage-
   persisted, falls back to prefers-color-scheme when no explicit choice
   has been made yet).

   Reuses this codebase's EXISTING dark palette (--pm-navy-light/
   -navy-lighter/-border-dark/-text-dim were already defined above,
   originally for the Sign In/Sign Up pages' dark chrome / admin panel) as
   the base dark surfaces, rather than inventing a second, different dark
   palette — same reasoning the original --pm-navy-light comment gives.
   Brand/status colors (--pm-red/-orange/-navy/-success/-whatsapp) are
   deliberately left untouched: this is a proper token redefinition, not a
   blanket invert, and those colors already read correctly on a dark
   surface.

   Everything below this token block is an EXPLICIT override only for
   selectors that use a raw hex color instead of a --pm-* token (most of
   custom.css's own component work already uses tokens and adapts for
   free the moment the tokens above change) -- grouped by the areas this
   task explicitly calls out: header/nav/marketplace buttons/services
   menu, category explorer, product cards, carousels/trust/quick-view,
   ProductList, dropdowns, forms, buttons. Product images are never
   filtered/inverted. The footer is already dark navy by original design
   in BOTH themes, so it isn't touched here. ══════════════════════════ */
:root[data-theme="dark"] {
    --pm-bg: #0f0f1e;
    --pm-surface: var(--pm-navy-light);
    --pm-surface-2: var(--pm-navy-lighter);
    --pm-light: var(--pm-navy-lighter);
    --pm-border: var(--pm-border-dark);
    --pm-muted: var(--pm-text-dim);
    --pm-text: #e8e8f0;
    --pm-badge-ring: var(--pm-surface);
    --pm-shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
    --pm-shadow-md: 0 4px 20px rgba(0,0,0,0.45);
    --pm-shadow-lg: 0 8px 30px rgba(0,0,0,0.55);
}
:root[data-theme="dark"] body {
    background: var(--pm-bg);
}

/* Header / marketplace nav / services menu */
:root[data-theme="dark"] #navbar_top {
    background: var(--pm-surface) !important;
    border-bottom-color: var(--pm-border);
}
/* .marketplace-nav-btn's default border is the literal --pm-navy (a
   deliberate brand-navy outline in light mode), which stays equally dark
   in both themes -- against the dark surface it sits on in dark mode,
   that reads as almost no border at all. --pm-border already adapts per
   theme (light gray / dark-but-lighter-than-the-surface), so dark mode
   uses that instead, keeping the "outlined pill" look actually visible. */
:root[data-theme="dark"] .marketplace-nav-btn {
    border-color: var(--pm-border);
}
:root[data-theme="dark"] .marketplace-nav-bar {
    background: var(--pm-surface);
    border-bottom-color: var(--pm-border);
}
:root[data-theme="dark"] .shop_header_area {
    background: var(--pm-surface) !important;
    border-bottom-color: var(--pm-border);
}
:root[data-theme="dark"] .services-dropdown-menu {
    background: var(--pm-surface);
}
:root[data-theme="dark"] .services-dropdown-menu li a:hover {
    background: var(--pm-surface-2);
}
:root[data-theme="dark"] .dropdown_menu ul,
:root[data-theme="dark"] .top_right .dropdown_menu ul {
    background-color: var(--pm-surface) !important;
    border-color: var(--pm-border) !important;
}
/* .dropdown_menu ul li a's own color: #333 (custom.css, base rules) was
   never overridden here -- only the panel's background was themed, so the
   text stayed dark-on-dark. .top_right .dropdown_menu ul li a is the
   Account menu specifically (Dashboard/My Orders/Wallet/Sign Out) and is
   the one reported as still nearly-invisible; the plain .dropdown_menu
   selector covers any other menu built on the same base component. */
:root[data-theme="dark"] .dropdown_menu ul li a,
:root[data-theme="dark"] .top_right .dropdown_menu ul li a {
    color: var(--pm-text) !important;
}
:root[data-theme="dark"] .dropdown_menu ul li a:hover,
:root[data-theme="dark"] .top_right .dropdown_menu ul li a:hover {
    background: var(--pm-surface-2) !important;
    color: var(--pm-red) !important;
}
:root[data-theme="dark"] .dropdown_menu ul li:last-child a:before {
    background: var(--pm-border) !important;
}

/* Category explorer -- comprehensive dark-mode pass (sidebar / mega-menu /
   3rd-level products pane). Most of this codebase's own component CSS
   already uses --pm-* tokens and adapts for free; the exceptions found
   here were genuinely hardcoded: megamenu.css (a vendor-ish file) sets
   subcategory link text to a flat #000 with no theme awareness at all --
   exactly the "black text on dark background" failure this task warns
   about -- and a few borders/scrollbar colors were light-mode-only hex
   values. */
:root[data-theme="dark"] .l_p_categories_widget {
    background: var(--pm-surface);
    border-right-color: var(--pm-border);
}
:root[data-theme="dark"] .l_p_categories_widget .navbar-nav li a.nav-link {
    color: var(--pm-text) !important;
    border-bottom-color: var(--pm-border) !important;
}
:root[data-theme="dark"] .l_p_categories_widget .navbar-nav:hover {
    scrollbar-color: var(--pm-border) transparent !important;
}
:root[data-theme="dark"] .l_p_categories_widget .navbar-nav::-webkit-scrollbar-thumb {
    background: var(--pm-border);
}
:root[data-theme="dark"] .categories_sidebar .magamenushow:hover > a.nav-link,
:root[data-theme="dark"] .categories_sidebar .magamenushow.mm-open > a.nav-link {
    background: var(--pm-surface-2);
}
:root[data-theme="dark"] .mm-expand-btn {
    color: var(--pm-muted);
}
:root[data-theme="dark"] .categories_sidebar .magamenushow.mm-open .mm-expand-btn {
    color: var(--pm-red);
}
/* Subcategory panel (middle column) -- megamenu.css hardcodes these to
   #000, no theme variable involved at all. */
:root[data-theme="dark"] .categories_sidebar .megadropdown.products {
    background: var(--pm-surface);
    border-color: var(--pm-border);
}
:root[data-theme="dark"] .categories_sidebar .megadropdown a,
:root[data-theme="dark"] .categories_sidebar .col-title,
:root[data-theme="dark"] .categories_sidebar .nav-link-dropdown,
:root[data-theme="dark"] .categories_sidebar .list-item {
    color: var(--pm-text) !important;
}
:root[data-theme="dark"] .categories_sidebar .nav-link-dropdown:hover,
:root[data-theme="dark"] .categories_sidebar .col-title:hover {
    color: var(--pm-red) !important;
}
/* Product preview panel (right column) -- .mm-products-pane's own
   background/title already use tokens (see custom.css) and adapt
   automatically; product cards inside it are the SAME shared
   productCardTpl component used everywhere else on the site, already
   covered by the sitewide .l_product_item dark-mode rules below. */
:root[data-theme="dark"] .mm-products-pane-title {
    color: var(--pm-text);
}

/* Product cards (Home/ProductList/ProductDetails/carousels/explorer pane) */
:root[data-theme="dark"] .l_product_item {
    background: var(--pm-surface);
}
:root[data-theme="dark"] .l_product_item .l_p_img {
    background: var(--pm-surface-2);
}
:root[data-theme="dark"] .card-action-btn {
    background: rgba(35,35,66,0.85);
    color: var(--pm-text);
}
:root[data-theme="dark"] .card-action-btn:hover {
    background: var(--pm-navy-lighter);
}

/* Flash Deals / Best Sellers / Trending / carousels */
:root[data-theme="dark"] .carousel-arrow-btn {
    background: var(--pm-surface);
    color: var(--pm-text);
}
:root[data-theme="dark"] .trust-item {
    background: var(--pm-surface);
}
:root[data-theme="dark"] .trust-item h4 {
    color: var(--pm-text);
}

/* Quick View modal */
:root[data-theme="dark"] .qv-dialog-inner {
    background: var(--pm-surface);
}
:root[data-theme="dark"] .qv-title,
:root[data-theme="dark"] .qv-details-btn:hover {
    color: var(--pm-text);
}
:root[data-theme="dark"] .qv-wishlist-btn {
    color: var(--pm-text);
}

/* Search dropdown (autocomplete suggestions + recent-searches history) --
   was entirely unthemed: white panel, dark-gray item text, light-gray
   borders/hover/tags, none of it using --pm-* tokens. */
:root[data-theme="dark"] .search-dropdown {
    background: var(--pm-surface) !important;
    border-color: var(--pm-border) !important;
}
:root[data-theme="dark"] .search-dd-section-label {
    color: var(--pm-muted) !important;
}
:root[data-theme="dark"] .search-dd-item {
    color: var(--pm-text) !important;
}
:root[data-theme="dark"] .search-dd-item:hover,
:root[data-theme="dark"] .search-dd-item.search-dd-active {
    background: var(--pm-surface-2) !important;
}
:root[data-theme="dark"] .search-dd-icon {
    color: var(--pm-muted) !important;
}
:root[data-theme="dark"] .search-history-tag {
    background: var(--pm-surface-2) !important;
    color: var(--pm-text) !important;
    border-color: var(--pm-border) !important;
}
:root[data-theme="dark"] .search-history-tag:hover {
    background: var(--pm-light) !important;
    border-color: var(--pm-muted) !important;
}
:root[data-theme="dark"] .search-history-tag-active {
    background: var(--pm-light) !important;
    border-color: var(--pm-muted) !important;
}
:root[data-theme="dark"] .search-tag-remove {
    color: var(--pm-muted) !important;
}

/* ProductList: category header / subcategory pills / price filter */
:root[data-theme="dark"] .subcat-pill {
    background: var(--pm-surface);
    color: var(--pm-muted);
}
:root[data-theme="dark"] .price-input {
    color: var(--pm-text);
    background: var(--pm-surface-2);
}

/* Newsletter/CTA section's dark-navy-text button variant -- readable on
   the light page background in light mode, but that page background is
   now dark too, so this specific button needs light text instead. */
:root[data-theme="dark"] .hero-btn-outline-dark {
    color: var(--pm-text) !important;
}
:root[data-theme="dark"] .newsletter-cta-section h2 {
    color: var(--pm-text);
}

/* Generic form-field fallback -- covers the many plain <input>/<select>/
   <textarea> fields across pages this task doesn't enumerate individually
   (Contact Us, Support, Shipping Calculator, Checkout, etc.) without
   hunting each one's own stylesheet rule. Auth pages already ship their
   own dark-styled inputs (same --pm-navy-light/-lighter palette adopted
   above), so this is consistent with them, not a second competing look. */
:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    background-color: var(--pm-surface-2);
    color: var(--pm-text);
    border-color: var(--pm-border);
}

/* Flash Deals / Best Sellers / Trending Global / every section header
   sitewide -- .home-section-title was a hardcoded near-black
   (#1a1a2e), completely unreadable against a dark page background
   (exactly the "no dark text on dark backgrounds" failure mode).
   .source-tab (the marketplace filter pills inside those sections, and
   ProductList's own source-tab-row) was hardcoded solid white with dark
   gray text -- not broken/illegible in isolation, but a stark white box
   sitting on an otherwise-dark page, and not what "appropriate dark
   surface" means. Product-card meta text (stars/rating/sold count) and
   the loading/empty-state placeholders were similarly hardcoded light-
   mode grays. */
:root[data-theme="dark"] .home-section-title {
    color: var(--pm-text);
}
:root[data-theme="dark"] .source-tab {
    background: var(--pm-surface);
    color: var(--pm-muted);
}
:root[data-theme="dark"] .source-tab:hover {
    background: rgba(232,25,75,0.12);
}
:root[data-theme="dark"] .star-empty {
    color: var(--pm-border);
}
:root[data-theme="dark"] .rating-text,
:root[data-theme="dark"] .section-loading,
:root[data-theme="dark"] .section-empty {
    color: var(--pm-muted);
}

/* ══════════════════════════════════════════════════════════════════════
   Bootstrap modals — GLOBAL. .modal-content ships with Bootstrap's own
   hardcoded white background and never had a dark override anywhere in
   this file; .modal-title/.close have no color of their own either, so
   both inherited body's `color: var(--pm-text)` (near-white in dark mode)
   straight onto that still-white panel -- e.g. the Shipping Method
   modal's own title rendering in almost-white text on a white box,
   completely invisible. This single fix covers every Bootstrap modal
   sitewide (Shipping Method, Quick View's ngDialog is separate/already
   themed, but plain .modal instances like this one all share this). ══ */
:root[data-theme="dark"] .modal-content {
    background: var(--pm-surface);
    color: var(--pm-text);
    border-color: var(--pm-border);
}
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer {
    border-color: var(--pm-border) !important;
}
:root[data-theme="dark"] .modal-title {
    color: var(--pm-text);
}
:root[data-theme="dark"] .close {
    color: var(--pm-text);
    text-shadow: none;
    opacity: 0.75;
}
:root[data-theme="dark"] .close:hover {
    color: var(--pm-red);
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════
   Product Details page (ProductDetails.cshtml's own <style> block --
   gallery / title bar / seller score panel / tabs / variant table / size
   table / Order Summary card / Shipping Method modal content / Why Shop
   With Preorder / Similar Products / reviews). That whole block predates
   the theme system and is entirely hardcoded light-mode hex (#333, #666,
   #777, #888, #999, #222, #fff, #f5f5f5, #fafafa, #fdf5f5...) with no
   --pm-* tokens and no dark override anywhere -- every card on this page
   stayed a plain white/light box with no matching dark surface, and any
   text relying on inheritance (e.g. the Shipping Method modal's
   ShippingCompany/delivery-date text, which has no class of its own) fell
   back to the near-white body color from the .modal-content fix above,
   landing right back on top of these still-light card backgrounds. ── */
:root[data-theme="dark"] .pd-title-bar,
:root[data-theme="dark"] .order-summary-card,
:root[data-theme="dark"] .trust-card,
:root[data-theme="dark"] .variant-table-card,
:root[data-theme="dark"] .variant-unavailable-card,
:root[data-theme="dark"] .size-add-card,
:root[data-theme="dark"] .seller-score-panel,
:root[data-theme="dark"] .shipping-modal-basis,
:root[data-theme="dark"] .pd-tier-strip,
:root[data-theme="dark"] .shipping-mode-toggle,
:root[data-theme="dark"] .gallery-main,
:root[data-theme="dark"] .osr-shipping-pending {
    background: var(--pm-surface);
    border-color: var(--pm-border);
}
:root[data-theme="dark"] .order-summary-row,
:root[data-theme="dark"] .osr-delivery,
:root[data-theme="dark"] .osr-shipping-disclaimer,
:root[data-theme="dark"] .trust-badge,
:root[data-theme="dark"] .size-add-row,
:root[data-theme="dark"] .ssp-scores-row,
:root[data-theme="dark"] .review-summary,
:root[data-theme="dark"] .variant-table th,
:root[data-theme="dark"] .variant-table td,
:root[data-theme="dark"] .variant-table-showmore {
    border-color: var(--pm-border) !important;
}
:root[data-theme="dark"] .order-summary-row.osr-qty,
:root[data-theme="dark"] .order-summary-row.osr-shipping:hover,
:root[data-theme="dark"] .size-add-head span,
:root[data-theme="dark"] .oqc-btn,
:root[data-theme="dark"] .smt-btn {
    background: var(--pm-surface-2);
}
:root[data-theme="dark"] .order-summary-total-row {
    background: rgba(217,21,34,0.14);
}
/* Primary readable text -- was #222/#333/black relying on a light card
   background that no longer exists in dark mode. */
:root[data-theme="dark"] .pd-title-main h1,
:root[data-theme="dark"] .osr-value,
:root[data-theme="dark"] .osr-total-label,
:root[data-theme="dark"] .trust-text-label,
:root[data-theme="dark"] .vt-name,
:root[data-theme="dark"] .sar-size,
:root[data-theme="dark"] .sar-price,
:root[data-theme="dark"] .ssp-seller-name,
:root[data-theme="dark"] .review-summary-score,
:root[data-theme="dark"] .similar-products-header,
:root[data-theme="dark"] .pd-tier-price,
:root[data-theme="dark"] .elim-opt-label,
:root[data-theme="dark"] .elim-opt-label strong,
:root[data-theme="dark"] .reviews-empty > div:nth-child(2),
:root[data-theme="dark"] .p_d_title,
:root[data-theme="dark"] .osr-payment-split .osr-row,
:root[data-theme="dark"] .p_color > div,
:root[data-theme="dark"] .oqc-input {
    color: var(--pm-text) !important;
}
:root[data-theme="dark"] .oqc-input {
    background-color: transparent;
}
/* Solid inner disk (score number) inside the colored gauge ring -- stays a
   deliberately solid surface, not transparent, or the number loses its
   contrasting backdrop against whatever color the ring itself is. */
:root[data-theme="dark"] .ssp-gauge-inner {
    background: var(--pm-surface-2);
    color: var(--pm-text);
}
/* Secondary/muted text -- was #666-#999 relying on a light card
   background; still muted relative to the text above, just legible now. */
:root[data-theme="dark"] .osr-label,
:root[data-theme="dark"] .osr-label small,
:root[data-theme="dark"] .osr-change-link,
:root[data-theme="dark"] .osr-pending-bn,
:root[data-theme="dark"] .osr-accum-label,
:root[data-theme="dark"] .pd-rating-text,
:root[data-theme="dark"] .trust-text-sub,
:root[data-theme="dark"] .vt-stock,
:root[data-theme="dark"] .sar-stock-inline,
:root[data-theme="dark"] .ssp-gauge-label,
:root[data-theme="dark"] .ssp-score-label,
:root[data-theme="dark"] .evs-stock,
:root[data-theme="dark"] .elim-variant-hint,
:root[data-theme="dark"] .review-summary-count,
:root[data-theme="dark"] .similar-products-spinner,
:root[data-theme="dark"] .reviews-empty,
:root[data-theme="dark"] .reviews-empty-sub,
:root[data-theme="dark"] .variant-table th,
:root[data-theme="dark"] .pd-tier-qty,
:root[data-theme="dark"] .elim-swatch-list li span,
:root[data-theme="dark"] .osr-payment-split .osr-row.pay-delivery {
    color: var(--pm-muted) !important;
}
:root[data-theme="dark"] .osr-payment-split .osr-row.pay-now {
    color: #6fa8ff !important;
}
:root[data-theme="dark"] .gallery-main-img,
:root[data-theme="dark"] .gallery-thumb,
:root[data-theme="dark"] .vt-thumb img {
    border-color: var(--pm-border);
}
:root[data-theme="dark"] .elim-swatch-list li {
    background: var(--pm-surface-2);
    border-color: var(--pm-border);
}
:root[data-theme="dark"] .elim-swatch-list li:hover {
    border-color: var(--pm-text-dim);
}
:root[data-theme="dark"] .smt-btn {
    color: var(--pm-text);
    border-color: var(--pm-border);
}
:root[data-theme="dark"] .rf-btn {
    background: var(--pm-surface-2);
    color: var(--pm-text);
    border-color: var(--pm-border);
}
:root[data-theme="dark"] .order-qty-controls {
    border-color: var(--pm-border);
}
:root[data-theme="dark"] .oqc-btn {
    color: var(--pm-text);
}
:root[data-theme="dark"] .oqc-btn:hover {
    background: var(--pm-light);
}
:root[data-theme="dark"] .oqc-input {
    border-left-color: var(--pm-border);
    border-right-color: var(--pm-border);
}
:root[data-theme="dark"] .pd-action-btn {
    background: var(--pm-surface-2);
    border-color: var(--pm-border);
    color: var(--pm-text) !important;
}
:root[data-theme="dark"] .product_description_area .nav-tabs .nav-link {
    background: var(--pm-surface-2) !important;
    color: var(--pm-text) !important;
    border-color: var(--pm-border) !important;
}
:root[data-theme="dark"] .pd-tier-strip {
    background: var(--pm-surface-2);
}
:root[data-theme="dark"] .pd-tier.active {
    background: rgba(31,191,117,0.16);
}

/* ══════════════════════════════════════════════════════════════════════
   Cart page (CartIndex.cshtml's own <style> block -- item table, group
   headers, Cart Summary card, Edit-line modal, Shipping cost-explanation
   modal). Same pattern as Product Details above: hardcoded light hex with
   no --pm-* tokens and no dark override, including two custom modals
   (.cart-edit-inner / .cart-ship-explain-inner) that are NOT Bootstrap
   .modal-content, so the global modal fix above doesn't reach them. ── */
:root[data-theme="dark"] .cart-tab,
:root[data-theme="dark"] .cart-group-title-row td,
:root[data-theme="dark"] .cart-group-header td,
:root[data-theme="dark"] .cart-group-subtotal td,
:root[data-theme="dark"] .cart-edit-inner,
:root[data-theme="dark"] .cart-edit-variant-table,
:root[data-theme="dark"] .cart-edit-cancel-btn,
:root[data-theme="dark"] .cart-ship-explain-inner {
    background: var(--pm-surface);
    border-color: var(--pm-border);
}
:root[data-theme="dark"] .cart-edit-delete-btn {
    background: transparent;
}
:root[data-theme="dark"] .cart-edit-variant-row:hover {
    background: var(--pm-surface-2);
}
:root[data-theme="dark"] .cart-edit-variant-row.selected,
:root[data-theme="dark"] .cart-pay-later-box,
:root[data-theme="dark"] .cart-edit-delete-btn:hover {
    background: rgba(217,21,34,0.16);
}
:root[data-theme="dark"] .cart-edit-cancel-btn:hover {
    background: var(--pm-light);
}
:root[data-theme="dark"] .cart-summary-row,
:root[data-theme="dark"] .cart-pay-now-row,
:root[data-theme="dark"] .cart-edit-variant-row,
:root[data-theme="dark"] .cse-row {
    border-color: var(--pm-border) !important;
}
/* Primary readable text */
:root[data-theme="dark"] .input-text.qty,
:root[data-theme="dark"] .cart-group-title-link,
:root[data-theme="dark"] .cart-item-details-row span:first-child,
:root[data-theme="dark"] .cart-summary-row span:last-child,
:root[data-theme="dark"] .cart-edit-inner h3,
:root[data-theme="dark"] .cart-ship-explain-inner h3,
:root[data-theme="dark"] .cev-label,
:root[data-theme="dark"] .cse-name,
:root[data-theme="dark"] .cse-amount {
    color: var(--pm-text) !important;
}
/* Secondary/muted text */
:root[data-theme="dark"] .cart-item-details-row,
:root[data-theme="dark"] .cart-summary-row span:first-child,
:root[data-theme="dark"] .cart-promo-code-tag,
:root[data-theme="dark"] .cev-stock,
:root[data-theme="dark"] .cart-edit-variants-loading,
:root[data-theme="dark"] .cart-edit-field label,
:root[data-theme="dark"] .cart-edit-hint,
:root[data-theme="dark"] .cart-ship-explain-note,
:root[data-theme="dark"] .cse-basis,
:root[data-theme="dark"] .cart-edit-close,
:root[data-theme="dark"] .cart-ship-explain-close {
    color: var(--pm-muted) !important;
}
:root[data-theme="dark"] .cart-edit-cancel-btn {
    color: var(--pm-text) !important;
}
:root[data-theme="dark"] .cart-group-title-link img,
:root[data-theme="dark"] .cart-edit-variant-row img,
:root[data-theme="dark"] .cse-row img {
    border-color: var(--pm-border);
}
:root[data-theme="dark"] .cart-group-checkbox {
    border-color: var(--pm-text-dim);
}
:root[data-theme="dark"] .cse-total-row {
    border-color: var(--pm-border);
}

/* ══════════════════════════════════════════════════════════════════════
   Wishlist page (Wishlist.cshtml). Mostly already token-based (--pm-text/
   -red/-navy), but .wishlist-header-title h2 used var(--pm-navy) directly
   -- --pm-navy is a brand color that stays dark navy in BOTH themes (by
   design, see the dark-mode token block's own comment), so a heading
   using it as its TEXT color reads fine on a light page but goes
   near-invisible dark-navy-on-near-black once the page background itself
   goes dark -- the exact "dark text on dark surface" failure mode. Same
   already-fixed pattern as .home-section-title elsewhere in this file. ── */
:root[data-theme="dark"] .wishlist-header-title h2 {
    color: var(--pm-text);
}
:root[data-theme="dark"] .wishlist-header-date {
    color: var(--pm-muted);
}
:root[data-theme="dark"] .wishlist-card {
    background: var(--pm-surface);
    border-color: var(--pm-border);
}
:root[data-theme="dark"] .wishlist-card-img {
    background: var(--pm-surface-2);
}
:root[data-theme="dark"] .wishlist-delete-btn {
    background: rgba(217,21,34,0.16);
}

/* ══════════════════════════════════════════════════════════════════════
   Checkout page (Checkout.cshtml's own <style> block -- address/delivery
   form cards, shipping/payment method selectors, card-details placeholder
   form). Same hardcoded-light pattern as Cart/Product Details above. ── */
:root[data-theme="dark"] .checkout-card,
:root[data-theme="dark"] .co-cc-dropdown {
    background: var(--pm-surface);
    border-color: var(--pm-border);
}
:root[data-theme="dark"] .co-cc-select {
    background: var(--pm-surface-2);
    border-color: var(--pm-border);
}
:root[data-theme="dark"] .co-cc-dropdown li:hover {
    background: var(--pm-surface-2);
}
:root[data-theme="dark"] .co-delivery-method,
:root[data-theme="dark"] .co-pay-method {
    border-color: var(--pm-border);
}
:root[data-theme="dark"] .co-delivery-method:hover,
:root[data-theme="dark"] .co-pay-method:hover {
    border-color: var(--pm-text-dim);
}
:root[data-theme="dark"] .co-ship-row,
:root[data-theme="dark"] .co-pay-now-row,
:root[data-theme="dark"] .co-grand-total {
    border-color: var(--pm-border) !important;
}
:root[data-theme="dark"] .co-pickup-note {
    background: rgba(44,123,229,0.16);
    color: #8fc4ff;
}

/* ══════════════════════════════════════════════════════════════════════
   Bank Transfer Payment page (BankPayment.cshtml's own <style> block) --
   same hardcoded-light-inline + dark-override pattern as Checkout above. */
:root[data-theme="dark"] .bp-account-card,
:root[data-theme="dark"] .bp-summary {
    background: var(--pm-surface);
    border-color: var(--pm-border);
}
:root[data-theme="dark"] .bp-account-card:hover {
    border-color: var(--pm-text-dim);
}
:root[data-theme="dark"] .bp-account-avatar {
    background: var(--pm-surface-2);
    border-color: var(--pm-border);
}
:root[data-theme="dark"] .bp-account-rows {
    border-top-color: var(--pm-border);
}
:root[data-theme="dark"] .bp-account-row .val {
    color: var(--pm-text);
}
:root[data-theme="dark"] .bp-account-instruction {
    border-top-color: var(--pm-border);
}
:root[data-theme="dark"] .bp-empty {
    background: var(--pm-surface);
    border-color: var(--pm-border);
}
:root[data-theme="dark"] .bp-amount-row {
    background: var(--pm-surface-2);
}
:root[data-theme="dark"] .bp-field input[type="text"] {
    background: var(--pm-surface-2);
    border-color: var(--pm-border);
    color: var(--pm-text);
}
:root[data-theme="dark"] .bp-back,
:root[data-theme="dark"] .bp-header p,
:root[data-theme="dark"] .bp-section-label,
:root[data-theme="dark"] .bp-account-row .lbl,
:root[data-theme="dark"] .bp-account-instruction,
:root[data-theme="dark"] .bp-empty,
:root[data-theme="dark"] .bp-amount-label,
:root[data-theme="dark"] .bp-recap,
:root[data-theme="dark"] .bp-field label,
:root[data-theme="dark"] .bp-trust-note,
:root[data-theme="dark"] .bp-copy-btn {
    color: var(--pm-text-dim);
}
:root[data-theme="dark"] .bp-recap strong,
:root[data-theme="dark"] .bp-field label {
    color: var(--pm-text);
}
:root[data-theme="dark"] .bp-field input[type="text"]::placeholder {
    color: var(--pm-text-dim);
}
:root[data-theme="dark"] .bp-copy-btn:hover {
    color: var(--pm-red);
}
:root[data-theme="dark"] .co-pay-later-box {
    background: rgba(217,21,34,0.16);
}
:root[data-theme="dark"] .co-card-form {
    background: rgba(245,166,35,0.14);
    border-color: rgba(245,166,35,0.5);
}
:root[data-theme="dark"] .co-card-form input {
    background: var(--pm-surface-2);
    color: var(--pm-muted);
    border-color: var(--pm-border);
}
/* Primary readable text */
:root[data-theme="dark"] .co-dm-label,
:root[data-theme="dark"] .co-ship-row .co-ship-name,
:root[data-theme="dark"] .co-pay-method .co-pay-label {
    color: var(--pm-text) !important;
}
/* Secondary/muted text */
:root[data-theme="dark"] .co-field label,
:root[data-theme="dark"] .co-dm-sub,
:root[data-theme="dark"] .co-terms {
    color: var(--pm-muted) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   Order History page (OrderHistory.cshtml). ── */
:root[data-theme="dark"] .oh-tracker-step {
    background: var(--pm-surface-2);
    color: var(--pm-muted);
}
:root[data-theme="dark"] .oh-detail-grid .lbl {
    color: var(--pm-muted);
}
:root[data-theme="dark"] .oh-notes {
    background: var(--pm-surface-2);
}
:root[data-theme="dark"] .oh-admin-message {
    background: rgba(245,166,35,0.14);
    border-color: rgba(245,166,35,0.5);
}
/* Horizontal scroll-shadow hint on the orders table -- built from literal
   #fff gradient layers so the "fade" reads as part of a white table
   background; on a dark surface the same #fff layers paint as a bright
   white smear across the table's edges instead of a subtle fade. Same
   technique, --pm-surface instead of #fff. */
:root[data-theme="dark"] .table-responsive-md {
    background-color: var(--pm-surface);
    background-image:
        linear-gradient(to right, var(--pm-surface) 30%, rgba(35,35,66,0)),
        linear-gradient(to right, rgba(35,35,66,0), var(--pm-surface) 70%),
        linear-gradient(to right, rgba(0,0,0,.4), rgba(0,0,0,0)),
        linear-gradient(to left, rgba(0,0,0,.4), rgba(0,0,0,0));
}
/* "VIEW ORDER" button -- .view_order_btn (custom.css, base rules) has its
   own explicit color: #333 on a border-only/transparent button, which is
   a CLASS selector and so beats the inherited body { color: var(--pm-text) }
   (a plain element selector always loses to any class, !important or not)
   -- near-black text with only a faint #ccc border, on a dark page, is
   exactly the "almost invisible" VIEW ORDER button reported. */
:root[data-theme="dark"] .view_order_btn {
    color: var(--pm-text) !important;
    border-color: var(--pm-border) !important;
    background: transparent;
}
:root[data-theme="dark"] .view_order_btn:hover {
    background: var(--pm-red) !important;
    border-color: var(--pm-red) !important;
    color: #fff !important;
}
/* Order tabs (All/Processing/Delivered/Cancelled) -- vendor style.css's
   .product_description_area .tab_menu .nav-tabs a rule sets the ACTIVE
   tab to a literal color: #000 with a matching #000 underline (fine on
   the light page it was designed for, invisible on a dark one); the
   inactive tabs' #cccccc stays legible either way but gets an explicit
   token here too so hover/active read as a clear, intentional hierarchy
   rather than relying on a light-mode-tuned gray. Scoped to .tab_menu
   specifically (not the broader .nav-tabs .nav-link rule used by Product
   Details' own pill-style tabs above) so these keep their real underline
   style instead of picking up a boxed background that wasn't designed for
   this layout. */
:root[data-theme="dark"] .product_description_area .tab_menu .nav-tabs a {
    color: var(--pm-muted);
    border-bottom-color: var(--pm-border);
    background: transparent !important;
}
:root[data-theme="dark"] .product_description_area .tab_menu .nav-tabs a:hover {
    color: var(--pm-text);
}
:root[data-theme="dark"] .product_description_area .tab_menu .nav-tabs a.active {
    color: var(--pm-text) !important;
    border-bottom: 2px solid var(--pm-red) !important;
    font-weight: 700;
}
/* Order table itself -- <th>/<td> have no class of their own (plain
   Bootstrap .table), so they normally just inherit body's already
   theme-aware color -- explicit here too so the header row reads as a
   distinct, slightly-elevated surface (per the requested "table header:
   slightly lighter dark surface") rather than blending into the card,
   and so this doesn't rely purely on inheritance holding up. */
:root[data-theme="dark"] .product_description_area .table thead th {
    background: var(--pm-surface-2);
    color: var(--pm-text);
    border-color: var(--pm-border);
}
:root[data-theme="dark"] .product_description_area .table tbody td {
    color: var(--pm-text);
    border-color: var(--pm-border);
}
:root[data-theme="dark"] .product_description_area .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255,255,255,0.03);
}
:root[data-theme="dark"] .product_description_area .table tbody tr:hover {
    background-color: var(--pm-surface-2);
}
/* Empty state ("No orders here yet") -- inline style="color:#888" in the
   markup; only a stylesheet !important rule can beat an inline style. */
:root[data-theme="dark"] .product_description_area .table tbody td[colspan] {
    color: var(--pm-muted) !important;
}
:root[data-theme="dark"] .order_details_hedader h3 {
    border-color: var(--pm-border);
}

/* --- Marketplace nav bar (replaces the old dark promo-bar) ---
   White background, 5 real marketplace buttons + a Services dropdown
   holding the policy/info links moved out of .shop_header_area. */
.marketplace-nav-bar {
    background: #fff;
    border-bottom: 1px solid var(--pm-border);
}
.marketplace-nav-inner {
    display: flex;
    align-items: center;
    /* flex-start (was space-between) -- now 3 children (logo, marketplace
       links, right group), not 2. space-between would spread all 3 with
       EQUAL gaps, which doesn't match "logo far left, marketplace buttons
       roughly centered in the middle, Services/Account/etc at the far
       right" -- .marketplace-nav-links' own margin-left:auto AND
       margin-right:auto below (2026-08-16, "buttons need to be a bit
       left side") are what actually produce that: together they absorb
       ALL the free space on both sides of the button row, floating it
       centered in the gap between the logo and the right group instead
       of flush against either one. */
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 14px;
    padding: 7px 0;
}
/* Header logo -- moved here from the old row 2 (.top_header_left, removed).
   Sized to the row's own ~48px budget (34px button height + padding), not
   the old row's ~46px allowance, which would visually dominate this
   slimmer bar. Real aspect ratio 1158x261 (4.437:1, see .logo-plate below)
   so height-only sizing never distorts it (transparent PNG background,
   unchanged asset). 30px -> 34px (2026-08-16, +13%, same ~13% bump at
   the tablet/mobile tiers below) -- still within the 34px button-height
   budget this row was already sized for, so the row itself doesn't grow
   any taller; height-only sizing keeps the aspect ratio locked, no
   stretching. */
.marketplace-nav-logo {
    flex: 0 0 auto;
}
.marketplace-nav-logo-img {
    display: block;
    height: 34px;
    width: auto;
}
.marketplace-nav-links {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
    /* margin-left:auto absorbs free space to its left (see
       .marketplace-nav-inner's comment above); margin-right:auto added
       2026-08-16 to also absorb free space to its right (between the
       buttons and .marketplace-nav-right), so the button row floats
       centered in the gap between the logo and the right-hand icon group
       instead of sitting flush against it -- shifts the buttons left,
       per "Marketplace buttons need to be sided a bit left side". */
    margin-left: auto;
    margin-right: auto;
}
.marketplace-nav-links::-webkit-scrollbar { display: none; }
/* Compact pill, matching the slim marketplace-filter-tab proportions used
   elsewhere in the app (ProductList's source tabs) -- reverts the earlier
   44px/20px-padding/22px-icon "prominent" sizing, which left too little
   room for Services/Theme/Account/Wishlist/Cart and read as oversized next
   to that reference. .marketplace-nav-links' own overflow-x:auto (above) +
   .marketplace-nav-right staying flex:0 0 auto (below) still absorb extra
   width at narrower desktop/tablet sizes -- the button row scrolls
   internally rather than the page overflowing or Services/Account/
   Wishlist/Cart getting clipped. Mobile (<768px) keeps its own compact
   override further down, unchanged in spirit. */
.marketplace-nav-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    /* gap, not margin-right on the icon -- most buttons are logo-only now
       (icon + conditional text, see the ng-if in _Layout.cshtml), and a
       gap correctly contributes nothing when there's only the one child,
       where a fixed margin-right on the icon would leave lopsided padding
       on buttons with no label rendered next to it. */
    gap: 6px;
    height: 34px;
    box-sizing: border-box;
    background: transparent;
    /* Bolder navy outline (was a subtle light-gray border) -- the
       "dark/navy outlined pill" look for the not-currently-browsing
       marketplaces. */
    border: 1.5px solid var(--pm-navy);
    border-radius: 17px;
    padding: 0 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pm-text);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--pm-transition), color var(--pm-transition), border-color var(--pm-transition);
}
.marketplace-nav-btn:hover {
    background: var(--pm-red);
    border-color: var(--pm-red);
    color: #fff;
}
.marketplace-nav-btn:hover span {
    color: #fff !important; /* overrides a per-marketplace labelColor (Taobao/1688) while hovering/active */
}
/* Real "currently browsing this marketplace" state -- bound to
   $rootScope.currentSourceTab (logInController.js isActiveMarketplace),
   the same value productController.js's own tab-switching already
   maintains, not a separate/fake selection. Red/pink filled pill with
   white text/icon-backdrop. */
.marketplace-nav-btn-active {
    background: var(--pm-red) !important;
    border-color: var(--pm-red) !important;
    color: #fff !important;
}
.marketplace-nav-btn-active span {
    color: #fff !important;
}
/* height-only sizing, width:auto -- these are now the real wordmark/logo
   assets (source-{platform}-logo.svg), not square icon badges, so a fixed
   width would squeeze/distort non-square marks (AliExpress and eBay's
   wordmarks are much wider than tall; 1688/Taobao/Ready Stock stay
   naturally square-ish at this height). No border-radius: these are full
   logo art, not solid-color icon tiles, so rounding the corners would clip
   real brand pixels near the edges (e.g. eBay's green "y"). No filter of
   any kind, so each mark keeps its own official brand colors in both
   Light and Dark Mode -- only the surrounding pill/text adapt to theme.
   .marketplace-nav-links' own overflow-x:auto (above) is what absorbs any
   extra row width these wider marks add, same safety net as the compact
   pill sizing already relies on. */
.marketplace-nav-btn-icon {
    height: 18px;
    width: auto;
    flex-shrink: 0;
    vertical-align: middle;
}
/* Taobao/1688 disabled state (logInController.js marketplaceNav's
   disabled:true, bound via ng-disabled in _Layout.cshtml) -- kept
   visible, just grayed out and inert, so the button row's layout and
   brand lineup don't shift. */
.marketplace-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
/* Tablet/narrow-desktop tier (768-1279px, e.g. 1024px/1280px) -- a further
   step down from the compact base so 5 buttons + Ready Stock +
   Services/Theme/Account/Wishlist/Cart are never crowded or forced into
   the row's own horizontal scroll at these in-between widths. */
@media (min-width: 768px) and (max-width: 1279px) {
    .marketplace-nav-btn { height: 32px; padding: 0 12px; font-size: 11.5px; border-radius: 16px; gap: 5px; }
    .marketplace-nav-btn-icon { height: 16px; width: auto; }
    .marketplace-nav-links { gap: 6px; }
    .marketplace-nav-logo-img { height: 30px; } /* was 26px, same +~15% bump as the desktop tier */
}
/* Right-hand group (Services / theme toggle / account / wishlist / cart) --
   kept at its natural content width (flex: 0 0 auto) so it's never clipped;
   .marketplace-nav-links (the scrollable marketplace-button row) is what
   shrinks/scrolls under space pressure instead, via its own min-width: 0 +
   overflow-x: auto above. */
.marketplace-nav-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}
/* ── Notification bar (4th bar inside #site-header, below "All
   Categories") ──
   Restored 2026-08-16 after a same-day detour removed it in favor of the
   right-side .promo-badge-zone below -- that was a correction too far,
   the two are independent trigger UIs onto the same activeNotification
   data, not a replacement of one by the other.
   --pm-surface-2/--pm-text/--pm-border/--pm-red/--pm-muted are already
   theme-aware custom properties (redefined under :root[data-theme="dark"]
   further up this file), so this whole block needs no separate dark-mode
   override -- same approach as .ai-search-tooltip above. */
.notification-bar {
    background: var(--pm-surface-2);
    border-bottom: 1px solid var(--pm-border);
}
/* Shared hover/focus region for the bar + popover (markup) -- :hover and
   :focus-within on THIS element are what gate the popover below, not
   :hover on .notification-bar-wrap alone, because .notification-popover
   is its own positioned box, not visually inside the wrap's box. Treating
   both as descendants of one ancestor is what lets the mouse move off the
   wrap and into the popover without a "leaves the wrap -> hides -> mouse
   arrives in empty space" flicker. */
.notification-hover-zone {
    position: relative;
}
.notification-bar-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
}
/* Icon sits on the RIGHT of the bar (markup order: track, then icon) --
   reads clearly as a "there's more here" affordance next to the frozen
   text, not a decorative afterthought. */
.notification-bar-icon {
    flex-shrink: 0;
    color: var(--pm-red);
    font-size: 18px;
}
.notification-bar-track {
    flex: 1 1 auto;
    min-width: 0;
}
/* Frozen, not scrolling -- 2026-08-16 correction: a same-day parallel
   change had reintroduced a right-to-left marquee (@keyframes
   notif-marquee, since removed) that had already been explicitly
   rejected once before ("the announcement text shold not scrooling, make
   it freez"). Centered + bold red so the message still reads as an
   urgent/highlighted notice at a glance without needing a scroll cycle
   to read the whole thing. */
.notification-bar-text {
    display: block;
    white-space: normal;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--pm-red);
}
@media (max-width: 576px) {
    .notification-bar-text { font-size: 13px; }
}
/* The bar's own hover/focus popover (.announcement-popover, formerly
   anchored under .notification-hover-zone) was removed 2026-08-16 --
   hovering/focusing the bar now does nothing (the text is frozen, not a
   marquee, so there's nothing left to pause either), it never opens a
   popup. The PROMO CODE badge's .promo-popup below is the sole
   remaining hover-triggered popup on the site, and was already an
   entirely separate element/trigger/open-close-state from this bar, so
   nothing there needed to change. .announcement-promo-card and its
   children just below are NOT part of this removal -- .promo-popup-body
   (the badge's popup) still renders that same coupon/countdown card, so
   those rules stay. */
@media (max-width: 576px) {
    .announcement-promo-code { font-size: 19px; }
}

/* ── Left-side category badge (2026-08-19) ──
   Mirrors .promo-badge-zone on the right but for product categories.
   Shows only a grid icon (fa-th) that expands into a category popup on
   hover. The popup displays all the main category icons/images from the
   left sidebar. Hovering this badge also ensures the sidebar stays
   expanded via body.sidebar-hovered (same class the sidebar's own
   mouseenter already adds -- this badge just gives an extra affordance
   to trigger that expansion). --pm-navy/-surface/-text/-shadow-lg are
   already theme-aware custom properties (redefined under
   :root[data-theme="dark"] further up this file), so this whole block
   needs no separate dark-mode override -- same approach as .ai-search-tooltip. */
.category-badge-zone {
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 2147483647; /* matches .promo-badge-zone and #site-header */
}
.category-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 82px;
    background: linear-gradient(160deg, var(--pm-navy), var(--pm-text));
    color: #fff;
    border: none;
    border-radius: 0 10px 10px 0;
    box-shadow: var(--pm-shadow-lg, 0 8px 24px rgba(0,0,0,0.22));
    cursor: pointer;
    padding: 0;
    transition: transform var(--pm-transition), box-shadow var(--pm-transition);
}
.category-badge:hover,
.category-badge:focus-visible {
    transform: translateX(4px);
    box-shadow: 0 10px 28px rgba(31,78,121,0.4);
    outline: none;
}
.category-badge-icon {
    font-size: 20px;
}
/* Category popup -- position:fixed, left-aligned (opposite of promo popup
   which opens to the left from a right badge). Scrollable grid of category
   icons/labels. Same animation pattern as promo popup but mirrored: closed
   state sits 20px further LEFT, open state slides/fades to resting place. */
.category-popup {
    position: fixed;
    top: 50%;
    left: 58px;
    max-width: min(880px, calc(100vw - 90px));
    max-height: min(80vh, 420px);
    background: var(--pm-surface, #fff);
    color: var(--pm-text);
    border-radius: 16px;
    box-shadow: var(--pm-shadow-lg, 0 16px 44px rgba(0,0,0,0.3));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-20px, -50%);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
    padding: 20px 22px 24px;
    overflow-y: auto;
}
.category-popup.category-popup-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(0, -50%);
}
.category-popup-header {
    font-size: 18px;
    font-weight: 800;
    color: var(--pm-navy, var(--pm-text));
    margin-bottom: 16px;
    text-align: center;
}
.category-popup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 12px;
    align-items: start;
}
.category-popup-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--pm-text);
    transition: background var(--pm-transition), transform var(--pm-transition);
}
.category-popup-item:hover {
    background: var(--pm-surface-2);
    transform: scale(1.08);
}
.category-popup-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}
.category-popup-label {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    word-break: break-word;
    line-height: 1.2;
    max-width: 80px;
}

/* ── Right-side hover promo badge (2026-08-16) ──
   Independent of the notification bar above -- same underlying
   activeNotification data, a separate trigger element with its own
   open/close state (route.js). Lives outside #site-header entirely --
   position:fixed against the viewport, marked up next to the WhatsApp
   FAB in _Layout.cshtml -- so it's independent of header height/scroll
   state. Pinned mid-right (top: 45%) so it never collides with the
   draggable WhatsApp FAB, which defaults to bottom-right (see
   .whatsapp-fab below).
   --pm-red/-orange/-surface/-text/-muted/-shadow-lg are already
   theme-aware custom properties (redefined under :root[data-theme="dark"]
   further up this file), so this whole block needs no separate dark-mode
   override -- same approach as .ai-search-tooltip above. */
.promo-badge-zone {
    position: fixed;
    top: 45%;
    right: 0;
    /* Was 2147483000 -- one short of #site-header's own 2147483647 (below),
       which meant the header (a SEPARATE position:fixed stacking context,
       not an ancestor of this one -- both are top-level children of body)
       simply out-ranked it and painted on top wherever the two visually
       overlapped, hiding the popup behind the header/search bar. No
       overflow:hidden ancestor is actually clipping this element (it
       already sits outside #site-header/.page-layout entirely, right next
       to .whatsapp-fab, which renders correctly fixed at this same DOM
       depth) -- matching the header's own z-index value is what actually
       fixes it, same tie-break the Bootstrap-modal-vs-header rule further
       down this file already relies on: equal z-index falls back to DOM
       order, and this markup renders after #site-header in
       _Layout.cshtml, so it wins the tie. */
    z-index: 2147483647;
}
.promo-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 82px;
    background: linear-gradient(160deg, var(--pm-red), var(--pm-orange));
    color: #fff;
    border: none;
    border-radius: 10px 0 0 10px;
    box-shadow: var(--pm-shadow-lg, 0 8px 24px rgba(0,0,0,0.22));
    cursor: pointer;
    padding: 0;
    transition: transform var(--pm-transition), box-shadow var(--pm-transition);
}
.promo-badge:hover,
.promo-badge:focus-visible {
    transform: translateX(-4px);
    box-shadow: 0 10px 28px rgba(217,21,34,0.4);
    outline: none;
}
.promo-badge-text {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.6;
    text-transform: uppercase;
}
/* Popup -- position:fixed (not absolute off the badge) so its width/
   centering math is independent of the badge's own small box. Opens
   toward the left: the closed state sits 20px further right and fully
   transparent, the open state slides/fades to its resting place --
   transform+opacity only (never an animated `right`), so this stays
   compositor-only instead of triggering layout on every frame.
   Stacked (image on top, text below) -> side-by-side row (2026-08-16):
   a stacked layout can't get noticeably WIDER without also getting
   noticeably TALLER, because the real promo image is a fixed 3:2 ratio
   (1536x1024) -- at any width W, a stacked image is W/1.5 tall on top of
   the text/coupon/button below it. Going wider-and-shorter at the same
   time needs the image beside the text instead of above it, so width and
   height stop being coupled through the image's own aspect ratio. No
   width set here (was a fixed 360px) -- left to size naturally from its
   flex children (image's own width below + however much of the
   remaining space .promo-popup-body's content actually needs), capped by
   max-width, which is what lands it in the requested ~700-900px desktop
   range without hardcoding one exact number. max-height dropped from
   min(90vh, 580px) to min(80vh, 420px) to match: content is now only as
   tall as the taller of (image's own height, .promo-popup-body's natural
   content height) instead of the two stacked on top of each other, so it
   no longer needs nearly as much vertical budget. overflow-y:auto moved
   off this element onto .promo-popup-body below -- if content somehow
   still doesn't fit, only the text column scrolls internally, keeping
   the image and the close button always fully visible rather than
   scrolling (or clipping) the whole card. */
.promo-popup {
    display: flex;
    align-items: stretch;
    position: fixed;
    top: 45%;
    right: 58px;
    max-width: min(880px, calc(100vw - 90px));
    max-height: min(80vh, 420px);
    background: var(--pm-surface, #fff);
    color: var(--pm-text);
    border-radius: 16px;
    box-shadow: var(--pm-shadow-lg, 0 16px 44px rgba(0,0,0,0.3));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(20px, -50%);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    z-index: 2147483647; /* matches #site-header/.promo-badge-zone -- see that comment for why */
    text-align: center;
}
.promo-popup.promo-popup-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(0, -50%);
}
.promo-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
    transition: background var(--pm-transition);
}
.promo-popup-close:hover,
.promo-popup-close:focus-visible {
    background: var(--pm-red);
    outline: none;
}
/* Left column of the flex row -- width is self-determined (viewport-
   relative + capped), NOT derived from the flex row's own height, which
   would otherwise be circular (the row's height depends on its tallest
   child, and this WAS that child before). height:auto then derives from
   THIS width via the image's real intrinsic aspect ratio, same
   non-distorting mechanism as before, just width-led instead of
   height-led. flex-shrink:0 keeps it from being squeezed narrower (and
   therefore proportionally shorter) than its own sizing by
   .promo-popup-body's flex:1 claiming space -- .promo-popup-body is the
   one that flexes to fill whatever room is left over instead. At the
   real promo image's 3:2 ratio this renders ~347px tall at the 520px
   cap, comfortably inside .promo-popup's max-height above. Rounded on
   the left only (was all 4 top corners, back when this sat above the
   text instead of beside it) -- .promo-popup-body has no background of
   its own to clip, so its corners need no matching treatment. */
.promo-popup-image {
    display: block;
    flex-shrink: 0;
    width: min(52vw, 520px);
    height: auto;
    max-height: min(60vh, 360px); /* safety ceiling for a future unusually tall/portrait upload -- object-fit:contain only letterboxes if this ever engages, never crops/distorts */
    object-fit: contain;
    background: var(--pm-surface-2);
    border-radius: 16px 0 0 16px;
}
.promo-popup-body {
    flex: 1 1 auto;
    min-width: 0; /* lets this column actually shrink to fit instead of forcing the row wider than max-width */
    overflow-y: auto; /* safety net (see .promo-popup's comment) -- scrolls only this column if content is ever taller than the image */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 22px 24px;
}
.promo-popup-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 800;
    color: var(--pm-red);
    margin-bottom: 8px;
}
.promo-popup-text {
    font-size: 13px;
    line-height: 1.55;
    color: var(--pm-muted);
    margin: 0 0 16px;
}
/* Coupon card -- dashed border reads as "tear off this code" without
   needing a scissors/ticket icon image. Only rendered when the admin has
   featured a real promo_code row (activeNotification.promoCode); the
   countdown/deadline lines inside are similarly conditional so a code
   with no expiry (usageLimit-only) just omits them cleanly. */
.announcement-promo-card {
    background: linear-gradient(135deg, var(--pm-surface-2), var(--pm-surface, #fff));
    border: 2px dashed var(--pm-red);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 18px;
}
.announcement-promo-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pm-muted);
    margin-bottom: 6px;
}
.announcement-promo-code-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}
.announcement-promo-code {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--pm-navy, var(--pm-text));
}
.announcement-promo-copy {
    border: 1px solid var(--pm-red);
    background: transparent;
    color: var(--pm-red);
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 14px;
    cursor: pointer;
    transition: background var(--pm-transition), color var(--pm-transition);
}
.announcement-promo-copy:hover {
    background: var(--pm-red);
    color: #fff;
}
.announcement-promo-discount {
    display: inline-block;
    background: var(--pm-red);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    padding: 3px 12px;
    border-radius: 12px;
    margin-bottom: 10px;
}
.announcement-promo-countdown {
    font-size: 13px;
    font-weight: 700;
    color: var(--pm-text);
}
.announcement-promo-countdown b {
    color: var(--pm-red);
    font-variant-numeric: tabular-nums;
}
.announcement-promo-deadline {
    font-size: 11.5px;
    color: var(--pm-muted);
    margin-top: 2px;
}
.promo-popup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pm-red);
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 26px;
    border-radius: 20px;
    text-decoration: none !important;
    transition: background var(--pm-transition);
}
.promo-popup-btn:hover {
    background: var(--pm-red-dark);
}
/* Mobile: badge just shrinks (stays mid-right, top: 45%, so it's still
   clear of the WhatsApp FAB regardless of viewport). Popup switches from
   "slide in from the right next to the badge" to a centered card with
   safe horizontal margins -- a fixed-width popup sliding in horizontally
   makes no sense once the badge itself is this small and the popup needs
   to span most of the viewport width instead. Also reverts the desktop
   side-by-side image+text row back to stacked (image on top): a ~350px
   phone width split into two flex columns leaves the text column too
   narrow for the coupon card to read comfortably, so this scales down by
   going back to full-width-image-then-text instead of shrinking the
   row's columns proportionally -- same stacked shape (and same
   max-height budget, min(90vh, 580px), the stacked layout needed before)
   this popup already used prior to the desktop-only wider/shorter
   change above. */
@media (max-width: 767px) {
    .promo-badge { width: 40px; height: 68px; }
    .promo-badge-text { font-size: 10px; }
    .promo-popup {
        flex-direction: column;
        right: 12px;
        left: 12px;
        max-width: calc(100vw - 24px);
        max-height: min(90vh, 580px);
        transform: translate(0, calc(-50% + 12px));
    }
    .promo-popup.promo-popup-open {
        transform: translate(0, -50%);
    }
    .promo-popup-image {
        width: 100%;
        max-height: min(40vh, 300px);
        border-radius: 16px 16px 0 0;
    }
    .promo-popup-body {
        justify-content: flex-start;
        padding: 16px 16px 20px;
    }
    .announcement-promo-code { font-size: 19px; }
}

.services-dropdown {
    position: relative;
    flex: 0 0 auto;
}
.services-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pm-text) !important;
    text-decoration: none !important;
    padding: 6px 4px;
    cursor: pointer;
    white-space: nowrap;
}
.services-dropdown-toggle:hover { color: var(--pm-red) !important; }
.services-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 230px;
    background: #fff;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    box-shadow: var(--pm-shadow-lg);
    list-style: none;
    margin: 8px 0 0;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--pm-transition), visibility var(--pm-transition), transform var(--pm-transition);
    z-index: 50;
}
.services-dropdown:hover .services-dropdown-menu,
.services-dropdown.open .services-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.services-dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    font-size: 13px;
    color: var(--pm-text) !important;
    text-decoration: none !important;
    white-space: nowrap;
}
.services-dropdown-menu li a:hover {
    background: var(--pm-light);
    color: var(--pm-red) !important;
}
@media (max-width: 767px) {
    /* Explicit height/border-radius/padding here (not just font-size) --
       5 buttons + Services + toggle + account/wishlist/cart share one line
       here (comment below), so mobile keeps its own slightly smaller row
       rather than just inheriting the desktop compact size.
       Icon stays visible (was display:none, relying on the text label
       alone) -- now that 4 of the 5 buttons render icon-only (no
       duplicate text label next to a logo that already spells the name),
       hiding the icon here would leave those buttons completely empty on
       mobile. .marketplace-nav-links' own overflow-x:auto is still the
       safety net if the row doesn't fully fit at a given width, same as
       desktop/tablet. */
    .marketplace-nav-btn { height: 32px; padding: 0 12px; font-size: 11.5px; border-radius: 16px; gap: 5px; }
    .marketplace-nav-links { gap: 6px; }
    .marketplace-nav-btn-icon { height: 16px; width: auto; }
    .marketplace-nav-logo-img { height: 25px; } /* was 22px, same +~14% bump as the desktop tier */
    .services-dropdown-toggle { font-size: 11.5px; }
    .services-dropdown-menu { right: -8px; min-width: 210px; }
    .marketplace-nav-right { gap: 8px; }
    /* Account/Wishlist/Cart now share the same compact top row as the
       marketplace buttons + Services -- icon-only on mobile (username/
       "Account" text hidden) so the row has room to breathe; wishlist/cart
       were already icon-only. */
    .acct-name-text { display: none; }
    .top_right .dropdown_menu[ng-show="userInfo.notLogin"] > a {
        font-size: 0;
    }
    .top_right .dropdown_menu[ng-show="userInfo.notLogin"] > a i {
        font-size: 16px;
    }
    .top_right { gap: 2px !important; }
}

/* Single fixed wrapper — promo + header + menu stack via normal block flow.
   A ResizeObserver snippet (end of body) syncs body padding-top and sidebar
   top to the wrapper height, so no hardcoded px values are needed anywhere. */
#site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2147483647;
    transition: transform 0.3s ease, opacity 0.3s ease;
    /* This wrapper's own box is always full-width/full-height (left:0,
       right:0, height = sum of its 3 stacked bars) regardless of any
       child's own offset. .shop_header_area (the 3rd bar) is shifted
       right by margin-left: 88px so it sits beside the sidebar instead
       of over it — but that only moves where its CONTENT paints, not
       this wrapper's own hit-testable box, which still geometrically
       covers the sidebar's column for that bar's full height. With no
       child painted there anymore, elementFromPoint in that gap hits
       this wrapper itself (z-index far above the sidebar), silently
       swallowing hover/click on the sidebar's top row. pointer-events:
       none here + auto on each direct child (each already positioned/
       sized correctly on its own) makes the wrapper transparent to
       events wherever none of its children actually render. */
    pointer-events: none;
}
#site-header > * {
    pointer-events: auto;
}

/* Hide-on-scroll-down state, toggled by the scroll listener at the end of <body>. */
#site-header.site-header--hidden {
    transform: translateY(-100%);
    opacity: 0;
}

/* Bootstrap modals default to z-index: 1050, far below #site-header's
   2147483647 — so any modal opened near the top of the viewport was rendered
   (and hit-tested) behind the fixed header, making its close button
   unreachable. Matching the header's z-index puts modals later in DOM order
   (they always render after #site-header) on top per the standard stacking
   tie-break, without needing to touch the header's own value. Backdrop is
   kept one below so the header still dims correctly under it. */
.modal {
    z-index: 2147483647 !important;
}
.modal-backdrop {
    z-index: 2147483646 !important;
}

/* Mobile-only: the sidebar drawer's top/height sit below the header via
   --pm-header-h. When the header hides on scroll, it no longer occupies
   that space, so the drawer expands to reclaim it. Desktop (>=768px)
   isn't affected -- .l_p_categories_widget is position:relative there
   (normal document flow inside .page-layout, see below), where forcing
   height: 100vh would make the sidebar column visually taller than the
   actual page content next to it, not just reclaim header space. */
@media (max-width: 767px) {
    #site-header.site-header--hidden ~ .categories_sidebar .l_p_categories_widget {
        top: 0 !important;
        /* dvh -- this is a position:fixed drawer; 100vh can size it past
           the real visible viewport on mobile (browser chrome showing),
           putting its bottom entries behind that chrome/the OS taskbar. */
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
}

/* body padding-top: fallback value while JS measurement hasn't fired yet.
   ResizeObserver will override this with the actual #site-header height.
   color: sitewide body/UI text neutral (was inherited black/dark-gray set
   ad hoc per component — see custom.css search for "#333"/"#000"). */
body {
    padding-top: 167px !important;
    color: var(--pm-text);
}

/* Site-wide .row uses a -9px negative margin (see .row rule near the top
   of this file) so product grids can bleed edge-to-edge — harmless at
   desktop widths where the container has slack around it, but on a
   full-viewport-width mobile .container it pushes 9px past the actual
   screen edge on each side.
   Previously "fixed" with `#navbar_top { overflow-x: hidden }`, but
   overflow-x set without overflow-y forces the browser to compute
   overflow-y as auto too (a CSS spec quirk — the two axes can't be
   independently visible/non-visible), which silently clipped the search
   dropdown's bottom half against #navbar_top's box. That left an empty-
   looking white rounded-corner fragment poking out below the search bar
   with none of its content visible — reported as a "ghost search bar" in
   the gap before the policy nav row.
   Fixed at the actual source instead: pad .container by exactly the
   row's own negative margin so it never bleeds past the edge in the
   first place, needing no overflow clipping at all. Scoped to the header
   only — the global .container/.row rule elsewhere intentionally allows
   edge-to-edge product grids and is untouched. */
.header_top_area .container {
    padding-left: 9px !important;
    padding-right: 9px !important;
}

/* --- Header: clean white top bar (was dark navy) --- */
#navbar_top {
    background: #fff !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
    border-bottom: 1px solid var(--pm-border);
}

/* Row 2: "All Categories" trigger + search, in that order -- replaces the
   old row.mobile_row > col-lg-3(logo) + col-lg-9(search) Bootstrap grid
   (logo moved to row 1; the toggle button moved in from what used to be a
   separate row 3, .shop_header_area, now removed -- see _Layout.cshtml).
   flex, not grid columns: the toggle button sizes to its own content
   (flex-shrink:0, it must never get squeezed by the search field growing),
   and .top_header_middle takes whatever's left. */
.header-second-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.header-second-row .mobile-cat-toggle.all-categories-btn {
    flex-shrink: 0;
    margin-left: -8px;
}
.header-second-row .top_header_middle {
    flex: 1 1 auto;
    min-width: 0;
}

.top_header_middle .input-group .form-control {
    border-top: 1.5px solid var(--pm-border) !important;
    border-bottom: 1.5px solid var(--pm-border) !important;
    border-left: 1.5px solid var(--pm-border) !important;
    border-right: none !important;
    background: var(--pm-light) !important;
    color: var(--pm-text) !important;
    border-radius: 24px 0 0 24px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.top_header_middle .input-group .form-control::placeholder {
    color: var(--pm-muted) !important;
}

.top_header_middle .input-group .input-group-btn {
    background: var(--pm-red) !important;
    border-radius: 0 24px 24px 0 !important;
    transition: background var(--pm-transition) !important;
}

.top_header_middle .input-group .input-group-btn:hover {
    background: var(--pm-red-dark) !important;
}

.top_right li a {
    color: var(--pm-text) !important;
    transition: color var(--pm-transition);
}

.top_right li a:hover {
    color: var(--pm-red) !important;
}

/* --- Theme toggle button (header) --- */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--pm-border);
    background: transparent;
    color: var(--pm-text);
    font-size: 15px;
    cursor: pointer;
    transition: background var(--pm-transition), color var(--pm-transition), border-color var(--pm-transition);
}
.theme-toggle-btn:hover {
    background: var(--pm-surface-2);
    color: var(--pm-red);
}
.theme-toggle-icon-light { display: none; }
:root[data-theme="dark"] .theme-toggle-icon-light { display: inline-block; }
:root[data-theme="dark"] .theme-toggle-icon-dark { display: none; }

/* Cart badge */
.top_right .cart a {
    position: relative;
    display: flex;
    align-items: center;
}

.top_right .cart a span {
    background: var(--pm-red);
    color: #fff;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-left: 2px;
}

/* ── Header logo size — PNG is 1158x261 (4.437:1 ratio, fits col at 65px) ── */
/* preorder-logo-dark.png (the current, site-owner-approved brand mark) has
   white-outline "PRE" text and tagline, drawn assuming a dark background.
   A dark plate behind it (an earlier attempt) read as an unnatural boxed-
   in rectangle on the new white header. Checked every logo asset already
   in the project (wwwroot/images/*.svg/png, plus the loose exports under
   Images/) for a transparent variant with the CURRENT icon (the red-
   circle/white-ribbon mark, not the older cart+globe icon an earlier
   commit explicitly retired) and dark/colored text -- none exists; every
   transparent-background export still uses the retired icon. Rather than
   edit or generate a new logo asset (out of scope), the existing
   unedited PNG gets a tight drop-shadow instead of a plate: real
   transparency (nothing behind it but the header), no box/border, just
   enough contrast on the white glyph strokes to stay readable. */
.logo-plate {
    display: inline-flex;
    align-items: center;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.55)) drop-shadow(0 0 2px rgba(0,0,0,0.35));
}
/* .logo-plate is also applied to .shop_header_area's .navbar-brand (the
   mobile-only duplicate-header logo) -- style.css hides that by default
   (`.navbar-brand { display: none }`) and responsive.css shows it again
   only at <=991px. custom.css loads AFTER style.css, so the plain
   `.logo-plate { display: inline-flex }` rule above wins that cascade tie
   at EVERY width (same specificity, later file), showing both logos at
   once regardless of viewport -- the actual bug reported. Fixing it needs
   higher specificity, not just dropping !important: this 3-selector rule
   beats the 1-class .logo-plate rule regardless of load order, restoring
   "hidden by default, shown only <=991px" while keeping the plate's
   flex-centering at the widths it IS shown. */
.shop_header_area .navbar-brand.logo-plate {
    display: none;
}
@media (max-width: 991px) {
    .shop_header_area .navbar-brand.logo-plate {
        display: inline-flex;
    }
}
.top_header_left .logo {
    max-height: 58px;
    height: auto;
    width: auto;
    max-width: 100%;
    display: block;
    margin-top: 0 !important;
}

/* Mobile navbar logo (visible ≤991px, top-header logo hidden) */
.shop_header_area .navbar .navbar-brand img {
    height: 35px;
    width: auto;
}

/* Policy nav bar — static inside #site-header wrapper, stacks naturally.
   Offset left by the sidebar's width so this bar sits BESIDE the sidebar
   (same vertical band) rather than spanning over its column — the
   sidebar itself starts at --pm-sidebar-top, right below the promo +
   logo/search rows, and would otherwise render underneath this bar's
   full-width background for its top ~36px. */
.shop_header_area {
    position: static !important;
    margin-top: 0 !important;
    margin-left: 88px !important;
    width: calc(100% - 88px) !important;
    background: #fff;
    border-bottom: 2px solid var(--pm-border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: margin-left 0.22s ease, width 0.22s ease !important;
}
/* Slide in lockstep with the sidebar's hover-expand (88px -> 240px) —
   same trigger (.sidebar-hovered on body, set by the mouseenter/leave
   listener in _Layout.cshtml) and same 0.22s timing as .body_content
   above, which uses the identical pattern. Both margin-left AND width
   need to move together: .shop_header_area has an explicit width
   (calc(100% - Npx), not auto), so only shifting margin-left without
   also shrinking width would push its right edge past the viewport. */
body.sidebar-hovered .shop_header_area {
    margin-left: 240px !important;
    width: calc(100% - 240px) !important;
}
/* Span full width — no auto-centering from inner Bootstrap container. */
.shop_header_area > .container {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.shop_header_area .navbar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    position: relative !important;
    min-height: 34px !important;
}
/* ── Policy menu bar icons — each item gets its own brand-ish accent color,
   independent of the link's own text color/hover state above. ── */
.policy-icon {
    margin-right: 4px;
    font-size: 12px;
}
.policy-icon-privacy { color: #2e86de; }
.policy-icon-refund { color: var(--pm-success); }
.policy-icon-terms { color: #8e44ad; }
.policy-icon-contact { color: var(--pm-orange); }
.policy-icon-calc { color: var(--pm-red); }
.policy-icon-datadeletion { color: #7f8c8d; }

/* --- Hero Banner --- */
.hero-banner {
    background: linear-gradient(135deg, var(--pm-navy) 0%, var(--pm-navy-2) 55%, #0f3460 100%);
    color: #fff;
    padding: 24px 32px 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.hero-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -8%;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(217,21,34,0.28) 0%, transparent 68%);
    border-radius: 50%;
    pointer-events: none;
}

.hero-banner::after {
    content: '';
    position: absolute;
    bottom: -35%;
    left: 22%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,107,53,0.14) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.hero-banner h1 {
    font-size: 24px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    position: relative;
    z-index: 1;
    color: #fff !important;
    line-height: 1.3 !important;
}

.hero-banner h1 em {
    color: var(--pm-orange);
    font-style: normal;
}

.hero-banner .hero-sub {
    font-size: 14px;
    opacity: 0.78;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
    color: #fff;
}

.hero-actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.hero-btn {
    background: var(--pm-red);
    color: #fff !important;
    padding: 8px 22px;
    border-radius: 25px;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 13.5px;
    display: inline-block;
    transition: all var(--pm-transition);
    border: 2px solid var(--pm-red);
    cursor: pointer;
}

.hero-btn:hover {
    background: transparent;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(217,21,34,0.42);
}

.hero-btn-outline {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.38);
    color: #fff !important;
}

.hero-btn-outline:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.7);
    box-shadow: none;
}

/* --- Product Cards --- */
.l_product_item {
    border-radius: var(--pm-radius) !important;
    box-shadow: var(--pm-shadow-sm) !important;
    overflow: hidden;
    transition: box-shadow var(--pm-transition), transform var(--pm-transition);
    background: #fff;
    margin-bottom: 14px;
    position: relative;
    container-type: inline-size; /* lets .l_p_img's min-height below read this card's own rendered width via cqw units */
}

.l_product_item:hover {
    box-shadow: var(--pm-shadow-lg) !important;
    transform: translateY(-4px);
}

.l_product_item .l_p_img {
    position: relative;
    overflow: hidden;
    background: var(--pm-light);
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 180px !important;
    /* Natural aspect ratio is preserved (img below has no forced ratio), but a
       height FLOOR of 56.25% of this card's own width (9/16) stops very wide
       source photos from rendering as a thin strip -- object-fit: cover on the
       img crops such images down to 16:9 instead. Taller-than-16:9 images are
       unaffected since their natural auto-height already clears this floor.
       cqw needs `container-type: inline-size` on .l_product_item above; browsers
       without container-query-unit support just ignore this line and keep the
       180px min-height set above it. */
    min-height: 56.25cqw !important;
}

.l_product_item .l_p_img img {
    display: block;
    transition: transform 0.42s ease;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.l_product_item:hover .l_p_img img {
    transform: scale(1.06);
}

/* ── Star ratings — below-image text row ── */
.card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    pointer-events: none;
}
.star-rating {
    position: relative;
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    user-select: none;
}
.star-empty {
    color: #ddd;
    letter-spacing: 1px;
    display: block;
}
.star-filled {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #f5a623;
    letter-spacing: 1px;
    white-space: nowrap;
    display: block;
}
.rating-text {
    font-size: 11px;
    color: #888;
    font-weight: 600;
    line-height: 1;
}

/* Sold count — below-image green text */
.card-sold-text {
    font-size: 11px;
    color: #22a861;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
}

/* Card meta row: sold + stars on one line */
.card-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    min-height: 16px;
}

/* New Arrival badge — top-left (stacks under the sale badge when both exist
   via the adjacent-sibling rule below), leaving the top-right corner free
   for the wishlist/quick-view buttons added below. */
.new-arrival-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    background: #16a34a;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 4px;
    line-height: 1.3;
    pointer-events: none;
    letter-spacing: 0.5px;
}
.sale-badge + .new-arrival-badge {
    top: 34px;
}

/* Sale / discount badge */
.sale-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    background: var(--pm-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 4px;
    line-height: 1.3;
    pointer-events: none;
    letter-spacing: 0.3px;
}

/* Centered YouTube-style play button on card thumbnails that have at least
   one video (see row.videos, OwnStockController.Search) -- deliberately
   large/high-contrast so the card unmistakably reads as a paused video
   rather than a plain photo, not a small corner indicator. Clicking anywhere
   on the thumb already opens the product detail page (productDetailsPage),
   whose gallery has the actual video player, so this is a pure visual
   affordance with no separate click handler of its own. */
.video-play-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    border: 2px solid rgba(255, 255, 255, .85);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    /* Optically center the triangle inside the circle -- a play glyph's
       visual weight sits left of its own bounding box, so a plain center
       reads as shifted left; nudging right compensates. */
    padding-left: 3px;
    pointer-events: none;
}

/* Wishlist (left) + Quick View (right) sit along the bottom edge of the
   card image, matching the reference design -- was stacked top-right;
   repositioning here is a single shared rule since every product card
   sitewide (Home/ProductList/ProductDetails/category-explorer pane) uses
   this same .card-action-btns/.card-action-btn markup. */
.card-action-btns {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: var(--pm-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    box-shadow: var(--pm-shadow-sm);
    cursor: pointer;
    opacity: 0.85;
    transition: transform var(--pm-transition), opacity var(--pm-transition), background var(--pm-transition), color var(--pm-transition);
}
.card-action-btn:hover {
    opacity: 1;
    transform: scale(1.08);
    background: #fff;
}
.card-action-btn.card-action-btn-active {
    color: var(--pm-red);
    opacity: 1;
}

/* --- Quick View modal (commonRepository.js openQuickView / quickViewTemplate) ---
   Sized/animated on .qv-dialog-inner (the template's own real outermost
   element), not a `.quick-view-dialog.ngdialog-content` compound selector --
   ngDialog.js puts the className option on the OUTER `.ngdialog` wrapper
   div, a sibling of `.ngdialog-content` (see ngDialog.js `open()`), never
   on `.ngdialog-content` itself, so that compound selector would never
   match. Same reason .auth2-dialog-inner (loginGateTemplate) sizes itself
   directly instead of trying to size .ngdialog-content. */
.qv-dialog-inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    max-width: 780px;
    width: 100%;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    animation: qv-fadein 0.28s ease;
}
@keyframes qv-fadein {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.qv-media {
    position: relative;
    flex: 1 1 320px;
    max-width: 380px;
    background: var(--pm-light);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}
.qv-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.qv-details {
    flex: 1 1 320px;
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
}
.qv-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--pm-navy);
    line-height: 1.4;
    margin: 10px 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.qv-meta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.qv-sold-text { font-size: 12px; }
.qv-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 22px;
}
.qv-price-current {
    font-size: 26px;
    font-weight: 700;
    color: var(--pm-red);
}
.qv-price-prev {
    font-size: 15px;
    color: var(--pm-muted);
    text-decoration: line-through;
}
.qv-details-btn {
    background: var(--pm-red);
    color: #fff;
    border: none;
    border-radius: var(--pm-radius);
    padding: 13px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background var(--pm-transition);
    margin-top: auto;
}
.qv-details-btn:hover { background: var(--pm-red-dark); }
.qv-wishlist-btn {
    margin-top: 10px;
    background: transparent;
    border: 1.5px solid var(--pm-border);
    border-radius: var(--pm-radius);
    padding: 11px 20px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pm-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: border-color var(--pm-transition), color var(--pm-transition);
}
.qv-wishlist-btn:hover { border-color: var(--pm-red); color: var(--pm-red); }
.qv-wishlist-btn.card-action-btn-active { border-color: var(--pm-red); color: var(--pm-red); }

@media (max-width: 576px) {
    .qv-media { max-width: 100%; min-height: 240px; }
    .qv-details { padding: 20px; }
}

/* --- Section fade-in on scroll (Home/Index.cshtml reveal-on-scroll,
   IntersectionObserver wired in _Layout.cshtml). GPU-friendly (opacity +
   transform only) and respects prefers-reduced-motion. --- */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-on-scroll.reveal-in {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
}

/* --- Flash Deals / Best Sellers / Trending Global carousels (Home/Index.cshtml) --- */
.featured-row-section {
    max-width: 1200px;
    margin: 34px auto;
    padding: 0 10px;
}
.featured-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.featured-row-nav {
    display: flex;
    gap: 8px;
}
.carousel-arrow-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--pm-border);
    background: #fff;
    color: var(--pm-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: background var(--pm-transition), color var(--pm-transition), border-color var(--pm-transition);
}
.carousel-arrow-btn:hover {
    background: var(--pm-red);
    color: #fff;
    border-color: var(--pm-red);
}
.product-carousel {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* overflow-x: auto forces overflow-y to clip too (CSS spec), which
       would cut off the card's hover lift/shadow (.l_product_item:hover
       translateY(-4px) + a large box-shadow) at the carousel's top/bottom
       edge -- 16px vertical padding reserves enough room for both. */
    padding: 16px 2px;
    margin-top: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.product-carousel::-webkit-scrollbar { display: none; }
.product-carousel-item {
    flex: 0 0 auto;
    width: 155px;
    scroll-snap-align: start;
}
@media (min-width: 576px) {
    .product-carousel-item { width: 180px; }
}
@media (min-width: 992px) {
    .product-carousel-item { width: 205px; }
}

/* --- Promotional banner (Home/Index.cshtml) — brand message on the
   existing navy gradient, no stock photo. --- */
.promo-banner {
    max-width: 1200px;
    margin: 34px auto;
    padding: 0 10px;
}
.promo-banner-inner {
    background: linear-gradient(90deg, var(--pm-navy), var(--pm-navy-2));
    border-radius: var(--pm-radius);
    padding: 40px 24px;
    text-align: center;
    color: #fff;
}
.promo-banner-inner h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px;
}
.promo-banner-inner h3 span {
    color: var(--pm-orange);
}
.promo-banner-inner p {
    font-size: 14px;
    opacity: 0.8;
    margin: 0 0 20px;
}
@media (min-width: 768px) {
    .promo-banner-inner h3 { font-size: 30px; }
}

/* --- Why Preorder / Trust section (Home/Index.cshtml) --- */
.trust-section {
    max-width: 1200px;
    margin: 34px auto 10px;
    padding: 0 10px;
}
.trust-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    margin-top: 18px;
}
.trust-item {
    text-align: center;
    padding: 20px 12px;
    background: #fff;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    transition: box-shadow var(--pm-transition), transform var(--pm-transition);
}
.trust-item:hover {
    box-shadow: var(--pm-shadow-md);
    transform: translateY(-3px);
}
.trust-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    border-radius: var(--pm-radius);
    background: rgba(217,21,34,0.08);
    color: var(--pm-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.trust-item h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--pm-navy);
    margin: 0 0 6px;
}
.trust-item p {
    font-size: 12px;
    color: var(--pm-muted);
    margin: 0;
    line-height: 1.5;
}
@media (max-width: 991px) {
    .trust-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 576px) {
    .trust-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Newsletter / CTA section (Home/Index.cshtml), right above the footer --- */
.newsletter-cta-section {
    max-width: 700px;
    margin: 40px auto;
    padding: 0 20px;
    text-align: center;
}
.newsletter-cta-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--pm-navy);
    margin: 0 0 10px;
}
.newsletter-cta-section p {
    font-size: 14px;
    color: var(--pm-muted);
    margin: 0 0 22px;
}
.newsletter-cta-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.hero-btn-outline-dark {
    background: transparent;
    border: 2px solid var(--pm-border);
    color: var(--pm-navy) !important;
}
.hero-btn-outline-dark:hover {
    background: var(--pm-light);
    border-color: var(--pm-navy);
    color: var(--pm-navy) !important;
    box-shadow: none;
}
/* .hero-btn's shared hover style (transparent bg + white text) is correct
   on the hero/promo-banner, which both sit on dark navy backgrounds -- but
   the newsletter/CTA section sits on plain white, where that combination
   makes "Explore Products" unreadable on hover. Scoped override; the
   hero/promo-banner usages of the same class are untouched. */
.newsletter-cta-section .hero-btn:hover {
    background: var(--pm-red-dark);
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(217,21,34,0.3);
}
@media (min-width: 768px) {
    .newsletter-cta-section h2 { font-size: 28px; }
}

.l_product_item .l_p_text {
    padding: 10px 11px 12px;
    text-align: left;
    height: auto !important;
    border-top: none !important;
}

.l_product_item .l_p_text h4 {
    font-size: var(--pm-fs-sm) !important;
    color: var(--pm-text) !important;
    margin-bottom: 4px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    border: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    -webkit-transition: none !important;
    transition: none !important;
}

.l_product_item .l_p_text h5 {
    font-size: var(--pm-fs-lg) !important;
    color: var(--pm-red) !important;
    font-weight: 700 !important;
    margin: 0 0 3px !important;
    line-height: 1.2 !important;
    -webkit-transition: none !important;
    transition: none !important;
}

/* Loading */
.loading-products {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    color: var(--pm-muted);
    gap: 8px;
    font-size: 13px;
}

.loading-products .fa-circle-o-notch {
    color: var(--pm-red);
    font-size: 18px;
}

/* ═══ HEADER REDESIGN v2 — Pill icons, logo bump, flex centering ════════════ */

/* Flex-center all header columns */
.header_top_area .mobile_row {
    align-items: center !important;
}
.top_header_left {
    padding-top: 0 !important;
    display: flex;
    align-items: center;
}

/* Logo column shrinks to its content instead of claiming a fixed 25% grid
   column (col-lg-3) — at typical desktop widths that 25% column is narrower
   than the logo's rendered width, so it was overflowing into the search
   column. Search column grows to absorb the freed space. */
@media (min-width: 992px) {
    .header_top_area .mobile_col_3_left {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 320px !important;
        padding-right: 24px !important;
    }
    .header_top_area .mobile_col_6 {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
    }
}
.top_header_middle .input-group {
    margin-top: 0 !important;
}

.top_right {
    margin-top: 0 !important;
    margin-bottom: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0;
    list-style: none;
}
#navbar_top {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* Remove old grey-border box from top-level action links */
.top_right > li > a {
    border: none !important;
    line-height: 1 !important;
    padding: 0 !important;
    font-size: inherit !important;
}

/* ── Account — orange outline pill ──────────────────────────── */
.top_right .dropdown.dropdown_menu > a {
    background: transparent !important;
    color: var(--pm-orange) !important;
    border: 2px solid var(--pm-orange) !important;
    border-radius: 50px !important;
    padding: 7px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1 !important;
    white-space: nowrap;
    transition: background var(--pm-transition), color var(--pm-transition), box-shadow var(--pm-transition), transform var(--pm-transition) !important;
}
/* Truncation lives on this inner span, not the <a> itself -- the <a> needs
   overflow:visible (see .top_right .acct-menu > a below) so the absolutely
   positioned unread-count badge isn't clipped. Putting max-width/ellipsis
   there too used to cancel each other out: whichever rule came last in the
   file won the overflow property, so either the badge got clipped or a long
   real name (e.g. "Abu Jafar Mohammad Saleh - Tipu") rendered at full width
   and visually overlapped the Wishlist/Cart pills next to it. */
.acct-name-text {
    display: inline-block !important;
    max-width: 130px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}
.top_right .dropdown.dropdown_menu > a:hover {
    background: var(--pm-orange) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(255,107,53,0.35) !important;
    transform: translateY(-1px) !important;
}
.top_right .dropdown.dropdown_menu > a i {
    font-size: 13px !important;
    flex-shrink: 0;
    color: var(--pm-orange) !important;
}
.top_right .dropdown.dropdown_menu > a:hover i {
    color: #fff !important;
}

/* ── Cart — orange outline pill + floating badge ─────────────── */
.top_right .cart a::before {
    display: none !important;
}
.top_right .cart > a {
    background: transparent !important;
    color: var(--pm-orange) !important;
    border: 2px solid var(--pm-orange) !important;
    border-radius: 50px !important;
    padding: 7px 16px !important;
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    line-height: 1 !important;
    overflow: visible !important;
    transition: background var(--pm-transition), color var(--pm-transition), box-shadow var(--pm-transition), transform var(--pm-transition) !important;
}
.top_right .cart > a:hover {
    background: var(--pm-orange) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(255,107,53,0.35) !important;
    transform: translateY(-1px) !important;
}
/* Badges wired to real {{cartCount}}/{{wishlistCount}} via ng-show — absolute
   corner. Fixed equal width/height (not min-width + width:auto + padding,
   which stretches into a pill for 2-digit counts) keeps this a perfect
   circle regardless of digit count, per docs/product-page-ui-standards.md. */
/* Higher-specificity rule so ng-hide (display:none !important) still wins */
.top_right .cart > a span.ng-hide,
.top_right .wishlist > a span.ng-hide {
    display: none !important;
}
.top_right .cart > a span,
.top_right .wishlist > a span {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    background: var(--pm-red) !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 0 !important;
    border: 2px solid var(--pm-badge-ring) !important;
    line-height: 1 !important;
}

/* ── Wishlist — orange outline pill ──────────────────────────── */
.top_right .wishlist > a {
    background: transparent !important;
    color: var(--pm-orange) !important;
    border: 2px solid var(--pm-orange) !important;
    border-radius: 50px !important;
    padding: 7px 16px !important;
    font-size: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    line-height: 1 !important;
    overflow: visible !important;
    transition: background var(--pm-transition), color var(--pm-transition), box-shadow var(--pm-transition), transform var(--pm-transition) !important;
}
.top_right .wishlist > a:hover {
    background: var(--pm-orange) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(255,107,53,0.35) !important;
    transform: translateY(-1px) !important;
}
.top_right .wishlist > a i {
    font-size: 16px !important;
    color: var(--pm-orange) !important;
}
.top_right .wishlist > a:hover i {
    color: #fff !important;
}

/* ── Mobile header (≤767px) — fix overflow ─────────────────────────────
   responsive.css sets .mobile_col_6 to 65% and .mobile_col_3 to 45%,
   which sums to 110% of the row: on phone-width screens (tested at
   375/414px) that alone overflows the row, and the account/wishlist/cart
   pills' own content (icon + "Account" label + padding) doesn't fit in
   what's left either — together they pushed the cart icon off the right
   edge of the viewport entirely. Switch both columns to flex-based
   sizing (search grows to fill, the pill column shrinks to its compacted
   content) and shrink the pills so everything fits with room to spare.
   Placed after the pill color/size rules above so these overrides win
   the cascade (media query alone doesn't add specificity — source order
   still decides when two `!important` rules tie). */
@media (max-width: 767px) {
    .mobile_row .mobile_col_6 {
        width: auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    .mobile_row .mobile_col_3 {
        width: auto !important;
        flex: 0 0 auto !important;
    }
    .top_header_middle {
        padding-left: 0 !important;
    }
    .top_header_middle .input-group {
        min-width: 0 !important;
    }
    .top_right {
        gap: 4px !important;
    }
    .top_right .dropdown.dropdown_menu > a,
    .top_right .wishlist > a,
    .top_right .cart > a {
        padding: 6px 9px !important;
        font-size: 12px !important;
    }
}
@media (max-width: 480px) {
    /* Collapse the "Account" text label to icon-only via font-size, so
       the three pills keep fitting next to the search box on the
       narrowest phones without needing an HTML change. */
    .top_right .dropdown.dropdown_menu > a {
        font-size: 0 !important;
        padding: 6px 8px !important;
    }
    .top_right .dropdown.dropdown_menu > a i {
        font-size: 14px !important;
    }
}

/* li spacing — gap on parent handles it, individual margins zeroed */
.top_right > li {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
}
/* Re-hide h_price — inline display:none is overridden by the !important above */
.top_right > li.h_price {
    display: none !important;
}

/* --- Product Details Improvements --- */
.left-side-product-box {
    background: #fff;
    border-radius: var(--pm-radius);
    padding: 15px;
    box-shadow: var(--pm-shadow-sm);
}

.left-side-product-box > img {
    border: 1px solid var(--pm-border) !important;
    border-radius: var(--pm-radius) !important;
    width: 100% !important;
    object-fit: contain;
    background: var(--pm-light);
}

.left-side-product-box .sub-img img {
    border: 2px solid var(--pm-border) !important;
    border-radius: 5px;
    transition: border-color var(--pm-transition), transform var(--pm-transition);
    cursor: pointer;
}

.left-side-product-box .sub-img img:hover {
    border-color: var(--pm-red) !important;
    transform: scale(1.05);
}

.product_details_text h3 {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--pm-navy) !important;
    line-height: 1.45 !important;
    margin-bottom: 10px !important;
}

.price {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--pm-red) !important;
    margin-right: 0 !important;
}

.currency {
    font-size: 16px !important;
    color: #bbb !important;
    text-decoration: line-through !important;
}

.p_color {
    padding: 9px 0;
    border-bottom: 1px solid var(--pm-border);
}

/* --- Shared compact button classes (Amazon/Shopify-style, not oversized
   pills) — use these for any NEW button rather than one-off per-page CSS.
   Same numbers as .add_cart_btn/.btn.subs_btn below and admin's
   .admin-btn.small, so every button on the site reads as one system. */
.btn-primary-sm, .btn-secondary-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pm-sp-1);
    padding: var(--pm-sp-2) var(--pm-sp-4);
    border-radius: var(--pm-radius);
    font-size: var(--pm-fs-md);
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: all var(--pm-transition);
    text-decoration: none !important;
}
.btn-primary-sm {
    background: linear-gradient(135deg, var(--pm-red), var(--pm-red-dark));
    color: #fff !important;
    border: none;
}
.btn-primary-sm:hover { box-shadow: 0 4px 14px rgba(217,21,34,0.3); transform: translateY(-1px); }
.btn-primary-sm:disabled, .btn-secondary-sm:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-secondary-sm {
    background: #fff;
    color: var(--pm-text) !important;
    border: 1px solid var(--pm-border);
}
.btn-secondary-sm:hover { border-color: var(--pm-red); color: var(--pm-red) !important; }

/* Compact CTA — was a 12px/32px pill (~48px tall); brought down to the
   sitewide button standard also used by .btn.subs_btn and admin's
   .admin-btn.small (8px/16-20px padding, 8px radius, not a full pill). */
.add_cart_btn {
    background: linear-gradient(135deg, var(--pm-red), var(--pm-red-dark)) !important;
    color: #fff !important;
    border-radius: var(--pm-radius) !important;
    padding: var(--pm-sp-2) var(--pm-sp-4) !important;
    font-weight: 600 !important;
    font-size: var(--pm-fs-md) !important;
    letter-spacing: 0.3px;
    transition: all var(--pm-transition) !important;
    display: inline-block !important;
    border: 2px solid var(--pm-red) !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(217,21,34,0.28);
}

.add_cart_btn:hover {
    background: transparent !important;
    color: var(--pm-red) !important;
    box-shadow: 0 6px 20px rgba(217,21,34,0.35) !important;
    transform: translateY(-2px);
}

/* --- Auth pages (Login / Sign-up) --- */
.auth-page-wrapper {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f0f2f5 0%, #e2e6ea 100%);
    min-height: calc(100dvh - 147px) !important;
}

.auth-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--pm-shadow-lg);
    overflow: hidden;
    width: 100%;
    max-width: 380px;
}

.auth-card-header {
    background: linear-gradient(135deg, var(--pm-navy) 0%, var(--pm-navy-2) 100%);
    padding: 10px 24px 9px;
    color: #fff;
    text-align: center;
}

.auth-brand-icon {
    background: var(--pm-red);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 5px;
}

.auth-brand-icon i {
    font-size: 13px;
    color: #fff;
}

.auth-card-header h2 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
}

.auth-card-header p {
    font-size: 12px;
    opacity: 0.7;
    margin: 0;
}

.auth-card-body {
    padding: 12px 22px;
}

.auth-card-body label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #555 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 3px !important;
}

.auth-card-body .form-control {
    border: 1.5px solid var(--pm-border) !important;
    border-radius: var(--pm-radius) !important;
    padding: 5px 10px !important;
    font-size: 13px !important;
    color: #333 !important;
    /* style.css forces height/line-height 50px on .login_form inputs —
       both must be overridden or the boxes stay tall no matter the padding */
    height: 32px !important;
    line-height: 1.4 !important;
    transition: border-color var(--pm-transition), box-shadow var(--pm-transition);
}

.auth-card-body .form-control:focus {
    border-color: var(--pm-red) !important;
    box-shadow: 0 0 0 3px rgba(217,21,34,0.1) !important;
    outline: none;
}

.login-error-msg {
    color: #ff8fa8;
    font-size: 12.5px;
    text-align: center;
    margin-bottom: 8px;
}

.auth-submit-btn {
    background: linear-gradient(135deg, var(--pm-red), var(--pm-red-dark)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 25px !important;
    height: 36px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    transition: all var(--pm-transition) !important;
    box-shadow: 0 4px 15px rgba(217,21,34,0.3);
    margin-top: 4px;
}

.auth-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(217,21,34,0.42) !important;
}

.auth-extras {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

/* Social sign-in: divider + Google/Facebook buttons */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 9px 0 7px;
    color: #999;
    font-size: 11.5px;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e5e5;
}
.auth-social-row {
    display: flex;
    gap: 10px;
}
.auth-social-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1.5px solid var(--pm-border);
    border-radius: 8px;
    background: #fff;
    padding: 6px 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: #444;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.auth-social-btn:hover { border-color: #bbb; background: #fafafa; }
.auth-social-btn .fa-google { color: #ea4335; }
.auth-social-btn .fa-facebook { color: #3b5998; }

.auth-extras label {
    text-transform: none !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    color: #555 !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    margin: 0 !important;
}

.forgot-link {
    font-size: 12px;
    color: var(--pm-red) !important;
    text-decoration: none !important;
}

.forgot-link:hover {
    text-decoration: underline !important;
}

.auth-card-footer {
    background: var(--pm-light);
    border-top: 1px solid var(--pm-border);
    padding: 9px 22px;
    text-align: center;
    font-size: 12.5px;
    color: #666;
}

.auth-card-footer a {
    color: var(--pm-red) !important;
    font-weight: 600;
    text-decoration: none !important;
}

.auth-card-footer a:hover {
    text-decoration: underline !important;
}

/* --- Auth v2 (compact right-side panel; social-first, tabs) ---
   Recolored to match the admin panel's dark navy chrome (see
   wwwroot/admin/admin.css .admin-login-*) — same --pm-navy/-navy-light/
   -navy-lighter/-border-dark/-text-dim scale, same --pm-red accent (already
   shared between the two themes). Spacing compacted throughout — logo,
   fonts, field heights, margins — so the full panel (logo through footer)
   fits within a typical viewport without scrolling; see docs note below. */
.auth2-page {
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    padding: 20px 7vw 20px 20px;
    background: radial-gradient(circle at 20% 20%, var(--pm-navy-light), var(--pm-navy) 70%);
    min-height: calc(100dvh - 147px) !important;
}
.auth2-inner {
    width: 100%;
    max-width: 400px;
    background: var(--pm-navy-light);
    border: 1px solid var(--pm-border-dark);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    padding: 20px 24px;
}
.auth2-logo { text-align: center; margin-bottom: 6px; }
.auth2-logo img { height: 32px; }
.auth2-title {
    text-align: center;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 2px !important;
}
.auth2-subtitle {
    text-align: center;
    font-size: 12px;
    color: var(--pm-text-dim);
    margin: 0 0 10px;
}
.auth2-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12.5px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    margin-bottom: 6px;
    transition: border-color .15s, box-shadow .15s;
}
.auth2-social-btn:hover { border-color: #c6ccd2; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.auth2-social-icon { width: 16px; height: 16px; flex: none; display: block; }
.auth2-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0;
    color: var(--pm-text-dim);
    font-size: 11.5px;
}
.auth2-divider::before,
.auth2-divider::after { content: ''; flex: 1; height: 1px; background: var(--pm-border-dark); }
.auth2-mode-tabs { display: flex; gap: 18px; margin-bottom: 5px; }
.auth2-mode-tabs span {
    font-size: 12.5px;
    color: var(--pm-text-dim);
    cursor: pointer;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
}
.auth2-mode-tabs span.active {
    color: #fff;
    font-weight: 600;
    border-bottom-color: var(--pm-red);
}
.auth2-label {
    display: block;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--pm-text-dim) !important;
    margin: 0 0 3px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.auth2-label .req { color: var(--pm-red); }
.auth2-field { position: relative; margin-bottom: 7px; }
.auth2-input {
    width: 100%;
    height: 34px !important;
    line-height: 1.4 !important;
    border: 1px solid var(--pm-border-dark) !important;
    border-radius: 8px !important;
    background: var(--pm-navy);
    padding: 5px 12px !important;
    font-size: 13px !important;
    color: #fff !important;
    outline: none;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s;
}
.auth2-input::placeholder { color: #6b6b8f; }
.auth2-input:focus {
    border-color: var(--pm-red) !important;
    box-shadow: 0 0 0 3px rgba(217,21,34,0.15) !important;
}
.auth2-phone { display: flex; align-items: stretch; position: relative; }
.auth2-cc-select {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid var(--pm-border-dark);
    border-right: none;
    border-radius: 8px 0 0 8px;
    background: var(--pm-navy);
    font-size: 13px;
    color: var(--pm-text-dim);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
.auth2-cc-select:hover { background: var(--pm-navy-lighter); }
/* flag-icons (fi fi-xx) renders its own background image — size/align it
   here rather than relying on emoji font metrics. */
.auth2-cc-flag.fi { width: 18px; line-height: 13px; border-radius: 2px; flex: none; }
.auth2-cc-select .fa-caret-down { font-size: 10px; color: var(--pm-text-dim); }
.auth2-cc-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    width: 230px;
    max-height: 250px;
    overflow-y: auto;
    background: var(--pm-navy-light);
    border: 1px solid var(--pm-border-dark);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
    z-index: 50;
    padding: 4px 0;
    list-style: none;
    margin-block-start: 4px;
    margin-block-end: 0;
    -webkit-padding-start: 0;
    padding-inline-start: 0;
}
.auth2-cc-dropdown li { padding: 7px 12px; font-size: 13px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.auth2-cc-dropdown li:hover { background: var(--pm-navy-lighter); }
.auth2-cc-dropdown li .auth2-cc-name { flex: 1; color: #fff; }
.auth2-cc-dropdown li .auth2-cc-dial { color: var(--pm-text-dim); }
.auth2-phone .auth2-input { border-radius: 0 8px 8px 0 !important; }
.auth2-eye {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    height: 17px;
    width: 17px;
    cursor: pointer;
    opacity: 0.6;
    filter: invert(1);
}
.auth2-eye:hover { opacity: 0.9; }
.auth2-extras {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2px 0 8px;
    font-size: 12px;
    color: var(--pm-text-dim);
}
.auth2-extras label {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--pm-text-dim) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    cursor: pointer;
}
.auth2-submit {
    width: 100%;
    background: linear-gradient(135deg, var(--pm-red), var(--pm-red-dark));
    color: #fff !important;
    border: none;
    border-radius: 8px;
    height: 36px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: box-shadow .15s, transform .15s;
}
.auth2-submit:hover { box-shadow: 0 4px 14px rgba(217,21,34,0.3); transform: translateY(-1px); }
.auth2-submit:disabled { opacity: 0.7; cursor: not-allowed; }
.auth2-footer { text-align: center; font-size: 12.5px; color: var(--pm-text-dim); margin-top: 8px; }
.auth2-footer a { color: var(--pm-red) !important; font-weight: 600; text-decoration: none !important; }
.auth2-footer a:hover { text-decoration: underline !important; }
.auth2-hint { font-size: 11px; color: var(--pm-text-dim); margin: -4px 0 7px; }

@media (max-width: 767px) {
    .auth2-page { justify-content: center; padding: 14px 16px; }
    .auth2-inner { max-width: 100%; padding: 10px 18px; }
    /* A few mm shorter still on the tightest phone heights (iPhone SE-class,
       ~667px tall) — these plus the base compacting above are what get the
       full panel (logo through footer) to fit without scrolling there. */
    .auth2-logo { margin-bottom: 4px; }
    .auth2-logo img { height: 28px; }
    .auth2-subtitle { margin-bottom: 7px; }
    .auth2-divider { margin: 4px 0; }
    .auth2-mode-tabs { margin-bottom: 4px; }
    .auth2-label { margin-bottom: 2px !important; }
    .auth2-field { margin-bottom: 5px; }
    .auth2-input { height: 32px !important; }
    .auth2-extras { margin: 2px 0 6px; }
    .auth2-submit { height: 34px; }
    .auth2-footer { margin-top: 6px; }
}

/* --- Login-gate modal (authGateService.js + loginGateTemplate) ---
   ngDialog ships no CSS theme (only ngDialog.js) — these three classes are
   its own DOM structure (.ngdialog > .ngdialog-overlay + .ngdialog-content),
   styled from scratch here. Only dialog in the app, safe to style globally. */
.ngdialog {
    position: fixed;
    inset: 0;
    /* Matches .modal's z-index below (same reasoning: #site-header sits at
       2147483647, so anything meant to render above it — including this
       login gate — has to match, not just beat ngDialog's own default
       stacking). Without this, the sticky mobile header rendered on top of
       the whole modal (close button included) on short viewports where the
       vertically-centered card's top edge falls under the header's band. */
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ngdialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26,26,46,0.6);
}
.ngdialog-content {
    position: relative;
    z-index: 1;
    max-width: 92vw;
    max-height: 92dvh;
    overflow-y: auto;
    border-radius: 16px;
}
body.ngdialog-open { overflow: hidden; }

/* ngDialog.js's close routine (performCloseDialog) waits for an
   `animationend` event on the .ngdialog-closing element before actually
   removing it from the DOM — without a real CSS animation defined, that
   event never fires and the dialog silently never closes. This is the
   fade-out AND the fix. */
@keyframes ngdialog-fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}
.ngdialog.ngdialog-closing {
    animation: ngdialog-fadeout 0.2s;
}

.auth2-dialog-inner {
    position: relative;
    max-width: 400px;
    width: 100%;
}
.auth2-dialog-close {
    /* Was top/right: -6px, floating half outside .auth2-dialog-inner's box.
       .ngdialog-content (its ancestor) has no padding and overflow-y: auto,
       which browsers compute as overflow-x: auto too since overflow-x was
       otherwise 'visible' — so that overhang got clipped, cutting the button
       off at the modal's edge. Sitting fully inside the card's own padding
       box keeps it visible regardless of the parent's overflow/padding. */
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--pm-shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    color: var(--pm-muted) !important;
    text-decoration: none !important;
}
.auth2-dialog-close:hover { color: var(--pm-red) !important; }

/* --- Customer account pages (Dashboard/Shipment/Wishlist/Wallet/Support/Profile) --- */
.acct-page-title { font-size: 22px; font-weight: 700; color: var(--pm-navy); margin: 20px 0 16px; }
.acct-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.acct-stat-tile { background: #fff; border: 1px solid #e3e6ea; border-radius: 12px; padding: 18px 20px; box-shadow: var(--pm-shadow-sm); }
.acct-stat-tile .acct-stat-label { font-size: 12.5px; color: #888; margin-bottom: 6px; }
.acct-stat-tile .acct-stat-value { font-size: 22px; font-weight: 700; color: var(--pm-navy); }
.acct-section-card { background: #fff; border: 1px solid #e3e6ea; border-radius: 12px; padding: 20px 22px; margin-bottom: 20px; }
.acct-section-card h4 { font-size: 15px; font-weight: 600; color: var(--pm-navy); margin-bottom: 14px; }
.acct-quick-links { display: flex; flex-wrap: wrap; gap: 10px; }
.acct-quick-links a { display: inline-flex; align-items: center; gap: 6px; background: #f6f7f9; border-radius: var(--pm-radius); padding: 9px var(--pm-sp-4); font-size: var(--pm-fs-sm); color: var(--pm-text); text-decoration: none !important; }
.acct-quick-links a:hover { background: #eceff2; }

.acct-shipment-steps { display: flex; align-items: flex-start; margin: 10px 0 4px; overflow-x: auto; padding-top: 4px; }
.acct-step { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 90px; position: relative; }
.acct-step .acct-step-dot { width: 22px; height: 22px; border-radius: 50%; background: #e3e6ea; color: #999; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; margin-bottom: 6px; z-index: 1; }
.acct-step.done .acct-step-dot { background: var(--pm-red); color: #fff; }
.acct-step .acct-step-label { font-size: 10.5px; color: #888; text-align: center; }
.acct-step.done .acct-step-label { color: #333; font-weight: 600; }
.acct-step:not(:last-child)::after { content: ''; position: absolute; top: 11px; left: 55%; width: 90%; height: 2px; background: #e3e6ea; z-index: 0; }
.acct-step.done:not(:last-child)::after { background: var(--pm-red); }

.acct-msg { max-width: 75%; padding: 10px 14px; border-radius: 10px; margin-bottom: 10px; font-size: 13px; }
.acct-msg.mine { background: var(--pm-red); color: #fff; margin-left: auto; }
.acct-msg.theirs { background: #f2f3f5; color: #333; }
.acct-msg .acct-msg-time { font-size: 10.5px; opacity: 0.7; margin-top: 4px; }

.acct-wallet-balance { font-size: 32px; font-weight: 700; color: var(--pm-navy); }
.acct-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.acct-badge.open { background: #fff4e5; color: #b06a00; }
.acct-badge.answered { background: #e6f4ea; color: var(--pm-success); }
.acct-badge.closed { background: #eceff2; color: #666; }
.acct-badge.credit { background: #e6f4ea; color: var(--pm-success); }
.acct-badge.debit { background: #fdeaea; color: #b3261e; }

/* --- Shared empty-state (empty cart/wishlist/wallet/orders/tickets) ---
   Lightweight icon + message + optional CTA, not stock photography. Reused
   across Cart, Wishlist, My Wallet, Support, My Shipment, Dashboard. */
.empty-state {
    text-align: center;
    padding: var(--pm-sp-6) var(--pm-sp-4);
    color: var(--pm-muted);
}
.empty-state i {
    display: block;
    font-size: 40px;
    color: var(--pm-border);
    margin-bottom: var(--pm-sp-3);
}
.empty-state p {
    font-size: var(--pm-fs-md);
    margin-bottom: var(--pm-sp-3);
}

/* Password input icon tweak */
.password-input {
    position: relative;
}

.password-input img {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
    height: 18px !important;
    width: 18px !important;
    cursor: pointer !important;
    opacity: 0.45;
    transition: opacity var(--pm-transition);
}

.password-input img:hover {
    opacity: 0.85;
}

/* --- Cart Modernization --- */
.cart_items h3 {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--pm-navy) !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--pm-border) !important;
}

.cart_table thead th {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #888;
    font-weight: 600;
    border-bottom: 2px solid var(--pm-border) !important;
}

/* .cart_table is wider than its Bootstrap .table-responsive-md wrapper on
   any viewport under ~450px (fixed-width Qty stepper + Edit button don't
   shrink below their own content) -- it's genuinely scroll-reachable
   (verified with scrollLeft), but the only visible cue was a ~19px sliver of
   the Qty column peeking past the edge, far weaker than this site's other
   scrollable rows (e.g. the source-tab row, where a whole extra tab peeks
   through). Cart is the highest-stakes page on the site for this kind of
   "I didn't know there was more" miss, so it gets a real edge-shadow rather
   than relying on that sliver. The two opaque-to-transparent layers use
   background-attachment:local (they scroll with the table) so the shadow on
   a given edge disappears once you've scrolled all the way to it -- no JS
   scroll listener needed. */
.cart_items .table-responsive-md {
    background-color: #fff;
    background-repeat: no-repeat;
    /* background-image (the longhand) only accepts <image> values -- a
       trailing position like "100% 0" after the gradient function is
       background-SHORTHAND syntax and is invalid here, which silently
       invalidates the ENTIRE comma-separated image list (computes to
       `none`, confirmed via getComputedStyle -- not just that one layer).
       Position belongs in its own background-position property instead,
       one value per layer in the same order. Originally shipped broken
       this way and only ever looked correct in screenshots because a
       genuinely-clipped scroll edge is visually hard to tell apart from a
       soft fade at normal screenshot resolution -- verify with
       getComputedStyle().backgroundImage next time, not just a screenshot. */
    background-image:
        linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
        linear-gradient(to right, rgba(255,255,255,0), #fff 70%),
        linear-gradient(to right, rgba(0,0,0,.16), rgba(0,0,0,0)),
        linear-gradient(to left, rgba(0,0,0,.16), rgba(0,0,0,0));
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
}

.cart_totals_area {
    background: var(--pm-light);
    border-radius: var(--pm-radius);
    padding: 20px;
    border: 1px solid var(--pm-border);
}

.cart_totals_area h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--pm-navy) !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--pm-border) !important;
}

.total_amount {
    background: var(--pm-navy) !important;
    color: #fff !important;
    padding: 12px 15px !important;
    border-radius: var(--pm-radius) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-weight: 600 !important;
    margin: 10px 0 !important;
    flex-direction: row !important;
}

.total_amount h6 {
    color: var(--pm-orange) !important;
    font-size: 16px !important;
    margin: 0 !important;
}

.btn.subs_btn {
    background: linear-gradient(135deg, var(--pm-red), var(--pm-red-dark)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--pm-radius) !important;
    font-weight: 600 !important;
    font-size: var(--pm-fs-md) !important;
    height: 40px !important;
    transition: all var(--pm-transition) !important;
    box-shadow: 0 4px 15px rgba(217,21,34,0.28) !important;
    letter-spacing: 0.3px;
}

.btn.subs_btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 22px rgba(217,21,34,0.4) !important;
}

/* --- Footer --- */
.footer_area {
    background: var(--pm-navy) !important;
    color: #888;
    padding: 0 !important;
    margin-top: 40px;
    margin-left: 88px;
}

.footer-inner {
    padding: 40px 0 0 20px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr 1.3fr;
    gap: 28px;
    padding-bottom: 32px;
}

.footer-col h5 {
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.9px !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
    position: relative;
}

.footer-col h5::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    background: var(--pm-red);
}

.footer-col .footer-about-text {
    font-size: 13px;
    line-height: 1.7;
    color: #888;
    margin-bottom: 16px;
}

.footer-col ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-col ul li {
    margin-bottom: 4px;
}

.footer-col ul li a {
    color: #888 !important;
    font-size: 13px;
    text-decoration: none !important;
    transition: all var(--pm-transition);
    display: flex;
    align-items: center;
    gap: 6px;
}

.footer-col ul li a::before {
    content: '›';
    color: var(--pm-red);
    font-size: 15px;
    line-height: 1;
}

.footer-col ul li a:hover {
    color: #fff !important;
    padding-left: 4px;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 10px;
}

.footer-contact-item i {
    color: var(--pm-red);
    font-size: 13px;
    margin-top: 3px;
    flex-shrink: 0;
}

.footer-contact-item span {
    font-size: 13px;
    color: #888;
    line-height: 1.55;
}

.footer-payment-label {
    font-size: 10.5px;
    color: var(--pm-red);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin: 14px 0 8px;
}

.footer-payment-icons {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
}

.footer-payment-icon {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 5px;
    padding: 4px 11px;
    font-size: 11.5px;
    color: #aaa;
    font-weight: 600;
}

/* Branding block in left footer column */
.footer-brand-logo {
    margin-bottom: 14px;
}
.footer-brand-img {
    /* Was 150px (~225px rendered width at this image's 3:2 ratio) --
       dominated the footer's left column next to the ~28px payment icons
       and the header's own logo (.top_header_left .logo, max-height 58px).
       90px height renders at ~135px width, in the middle of the intended
       120-150px range while staying clearly more prominent than the
       payment icons without dwarfing the rest of the footer. */
    height: 90px;
    display: block;
}

/* Payment logo images */
.footer-payment-img {
    height: 28px;
    border-radius: 4px;
    display: inline-block;
}

/* Footer bottom: Primeway logo + two-line copyright */
.footer-bottom-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.footer-pw-badge {
    background: #fff;
    border-radius: 6px;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.footer-bottom-pw-logo {
    height: 32px;
    width: auto;
}
.footer-bottom-copy p {
    margin: 0;
    font-size: 12px;
    color: #666;
    line-height: 1.55;
    text-align: center;
}
.footer-primeway-name {
    color: var(--pm-red);
    font-weight: 600;
}

/* "Follow us" + social icons */
.footer-social-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.footer-follow-label {
    font-size: 12px;
    color: var(--pm-red);
    font-weight: 600;
    white-space: nowrap;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 15px 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}
.footer-bottom .footer-bottom-left {
    grid-column: 2;
}
.footer-bottom .footer-social-wrap {
    grid-column: 3;
    justify-self: end;
}

.footer-bottom p {
    margin: 0;
    font-size: 12px;
    color: #666;
}

.footer-bottom p em {
    color: var(--pm-red);
    font-style: normal;
    font-weight: 600;
}

.footer-social {
    display: flex;
    gap: 7px;
}

.footer-social a {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.13);
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #888 !important;
    font-size: 13px;
    transition: all var(--pm-transition);
    text-decoration: none !important;
}

.footer-social a:hover {
    background: var(--pm-red);
    border-color: var(--pm-red);
    color: #fff !important;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .hero-banner h1 {
        font-size: 22px !important;
    }
    .auth-card-body,
    .auth-card-header {
        padding: 20px;
    }
    /* .footer-bottom's "1fr auto 1fr" grid tracks default to a
       content-based minimum width, so the "Follow us" + 5 social icons
       column refused to shrink below its natural size on phone-width
       screens — that forced the whole page (including the fixed-position
       header, which sizes against the page's overall layout viewport)
       wider than the actual device width, which is what was pushing the
       header's cart icon off-screen even after the header's own column
       math was fixed. Stack into a single column so nothing has to
       shrink below its content width. */
    .footer-bottom {
        grid-template-columns: 1fr !important;
        justify-items: center;
        gap: 14px !important;
    }
    .footer-bottom .footer-bottom-left,
    .footer-bottom .footer-social-wrap {
        grid-column: 1 !important;
        justify-self: center !important;
    }
}

/* ── Sidebar category icons ── */
.cat-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    flex-shrink: 0;
}
.cat-icon i { font-size: 15px; color: #fff; }

.ci-women    { background: #E91E8C; }
.ci-men      { background: #1565C0; }
.ci-telecom  { background: #7B1FA2; }
.ci-computer { background: #283593; }
.ci-consumer { background: #00695C; }
.ci-jewelry  { background: #F57F17; }
.ci-home     { background: #2E7D32; }
.ci-bags     { background: #E64A19; }
.ci-toys     { background: #F9A825; }
.ci-outdoor  { background: #00838F; }
.ci-beauty   { background: #C62828; }
.ci-auto     { background: #4527A0; }
.ci-tools    { background: #4E342E; }
.ci-currency { background: #1B5E20; }

/* ── Page layout: sidebar + main content as flex siblings (.page-layout,
   _Layout.cshtml) ──
   Opening the category explorer resizes .page-main automatically via
   flexbox (.categories_sidebar's own width is the only input; .page-main's
   flex: 1 absorbs whatever's left) -- no JS pixel math, and the sidebar
   PUSHES content rather than overlaying/hiding the hero. Mobile keeps its
   existing true-overlay drawer (position:fixed, untouched) since a
   flex-push doesn't make sense on a narrow screen -- .categories_sidebar's
   own width only participates in the flex split >=768px; below that it's
   pinned to 0 and the visible drawer is entirely the FIXED child
   (.l_p_categories_widget), which doesn't care about its parent's width. */
.page-layout {
    display: flex;
    align-items: flex-start;
}
.categories_sidebar {
    flex: 0 0 auto;
    width: 0;
    overflow: hidden;
}
.page-main {
    flex: 1 1 0%;
    min-width: 0;
}
@media (min-width: 768px) {
    .categories_sidebar {
        transition: width 0.25s ease;
    }
    body.mobile-nav-open .categories_sidebar {
        width: 260px;
        /* The subcategory flyout (.megadropdown.products) is position:fixed
           and JS-positioned (see _Layout.cshtml), so it no longer needs
           overflow:visible here to escape this column's edge -- keeping
           this clipped is what makes the bounded height above actually
           stick instead of the column silently growing past it. */
    }
}

/* Mobile (default/base rule, no media query): position:fixed off-canvas
   drawer -- the same overlay behavior this always had. top uses
   --pm-header-h (the FULL header height, already reliably JS-synced for
   body's own padding-top) rather than a second, separate measurement.
   Desktop (>=768px) below overrides this to normal in-flow positioning
   instead -- its actual left/top position then comes from ordinary
   document flow (inside .page-layout, itself already correctly
   positioned below the header via that same body padding-top), not a
   fixed-position pixel offset at all. */
.l_p_categories_widget {
    position: fixed;
    left: 0;
    top: var(--pm-header-h, 106px);
    z-index: 999999999;
    width: 260px;
    max-height: calc(100dvh - var(--pm-header-h, 106px));
    display: flex;
    flex-direction: column;
    background: var(--pm-surface);
    box-shadow: var(--pm-shadow-md);
    transition: transform 0.28s ease;
}
@media (min-width: 768px) {
    .l_p_categories_widget {
        position: relative;
        left: auto;
        top: auto;
        z-index: auto;
        width: 100%;
        /* Bounded to the hero/category-exploration region instead of the
           full viewport -- reuses .hero-single's own clamp() so the
           explorer visually ends where the hero ends (Flash Deals/Best
           Sellers/Trending/Trust/Footer below are never covered by it),
           with a little extra room for the row padding this column has
           that the hero doesn't. Longer category lists scroll internally
           via .navbar-nav's own overflow-y:auto above -- the page itself
           is untouched, only this one column clips. */
        height: clamp(340px, 34vw, 500px);
        max-height: clamp(340px, 34vw, 500px);
        overflow: hidden;
        box-shadow: none;
        border-right: 1px solid var(--pm-border);
        transition: none;
    }
}
.body_content,
body.sidebar-hovered .body_content {
    margin-left: 0 !important;
}
.shop_header_area,
body.sidebar-hovered .shop_header_area {
    margin-left: 0 !important;
    width: 100% !important;
}
.footer_area,
body.sidebar-hovered .footer_area {
    margin-left: 0 !important;
}

/* ul is a scrollable flex child — position:fixed overridden. No
   padding-top: the container above already starts below the header, so
   the first row belongs at the very top of this list. */
.l_p_categories_widget .navbar-nav {
    position: static !important;
    width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    /* Without this, a flex child with overflow:auto won't shrink below its
       own content size (a well-known flexbox gotcha) -- the list just grew
       to fit all ~15 categories (900px+) instead of respecting the column's
       max-height, which is why the sidebar visually extended the full
       length of the homepage instead of stopping at the explorer's own
       bounded height (see .l_p_categories_widget below). */
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: #ddd transparent !important;
    padding-top: 0 !important;
}
.l_p_categories_widget .navbar-nav:hover {
    width: 100% !important;
}
.l_p_categories_widget .navbar-nav::-webkit-scrollbar {
    width: 3px;
}
.l_p_categories_widget .navbar-nav::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 2px;
}

/* Collapsed (default) state: image centered above, label wrapped below —
   compact icon+caption look. Text is allowed to wrap (not truncated) so
   longer category names stay fully readable; rows taller than the average
   are fine since .navbar-nav can scroll internally if the full stack
   doesn't fit the viewport (see .l_p_categories_widget height fix above —
   correct layout takes priority over guaranteeing zero scroll). */
.l_p_categories_widget .navbar-nav li a.nav-link {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 6px 6px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    font-size: 10px !important;
    letter-spacing: 0.2px !important;
    white-space: normal !important;
    word-break: normal !important;
    height: auto !important;
    overflow: hidden !important;
    min-height: 62px !important;
    border-bottom: 1px solid #f2f2f2 !important;
}
/* First row sits flush against the top of the sidebar's content area
   (.navbar-nav's padding-top already reserves the header's height, see
   above) — zero extra top padding on top of that. */
.l_p_categories_widget .navbar-nav li:first-child a.nav-link {
    padding-top: 0 !important;
}

/* Expanded (hover) state: revert to the original row layout — image left,
   label right, single line — since there's ample width for it at 240px. */
.l_p_categories_widget:hover .navbar-nav li a.nav-link,
body.mobile-nav-open .l_p_categories_widget .navbar-nav li a.nav-link {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 8px 14px 8px 12px !important;
    text-align: left !important;
    font-size: 10px !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    min-height: 44px !important;
}

/* Feature 6a: subtle right-facing chevron — only makes sense in the
   expanded row layout, not the collapsed centered/stacked one. */
.l_p_categories_widget .navbar-nav li a.nav-link::after {
    display: none !important;
    content: '›' !important;
    position: absolute !important;
    right: 3px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 14px !important;
    color: #bbb !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    pointer-events: none !important;
}
.l_p_categories_widget:hover .navbar-nav li a.nav-link::after,
body.mobile-nav-open .l_p_categories_widget .navbar-nav li a.nav-link::after {
    display: block !important;
}

/* Collapsed: label wraps up to 2 lines, no ellipsis — the wider 88px
   sidebar (see .l_p_categories_widget width above) gives enough text width
   that names fit cleanly within 2 lines in practice; anything still too
   long is hard-clipped after line 2 rather than getting a "…", per design.
   Short names naturally stay at 1 line — line-clamp only expands a row's
   height when the content actually needs the 2nd line, it doesn't reserve
   it upfront. (An earlier attempt looked like it forced 2-lines'-worth of
   height on every row regardless of content, but that was actually legacy
   megamenu.css leaking a fixed `height: 34px` onto this span via
   `.navbar-nav > li > a > span` — fixed below with explicit height/padding
   resets; line-clamp works correctly once that's neutralized.)
   overflow-wrap: anywhere handles single long words with no space to break
   at (e.g. "Entertainment"), which would otherwise get truncated to 1 line
   despite line-clamp allowing 2. */
.l_p_categories_widget .cat-label {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    height: auto !important;
    padding: 0 !important;
    white-space: normal !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
/* Expanded (hover): single line — 240px is wide enough that labels don't
   need to wrap at all. */
.l_p_categories_widget:hover .cat-label,
body.mobile-nav-open .l_p_categories_widget .cat-label {
    display: block !important;
    -webkit-line-clamp: unset !important;
    white-space: nowrap !important;
    flex: 1 1 auto !important;
}

/* Neutralise style.css float/display on <i> inside sidebar links */
.l_p_categories_widget .navbar-nav li a i {
    float: none !important;
    display: block !important;
    line-height: 1 !important;
}

.l_p_categories_widget .cat-icon {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
}

/* Circular photo thumbnails replacing icon circles. Same size collapsed
   and expanded — only the row layout (stacked vs. side-by-side) changes
   between the two states, not the image itself. */
.l_p_categories_widget .cat-photo {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-bottom: 0;
    display: block;
}

/* ── Category explorer: left list hover -> right subcategory panel ──
   megamenu.css ships a JS-class-based (.trigger-enter/.trigger-enter-active)
   show/hide for .megadropdown that nothing in this app ever actually
   toggles (dead code, confirmed no matching JS) -- .categories_sidebar
   .megadropdown below is a plain CSS :hover reveal instead, using a
   higher-specificity selector so it wins regardless of megamenu.css's own
   load order. Real, already-existing subcategory link data only -- no
   product thumbnails are fabricated here. */
.categories_sidebar .magamenushow {
    position: relative;
}
@media (min-width: 768px) {
    /* At desktop, .megadropdown's containing block needs to be
       .l_p_categories_widget (see below), not the individual hovered <li>
       -- overriding this back to static here is what makes that happen.
       Mobile keeps position:relative (unchanged) since .mm-expand-btn (the
       tap-to-expand chevron) is positioned relative to each row there. */
    .categories_sidebar .magamenushow {
        position: static;
    }
}
.categories_sidebar .megadropdown.products {
    display: block;
    opacity: 0;
    visibility: hidden;
    /* Positioned relative to .l_p_categories_widget (its nearest positioned
       ancestor at desktop widths, since .magamenushow is static there --
       see above), not the individual hovered <li> -- every category's
       panel therefore renders in the exact same screen location: a fixed
       "subcategory column" immediately right of the category list, sharing
       its top/height. That keeps all 3 explorer columns aligned in one row
       (category-explorer: main-category-column / subcategory-column /
       product-column) with zero JS position math, instead of each category
       computing its own independent floating position (the previous
       approach, which is what let the product column get pushed outside
       the viewport when the panels' widths added up past it). */
    position: absolute;
    top: 0;
    left: 100%;
    height: 100%;
    width: var(--pm-explorer-col2-w, clamp(230px, 20vw, 300px));
    box-sizing: border-box;
    overflow-y: auto;
    background: #fff;
    border-radius: var(--pm-radius);
    box-shadow: var(--pm-shadow-lg);
    padding: 22px 24px;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    transform: translateX(-6px);
    z-index: 999999998;
    pointer-events: none;
}
.categories_sidebar .magamenushow:hover .megadropdown.products,
.categories_sidebar .magamenushow.mm-open .megadropdown.products {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}
.categories_sidebar .cols-wrapper {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    max-width: 780px;
}
/* Clear active/hover state on the left item -- left accent bar via inset
   box-shadow so it doesn't shift layout/padding. */
.categories_sidebar .magamenushow:hover > a.nav-link,
.categories_sidebar .magamenushow.mm-open > a.nav-link {
    background: var(--pm-light);
    box-shadow: inset 3px 0 0 var(--pm-red);
}
/* Chevron toggle (added by _Layout.cshtml's JS only to categories that
   actually have a .megadropdown) -- hidden on desktop, where :hover
   already reveals the panel; shown on mobile as the tap-to-expand control. */
.mm-expand-btn {
    display: none;
}
@media (min-width: 768px) {
    .mm-expand-btn { display: none !important; }
}
@media (max-width: 767px) {
    .mm-expand-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        right: 0;
        width: 34px;
        height: 34px;
        background: transparent;
        border: none;
        color: var(--pm-muted);
        font-size: 12px;
        cursor: pointer;
        transition: transform 0.2s ease, color 0.2s ease;
    }
    .categories_sidebar .magamenushow.mm-open .mm-expand-btn {
        transform: rotate(90deg);
        color: var(--pm-red);
    }
    /* On a narrow drawer there's no room for a side panel -- the submenu
       stacks below the category instead, expanding in place. */
    .categories_sidebar .megadropdown.products {
        position: static;
        opacity: 1;
        visibility: hidden;
        max-height: 0;
        width: 100% !important;
        max-width: none;
        overflow: hidden;
        box-shadow: none;
        border-radius: 0;
        margin-left: 0;
        padding: 0 16px;
        transform: none;
        transition: max-height 0.25s ease, padding 0.25s ease;
        background: var(--pm-light);
    }
    .categories_sidebar .magamenushow.mm-open .megadropdown.products {
        visibility: visible;
        max-height: 2000px; /* generous cap; real content is far shorter */
        padding: 14px 16px;
    }
    .categories_sidebar .cols-wrapper {
        flex-direction: column;
        gap: 4px;
        max-width: none;
    }
    .categories_sidebar .cols-sections {
        display: block !important;
        width: 100% !important;
    }
    .categories_sidebar .list-container {
        display: block !important;
        width: 100% !important;
    }
    .categories_sidebar .list-item {
        width: 100% !important;
        float: none !important;
        padding: 6px 0 !important;
    }
}

/* ── Category explorer, 3rd level: real products for the hovered
   subcategory (_Layout.cshtml #mmProductsPane + logInController.js
   loadSubcatProducts). Now a DOM child of .l_p_categories_widget (moved in
   _Layout.cshtml, was a page-level sibling before), positioned as the
   explorer's 3rd column -- absolute relative to the widget, immediately
   right of the subcategory column (--pm-explorer-col2-w below, shared with
   .megadropdown.products' own width so the two stay in sync with zero JS
   position math). width uses calc() against 100vw so this column can never
   render outside the viewport regardless of how narrow the screen gets
   (item 8) -- it shrinks instead of overflowing. On mobile there's no room
   for a 3rd column at all, so subcategory links there keep navigating
   straight to that subcategory's own full listing instead (unchanged, real,
   already-tested navigation), rather than a cramped inline preview. ── */
.l_p_categories_widget {
    --pm-explorer-col2-w: clamp(230px, 20vw, 300px);
}
.mm-products-pane {
    display: none;
}
@media (min-width: 768px) {
    .mm-products-pane {
        display: block;
        position: absolute;
        top: 0;
        left: calc(100% + var(--pm-explorer-col2-w));
        height: 100%;
        width: clamp(360px, 38vw, 560px);
        max-width: calc(100vw - 260px - var(--pm-explorer-col2-w) - 24px);
        box-sizing: border-box;
        overflow-y: auto;
        background: var(--pm-surface);
        border-radius: var(--pm-radius);
        box-shadow: var(--pm-shadow-lg);
        padding: 18px 20px;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-6px);
        transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
        pointer-events: none;
        z-index: 999999997;
    }
    /* Shown whenever a subcategory has actually loaded content -- ng-show
       toggles ng-hide (display:none) off; opacity/visibility here handle
       the same hover-slide-in treatment as the subcategory column instead
       of an abrupt appear. */
    .mm-products-pane:not(.ng-hide) {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        pointer-events: auto;
    }
    .mm-products-pane-title {
        font-size: 13px;
        font-weight: 700;
        color: var(--pm-navy);
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin-bottom: 12px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--pm-border);
    }
    .mm-products-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
    }
    .mm-products-loading,
    .mm-products-empty {
        padding: 20px 4px;
        color: var(--pm-muted);
        font-size: 13px;
    }
}

/* ── "All Categories" trigger (opens the off-canvas category explorer) ──
   .mobile-cat-toggle is the EXISTING .navbar-toggler button (repurposed,
   see _Layout.cshtml) -- Bootstrap hides .navbar-toggler natively at
   >=992px (the navbar-expand-lg breakpoint) and a prior rule also hid it
   768-991px, back when the sidebar was a permanently-visible desktop
   rail and this button was mobile-drawer-only. Now that the sidebar is
   closed-by-default at every width (see .l_p_categories_widget above),
   this is the only way to open it at any width, so it needs to stay
   visible everywhere, styled as a real labeled button rather than a bare
   hamburger icon. */
.mobile-cat-toggle.all-categories-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--pm-border);
    border-radius: 18px;
    background: var(--pm-surface);
    cursor: pointer;
}
.all-categories-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--pm-text);
    white-space: nowrap;
}
.all-categories-chevron {
    font-size: 10px;
    color: var(--pm-muted);
    transition: transform var(--pm-transition);
}
body.mobile-nav-open .all-categories-chevron {
    transform: rotate(180deg);
}
/* Locked (clicked-to-pin) vs. hover-open both share the chevron flip above,
   but locked gets a filled/pressed look too -- a visible cue that this
   needs an explicit click/Escape/outside-click to close, unlike a plain
   hover-open which closes itself the moment the mouse leaves. */
.mobile-cat-toggle.all-categories-btn.locked {
    background: var(--pm-light);
    border-color: var(--pm-red);
}
.mobile-cat-toggle.all-categories-btn.locked .all-categories-label {
    color: var(--pm-red);
}
@media (max-width: 767px) {
    .all-categories-label { display: none; } /* icon + chevron only -- matches this row's existing tight 320px budget */
}
.mobile-cat-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 99998; /* one below .l_p_categories_widget's 999999999 */
}
body.mobile-nav-open .mobile-cat-backdrop {
    display: block;
}
/* Desktop closes via mouseleave/Escape/click-outside (see _Layout.cshtml)
   instead -- a dark backdrop would dim the pushed-right main content/hero,
   which the explorer must never cover on desktop (it pushes, not overlays). */
@media (min-width: 768px) {
    body.mobile-nav-open .mobile-cat-backdrop {
        display: none;
    }
}

/* ── Hero trailing gap removed ── */
.hero-banner .hero-sub { margin-bottom: 0; }

/* ── Hero right column ── */
.hero-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.hero-right .hero-actions {
    justify-content: flex-end;
}
.hero-right .hero-stats {
    justify-content: flex-end;
}

/* ── Single hero, capped width + independent height ──
   Was full-bleed edge-to-edge, which read as oversized. max-width + auto
   margins keeps it compact/centered horizontally on wide screens instead of
   dominating the whole viewport; height is a clamp() driven off viewport
   width (not the hero's OWN now-capped width, and not a fixed aspect-ratio)
   so capping the width doesn't also collapse the height -- it stays
   spacious independent of how wide the box itself is. object-fit: cover
   below still fills whatever shape this box ends up being with zero
   distortion (cover only crops evenly, it never stretches), regardless of
   width/height no longer being locked to each other or to the source
   photos' own 2:1 ratio. */
.hero-single {
    position: relative;
    /* Fills whatever width .page-main/.body_content actually has left
       (full width with the category explorer closed, the remainder once
       it opens and pushes content over) instead of capping to a fixed
       1200px -- a hard cap left visible blank space on both sides on any
       viewport wider than ~1240px, which got worse the wider the screen.
       Comes for free from the existing flex layout (.page-layout in
       custom.css), no extra margin math needed. */
    width: 100%;
    height: clamp(300px, 34vw, 460px);
    overflow: hidden;
    margin: 0 0 24px;
    border-radius: var(--pm-radius);
}
.hero-single-inner {
    position: absolute;
    inset: 0;
    background: var(--pm-navy);   /* dark fill behind contained images */
    transition: filter 0.42s ease, opacity 0.42s ease;
}
.hero-single-inner.hero-transitioning {
    filter: blur(10px);
    opacity: 0;
}

/* Coded slide — Sourcing Made Simple (teal). Was "Coded slide B", paired
   with a "Coded slide A" (Shop International) that laid HTML text over
   hero-1.png as a CSS background; removed (2026-08-16) since hero-1.png
   already bakes that same promotional message into the artwork and is
   also served clean (no text overlay) as an admin-managed Hero Banner --
   see homeController.js's CODED_SLIDES_END comment. */
.hero-slide-sourcing {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0d4f3c 0%, #1a6b4a 55%, #0a3828 100%);
    color: #fff;
    padding: 24px 48px;
    display: flex;
    align-items: center;
}
.hero-slide-sourcing .hero-sub {
    font-size: clamp(11px, 1vw, 14px);
    opacity: 0.8;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    color: #fff;
}

/* Sourcing inner layout */
.hero-banner-right-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    position: relative;
    z-index: 1;
}
.hero-right-icon { color: rgba(255,255,255,0.6); flex-shrink: 0; }
.hero-banner-right-title {
    font-size: clamp(16px, 1.8vw, 24px) !important;   /* scaled for 288px height */
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
}
.hero-banner-right-title em { color: #4dd4a0; font-style: normal; }
.hero-btn-teal {
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.5);
}
.hero-btn-teal:hover {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.8);
}

/* Image slide */
.hero-img-wrap {
    position: absolute;
    inset: 0;
}
.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* fills the box by cropping evenly, never distorts -- .hero-single's own aspect-ratio (2:1) already matches these photos' real ratio, so cropping is minimal */
    object-position: center;
    display: block;
}

/* Optional CTA overlaid on an admin-managed hero image banner (Admin >
   Website Content > Hero Banners' Button Text/Link) -- most existing banners
   bake their own call-to-action into the artwork, so this only appears when
   an admin explicitly sets both fields on a given banner. */
.hero-img-cta {
    position: absolute;
    left: 6%;
    bottom: 10%;
}
@media (max-width: 767px) {
    .hero-img-cta { left: 50%; transform: translateX(-50%); bottom: 6%; }
}

/* Dot navigation */
.hero-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}
.hero-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.38);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    display: inline-block;
    flex-shrink: 0;
}
.hero-dot.active {
    background: rgba(255,255,255,0.9);
    transform: scale(1.25);
}
@media (max-width: 576px) {
    /* .hero-single's own min-height (300px) already governs mobile height now
       (aspect-ratio 2:1 alone would give ~195px at this width, but the
       min-height floor takes over) -- nearly double the previous hand-tuned
       155px box, so the coded slide's content (title+sub+CTA) has real room
       instead of needing pixel-perfect cramming. Padding/font-sizes below
       are a normal mobile scale-down, not a tight-fit rescue. */
    .hero-slide-sourcing {
        padding: 20px 20px;
    }
    .hero-slide-sourcing .hero-sub {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    .hero-actions {
        margin-bottom: 10px;
    }
    .hero-banner-right-inner {
        gap: 10px;
    }
}

/* ── Header CTA buttons ── */
.header-cta .hdr-btn {
    background: var(--pm-red) !important;
    color: #fff !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border: none !important;
    white-space: nowrap;
}
.header-cta .hdr-btn:hover { background: var(--pm-red-dark) !important; }
.header-cta .hdr-btn-outline {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    color: rgba(255,255,255,0.85) !important;
}
.header-cta .hdr-btn-outline:hover {
    border-color: rgba(255,255,255,0.8) !important;
    color: #fff !important;
}

/* ── Stats row under header buttons ── */
.header-stats {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 4px;
}
.header-stat-item {
    font-size: 10.5px;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
}
.header-stat-item strong {
    color: var(--pm-orange);
    font-weight: 700;
}

/* ── Nav bar CTA group (Shop Now / Contact Us + stats) ── */
.nav-cta-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 14px;
    margin-left: 10px;
    border-left: 1px solid var(--pm-border);
}
.nav-stat-item {
    font-size: 10.5px;
    color: #666;
    white-space: nowrap;
    padding: 0 4px;
}
.nav-stat-item strong {
    color: var(--pm-red);
    font-weight: 700;
}
.nav-hero-btn {
    padding: 5px 13px !important;
    font-size: 12px !important;
    border-radius: 20px !important;
}
.nav-hero-btn:hover {
    transform: none !important;
}
.nav-btn-outline {
    background: transparent !important;
    border: 1.5px solid var(--pm-red) !important;
    color: var(--pm-red) !important;
    box-shadow: none !important;
}
.nav-btn-outline:hover {
    background: var(--pm-red) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* ── Header account & cart compact ── */
.top_right li a {
    border: none !important;
    line-height: 1 !important;
    padding: 5px 10px !important;
    font-size: 13px !important;
}
.top_right li:nth-child(1) a,
.top_right li:nth-child(2) a {
    width: auto !important;
}
.top_right .cart a .fa-shopping-cart {
    font-size: 19px;
    vertical-align: middle;
}

@media (max-width: 576px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* ── Category page header ── */
.category-page-header {
    padding: 14px 10px 4px;
}
.category-page-title {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    text-transform: capitalize;
}

/* ── Pagination bar ── */
.pagination-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 24px 10px 16px;
}
.page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1.5px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #444;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1;
}
.page-btn:hover:not([disabled]) {
    background: #f5f5f5;
    border-color: #aaa;
}
.page-btn-active {
    background: #e62e04 !important;
    border-color: #e62e04 !important;
    color: #fff !important;
}
.page-btn[disabled] {
    opacity: 0.35;
    cursor: default;
}

/* ── Homepage category sections ── */
/* Grey page wash — makes each white card stand out with a visible gap */
.home-categories {
    background: #f0f2f4;
    padding: 12px 0 12px;
    margin-top: 0;
}

/* ── Each category section: white card ── */
.home-category-section {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.05);
    padding: 22px 16px 22px;
    margin-bottom: 12px;
}
.home-category-section:last-child {
    margin-bottom: 0;
}

/* ── Decorative centered section heading ── */
.home-section-header {
    text-align: center;
    padding: 0;
    margin-bottom: 20px;
}
.home-section-title {
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 10px;
    letter-spacing: 0.4px;
}
/* Thin pink/red rule with hollow diamond centered on it */
.section-rule {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 14px;
    margin-bottom: 4px;
}
.section-rule::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(230, 46, 4, 0.30);
    transform: translateY(-50%);
}
.section-diamond {
    display: block;
    width: 13px;
    height: 13px;
    background: #fff;              /* matches card background; cuts line cleanly */
    border: 2px solid var(--pm-red);
    transform: rotate(45deg);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/* Centered "View All" button below each category grid */
.view-all-row {
    text-align: center;
    padding: 20px 0 0;
}
.view-all-bottom-btn {
    display: inline-block;
    background: transparent;
    color: var(--pm-red) !important;
    border: 1.5px solid var(--pm-red);
    font-weight: 600;
    font-size: 12px;
    padding: 6px 22px;
    border-radius: 20px;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: background var(--pm-transition), color var(--pm-transition), transform 0.12s;
    text-decoration: none !important;
}
.view-all-bottom-btn:hover {
    background: var(--pm-red);
    color: #fff !important;
    transform: translateY(-1px);
}
.section-loading {
    padding: 20px 0;
    color: #aaa;
    font-size: 13px;
    box-sizing: border-box;
    min-height: 281px;   /* reserves ~1 product-grid row (measured .l_product_item height + its <576px margin-bottom) to cut layout shift when products populate; can't reserve for the true row count since that's unknown until the fetch resolves */
}
@media (min-width: 576px) {
    .section-loading {
        min-height: 265px;   /* row margin-bottom drops from 30px to 14px at this breakpoint (see responsive.css .l_product_item rule) */
    }
}
.section-empty {
    padding: 16px 4px;
    color: #999;
    font-size: 13px;
}

/* ── Product flex-grid — no negative-margin overflow, partial rows end naturally ── */
.product-grid {
    display: flex;
    flex-wrap: wrap;
    column-gap: 14px;
}
.product-grid-item {
    flex: 0 0 auto;
    min-width: 0;
    box-sizing: border-box;
    width: calc((100% - 14px) / 2);       /* xs: 2 per row */
    animation: sourceTabFadeIn 0.25s ease;
}
/* ng-repeat recreates these nodes whenever the products array reference
   changes (tab switch, search, category click) — this replays on each,
   giving tab switches a smooth fade instead of an abrupt swap. */
@keyframes sourceTabFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (min-width: 576px) {
    .product-grid-item { width: var(--pm-grid-columns-width, calc((100% - 28px) / 3)); }   /* sm: 3 per row, or admin-configured column count */
}
@media (min-width: 768px) {
    .product-grid-item { width: var(--pm-grid-columns-width, calc((100% - 42px) / 4)); }   /* md+: 4 per row (changed from 5 on 2026-08-19 for better product visibility), or admin-configured column count */
}

/* ── Category header bar (ProductList) ── */
.cat-header-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0 12px;
    border-bottom: 2px solid var(--pm-border);
    margin-bottom: 16px;
}
.cat-back-btn {
    background: none;
    border: 1.5px solid var(--pm-red);
    color: var(--pm-red);
    font-size: 15px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 6px;
    line-height: 1;
    transition: background var(--pm-transition), color var(--pm-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cat-back-btn:hover {
    background: var(--pm-red);
    color: #fff;
}
.cat-header-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--pm-red);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* ── Back bar (ProductDetails) — same back-button style as the category header ── */
.details-back-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    margin-bottom: 12px;
}
.details-back-label {
    font-size: 14px;
    font-weight: 600;
    color: #555;
}

/* ── Price filter (same row as category header) ── */
.price-filter-group {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.price-filter-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
}
.price-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.price-currency {
    position: absolute;
    left: 8px;
    font-size: 12px;
    color: #888;
    pointer-events: none;
    z-index: 1;
}
.price-input {
    width: 90px;
    padding: 6px 8px 6px 22px;
    border: 1.5px solid var(--pm-border);
    border-radius: 6px;
    font-size: 13px;
    color: #333;
    outline: none;
    transition: border-color var(--pm-transition);
    -moz-appearance: textfield;
}
.price-input:focus { border-color: var(--pm-red); }
.price-input::-webkit-outer-spin-button,
.price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price-sep { color: #bbb; font-size: 14px; }
.price-filter-btn {
    background: var(--pm-red);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--pm-transition);
    white-space: nowrap;
    line-height: 1.4;
}
.price-filter-btn:hover { background: var(--pm-red-dark); }
.price-filter-clear {
    background: none;
    border: 1.5px solid #ddd;
    color: #aaa;
    border-radius: 6px;
    padding: 6px 9px;
    cursor: pointer;
    font-size: 12px;
    transition: all var(--pm-transition);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.price-filter-clear:hover { border-color: var(--pm-red); color: var(--pm-red); }

@media (max-width: 576px) {
    /* .price-filter-group's natural width (~278px) + the back button/category
       name ahead of it on the same nowrap flex row put the Filter button
       fully off-screen (its left edge past the viewport's right edge — not a
       scrollbar case, the button was simply unreachable) at 320/360px, and
       left only ~0.4px of margin at 390px. Wrap it onto its own full-width
       row instead of fighting for space on the header row. */
    .cat-header-bar {
        flex-wrap: wrap;
    }
    .price-filter-group {
        margin-left: 0;
        flex-basis: 100%;
    }
    .price-filter-inputs {
        flex: 1 1 auto;
    }
    .price-input-wrap {
        flex: 1 1 auto;
        min-width: 0;
    }
    .price-input {
        width: 100%;
        box-sizing: border-box;
    }
}

/* ── Source tabs (AliExpress / Taobao / 1688) ── */
.source-tab-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding: 14px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.source-tab-row::-webkit-scrollbar { display: none; }
.source-tab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1.5px solid var(--pm-border);
    color: #555;
    border-radius: 20px;
    padding: 5px 16px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.4;
    transition: background var(--pm-transition), border-color var(--pm-transition), color var(--pm-transition);
    outline: none;
    font-family: inherit;
}
.source-tab-icon {
    height: 20px;
    width: auto;
    flex: 0 0 auto;
    display: block;
}
.source-tab:hover {
    border-color: #e8194b;
    color: #e8194b;
    background: rgba(232,25,75,0.04);
}
.source-tab-active,
.source-tab-active:hover {
    background: #e8194b !important;
    border-color: #e8194b !important;
    color: #fff !important;
}
/* Brand logo images carry their own fixed colors (e.g. AliExpress red-on-transparent,
   eBay's 4-color wordmark) — give them a white backdrop when the tab turns solid red
   so they stay legible instead of blending into the active-state background. */
.source-tab-active .source-tab-icon {
    background: #fff;
    border-radius: 6px;
    padding: 3px 7px;
}
.source-tab-count {
    opacity: 0.85;
    font-weight: 500;
}
/* Same disabled treatment as .marketplace-nav-btn:disabled above (custom.css)
   -- kept visible, just grayed out and inert, so a disabled marketplace
   reads consistently between the header nav and this row. */
.source-tab:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Source badge — shown on ElimAPI-sourced cards (Taobao/1688) only */
.source-badge {
    display: inline-block;
    background: #ff6a00;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    line-height: 1.5;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}
.source-badge-1688 {
    background: #1677ff;
}

/* ── ProductDetails: Taobao/1688 seller + "View on <source>" ── */
.pd-condition-info {
    margin: 4px 0 0;
}
.pd-condition-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f3f4f6;
    color: var(--pm-navy);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 12.5px;
    font-weight: 600;
}
.pd-condition-badge .fa {
    color: var(--pm-red);
}

.elim-source-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 4px 0 14px;
}
.elim-seller-name {
    font-size: 13px;
    color: #666;
}
.elim-seller-name .fa {
    color: var(--pm-red);
    margin-right: 4px;
}
.elim-view-source-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1.5px solid var(--pm-red);
    color: var(--pm-red);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--pm-transition), color var(--pm-transition);
}
.elim-view-source-btn:hover {
    background: var(--pm-red);
    color: #fff;
    text-decoration: none;
}

/* ── ProductDetails: Taobao/1688 specifications table ── */
.elim-specs-table {
    width: 100%;
    border-collapse: collapse;
}
.elim-specs-table tr:nth-child(odd) {
    background: #f9f9f9;
}
.elim-specs-table td {
    padding: 9px 14px;
    font-size: 13px;
    border-bottom: 1px solid #eee;
}
.elim-spec-name {
    width: 35%;
    color: #888;
    font-weight: 500;
}
.elim-spec-value {
    color: #333;
}

/* ── Subcategory pill row ── */
.subcat-pill-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding: 2px 0 14px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.subcat-pill-row::-webkit-scrollbar { display: none; }
.subcat-pill {
    flex: 0 0 auto;
    background: #fff;
    border: 1.5px solid var(--pm-border);
    color: #555;
    border-radius: 20px;
    padding: 5px 16px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.4;
    transition: background var(--pm-transition), border-color var(--pm-transition), color var(--pm-transition);
    outline: none;
    font-family: inherit;
}
.subcat-pill:hover {
    border-color: var(--pm-red);
    color: var(--pm-red);
    background: rgba(217,21,34,0.04);
}
.subcat-pill-active,
.subcat-pill-active:hover {
    background: var(--pm-red) !important;
    border-color: var(--pm-red) !important;
    color: #fff !important;
}

/* ── top_right li: position:relative for dropdown & tooltip anchoring ── */
.top_right > li {
    position: relative !important;
}

/* ── Account dropdown — modern card style ── */
.top_right .dropdown_menu ul {
    border-radius: 8px !important;
    border: 1px solid var(--pm-border) !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.13) !important;
    min-width: 148px !important;
    padding: 6px 0 !important;
    left: auto !important;
    right: 0 !important;
    top: calc(100% + 6px) !important;
}
.top_right .dropdown_menu ul li a {
    font-size: 13px !important;
    padding: 10px 18px !important;
    line-height: 1.4 !important;
    display: block !important;
    border: none !important;
    border-right: none !important;
    color: #333 !important;
    text-decoration: none !important;
}
.top_right .dropdown_menu ul li a:hover {
    background: rgba(255,107,53,0.07) !important;
    color: var(--pm-orange) !important;
}
/* Remove the divider pseudo-element on last item */
.top_right .dropdown_menu ul li:last-child a::before {
    display: none !important;
}
.top_right .dropdown_menu ul li:first-child a::before {
    display: none !important;
}

/* ── Wishlist tooltip ── */
.top_right .wishlist::after {
    content: 'Wishlist';
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.76);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 9px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
    pointer-events: none;
    z-index: 999999999;
}
.top_right .wishlist:hover::after {
    opacity: 1;
    visibility: visible;
}

/* ── Cart tooltip ── */
.top_right .cart::after {
    content: 'Cart';
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.76);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 9px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
    pointer-events: none;
    z-index: 999999999;
}
.top_right .cart:hover::after {
    opacity: 1;
    visibility: visible;
}

/* ── Account name total badge + per-menu-item badges (replaces the bell —
   the bell's own icon-only pill was fighting the Account pill's max-width/
   ellipsis/nowrap layout rules it inherited via the shared dropdown_menu
   classes, which is what was pushing Cart/Wishlist rightward). This <a>
   itself stays overflow:visible so the badge below isn't clipped -- name
   truncation now lives on the inner .acct-name-text span instead (see
   above), so the two no longer fight over the same overflow property. ── */
.top_right .acct-menu > a {
    position: relative !important;
    overflow: visible !important;
}
.acct-total-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--pm-red);
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--pm-badge-ring);
    line-height: 1;
}
.acct-menu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 6px;
    background: var(--pm-red);
    color: #fff !important;
    border-radius: 9px;
    font-size: 10px !important;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

/* ── AI search popover (hover/focus on the search/magnify button) ──
   .ai-search-tooltip is a SIBLING of .search-input-shell (inside
   .search-input-group, which already has position:relative !important),
   not nested inside it -- the shell has overflow:hidden !important
   (needed to clip the pill's own rounded corners, see .search-input-shell
   below), which was silently clipping this popover whenever it tried to
   show below the bar. Same reason .search-dropdown (history/autocomplete)
   already lives at this same level instead of inside the shell.
   Trigger is :has() on .search-input-group reacting to :hover/
   :focus-within on EITHER .ai-search-tooltip-wrap (the search button's
   own wrapper, still inside the shell) OR .ai-search-tooltip itself --
   :focus-within reaching the popover's own hotspot buttons (keyboard tab)
   doubles as the mobile "tap" behavior, since tapping a button also
   focuses it -- no separate JS needed.

   2026-08-15: now hosts the user-supplied promo graphic
   (ai-search-popup-v2.jpg, swapped from a first, smaller revision same
   day per "use this image as popup but a bigger size") at a much larger
   size than the old text tooltip, per "use this image as a popup window
   while hovering on search (magnify) button" -- still a hover popover,
   not a click-triggered modal (contrast the announcement popup above,
   which needed a live countdown a hover can't sustain; this is a static
   promo image, so a hover fits the literal ask). border-radius +
   overflow:hidden clips the image's own square corners to match the
   card's rounding. */
.ai-search-tooltip {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 560px;
    max-width: 92vw;
    background: var(--pm-surface, #fff);
    border: 1px solid var(--pm-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--pm-shadow-lg, var(--pm-shadow-md));
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 30;
    text-align: left;
}
.ai-search-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 22px;
    border: 6px solid transparent;
    border-bottom-color: var(--pm-surface, #fff);
}
.ai-search-tooltip-image {
    display: block;
    width: 100%;
    height: auto;
}
/* Two invisible, real, clickable buttons layered over the "AI দিয়ে
   স্মার্ট Search" / "ছবি দিয়ে স্মার্ট Search" CTA buttons baked into
   ai-search-popup-v2.jpg. %-based position/size (not px) so they track
   the two buttons' actual location at any rendered width -- measured by
   pixel-sampling the red/green button regions on the 1536x1024 source
   graphic (red button: x 403-789, y 763-816; green button: x 872-1272,
   y 763-816), then padded out slightly beyond those exact bounds for an
   easier click target rather than a pixel-perfect (and more fragile) hit
   box. Re-measured 2026-08-15 for the v2 graphic swap -- the buttons sit
   a little further left/lower than on v1, don't reuse those coordinates. */
.ai-search-tooltip-hotspot {
    position: absolute;
    top: 74%;
    height: 6.2%;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}
.ai-search-tooltip-hotspot-ai {
    left: 25.7%;
    width: 26.1%;
}
.ai-search-tooltip-hotspot-image {
    left: 56.3%;
    width: 27%;
}
.search-input-group:has(.ai-search-tooltip-wrap:hover) .ai-search-tooltip,
.search-input-group:has(.ai-search-tooltip-wrap:focus-within) .ai-search-tooltip,
.search-input-group:has(.ai-search-tooltip:hover) .ai-search-tooltip,
.search-input-group:has(.ai-search-tooltip:focus-within) .ai-search-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .ai-search-tooltip { transition: opacity 0.18s ease, visibility 0.18s ease; transform: none; }
}
@media (max-width: 576px) {
    .ai-search-tooltip { width: 300px; right: -20px; }
}

/* ── Search bar: Features A, B, C ─────────────────────────────────────── */

/* Ensure the whole group can host the absolute dropdown */
.search-input-group {
    position: relative !important;
    flex-wrap: nowrap !important;
}

/* Clips input+button to one pill: without this, the button's rounded-away
   corner exposes the input's own square corner behind it (the input and
   button are both flat where they meet, drawn as separate boxes). */
.search-input-shell {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    border-radius: 24px !important;
    overflow: hidden !important;
}

/* style.css centers this button via `top: 51%; transform: translateY(-50%)`
   (a legacy centering trick with a 1%-of-height fudge baked in) — the
   51% (not 50%) was what left a sub-pixel gap at the input/button seam.
   Pin the box directly instead: cancel the transform and span the shell
   exactly with top/bottom 0. */
.search-input-shell .input-group-btn {
    top: 0 !important;
    bottom: 0 !important;
    transform: none !important;
}

/* The visible red pill is this span's flex-centered background; the actual
   <button> (ng-click="doSearch()") inside it has no width/height of its own
   and shrinks to fit just the icon glyph (~15x15), leaving most of the pill
   tap-dead. Stretch the button to fill the span so the whole visible pill
   is clickable, matching what it already looks like. */
.search-input-shell .input-group-btn button {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* style.css's form-control padding-right (41px) only ever reserved room for
   the one search button that used to sit at the input's right edge -- now
   two buttons (camera + search, 41px each) sit there, so the input's own
   text needs to stop 82px from the edge, not 41px, or typed text runs
   underneath the camera button. */
.search-input-shell .search-input {
    padding-right: 82px !important;
}

/* Both this button's wrapping span AND the search button's span match
   style.css's `.top_header_middle .input-group .input-group-btn` (absolute,
   right: 0 via custom.css above) -- with two of them now instead of one,
   they'd otherwise sit stacked exactly on top of each other at the input's
   right edge, with the search button (later in the DOM) painting over and
   fully hiding this one. Shifting this one left by its own width puts it
   immediately to the left of the search pill instead of underneath it. */
.search-input-shell .search-image-btn-group {
    right: 41px !important;
}

/* `.top_header_middle .input-group .input-group-btn` (custom.css, further
   up) paints every such span red at 3-class specificity -- the plain
   `.search-input-shell .search-image-btn-group` override just above this
   comment is only 2 classes, so despite both being !important it LOSES to
   the red rule (specificity beats source order) and the red box was still
   showing straight through the transparent button on top of it. Repeating
   the same 3-class prefix here, plus the extra class, guarantees this wins
   regardless of where either rule sits in the file. */
.top_header_middle .input-group .input-group-btn.search-image-btn-group {
    background: transparent !important;
    border-radius: 0 !important;
}

/* "Search by photo" icon — styled like Google's own camera-search icon
   (plain glyph sitting inside the bar, no button box around it) rather
   than a separate button, so it reads as part of the search field, not a
   second/competing action next to the red search pill. */
.search-input-shell .search-image-btn {
    background: transparent !important;
    color: #5f6368 !important;
    font-size: 22px !important;
    border-right: none !important;
}
.search-input-shell .search-image-btn:hover {
    color: #1a1a1a !important;
}
.search-input-shell .search-image-btn:disabled {
    opacity: 0.6 !important;
    cursor: default !important;
}

/* Dropdown panel */
.search-dropdown {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12) !important;
    z-index: 2147483647 !important;
    overflow: hidden !important;
    max-height: 320px !important;
    overflow-y: auto !important;
}

/* Section label row (autocomplete "Suggestions" + history "Recent Searches") */
.search-dd-section-label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 14px 4px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #9ca3af !important;
}

/* "Recent Searches" heading is red */
.search-history-label {
    color: var(--pm-primary, #e8194b) !important;
}

/* Clear-all button */
.search-dd-clear-btn {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    font-size: 11px !important;
    color: var(--pm-primary, #e8194b) !important;
    cursor: pointer !important;
    font-weight: 500 !important;
}
.search-dd-clear-btn:hover {
    text-decoration: underline !important;
}

/* Each autocomplete item row */
.search-dd-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 14px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    color: #374151 !important;
    transition: background 0.12s ease !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}
.search-dd-item:hover,
.search-dd-item.search-dd-active {
    background: #f3f4f6 !important;
}
.search-dd-icon {
    color: #9ca3af !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
}

/* Feature B: pill tag cloud for search history */
.search-history-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 6px 14px 12px !important;
}
.search-history-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: #f3f4f6 !important;
    color: #374151 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 20px !important;
    padding: 4px 8px 4px 12px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    transition: background 0.12s ease, border-color 0.12s ease !important;
}
.search-history-tag:hover {
    background: #e5e7eb !important;
    border-color: #d1d5db !important;
}
.search-history-tag-active {
    background: #e5e7eb !important;
    border-color: #9ca3af !important;
}
.search-tag-remove {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #9ca3af !important;
    font-size: 13px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: color 0.12s ease !important;
}
.search-tag-remove:hover {
    color: #4b5563 !important;
}

/* --- Site-wide WhatsApp floating action button --- */
.whatsapp-fab {
    position: fixed;
    right: var(--pm-sp-5);
    bottom: var(--pm-sp-5);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pm-whatsapp);
    color: #fff;
    border-radius: 50%;
    box-shadow: var(--pm-shadow-lg);
    transition: var(--pm-transition);
    z-index: 2147483647;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}
.whatsapp-fab i {
    font-size: 28px;
    color: #fff;
}
.whatsapp-fab:hover {
    transform: scale(1.08);
    color: #fff;
}
/* Mid-drag: no transition lag behind the pointer, and a "grabbing" cursor +
   stronger shadow for feedback that it's actually being moved. */
.whatsapp-fab--dragging {
    transition: none !important;
    cursor: grabbing;
    box-shadow: 0 10px 28px rgba(0,0,0,0.32);
}
@media (max-width: 767px) {
    .whatsapp-fab {
        right: var(--pm-sp-4);
        bottom: var(--pm-sp-4);
        width: 48px;
        height: 48px;
    }
    .whatsapp-fab i {
        font-size: 24px;
    }
}

/* Toastr's default bottom-right toasts (#toast-container, z-index 999999 in
   toastr.css) collide with the fixed WhatsApp FAB above, which sits at the
   browser's max z-index and is drawn on top of everything else on the page
   by design (it needs to stay clickable over any content) -- so a toast
   landing under the FAB's 56px/48px circle has its own close button visually
   and functionally intercepted by the FAB underneath it. Found on
   Product/ProductList (stacked eBay/1688 "type a search term" warnings) but
   applies to every toast on every page, since the FAB is site-wide. Move the
   toast stack up to clear the FAB's footprint (offset + diameter + a small
   gap) instead of touching the FAB's z-index.  */
#toast-container.toast-bottom-right {
    bottom: 92px;
}
@media (max-width: 767px) {
    #toast-container.toast-bottom-right {
        bottom: 76px;
    }
}

/* ── Shipping Calculator ── */
.shipping-calc-card {
    background: #fff;
    border: 1px solid var(--pm-border);
    border-radius: 10px;
    padding: 16px;
    max-width: 1000px;
    margin: 0 auto 40px;
}
.shipping-calc-status {
    font-size: 12.5px;
    line-height: 1.4;
    color: #666;
    margin-bottom: 12px;
}
.shipping-calc-status.shipping-calc-warn {
    color: #b45309;
}
/* Horizontally-scrollable wrapper, NOT wrapping cell content — every row
   (carrier/category/rate/unit/qty/amount) must stay on a single line even
   on narrow screens, per the grid's single-line-row requirement. */
.shipping-calc-grid-wrap {
    overflow-x: auto;
}
.shipping-calc-grid {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}
.shipping-calc-grid th {
    text-align: left;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 6px 8px;
    border-bottom: 2px solid var(--pm-border);
    white-space: nowrap;
}
/* Column-header filters — same single-header-row pattern as the admin Orders
   grid (Admin.cshtml's .admin-table-col-filters-single / admin.css): the
   filter select sits directly in the <th> with the column name as its own
   first option, no separate label line, so the header stays one line even
   with filters added. Kept deliberately compact (small font/padding) for the
   same no-horizontal-scroll reason admin's version is tight. */
.shipping-calc-col-header-filter {
    vertical-align: middle;
}
.shipping-calc-col-filter {
    font-size: 10.5px;
    line-height: 1.3;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #555;
    border: 1px solid var(--pm-border);
    border-radius: 5px;
    padding: 3px 5px;
    background: #fff;
    max-width: 110px;
}
.shipping-calc-col-filter:focus {
    outline: none;
    border-color: var(--pm-orange);
}
/* Category values ("Global (All Categories)", etc.) run longer than
   Carrier/Unit — same per-column width override pattern as admin's Orders
   grid (#ordersFilterOrderId/#ordersFilterQty getting a narrower cap in
   admin.css), just wider instead of narrower, so the selected label isn't clipped. */
.shipping-calc-col-filter-wide {
    max-width: 170px;
}
/* Refresh/Clear — same icon-only reset button as the admin Orders grid's
   "Clear column filters" (.admin-icon-btn in admin.css), scaled down to match
   this grid's tighter compact sizing, placed as the last header column so it
   sits to the right of the filter controls like Orders' does. */
.shipping-calc-reset-btn {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    border: 1px solid var(--pm-border);
    background: #fff;
    color: #888;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: background var(--pm-transition), color var(--pm-transition);
}
.shipping-calc-reset-btn:hover {
    background: var(--pm-navy);
    color: #fff;
    border-color: var(--pm-navy);
}
.shipping-calc-empty-row {
    text-align: center;
    color: #888;
    font-size: 12.5px;
    padding: 14px !important;
    white-space: normal !important;
}
.shipping-calc-grid td {
    padding: 6px 8px;
    font-size: 12.5px;
    line-height: 1.3;
    color: #333;
    border-bottom: 1px solid var(--pm-border);
    white-space: nowrap;
}
.shipping-calc-grid tbody tr:hover {
    background: rgba(255,107,53,0.04);
}
.shipping-calc-method-tag {
    display: inline-block;
    font-size: 9.5px;
    line-height: 1.4;
    font-weight: 700;
    color: #888;
    border: 1px solid var(--pm-border);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 5px;
    text-transform: uppercase;
}
.shipping-calc-qty-input {
    width: 60px;
    height: 24px;
    padding: 0 6px;
    line-height: 1.2;
    border: 1.5px solid var(--pm-border);
    border-radius: 5px;
    font-size: 12px;
    color: #333;
    box-sizing: border-box;
}
.shipping-calc-qty-input:focus {
    outline: none;
    border-color: var(--pm-orange);
}
.shipping-calc-amount-cell {
    font-weight: 700;
    color: var(--pm-navy);
}
.shipping-calc-total-label {
    text-align: right;
    font-weight: 700;
    color: #555;
    border-bottom: none !important;
    border-top: 2px solid var(--pm-border);
}
.shipping-calc-total-amount {
    font-size: 14px;
    color: var(--pm-red);
    border-top: 2px solid var(--pm-border);
}

.shipping-calc-note {
    margin-top: 14px;
    font-size: 11.5px;
    color: #888;
    line-height: 1.5;
    white-space: normal;
}
.shipping-calc-note i {
    color: var(--pm-orange);
    margin-right: 4px;
}