/* ==========================================================================
   GPD Store — Phase 2: global dark shell + Flow chrome (header / footer)
   --------------------------------------------------------------------------
   Loads AFTER gpd-tokens.css and style.css (handle: gpd-theme), so it wins
   the cascade over the inherited droix light layer. Page-specific sheets
   (category.css, single-product.css, cart.css, checkout.css) still load
   AFTER this file — their interiors stay light-designed until later phases;
   the "transitional light scope" section below keeps them readable on the
   new dark canvas.

   Design sources:
     design-implementations/gpdstore-new-design-handoff/project/flow.css
     design-implementations/gpdstore-new-design-handoff/project/theme.css
   Tokens: assets/css/gpd-tokens.css (always prefer var(--…) over literals).
   ========================================================================== */

/* ==========================================================================
   1. GLOBAL DARK SHELL
   ========================================================================== */

/* Mobile: contain any stray horizontal overflow so the page can't scroll
   sideways and reveal an empty gutter. `clip` (not `hidden`) doesn't create a
   scroll container, so position:sticky elements (e.g. the PDP sticky tab bar)
   keep working. html already clips; body did not, which let ~35–42px of slack
   from off-canvas/decorative elements leak into a horizontal scroll. */
@media (max-width: 768px) {
    html, body { overflow-x: clip; }
}

html {
    background: var(--bg-2);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .15) var(--bg-2);
}

/* body.theme-shoptimizer (not bare body) so we outrank Kirki's inline
   body-level font/color rules printed after this stylesheet. */
body.theme-shoptimizer {
    background: var(--bg-2);
    color: var(--fg-1);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

body.theme-shoptimizer button,
body.theme-shoptimizer input,
body.theme-shoptimizer select,
body.theme-shoptimizer textarea {
    font-family: var(--font-sans);
}

/* category.css ships `body.archive * { font-family:"Ubuntu" }` and loads after
   this file — the extra .theme-shoptimizer class outranks it. */
body.theme-shoptimizer.archive * {
    font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--fg-0);
}

::selection {
    background: var(--lime-500);
    color: #0A0D0F;
}

:focus-visible {
    outline: 2px solid var(--lime-500);
    outline-offset: 2px;
}

/* Dark thin scrollbars (WebKit) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .15);
    border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .25);
}

/* ==========================================================================
   2. WOOCOMMERCE / FORM GENERICS (site-wide dark)
   The "transitional light scope" (section 8) resets these inside the white
   interior panel used by not-yet-reskinned pages.
   ========================================================================== */

/* --- Notices: dark glass cards ------------------------------------------ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
    background: var(--surface-elev);
    border: 1px solid var(--line-1);
    border-left: 3px solid var(--lime-500);
    border-radius: var(--r-lg);
    color: var(--fg-1);
    box-shadow: var(--shadow-sm);
}
.woocommerce-info {
    border-left-color: var(--teal-500);
}
.woocommerce-error {
    border-left-color: var(--orange-500);
}
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
    color: var(--lime-500);
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    color: var(--fg-secondary);
}

/* --- Form fields: dark glass -------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
    background: var(--surface-glass);
    border: 1px solid var(--line-1);
    border-radius: var(--r-md);
    color: var(--fg-0);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    border-color: var(--lime-500);
    background: rgba(255, 255, 255, .06);
}
::placeholder {
    color: var(--fg-tertiary);
    opacity: 1;
}

/* --- Buttons: .gs-btn-primary equivalent --------------------------------- */
.button,
button.button,
a.button,
input.button,
.woocommerce .button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.added_to_cart,
button[name="add-to-cart"],
.single_add_to_cart_button {
    background: var(--lime-500);
    color: #0A0D0F; /* CTA ink — design literal, no token */
    font-weight: 700;
    border: 0;
    border-radius: var(--r-md);
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-normal) var(--ease),
                background var(--dur-normal) var(--ease);
}
.button:hover,
button.button:hover,
a.button:hover,
input.button:hover,
.woocommerce .button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.added_to_cart:hover,
.single_add_to_cart_button:hover {
    background: var(--lime-500);
    color: #0A0D0F;
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}
.button:active,
.single_add_to_cart_button:active {
    background: var(--lime-600);
    transform: translateY(0);
}

/* Secondary button utility (per .gs-btn-secondary) — for current and future
   secondary actions. New class, gpd- prefixed. */
.gpd-btn-secondary,
.button.gpd-btn-secondary {
    background: rgba(255, 255, 255, .10);
    color: var(--fg-0);
}
.gpd-btn-secondary:hover,
.button.gpd-btn-secondary:hover {
    background: rgba(255, 255, 255, .17);
    color: var(--fg-0);
    box-shadow: none;
}

/* --- Breadcrumbs (dark canvas) ------------------------------------------- */
.woocommerce-breadcrumb,
.rank-math-breadcrumb,
.rank-math-breadcrumb p {
    color: var(--fg-tertiary);
    font-size: 13px;
}
.woocommerce-breadcrumb a,
.rank-math-breadcrumb a {
    color: var(--fg-tertiary);
}
.woocommerce-breadcrumb a:hover,
.rank-math-breadcrumb a:hover {
    color: var(--fg-1);
}
.rank-math-breadcrumb .last,
.woocommerce-breadcrumb .breadcrumb_last {
    color: var(--fg-1);
}

/* --- Pagination (per .gs-pager) ------------------------------------------ */
.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers,
nav.pagination .page-numbers {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-glass);
    border: 1px solid var(--line-1);
    border-radius: var(--r-md);
    color: var(--fg-1);
    font-size: 14px;
    font-weight: 600;
}
.woocommerce-pagination a.page-numbers:hover,
nav.pagination a.page-numbers:hover {
    color: var(--fg-0);
    border-color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .08);
}
.woocommerce-pagination span.page-numbers.current,
nav.pagination .page-numbers.current {
    background: var(--lime-500);
    border-color: var(--lime-500);
    color: #0A0D0F; /* ink on lime */
}

/* --- Tables --------------------------------------------------------------- */
table,
table th,
table td {
    border-color: var(--line-1);
}

/* --- Select2 (dark-canvas pages only; light interiors keep plugin default
       so dropdown matches the white panels until those phases land) -------- */
body.home .select2-dropdown,
body.tax-product_cat .select2-dropdown,
body.tax-product_tag .select2-dropdown,
body.post-type-archive-product .select2-dropdown {
    background: var(--surface-elev);
    border: 1px solid var(--line-1);
    color: var(--fg-1);
}
body.home .select2-container--default .select2-selection--single,
body.tax-product_cat .select2-container--default .select2-selection--single,
body.tax-product_tag .select2-container--default .select2-selection--single,
body.post-type-archive-product .select2-container--default .select2-selection--single {
    background: var(--surface-glass);
    border: 1px solid var(--line-1);
}
body.home .select2-container--default .select2-selection--single .select2-selection__rendered,
body.tax-product_cat .select2-container--default .select2-selection--single .select2-selection__rendered,
body.tax-product_tag .select2-container--default .select2-selection--single .select2-selection__rendered,
body.post-type-archive-product .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--fg-1);
}

/* ==========================================================================
   3. HEADER — UTILITY BAR (.top-bar → design .fl-util)
   ========================================================================== */

/* body.theme-shoptimizer prefix: the Customizer prints its bar colours in an
   inline <style> after this sheet, so equal specificity is not enough. */
body.theme-shoptimizer .col-full.topbar-wrapper,
body.theme-shoptimizer .top-bar {
    background: var(--bg-0);
}
/* design .fl-util: the bar background spans the full viewport (the wrapper
   carries .col-full and used to clamp the band to 1280px, leaving body-bg
   stripes at the edges); only the CONTENT stays in the site container. */
body.theme-shoptimizer .col-full.topbar-wrapper {
    max-width: none;
    padding: 0;
    border-bottom: 1px solid var(--line-2);
}
body.theme-shoptimizer .top-bar > .col-full {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 42px;
}

.top-bar-left .gpd-util-links {
    padding: 7px 0; /* .fl-util padding:7px → ~34px bar */
    gap: 20px;
}
.top-bar-left .gpd-util-link {
    color: var(--fg-secondary);
    font-family: var(--font-sans);
    font-size: 12.5px;
    line-height: 20px;
}
.top-bar-left .gpd-util-link:hover {
    color: var(--fg-0);
}
/* Utility-link labels: full text by default, short text swapped in on phones (see
   the max-width:600 block) so "Track your order"/"Start a Return" don't overflow. */
.top-bar-left .gpd-util-link .gpd-util-short {
    display: none;
}
.top-bar-left .gpd-util-link .gpd-util-ic {
    width: 15px;
    height: 15px;
    fill: currentColor;
}
/* Lucide-style outline icons (e.g. Support headphones) draw with stroke, not
   fill — keep them as outlines instead of solid blobs. */
.top-bar-left .gpd-util-link .gpd-util-ic--stroke {
    fill: none;
    stroke: currentColor;
}

