/*BLEND PIXEL STUDIO -- navbar.css v1.2
   Premium sticky header with cart badge, dropdowns, search,
   mobile drawer, and scroll state transitions.
   Uses existing design tokens from custom.css.

   CHANGELOG v1.2 (audit pass 20 — abandon TI shortcode wrapper):
   Simplified the WISHLIST COUNT BADGE block below. Two earlier
   attempts tried to hide TI WooCommerce Wishlist's own
   [ti_wishlist_products_counter] shortcode markup (its icon, its
   "Wishlist" text label) around the one number we actually wanted —
   first by hiding specific child tags, then by hiding all children
   plus zeroing font-size for stray text. Both still left TI's icon
   visible, because it renders via a CSS ::before pseudo-element on
   TI's own <a> tag, which no "hide the children" rule can ever
   reach. header-custom.php v2.6 now sidesteps this permanently: it
   no longer calls TI's shortcode at all for these two badges, and
   instead hand-writes a bare <span class=
   "wishlist_products_counter_number"> directly — confirmed from
   TI's own JS that this is genuinely all that's required for TI's
   already-enqueued script to find and populate it. With none of
   TI's own wrapper markup present, this file only needs to style
   that one span — no more child-hiding or pseudo-element workarounds.

   CHANGELOG v1.1 (audit pass 18 — wishlist count fix):
   Added the WISHLIST COUNT BADGE section near the end. Skins TI
   WooCommerce Wishlist's own [ti_wishlist_products_counter]
   shortcode (used in header-custom.php v2.4) to match the site's
   badge style. This replaces an earlier, broken first attempt at
   this same block that only hid a child <svg>/<img> — TI's real
   icon/label markup isn't wrapped that way, so "Wishlist" text and
   an extra icon were leaking through visibly. Fixed version hides
   every child element except the one confirmed-stable counter
   class, and zeroes the wrapper's font-size to swallow any
   unwrapped text nodes CSS otherwise can't target directly.
   ============================================================ */

/* ============================================================
   KADENCE HEADER SUPPRESSION
   Remove default Kadence header output entirely.
   ============================================================ */
#masthead,
.site-header,
.site-header-wrap,
.kadence-sticky-header,
.kadence-header,
.header-wrap,
.kadence-header-container,
.kadence-header-inner {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ============================================================
   CUSTOM HEADER WRAPPER
   ============================================================ */
.bps-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    height: 68px;
    background: rgba(17, 16, 24, 0.85);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border-bottom: 1px solid transparent;
    transition: height 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Scrolled state -- applied via JS */
.bps-header.is-scrolled {
    height: 56px;
    background: rgba(17, 16, 24, 0.95);
    border-bottom-color: var(--bd, #2a2738);
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.4);
}

/* Light mode */
html[data-theme="light"] .bps-header {
    background: rgba(255, 255, 255, 0.88);
    border-bottom-color: transparent;
}
html[data-theme="light"] .bps-header.is-scrolled {
    background: rgba(255, 255, 255, 0.96);
    border-bottom-color: var(--bd, #ccc6bc);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   HEADER INNER LAYOUT
   ============================================================ */
.bps-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 32px;
    height: 100%;
    gap: 24px;
}

/* ============================================================
   LOGO
   ============================================================ */
.bps-header-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}
.bps-header-logo:hover {
    opacity: 0.85;
}
.bps-header-logo img {
    height: 36px;
    width: auto;
    display: block;
}
.bps-header-logo-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--t1, #f0ede8);
    letter-spacing: -0.02em;
    white-space: nowrap;
}
html[data-theme="light"] .bps-header-logo-text {
    color: var(--t1, #1a1612);
}

/* ============================================================
   PRIMARY NAVIGATION
   ============================================================ */
.bps-header-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    justify-content: center;
}

