/* ========================================
   Global Reset
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* Offset in-page scroll targets so the fixed navbar doesn't cover them */
#shop-categories,
.shop-products-section[id^="category-"] {
    scroll-margin-top: 100px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: #333;
    background: #f9f9f9;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ========================================
   WordPress Admin Bar Fix
   ======================================== */

/* Single source of truth for "how tall the admin bar is", used to
   offset the FIXED navbar on desktop/tablet, where the real WP admin
   bar is also `position: fixed` at a constant 32px - so a constant
   offset is correct there and needs no JS. */
.admin-bar {
    --wpab-offset: 32px;
}

/* Navbar is pinned dark at top: 0 on every page (including the home
   page hero, which used to have its own transparent/scroll-triggered
   behavior) - just push it below the admin bar. */
/* !important here is required: it's the only way this beats the
   .main-navbar { top: var(--mytheme-shipping-bar-height) !important; }
   rule added later (inline, from functions.php) for the free-shipping
   bar. Without !important here too, that later !important rule always
   wins regardless of this selector's higher specificity - which is
   exactly what let the navbar sit 32px too high whenever the WP admin
   bar was showing, while .site-main (pushed down by WordPress's own
   `html { margin-top: 32px !important; }`) did not - producing a gap
   between the navbar and the hero below it. Folding the shipping bar
   height into this calc() keeps the navbar correctly below BOTH fixed
   bars instead of just the admin bar.

   This rule is desktop/tablet only now - see the 782px override
   below for the mobile behaviour, which works completely differently
   (sticky, not fixed) because the mobile admin bar itself behaves
   completely differently (scrolls away, isn't really "fixed"). */
.admin-bar .main-navbar {
    top: calc(var(--wpab-offset) + var(--mytheme-shipping-bar-height, 0px)) !important;
}

/* Below 782px, WordPress makes its own admin bar `position: absolute`
   instead of `fixed` (a WP core mobile-compat quirk) - so it isn't
   really "pinned" there at all, it just sits at the very top of the
   page and scrolls away like normal content. WordPress accounts for
   this by adding a 46px `margin-top` to <html> so the rest of the
   page starts right below it.

   Trying to keep the navbar/promo bar FIXED through that (like on
   desktop) is what caused the gap: a fixed element needs a `top`
   value that matches how much of the (scrolling-away) admin bar is
   still visible at any given scroll position, which changes
   continuously - hence the old JS that recalculated it every frame.

   `position: sticky` does this natively with no JS at all: left in
   normal document flow, these bars simply start right below that
   46px margin (exactly where the admin bar visually ends) and scroll
   up with the page like ordinary content - then lock to `top` once
   they reach it, which happens at exactly the moment the admin bar
   has scrolled fully out of view. That's the same "scroll with the
   page, then stick" behavior every sticky mobile nav uses; it just
   also happens to be the one behavior that can never show a gap or
   an early cutoff, because it's reading the real element positions
   the browser is already tracking instead of a re-derived estimate.

   `top: var(--mytheme-shipping-bar-height, 0px)` (rather than 0) is
   so the navbar sticks right below the promo bar instead of on top
   of it - the same stacking the desktop/non-admin rules use
   elsewhere in this file, just expressed as a sticky offset instead
   of a fixed one. */
@media (max-width: 782px) {
    .admin-bar .main-navbar {
        position: sticky;
        top: var(--mytheme-shipping-bar-height, 0px) !important;
    }

    /* Unlike `position: fixed`, `position: sticky` elements stay in
       normal document flow and reserve their OWN space there just by
       existing - that's the whole point of switching to sticky above.
       But two other rules exist specifically to manually reserve that
       same space for when these bars ARE fixed (which is still true
       everywhere else - desktop, tablet, and non-admin mobile):
       body's padding-top (set by the inline script in
       mytheme_render_free_shipping_bar(), functions.php) makes room
       for the fixed promo bar, and .site-main's padding-top further
       down this file makes room for the fixed navbar. Left in place
       for this one sticky case, both of those would double up with
       the space the sticky elements already reserve themselves -
       showing up as a gap above the promo bar and another gap below
       the navbar, right where a normal fixed-nav page has none. Zero
       both out here since sticky is already handling it. */
    body.admin-bar {
        padding-top: 0 !important;
    }

    .admin-bar .site-main {
        padding-top: 0 !important;
    }
}

/* ========================================
   Main Navigation Bar - Fixed at Top
   ======================================== */

.main-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 10px 0;
    background: rgba(0, 0, 0, 0.85);
    /* No backdrop-filter here on purpose: applying blur to this bar
       makes it the "containing block" for the fixed .nav-menu sidebar
       inside it, which breaks the sidebar's OWN blur/transparency in
       every state except the one state (top-of-hero) where this bar's
       blur happens to be off. Keeping this bar blur-free keeps the
       sidebar's frosted look identical everywhere. */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    /* No transition here on purpose: this navbar's "top" offset gets
       adjusted by CSS (admin bar, --mytheme-shipping-bar-height) and
       is read fresh on every load - a transition on that would make
       it visibly slide into place each time instead of just sitting
       fixed where it belongs from the first frame. Nothing else on
       this element currently changes state, so there's nothing worth
       animating. */
}