/* --- Language selector (design): custom dark switcher built from the real
   WPML active-languages data (flag + native name + resolved currency, check
   on current). Rendered by droix_render_wpml_language_selector() in
   functions.php; toggled by JS (main.js, .gpd-lang__btn) so hovering into the
   panel never closes it — the old WPML legacy CSS-:hover dropdown did. ----- */

.top-bar-right {
    position: relative;
}
.gpd-lang { position: relative; display: inline-flex; }
.gpd-lang__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 10px;
    background: none;
    border: 0;
    border-radius: var(--r-md);
    color: var(--fg-1);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.gpd-lang__btn:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.gpd-lang__flag {
    display: block;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px var(--line-1);
    /* CSS background (not <img>) so WP Rocket lazyload can't swap it for a
       1x1 gif placeholder — flags must paint immediately in the panel. */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.gpd-lang__cur { color: var(--fg-tertiary); font-weight: 500; }
.gpd-lang__chev { opacity: .6; flex: 0 0 auto; transition: transform var(--dur-fast) var(--ease); }
.gpd-lang.is-open .gpd-lang__chev { transform: rotate(180deg); }

.gpd-lang__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 4px;
    width: min(560px, calc(100vw - 32px));
    max-height: min(640px, calc(100vh - 96px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: rgba(16, 20, 26, .98);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast) var(--ease);
}
.gpd-lang__panel::-webkit-scrollbar { width: 8px; }
.gpd-lang__panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); }
.gpd-lang.is-open .gpd-lang__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* The AJAX-search popup lifts the sibling .site-header to z:50, and CommerceKit can
   leave .commercekit-ajs-results mounted (no .commercekit-ajs-hide), keeping it there
   after a search. .site-header is later in the DOM than this top-bar row, so at an equal
   z:50 it paints OVER the open language panel (the panel's own z:60 can't escape this
   row's stacking context). While the switcher is open, lift this row above the header so
   the panel is never clipped behind the cart/menu rows; reverts the moment it closes. */
.top-bar-right:has(.gpd-lang.is-open) {
    z-index: 70;
}
.gpd-lang__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: var(--r-md);
    color: var(--fg-1);
    font-size: 13.5px;
    text-decoration: none;
    white-space: nowrap;
    min-width: 0;
}
.gpd-lang__item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.gpd-lang__item .gpd-lang__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gpd-lang__item .gpd-lang__cur { font-size: 12px; }
.gpd-lang__item.is-active { background: rgba(35, 221, 190, .10); color: #fff; }
.gpd-lang__check { color: var(--acc); flex: 0 0 auto; }

/* nav-row instance (header.php :189) sits inside the nav, drop the second copy
   on desktop where the top-bar one is the primary control. */
@media (min-width: 993px) {
    .col-full-nav .gpd-lang { display: none; }
}

@media (max-width: 640px) {
    .gpd-lang__panel {
        grid-template-columns: minmax(0, 1fr);
        width: min(340px, calc(100vw - 24px));
        max-height: min(70vh, calc(100vh - 96px));
    }
}

/* Mobile utility bar: the row is flex/space-between/nowrap, so the left links
   (~306px) + language button (~171px) overflowed the ~306px content area and
   pushed the whole page wider than the viewport (horizontal scroll + empty gutter
   on every page). Tighten the gutters, let the left links shrink and scroll within
   their track, drop the language *name* (the flag already conveys the language) so
   the button keeps just flag + currency + chevron, and pin the switcher so nothing
   spills past the viewport. */
@media (max-width: 600px) {
    body.theme-shoptimizer .top-bar > .col-full {
        padding: 0 16px;
        gap: 10px;
    }
    .top-bar-left {
        min-width: 0;
        flex: 1 1 auto;
    }
    .top-bar-left .gpd-util-links {
        gap: 14px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .top-bar-left .gpd-util-links::-webkit-scrollbar { display: none; }
    .top-bar-left .gpd-util-link {
        font-size: 11.5px;
        white-space: nowrap;
        flex: 0 0 auto;
    }
    /* Phones: swap to the short labels (Track / Return) so all three util links fit
       without horizontal scrolling; the language switcher stays pinned right. */
    .top-bar-left .gpd-util-link .gpd-util-full { display: none; }
    .top-bar-left .gpd-util-link .gpd-util-short { display: inline; }
    .top-bar-right {
        flex: 0 0 auto;
        gap: 0;
    }
    .gpd-lang__btn .gpd-lang__name { display: none; }
}

/* Contact-us nav pill + popover (droix .gpd-contact widget) → .fl-dd dark */
.topbar_contactus {
    background: transparent;
    color: var(--fg-1);
}
li.gpd-nav-contact-li .gpd-nav-contact .topbar_contactus_button {
    background: var(--surface-glass);
    border: 1px solid var(--line-1);
    border-radius: var(--r-full);
    color: var(--fg-1);
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 600;
}
li.gpd-nav-contact-li .gpd-nav-contact:hover .topbar_contactus_button,
li.gpd-nav-contact-li .gpd-nav-contact.opened .topbar_contactus_button {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .25);
    color: var(--fg-0);
}
/* Pin "Contact Us" to the nav-row right edge (design: nav right slot).
   As a normal li it wraps to an invisible second menu line. */
@media (min-width: 993px) {
    .main-navigation ul.menu {
        position: relative;
    }
    li.gpd-nav-contact-li {
        /* normal flex item pushed to the right edge — the ul is
           flex/nowrap/align-items:center so the pill auto-centres vertically
           on the links' line (absolute top:27px sat it 17px too low). */
        margin-left: auto;
    }
    li.gpd-nav-contact-li .gpd-nav-contact .topbar_contactus_button {
        height: 34px;
        display: flex;
        align-items: center;
        padding: 0 16px;
        line-height: 1;
    }
}
/* style.css ships a 2-class light rule (.topbar_contactus .topbar_contactus_inner
   { background:#fff }) that out-specifies a single-class override, so the panel
   rendered white. Match its specificity (and add .gpd-contact) so the dark GPD
   panel wins. */
.topbar_contactus .topbar_contactus_inner.gpd-contact {
    background: rgba(16, 20, 26, .98);
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    color: var(--fg-secondary);
}
/* dark-popover text colours (override the light .gpd-contact palette) */
.gpd-contact .gpd-contact-h {
    color: var(--fg-0);
    font-family: var(--font-sans);
}
.gpd-contact .gpd-contact-lab {
    color: var(--fg-tertiary);
}
.gpd-contact .gpd-contact-row {
    color: var(--fg-1);
}
.gpd-contact .gpd-contact-strong {
    color: var(--fg-0);
}
.gpd-contact .gpd-contact-strong:hover {
    color: var(--lime-500);
}
.gpd-contact .gpd-contact-link {
    color: var(--teal-500);
}
.gpd-contact .gpd-contact-div,
.gpd-contact .gpd-contact-foot {
    border-top-color: var(--line-1);
}
.gpd-contact .gpd-contact-foot {
    color: var(--fg-secondary);
}
/* Social links: brand icon + label in a tidy vertical list (icon glyphs from
   gpd_contact_social_icon()). */
.gpd-contact .gpd-contact-socials {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}
.gpd-contact .gpd-contact-socials a.gpd-contact-soc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    color: var(--fg-0);
    line-height: 1.2;
    transition: color var(--dur-fast, .15s) var(--ease, ease);
}
.gpd-contact .gpd-contact-socials a.gpd-contact-soc:hover {
    color: var(--lime-500);
}
.gpd-contact .gpd-contact-soc-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: var(--fg-secondary);
    transition: color var(--dur-fast, .15s) var(--ease, ease);
}
.gpd-contact .gpd-contact-socials a.gpd-contact-soc:hover .gpd-contact-soc-ico {
    color: var(--lime-500);
}
.gpd-contact .gpd-contact-soc-ico svg {
    width: 100%;
    height: 100%;
    display: block;
}
.gpd-contact .gpd-contact-soc-lab {
    font-weight: 600;
}

/* ==========================================================================
   AJAX SEARCH POPUP (CommerceKit .commercekit-ajs-* → GPD dark)
   Default panel is white and the plugin pins it at z-index:3 via
   `.header-4 .commercekit-ajs-results` — behind the sticky nav
   (.col-full-nav z-index:40), so its top (Products) was hidden. The `.header-4`
   prefix here matches/​beats the plugin selector (and our sheet loads later),
   lifting it above the nav and recolouring it to the dark brand surface.
   ========================================================================== */
body.header-4 .commercekit-ajs-results {
    z-index: 60;
}
/* The nav row (.col-full-nav, z-index:40) is a SIBLING of .site-header
   (z-index:20) under .hfeed.site — so the popup, confined to the header's
   z-20 stacking context, can never beat the nav with its own z-index. While the
   AJAX search popup is showing (CommerceKit injects .commercekit-ajs-results
   into the header, without .commercekit-ajs-hide), lift the whole header above
   the nav so the popup clears the menu; it reverts the moment the popup closes. */
