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

.body_content {
    margin-left: 88px;
    min-height: calc(100vh - 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;

    /* 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;
}

/* --- Promo Bar --- */
.promo-bar {
    background: linear-gradient(90deg, var(--pm-navy), var(--pm-navy-2));
    color: #fff;
    text-align: center;
    padding: 8px 40px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 1.4;
}

.promo-bar em {
    color: var(--pm-orange);
    font-style: normal;
    font-weight: 700;
}

/* 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;
}

/* Sidebar container tracks the header: its top/height sit below the
   header (see .l_p_categories_widget below) via --pm-header-h. When the
   header hides on scroll, it no longer occupies that space, so the
   sidebar expands to reclaim it — same 0.3s ease timing as #site-header
   so both move in lockstep. */
#site-header.site-header--hidden ~ .categories_sidebar .l_p_categories_widget {
    top: 0 !important;
    height: 100vh !important;
    max-height: 100vh !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: dark navy top bar --- */
#navbar_top {
    background: var(--pm-navy) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.35) !important;
}

.top_header_middle .input-group .form-control {
    border-top: 1.5px solid rgba(255,255,255,0.4) !important;
    border-bottom: 1.5px solid rgba(255,255,255,0.4) !important;
    border-left: 1.5px solid rgba(255,255,255,0.4) !important;
    border-right: none !important;
    background: rgba(255,255,255,0.1) !important;
    color: #fff !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: rgba(255,255,255,0.45) !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: rgba(255,255,255,0.82) !important;
    transition: color var(--pm-transition);
}

.top_right li a:hover {
    color: #fff !important;
}

/* 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) ── */
.top_header_left .logo {
    max-height: 65px;
    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 links only need room for their own text (11px font) — the
   default Bootstrap .nav-link padding (0.5rem = 8px top/bottom) was
   sized for a 52px-tall bar. Trimming it lets the bar shrink to
   min-height above without clipping, cutting the dead white space the
   sidebar reserves above its first category row (--pm-header-h tracks
   this bar's real height). */
.shop_header_area .navbar-nav .nav-link.policy {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.shop_header_area .navbar-nav .nav-link.policy {
    font-size: 11px !important;
    color: #555 !important;
    font-weight: 500;
    transition: color var(--pm-transition);
}

.shop_header_area .navbar-nav .nav-link.policy:hover {
    color: var(--pm-red) !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); }

/* --- 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;
}

.hero-stats {
    display: flex;
    gap: 20px;
    margin-top: 12px;
    position: relative;
    z-index: 1;
}

.hero-stat strong {
    display: block;
    font-size: 21px;
    font-weight: 700;
    color: var(--pm-orange);
}

.hero-stat span {
    font-size: 11px;
    opacity: 0.65;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- 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;
}

.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);
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.l_product_item .l_p_img img {
    transition: transform 0.42s ease;
    object-fit: cover;
    width: 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-right of product image */
.new-arrival-badge {
    position: absolute;
    top: 8px;
    right: 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 / 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;
}

.quick-view-pill {
    position: absolute;
    bottom: -38px;
    left: 0;
    right: 0;
    background: transparent;
    border: 2px solid var(--pm-red);
    box-sizing: border-box;
    color: var(--pm-red);
    text-align: center;
    padding: 7px 0;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    transition: bottom var(--pm-transition);
    cursor: pointer;
}

.l_product_item:hover .quick-view-pill {
    bottom: 0;
}

.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;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background var(--pm-transition), color var(--pm-transition), box-shadow var(--pm-transition), transform var(--pm-transition) !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-navy) !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(100vh - 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(100vh - 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: 92vh;
    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: 2fr 1fr 1fr 1.5fr;
    gap: 32px;
    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 {
    height: 150px;
    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;
    }
    .hero-stats {
        gap: 16px;
    }
    .auth-card-body,
    .auth-card-header {
        padding: 20px;
    }
    .promo-bar {
        font-size: 11px;
        padding: 7px 32px;
    }
    /* .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; }

/* ── Sidebar: aside is the fixed container, expands on hover (Feature 6a + 6b) ──
   The box itself starts right below the promo bar + logo/search row
   (top: --pm-sidebar-top) and is exactly that much shorter
   (height: 100vh - --pm-sidebar-top), so its bottom edge still lands at
   the viewport bottom — Get App/Chat buttons stay pinned exactly where
   they were. --pm-sidebar-top deliberately excludes the menu/policy row
   (.shop_header_area) — that row is offset out from under the sidebar's
   column (see the .shop_header_area rule below) so it sits beside the
   sidebar instead of stacked above it. Because the container's own top
   edge is already below the two bars actually above its column, the
   category <ul> needs NO padding-top reservation: its first row is the
   box's first pixel, and the box's own background (below) paints that
   pixel — no separate "reserved" region left unpainted, so there's
   nothing that can show as a white gap. When the header hides on scroll
   (site-header--hidden), the matching rule near #site-header snaps top
   back to 0 / height back to 100vh so the sidebar reclaims the freed
   space.
   top/height are NOT transitioned: --pm-sidebar-top gets recalculated
   (ResizeObserver + resize listener) any time the header's real height
   changes, e.g. a web font swapping in after first paint. A transition
   on top/height would animate through that recalculation, so a
   screenshot taken mid-animation could catch the sidebar's first row
   still partly under the header — an intermittent, hard-to-repro
   "clipped" look. Snapping instantly avoids that; only width (the
   hover expand, a deliberate user-triggered change, not a passive
   measurement correction) is worth animating. */
.l_p_categories_widget {
    position: fixed !important;
    left: 0 !important;
    top: var(--pm-sidebar-top, 106px) !important;
    margin-top: 0 !important;
    z-index: 999999999 !important;
    width: 88px !important;
    transition: width 0.22s ease !important;
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - var(--pm-sidebar-top, 106px)) !important;
    max-height: calc(100vh - var(--pm-sidebar-top, 106px)) !important;
    background: #fff !important;
    box-shadow: 2px 0 8px rgba(0,0,0,0.07) !important;
    margin-bottom: 0 !important;
}
.l_p_categories_widget:hover,
body.mobile-nav-open .l_p_categories_widget {
    width: 240px !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;
    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;
}

/* ── Mobile category drawer trigger + backdrop ──
   .mobile-cat-toggle is the EXISTING .navbar-toggler button (repurposed, see
   _Layout.cshtml) — its Bootstrap appearance/sizing/native <992px show-hide
   is left untouched on purpose; only the 768-991px range needs an extra
   hide, since the real (non-drawer) sidebar is already visible there. */
@media (min-width: 768px) and (max-width: 991px) {
    .mobile-cat-toggle {
        display: none !important;
    }
}
.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;
}

/* ── 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 full-width hero ── */
.hero-single {
    position: relative;
    width: 100%;
    height: 240px;   /* fixed 2.5-inch at 96 DPI */
    overflow: hidden;
    margin-bottom: 20px;
    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 A — Shop International (navy) */
.hero-slide-shop {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--pm-navy) 0%, var(--pm-navy-2) 55%, #0f3460 100%);
    color: #fff;
    padding: 24px 48px;   /* fixed px — 6% of 1340px (80px) was too tall at 288px */
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}
.hero-slide-shop::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -5%;
    width: 45%;
    height: 80%;
    background: radial-gradient(circle, rgba(217,21,34,0.25) 0%, transparent 68%);
    border-radius: 50%;
    pointer-events: none;
}
.hero-slide-shop::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: 18%;
    width: 30%;
    height: 60%;
    background: radial-gradient(circle, rgba(255,107,53,0.14) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.hero-slide-shop h1 {
    font-size: clamp(18px, 2vw, 28px) !important;   /* scaled for 288px height */
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    position: relative;
    z-index: 1;
    color: #fff !important;
    line-height: 1.3 !important;
}
.hero-slide-shop h1 em { color: var(--pm-orange); font-style: normal; }
.hero-slide-shop .hero-sub {
    font-size: clamp(11px, 1vw, 14px);
    opacity: 0.8;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    color: #fff;
}

/* Coded slide B — Sourcing Made Simple (teal) */
.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: fill;   /* stretches to exact 1340×240 — no crop, no gaps, distorted */
    display: block;
}