.nav-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* ========================================
   Logo
   ======================================== */

.nav-logo {
    flex-shrink: 0;
}

.nav-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
    /* Widen the logo (image or text) without touching its height -
       scales horizontally only, symmetric from the center so it
       stays visually centered wherever .nav-logo is placed */
    transform: scaleX(1.3);
}

.nav-logo .logo-text {
    font-size: 36px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 1px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.nav-logo .logo-text span {
    color: #8B1A2B;
}

.nav-logo img {
    max-height: 62px;
    width: auto;
}

/* ========================================
   Navigation Menu - Hover Effect FIXED
   ======================================== */

.nav-menu {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 10px;
    align-items: center;
    padding: 0;
    margin: 0;
    background: transparent;
    backdrop-filter: none;
    border: none;
    border-radius: 0;
}

.nav-links li a {
    color: #ffffff;
    text-decoration: none;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 2px solid rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: inline-block;
}

/* Hover effect - FIXED */
.nav-links li a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
}

.nav-links li a.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    border-color: #ffffff;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.15);
}

/* Remove underline effect */
.nav-links li a::after {
    display: none;
}

/* ========================================
   Sidebar-only extras: category buttons + Track Order
   (hidden on desktop, shown only inside the mobile .nav-menu sidebar
   further down in the max-width: 992px media query)
   ======================================== */

.nav-category-btn,
.nav-sidebar-extra-links {
    display: none;
}

/* ========================================
   Nav Icons (Search & Cart) 
   ======================================== */

.nav-icons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.nav-icon {
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px;
    border-radius: 50%;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 2px solid rgba(255, 255, 255, 0.4);
    width: 46px;
    height: 46px;
    cursor: pointer;
}

.nav-icon:hover,
.nav-icon:active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.9);
}

.nav-icon svg {
    width: 20px;
    height: 20px;
}

.cart-icon {
    position: relative;
}

.cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #8B1A2B;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    /* Solid ring matching the navbar's own dark background - this is what
       actually stops the badge from reading as "cutting into" the circle
       outline behind it. A translucent white border let the grey ring
       show straight through underneath the badge, which is what looked
       like a broken/clipped icon. */
    box-shadow: 0 2px 10px rgba(139, 26, 43, 0.5), 0 0 0 3px #141414;
    border: none;
    transition: transform 0.2s ease;
}

.cart-count.mytheme-cart-count-pulse {
    transform: scale(1.4);
}

/* ========================================
   Mini-Cart Hover Preview
   ======================================== */

.nav-cart-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/*
 * .mini-cart-preview is the HOVERABLE HIT-AREA, not the visible card.
 * It sits flush against the cart icon (top: 100%, no gap) and adds its
 * own transparent padding-top as a "bridge" over what used to be a bare
 * 16px gap. Because that bridge is still part of this same element, the
 * mouse never leaves a hoverable box while travelling from the icon down
 * into the card - so the preview no longer closes itself before you can
 * reach the View Cart / Checkout buttons, and moving the mouse anywhere
 * inside the card (including those buttons) keeps it open.
 * The actual white, shadowed card is the nested .mini-cart-preview-card.
 */