.site-header:has(.commercekit-ajs-results:not(.commercekit-ajs-hide)) {
    z-index: 50;
}
.header-4 .commercekit-ajs-results .commercekit-ajs-suggestions {
    background: var(--surface-elev, #14181d);
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    color: var(--fg-1);
}
.header-4 .commercekit-ajs-results .commercekit-ajs-suggestions > .autocomplete-suggestion {
    border-bottom: 1px solid var(--line-2);
}
.header-4 .commercekit-ajs-results .commercekit-ajs-product,
.header-4 .commercekit-ajs-results .commercekit-ajs-post {
    color: var(--fg-1);
}
.header-4 .commercekit-ajs-results .commercekit-ajs-suggestions > .autocomplete-suggestion:hover,
.header-4 .commercekit-ajs-results .commercekit-ajs-suggestions > .autocomplete-suggestion.active,
.header-4 .commercekit-ajs-results .commercekit-ajs-suggestions > .autocomplete-suggestion.autocomplete-selected > a {
    background: rgba(255, 255, 255, .05);
}
.header-4 .commercekit-ajs-results .commercekit-ajs-product-title,
.header-4 .commercekit-ajs-results .commercekit-ajs-post-title,
.header-4 .commercekit-ajs-results span.product-short-desc {
    color: var(--fg-0);
}
.header-4 .commercekit-ajs-results .commercekit-ajs-product-image img {
    border-radius: var(--r-md, 8px);
    border: 1px solid var(--line-2);
    background: var(--bg-1);
}
.header-4 .commercekit-ajs-results .commercekit-ajs-post .post-type {
    color: var(--fg-tertiary);
    background: var(--surface-glass);
    border: 1px solid var(--line-1);
    border-radius: var(--r-full);
    padding: 2px 9px;
    align-self: center;
}
.header-4 .commercekit-ajs-results span.match-text {
    color: var(--lime-500);
    text-decoration: none;
    font-weight: 700;
}
/* "OTHER RESULTS" section-label bar → muted, not a card */
.header-4 .commercekit-ajs-results .commercekit-ajs-other-result {
    background: var(--surface-glass);
    color: var(--fg-tertiary);
    border-top: 1px solid var(--line-1);
}
/* "VIEW ALL …" footer bar → brand-dark with teal text */
.header-4 .commercekit-ajs-results .commercekit-ajs-view-all-holder > a {
    background: var(--surface-glass);
    color: var(--teal-500);
    border-top: 1px solid var(--line-1);
}
.header-4 .commercekit-ajs-results .commercekit-ajs-view-all-holder > a:hover {
    background: rgba(255, 255, 255, .06);
    color: var(--teal-500);
}
.header-4 .commercekit-ajs-results .autocomplete-no-suggestion {
    color: var(--fg-secondary);
}

/* ==========================================================================
   4. HEADER — MAIN BAR (#masthead → design .fl-bar)
   ========================================================================== */

#masthead.site-header {
    background: var(--bg-1);
    border-bottom: 1px solid var(--line-2);
}
/* replace the droix black rounded pill with a flat full-bleed bar.
   design .fl-bar-in: 16px vertical padding around the 44px search pill
   → ~76px bar (was 82px from the droix port) */
.col-full.main-header {
    background: var(--bg-1);
    border-radius: 0;
}
@media (min-width: 993px) {
    .col-full.main-header {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-top: 16px;
        padding-bottom: 16px;
        height: 76px; /* design .fl-bar: 44px content + 2×16px — pin it */
        align-items: center;
    }
    .main-header .site-header-cart {
        height: 44px;
        align-items: center;
    }
}

/* --- Logo (.gs-logo): "GPD" wordmark + lime STORE chip ------------------- */
/* Markup from the get_custom_logo filter in functions.php; replaces the
   black PNG that needed invert(1). */
.site-header .site-branding .custom-logo-link.gpd-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 23px;
    letter-spacing: -.6px;
    color: #fff;
    flex: 0 0 auto;
    text-decoration: none;
}
.gpd-logo .gpd-logo-chip {
    background: var(--lime-500);
    color: #0A0D0F;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    padding: 4px 9px;
    border-radius: 6px;
    text-transform: uppercase;
    line-height: 1.2;
}

/* --- Search pill (.fl-search) -------------------------------------------- */
/* The parent theme hides every .site-search under the header-4 layout
   (.header-4 .site-search{display:none}) and relies on an icon/modal
   trigger. The Flow design puts a permanent search pill in the main bar,
   and header.php already ships it (.site-search.gpd-desktop-only). */
@media (min-width: 993px) {
    body.header-4 .main-header .site-search.gpd-desktop-only,
    body.header-4 .main-header .site-search.gpd-desktop-only .site-search {
        display: block;
    }
    body.header-4 .main-header .site-search.gpd-desktop-only {
        flex: 1 1 auto;
        max-width: 560px;
        margin: 0 26px;
        min-width: 0;
    }
}

.site-search form {
    position: relative;
}
.site-search form input[type="search"],
.site-search .search-field {
    background: var(--bg-0);
    border: 1px solid var(--line-1);
    border-radius: var(--r-full);
    height: 44px;
    color: var(--fg-0);
    font-size: 14px;
    padding: 0 56px 0 18px;
    box-shadow: none;
}
.site-search form input[type="search"]:focus,
.site-search .search-field:focus {
    border-color: var(--lime-500);
    background: var(--bg-0);
}
/* round lime go-button (text hidden, icon drawn by form::after below).
   The parent hides this button with clip:rect(1px…) — restore it. */
.site-search form button[type="submit"],
.widget_product_search form button[type="submit"] {
    clip: auto;
    overflow: visible;
    display: block;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--lime-500);
    color: transparent;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    z-index: 2;
    transition: background var(--dur-normal) var(--ease);
}
.site-search form button[type="submit"]:hover {
    background: var(--lime-600);
}
/* right-arrow icon (design submit glyph), ink-on-lime, centred on the go-button */
.site-search form::after {
    content: "";
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h14' stroke='%230A0D0F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13 5l7 7-7 7' stroke='%230A0D0F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
    position: absolute;
    width: 18px;
    height: 18px;
    right: 13px;
    top: 50%;
    margin-top: -9px;
    pointer-events: none;
    z-index: 3;
}

/* CommerceKit ajax-search dropdown — dark panel */
.commercekit-ajs-results .commercekit-ajs-suggestions,
.commercekit-ajs-suggestions {
    background: rgba(16, 20, 26, .98);
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    color: var(--fg-1);
}
.commercekit-ajs-suggestions a,
.commercekit-ajs-suggestions .ajs-product-title {
    color: var(--fg-1);
}
.commercekit-ajs-suggestions a:hover,
.commercekit-ajs-suggestions li:hover,
.commercekit-ajs-suggestions .selected {
    background: rgba(255, 255, 255, .06);
    color: var(--fg-0);
}
.commercekit-ajs-suggestions .price,
.commercekit-ajs-suggestions .woocommerce-Price-amount {
    color: var(--lime-500);
}

/* --- Header icon buttons (compare / wishlist / account) ------------------ */
.main-header .header_icons {
    gap: 10px;
    align-items: center;
}
.main-header .header_icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    transition: background var(--dur-normal) var(--ease);
}
/* 44px hit areas on desktop only: on mobile the icons row structurally
   overflows the 82px bar (pre-existing), so taller buttons would deepen
   the overlap into page content. */
@media (min-width: 993px) {
    .main-header .header_icons a {
        width: 44px;
        height: 44px;
    }
}
.main-header .header_icons a:hover {
    background: rgba(255, 255, 255, .07);
}
.header_icons a:hover img {
    filter: none; /* drop the droix olive hover filter; hover is the bg wash */
}
.header_icons:after {
    background: var(--line-1);
    opacity: 1;
    top: 50%;
    margin-top: -13px;
    height: 26px;
}
/* count badges (.fl-badge) */
.header_icons a span.count {
    top: 2px;
    right: 2px;
    bottom: auto;
    left: auto;
    min-width: 17px;
    width: auto;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--r-full);
    background: var(--lime-500);
    color: #0A0D0F; /* ink on lime */
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--bg-1);
}

/* mobile search trigger icon — white stroke for the dark bar */
.gpd-header-search-icon::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M10.5 20C15.7467 20 20 15.7467 20 10.5C20 5.25329 15.7467 1 10.5 1C5.25329 1 1 5.25329 1 10.5C1 15.7467 5.25329 20 10.5 20Z' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 21L19 19' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- Cart button (.fl-cartbtn) ------------------------------------------- */
/* Design places the cart in the MAIN bar (after the icon row divider), not
   in the nav row: show the masthead instance, hide the nav-row duplicate. */