/* 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) {
    /* 288px × (previous-mobile 346px / previous-desktop 536px) = ~186px */
    .hero-single { height: 155px; }   /* 240 × (186/288) proportional */

    /* The coded slides' content stack (h1+sub+stats, or icon+title+sub+button)
       was overflowing the 155px box by ~55px top AND bottom (measured via
       getBoundingClientRect — .hero-slide-shop h1 started above the container's
       own top edge), clipped by .hero-single's overflow:hidden. The fixed
       24px/48px padding was sized for the original 240px-tall box and never
       scaled down for this breakpoint; 48px of side padding also forced the
       subtitle to wrap ~5 lines on a 184px-wide column. Image slides are
       untouched — this only targets the two coded slides. */
    .hero-slide-shop,
    .hero-slide-sourcing {
        /* asymmetric: shifts the centered content stack up, off the
           .hero-dots band (absolute, bottom:10px) — see dot-overlap note below */
        padding: 6px 16px 26px;
    }
    .hero-slide-shop h1 {
        margin-bottom: 1px !important;
        line-height: 1.15 !important;
    }
    .hero-slide-shop .hero-sub,
    .hero-slide-sourcing .hero-sub {
        margin-bottom: 0;
        font-size: 10px !important;
        line-height: 1.3 !important;
    }
    .hero-stats {
        margin-top: 0;
        gap: 12px;
    }
    .hero-stat strong { font-size: 16px; }
    .hero-stat span { font-size: 8px; }
    .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: calc((100% - 28px) / 3); }   /* sm: 3 per row */
}
@media (min-width: 768px) {
    .product-grid-item { width: calc((100% - 42px) / 4); }   /* md: 4 per row */
}
@media (min-width: 992px) {
    .product-grid-item { width: calc((100% - 56px) / 5); }   /* lg: 5 per row */
}

/* ── 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;
}

/* 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;
}

/* ── Menu bar: true-center policy links ── */
.nav-policy-wrap {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
.nav-policy-wrap > * {
    pointer-events: auto !important;
}
.nav-policy-wrap .navbar-nav {
    flex-direction: row !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). ── */
.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-navy);
    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;
}

/* ── 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;
}

/* 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;
}