.mini-cart-preview {
    position: absolute;
    top: 100%;
    right: -10px;
    width: 320px;
    padding-top: 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.97);
    transform-origin: top right;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.25s;
    z-index: 1002;
    pointer-events: none;
}

/*
 * Gated to real desktop-sized layouts with real mouse hover (matches the
 * same 992px breakpoint the sidebar/hamburger and cart.js's
 * isMobileCartView() already use to decide "mobile" vs "desktop"). Two
 * separate reasons this can't just be a hover/pointer check on its own:
 *  1) Touchscreens report "hover: none" and don't get this rule at all -
 *     tapping an element can leave it "stuck" in :hover on many mobile
 *     browsers (there's no real hover state to leave).
 *  2) Even on a real mouse, .mini-cart-preview (incl. the close (X)
 *     button) is still a DOM descendant of .nav-cart-wrapper even though
 *     it now renders elsewhere on screen via position: fixed - :hover
 *     cascades to ancestors by DOM relationship, not visual position, so
 *     with the cursor sitting on the (visually relocated) close button
 *     .nav-cart-wrapper:hover is still true, which alone would keep the
 *     preview visible no matter what the .is-open class says.
 * Below 992px, visibility is controlled ONLY by .is-open - i.e. only by
 * JS, driven only by taps/clicks - which is exactly what the close (X)
 * button, an outside tap, and Escape already do.
 */
@media (min-width: 993px) and (hover: hover) and (pointer: fine) {
    .nav-cart-wrapper:hover .mini-cart-preview {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }
}

.nav-cart-wrapper:focus-within .mini-cart-preview,
.mini-cart-preview.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/*
 * Beats every rule above (incl. the desktop :hover rule and the
 * :focus-within rule), even though it shares the same specificity, only
 * because !important forces it to win regardless of the mouse still
 * resting over the wrapper or the close (X) button still holding focus.
 *
 * Added by cart.js the moment the preview is dismissed (X button,
 * outside click/tap, Escape, or the auto-close timer) so the card
 * actually disappears instead of being held open by CSS :hover -
 * without this, clicking the X while the mouse is still over the cart
 * icon/card did nothing visible, since the JS only ever toggled the
 * .is-open class and never touched :hover.
 *
 * Removed again the moment the mouse genuinely leaves .nav-cart-wrapper
 * (see the mouseleave handler in cart.js), so hovering the cart icon
 * again afterwards still opens the preview normally.
 */
.nav-cart-wrapper.mini-cart-dismissed .mini-cart-preview {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(10px) scale(0.97) !important;
}

.mini-cart-preview-card {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2), 0 4px 14px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/*
 * Close button - only really needed for the case where the preview was
 * opened programmatically (right after an add-to-cart), since that's the
 * one time it can be open without the mouse resting over the cart icon,
 * e.g. on touch devices with no hover state at all.
 */
.mini-cart-preview-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #f4f4f4;
    color: #1a1a1a;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
    transition: background 0.2s ease, color 0.2s ease;
}