@media (min-width: 993px) {
    body.header-4 .main-header .site-header-cart {
        display: block;
        position: static;
        margin-left: 4px;
    }
    /* visibility (not display): the absolutely-positioned menu contributes no
       height — the in-flow cart is what props the nav row open. The explicit
       min-height pins the row to its pre-redesign band (the old cart markup
       was taller than the new icon+amount one). */
    body.header-4 .col-full-nav {
        min-height: 64px;
    }
    body.header-4 .col-full-nav .site-header-cart {
        visibility: hidden;
        pointer-events: none;
    }
}
.site-header-cart .cart-contents {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--fg-0);
    border-radius: var(--r-md);
    padding: 4px 6px;
    transition: background var(--dur-normal) var(--ease);
}
/* icon + badge (.fl-cartbtn .ic) */
.site-header-cart .gpd-cart-ic {
    position: relative;
    display: flex;
    padding: 6px 2px 6px 0;
    color: #fff;
}
body.header-4 .site-header-cart a.cart-contents .gpd-cart-ic .count {
    position: absolute;
    top: -5px;
    right: -8px;
    width: auto;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    line-height: 17px;
    font-size: 11px;
}
/* amount column (.fl-cartbtn .amt) */
.site-header-cart .gpd-cart-amt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}
.site-header-cart .gpd-cart-amt em {
    font-style: normal;
    font-size: 10.5px;
    color: var(--fg-tertiary);
}
/* non-empty carts embed Woo's own <small> tax label inside the subtotal —
   our em already shows it */
.site-header-cart .gpd-cart-amt .amount small {
    display: none;
}
.site-header-cart .cart-contents:hover {
    background: rgba(255, 255, 255, .07);
}
.site-header-cart .cart-contents .amount,
.site-header-cart .cart-contents .amount .woocommerce-Price-amount {
    color: var(--lime-500);
    font-weight: 800;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.site-header-cart .cart-contents .count {
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--r-full);
    background: var(--lime-500);
    color: #0A0D0F; /* ink on lime */
    font-size: 11px;
    font-weight: 800;
    line-height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--bg-1);
}

/* Kirki prints `.header-4 .shoptimizer-cart .cart-contents .amount
   {color:#323232}` (0-4-0) and olive #9fb423 count/hover colours in an
   inline <style> — body.header-4 (0-4-1) outguns them without !important. */
body.header-4 .shoptimizer-cart .cart-contents .amount,
body.header-4 .shoptimizer-cart .cart-contents .amount .woocommerce-Price-amount {
    color: var(--lime-500);
    font-weight: 800;
}
body.header-4 .shoptimizer-cart a.cart-contents .count,
body.header-4 .shoptimizer-cart a.cart-contents:not(:hover) .count {
    background: var(--lime-500);
    color: #0A0D0F; /* ink on lime */
}
body.header-4 .shoptimizer-cart a.cart-contents:hover .count {
    background: var(--lime-500); /* Kirki hover paints olive #9fb423 */
    color: #0A0D0F;
}
body.header-4 .shoptimizer-cart a.cart-contents .count,
body.header-4 .shoptimizer-cart a.cart-contents .count:after {
    border-color: var(--bg-1); /* Kirki paints these olive */
}

/* ==========================================================================
   4b. HEADER — MOBILE & TABLET BAR LAYOUT (design .gs-mtop / .gs-ttop)
   --------------------------------------------------------------------------
   The parent theme lays the <=992px main bar out with an absolutely-positioned
   burger (left) + cart (right) and a full-width CENTRED logo, leaving the child
   .header_icons (search/compare/wishlist/account) to wrap into a broken second
   row under the logo. Re-flow the bar as a single clean row that matches the
   design: mobile = [burger][logo][search][account][cart]; tablet = [burger]
   [logo][inline search][account][cart]. Compare/wishlist live in the drawer
   on phones, so they are hidden from the mobile bar (account is kept visible).
   ========================================================================== */

/* ---- MOBILE (<=768px): [burger] [logo flex:1] [search] [account] [cart] -- */
@media (max-width: 768px) {
    .main-header.col-full {
        display: flex;
        align-items: center;
        gap: 5px;
        min-height: 64px;
        /* override style.css:372 `padding:16px 20px !important` — tighten the
           sides so the burger+logo+search+account+cart row fits small phones
           (down to ~360px) without the cart overflowing the edge */
        padding: 16px 10px !important;
        position: relative;
    }
    /* branding holds the burger (absolute, parent) + logo; let it eat the
       middle so the icon group is pushed to the right edge */
    .site-header .site-branding {
        flex: 1 1 auto;
        flex-direction: row;
        width: auto;
        height: auto;
        justify-content: flex-start;
        align-items: center;
        text-align: left;
        padding-left: 42px; /* clear the 34px burger parked at left:8px */
    }
    /* compact icon-only burger (drop the "MENU" word — design uses a glyph) */
    .site-branding button.menu-toggle {
        left: 8px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
        top: 50%;
        transform: translateY(-50%);
    }
    .site-branding button.menu-toggle .bar-text { display: none; }
    .menu-toggle .bar { left: 9px; background-color: var(--fg-0); }

    /* trim the wordmark a touch so [burger][logo][search][account][cart] fits
       small phones (down to ~360px) without the cart overflowing the edge */
    .site-header .site-branding .custom-logo-link.gpd-logo {
        font-size: 18px;
        gap: 6px;
    }
    .gpd-logo .gpd-logo-chip {
        font-size: 10.5px;
        padding: 3px 6px;
    }

    /* icon group: search trigger + account remain in the bar (compare/wishlist
       live in the drawer on phones) */
    .main-header .header_icons {
        flex: 0 0 auto;
        gap: 3px;
        margin-left: auto;
    }
    .main-header .header_icons:after { display: none; } /* drop divider */
    .main-header .header_icons > a { display: none !important; }
    .main-header .header_icons > a#header-search-link,
    .main-header .header_icons > a[href*="my-account"] {
        display: flex !important;
        position: static;
        right: auto;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
        align-items: center;
        justify-content: center;
    }
    /* keep the white profile SVG white (legacy style.css blacks it out <992px) */
    .main-header .header_icons > a img { filter: none; }
    #header-search-link .gpd-header-search-icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #header-search-link .gpd-header-search-icon::after {
        position: static;
        top: auto;
        margin: 0;
        display: block;
        width: 22px;
        height: 22px;
        transform: none;
        /* style.css paints this glyph dark (#2c2d33) — invisible on the dark
           bar; restore the white-stroke magnifier from §4 above. */
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M10.5 20C15.7467 20 20 15.7467 20 10.5C20 5.25329 15.7467 1 10.5 1C5.25329 1 1 5.25329 1 10.5C1 15.7467 5.25329 20 10.5 20Z' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 21L19 19' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    /* cart back into the flow at the right edge */
    .site-header .site-header-cart {
        position: static;
        right: auto;
        flex: 0 0 auto;
        z-index: auto;
    }
    .shoptimizer-cart-icon { top: 0; right: 0; }
}

/* ---- TABLET (769–992px): [burger] [logo] [inline search] [account] [cart] */
@media (min-width: 769px) and (max-width: 992px) {
    .main-header.col-full {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 68px;
        padding: 12px 20px;
        position: relative;
    }
    .site-header .site-branding {
        flex: 0 0 auto;
        flex-direction: row;
        width: auto;
        height: auto;
        justify-content: flex-start;
        align-items: center;
        text-align: left;
        padding-left: 50px; /* burger room */
    }
    .site-branding button.menu-toggle {
        left: 10px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
        top: 50%;
        transform: translateY(-50%);
    }
    .site-branding button.menu-toggle .bar-text { display: none; }
    .menu-toggle .bar { left: 9px; background-color: var(--fg-0); }

    /* show the real search input inline in the bar (design tablet header) */
    .main-header .site-search.gpd-desktop-only,
    .main-header .site-search.gpd-desktop-only .site-search {
        display: block !important;
    }
    .main-header .site-search.gpd-desktop-only {
        flex: 1 1 auto;
        max-width: none;
        margin: 0 8px;
        min-width: 0;
    }
    /* no slide-down search on tablet — the inline field replaces it */
    #header-search-link { display: none !important; }
    .site-search.gpd-mobile-tablet-only { display: none !important; }

    /* icon group: keep account, drop compare/wishlist (they live in the drawer) */
    .main-header .header_icons {
        flex: 0 0 auto;
        gap: 8px;
        margin-left: 0;
    }
    .main-header .header_icons:after { display: none; }
    .main-header .header_icons #header-compare-link,
    .main-header .header_icons .header_favorite { display: none !important; }
    .main-header .header_icons > a {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }
    /* legacy style.css paints header icons black (brightness(0)) below 992px —
       correct for the old light header, but it turns the white profile SVG
       black on the dark GPD bar so it reads as a dim/inactive icon. Keep white. */
    .main-header .header_icons > a img { filter: none; }
    .site-header .site-header-cart {
        position: static;
        right: auto;
        flex: 0 0 auto;
        z-index: auto;
    }
    .shoptimizer-cart-icon { top: 0; right: 0; }
}

/* ---- MOBILE flow-in search (slide-down under the bar) ------------------- */
/* The duplicate .site-search.gpd-mobile-tablet-only sits right under #masthead
   in the DOM. Collapsed by default (max-height:0, no height/shift); tapping the
   magnifier adds body.gpd-search-open which slides + fades it in. main.js scrolls
   to top first so it reveals directly beneath the sticky header. */
