/* Header Component Styles */
    /* ============================================
       1. CSS VARIABLES
       ============================================ */
    :root {
        --header-dark-bg: #1a1a2c;
        --header-light-bg: #ffffff;
        --header-border: #e5e7eb;
        --header-text-light: #ffffff;
        --header-text-dark: #333333;
        --header-text-muted: #6c757d;

        /* The two dark bars' type sizes, set once here. Each bar reads its own
           token, so neither is at the mercy of the catch-all 13px below. */
        --header-topbar-font-size: 14px;
        --header-topbar-icon-size: 14px;
        --header-nav-font-size: 15px;
        /* What the nav's sub menus are set in: a step under the bar they hang from. */
        --header-submenu-font-size: 14px;
    }

    /* ============================================
       2. BASE HEADER
       ============================================ */
    .header {
        overflow: visible !important;
        isolation: isolate;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        font-weight: 600;
    }

    /* Global header font baseline — excludes search dropdown (own sizing) and icons (own size via .bi font-size).

       Also excludes the top bar and the main nav links. The :not(#id) arguments
       give this rule ID-level specificity, so with !important it outranked every
       size the top bar and nav set for themselves: both rendered at 13px whatever
       their own rules said. They size themselves from the tokens in :root now.

       And excludes what is inside a nav sub menu (.nav-mega), for the same
       reason: its labels were written at 13px and its "View all" at 12.5px and
       600, and both were drawn at this rule's 13px and 500 -- an !important of
       their own does not outweigh an id. */
    .header *:not(#search-results-dropdown):not(#search-results-dropdown *):not(i):not(.bi):not(.header-top):not(.header-top *):not(.main-menu > li > .nav-link-item):not(.nav-mega *) {
        font-weight: 500 !important;
        font-size: 13px !important;
    }

    /* Topbar text */
    .header-top,
    .header-top a,
    .header-top span,
    .header-top .dropdown-toggle,
    .header-top .topbar-link {
        font-size: var(--header-topbar-font-size) !important;
        font-weight: 500 !important;
    }

    /* Main nav — slightly larger, bold */
    .header-main .main-menu > li > a,
    .header-main .main-menu > li > .nav-link-item {
        font-size: var(--header-nav-font-size) !important;
        font-weight: 600 !important;
    }

    /* Search input — readable typing size */
    .header .search-bar-input {
        font-size: 13px !important;
        font-weight: 400 !important;
    }

    /* Location label stays tiny, value stays slightly larger */
    .header .location-label {
        font-size: 10px !important;
        font-weight: 500 !important;
    }
    .header .location-coords {
        font-size: 12px !important;
        font-weight: 600 !important;
    }

    /* ============================================
       3. TOP BAR (Row 1 - Dark BG)
       ============================================ */
    .header-top {
        background-color: #000000 !important;
        font-family: 'Jost', sans-serif;
        font-size: var(--header-topbar-font-size) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        overflow: visible !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }

    .header-top,
    .header-top *,
    .header-top ul,
    .header-top li,
    .header-top a,
    .header-top span,
    .header-top button,
    .header-top .nav,
    .header-top .nav li,
    .header-top .nav a {
        font-family: 'Jost', sans-serif !important;
        font-size: var(--header-topbar-font-size) !important;
    }

    .header-top i,
    .header-top .nav i,
    .header-top a i,
    .header-top button i {
        font-size: var(--header-topbar-icon-size) !important;
    }

    .header-top .gap-3 { gap: 0.65rem !important; }
    .header-top .gap-2 { gap: 0.4rem !important; }

    .topbar-link {
        color: rgba(255, 255, 255, 0.85) !important;
        font-weight: 500 !important;
        font-size: var(--header-topbar-font-size);
        text-decoration: none;
        transition: color 0.2s ease;
        letter-spacing: 0.2px;
    }

    .topbar-link:hover {
        color: #ffffff !important;
    }

    .topbar-link i {
        font-size: var(--header-topbar-icon-size);
        color: var(--primary-dark) !important;
    }

    .topbar-divider {
        width: 1px;
        height: 9px;
        background: rgba(255, 255, 255, 0.2);
    }

    /* Top Bar Dropdowns */
    .topbar-dropdown {
        position: relative !important;
    }

    .topbar-dropdown-btn {
        background: transparent !important;
        border: none !important;
        color: rgba(255, 255, 255, 0.85) !important;
        font-family: 'Jost', sans-serif !important;
        font-weight: 500 !important;
        font-size: var(--header-topbar-font-size);
        padding: 0 !important;
        display: flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        transition: color 0.2s ease;
    }

    .topbar-dropdown-btn:hover {
        color: #ffffff !important;
    }

    .topbar-dropdown-btn img {
        border-radius: 2px;
    }

    .topbar-dropdown-menu {
        min-width: 130px !important;
        background: #ffffff !important;
        border: 1px solid var(--header-border) !important;
        border-radius: 6px !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
        padding: 4px !important;
        z-index: 100010 !important;
        animation: dropdownSlide 0.2s ease;
        font-family: 'Jost', sans-serif;
    }

    .topbar-dropdown-menu li {
        list-style: none !important;
    }

    .topbar-dropdown-menu li a {
        display: flex !important;
        align-items: center !important;
        gap: 6px;
        padding: 6px 10px !important;
        color: var(--header-text-dark) !important;
        text-decoration: none !important;
        border-radius: 4px !important;
        font-family: 'Jost', sans-serif !important;
        font-size: 12.5px;
        transition: all 0.2s ease !important;
        cursor: pointer !important;
    }

    .topbar-dropdown-menu li a:hover {
        background-color: var(--primary-light, #f0f7ff) !important;
        color: var(--primary-dark) !important;
    }

    .topbar-dropdown-menu .currency-change {
        list-style: none !important;
    }

    .topbar-dropdown-menu .currency-change a {
        display: block !important;
        padding: 8px 12px !important;
        color: var(--header-text-dark) !important;
        text-decoration: none !important;
        border-radius: 6px !important;
        cursor: pointer !important;
    }

    .topbar-dropdown-menu .currency-change a:hover {
        background-color: var(--primary-light, #f0f7ff) !important;
        color: var(--primary-dark) !important;
    }

    .topbar-dropdown-menu #currency-route {
        display: none !important;
    }

    @keyframes dropdownSlide {
        from {
            opacity: 0;
            transform: translateY(-6px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ============================================
       4. MIDDLE ROW (Row 2 - White BG)
       ============================================ */
    .header-middle {
        background-color: var(--header-light-bg) !important;
        border-bottom: 1px solid var(--header-border);
        overflow: visible !important;
    }

    .header-middle .container {
        overflow: visible !important;
    }

    /* Push search bar further right — starts roughly at "Vendor Stores" column below */
    @media (min-width: 992px) {
        .header-middle .search-box-container {
            margin-left: 180px;
        }
    }

    @media (min-width: 1200px) {
        .header-middle .search-box-container {
            margin-left: 240px;
        }
    }

    @media (min-width: 1400px) {
        .header-middle .search-box-container {
            margin-left: 280px;
        }
    }

    /* Logo */
    .header-logo {
        flex-shrink: 0;
    }

    .header-logo img {
        max-height: 52px;
        max-width: 200px;
        width: auto;
        object-fit: contain;
    }

    @media (max-width: 767.98px) {
        .header-logo img {
            max-height: 44px;
            max-width: 150px;
        }
    }

    /* ============================================
       5. USER ACTION ICONS (Middle Row)
       ============================================ */
    .user-actions-group {
        flex-shrink: 0;
    }

    .user-action-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        text-decoration: none !important;
        color: var(--header-text-dark) !important;
        cursor: pointer;
        transition: color 0.25s ease;
        position: relative;
    }

    .user-action-icon:hover {
        color: var(--primary-dark) !important;
    }

    .user-action-icon .icon-wrap {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1.5px solid var(--header-border);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        transition: all 0.25s ease;
        background: transparent;
    }

    .user-action-icon:hover .icon-wrap {
        border-color: var(--primary-dark);
        background: rgba(var(--bs-primary-rgb), 0.06);
    }

    .user-action-icon .icon-wrap i {
        font-size: 1.05rem;
        color: var(--header-text-dark) !important;
        transition: all 0.3s ease;
    }

    .user-action-icon:hover .icon-wrap i {
        color: var(--primary-dark) !important;
    }

    .user-action-icon .icon-wrap .count {
        position: absolute;
        top: -5px;
        right: -5px;
        background: #dc3545;
        color: #fff !important;
        font-size: 0.65rem;
        font-weight: 700 !important;
        min-width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50px;
        border: 2px solid #ffffff;
        box-shadow: 0 2px 6px rgba(220, 53, 69, 0.4);
    }

    .user-action-icon .icon-label {
        display: none !important;
        color: var(--header-text-muted) !important;
        transition: color 0.25s ease;
        line-height: 1;
    }

    .user-action-icon:hover .icon-label {
        color: var(--primary-dark) !important;
    }

    /* Avatar in user action */
    .user-action-icon .icon-wrap.avatar-wrap {
        border-color: var(--bs-primary);
        overflow: hidden;
        padding: 1.5px;
    }

    .user-action-icon .icon-wrap.avatar-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

    /* Profile dropdown in middle row */
    .header-middle .profile-dropdown {
        position: relative;
    }

    .header-middle .header-dropdown {
        min-width: 160px;
        background: #ffffff !important;
        border: 1px solid var(--header-border) !important;
        border-radius: 8px !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1) !important;
        padding: 4px !important;
        z-index: 100010 !important;
        animation: dropdownSlide 0.2s ease;
        font-family: 'Jost', sans-serif;
    }

    .header-middle .header-dropdown li {
        padding: 0 !important;
        margin: 0 !important;
    }

    .header-middle .header-dropdown li a {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 7px 10px !important;
        color: var(--header-text-dark) !important;
        text-decoration: none !important;
        border-radius: 5px !important;
        transition: all 0.2s ease !important;
        font-family: 'Jost', sans-serif !important;
        font-size: 12.5px !important;
        font-weight: 500 !important;
    }

    .header-middle .header-dropdown li a i {
        color: var(--primary-dark) !important;
        font-size: 13px !important;
        margin-right: 0 !important;
    }

    .header-middle .header-dropdown li a:hover {
        background: var(--primary-light, #f0f7ff) !important;
        color: var(--primary-dark) !important;
        transform: none !important;
    }

    /* Cart icon overrides for middle row (white bg) */
    .header-middle .cart-trigger {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        color: var(--header-text-dark) !important;
    }

    .header-middle .cart-icon-wrapper {
        width: 34px;
        height: 34px;
        background: transparent !important;
        border: 1.5px solid var(--header-border);
        transition: all 0.25s ease;
    }

    .header-middle .cart-icon {
        color: var(--header-text-dark) !important;
        font-size: 1.05rem;
    }

    .header-middle .cart-trigger:hover .cart-icon-wrapper {
        border-color: var(--primary-dark);
        background: rgba(var(--bs-primary-rgb), 0.06) !important;
        transform: none;
        box-shadow: none;
    }

    .header-middle .cart-trigger:hover .cart-icon {
        color: var(--primary-dark) !important;
    }

    .header-middle .cart-icon-wrapper .count {
        border-color: #ffffff;
    }

    .header-middle .cart-label {
        display: none !important;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: var(--header-text-muted) !important;
    }

    .header-middle .cart-trigger:hover .cart-label {
        color: var(--primary-dark) !important;
    }

    /* Cart dropdown menu text colors */
    .header-middle .cart-dropdown-menu {
        background-color: #ffffff !important;
    }

    .header-middle .cart-dropdown-menu .flex-grow-1 h6,
    .header-middle .cart-dropdown-menu .flex-grow-1 h6 a,
    .header-middle .cart-dropdown-menu .flex-grow-1 .fs-12,
    .header-middle .cart-dropdown-menu .flex-grow-1 span,
    .header-middle .cart-dropdown-menu .flex-grow-1 div,
    .header-middle .cart-dropdown-menu .flex-grow-1 ins,
    .header-middle .cart-dropdown-menu .flex-grow-1 del {
        color: var(--header-text-dark) !important;
    }

    .header-middle .cart-dropdown-menu h6,
    .header-middle .cart-dropdown-menu h3 {
        color: var(--header-text-dark) !important;
    }

    .header-middle .cart-dropdown-menu .text-primary {
        color: var(--bs-primary) !important;
    }

    .header-middle .cart-dropdown-menu .btn-primary {
        color: #ffffff !important;
    }

    .header-middle .cart-dropdown-menu .quantity input,
    .header-middle .cart-dropdown-menu .quantity__qty {
        color: var(--header-text-dark) !important;
        background-color: #ffffff !important;
        border: 1px solid #dee2e6 !important;
    }

    .header-middle .cart-dropdown-menu .quantity span,
    .header-middle .cart-dropdown-menu .quantity__minus,
    .header-middle .cart-dropdown-menu .quantity__plus {
        color: var(--header-text-dark) !important;
        background-color: #f8f9fa !important;
        border: 1px solid #dee2e6 !important;
    }

    .header-middle .cart-dropdown-menu .quantity span i,
    .header-middle .cart-dropdown-menu .quantity__minus i,
    .header-middle .cart-dropdown-menu .quantity__plus i {
        color: var(--header-text-dark) !important;
    }

    /* Offer/Banner in middle row */
    .offer-btn img {
        border-radius: 8px;
    }

    /* ============================================
       6. SEARCH BAR (MEXON Pill Style)
       ============================================ */
    .search-box-container {
        flex: 1;
        max-width: 380px;
        margin: 0 auto;
        position: relative;
    }

    /* Remove default margin-bottom on form/wrapper to prevent focus line overlap */
    .search-box-container form,
    .search-box-wrapper,
    .search-box-wrapper form,
    .search-input-group {
        margin: 0 !important;
        margin-bottom: 0 !important;
    }

    .search-bar-input {
        margin: 0 !important;
        margin-bottom: 0 !important;
    }

    .search-bar-input {
        width: 100%;
        height: 40px;
        padding: 0.4rem 2.8rem 0.4rem 1.15rem;
        border: 1px solid #d1d5db;
        border-radius: 50px;
        font-size: 0.85rem;
        color: var(--header-text-dark) !important;
        background: #ffffff;
        transition: all 0.25s ease;
    }

    .search-bar-input:focus {
        outline: none;
        border-color: var(--header-text-dark);
        background: #ffffff;
        box-shadow: none;
    }

    .search-bar-input::placeholder {
        color: #9ca3af;
        font-weight: 400 !important;
    }

    .search-submit-btn {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        height: auto;
        background: transparent;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
        transition: all 0.25s ease;
    }

    .search-submit-btn i {
        color: #6b7280;
        font-size: 0.95rem;
        transition: color 0.2s ease;
    }

    .search-submit-btn:hover {
        background: transparent;
        transform: translateY(-50%);
        box-shadow: none;
    }

    .search-submit-btn:hover i {
        color: var(--primary-dark);
    }

    /* Search results dropdown */
    .search-dropdown-results {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 9999;
        pointer-events: none;
        margin-top: 4px;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .search-dropdown-results .search-card {
        max-width: 100%;
        margin: 0;
        pointer-events: auto;
        overflow: hidden;
        display: none !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    /* When search card has content, show with proper styling */
    .search-dropdown-results .search-card:not(:empty) {
        display: block !important;
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 12px !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
    }

    body[theme="dark"] .search-dropdown-results .search-card:not(:empty) {
        background: #2d3144 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    .search-dropdown-results.show {
        display: block;
    }

    /* Search result text colors */
    .header .search-result-box *,
    .header .search-card *,
    .header .card.search-card * {
        color: var(--header-text-dark) !important;
    }

    .header .search-result-box,
    .header .search-card,
    .header .card.search-card {
        background-color: #ffffff !important;
    }

    /* Mobile aside search - keep filled button style */
    .aside .search-submit-btn {
        right: 4px;
        width: 38px;
        height: 36px;
        background: var(--primary-dark);
        border-radius: 50px;
    }

    .aside .search-submit-btn i {
        color: #fff;
        font-size: 1rem;
    }

    .aside .search-bar-input {
        border-radius: 50px;
    }

    /* ============================================
       7. LOCATION DROPDOWN (Right Side) — COMPACT
       ============================================ */
    /* ---- Deliver-to control -------------------------------------------------
       A label over a value, which is the shape these rules already described:
       .location-label was styled here and never rendered, so the control showed
       a bare value with nothing saying what it meant.
       ------------------------------------------------------------------------ */
    .location-dropdown-wrapper {
        flex-shrink: 0;
        position: relative;
        z-index: 100003;
        margin-left: 12px;
        margin-right: 12px;
        width: 100%;
        max-width: 268px;
        font-family: 'Jost', sans-serif;
    }

    .location-dropdown-wrapper .dropdown {
        position: relative;
        z-index: 100003;
    }

    .location-dropdown-wrapper .location-dropdown-btn {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 7px 12px !important;
        height: auto !important;
        min-height: 46px !important;
        border: 1px solid #dfe3e8 !important;
        background: #ffffff !important;
        color: var(--header-text-dark) !important;
        width: 100% !important;
        min-width: 0 !important;
        border-radius: 10px !important;
        font-family: 'Jost', sans-serif !important;
        text-align: start !important;
        transition: border-color .2s ease, box-shadow .2s ease !important;
    }

    .location-dropdown-wrapper .location-dropdown-btn:hover {
        border-color: #c4cad2 !important;
    }

    .location-dropdown-wrapper .location-dropdown-btn:focus-visible,
    .location-dropdown-wrapper .location-dropdown-btn.show {
        border-color: var(--primary-dark) !important;
        box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.12) !important;
        outline: none !important;
    }

    /* The caret is the only thing on the row that is not content, so it sits
       quiet and last rather than crowding the value. */
    .location-dropdown-wrapper .location-dropdown-btn::after {
        margin-left: auto !important;
        flex-shrink: 0 !important;
        border-width: 5px 4px 0 !important;
        color: #9aa1ac !important;
    }

    .location-dropdown-wrapper .location-dropdown-btn i.bi-geo-alt {
        color: var(--primary-dark) !important;
        font-size: 17px !important;
        line-height: 1 !important;
        flex-shrink: 0 !important;
    }

    .location-dropdown-wrapper .location-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .location-dropdown-wrapper .location-label {
        font-size: 9px !important;
        color: #8a919c !important;
        font-weight: 600 !important;
        line-height: 1.1 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
    }

    /* Ellipsis, not overflow: a long place name used to run past the button. */
    .location-dropdown-wrapper .location-coords {
        font-size: 12.5px !important;
        color: var(--header-text-dark) !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }

    .location-dropdown-wrapper .location-stores {
        font-size: 9.5px !important;
        color: #8a919c !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }

    .location-dropdown-wrapper .location-stores[hidden] {
        display: none !important;
    }

    /* ---- menu ---- */
    .location-dropdown-menu,
    .location-dropdown-wrapper .dropdown-menu.location-dropdown-menu {
        z-index: 100004 !important;
        min-width: 268px !important;
        border: 1px solid #e6e8ec !important;
        border-radius: 12px !important;
        box-shadow: 0 12px 32px rgba(16, 20, 27, 0.12) !important;
        animation: dropdownSlide 0.18s ease !important;
        font-family: 'Jost', sans-serif !important;
        padding: 6px !important;
        margin-top: 6px !important;
    }

    /* A line is its button. No rule under it either: style.css draws one under
       every `.dropdown-menu li`, the divider's own line included, so the one
       divider of this menu stood between two more lines. */
    .location-dropdown-wrapper .location-dropdown-menu li {
        padding: 0 !important;
        border: 0 !important;
        list-style: none !important;
    }

    .location-dropdown-wrapper .location-dropdown-menu .dropdown-item {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 10px !important;
        border: 0 !important;
        background: transparent !important;
        border-radius: 8px !important;
        text-align: start !important;
        white-space: normal !important;
        color: var(--header-text-dark) !important;
        font-family: 'Jost', sans-serif !important;
        transition: background-color .18s ease !important;
    }

    .location-dropdown-wrapper .location-dropdown-menu .dropdown-item:hover,
    .location-dropdown-wrapper .location-dropdown-menu .dropdown-item:focus-visible {
        background-color: rgba(var(--bs-primary-rgb), 0.07) !important;
        outline: none !important;
    }

    /* The icon is a fixed square, so both rows' text starts on the same line --
       they used to hang off icons of different widths. */
    .location-dropdown-wrapper .location-dropdown-menu .dropdown-item i {
        inline-size: 28px !important;
        block-size: 28px !important;
        display: grid !important;
        place-items: center !important;
        flex-shrink: 0 !important;
        border-radius: 8px !important;
        background: rgba(var(--bs-primary-rgb), 0.08) !important;
        color: var(--primary-dark) !important;
        font-size: 13px !important;
    }

    .location-dropdown-wrapper .location-dropdown-menu .location-item--clear i {
        background: rgba(0, 0, 0, 0.05) !important;
        color: #6b7280 !important;
    }

    .location-dropdown-wrapper .location-dropdown-menu .location-action {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        min-width: 0 !important;
    }

    .location-dropdown-wrapper .location-dropdown-menu .location-action__title {
        font-size: 12.5px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
    }

    .location-dropdown-wrapper .location-dropdown-menu .location-action small {
        font-size: 10.5px !important;
        color: #8a919c !important;
        line-height: 1.3 !important;
        display: block !important;
    }

    .location-dropdown-wrapper .location-dropdown-menu .dropdown-divider {
        margin: 4px 6px !important;
        border-color: #eceef1 !important;
    }

    @media (prefers-reduced-motion: reduce) {

        .location-dropdown-wrapper .location-dropdown-btn,
        .location-dropdown-wrapper .location-dropdown-menu .dropdown-item {
            transition: none !important;
        }

        .location-dropdown-menu,
        .location-dropdown-wrapper .dropdown-menu.location-dropdown-menu {
            animation: none !important;
        }
    }

    /* ============================================
       8. NAVIGATION BAR (Row 3 - Dark BG)
       ============================================ */
    .header-main {
        /* background-color: var(--header-dark-bg) !important; */
        background-color: #000000 !important;
        position: relative;
        z-index: 1;
        min-height: auto;
    }

    /* Desktop nav links */
    .header-main .main-menu {
        gap: 0;
    }

    .header-main .main-menu>li {
        position: relative;
    }

    .nav-link-item {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 10px 14px !important;
        color: rgba(255, 255, 255, 0.85) !important;
        font-family: 'Jost', sans-serif !important;
        font-weight: 500 !important;
        font-size: var(--header-nav-font-size) !important;
        text-decoration: none !important;
        text-transform: capitalize;
        transition: color 0.2s ease;
        white-space: nowrap;
        letter-spacing: 0.2px;
    }

    .nav-link-item .nav-chevron {
        font-size: 10px !important;
    }

    /* Mobile/aside menu reduced font */
    .header .aside .main-nav li a,
    .header .aside-body .main-nav li a {
        font-size: 13px !important;
        font-weight: 500 !important;
        padding: 8px 14px !important;
        font-family: 'Jost', sans-serif !important;
    }

    .header .aside .sub_menu li a {
        font-size: 12.5px !important;
        padding: 6px 14px !important;
    }

    .nav-link-item:hover,
    .header-main .main-menu>li.active>.nav-link-item,
    .header-main .main-menu>li:hover>.nav-link-item,
    .header-main .main-menu>li.active>a {
        color: #ffffff !important;
    }

    /* Active indicator line */
    .header-main .main-menu>li::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 18px;
        right: 18px;
        height: 3px;
        background: var(--bs-primary);
        border-radius: 3px 3px 0 0;
        transform: scaleX(0);
        transition: transform 0.25s ease;
    }

    .header-main .main-menu>li:hover::after,
    .header-main .main-menu>li.active::after {
        transform: scaleX(1);
    }

    /* Nav chevron for dropdowns */
    .nav-chevron {
        font-size: 13px !important;
        margin-left: 2px;
        transition: transform 0.25s ease;
        opacity: 0.7;
    }

    .header-main .main-menu>li:hover .nav-chevron {
        transform: rotate(180deg);
        opacity: 1;
    }

    /* ============================================
       9. DROPDOWN MENUS & MEGAMENUS
       ============================================ */
    .header .dropdown-menu {
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        border: 1px solid rgba(0, 0, 0, 0.08);
        padding: 6px;
        animation: dropdownSlide 0.2s ease;
        z-index: 100010 !important;
        background-color: #ffffff;
    }

    .header .dropdown-item {
        border-radius: 6px;
        transition: all 0.2s ease;
        padding: 10px 14px;
        color: var(--header-text-dark) !important;
    }

    .header .dropdown-item:hover {
        background-color: var(--primary-light, #f0f7ff) !important;
        color: var(--primary-dark) !important;
        transform: translateX(3px);
    }

    /* ---- Currency + language pickers ----
       Both lists used to hold bare <a> elements, so none of the .dropdown-item
       styling above reached them: no padding, no hover, and a currency name
       long enough to wrap onto two lines inside the panel. Neither showed which
       option was the current one. */
    /* A line of these menus is its link, nothing more. style.css gives every
       `.dropdown-menu li` a padding of its own and a rule under it; around a
       link that is itself a padded, highlighted row that made a line 57px
       tall -- five currencies, 293px -- with the highlight floating inside a
       ruled box. Three classes, so that this outranks the base rule and its
       `li:not(:last-child)` whichever file is loaded last. */
    .header .dropdown-menu.topbar-dropdown-menu > li {
        padding: 0;
        border: 0;
    }

    .header .dropdown-menu.topbar-dropdown-menu > li + li {
        margin-top: 2px;
    }

    .header .topbar-dropdown-item {
        display: flex !important;
        align-items: center;
        gap: 0.5rem;
        white-space: nowrap;
    }

    .header .topbar-dropdown-item:hover { transform: none; }

    .header .topbar-dropdown-flag {
        flex: 0 0 18px;
        border-radius: 2px;
    }

    .header .topbar-dropdown-code {
        flex: 0 0 auto;
        font-weight: 600 !important;
        opacity: 0.55;
    }

    .header .topbar-dropdown-name {
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Reserves its own width whether or not it is showing, so the labels do
       not shift when the selection moves. */
    .header .topbar-dropdown-tick {
        flex: 0 0 0.875rem;
        font-size: 0.875rem !important;
        color: var(--primary-dark) !important;
        visibility: hidden;
    }

    .header .topbar-dropdown-item.is-active { background-color: rgba(var(--bs-primary-rgb), 0.08) !important; }
    .header .topbar-dropdown-item.is-active .topbar-dropdown-name { font-weight: 600 !important; }
    .header .topbar-dropdown-item.is-active .topbar-dropdown-tick { visibility: visible; }

    /* A site with many languages enabled otherwise runs the panel off-screen.
       Room for nine lines, and never more than the window has under the bar. */
    .header .topbar-dropdown-menu--scroll {
        max-height: min(22rem, calc(100vh - 4rem));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    [theme="dark"] .header .topbar-dropdown-item.is-active { background-color: rgba(255, 255, 255, 0.1) !important; }
    [theme="dark"] .header .topbar-dropdown-tick { color: #fff !important; }

    /* Sub-menus from nav — compact */
    .header .main-menu .sub-menu,
    .header .main-menu .sub_menu {
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.06);
        z-index: 100010 !important;
        padding: 4px !important;
        min-width: 180px !important;
    }

    .header .main-menu .sub-menu li,
    .header .main-menu .sub_menu li {
        padding: 0 !important;
        margin: 6px 0 !important;
        display: block !important;
    }

    .header .main-menu .sub-menu li + li,
    .header .main-menu .sub_menu li + li {
        margin-top: 8px !important;
    }

    .header .main-menu .sub-menu li a,
    .header .main-menu .sub_menu li a {
        color: var(--header-text-dark) !important;
        font-family: 'Jost', sans-serif !important;
        font-weight: 500 !important;
        font-size: 12px !important;
        padding: 8px 14px !important;
        border-radius: 5px !important;
        transition: all 0.2s ease;
        white-space: nowrap !important;
        line-height: 1.4 !important;
        display: block !important;
    }

    .header .main-menu .sub-menu li a i,
    .header .main-menu .sub_menu li a i {
        font-size: 12px !important;
        margin-right: 6px !important;
    }

    .header .main-menu .sub-menu li a span,
    .header .main-menu .sub_menu li a span {
        white-space: nowrap !important;
        font-size: 12px !important;
    }

    .header .main-menu .sub-menu li a:hover,
    .header .main-menu .sub_menu li a:hover {
        color: var(--primary-dark) !important;
        background: var(--primary-light, #f0f7ff);
    }

    /* ============================================
       9b. NAV MEGA PANELS  (.nav-mega)
       --------------------------------------------
       One design for all five header menus: categories, offers, vendor
       stores, brands and publication house. They used to differ in every
       respect — a 2-up CSS grid whose "View all" fell into whatever cell
       was free, a border-bottom under every row that read as a table, and
       three different icon spacings in the offers list.

       partials-extracted.css opens with `.header *:not(...) { font-size:
       13px !important }`. What is inside a panel is left out of that rule
       by name: answering it in kind was tried here and lost, because its
       :not(#id) arguments weigh as ids. The text of a panel is set in
       --header-submenu-font-size.
       ============================================ */
    .header .nav-mega {
        background: #ffffff;
        border-radius: 12px;
        border: 1px solid rgba(16, 24, 40, 0.08);
        box-shadow: 0 16px 40px rgba(16, 24, 40, 0.14), 0 2px 6px rgba(16, 24, 40, 0.05);
        z-index: 100010 !important;
        padding: 0.5rem !important;
        min-width: 250px !important;
    }

    /* The panel hangs from the bar. style.css places every sub menu ten pixels
       under its entry, which left a strip of the page between the bar and the
       panel -- a strip the pointer had to cross, over neither of them, to reach
       the panel. The corners that meet the bar are square, so that no notch of
       the page shows beside them. */
    .header .main-menu .nav-mega {
        inset-block-start: 100%;
        border-start-start-radius: 0;
        border-start-end-radius: 0;
    }

    .header .nav-mega-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(9.5rem, 1fr));
        gap: 2px 4px;
    }

    /* Enough items to justify a second column, or it opens half empty. */
    .header .nav-mega-grid--single {
        grid-template-columns: minmax(11rem, 1fr);
    }

    .header .nav-mega-item {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        min-width: 0;
        padding: 0.5rem 0.625rem !important;
        border-radius: 8px;
        color: var(--header-text-dark) !important;
        text-decoration: none !important;
        transition: background-color 0.16s ease, color 0.16s ease;
    }

    .header .nav-mega-item:hover,
    .header .nav-mega-item:focus-visible {
        background: rgba(var(--bs-primary-rgb), 0.07);
        color: var(--primary-dark) !important;
    }

    .header .nav-mega-item:focus-visible {
        outline: 2px solid var(--primary-dark);
        outline-offset: -2px;
    }

    /* Fixed slot, so glyphs of different widths still line their labels up. */
    .header .nav-mega-icon {
        flex: 0 0 1.125rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-dark) !important;
    }

    .header .nav-mega-icon i {
        font-size: 0.875rem !important;
        line-height: 1;
    }

    .header .nav-mega-thumb {
        flex: 0 0 1.75rem;
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 6px;
        overflow: hidden;
        background: #f2f4f7;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .header .nav-mega-thumb--round { border-radius: 50%; }

    .header .nav-mega-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .header .nav-mega-label {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: var(--header-submenu-font-size) !important;
        font-weight: 500 !important;
        color: inherit !important;
    }

    /* The footer is a strip across the whole panel, not another grid cell —
       which is where "View all" used to land, beside a category. */
    .header .nav-mega-foot {
        margin-top: 0.375rem;
        padding-top: 0.375rem;
        border-top: 1px solid rgba(16, 24, 40, 0.08);
    }

    .header .nav-mega-all {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.4375rem 0.625rem !important;
        border-radius: 8px;
        font-size: var(--header-submenu-font-size) !important;
        font-weight: 500 !important;
        color: var(--primary-dark) !important;
        text-decoration: none !important;
        transition: background-color 0.16s ease;
    }

    .header .nav-mega-all:hover { background: rgba(var(--bs-primary-rgb), 0.08); }
    .header .nav-mega-all i { font-size: 0.75rem !important; transition: transform 0.16s ease; }
    .header .nav-mega-all:hover i { transform: translateX(3px); }

    [dir="rtl"] .header .nav-mega-all:hover i { transform: translateX(-3px); }

    /* Only the final item: its panel is the one that would run off the right
       edge on a narrow desktop. Applying this any wider pulled panels away
       from the item they belong to. */
    .header .main-menu > li:last-child > .nav-mega {
        inset-inline-start: auto;
        inset-inline-end: 0;
    }

    [theme="dark"] .header .nav-mega {
        background: var(--bs-body-bg, #1a1a2e);
        border-color: rgba(255, 255, 255, 0.1);
    }

    [theme="dark"] .header .nav-mega-item { color: rgba(255, 255, 255, 0.85) !important; }
    [theme="dark"] .header .nav-mega-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff !important; }
    [theme="dark"] .header .nav-mega-all { color: #fff !important; }
    [theme="dark"] .header .nav-mega-foot { border-top-color: rgba(255, 255, 255, 0.1); }
    [theme="dark"] .header .nav-mega-thumb { background: rgba(255, 255, 255, 0.08); }

    /* ============================================
       10. MOBILE ASIDE MENU
       ============================================ */
    .header .aside {
        background-color: var(--header-dark-bg) !important;
    }

    .header .aside-body .main-nav li a {
        color: #ffffff !important;
        font-weight: 500 !important;
        font-size: 13px !important;
        font-family: 'Jost', sans-serif !important;
        padding: 8px 14px !important;
    }

    .header .aside .main-nav .sub_menu li a {
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 12.5px !important;
        padding: 6px 14px !important;
        font-family: 'Jost', sans-serif !important;
    }

    .header .aside .main-nav li a i,
    .header .aside-body .main-nav li a i {
        font-size: 13px !important;
    }

    /* Language and currency in the menu a phone opens. The top bar that holds
       them is hidden under 768px, so they stand here at those widths: one row
       each, the choices as buttons that wrap, the one in use filled in. The
       menu is dark in both colour schemes, so the colours are its own. */
    .header .aside .aside-switches {
        margin-top: 0.75rem;
        padding-top: 0.25rem;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .header .aside .aside-switch {
        padding: 0.75rem 0.875rem 0;
    }

    .header .aside .aside-switch__label {
        display: block;
        margin-bottom: 0.5rem;
        color: rgba(255, 255, 255, 0.6) !important;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .header .aside .aside-switch__options {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .header .aside .aside-switch__option {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        /* 36px tall: room for a finger */
        min-height: 2.25rem;
        padding: 0.25rem 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 999px;
        background: transparent;
        color: rgba(255, 255, 255, 0.9) !important;
        line-height: 1.2;
        cursor: pointer;
    }

    .header .aside .aside-switch__option:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
    }

    .header .aside .aside-switch__option.is-active {
        border-color: #ffffff;
        background: #ffffff;
        color: #1a1a2c !important;
    }

    .header .aside .aside-switch__symbol {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    .header .aside .aside-switch__option.is-active .aside-switch__symbol {
        color: inherit !important;
    }

    .aside-close {
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .aside-close:hover {
        transform: scale(1.2) rotate(90deg);
    }

    /* Mobile menu buttons */
    .header .menu-btn {
        cursor: pointer;
        transition: all 0.2s ease;
        color: #ffffff !important;
    }

    .header .menu-btn i {
        color: #ffffff !important;
    }

    .header .menu-btn:hover {
        opacity: 0.8;
    }

    /* Mobile header icons */
    .header-main .list-unstyled li {
        position: relative;
    }

    /* Profile avatar in mobile nav bar */
    .header-main .header-avatar {
        border: 2px solid var(--bs-primary) !important;
        --size: 2.2rem !important;
    }

    /* Mobile profile dropdown */
    .header-main .header-dropdown {
        min-width: 180px;
        background: #ffffff !important;
        border-radius: 10px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
        padding: 6px !important;
        z-index: 100010 !important;
    }

    .header-main .header-dropdown li a {
        display: flex !important;
        align-items: center !important;
        padding: 10px 14px !important;
        color: var(--header-text-dark) !important;
        border-radius: 8px !important;
        transition: all 0.2s ease !important;
    }

    .header-main .header-dropdown li a i {
        color: var(--primary-dark) !important;
    }

    .header-main .header-dropdown li a:hover {
        background: var(--primary-light, #f0f7ff) !important;
        color: var(--primary-dark) !important;
    }

    /* ============================================
       11. CIRCULAR ACTION BUTTONS (Announcement etc.)
       ============================================ */
    .circular-action-btn {
        width: 32px;
        height: 32px;
        border-radius: 50% !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .circular-action-btn.btn-sm {
        width: 28px;
        height: 28px;
    }

    .circular-action-btn.btn-light {
        background-color: #f8f9fa;
        color: #212529;
    }

    .circular-action-btn.btn-dark {
        background-color: #212529;
        color: #ffffff;
    }

    .offer-bar-close {
        cursor: pointer;
        transition: all 0.3s ease;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .offer-bar-close:hover {
        background-color: rgba(255, 255, 255, 0.2);
        transform: scale(1.1) rotate(90deg);
    }

    /* ============================================
       12. STICKY HEADER
       ============================================ */
    .header .sticky,
    .header-main.sticky,
    .love-sticky.sticky {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        background-color: var(--header-dark-bg) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
    }

    /* ============================================
       13. Z-INDEX HIERARCHY
       ============================================ */
    .header {
        position: relative;
        z-index: 100 !important;
    }

    .header-top {
        position: relative;
        z-index: 100003;
    }

    .header-middle {
        position: relative;
        z-index: 100002;
    }

    .header-main {
        position: relative !important;
        z-index: 1 !important;
    }

    .header-main:not(.sticky) {
        z-index: 1 !important;
    }

    .header .dropdown-menu.show {
        z-index: 100010 !important;
    }

    .header-top .dropdown.show,
    .header-middle .dropdown.show,
    .location-dropdown-wrapper .dropdown.show {
        z-index: 100010 !important;
    }

    /* ============================================
       14. RESPONSIVE - TABLET
       ============================================ */
    @media (max-width: 1199px) {
        .header-main {
            padding: 8px 0 !important;
        }

        /* Tablet: the top bar shares one line with less room. */
        :root {
            --header-topbar-font-size: 13px;
            --header-topbar-icon-size: 13px;
        }
    }

    @media (max-width: 768px) {
        .header-top .nav {
            gap: 8px !important;
        }

        .location-dropdown-wrapper {
            margin: 0;
        }

        .location-dropdown-btn {
            min-width: 140px;
            padding: 6px 10px;
        }

        .search-bar-input {
            height: 42px;
            font-size: 1.025rem;
        }
    }

    @media (max-width: 576px) {
        .header-top {
            font-size: 14px;
        }
    }

    /* Auto-hide top bar on mobile (< 768px) */
    @media (max-width: 767.98px) {
        .header-top {
            display: none !important;
        }
    }

    /* ============================================
       15. DARK MODE
       ============================================ */

    /* Middle Row Dark Mode */
    body[theme="dark"] .header-middle {
        background-color: #1e2030 !important;
        border-bottom: none !important;
    }

    /* Also remove any bottom borders on search-related containers in dark mode */
    body[theme="dark"] .search-box-container,
    body[theme="dark"] .header-middle .container,
    body[theme="dark"] .header-middle > div {
        border-bottom: none !important;
    }

    [data-bs-theme="dark"] .search-bar-input,
    body[theme="dark"] .search-bar-input {
        background: #2d3144 !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
        color: #ffffff !important;
    }

    [data-bs-theme="dark"] .search-bar-input::placeholder,
    body[theme="dark"] .search-bar-input::placeholder {
        color: rgba(255, 255, 255, 0.75) !important;
        opacity: 1 !important;
    }

    [data-bs-theme="dark"] .search-bar-input:focus,
    body[theme="dark"] .search-bar-input:focus {
        background: #2d3144 !important;
        border-color: var(--primary-dark) !important;
        color: #ffffff !important;
    }

    /* User action icons dark mode */
    body[theme="dark"] .user-action-icon {
        color: #ffffff !important;
    }

    body[theme="dark"] .user-action-icon .icon-wrap {
        border-color: rgba(255, 255, 255, 0.15);
    }

    body[theme="dark"] .user-action-icon .icon-wrap i {
        color: #ffffff !important;
    }

    body[theme="dark"] .user-action-icon:hover .icon-wrap {
        border-color: var(--primary-dark);
        background: rgba(var(--bs-primary-rgb), 0.15);
    }

    body[theme="dark"] .user-action-icon .icon-label {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    body[theme="dark"] .user-action-icon:hover .icon-label {
        color: var(--primary-dark) !important;
    }

    body[theme="dark"] .user-action-icon .icon-wrap .count {
        border-color: #1e2030;
    }

    /* Aside theme mode label — visible in both light and dark */
    .aside-theme-mode-label {
        color: #ffffff !important;
        font-weight: 600;
        font-size: 13px;
    }

    body[theme="dark"] .aside-theme-mode-label,
    [data-bs-theme="dark"] .aside-theme-mode-label {
        color: #ffffff !important;
    }

    /* Mobile login icon — strong visibility in both light and dark */
    .mobile-login-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .mobile-login-icon {
        font-size: 22px !important;
        color: #ffffff !important;
        transition: color 0.2s ease;
    }

    .mobile-login-btn:hover .mobile-login-icon {
        color: var(--primary-dark) !important;
    }

    body[theme="dark"] .mobile-login-icon,
    [data-bs-theme="dark"] .mobile-login-icon {
        color: #ffffff !important;
    }

    body[theme="dark"] .mobile-login-btn:hover .mobile-login-icon,
    [data-bs-theme="dark"] .mobile-login-btn:hover .mobile-login-icon {
        color: #fbbf24 !important;
    }

    /* Also ensure search & hamburger icons in mobile view are visible */
    .menu-btn i {
        color: #ffffff !important;
    }

    body[theme="dark"] .menu-btn i,
    [data-bs-theme="dark"] .menu-btn i {
        color: #ffffff !important;
    }

    /* Cart dark mode in middle row */
    body[theme="dark"] .header-middle .cart-icon-wrapper {
        border-color: rgba(255, 255, 255, 0.15);
        background: transparent !important;
    }

    body[theme="dark"] .header-middle .cart-icon {
        color: #ffffff !important;
    }

    body[theme="dark"] .header-middle .cart-label {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    body[theme="dark"] .header-middle .cart-trigger:hover .cart-icon-wrapper {
        border-color: var(--primary-dark);
        background: rgba(var(--bs-primary-rgb), 0.15) !important;
    }

    body[theme="dark"] .header-middle .cart-trigger:hover .cart-icon {
        color: var(--primary-dark) !important;
    }

    body[theme="dark"] .header-middle .cart-icon-wrapper .count {
        border-color: #1e2030;
    }

    /* Location dropdown dark mode */
    body[theme="dark"] .location-dropdown-wrapper .location-dropdown-btn,
    [data-bs-theme="dark"] .location-dropdown-wrapper .location-dropdown-btn {
        background: #2d3144 !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
        color: #ffffff !important;
    }

    body[theme="dark"] .location-dropdown-wrapper .location-dropdown-btn i.bi-geo-alt,
    [data-bs-theme="dark"] .location-dropdown-wrapper .location-dropdown-btn i.bi-geo-alt {
        color: #ffffff !important;
    }

    body[theme="dark"] .location-dropdown-wrapper .location-label,
    [data-bs-theme="dark"] .location-dropdown-wrapper .location-label {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    body[theme="dark"] .location-dropdown-wrapper .location-coords,
    [data-bs-theme="dark"] .location-dropdown-wrapper .location-coords {
        color: #ffffff !important;
    }

    body[theme="dark"] .location-dropdown-wrapper .location-dropdown-btn::after,
    [data-bs-theme="dark"] .location-dropdown-wrapper .location-dropdown-btn::after {
        border-top-color: #ffffff !important;
    }

    /* Dropdown menus dark mode */
    body[theme="dark"] .header .dropdown-menu,
    body[theme="dark"] .topbar-dropdown-menu,
    body[theme="dark"] .header-dropdown,
    body[theme="dark"] .location-dropdown-menu {
        background-color: #2d3144 !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    body[theme="dark"] .header .dropdown-menu li a,
    body[theme="dark"] .header .dropdown-item,
    body[theme="dark"] .topbar-dropdown-menu li a,
    body[theme="dark"] .topbar-dropdown-menu .currency-change a,
    body[theme="dark"] .header-dropdown li a,
    body[theme="dark"] .location-dropdown-menu .dropdown-item,
    body[theme="dark"] .header-middle .header-dropdown li a,
    body[theme="dark"] .header-middle .header-dropdown li a:link,
    body[theme="dark"] .header-middle .header-dropdown li a:visited {
        color: #ffffff !important;
    }

    body[theme="dark"] .header-middle .header-dropdown li a i,
    body[theme="dark"] .header-dropdown li a i {
        color: #ffffff !important;
    }

    body[theme="dark"] .header-middle .header-dropdown {
        background: #2d3144 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    body[theme="dark"] .header .dropdown-menu li a:hover,
    body[theme="dark"] .header .dropdown-item:hover,
    body[theme="dark"] .topbar-dropdown-menu li a:hover,
    body[theme="dark"] .topbar-dropdown-menu .currency-change a:hover,
    body[theme="dark"] .header-dropdown li a:hover,
    body[theme="dark"] .location-dropdown-menu .dropdown-item:hover {
        background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
        /* Not var(--primary-dark): this theme's primary is a charcoal, so
           hovering a row in a dark menu turned its text almost the colour of
           the menu behind it. The row stays readable and the tint carries the
           hover. */
        color: #ffffff !important;
    }

    /* Megamenu and submenu dark mode */
    [data-bs-theme="dark"] .header .megamenu,
    [data-bs-theme="dark"] .header .sub-menu,
    [data-bs-theme="dark"] .header .sub_menu,
    body[theme="dark"] .header .megamenu,
    body[theme="dark"] .header .sub-menu,
    body[theme="dark"] .header .sub_menu {
        background-color: #2d3144 !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    [data-bs-theme="dark"] .header .megamenu .flex-grow-1,
    [data-bs-theme="dark"] .header .megamenu a,
    [data-bs-theme="dark"] .header .megamenu span,
    [data-bs-theme="dark"] .header .megamenu div,
    [data-bs-theme="dark"] .header .sub-menu li a,
    [data-bs-theme="dark"] .header .sub_menu li a,
    body[theme="dark"] .header .megamenu .flex-grow-1,
    body[theme="dark"] .header .megamenu a,
    body[theme="dark"] .header .megamenu span,
    body[theme="dark"] .header .megamenu div,
    body[theme="dark"] .header .sub-menu li a,
    body[theme="dark"] .header .sub_menu li a {
        color: #ffffff !important;
    }

    [data-bs-theme="dark"] .header .megamenu a:hover,
    [data-bs-theme="dark"] .header .sub-menu li a:hover,
    [data-bs-theme="dark"] .header .sub_menu li a:hover,
    body[theme="dark"] .header .megamenu a:hover,
    body[theme="dark"] .header .sub-menu li a:hover,
    body[theme="dark"] .header .sub_menu li a:hover {
        color: #ffffff !important;
        background: rgba(var(--bs-primary-rgb), 0.25) !important;
    }

    [data-bs-theme="dark"] .header .megamenu a:hover i,
    [data-bs-theme="dark"] .header .megamenu a:hover span,
    [data-bs-theme="dark"] .header .sub-menu li a:hover i,
    [data-bs-theme="dark"] .header .sub-menu li a:hover span,
    [data-bs-theme="dark"] .header .sub_menu li a:hover i,
    [data-bs-theme="dark"] .header .sub_menu li a:hover span,
    body[theme="dark"] .header .megamenu a:hover i,
    body[theme="dark"] .header .megamenu a:hover span,
    body[theme="dark"] .header .sub-menu li a:hover i,
    body[theme="dark"] .header .sub-menu li a:hover span,
    body[theme="dark"] .header .sub_menu li a:hover i,
    body[theme="dark"] .header .sub_menu li a:hover span {
        color: #ffffff !important;
    }

    [data-bs-theme="dark"] .header .megamenu .border-bottom,
    body[theme="dark"] .header .megamenu .border-bottom {
        border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    }

    /* Cart dropdown dark mode */
    body[theme="dark"] .cart-dropdown-menu {
        background: #1e2030 !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    body[theme="dark"] .cart-dropdown-menu .flex-grow-1 h6,
    body[theme="dark"] .cart-dropdown-menu .flex-grow-1 h6 a,
    body[theme="dark"] .cart-dropdown-menu .flex-grow-1 span,
    body[theme="dark"] .cart-dropdown-menu .flex-grow-1 div,
    body[theme="dark"] .cart-dropdown-menu .flex-grow-1 ins,
    body[theme="dark"] .cart-dropdown-menu .flex-grow-1 del,
    body[theme="dark"] .cart-dropdown-menu h6,
    body[theme="dark"] .cart-dropdown-menu h3 {
        color: #ffffff !important;
    }

    body[theme="dark"] .cart-dropdown-menu .quantity input,
    body[theme="dark"] .cart-dropdown-menu .quantity__qty {
        color: #ffffff !important;
        background-color: #2d3144 !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    body[theme="dark"] .cart-dropdown-menu .quantity span,
    body[theme="dark"] .cart-dropdown-menu .quantity__minus,
    body[theme="dark"] .cart-dropdown-menu .quantity__plus {
        color: #ffffff !important;
        background-color: #363a50 !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    body[theme="dark"] .cart-dropdown-menu .quantity span i,
    body[theme="dark"] .cart-dropdown-menu .quantity__minus i,
    body[theme="dark"] .cart-dropdown-menu .quantity__plus i {
        color: #ffffff !important;
    }

    body[theme="dark"] .cart-footer {
        background: rgba(var(--bs-primary-rgb), 0.08);
    }

    /* Search results — LIGHT mode: white bg + dark text */
    #search-results-dropdown,
    #search-results-dropdown .search-card,
    #search-results-dropdown .search-result-box,
    #search-results-dropdown .card.search-card,
    .search-result-box,
    .search-card.bg-white,
    .card.search-card.bg-white,
    .search-dropdown-results .search-card {
        background-color: #ffffff !important;
    }

    /* MAX specificity — force all text in search dropdown to dark */
    #search-results-dropdown *,
    #search-results-dropdown a,
    #search-results-dropdown span,
    #search-results-dropdown div,
    #search-results-dropdown p,
    #search-results-dropdown h1,
    #search-results-dropdown h2,
    #search-results-dropdown h3,
    #search-results-dropdown h4,
    #search-results-dropdown h5,
    #search-results-dropdown h6,
    #search-results-dropdown small,
    #search-results-dropdown strong,
    #search-results-dropdown b {
        color: #212529 !important;
    }

    /* Preserve semantic colors */
    #search-results-dropdown .text-primary,
    #search-results-dropdown .text-success,
    #search-results-dropdown .text-danger,
    #search-results-dropdown .text-warning,
    #search-results-dropdown .text-info,
    #search-results-dropdown .badge,
    #search-results-dropdown .in-stock,
    #search-results-dropdown .in-stock *,
    #search-results-dropdown .out-of-stock,
    #search-results-dropdown .out-of-stock * {
        color: inherit !important;
    }

    /* Price color (typically primary) */
    #search-results-dropdown .price,
    #search-results-dropdown .product-price,
    #search-results-dropdown .amount {
        color: var(--primary-dark) !important;
    }

    /* Header "X Results found" row — white text on dark bg */
    #search-results-dropdown .search-header,
    #search-results-dropdown .results-found,
    #search-results-dropdown [class*="result"]:first-child {
        color: #ffffff !important;
    }

    /* Search results dark mode */
    body[theme="dark"] .search-result-box,
    body[theme="dark"] .search-card,
    body[theme="dark"] .card.search-card,
    body[theme="dark"] .search-card.bg-white,
    body[theme="dark"] .card.search-card.bg-white,
    body[theme="dark"] .search-dropdown-results .search-card {
        background-color: #2d3144 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
    }

    body[theme="dark"] #search-results-dropdown *,
    body[theme="dark"] #search-results-dropdown a,
    body[theme="dark"] #search-results-dropdown span,
    body[theme="dark"] #search-results-dropdown div,
    body[theme="dark"] #search-results-dropdown p,
    body[theme="dark"] #search-results-dropdown h1,
    body[theme="dark"] #search-results-dropdown h2,
    body[theme="dark"] #search-results-dropdown h3,
    body[theme="dark"] #search-results-dropdown h4,
    body[theme="dark"] #search-results-dropdown h5,
    body[theme="dark"] #search-results-dropdown h6,
    body[theme="dark"] #search-results-dropdown small,
    body[theme="dark"] #search-results-dropdown strong,
    body[theme="dark"] #search-results-dropdown b {
        color: #ffffff !important;
    }

    /* Search result action icons (circular buttons) */
    .search-result-box .icon-circle,
    .search-result-box .action-icon,
    .search-card i {
        color: var(--primary-dark) !important;
    }

    body[theme="dark"] .search-result-box .icon-circle,
    body[theme="dark"] .search-result-box .action-icon,
    body[theme="dark"] .search-card i {
        color: #ffffff !important;
    }

    /* Force search result items visible (non-hover state too) in dark mode */
    body[theme="dark"] .search-card .search-result-item,
    body[theme="dark"] .search-card a,
    body[theme="dark"] .search-card .product-name,
    body[theme="dark"] .search-card .product-title,
    body[theme="dark"] .search-card h5,
    body[theme="dark"] .search-card h6,
    body[theme="dark"] .search-card p,
    body[theme="dark"] .search-card span:not(.badge):not(.in-stock):not(.out-of-stock) {
        color: rgba(255, 255, 255, 0.95) !important;
        background: transparent !important;
    }

    body[theme="dark"] .search-card .search-result-item:hover {
        background: rgba(255, 255, 255, 0.08) !important;
    }

    /* Compact search result item sizing */
    .search-card .search-result-item,
    .search-card .list-group-item,
    .search-card > div > div,
    .search-card .__h-70 {
        padding: 8px 10px !important;
    }

    .search-card .product-name,
    .search-card .title {
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        margin-bottom: 2px !important;
    }

    .search-card .price,
    .search-card .product-price,
    .search-card .text-primary {
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    .search-card .category,
    .search-card .sub-text,
    .search-card .text-muted,
    .search-card small {
        font-size: 11px !important;
    }

    .search-card .category i,
    .search-card .category-icon {
        font-size: 11px !important;
    }

    /* Product image in search result */
    .search-card img,
    .search-card .product-image,
    .search-card .thumbnail {
        width: 48px !important;
        height: 48px !important;
        object-fit: contain !important;
    }

    /* Rating stars */
    .search-card .rating,
    .search-card .stars,
    .search-card .star-rating {
        font-size: 10px !important;
    }

    /* Circular action buttons */
    .search-card .action-btn,
    .search-card .btn-circle,
    .search-card .icon-circle,
    .search-card button[class*="btn-"]:not(.btn-link) {
        width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    .search-card .action-btn i,
    .search-card .btn-circle i,
    .search-card .icon-circle i,
    .search-card button i {
        font-size: 12px !important;
    }

    /* In stock / Out of stock badges */
    .search-card .in-stock,
    .search-card .out-of-stock,
    .search-card .badge {
        font-size: 10px !important;
        padding: 3px 7px !important;
    }

    /* "6 Results found" header */
    .search-card .results-found,
    .search-card .search-header {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    /* Dark mode search box — remove bright borders/lines */
    body[theme="dark"] .search-box-wrapper,
    body[theme="dark"] .search-input-group {
        border: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    body[theme="dark"] .search-dropdown-results {
        border: none !important;
    }

    body[theme="dark"] .search-bar-input {
        border-color: transparent !important;
        background: rgba(255, 255, 255, 0.04) !important;
        color: #ffffff !important;
    }

    body[theme="dark"] .search-bar-input::placeholder {
        color: rgba(255, 255, 255, 0.5) !important;
    }

    body[theme="dark"] .search-bar-input:focus {
        border-color: transparent !important;
        outline: none !important;
        box-shadow: none !important;
        background: rgba(255, 255, 255, 0.06) !important;
        caret-color: rgba(255, 255, 255, 0.5) !important;
    }

    /* Caret (cursor) width — thinner in light & dark modes */
    .search-bar-input {
        caret-color: #6b7280;
    }

    body[theme="dark"] .search-bar-input {
        caret-color: rgba(255, 255, 255, 0.5) !important;
    }

    /* Mobile aside dark mode */
    body[theme="dark"] .header .aside {
        background-color: #1a1d29 !important;
    }

    body[theme="dark"] .header .aside .main-nav li a,
    body[theme="dark"] .header .aside-body .main-nav li a {
        color: #e0e0e0 !important;
    }

    body[theme="dark"] .header .aside .main-nav li a i {
        color: #e0e0e0 !important;
    }

    body[theme="dark"] .header .aside .main-nav li a:hover {
        color: #fff !important;
    }

    body[theme="dark"] .header .aside .aside-theme-mode-row {
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    body[theme="dark"] .header .aside .become-a-vendor-link,
    body[theme="dark"] .header .aside a[href*="vendor"] {
        color: #e0e0e0 !important;
    }

    /* Profile dropdown dark mode */
    body[theme="dark"] .header-middle .header-dropdown {
        background-color: #2d3144 !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    body[theme="dark"] .header-middle .header-dropdown li a {
        color: #ffffff !important;
    }

    body[theme="dark"] .header-middle .header-dropdown li a:hover {
        background: rgba(var(--bs-primary-rgb), 0.15) !important;
        color: var(--primary-dark) !important;
    }

    /* ============================================
       16. BACK TO TOP BUTTON
       ============================================ */
    .back-to-top {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background-color: var(--bs-primary);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 30px;
        right: 30px;
        z-index: 999;
        transition: all 0.3s ease;
        box-shadow: 0 4px 16px rgba(var(--bs-primary-rgb), 0.3);
    }

    .back-to-top:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(var(--bs-primary-rgb), 0.5);
    }

    .back-to-top i {
        font-size: 20px;
        color: #ffffff;
    }

/* Best Deal Section Styles */
    /* ============================================
       Best Deals Section - Layout & Left Column
       ============================================ */

    .bd-section {
        position: relative;
        background: #dee2e6;
        padding: 48px 0 56px;
        margin: 0;
    }


    /* ---- Grid Layout ---- */
    .bd-grid {
        display: grid;
        grid-template-columns: 340px 1fr;
        gap: 2rem;
        /* stretch, so both columns end level with each other. It was start,
           which left each column at its own height and needed a script to cap
           the left one — by clipping it. */
        align-items: stretch;
    }

    .bd-grid--full {
        grid-template-columns: 1fr;
    }

    /* ---- Left Sidebar ---- */
    .bd-sidebar {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        min-width: 0;
    }

    .bd-header {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .bd-icon {
        width: 48px;
        height: 48px;
        background: var(--primary-dark);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .bd-icon i {
        font-size: 1.25rem;
        color: #fff;
    }

    .bd-icon:hover {
        transform: scale(1.08);
        box-shadow: 0 4px 16px rgba(var(--bs-primary-rgb), 0.3);
    }

    .bd-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: #1a1a2e;
        line-height: 1.25;
    }

    /* ---- Countdown Timer ---- */
    .bd-countdown {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 0.25rem;
    }

    .bd-timer-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .bd-timer-num {
        width: 50px;
        height: 50px;
        background: var(--primary-dark);
        color: #fff;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        font-weight: 700;
        box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.25);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .bd-timer-num:hover {
        box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.3);
    }

    .bd-timer-sep {
        font-size: 1.375rem;
        font-weight: 700;
        color: var(--primary-dark);
        line-height: 50px;
        user-select: none;
    }

    .bd-timer-label {
        font-size: 0.7rem;
        font-weight: 600;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        line-height: 1;
    }

    .bd-countdown-expired {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        background: rgba(220, 53, 69, 0.1);
        border: 2px solid #dc3545;
        border-radius: 50px;
        color: #dc3545;
        font-weight: 600;
        font-size: 1rem;
    }

    .bd-countdown-expired::before {
        content: "\f659";
        font-family: "bootstrap-icons";
        font-size: 1.25rem;
    }

    /* ---- Shop All Deals Button ---- */
    .bd-shop-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        background: var(--primary-dark);
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.9375rem;
        padding: 0.8rem 1.5rem;
        border-radius: 50px;
        border: 2px solid var(--primary-dark);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 15px rgba(var(--bs-primary-rgb), 0.25);
    }

    .bd-shop-btn__text {
        position: relative;
        z-index: 1;
        transition: transform 0.3s ease;
    }

    .bd-shop-btn__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        position: relative;
        z-index: 1;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .bd-shop-btn__icon i {
        font-size: 0.875rem;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .bd-shop-btn:hover {
        background: #fff;
        color: var(--primary-dark);
    }

    .bd-shop-btn:hover .bd-shop-btn__icon {
        background: var(--primary-dark);
        color: #fff;
    }

    /* ---- Deal Product Card ---- */
    .bd-deal-card {
        background: rgba(var(--bs-primary-rgb), 0.04);
        border-radius: 14px;
        padding: 0.75rem;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
        /* Takes the height the header leaves, so the column fills to the
           bottom rather than the card overshooting it. */
        flex: 1 1 auto;
        display: flex;
        min-height: 0;
    }

    .bd-deal-card:hover {
        background: rgba(var(--bs-primary-rgb), 0.08);
        box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.1);
    }

    .bd-deal-card__product {
        width: 100%;
        display: flex;
        min-height: 0;
    }

    .bd-deal-card__product .modern-product-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .bd-deal-card__product .modern-product-card .product-card-image-wrapper,
    .bd-deal-card__product .modern-product-card .product-card-image,
    .bd-deal-card__product .modern-product-card img {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ---- Right Content Area ---- */
    .bd-content {
        min-width: 0;
        overflow: hidden;
        position: relative;
    }

    /* ============================================
       Latest Deals Header
       ============================================ */
    .ld-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.25rem;
    }

    .ld-header__title {
        font-size: 1.1rem;
        font-weight: 700;
        color: #1a1a2e;
        margin: 0;
        font-family: 'Jost', sans-serif;
    }

    .ld-header__link {
        color: #1a1a2e;
        text-decoration: none;
        font-weight: 500;
        font-size: 0.9375rem;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: color 0.2s ease;
    }

    .ld-header__link:hover {
        color: var(--primary-dark);
    }

    .ld-header__link i {
        font-size: 0.75rem;
        transition: transform 0.3s ease;
    }

    .ld-header__link:hover i {
        transform: translateX(4px);
    }

    /* ============================================
       Latest Deals Horizontal Card
       ============================================ */
    .ld-card {
        display: flex;
        flex-direction: row;
        background: #ffffff;
        border-radius: 16px;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid #eef0f4;
    }

    .ld-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        border-color: var(--primary-dark, #0052ea);
    }

    /* ---- Card Image ---- */
    .ld-card__image {
        width: 220px;
        min-width: 220px;
        background: #f5f6fa;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        padding: 0.75rem;
    }

    .ld-card__image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: transform 0.4s ease;
    }

    .ld-card:hover .ld-card__image img {
        transform: scale(1.08);
    }

    .ld-card__badge {
        position: absolute;
        top: 10px;
        z-index: 5;
        font-size: 0.675rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .ld-card__badge--sale {
        left: 10px;
        background: #dc3545;
        color: #fff;
        padding: 4px 10px;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
    }

    .ld-card__badge--flash {
        right: 10px;
        width: 30px;
        height: 30px;
        background: #fd7e14;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 0.875rem;
        box-shadow: 0 2px 8px rgba(253, 126, 20, 0.3);
        animation: pulseBounce 1.5s ease-in-out infinite;
    }

    @keyframes pulseBounce {
        0%, 100% { transform: translateY(0) scale(1); }
        50% { transform: translateY(-2px) scale(1.06); }
    }

    .ld-card__oos {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(2px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }

    .ld-card__oos span {
        background: rgba(220, 53, 69, 0.9);
        color: #fff;
        padding: 6px 14px;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* ---- Card Details ---- */
    .ld-card__details {
        flex: 1;
        padding: 0.875rem 1rem 0.75rem;
        display: flex;
        flex-direction: column;
        min-width: 0;
        justify-content: center;
    }

    .ld-card__name {
        font-size: 1rem;
        font-weight: 700;
        color: #1a1a2e;
        margin: 0 0 4px;
        line-height: 1.3;
        font-family: 'Jost', sans-serif;
        transition: color 0.2s ease;
    }

    .ld-card:hover .ld-card__name {
        color: var(--primary-dark);
    }

    /* ---- Price + Rating Row ---- */
    .ld-card__price-row {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 4px;
    }

    .ld-card__prices {
        display: flex;
        align-items: baseline;
        gap: 8px;
    }

    .ld-card__price {
        font-size: 1.375rem;
        font-weight: 800;
        color: #1a1a2e;
        font-family: 'Jost', sans-serif;
    }

    .ld-card__price--old {
        font-size: 0.875rem;
        color: #adb5bd;
        text-decoration: line-through;
    }

    .ld-card__rating {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .ld-card__stars {
        display: flex;
        gap: 1px;
    }

    .ld-card__stars i {
        font-size: 0.8rem;
        color: #f5a623;
    }

    .ld-card__reviews {
        font-size: 0.8rem;
        color: #6c757d;
    }

    /* ---- Divider ---- */
    .ld-card__divider {
        height: 1px;
        background: #eef0f4;
        margin: 6px 0;
    }

    /* ---- Form ---- */
    .ld-card__form {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    /* ---- Options Row (Color + Qty) ---- */
    .ld-card__options-row {
        display: flex;
        align-items: flex-start;
        gap: 1.25rem;
        flex-wrap: wrap;
        margin-bottom: 8px;
    }

    .ld-card__colors {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .ld-card__label {
        font-size: 0.8125rem;
        font-weight: 700;
        color: #1a1a2e;
    }

    .ld-card__color-list {
        display: flex;
        gap: 6px;
    }

    .ld-card__color-swatch {
        cursor: pointer;
        position: relative;
    }

    .ld-card__color-dot {
        display: block;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid #dee2e6;
        transition: all 0.2s ease;
        box-shadow: inset 0 0 0 2px #fff;
    }

    .ld-card__color-swatch.active .ld-card__color-dot,
    .ld-card__color-swatch input:checked ~ .ld-card__color-dot {
        border-color: #1a1a2e;
        box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #1a1a2e;
    }

    .ld-card__qty {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    /* One grouped control on a tinted track, matching the steppers on the
       product cards. This was three separately bordered boxes. */
    .ld-card__qty-ctrl {
        display: flex;
        align-items: center;
        gap: 2px;
        border: none;
        border-radius: 8px;
        padding: 2px;
        background: #f1f3f5;
    }

    .ld-card__qty-btn {
        width: 28px;
        height: 30px;
        border: none;
        border-radius: 6px;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #495057;
        font-size: 0.85rem;
        transition: background-color 0.18s ease, color 0.18s ease;
    }

    .ld-card__qty-btn:hover {
        background: #f5f6fa;
    }

    .ld-card__qty-input {
        width: 34px;
        height: 30px;
        text-align: center;
        border: none;
        font-size: 0.85rem;
        font-weight: 600;
        color: #212529;
        background: transparent;
        -moz-appearance: textfield;
        appearance: textfield;
    }

    .ld-card__qty-input::-webkit-outer-spin-button,
    .ld-card__qty-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* ---- Variants ---- */
    .ld-card__variants {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-bottom: 8px;
    }

    .ld-card__variant-btn {
        min-width: 36px;
        height: 28px;
        padding: 0 11px;
        border: 1px solid #dee2e6;
        /* Pill, so the same control is not two shapes on one page. */
        border-radius: 999px;
        background: #fff;
        color: #475467;
        font-size: 0.6875rem;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
        transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
    }

    .ld-card__variant-btn:hover {
        border-color: var(--primary-dark);
        color: var(--primary-dark);
    }

    .ld-card__variant-btn.active {
        background: var(--primary-dark);
        color: #fff;
        border-color: var(--primary-dark);
    }

    /* ---- Action Row ---- */
    .ld-card__actions {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: auto;
        padding-top: 4px;
    }

    .ld-card__wishlist-btn {
        width: 38px;
        height: 38px;
        border: 1px solid #dee2e6;
        border-radius: 10px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
        color: #6c757d;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .ld-card__wishlist-btn:hover {
        border-color: #dc3545;
        color: #dc3545;
        background: rgba(220, 53, 69, 0.05);
    }

    .ld-card__wishlist-btn.active {
        border-color: #dc3545;
        color: #dc3545;
        background: rgba(220, 53, 69, 0.05);
    }

    /* Paired with the wishlist button beside it: same 1px border and radius,
       WhatsApp green carried by the icon rather than a filled outlined box. */
    .ld-card__whatsapp-btn {
        width: 38px;
        height: 38px;
        border: 1px solid #dee2e6;
        border-radius: 10px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: border-color 0.2s ease, background-color 0.2s ease;
        color: #25d366;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .ld-card__whatsapp-btn:hover {
        border-color: #25d366;
        background: #eafaf0;
    }

    .ld-card__whatsapp-btn:hover {
        background: #25d366;
        color: #fff;
        box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    }

    .ld-card__cart-btn {
        flex: 1;
        height: 38px;
        border: none;
        border-radius: 10px;
        background: #2d3144;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        font-size: 0.85rem;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .ld-card__cart-btn i {
        font-size: 1rem;
    }

    .ld-card__cart-btn:hover {
        background: var(--primary-dark);
        box-shadow: 0 4px 16px rgba(var(--bs-primary-rgb), 0.3);
    }

    .ld-card__cart-btn.btn-success {
        background: #198754 !important;
    }

    .ld-card__cart-btn.btn-success:hover {
        background: #146c43 !important;
    }

    .ld-card__cart-btn.btn-danger {
        background: #dc3545 !important;
    }

    /* ============================================
       Swiper Overrides for Horizontal Cards
       ============================================ */
    .bd-swiper-wrap {
        position: relative;
        padding-bottom: 56px;
    }

    .bd-swiper {
        overflow: hidden;
    }

    .bd-swiper .swiper-slide {
        height: auto !important;
        box-sizing: border-box;
        padding: 8px 0;
    }

    .bd-swiper .swiper-slide .ld-card {
        margin: 0 auto;
        width: 100%;
        max-width: calc(100% - 16px);
    }

    /* ---- Navigation Buttons ---- */
    .bd-nav {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 10px;
        z-index: 10;
    }

    .bd-nav-btn {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        background: #fff;
        border: 1px solid #dee2e6;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .bd-nav-btn i {
        font-size: 13px;
        color: #2d3144;
        transition: all 0.3s ease;
    }

    .bd-nav-btn:hover {
        background: #2d3144;
        border-color: #2d3144;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }

    .bd-nav-btn:hover i {
        color: #fff;
    }

    .bd-nav-btn:focus {
        outline: none;
        box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.2);
    }

    .bd-nav-btn:active {
        transform: scale(0.95);
    }

    .bd-nav-btn.swiper-button-disabled {
        opacity: 0.35;
        cursor: not-allowed;
        pointer-events: none;
    }

    /* ---- Empty State ---- */
    .bd-empty {
        text-align: center;
        padding: 3rem 2rem;
    }

    .bd-empty__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 80px;
        background: rgba(var(--bs-primary-rgb), 0.1);
        border-radius: 50%;
        margin: 0 auto 1rem;
    }

    .bd-empty__icon i {
        font-size: 2.5rem;
        color: var(--primary-dark);
        opacity: 0.5;
    }

    .bd-empty__text {
        color: #6c757d;
        margin: 0;
        font-size: 0.9375rem;
    }

    /* ============================================
       Dark Mode
       ============================================ */
    [data-bs-theme="dark"] .bd-section,
    body[theme="dark"] .bd-section {
        background: rgba(var(--bs-primary-rgb), 0.06);
    }

    [data-bs-theme="dark"] .bd-title,
    body[theme="dark"] .bd-title {
        color: #e6e8ef;
    }

    [data-bs-theme="dark"] .bd-timer-num,
    body[theme="dark"] .bd-timer-num {
        box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.4);
    }

    [data-bs-theme="dark"] .bd-timer-label,
    body[theme="dark"] .bd-timer-label {
        color: #b8bcc8;
    }

    [data-bs-theme="dark"] .bd-shop-btn,
    body[theme="dark"] .bd-shop-btn {
        background: var(--primary-dark);
        border-color: var(--primary-dark);
    }

    [data-bs-theme="dark"] .bd-shop-btn:hover,
    body[theme="dark"] .bd-shop-btn:hover {
        background: #fff;
        color: var(--primary-dark);
        border-color: #fff;
    }

    [data-bs-theme="dark"] .bd-deal-card,
    body[theme="dark"] .bd-deal-card {
        background: rgba(255, 255, 255, 0.04);
    }

    [data-bs-theme="dark"] .bd-deal-card:hover,
    body[theme="dark"] .bd-deal-card:hover {
        background: rgba(255, 255, 255, 0.07);
    }

    [data-bs-theme="dark"] .bd-nav-btn,
    body[theme="dark"] .bd-nav-btn {
        background: rgba(30, 33, 48, 0.9);
        border-color: rgba(var(--bs-primary-rgb), 0.3);
    }

    [data-bs-theme="dark"] .bd-nav-btn i,
    body[theme="dark"] .bd-nav-btn i {
        color: #e6e8ef;
    }

    [data-bs-theme="dark"] .bd-nav-btn:hover,
    body[theme="dark"] .bd-nav-btn:hover {
        background: #2d3144;
        border-color: #2d3144;
    }

    [data-bs-theme="dark"] .bd-nav-btn:hover i,
    body[theme="dark"] .bd-nav-btn:hover i {
        color: #fff;
    }

    [data-bs-theme="dark"] .ld-header__title,
    body[theme="dark"] .ld-header__title {
        color: #e6e8ef;
    }

    [data-bs-theme="dark"] .ld-header__link,
    body[theme="dark"] .ld-header__link {
        color: #b8bcc8;
    }

    [data-bs-theme="dark"] .ld-card,
    body[theme="dark"] .ld-card {
        background: #1e2130;
        border-color: #2d3144;
    }

    [data-bs-theme="dark"] .ld-card:hover,
    body[theme="dark"] .ld-card:hover {
        border-color: var(--primary-dark);
    }

    [data-bs-theme="dark"] .ld-card__image,
    body[theme="dark"] .ld-card__image {
        background: #2c3034;
    }

    [data-bs-theme="dark"] .ld-card__name,
    body[theme="dark"] .ld-card__name {
        color: #e6e8ef;
    }

    [data-bs-theme="dark"] .ld-card__price,
    body[theme="dark"] .ld-card__price {
        color: #e6e8ef;
    }

    [data-bs-theme="dark"] .ld-card__label,
    body[theme="dark"] .ld-card__label {
        color: #b8bcc8;
    }

    [data-bs-theme="dark"] .ld-card__divider,
    body[theme="dark"] .ld-card__divider {
        background: #2d3144;
    }

    [data-bs-theme="dark"] .ld-card__color-dot,
    body[theme="dark"] .ld-card__color-dot {
        border-color: #495057;
    }

    [data-bs-theme="dark"] .ld-card__qty-ctrl,
    body[theme="dark"] .ld-card__qty-ctrl {
        border-color: #495057;
        background: #2c3034;
    }

    /* The button now carries its own background, so the dark rule has to give
       it one — it only set the colour before, when the button was transparent
       on a bordered track. */
    [data-bs-theme="dark"] .ld-card__qty-btn,
    body[theme="dark"] .ld-card__qty-btn {
        background: #3a3f44;
        color: #e6e8ef;
    }

    [data-bs-theme="dark"] .ld-card__qty-btn:hover,
    body[theme="dark"] .ld-card__qty-btn:hover {
        background: rgba(var(--bs-primary-rgb), 0.28);
        color: #ffffff;
    }

    /* Pairs with the wishlist button beside it. Left on its light-mode white it
       was the one bright rectangle on a dark card. */
    [data-bs-theme="dark"] .ld-card__whatsapp-btn,
    body[theme="dark"] .ld-card__whatsapp-btn {
        background: #2c3034;
        border-color: #495057;
    }

    [data-bs-theme="dark"] .ld-card__whatsapp-btn:hover,
    body[theme="dark"] .ld-card__whatsapp-btn:hover {
        background: rgba(37, 211, 102, 0.16);
        border-color: #25d366;
    }


    [data-bs-theme="dark"] .ld-card__qty-input,
    body[theme="dark"] .ld-card__qty-input {
        color: #e6e8ef;
        border-color: #495057;
    }

    [data-bs-theme="dark"] .ld-card__wishlist-btn,
    body[theme="dark"] .ld-card__wishlist-btn {
        background: #2c3034;
        border-color: #495057;
        color: #b8bcc8;
    }

    [data-bs-theme="dark"] .ld-card__variant-btn,
    body[theme="dark"] .ld-card__variant-btn {
        background: #2c3034;
        border-color: #495057;
        color: #e6e8ef;
    }

    /* Solid white, not #e6e8ef. The primary action on a dark card read as
       disabled next to the buttons beside it. */
    [data-bs-theme="dark"] .ld-card__cart-btn,
    body[theme="dark"] .ld-card__cart-btn {
        background: #ffffff;
        color: #101828;
    }

    [data-bs-theme="dark"] .ld-card__cart-btn:hover,
    body[theme="dark"] .ld-card__cart-btn:hover {
        background: #e9ecef;
        color: #101828;
    }

    [data-bs-theme="dark"] .bd-empty__icon,
    body[theme="dark"] .bd-empty__icon {
        background: rgba(var(--bs-primary-rgb), 0.15);
    }

    [data-bs-theme="dark"] .bd-empty__text,
    body[theme="dark"] .bd-empty__text {
        color: #b8bcc8;
    }

    [data-bs-theme="dark"] .bd-countdown-expired,
    body[theme="dark"] .bd-countdown-expired {
        background: rgba(220, 53, 69, 0.15);
    }

    /* ============================================
       RTL Support
       ============================================ */
    [dir="rtl"] .bd-shop-btn:hover .bd-shop-btn__text {
        transform: translateX(3px);
    }

    [dir="rtl"] .bd-nav {
        right: auto;
        left: 50%;
    }

    [dir="rtl"] .ld-header__link:hover i {
        transform: translateX(-4px);
    }

    /* ============================================
       Responsive Breakpoints
       ============================================ */

    @media (max-width: 1400px) {
        .bd-grid {
            grid-template-columns: 320px 1fr;
            gap: 1.75rem;
        }

        .ld-card__image {
            width: 200px;
            min-width: 200px;
        }

        .bd-nav-btn {
            width: 42px;
            height: 42px;
        }

        .bd-nav-btn i {
            font-size: 15px;
        }
    }

    @media (max-width: 1200px) {
        .bd-grid {
            grid-template-columns: 300px 1fr;
            gap: 1.5rem;
        }

        .bd-title {
            font-size: 1.375rem;
        }

        .bd-timer-num {
            width: 46px;
            height: 46px;
            font-size: 1.125rem;
        }

        .bd-timer-sep {
            line-height: 46px;
            font-size: 1.25rem;
        }

        .bd-swiper-wrap {
            padding-bottom: 56px;
        }

        .ld-card__image {
            width: 180px;
            min-width: 180px;
        }

        .ld-card__name {
            font-size: 0.95rem;
        }

        .ld-card__price {
            font-size: 1.2rem;
        }
    }

    @media (max-width: 1024px) {
        .bd-section {
            padding: 40px 0 48px;
        }

        .bd-grid {
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }

        .bd-sidebar {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }

        .bd-header {
            gap: 0.75rem;
        }

        .bd-title {
            font-size: 1.3rem;
        }

        .bd-timer-num {
            width: 44px;
            height: 44px;
            font-size: 1.1rem;
            border-radius: 10px;
        }

        .bd-timer-sep {
            line-height: 44px;
            font-size: 1.2rem;
        }

        .bd-swiper-wrap {
            padding-bottom: 58px;
        }

        .bd-nav-btn {
            width: 40px;
            height: 40px;
        }

        .ld-card__image {
            width: 200px;
            min-width: 200px;
        }
    }

    @media (max-width: 768px) {
        .bd-section {
            padding: 36px 0 44px;
        }

        .bd-sidebar {
            grid-template-columns: 1fr;
            gap: 1.25rem;
        }

        .bd-icon {
            width: 42px;
            height: 42px;
            border-radius: 12px;
        }

        .bd-icon i {
            font-size: 1.125rem;
        }

        .bd-title {
            font-size: 1.25rem;
        }

        .bd-timer-num {
            width: 42px;
            height: 42px;
            font-size: 1rem;
            border-radius: 10px;
        }

        .bd-timer-sep {
            line-height: 42px;
            font-size: 1.125rem;
        }

        .bd-shop-btn {
            padding: 0.7rem 1.25rem;
            font-size: 0.875rem;
        }

        .bd-swiper-wrap {
            padding-bottom: 54px;
        }

        .bd-nav {
            gap: 8px;
        }

        .bd-nav-btn {
            width: 38px;
            height: 38px;
        }

        .bd-nav-btn i {
            font-size: 14px;
        }

        .ld-header__title {
            font-size: 1.25rem;
        }

        .ld-card__image {
            width: 160px;
            min-width: 160px;
        }

        .ld-card__details {
            padding: 1rem;
        }

        .ld-card__name {
            font-size: 0.9375rem;
        }

        .ld-card__price {
            font-size: 1.125rem;
        }

        .ld-card__options-row {
            gap: 1rem;
        }

        .ld-card__cart-btn span {
            font-size: 0.8125rem;
        }
    }

    @media (max-width: 576px) {
        .bd-section {
            padding: 32px 0 40px;
        }

        .bd-icon {
            width: 38px;
            height: 38px;
            border-radius: 10px;
        }

        .bd-icon i {
            font-size: 1rem;
        }

        .bd-title {
            font-size: 1.125rem;
        }

        .bd-countdown {
            gap: 4px;
        }

        .bd-timer-num {
            width: 38px;
            height: 38px;
            font-size: 0.9375rem;
            border-radius: 8px;
        }

        .bd-timer-sep {
            line-height: 38px;
            font-size: 1rem;
        }

        .bd-timer-label {
            font-size: 0.625rem;
        }

        .bd-shop-btn {
            width: 100%;
            justify-content: center;
            padding: 0.7rem 1rem;
            font-size: 0.8125rem;
        }

        .bd-shop-btn__icon {
            width: 22px;
            height: 22px;
        }

        .bd-shop-btn__icon i {
            font-size: 0.75rem;
        }

        .bd-swiper-wrap {
            padding-bottom: 50px;
        }

        .bd-nav {
            gap: 6px;
        }

        .bd-nav-btn {
            width: 36px;
            height: 36px;
        }

        .bd-nav-btn i {
            font-size: 13px;
        }

        .ld-header__title {
            font-size: 1.125rem;
        }

        .ld-header__link {
            font-size: 0.8125rem;
        }

        /* Stack card vertically on small screens */
        .ld-card {
            flex-direction: column;
        }

        .ld-card__image {
            width: 100%;
            min-width: 100%;
            height: auto;
            min-height: 200px;
            padding: 1.5rem;
        }

        .ld-card__image img {
            max-height: 250px;
            object-fit: contain;
        }

        .ld-card__details {
            padding: 1rem;
        }

        .ld-card__name {
            font-size: 0.9rem;
        }

        .ld-card__price {
            font-size: 1.0625rem;
        }

        .ld-card__reviews {
            font-size: 0.7rem;
        }

        .ld-card__color-dot {
            width: 24px;
            height: 24px;
        }

        .ld-card__qty-btn {
            width: 30px;
            height: 30px;
        }

        .ld-card__qty-input {
            width: 36px;
            height: 30px;
        }

        .ld-card__wishlist-btn,
        .ld-card__whatsapp-btn {
            width: 38px;
            height: 38px;
            font-size: 1rem;
        }

        .ld-card__cart-btn {
            height: 38px;
            font-size: 0.8125rem;
        }

        .bd-empty__icon {
            width: 64px;
            height: 64px;
        }

        .bd-empty__icon i {
            font-size: 2rem;
        }

        .bd-empty {
            padding: 2rem 1rem;
        }
    }

/* Flash Deals Section Styles */
    /* ===== Flash Deals Section ===== */
    .flash-deals-section {
        padding: 1rem 0;
    }

    /* ===== Flash Deals Header ===== */
    .flash-deals-header {
        padding: 0.5rem 0;
    }

    /* Section Icon - Dynamic Primary Color with Animation */
    .flash-deals-header .section-icon {
        width: 36px;
        height: 36px;
        background: var(--primary-dark);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .flash-deals-header .section-icon i {
        font-size: 1rem;
        color: #fff;
    }

    /* Section Title */
    .flash-deals-header .section-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: #2d3144;
    }

    @media (max-width: 576px) {
        .flash-deals-header .section-icon {
            width: 36px;
            height: 36px;
        }

        .flash-deals-header .section-icon i {
            font-size: 1rem;
        }

        .flash-deals-header .section-title {
            font-size: 1.25rem;
        }
    }

    .flash-deals-card {
        background: #fff;
        border-radius: 16px;
        padding: 1rem;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
        border: 1px solid rgba(var(--bs-primary-rgb), 0.08);
        position: relative;
        overflow: hidden;
    }

    @media (min-width: 992px) {
        .flash-deals-card {
            padding: 1rem 1.25rem;
        }
    }

    /* ===== Flash Deals Layout ===== */
    .flash-deals-layout {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    @media (min-width: 992px) {
        .flash-deals-layout {
            flex-direction: row;
            gap: 0.75rem;
            align-items: stretch;
        }

        .flash-deals-layout>.flash-deal-link {
            flex: 0 0 220px;
            max-width: 220px;
        }

        .flash-deals-layout>.swiper-container {
            flex: 1;
            min-width: 0;
            overflow: hidden;
        }
    }

    @media (min-width: 1200px) {
        .flash-deals-layout {
            gap: 1rem;
        }

        .flash-deals-layout>.flash-deal-link {
            flex: 0 0 240px;
            max-width: 240px;
        }
    }

    @media (min-width: 1400px) {
        .flash-deals-layout>.flash-deal-link {
            flex: 0 0 260px;
            max-width: 260px;
        }
    }

    /* ===== Flash Deal Link ===== */
    .flash-deal-link {
        text-decoration: none;
        display: block;
        transition: transform 0.3s ease;
    }

    .flash-deal-link:hover {
        transform: translateY(-2px);
    }

    .flash-deal-link:hover .flash-deal-offer-card {
        box-shadow: 0 12px 32px rgba(var(--bs-primary-rgb), 0.2);
    }

    /* ===== Flash Deal Offer Card ===== */
    .flash-deal-offer-card {
        background: var(--primary-light);
        border-radius: 14px;
        padding: 16px 12px;
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(var(--bs-primary-rgb), 0.12);
        transition: all 0.3s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 260px;
    }

    @media (min-width: 992px) {
        .flash-deal-offer-card {
            padding: 16px 14px;
        }
    }

    @media (min-width: 1200px) {
        .flash-deal-offer-card {
            padding: 18px 16px;
        }
    }

    .flash-deal-offer-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(var(--bs-primary-rgb), 0.08) 0%, transparent 60%);
        pointer-events: none;
    }

    .flash-deal-offer-card::after {
        content: '';
        position: absolute;
        bottom: -30%;
        left: -30%;
        width: 80%;
        height: 80%;
        background: radial-gradient(circle, rgba(var(--bs-primary-rgb), 0.05) 0%, transparent 60%);
        pointer-events: none;
    }

    /* Decorative Circles */
    .flash-offer-decoration {
        position: absolute;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
    }

    .decoration-circle {
        position: absolute;
        border-radius: 50%;
        border: 2px dashed rgba(var(--bs-primary-rgb), 0.15);
    }

    .decoration-circle-1 {
        width: 120px;
        height: 120px;
        top: -40px;
        right: -40px;
        animation: pulse-scale 4s ease-in-out infinite;
    }

    .decoration-circle-2 {
        width: 80px;
        height: 80px;
        bottom: -20px;
        left: -20px;
        animation: pulse-scale 4s ease-in-out infinite 1s;
    }

    .decoration-circle-3 {
        width: 40px;
        height: 40px;
        top: 50%;
        right: 10%;
        border-style: dotted;
        animation: pulse-scale 4s ease-in-out infinite 2s;
    }

    @keyframes pulse-scale {

        0%,
        100% {
            transform: scale(1);
            opacity: 0.5;
        }

        50% {
            transform: scale(1.1);
            opacity: 0.8;
        }
    }

    /* ===== Flash Deal Countdown Content ===== */
    .flash-deal-countdown {
        position: relative;
        z-index: 1;
    }

    /* ===== Flash Deal Icon ===== */
    .flash-deal-icon-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .flash-deal-icon {
        width: 50px;
        height: 36px;
        border-radius: 8px;
        background: #fff;
        color: var(--primary-dark);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        position: relative;
    }

    .flash-deal-label {
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--primary-dark);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* ===== Hurry Up Text ===== */
    .hurry-up-text {
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--primary-dark);
        margin: 0;
    }

    .hurry-icon {
        width: 24px;
        height: 24px;
        border-radius: 5px;
        background: #fff;
        color: var(--primary-dark);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
    }

    .offer-ends-text {
        color: var(--bs-secondary);
        font-size: 0.75rem;
    }

    @media (min-width: 576px) {
        .offer-ends-text {
            font-size: 0.8rem;
        }
    }

    /* ===== Countdown Timer ===== */
    .countdown-wrapper {
        padding: 0.5rem 0 0;
    }

    .countdown-timer {
        gap: 0.3rem !important;
    }

    .countdown-timer .days,
    .countdown-timer .hours,
    .countdown-timer .minutes,
    .countdown-timer .seconds {
        min-width: 42px;
        padding: 5px 3px;
        background: #fff;
        border-radius: 8px;
        text-align: center;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    }

    .countdown-timer .timer-value {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--primary-dark);
        line-height: 1;
    }

    .countdown-timer .timer-label {
        font-size: 0.55rem;
        color: var(--bs-secondary);
        text-transform: uppercase;
        letter-spacing: 0.3px;
        font-weight: 500;
    }

    /* ===== View All Link - Rounded Pill Style with Border ===== */
    .view-all-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 600;
        color: var(--primary-dark);
        text-decoration: none;
        text-transform: capitalize;
        padding: 10px 24px;
        border-radius: 50px;
        background: transparent;
        border: 2px solid var(--primary-dark);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .view-all-link:hover {
        background: var(--primary-dark);
        color: #fff;
        box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.25);
        transform: translateY(-1px);
    }

    .view-all-link i {
        font-size: 16px;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .view-all-link:hover i {
        transform: translateX(3px);
    }

    /* Tablet tier, promoted here from five partials that each carried an
       identical copy. The component already had a <=576px tier further down
       this file; that one still governs the smallest screens. */
    @media (max-width: 991.98px) {
        .view-all-link {
            padding: 8px 18px;
            font-size: 13px;
        }
    }

    /* ===== Flash Deals Slider ===== */
    .flash-deals-slider-wrapper {
        padding: 0 8px;
        overflow: hidden;
    }

    /* Custom Swiper Base Styles */
    .flash-deals-swiper {
        position: relative;
        overflow: hidden;
        list-style: none;
        padding: 5px;
        z-index: 1;
    }

    .flash-deals-swiper .swiper-wrapper {
        display: flex;
        box-sizing: content-box;
        transition-property: transform;
    }

    .flash-deal-slide {
        height: auto;
        width: calc(50% - 6px);
        flex-shrink: 0;
        box-sizing: border-box;
    }

    .flash-deal-slide>* {
        height: 100%;
    }

    /* Scale product cards in flash deals */
    .flash-deals-swiper .product {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .flash-deals-swiper .product .product-img-wrap {
        max-width: 100% !important;
    }

    /* Responsive slide widths */
    @media (min-width: 400px) {
        .flash-deal-slide {
            width: calc(50% - 6px);
        }
    }

    @media (min-width: 768px) {
        .flash-deal-slide {
            width: calc(50% - 6px);
        }

        .flash-deals-slider-wrapper {
            padding: 0 10px;
        }
    }

    @media (min-width: 992px) {
        .flash-deal-slide {
            width: calc(33.333% - 8px);
        }

        .flash-deals-slider-wrapper {
            padding: 0 10px;
        }
    }

    @media (min-width: 1200px) {
        .flash-deal-slide {
            width: calc(20% - 10px);
        }

        .flash-deals-slider-wrapper {
            padding: 0 12px;
        }
    }

    @media (min-width: 1400px) {
        .flash-deal-slide {
            width: calc(20% - 11px);
        }

        .flash-deals-slider-wrapper {
            padding: 0 14px;
        }
    }

    /* ===== Flash Deal Navigation Buttons with 360° Rotation ===== */
    .flash-deal-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: #fff;
        color: var(--primary-dark);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 0.95rem;
    }

    .flash-deal-nav-btn:hover {
        background: var(--primary-dark);
        color: #fff;
        transform: translateY(-50%) scale(1.1);
        box-shadow: 0 6px 24px rgba(var(--bs-primary-rgb), 0.35);
    }

    .flash-deal-nav-btn:hover i {
        /* animation removed */
    }

    .flash-deal-nav-btn:active {
        transform: translateY(-50%) scale(0.95);
    }

    .flash-deal-nav-btn.flash-deal-nav-next {
        right: -6px;
    }

    .flash-deal-nav-btn.flash-deal-nav-prev {
        left: -6px;
    }

    .flash-deal-nav-btn:disabled,
    .flash-deal-nav-btn.swiper-button-disabled {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
    }

    @media (min-width: 992px) {
        .flash-deal-nav-btn.flash-deal-nav-next {
            right: -8px;
        }

        .flash-deal-nav-btn.flash-deal-nav-prev {
            left: -8px;
        }
    }

    @media (min-width: 1200px) {
        .flash-deal-nav-btn.flash-deal-nav-next {
            right: -10px;
        }

        .flash-deal-nav-btn.flash-deal-nav-prev {
            left: -10px;
        }
    }

    @media (min-width: 1400px) {
        .flash-deal-nav-btn.flash-deal-nav-next {
            right: -12px;
        }

        .flash-deal-nav-btn.flash-deal-nav-prev {
            left: -12px;
        }
    }

    /* ===== Animations ===== */
    @keyframes rotate360 {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    @keyframes pulse-glow {

        0%,
        100% {
            box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.3);
        }

        50% {
            box-shadow: 0 0 0 12px rgba(var(--bs-primary-rgb), 0);
        }
    }

    @keyframes rotate-border {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    /* ===== Dark Theme Support ===== */
    [data-bs-theme="dark"] .flash-deals-header .section-title,
    body[theme="dark"] .flash-deals-header .section-title {
        color: #e6e8ef !important;
    }

    [data-bs-theme="dark"] .flash-deals-header .section-icon,
    body[theme="dark"] .flash-deals-header .section-icon {
        background: var(--primary-dark);
    }

    [data-bs-theme="dark"] .flash-deals-card,
    body[theme="dark"] .flash-deals-card {
        background: #212529;
        border-color: #495057;
    }

    [data-bs-theme="dark"] .flash-deal-offer-card,
    body[theme="dark"] .flash-deal-offer-card {
        background: rgba(var(--bs-primary-rgb), 0.15);
        border-color: rgba(var(--bs-primary-rgb), 0.25);
    }

    [data-bs-theme="dark"] .hurry-up-text,
    [data-bs-theme="dark"] .flash-deal-label,
    body[theme="dark"] .hurry-up-text,
    body[theme="dark"] .flash-deal-label {
        color: #fff;
    }

    /* Offer Ends In Text - White in Dark Mode */
    [data-bs-theme="dark"] .offer-ends-text,
    body[theme="dark"] .offer-ends-text {
        color: rgba(255, 255, 255, 0.85) !important;
    }

    /* Countdown Timer - Visible Background and Text in Dark Mode */
    [data-bs-theme="dark"] .countdown-timer .days,
    [data-bs-theme="dark"] .countdown-timer .hours,
    [data-bs-theme="dark"] .countdown-timer .minutes,
    [data-bs-theme="dark"] .countdown-timer .seconds,
    body[theme="dark"] .countdown-timer .days,
    body[theme="dark"] .countdown-timer .hours,
    body[theme="dark"] .countdown-timer .minutes,
    body[theme="dark"] .countdown-timer .seconds {
        background: rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    [data-bs-theme="dark"] .flash-deal-icon,
    body[theme="dark"] .flash-deal-icon {
        background: rgba(255, 255, 255, 0.15);
    }

    [data-bs-theme="dark"] .hurry-icon,
    body[theme="dark"] .hurry-icon {
        background: rgba(255, 255, 255, 0.15);
    }

    /* Countdown Timer Values - White Bold Text */
    [data-bs-theme="dark"] .countdown-timer .timer-value,
    body[theme="dark"] .countdown-timer .timer-value {
        color: #fff !important;
        font-weight: 700;
    }

    /* Countdown Timer Labels - Light Gray */
    [data-bs-theme="dark"] .countdown-timer .timer-label,
    body[theme="dark"] .countdown-timer .timer-label {
        color: rgba(255, 255, 255, 0.75) !important;
    }

    [data-bs-theme="dark"] .flash-deal-nav-btn,
    body[theme="dark"] .flash-deal-nav-btn {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    [data-bs-theme="dark"] .flash-deal-nav-btn:hover,
    body[theme="dark"] .flash-deal-nav-btn:hover {
        background: var(--primary-dark);
        color: #fff;
        border-color: var(--primary-dark);
    }

    [data-bs-theme="dark"] .view-all-link,
    body[theme="dark"] .view-all-link {
        background: transparent;
        color: #fff;
        border-color: rgba(255, 255, 255, 0.5);
    }

    [data-bs-theme="dark"] .view-all-link:hover,
    body[theme="dark"] .view-all-link:hover {
        background: var(--primary-dark);
        color: #fff;
        border-color: var(--primary-dark);
    }

    /* ===== Mobile Responsive ===== */
    @media (max-width: 991px) {
        .flash-deal-offer-card {
            min-height: auto;
            padding: 16px;
        }

        .flash-deals-slider-wrapper {
            padding: 0 16px;
        }
    }

    @media (max-width: 768px) {
        .flash-deals-card {
            border-radius: 12px;
            padding: 0.75rem;
        }

        .flash-deal-offer-card {
            padding: 16px 14px;
            border-radius: 12px;
        }

        .decoration-circle-1 {
            width: 80px;
            height: 80px;
            top: -25px;
            right: -25px;
        }

        .decoration-circle-2 {
            width: 50px;
            height: 50px;
            bottom: -15px;
            left: -15px;
        }

        .decoration-circle-3 {
            display: none;
        }

        .flash-deal-icon {
            width: 48px;
            height: 48px;
            font-size: 1.35rem;
        }

        .flash-deal-label {
            font-size: 0.95rem;
        }

        .hurry-up-text {
            font-size: 1.1rem;
        }

        .countdown-timer .days,
        .countdown-timer .hours,
        .countdown-timer .minutes,
        .countdown-timer .seconds {
            min-width: 48px;
            padding: 6px 4px;
            border-radius: 8px;
        }

        .countdown-timer .timer-value {
            font-size: 1.25rem;
        }

        .countdown-timer .timer-label {
            font-size: 0.6rem;
        }

        .flash-deal-nav-btn {
            width: 34px;
            height: 34px;
            font-size: 0.85rem;
        }

        .flash-deal-nav-btn.flash-deal-nav-next {
            right: -4px;
        }

        .flash-deal-nav-btn.flash-deal-nav-prev {
            left: -4px;
        }

        .flash-deals-slider-wrapper {
            padding: 0 10px;
        }
    }

    @media (max-width: 576px) {
        .countdown-timer {
            gap: 0.4rem !important;
        }

        .countdown-timer .days,
        .countdown-timer .hours,
        .countdown-timer .minutes,
        .countdown-timer .seconds {
            min-width: 42px;
            padding: 5px 3px;
        }

        .countdown-timer .timer-value {
            font-size: 1.1rem;
        }

        .countdown-timer .timer-label {
            font-size: 0.55rem;
        }

        .view-all-link {
            padding: 8px 18px;
            font-size: 13px;
        }

        .view-all-link i {
            font-size: 14px;
        }

        .flash-deals-slider-wrapper {
            padding: 0 6px;
        }

        .flash-deal-nav-btn {
            width: 30px;
            height: 30px;
            font-size: 0.8rem;
        }

        .flash-deal-nav-btn.flash-deal-nav-next {
            right: -2px;
        }

        .flash-deal-nav-btn.flash-deal-nav-prev {
            left: -2px;
        }
    }

    /* ===== RTL Support ===== */
    [dir="rtl"] .flash-deal-nav-btn.flash-deal-nav-next {
        right: auto;
        left: -6px;
    }

    [dir="rtl"] .flash-deal-nav-btn.flash-deal-nav-prev {
        left: auto;
        right: -6px;
    }

    [dir="rtl"] .flash-deal-nav-btn.flash-deal-nav-next i,
    [dir="rtl"] .flash-deal-nav-btn.flash-deal-nav-prev i {
        transform: scaleX(-1);
    }

    [dir="rtl"] .flash-deal-nav-btn:hover i {
        /* animation removed */
    }

    [dir="rtl"] .view-all-link:hover {
        transform: translateY(-1px);
    }

    [dir="rtl"] .view-all-link i {
        transform: scaleX(-1);
    }

    [dir="rtl"] .view-all-link:hover i {
        transform: scaleX(-1) translateX(-3px);
    }

    @keyframes rotate360Rtl {
        from {
            transform: scaleX(-1) rotate(0deg);
        }

        to {
            transform: scaleX(-1) rotate(360deg);
        }
    }

    @media (min-width: 992px) {
        [dir="rtl"] .flash-deal-nav-btn.flash-deal-nav-next {
            left: -8px;
            right: auto;
        }

        [dir="rtl"] .flash-deal-nav-btn.flash-deal-nav-prev {
            right: -8px;
            left: auto;
        }
    }

    @media (min-width: 1200px) {
        [dir="rtl"] .flash-deal-nav-btn.flash-deal-nav-next {
            left: -10px;
            right: auto;
        }

        [dir="rtl"] .flash-deal-nav-btn.flash-deal-nav-prev {
            right: -10px;
            left: auto;
        }
    }

    @media (min-width: 1400px) {
        [dir="rtl"] .flash-deal-nav-btn.flash-deal-nav-next {
            left: -12px;
            right: auto;
        }

        [dir="rtl"] .flash-deal-nav-btn.flash-deal-nav-prev {
            right: -12px;
            left: auto;
        }
    }