.mini-cart-preview-close:hover {
    background: var(--shop-maroon, #8B1A2B);
    color: #ffffff;
}

.mini-cart-arrow {
    position: absolute;
    top: -7px;
    right: 22px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    transform: rotate(45deg);
    box-shadow: -3px -3px 8px rgba(0, 0, 0, 0.03);
}

.mini-cart-preview-inner {
    position: relative;
    padding: 18px;
    max-height: 420px;
    overflow-y: auto;
}

/* --- Empty state --- */

.mini-cart-empty {
    text-align: center;
    padding: 26px 10px 14px;
}

.mini-cart-empty svg {
    color: #d8d8d8;
    margin-bottom: 12px;
}

.mini-cart-empty p {
    font-size: 14px;
    font-weight: 700;
    color: var(--shop-ink, #1a1a1a);
    margin-bottom: 4px;
}

.mini-cart-empty span {
    font-size: 12.5px;
    color: #999999;
}

/* --- Items --- */

.mini-cart-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mini-cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    animation: miniCartItemIn 0.35s ease both;
}

@keyframes miniCartItemIn {
    from {
        opacity: 0;
        transform: translateX(8px);
    }

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

.mini-cart-item-thumb {
    flex-shrink: 0;
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    overflow: hidden;
}

.mini-cart-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.mini-cart-item:hover .mini-cart-item-thumb img {
    transform: scale(1.08);
}

.mini-cart-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mini-cart-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--shop-ink, #1a1a1a);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.mini-cart-item-name:hover {
    color: var(--shop-maroon, #8B1A2B);
}

.mini-cart-item-meta {
    font-size: 12px;
    color: #888888;
    font-weight: 500;
}

.mini-cart-item-options {
    display: block;
    font-size: 12px;
    color: #888888;
    font-weight: 500;
}

.mini-cart-more {
    font-size: 12px;
    color: var(--shop-maroon, #8B1A2B);
    font-weight: 600;
    text-align: center;
    padding-top: 4px;
}

/* --- Footer / totals --- */

.mini-cart-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}

.mini-cart-subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    font-size: 13px;
    color: #666666;
}

.mini-cart-subtotal strong {
    font-size: 15px;
    color: var(--shop-maroon, #8B1A2B);
    font-weight: 700;
}

.mini-cart-actions {
    display: flex;
    gap: 10px;
}

.mini-cart-btn {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
    border-radius: 50px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.25s ease;
}

.mini-cart-btn-outline {
    background: #ffffff;
    color: var(--shop-ink, #1a1a1a) !important;
    border: 2px solid var(--shop-ink, #1a1a1a);
}

.mini-cart-btn-outline:hover {
    background: var(--shop-ink, #1a1a1a);
    color: #ffffff !important;
}

.mini-cart-btn-solid {
    background: var(--shop-maroon, #8B1A2B);
    color: #ffffff !important;
    border: 2px solid var(--shop-maroon, #8B1A2B);
}

.mini-cart-btn-solid:hover {
    background: var(--shop-maroon-dark, #6B0F1A);
    border-color: var(--shop-maroon-dark, #6B0F1A);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 26, 43, 0.35);
}

/*
 * Mobile (<= 992px, the same breakpoint the sidebar/hamburger menu takes
 * over at). The preview is now opened by a TAP here instead of hover -
 * from either the always-visible navbar cart icon or the sidebar's own
 * copy of it in its top bar (see cart.js) - and the sidebar sits at
 * z-index 9999, so the preview switches to fixed viewport positioning
 * (JS sets its exact "top" to sit just under the navbar) and renders
 * above the sidebar. left/right/max-width/margin-left together keep a
 * real margin from the right edge of the screen and cap the card's width
 * on wider mobile/tablet viewports, replacing the old
 * "width: 88vw; right: -60px;" which could push part of the card past
 * the right edge of the viewport.
 */
@media (max-width: 992px) {
    .mini-cart-preview {
        position: fixed;
        top: 90px;
        right: 16px;
        left: 16px;
        width: auto;
        max-width: 360px;
        margin-left: auto;
        padding-top: 0;
        z-index: 10000;
    }

    .mini-cart-arrow {
        display: none;
    }
}

@media (max-width: 576px) {
    .mini-cart-preview {
        right: 12px;
        left: 12px;
    }
}

/* ========================================
   Mobile Sidebar Top Bar - icons + close (hidden on desktop)
   ======================================== */

.mobile-menu-topbar {
    display: none;
}

.menu-close {
    display: none;
}

/* ========================================
   Mobile Toggle Button
   ======================================== */

.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 2px solid rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.mobile-toggle span {
    display: block;
    width: 24px;
    height: 2.5px;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

.mobile-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

.mobile-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

/* ========================================
   Responsive Navigation
   ======================================== */

/* Tablets */
@media (max-width: 992px) {

    /* No .admin-bar .main-navbar override needed here anymore - the
       single rule near the top of this file (using --wpab-offset)
       already covers this breakpoint too. A duplicate copy used to
       live here and, being later in the file, always won over the
       mobile-specific value regardless of actual screen width - that
       was the real source of the "gap" bug on mobile. */

    .nav-menu {
        position: fixed;
        /* Start below the fixed free-shipping bar instead of the very
           top of the viewport, so the bar stays visible/uncovered
           while the sidebar is open. */
        top: var(--mytheme-shipping-bar-height, 0px);
        left: -100%;
        width: 75%;
        max-width: 350px;
        height: calc(100vh - var(--mytheme-shipping-bar-height, 0px));
        /* Solid white sidebar (previously a dark frosted-glass look) -
           opaque, so no backdrop-filter blur is needed here anymore;
           it only did anything visually when the background itself
           was semi-transparent. */
        background: #ffffff;
        /* Top padding matches the navbar's own 10px top padding */
        padding: 10px 24px 30px;
        transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        box-shadow: 10px 0 40px rgba(0, 0, 0, 0.18);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        border-radius: 0;
        border: none;
        z-index: 9999;
    }

    /* Fix for admin bar on mobile menu - navbar's 10px top padding + admin bar height */
    .admin-bar .nav-menu {
        padding-top: 42px;
    }

    .nav-menu.open {
        left: 0;
    }

    /* Top row inside the sidebar: just the close button, on the left
       (search & cart were removed from the sidebar entirely) */
    .mobile-menu-topbar {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        margin-bottom: 30px;
        flex-shrink: 0;
    }

    /* Close button reuses the same circular look as the nav-icon buttons,
       and matches its size exactly (40px, same as the search/cart icons).
       Colors flipped to dark-on-white to match the sidebar. */
    .menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: transparent;
        border: 2px solid rgba(0, 0, 0, 0.15);
        color: #1a1a1a;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .menu-close:hover,
    .menu-close:active {
        background: rgba(0, 0, 0, 0.06);
        border-color: var(--shop-maroon, #8B1A2B);
        transform: rotate(90deg);
    }

    .nav-links {
        flex-direction: column;
        width: 100%;
        gap: 10px;
        background: transparent;
        backdrop-filter: none;
        padding: 0;
        border-radius: 0;
        border: none;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links li a {
        display: block;
        padding: 14px 24px;
        font-size: 18px;
        font-weight: 600;
        color: #1a1a1a;
        text-align: left;
        border-radius: 12px;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 2px solid rgba(0, 0, 0, 0.1);
        text-shadow: none;
    }

    .nav-links li a:hover,
    .nav-links li a:active,
    .nav-links li a.active {
        color: var(--shop-maroon, #8B1A2B) !important;
        background: rgba(139, 26, 43, 0.08) !important;
        border-color: var(--shop-maroon, #8B1A2B) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    }

    /* ========================================
       Sidebar-only extras: category buttons + Track Order
       (only ever shown inside the mobile .nav-menu sidebar, never on
       the desktop navbar - see the display:none default further up)
       ======================================== */

    /* Each category sits inline in the same list as Home/Shop/Sale...
       (right after Shop), styled a touch lighter/smaller so the
       hierarchy between main links and individual categories stays
       clear - no separate heading or section divider anymore. */
    .nav-category-btn {
        display: block;
        width: 100%;
        padding: 11px 20px;
        font-size: 15px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.75);
        text-decoration: none;
        text-align: left;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.035);
        border: 1.5px solid rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }

    .nav-category-btn:hover,
    .nav-category-btn:active,
    .nav-category-btn.active {
        color: var(--shop-maroon, #8B1A2B);
        background: rgba(139, 26, 43, 0.08);
        border-color: var(--shop-maroon, #8B1A2B);
        transform: translateY(-2px);
    }

    .nav-sidebar-extra-links {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    .nav-track-order-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 13px 20px;
        font-size: 16px;
        font-weight: 700;
        color: #ffffff;
        text-decoration: none;
        border-radius: 12px;
        /* Solid, fully-opaque maroon (not a low-alpha overlay) so it
           reads as a proper branded button - stays exactly as it was,
           it already had plenty of contrast against a dark sidebar
           AND now against a white one. */
        background: #8B1A2B;
        border: 2px solid #A8283C;
        box-shadow: 0 4px 14px rgba(139, 26, 43, 0.35);
        transition: all 0.3s ease;
    }

    .nav-track-order-btn svg {
        flex-shrink: 0;
    }

    .nav-track-order-btn:hover,
    .nav-track-order-btn:active,
    .nav-track-order-btn.active {
        background: #A8283C;
        border-color: var(--shop-maroon, #8B1A2B);
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(139, 26, 43, 0.45);
    }


    /* Re-layout the navbar into 3 equal columns so the hamburger sits
       on the far left, the logo is perfectly centered, and the
       search/cart icons stay on the right - regardless of how wide
       each side's content is. */
    .nav-container {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }

    .mobile-toggle {
        display: flex;
        justify-self: start;
        order: 0;
    }

    .nav-logo {
        justify-self: center;
        text-align: center;
    }

    .nav-logo .logo-text {
        font-size: 32px;
    }

    .nav-logo img {
        max-height: 54px;
    }

    .nav-icons {
        gap: 8px;
        justify-self: end;
    }

    .nav-icon {
        width: 40px;
        height: 40px;
        padding: 8px;
        border-width: 2px;
    }

    .nav-icon svg {
        width: 18px;
        height: 18px;
    }

    /* Close (X) icon matches the search/cart icon size in the sidebar */
    .menu-close svg {
        width: 18px;
        height: 18px;
    }

    .cart-count {
        width: 18px;
        height: 18px;
        font-size: 9px;
        top: -5px;
        right: -5px;
    }
}

/* Mobile */
@media (max-width: 782px) {
    .admin-bar .nav-menu {
        padding-top: 56px;
    }
}

@media (max-width: 576px) {
    .nav-container {
        padding: 0 15px;
    }

    .nav-logo .logo-text {
        font-size: 28px;
    }

    .nav-logo img {
        max-height: 48px;
    }

    .nav-menu {
        width: 75%;
        max-width: 75%;
        /* Same top margin as the navbar (10px) instead of a large gap */
        padding: 10px 20px 30px;
    }

    .nav-links li a {
        font-size: 16px;
        padding: 12px 20px;
    }

    .nav-icons {
        gap: 6px;
    }

    .nav-icon {
        width: 36px;
        height: 36px;
        padding: 6px;
        border-width: 2px;
    }

    .nav-icon svg {
        width: 16px;
        height: 16px;
    }

    /* Close (X) button matches the search/cart icon button size in the sidebar */
    .menu-close {
        width: 36px;
        height: 36px;
    }

    .menu-close svg {
        width: 16px;
        height: 16px;
    }

    .cart-count {
        width: 16px;
        height: 16px;
        font-size: 9px;
        top: -4px;
        right: -4px;
    }

    .mobile-toggle {
        padding: 8px 10px;
    }

    .mobile-toggle span {
        width: 20px;
        height: 2px;
    }
}

/* Small mobile */
@media (max-width: 400px) {
    .nav-logo .logo-text {
        font-size: 24px;
    }

    .nav-logo img {
        max-height: 42px;
    }

    .nav-container {
        padding: 0 10px;
    }

    .nav-links li a {
        font-size: 14px;
        padding: 10px 16px;
    }

    .nav-icons {
        gap: 4px;
    }

    .nav-icon {
        width: 32px;
        height: 32px;
        padding: 4px;
        border-width: 2px;
    }

    .nav-icon svg {
        width: 14px;
        height: 14px;
    }

    /* Close (X) button matches the search/cart icon button size in the sidebar */
    .menu-close {
        width: 32px;
        height: 32px;
    }

    .menu-close svg {
        width: 14px;
        height: 14px;
    }

    .cart-count {
        width: 14px;
        height: 14px;
        font-size: 8px;
        top: -3px;
        right: -3px;
    }

    .mobile-toggle {
        padding: 6px 8px;
    }

    .mobile-toggle span {
        width: 18px;
        height: 2px;
    }
}

/* ========================================
   Header Override - Remove old header styles
   ======================================== */

.site-header {
    display: none;
}

/* ========================================
   Main Content
   ======================================== */

.site-main {
    /* Clears the fixed .main-navbar so page content - including the
       home page hero - starts exactly where the navbar ends instead
       of being covered by it. --mytheme-navbar-height is measured
       live off the real navbar in navbar.js (so it always matches,
       even if the navbar's padding/logo/breakpoint changes); the
       64px fallback only applies for the brief moment before that
       script runs. Page-specific "hero" sections (cart, checkout,
       about/contact/sale, etc.) only add their own decorative
       spacing on top of this - see their respective CSS files. */
    padding-top: var(--mytheme-navbar-height, 64px);
    min-height: 60vh;
}

/* ========================================
   Utility Classes
   ======================================== */

.text-center {
    text-align: center;
}

.text-maroon {
    color: #8B1A2B;
}

.mt-20 {
    margin-top: 20px;
}

.mb-20 {
    margin-bottom: 20px;
}

/* ========================================
   Footer (New)
   ======================================== */

.site-footer {
    background: #0a0a0a;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-top: 0;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    gap: 40px;
    padding: 60px 0 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.footer-brand-name {
    color: #ffffff;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 1px;
    margin: 0;
}

.footer-logo img {
    max-height: 45px;
    width: auto;
}

.footer-title {
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.5px;
}

.footer-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    max-width: 320px;
}

/* Social icons */
.footer-social {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.25);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-social a[aria-label="Facebook"] {
    color: #1877f2;
}

.footer-social a[aria-label="Instagram"] {
    color: #e4405f;
}

.footer-social a[aria-label="Twitter"] {
    color: #1da1f2;
}

.footer-social a[aria-label="YouTube"] {
    color: #ff0000;
}

.footer-social a[aria-label="Pinterest"] {
    color: #bd081c;
}

.footer-social a:hover {
    background: transparent;
    border-color: currentColor;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px color-mix(in srgb, currentColor 40%, transparent);
}

/* Link lists */
.footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-list a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-list a:hover {
    color: #ffffff;
    transform: translateX(4px);
}

/* Newsletter */
.footer-newsletter {
    display: flex;
    gap: 0;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.footer-newsletter:focus-within {
    border-color: #8B1A2B;
    box-shadow: 0 0 0 3px rgba(139, 26, 43, 0.15);
}

.footer-newsletter-input {
    flex: 1;
    min-width: 0;
    padding: 12px 18px;
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 14px;
    outline: none;
}

.footer-newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.footer-newsletter-btn {
    padding: 12px 18px;
    background: #8B1A2B;
    border: none;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.3s ease;
}

.footer-newsletter-btn:hover {
    background: #6B0F1A;
}

/* Contact links under newsletter */
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-contact a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-contact a:hover {
    color: #ffffff;
}

/* Bottom bar */
.footer-bottom {
    padding: 20px 0;
    text-align: center;
}

.footer-copyright {
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
    margin: 0;
}

/* ========================================
   Footer Responsive
   ======================================== */

@media (max-width: 992px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        padding: 45px 0 30px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-top>.footer-col:last-child {
        grid-column: 1 / -1;
    }

    .footer-text {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 28px 20px;
        padding: 35px 0 25px;
    }

    .footer-title {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .footer-top {
        gap: 22px;
        padding: 28px 0 20px;
    }

    .footer-brand-name {
        font-size: 20px;
    }

    .footer-text {
        font-size: 13px;
    }

    .footer-list a {
        font-size: 13px;
    }

    .footer-newsletter-input {
        font-size: 13px;
        padding: 10px 14px;
    }

    .footer-newsletter-btn {
        padding: 10px 14px;
    }

    .footer-copyright {
        font-size: 12px;
    }
}

/* ========================================
   Floating WhatsApp Button
   ======================================== */

.whatsapp-wrapper {
    position: fixed;
    bottom: 60px;
    right: 28px;
    z-index: 1001;
    /*
     * No flex/column layout here on purpose: the preview is positioned
     * absolutely (see .whatsapp-preview below) so this wrapper's own box
     * is sized to its only in-flow child, the round button itself. That's
     * what keeps the hoverable area limited to the button - previously
     * the wrapper reserved space for the (invisible) preview above and to
     * the left of the button too, so hovering near the icon's top or left
     * edge triggered the preview by mistake even though nothing was
     * visibly there yet.
     */
    display: block;
}

.whatsapp-float {
    position: relative;
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(37, 211, 102, 0.6);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: whatsapp-pulse 2.5s infinite;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    animation: none;
}

/* ========================================
   WhatsApp Hover Preview
   ======================================== */

/*
 * .whatsapp-preview is now just the hoverable hit-area: absolutely
 * positioned, sized to the card's width, sitting directly above the
 * button (bottom: 100%, no gap) with its own transparent padding-bottom
 * bridging what used to be a bare 16px gap. Because it's out of normal
 * flow, it no longer inflates .whatsapp-wrapper's own box while closed -
 * that inflated box was the actual cause of the preview opening just
 * from hovering near the icon's top/left. The bridge also means moving
 * the mouse from the button up into the card keeps it open the whole way.
 * The visible white card is the nested .whatsapp-preview-card.
 */
.whatsapp-preview {
    position: absolute;
    bottom: 100%;
    right: 0;
    width: 260px;
    padding-bottom: 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.96);
    transform-origin: bottom right;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.25s;
    pointer-events: none;
}

.whatsapp-wrapper:hover .whatsapp-preview,
.whatsapp-wrapper:focus-within .whatsapp-preview,
.whatsapp-wrapper.is-open .whatsapp-preview {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Explicit close via the cross icon overrides hover/focus/is-open until
   the pointer leaves the button, so the card doesn't reopen instantly. */
.whatsapp-wrapper.whatsapp-preview-force-closed .whatsapp-preview {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(12px) scale(0.96) !important;
}

.whatsapp-preview-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f2f2;
    border: none;
    border-radius: 50%;
    color: #666666;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease;
    z-index: 1;
}

.whatsapp-preview-close:hover {
    background: #e6e6e6;
    color: #1a1a1a;
}

.whatsapp-preview-name {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    cursor: pointer;
}

.whatsapp-preview-card {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 16px 18px 18px;
}

.whatsapp-preview-arrow {
    position: absolute;
    bottom: -7px;
    right: 24px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    transform: rotate(45deg);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.06);
}

.whatsapp-preview-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.whatsapp-preview-logo {
    position: relative;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--shop-maroon, #8B1A2B), var(--shop-maroon-dark, #6B0F1A));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(139, 26, 43, 0.3);
}

.whatsapp-preview-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.whatsapp-preview-initial {
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.whatsapp-preview-online {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: #25D366;
    border: 2px solid #ffffff;
    border-radius: 50%;
}

.whatsapp-preview-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.whatsapp-preview-info strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--shop-ink, #1a1a1a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.whatsapp-preview-info em {
    font-size: 11.5px;
    font-style: normal;
    color: #25D366;
    font-weight: 600;
}

.whatsapp-preview-text {
    margin-top: 12px;
    padding: 10px 12px;
    background: #f4f9f4;
    border-radius: 12px;
    border-top-left-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: #444444;
}


.whatsapp-float svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

@keyframes whatsapp-pulse {
    0% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(37, 211, 102, 0.55);
    }

    70% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 14px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Responsive sizing so it stays fully visible on smaller screens */
@media (max-width: 768px) {
    .whatsapp-wrapper {
        bottom: 48px;
        right: 20px;
    }

    .whatsapp-float {
        width: 52px;
        height: 52px;
    }

    .whatsapp-float svg {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 400px) {
    .whatsapp-wrapper {
        bottom: 40px;
        right: 16px;
    }

    .whatsapp-float {
        width: 48px;
        height: 48px;
    }

    .whatsapp-float svg {
        width: 26px;
        height: 26px;
    }
}