@media (max-width: 768px) {
    .site-search.gpd-mobile-tablet-only {
        display: block !important;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        padding: 0 16px;
        margin: 0;
        background: var(--bg-1);
        border-bottom: 1px solid transparent;
        position: relative;
        z-index: 8;
        transition:
            max-height .32s cubic-bezier(.22, .61, .36, 1),
            opacity .22s ease,
            padding .32s ease;
    }
    body.gpd-search-open .site-search.gpd-mobile-tablet-only {
        max-height: 88px;
        opacity: 1;
        padding: 12px 16px;
        border-bottom-color: var(--line-1);
    }
    /* the inner .site-search rendered by shoptimizer_product_search is hidden by
       the parent's `.header-4 .site-search{display:none}` — reveal it (mirrors the
       desktop reveal in §4) so the form actually fills the slide-down bar */
    .site-search.gpd-mobile-tablet-only .site-search { display: block !important; }
    .site-search.gpd-mobile-tablet-only form { margin: 0; }
    /* checkout suppresses the slide-down search (style.css) — hide the trigger too
       so the magnifier isn't a dead button there */
    .woocommerce-checkout .site-search.gpd-mobile-tablet-only { display: none !important; }
    .woocommerce-checkout .main-header .header_icons > a#header-search-link { display: none !important; }
}

/* ==========================================================================
   5. HEADER — NAV ROW (.col-full-nav → design .fl-nav) + dropdown panels
   ========================================================================== */

/* body prefix beats the Customizer/parent inline nav background.
   position+z-index per design .fl-nav (z-40): without a stacking context on
   the row, the absolutely-positioned mega panel paints under the page. */
body.theme-shoptimizer .col-full-nav {
    background: rgba(13, 16, 19, .86);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line-1);
}
/* position:relative is the DESKTOP nav-row behaviour only. At <=992px the parent
   theme renders .col-full-nav as the off-canvas drawer (position:fixed; left:-300px,
   sliding to left:0 on body.mobile-toggled). The un-scoped position:relative used to
   leak into mobile/tablet, pinning the 300px drawer in document flow and pushing the
   page content ~756px down — the "huge gap below the header" on every page. Scope it. */
@media (min-width: 993px) {
    body.theme-shoptimizer .col-full-nav {
        position: relative;
        z-index: 40;
    }
}
/* <=992px (hamburger mode): keep the off-canvas drawer dark + opaque. The parent
   gives it background:#fff; override so the slide-in panel reads as the GPD dark
   surface. position/left/width/transition all come from the parent drawer rules. */
@media (max-width: 992px) {
    body.theme-shoptimizer .col-full-nav {
        background: var(--bg-1);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-bottom: 0;
        box-shadow: 0 0 40px rgba(0, 0, 0, .5);
    }
}
/* sticky/floating state — override the droix white floating bar */
body.theme-shoptimizer .col-full-nav.gpd-nav-floating,
body.theme-shoptimizer .col-full-nav.gpd-nav-hidden {
    background: rgba(13, 16, 19, .86);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
body.theme-shoptimizer .col-full-nav.gpd-nav-floating {
    box-shadow: var(--shadow-lg);
    border-bottom: 1px solid var(--line-1);
}

/* design .fl-nav-in: links left-aligned inside the 1280px site container
   (the parent theme absolutely-positions the menu container across the full
   bar and centres the items — the design wants container-aligned, links
   left, Contact us pushed right). li.full-width goes static so the mega
   panel positions against the now container-wide ul.menu. */
@media (min-width: 993px) {
    body.theme-shoptimizer .main-navigation ul.menu {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 35px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        gap: 4px;
    }
    body.theme-shoptimizer .main-navigation ul.menu > li.full-width {
        position: static;
    }
    body.theme-shoptimizer .main-navigation ul.menu > li.gpd-nav-contact-li {
        margin-left: auto;
    }
    /* design .fl-navlink: padding 13px → ~46px row (parent forces 90px
       line-height as its nav-height mechanism) */
    body.theme-shoptimizer .main-navigation .menu > li > a.main-menu-link {
        line-height: 1.45;
        padding: 14px 13px;
        height: auto;
    }
}

/* top-level links: 13.5px/600, fg-1 → white on hover, lime when current/open */
.main-navigation .menu > li > a.main-menu-link,
.main-navigation .menu > li > a.main-menu-link > span {
    color: var(--fg-1);
    font-size: 13.5px;
    font-weight: 600;
}
.main-navigation .menu > li > a.main-menu-link {
    transition: color var(--dur-fast) var(--ease);
}
/* Accent underline tracks the label text exactly (span = text width), sitting
   6px below it — not the full padded <a> box. Mirrors Shoptimizer's own
   span::after accent mechanism, which is gated behind a different menu id on
   this build and so otherwise stays inert. The <a>::after pseudo is left alone
   because the parent theme uses it as the dropdown-caret indicator. */
.main-navigation .menu > li > a.main-menu-link > span {
    position: relative;
}
.main-navigation .menu > li > a.main-menu-link > span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: transparent;
    transition: background-color var(--dur-fast) var(--ease);
}
.main-navigation .menu > li:hover > a.main-menu-link,
.main-navigation .menu > li:hover > a.main-menu-link > span,
.main-navigation .menu > li > a.main-menu-link:focus > span {
    color: var(--fg-0);
}
/* Kill the parent's Customizer-coloured underline (span::before, magenta
   rgb(186,63,158)) — it doubled up with the design's accent underline. The
   nav uses a single teal "tile colour" underline (issue g). */
.main-navigation .menu > li > a.main-menu-link > span::before,
.main-navigation .menu > li.nolink > span::before {
    border-bottom-color: transparent !important;
    border-color: transparent !important;
}
/* open (hovered, has dropdown) + current item → single teal underline */
.main-navigation .menu > li:hover > a.main-menu-link > span::after,
.main-navigation .menu > li.menu-item-has-children:hover > a.main-menu-link > span::after,
.main-navigation .menu > li.current-menu-item > a.main-menu-link > span::after,
.main-navigation .menu > li.current-menu-ancestor > a.main-menu-link > span::after,
.main-navigation .menu > li.current-product-ancestor > a.main-menu-link > span::after,
.main-navigation .menu > li.current-product-parent > a.main-menu-link > span::after {
    background: var(--acc);
}
.main-navigation .menu > li.current-menu-item > a.main-menu-link > span,
.main-navigation .menu > li.current-menu-ancestor > a.main-menu-link > span,
.main-navigation .menu > li.current-product-ancestor > a.main-menu-link > span,
.main-navigation .menu > li.current-product-parent > a.main-menu-link > span {
    color: var(--acc);
}
.main-navigation .menu .caret {
    border-top-color: var(--fg-tertiary);
}

/* dropdown / mega panels (per .gs-mega): the WRAPPER stays a transparent
   full-width positioning shell; the .container inside becomes the floating
   dark-glass panel (rgba(16,20,26,.97) + blur(20px), radius 16, shadow-lg)
   so the panel reads as a rounded layer inside the site container, exactly
   like the design's .gs-mega. Long selectors outgun the parent's
   `… li.full-width > .sub-menu-wrapper { background:#fff … }` */
body.theme-shoptimizer .main-navigation ul.menu li.menu-item-has-children.full-width > .sub-menu-wrapper,
body.theme-shoptimizer .main-navigation ul.menu > li.menu-item-has-children > .sub-menu-wrapper {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    z-index: 50; /* design .gs-mega — above the sticky buy box / page content */
}
/* CRITICAL hover-bug fix (issues e1/e4/h): a CLOSED mega wrapper is
   position:absolute, spans the full panel area below the nav, and its inner
   subtrees are visibility:visible (rendered-in-place, no fly-outs). With the
   parent's default pointer-events:auto it therefore GHOST-CAPTURES hover over
   the page content beneath the header — causing flashing, stray panel opens,
   and the open panel to vanish when the cursor crosses a closed sibling on the
   way down from the link. Disable pointer-events while closed; restore on the
   open (hover/focus-within) li. */