.bps-nav-link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--t2, #9a8e7e);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
}
.bps-nav-link:hover {
    color: var(--t1, #f0ede8);
    background: rgba(255, 255, 255, 0.04);
}
.bps-nav-link.is-active {
    color: var(--acc, #efb07d);
    font-weight: 600;
}

html[data-theme="light"] .bps-nav-link {
    color: var(--t2, #5c5248);
}
html[data-theme="light"] .bps-nav-link:hover {
    color: var(--t1, #1a1612);
    background: rgba(0, 0, 0, 0.04);
}

/* Dropdown chevron */
.bps-nav-chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.25s ease;
    opacity: 0.5;
}
.bps-nav-link[aria-expanded="true"] .bps-nav-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

/* ============================================================
   DROPDOWN MENUS
   ============================================================ */
.bps-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--s1, #111018);
    border: 1px solid var(--bd, #2a2738);
    border-radius: 12px;
    padding: 8px;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    z-index: 10000;
}
.bps-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

html[data-theme="light"] .bps-dropdown {
    background: #ffffff;
    border-color: var(--bd, #ccc6bc);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

.bps-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--t2, #9a8e7e);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.bps-dropdown-item:hover {
    background: var(--s2, #18161f);
    color: var(--t1, #f0ede8);
}
.bps-dropdown-item.is-active {
    color: var(--acc, #efb07d);
    font-weight: 600;
    background: rgba(239, 176, 125, 0.06);
}

html[data-theme="light"] .bps-dropdown-item {
    color: var(--t2, #5c5248);
}
html[data-theme="light"] .bps-dropdown-item:hover {
    background: var(--s2, #ede9e3);
    color: var(--t1, #1a1612);
}

.bps-dropdown-divider {
    height: 1px;
    background: var(--bd, #2a2738);
    margin: 6px 8px;
}
html[data-theme="light"] .bps-dropdown-divider {
    background: var(--bd, #ccc6bc);
}

.bps-dropdown-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--t3, #5c5248);
    background: var(--s2, #18161f);
    padding: 1px 7px;
    border-radius: 10px;
}
html[data-theme="light"] .bps-dropdown-count {
    color: var(--t3, #9a8e7e);
    background: var(--s2, #ede9e3);
}

/* ============================================================
   UTILITY ICONS (Right side)
   ============================================================ */
.bps-header-utils {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.bps-util-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    box-sizing: border-box;
    border-radius: 10px;
    background: transparent;
    border: none;
    color: var(--t2, #9a8e7e);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    text-decoration: none;
}
.bps-util-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--t1, #f0ede8);
}
html[data-theme="light"] .bps-util-btn {
    color: var(--t2, #5c5248);
}
html[data-theme="light"] .bps-util-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--t1, #1a1612);
}

.bps-util-btn svg {
    width: 20px;
    height: 20px;
}

/* Cart badge */
.bps-cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--acc, #efb07d);
    color: #000;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid var(--s1, #111018);
    transition: transform 0.25s ease;
    pointer-events: none;   /* the badge sits visually on top of the
                               wishlist icon's link (it's a sibling, not
                               a child of it, after the nested-<a> fix)
                               -- without this, clicking exactly on the
                               number does nothing instead of navigating,
                               which read as "the icon sometimes doesn't
                               work". No-op for the cart badge, which is
                               already nested inside its own <a>. */
}
.bps-cart-badge.is-bumping {
    animation: bps-badge-bump 0.4s ease;
}
@keyframes bps-badge-bump {
    0% { transform: scale(1); }
    50% { transform: scale(1.35); }
    100% { transform: scale(1); }
}
html[data-theme="light"] .bps-cart-badge {
    border-color: #ffffff;
}

/* CTA Button */
.bps-header-cta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: var(--acc, #efb07d);
    color: #000;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.25s ease;
    white-space: nowrap;
    margin-left: 8px;
    border: none;
    cursor: pointer;
}
.bps-header-cta:hover {
    background: var(--acc-l, #f5c89a);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(239, 176, 125, 0.3);
    color: #000;
}

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */
.bps-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(11, 10, 14, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
}
.bps-search-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.bps-search-box {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    width: 90%;
    max-width: 600px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease 0.05s, transform 0.25s ease 0.05s, visibility 0.25s;
}
.bps-search-box.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.bps-search-box-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--s1, #111018);
    border: 1px solid var(--bd, #2a2738);
    border-radius: 14px;
    padding: 14px 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
html[data-theme="light"] .bps-search-box-inner {
    background: #ffffff;
    border-color: var(--bd, #ccc6bc);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.bps-search-box-inner svg {
    flex-shrink: 0;
    color: var(--t3, #5c5248);
}

.bps-search-box-inner input[type="search"] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 16px;
    color: var(--t1, #f0ede8);
    min-width: 0;
    -webkit-appearance: none;
}
.bps-search-box-inner input[type="search"]::placeholder {
    color: var(--t3, #5c5248);
}
html[data-theme="light"] .bps-search-box-inner input[type="search"] {
    color: var(--t1, #1a1612);
}

.bps-search-kbd {
    font-size: 11px;
    color: var(--t3, #5c5248);
    background: var(--s2, #18161f);
    border: 1px solid var(--bd, #2a2738);
    border-radius: 5px;
    padding: 2px 8px;
    flex-shrink: 0;
}
html[data-theme="light"] .bps-search-kbd {
    background: var(--s2, #ede9e3);
    border-color: var(--bd, #ccc6bc);
}

/* ============================================================
   MOBILE HAMBURGER + DRAWER
   ============================================================ */
.bps-hamburger {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.bps-hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--t1, #f0ede8);
    border-radius: 2px;
    transition: all 0.25s ease;
}
html[data-theme="light"] .bps-hamburger span {
    background: var(--t1, #1a1612);
}
.bps-hamburger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.bps-hamburger.is-open span:nth-child(2) {
    opacity: 0;
}
.bps-hamburger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer */
.bps-mobile-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(340px, 85vw);
    height: 100vh;
    height: 100dvh;
    background: var(--s1, #111018);
    border-left: 1px solid var(--bd, #2a2738);
    z-index: 10001;
    transition: right 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.bps-mobile-drawer.is-open {
    right: 0;
}

html[data-theme="light"] .bps-mobile-drawer {
    background: #ffffff;
    border-color: var(--bd, #ccc6bc);
}

.bps-mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--bd, #2a2738);
}
.bps-mobile-drawer-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--s2, #18161f);
    border: 1px solid var(--bd, #2a2738);
    border-radius: 8px;
    color: var(--t1, #f0ede8);
    cursor: pointer;
    border: none;
}
.bps-mobile-drawer-nav {
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 2px;
    flex: 1;
}
.bps-mobile-drawer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--t2, #9a8e7e);
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.15s ease;
}
.bps-mobile-drawer-link:hover,
.bps-mobile-drawer-link.is-active {
    background: var(--s2, #18161f);
    color: var(--t1, #f0ede8);
}
.bps-mobile-drawer-link.is-active {
    color: var(--acc, #efb07d);
    font-weight: 600;
}

.bps-mobile-drawer-sub {
    display: flex;
    flex-direction: column;
    padding: 0 12px 8px;
    gap: 2px;
}
.bps-mobile-drawer-sub a {
    padding: 10px 16px 10px 32px;
    font-size: 14px;
    color: var(--t3, #5c5248);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.15s;
}
.bps-mobile-drawer-sub a:hover {
    color: var(--t1, #f0ede8);
    background: var(--s2, #18161f);
}

.bps-mobile-drawer-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--bd, #2a2738);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bps-mobile-drawer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: var(--acc, #efb07d);
    color: #000;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s;
}
.bps-mobile-drawer-cta:hover {
    background: var(--acc-l, #f5c89a);
}

.bps-mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 10, 14, 0.5);
    backdrop-filter: blur(4px);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}
.bps-mobile-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* ============================================================
   DROPDOWN PARENT WRAPPER (for positioning)
   ============================================================ */
.bps-nav-item {
    position: relative;
}

/* ============================================================
   ADMIN BAR OFFSET (logged-in users only)
   WordPress adds a fixed #wpadminbar (32px desktop / 46px mobile)
   above everything for logged-in users. Our header is also
   position:fixed at top:0, so without this it gets covered by the
   admin bar -- this is very likely the "CSS looks broken when I log
   in" report, since it's specifically login-triggered and the site
   owner (testing via wp-admin) would see this on every single visit.
   WordPress adds the "admin-bar" class to <body> automatically
   whenever the toolbar is showing.
   ============================================================ */
body.admin-bar .bps-header {
    top: 32px;
}
body.admin-bar {
    padding-top: 100px !important; /* 68px header + 32px admin bar */
}
body.admin-bar .bps-search-box {
    top: 112px; /* search box's own 80px + 32px admin bar */
}
body.admin-bar .bps-mobile-drawer,
body.admin-bar .bps-mobile-overlay {
    top: 32px;
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
}

/* ============================================================
   BODY PADDING (prevents content hiding under fixed header)
   ============================================================ */
body {
    padding-top: 68px !important;
}

/* ============================================================
   WISHLIST COUNT BADGE (v1.3)
   header-custom.php v2.6 hand-writes a bare
   <span class="wishlist_products_counter_number"></span> directly
   -- no TI shortcode, no TI wrapper markup, no TI icon or text
   label present in our DOM at all. TI's own already-enqueued
   public.js finds that element purely by class name (confirmed
   from TI's own JS -- it's a page-wide existence check, not scoped
   to TI's own wrapper) and fills it in via AJAX after page load,
   keeping it live after add/remove. Cache-safe by design: nothing
   here is a PHP-computed number baked into LiteSpeed's page cache.

   v1.3: the desktop header icon now also carries the existing
   .bps-cart-badge class directly (see header-custom.php) instead
   of a separate near-duplicate rule -- guarantees pixel-identical
   styling and positioning to the cart badge with one shared rule,
   rather than two rules that could quietly drift apart over time.
   No CSS needed here for that case at all.
   ============================================================ */

/* Mobile drawer variant -- small inline pill rather than an
   absolute-positioned dot, since the drawer link is a full-width row. */
.bps-mobile-drawer-link.bps-wishlist-util {
    position: relative;
}
.bps-mobile-drawer-link .wishlist_products_counter_number {
    display: none;   /* toggled to '' by the observer script in
                         header-custom.php once a real count > 0
                         is written into this element by TI's JS */
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: auto;
    border-radius: 9px;
    background: var(--acc, #efb07d);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    pointer-events: none;   /* same reasoning as .bps-cart-badge above --
                               this pill isn't itself a link, so a tap
                               landing exactly on it should still fall
                               through to the row's real <a>. */
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .bps-header-inner {
        padding: 0 20px;
        gap: 16px;
    }
    .bps-header-nav {
        gap: 2px;
    }
    .bps-nav-link {
        padding: 8px 12px;
        font-size: 13px;
    }
    .bps-header-cta span {
        display: none;
    }
    .bps-header-cta {
        padding: 9px 14px;
        margin-left: 4px;
    }
}

@media (max-width: 768px) {
    .bps-header {
        height: 56px;
    }
    body {
        padding-top: 56px !important;
    }
    /* WordPress's admin bar is 46px tall at this width, not 32px */
    body.admin-bar .bps-header {
        top: 46px;
    }
    body.admin-bar {
        padding-top: 102px !important; /* 56px header + 46px admin bar */
    }
    body.admin-bar .bps-mobile-drawer,
    body.admin-bar .bps-mobile-overlay {
        top: 46px;
        height: calc(100vh - 46px);
        height: calc(100dvh - 46px);
    }
    .bps-header-nav {
        display: none;
    }
    .bps-header-cta {
        display: none;
    }
    .bps-hamburger {
        display: flex;
    }
    .bps-header-inner {
        padding: 0 16px;
    }
    .bps-util-btn[data-action="search"] {
        display: none;
    }
}

@media (max-width: 480px) {
    .bps-header-logo img {
        height: 30px;
    }
    .bps-header-logo-text {
        font-size: 15px;
    }
    .bps-util-btn {
        width: 36px;
        height: 36px;
    }
}

/* Search icon visibility boost */
.bps-util-btn[data-action="search"] svg {
    width: 26px;
    height: 26px;
    stroke-width: 2.1px;
}
.bps-util-btn[data-action="search"]:hover {
    color: var(--acc, #efb07d);
}