body.theme-shoptimizer .main-navigation ul.menu > li.menu-item-has-children:not(:hover):not(:focus-within) > .sub-menu-wrapper {
    pointer-events: none;
}
body.theme-shoptimizer .main-navigation ul.menu > li.menu-item-has-children:hover > .sub-menu-wrapper,
body.theme-shoptimizer .main-navigation ul.menu > li.menu-item-has-children:focus-within > .sub-menu-wrapper {
    pointer-events: auto;
}
body.theme-shoptimizer .main-navigation ul.menu li.full-width > .sub-menu-wrapper > .container {
    max-width: 1210px;
    margin: 8px auto 0;
    background: rgba(16, 20, 26, .97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--line-1);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
/* narrow (non-full-width) dropdowns keep the panel chrome on the wrapper */
body.theme-shoptimizer .main-navigation ul.menu > li.menu-item-has-children:not(.full-width) > .sub-menu-wrapper {
    background: rgba(16, 20, 26, .97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
body.theme-shoptimizer .main-navigation ul.menu ul.sub-menu {
    background: transparent;
}

/* panel grid: 3 link columns + feature card (design .gs-mega
   grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:8px 30px; padding:26px 30px) */
@media (min-width: 993px) {
    body.theme-shoptimizer .main-navigation ul.menu li.full-width > .sub-menu-wrapper > .container > ul.sub-menu {
        display: grid;
        grid-template-columns: 1.2fr 1.2fr 1fr 1.3fr;
        gap: 8px 30px;
        align-items: start;
        justify-content: stretch;
        width: 100%;
        padding: 26px 30px;
    }
    body.theme-shoptimizer .main-navigation ul.menu li.full-width > .sub-menu-wrapper > .container > ul.sub-menu > li {
        display: block;
        width: auto;
        padding: 0;
        border: 0;
    }
    /* the feature teaser always occupies the LAST column track, full height
       (design .gs-mega: link columns left, promo tile right) regardless of
       its position in the menu-editor order */
    body.theme-shoptimizer .main-navigation ul.menu li.full-width > .sub-menu-wrapper > .container > ul.sub-menu > li.menu-item-product {
        grid-column: -2 / -1;
        grid-row: 1 / span 9;
    }
    /* column headings (direct children with a nested list):
       design .gs-mega-col h4 — 11px/700 uppercase, accent (teal) */
    body.theme-shoptimizer .main-navigation ul.menu li.full-width > .sub-menu-wrapper > .container > ul.sub-menu > li.menu-item-has-children > a.sub-menu-link,
    body.theme-shoptimizer .main-navigation ul.menu li.full-width > .sub-menu-wrapper > .container > ul.sub-menu > li.menu-item-has-children > a.sub-menu-link > span {
        color: var(--teal-500);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
    body.theme-shoptimizer .main-navigation ul.menu li.full-width > .sub-menu-wrapper > .container > ul.sub-menu > li.menu-item-has-children > a.sub-menu-link {
        padding: 0 11px 10px;
        background: none;
    }
    /* every subtree inside the panel renders expanded in place (no fly-outs) */
    body.theme-shoptimizer .main-navigation ul.menu li.full-width ul.sub-menu li.menu-item-has-children > .sub-menu-wrapper {
        position: static;
        visibility: visible;
        opacity: 1;
        transform: none;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        width: auto;
        padding: 0;
    }
    body.theme-shoptimizer .main-navigation ul.menu li.full-width ul.sub-menu .sub-menu-wrapper ul.sub-menu {
        width: auto;
        padding: 0;
        box-shadow: none;
    }
    /* carets are noise inside the panel */
    body.theme-shoptimizer .main-navigation ul.menu li.full-width .sub-menu-wrapper span.caret {
        display: none;
    }
}

.main-navigation ul.sub-menu a.sub-menu-link,
.main-navigation ul.sub-menu a.sub-menu-link > span,
.main-navigation ul.sub-menu a {
    color: var(--fg-1);
    font-size: 14px;
}
/* link rows: design .gs-mega-item — 14px, padding 9px 11px, radius 10,
   ↗ arrow at 35% opacity, hover = white text on rgba(255,255,255,.06) */
.main-navigation ul.menu li.full-width ul.sub-menu ul.sub-menu a.sub-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border-radius: var(--r-md);
}
.main-navigation ul.menu li.full-width ul.sub-menu ul.sub-menu a.sub-menu-link::after {
    content: "";
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    opacity: .35;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") no-repeat center / contain;
}
.main-navigation ul.sub-menu li:hover > a.sub-menu-link,
.main-navigation ul.sub-menu li:hover > a.sub-menu-link > span,
.main-navigation ul.sub-menu a.sub-menu-link:hover,
.main-navigation ul.sub-menu a.sub-menu-link:hover > span {
    color: var(--fg-0);
    background: rgba(255, 255, 255, .06);
    border-radius: var(--r-md);
}
.main-navigation ul.sub-menu a.sub-menu-link > span {
    background: none; /* hover wash lives on the row, not the inner span */
}
/* "NEW" markers: something blockifies menu-item <strong> (display:flex →
   own line, magenta highlight). The design's link rows are single-line, so
   instead of fighting the display rule, the wrapping span becomes a flex
   row — the strong then sits inline before the label as a flex item — and
   the strong is restyled as a small lime pill. */
.main-navigation ul.sub-menu a.sub-menu-link > span {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.main-navigation ul.sub-menu a.sub-menu-link strong {
    position: static !important; /* parent badge CSS absolutely-positions it
                                    above the link (and blockifies display) */
    order: -1; /* pill before the label even if authored after text */
    flex: 0 0 auto;
    background: var(--lime-500);
    color: #16190B;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1;
    padding: 3px 6px;
    border-radius: var(--r-full);
}

/* feature card (design .gs-mega-feature): the [product id=…] menu item now
   renders the compact teaser markup from droix_mega_feature_teaser() in
   functions.php — gradient promo tile with flag + title + one-line subtitle
   + image. No price/rating/specs: it's a teaser, not a buy box. */
.main-navigation .sub-menu a.gpd-mega-feature {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: linear-gradient(160deg, rgba(35, 221, 190, .12), rgba(254, 90, 240, .10));
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    padding: 18px;
    text-decoration: none;
    transition: border-color var(--dur-normal) var(--ease);
}
.main-navigation .sub-menu a.gpd-mega-feature:hover {
    background: linear-gradient(160deg, rgba(35, 221, 190, .12), rgba(254, 90, 240, .10));
    border-color: rgba(255, 255, 255, .25);
}
.main-navigation .sub-menu .gpd-mega-feature-flag {
    align-self: flex-start;
    background: var(--lime-500);
    color: #16190B;
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--r-full);
    padding: 5px 12px;
    margin-bottom: 12px;
    line-height: 1;
}
.main-navigation .sub-menu .gpd-mega-feature .ttl {
    color: var(--fg-0);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.3px;
    line-height: 1.15;
}
.main-navigation .sub-menu .gpd-mega-feature .sub {
    color: var(--fg-secondary);
    font-size: 12.5px;
    line-height: 1.45;
    margin-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.main-navigation .sub-menu .gpd-mega-feature .img {
    display: block;
    margin-top: auto;
    padding-top: 10px;
    text-align: center;
}
.main-navigation .sub-menu .gpd-mega-feature .img img {
    width: auto;
    max-width: 100%;
    height: 96px;
    object-fit: contain;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .5));
    background: transparent;
}

/* menu-editor `divider` classes drew 1px border-top rows inside the panel
   (read as underlines below each link / the column heading) — the design's
   .gs-mega-item rows have no dividers. */
.main-navigation ul.menu li.full-width .sub-menu-wrapper li.divider {
    border-top: 0;
    border-bottom: 0;
}
/* parent hover underline on panel links (navigation-desktop.css) — design
   uses a background wash, never an underline */
.main-navigation ul.menu li.full-width .sub-menu-wrapper a.sub-menu-link,
.main-navigation ul.menu li.full-width .sub-menu-wrapper a.sub-menu-link:hover,
.main-navigation ul.menu li.full-width .sub-menu-wrapper a.sub-menu-link:hover span {
    text-decoration: none !important;
}

/* Parent-theme duplicates inside the nav row: a second search trigger and a
   my-account icon render on top of the centred menu links (pre-existing
   overlap, visible before this skin too). The same controls already live in
   the main bar (search pill + account icon), so on desktop the duplicates
   are hidden, not the controls themselves. Mobile keeps them (drawer UX). */
@media (min-width: 993px) {
    .col-full-nav > button.search-trigger,
    .col-full-nav > .shoptimizer-myaccount {
        display: none;
    }
}

/* secondary icons row in the nav bar (Compare / Wishlist with labels) */
.col-full-nav .header_icons a {
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--fg-1);
    font-size: 13px;
    font-weight: 600;
}
.col-full-nav .header_icons a:hover {
    color: var(--fg-0);
}

/* --- Mobile menu drawer (per .gs-mdrawer) -------------------------------- */
@media (max-width: 992px) {
    .main-navigation,
    .main-navigation .primary-navigation,
    .main-navigation ul.menu,
    .main-navigation ul.nav-menu {
        background: var(--bg-1);
        color: var(--fg-1);
    }
    .main-navigation ul.menu > li,
    .main-navigation ul.sub-menu li {
        border-color: var(--line-2);
    }
    .main-navigation ul.menu a,
    .main-navigation ul.menu a span {
        color: var(--fg-1);
        font-size: 15px;
        font-weight: 600;
    }
    /* Roomier top-level rows: the parent theme left the menu items crowded on phones.
       Pad the <li> row itself (not just the <a>) so the submenu-parent rows — whose
       height is driven by the chevron toggle, not the link — also grow. Uniform +8px
       per row (~20% more spacing between every top-level link). */
    .main-navigation ul.menu > li {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .main-navigation ul.sub-menu {
        background: var(--bg-1);
    }
    .main-navigation ul.sub-menu a,
    .main-navigation ul.sub-menu a span {
        color: var(--fg-secondary);
        font-size: 13.5px;
    }
    .main-navigation ul.menu li.current-menu-item > a,
    .main-navigation ul.menu li.current-menu-item > a span {
        color: var(--lime-500);
    }

    /* Drawer legibility (design .gs-dsec): the "Quick Links" custom-HTML widget
       and the Compare/Wishlist row ship with near-black text (#222 / #24211f)
       inherited from the light base — illegible on the dark drawer. Re-theme to
       the GPD section pattern: uppercase tertiary label, secondary links. */
    .col-full-nav .widget_custom_html,
    .col-full-nav .widget_text {
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid var(--line-2);
    }
    .col-full-nav .widget_custom_html h4,
    .col-full-nav .widget_text h4,
    .col-full-nav .widget_text .widgettitle {
        color: var(--fg-tertiary) !important;
        font-size: 11px !important;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        margin: 0 0 8px;
    }
    .col-full-nav .widget_custom_html a,
    .col-full-nav .widget_text a,
    .col-full-nav .textwidget a {
        color: var(--fg-secondary) !important;
        font-size: 13.5px;
    }
    .col-full-nav .widget_custom_html a:hover,
    .col-full-nav .widget_text a:hover,
    .col-full-nav .textwidget a:hover {
        color: var(--fg-0) !important;
    }
    /* Compare / Wishlist row — style.css paints the labels #24211f on phones */
    body .col-full-nav .header_icons a {
        color: var(--fg-1) !important;
    }
    body .col-full-nav .header_icons a:hover {
        color: var(--fg-0) !important;
    }
    /* the compare/wishlist glyphs are dark line icons → invert to white on dark */
    body .col-full-nav .header_icons a img {
        filter: brightness(0) invert(1);
        opacity: .85;
    }
}
/* hamburger trigger bars — white on the dark bar */
.menu-toggle .bar {
    background-color: var(--fg-0);
}
.menu-toggle,
.menu-toggle .bar-text {
    color: var(--fg-0);
}

/* ==========================================================================
   5b. TAX SUFFIX VISIBILITY — body.gpd-no-tax is toggled by main.js from the
   droix_get_product_currency AJAX response when the visitor's tax location
   has no rates (e.g. US): the cached "inc.TAX" suffixes and the header
   "(incl. tax)" note hide client-side, keeping cached HTML deterministic.
   ========================================================================== */
body.gpd-no-tax .woocommerce-price-suffix,
body.gpd-no-tax .gpd-cart-amt em {
    display: none !important;
}

/* ==========================================================================
   6. FOOTER (per .gs-footer) + copyright bar + footer language list
   ========================================================================== */

/* body prefix beats the Customizer footer colour printed inline after us */
body.theme-shoptimizer footer.site-footer {
    background: var(--bg-0);
    border-top: 1px solid var(--line-1);
    padding-top: 54px;
    padding-bottom: 26px;
    color: var(--fg-secondary);
}
footer.site-footer .widget-title {
    color: var(--fg-0);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.4;
    margin-bottom: 16px;
}
.site-footer .widget_nav_menu ul.menu li a {
    color: var(--fg-secondary);
    font-size: 13.5px;
    padding: 6px 0;
    display: inline-block;
    transition: color var(--dur-fast) var(--ease);
}
.site-footer .widget_nav_menu ul.menu li a:hover {
    color: var(--lime-500);
}
.site-footer .widget_nav_menu ul.sub-menu li a {
    color: var(--fg-tertiary);
}
.site-footer a {
    color: var(--fg-secondary);
}
.site-footer a:hover {
    color: var(--lime-500);
}

/* bottom bar */
body.theme-shoptimizer footer.copyright {
    background: var(--bg-0);
    border-top: 1px solid var(--line-1);
    margin-top: 0;
    color: var(--fg-tertiary);
    font-size: 12.5px;
}
footer.copyright .widget_text,
footer.copyright p {
    color: var(--fg-tertiary);
    font-size: 12.5px;
    line-height: 1.6;
}
footer.copyright a {
    color: var(--fg-secondary);
}
footer.copyright a:hover {
    color: var(--lime-500);
}

/* WPML footer language list (statics-footer) — quiet meta row on bg-0.
   WPML prints its admin-configured colours (white bg / #444 text per item)
   in an inline <style>; the li.wpml-ls-item / li.wpml-ls-current-language
   selectors below carry higher specificity than every WPML inline rule
   (max 0-3-1 there), so the white pills go transparent. */
.wpml-ls-statics-footer {
    background: var(--bg-0);
    border-top: 1px solid var(--line-2);
    padding: 14px 0;
}
.wpml-ls-statics-footer li.wpml-ls-item a.wpml-ls-link,
.wpml-ls-statics-footer li.wpml-ls-item .wpml-ls-link:link {
    background-color: transparent;
    color: var(--fg-tertiary);
    font-size: 12px;
}
.wpml-ls-statics-footer li.wpml-ls-item a.wpml-ls-link:hover,
.wpml-ls-statics-footer li.wpml-ls-item a.wpml-ls-link:focus {
    background-color: rgba(255, 255, 255, .06);
    color: var(--fg-secondary);
}
.wpml-ls-statics-footer li.wpml-ls-current-language > a.wpml-ls-link,
.wpml-ls-statics-footer li.wpml-ls-current-language > a.wpml-ls-link:link,
.wpml-ls-statics-footer li.wpml-ls-current-language:hover > a.wpml-ls-link {
    background-color: transparent;
    color: var(--lime-500);
}
/* "(German)" suffix in the footer list — quieter than the native name */
.wpml-ls-statics-footer .wpml-ls-display {
    color: var(--fg-disabled);
}

/* ==========================================================================
   7. THIRD-PARTY DARK FIXES
   ========================================================================== */

/* Elementor content inherits the dark-shell text colour cleanly (home page
   sections define their own colours; this only fixes inherit chains). */
.elementor-section,
.elementor-widget {
    color: inherit;
}

/* ==========================================================================
   8. TRANSITIONAL LIGHT SCOPE
   Pages whose interiors are reskinned in later phases (checkout, my-account,
   generic pages) keep a white content panel so their existing light design
   stays legible on the dark canvas. Shop archives, the home page, and the
   blog (`.gpd-blog` body class, phase B1 port — see inc/blog.php) are
   excluded — they live on the dark canvas now.
   ========================================================================== */

body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content {
    background: var(--fg-0); /* white panel */
    color: #43454b;          /* transitional literal: droix light body colour */
}

/* reset the dark generics inside the white panel (transitional literals) */
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content h1,
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content h2,
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content h3,
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content h4,
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content h5,
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content h6 {
    color: #1d1f24;
}

body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content input[type="text"],
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content input[type="email"],
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content input[type="url"],
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content input[type="password"],
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content input[type="search"],
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content input[type="number"],
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content input[type="tel"],
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content textarea,
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content select {
    background: var(--fg-0);
    border: 1px solid #d9d9d9;
    color: #1d1f24;
}
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content input:focus,
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content textarea:focus,
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content select:focus {
    border-color: var(--lime-500);
    background: var(--fg-0);
}
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content ::placeholder {
    color: #9aa0a6;
}

body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content .woocommerce-breadcrumb,
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content .rank-math-breadcrumb,
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content .rank-math-breadcrumb p,
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content .rank-math-breadcrumb a,
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content .woocommerce-breadcrumb a {
    color: #767a80;
}

body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content table,
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content table th,
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content table td {
    border-color: #e4e4e4;
}

body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content .woocommerce-pagination a.page-numbers,
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content .woocommerce-pagination span.page-numbers,
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content nav.pagination .page-numbers {
    background: #f4f4f4;
    border-color: #e0e0e0;
    color: #1d1f24;
}
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content .woocommerce-pagination span.page-numbers.current,
body:not(.home):not(.gpd-home-surface):not(.woocommerce-checkout):not(.tax-product_cat):not(.tax-product_tag):not(.post-type-archive-product):not(.single-product):not(.woocommerce-cart):not(.gpd-blog):not(.gpd-kb):not(.gpd-compare) #content.site-content nav.pagination .page-numbers.current {
    background: var(--lime-500);
    border-color: var(--lime-500);
    color: #0A0D0F;
}

/* ==========================================================================
   9. DARK-CANVAS ARCHIVE LEGIBILITY (category pages stay on the dark canvas;
      their white product cards from category.css remain as light cards)
   ========================================================================== */

body.tax-product_cat .archive-header,
body.tax-product_tag .archive-header,
body.post-type-archive-product .archive-header,
body.tax-product_cat .term-description,
body.tax-product_tag .term-description,
body.post-type-archive-product .term-description {
    color: var(--fg-secondary);
}
/* long-form SEO copy below the grid */
body.tax-product_cat #content,
body.tax-product_tag #content,
body.post-type-archive-product #content {
    color: var(--fg-1);
}

/* category.css loads AFTER this file and paints the archive shell light
   (`body.archive .shoptimizer-archive {background:#FAFAFA}` 0-2-1 and
   `… .archive-header {background:#fff}` 0-3-1) — with the light text above
   that produced white-on-white. The extra .theme-shoptimizer class wins on
   specificity and puts the shell back on the dark canvas; the white product
   cards from category.css stay as light cards. */
body.theme-shoptimizer.archive .shoptimizer-archive {
    background-color: var(--bg-2);
}
body.theme-shoptimizer.archive .shoptimizer-archive .archive-header {
    background: transparent;
    border-top: 1px solid transparent;
    border-bottom: 1px solid var(--line-2);
}
body.theme-shoptimizer.archive .shoptimizer-archive .archive-header .woocommerce-breadcrumb .separator + a:hover {
    color: var(--lime-500); /* category.css hover is legacy olive #B0CB1F */
}
/* filters sidebar / sort row sit directly on the dark canvas */
body.theme-shoptimizer.archive #secondary,
body.theme-shoptimizer.archive .shoptimizer-sorting {
    color: var(--fg-1);
}
body.theme-shoptimizer.archive #secondary .widget-title {
    color: var(--fg-0);
}
body.theme-shoptimizer.archive #secondary a {
    color: var(--fg-secondary);
}
body.theme-shoptimizer.archive #secondary a:hover {
    color: var(--fg-0);
}

/* ==========================================================================
   Flow-chrome parity pass (2026-06-11) — Flow Site - Desktop.html header
   (flow-chrome.jsx + flow.css + theme-alt-global.css scheme: informational
   accents teal, lime reserved for price/CTA/cart) and the Product Page.html
   footer (newsletter band + © bar + payment marks).
   ========================================================================== */

/* ── utility bar: brand strip right of the links (.fl-util .brandstrip) ──── */
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}
.gpd-util-brandstrip {
    color: var(--fg-tertiary);
    font-size: 12.5px;
    white-space: nowrap;
}
.gpd-util-brandstrip b {
    color: var(--fg-secondary);
    font-weight: 600;
}
.top-bar .gpd-util-brandstrip a {
    color: var(--teal-500); /* match footer DROIX link: teal inactive → lime on hover (beats .top-bar a #efefef) */
    text-decoration: none;
    transition: color var(--dur-fast, .15s) var(--ease, ease);
}
.gpd-util-brandstrip a:hover {
    color: var(--lime-500);
}
@media (max-width: 900px) {
    .gpd-util-brandstrip { display: none; }
}

/* ── search go-button → teal (.fl-search .go under data-accent) ──────────── */
.site-search form button[type="submit"],
.widget_product_search form button[type="submit"] {
    background: var(--acc);
}
.site-search form button[type="submit"]:hover {
    background: var(--acc);
    filter: brightness(1.08);
}

/* ── nav: active item teal (.fl-navlink.active under data-accent) ────────── */
.main-navigation .menu > li.current-menu-item > a.main-menu-link > span,
.main-navigation .menu > li.current-menu-ancestor > a.main-menu-link > span,
.main-navigation .menu > li.current-product-ancestor > a.main-menu-link > span,
.main-navigation .menu > li.current-product-parent > a.main-menu-link > span {
    color: var(--acc);
}
.main-navigation .menu > li.menu-item-has-children:hover > a.main-menu-link > span::after {
    background: var(--acc);
}

/* ── footer logo: GPD + lime STORE badge (design Logo) ───────────────────── */
.site-footer .gpd-foot-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.site-footer .gpd-foot-logo-gpd {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #fff;
}
.site-footer .gpd-foot-logo-store {
    background: var(--lime-500);
    color: #0A0D0F;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 3px 7px;
    border-radius: 5px;
}

/* ── footer grid (design .gs-footer-cols: 1fr 1fr 1fr 1.4fr) ──────────────
   Top row = logo + social icons spanning all columns (custom_html widget),
   then Shop · Support · Company link columns and the "Stay in the game"
   newsletter as the FOURTH column (rendered via dynamic_sidebar_after). */
@media (min-width: 993px) {
    /* the droix base wraps the three nav widgets (+ the appended newsletter
       column) in .footer-nav-wrapper (flex) — that wrapper IS the column row */
    .site-footer .footer-nav-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1.4fr;
        gap: 0 36px;
        align-items: start;
        border-bottom: 0;
        padding-bottom: 0;
    }
    footer.site-footer > .col-full > .widget_custom_html {
        padding-bottom: 30px;
        border-bottom: 1px solid var(--line-1);
        margin-bottom: 34px;
    }
}
/* link lists are single-column (droix base lays them as a 2-col grid) */
.site-footer .widget_nav_menu ul.menu {
    display: block !important;
    columns: 1 !important;
}
.site-footer .widget_nav_menu ul.menu li {
    display: block;
    width: 100%;
    float: none;
}

/* top row: logo left · social circles right (design .gs-soc) */
footer.site-footer .widget_custom_html,
footer.site-footer .widget_custom_html .textwidget {
    width: 100%;
}
.gpd-foot-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
}
.gpd-foot-soc {
    display: flex;
    gap: 10px;
}
.gpd-foot-soc a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-normal) var(--ease), color var(--dur-normal) var(--ease);
}
.gpd-foot-soc a:hover {
    background: var(--acc, var(--lime-500));
    color: var(--acc-ink, #0A0D0F);
}
.gpd-foot-soc svg {
    width: 17px;
    height: 17px;
}

/* ── newsletter — fourth grid column ("Stay in the game") ─────────────────── */
.gpd-foot-news-wrap {
    background: transparent;
    border-top: 0;
}
.gpd-foot-news {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding-top: 0;
    padding-bottom: 0;
}
.gpd-foot-news .cp {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.gpd-foot-news .cp b {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.4;
    margin-bottom: 4px;
}
.gpd-foot-news .cp span {
    color: var(--fg-secondary);
    font-size: 13px;
    line-height: 1.5;
}
.gpd-foot-newsform {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: none;
    position: relative;
    margin: 0;
}
.gpd-foot-newsform input[type="email"] {
    flex: 1;
    min-width: 0;
    height: 42px;
    background: var(--bg-1);
    border: 1px solid var(--line-1);
    border-radius: var(--r-md);
    color: #fff;
    font-size: 13.5px;
    padding: 0 14px;
}
.gpd-foot-newsform input[type="email"]:focus {
    border-color: var(--acc-line);
    outline: none;
}
.gpd-foot-newsform .gpd-foot-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.gpd-foot-newsform button[type="submit"] {
    height: 42px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--r-md);
    background: var(--lime-500);
    color: #0A0D0F;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: box-shadow var(--dur-normal) var(--ease);
}
.gpd-foot-newsform button[type="submit"]:hover { box-shadow: var(--shadow-glow); }
.gpd-foot-newsform.done input[type="email"],
.gpd-foot-newsform.done button[type="submit"] { display: none; }
.gpd-foot-news-msg {
    color: var(--acc);
    font-size: 13px;
}
.gpd-foot-tp { margin-left: 0; margin-top: 2px; }
/* No widget-internal overrides: the droix-trustpilot plugin's own light/dark
   theming (Widget Theme = Dark) is the single source of Trustpilot styling and
   must not be amended by the theme on any surface. */

/* ── bottom bar: © line left · payment marks right ───────────────────────── */
.gpd-foot-bottom {
    background: var(--bg-0);
    border-top: 1px solid var(--line-2);
}
.gpd-foot-bottom-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
    padding-top: 16px;
    padding-bottom: 16px;
}
body.theme-shoptimizer .gpd-foot-bottom .col-full.gpd-foot-bottom-in {
    max-width: 1280px !important;
}
.gpd-foot-copy {
    color: var(--fg-tertiary);
    font-size: 12.5px;
}
.gpd-foot-copy .gpd-foot-brand {
    color: var(--teal-500);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--dur-normal) var(--ease);
}
.gpd-foot-copy .gpd-foot-brand:hover {
    color: var(--lime-500);
}
.gpd-foot-pay {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.gpd-foot-pay img {
    background: #fff;
    border-radius: 4px;
    height: 22px;
    width: auto;
    padding: 4px 6px;
    box-sizing: border-box;
}

/* ── WPML flag grid: replaced by the compact top-bar switcher (design) ───── */
.wpml-ls-statics-footer {
    display: none;
}

/* ── Section eyebrows + "View all" links: teal accent — SINGLE SOURCE ─────────
   Every surface (home, 404, contact, account, kb, thank-you) used to colour
   these lime per-file. The GPD design uses teal for informational section
   eyebrows + "View all"/"Read all" links (matching the product-card and archive
   eyebrows that are already teal). This one rule, loaded site-wide via
   gpd-theme.css, controls the accent everywhere — change it here only. */
.gs-eyebrow,
.sec-eyebrow,
.gs-viewall,
.gs-viewall:hover {
    color: var(--teal-500) !important;
}

/* ── Global loading overlay (#page-loader) — dark GPD veil on every page ──────
   #page-loader is defined white in some surface sheets (my-account.css) and the
   dark fix previously lived only in archive/checkout sheets, so the overlay went
   white on other pages/flows. This one global rule (gpd-theme loads site-wide)
   makes it dark everywhere; my-account.css is fixed at source too since it loads
   after this on the account page. Matches the side-cart loader + checkout veil. */
#page-loader {
    background: rgba(6, 8, 11, 0.72) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
#page-loader .loader-icon {
    border-color: rgba(255, 255, 255, 0.15) !important;
    border-top-color: var(--lime-500, #D3FF5F) !important;
}