/* ==========================================================================
   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
   ========================================================================== */

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);
}
.top-bar-left .gpd-util-link .gpd-util-ic {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

/* --- Language selector: collapse the WPML legacy HORIZONTAL LIST into a
       .fl-cs-style pill + popover. This also fixes the pre-existing glitch
       where all 32 languages rendered expanded at top-right on load (the
       droix styles targeted the legacy-dropdown markup, but this site
       outputs wpml-ls-legacy-list-horizontal — a flat always-visible list,
       which inflated the top bar to ~890px tall). ------------------------- */

.top-bar-right {
    position: relative;
}
.top-bar-right .wpml-ls-statics-shortcode_actions {
    /* design .fl-cs-btn: plain text trigger, no pill chrome
       (!important mirrors style.css's own !important on these properties) */
    border: 0 !important;
    border-radius: 0 !important;
    background: none;
    width: auto;
    min-width: 150px;
    height: 28px;
    margin: 3px 0;
    padding: 0 26px 0 24px;
    position: relative;
    color: var(--fg-secondary);
    font-size: 12.5px;
    cursor: pointer;
}
/* globe icon (markup has no flag images — see report) */
.top-bar-right .wpml-ls-statics-shortcode_actions::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    width: 15px;
    height: 15px;
    margin-top: -8px;
    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%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%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%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events: none;
}
/* caret */
.top-bar-right .wpml-ls-statics-shortcode_actions::after {
    content: "";
    position: absolute;
    right: 9px;
    top: 50%;
    margin-top: -2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--fg-tertiary);
    pointer-events: none;
    transition: transform var(--dur-fast) var(--ease);
}
.top-bar-right .wpml-ls-statics-shortcode_actions:hover::after,
.top-bar-right .wpml-ls-statics-shortcode_actions:focus-within::after {
    transform: rotate(180deg);
}
.top-bar-right .wpml-ls-statics-shortcode_actions:hover,
.top-bar-right .wpml-ls-statics-shortcode_actions:focus-within {
    border-color: rgba(255, 255, 255, .25) !important; /* matches the !important above */
    color: var(--fg-0);
}

/* CLOSED state: the <ul> overlays the pill interior and shows only the
   current language. */
.top-bar-right .wpml-ls-statics-shortcode_actions > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    inset: 0 22px 0 24px;
    display: flex;
    align-items: center;
    overflow: hidden;
    width: auto;
}
.top-bar-right .wpml-ls-statics-shortcode_actions li.wpml-ls-item {
    display: none;
    margin: 0;
    width: 100%;
}
.top-bar-right .wpml-ls-statics-shortcode_actions li.wpml-ls-current-language {
    display: block;
}
.top-bar-right .wpml-ls-statics-shortcode_actions a.wpml-ls-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    font-size: 12.5px;
    line-height: 1.2;
    padding: 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* OPEN state (hover / keyboard focus): the <ul> becomes a dark scrollable
   popover per .fl-cs-pop. The pill chrome (border/globe/caret) stays put. */
.top-bar-right .wpml-ls-statics-shortcode_actions:hover > ul,
.top-bar-right .wpml-ls-statics-shortcode_actions:focus-within > ul {
    inset: auto;
    top: calc(100% + 7px);
    right: -1px;
    left: auto;
    position: absolute;
    display: block;
    min-width: 230px;
    max-height: min(480px, 70vh);
    overflow: auto;
    background: rgba(16, 20, 26, .98);
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 90;
}
/* invisible hover bridge across the 7px gap */
.top-bar-right .wpml-ls-statics-shortcode_actions:hover > ul::before,
.top-bar-right .wpml-ls-statics-shortcode_actions:focus-within > ul::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}
.top-bar-right .wpml-ls-statics-shortcode_actions:hover li.wpml-ls-item,
.top-bar-right .wpml-ls-statics-shortcode_actions:focus-within li.wpml-ls-item {
    display: block;
}
.top-bar-right .wpml-ls-statics-shortcode_actions:hover li.wpml-ls-item a.wpml-ls-link,
.top-bar-right .wpml-ls-statics-shortcode_actions:focus-within li.wpml-ls-item a.wpml-ls-link {
    padding: 8px 10px;
    border-radius: var(--r-md);
    color: var(--fg-1);
    font-size: 13px;
}
.top-bar-right .wpml-ls-statics-shortcode_actions:hover li.wpml-ls-item a.wpml-ls-link:hover,
.top-bar-right .wpml-ls-statics-shortcode_actions:focus-within li.wpml-ls-item a.wpml-ls-link:focus {
    background: rgba(255, 255, 255, .06);
    color: var(--fg-0);
}
.top-bar-right .wpml-ls-statics-shortcode_actions:hover li.wpml-ls-current-language a.wpml-ls-link,
.top-bar-right .wpml-ls-statics-shortcode_actions:focus-within li.wpml-ls-current-language a.wpml-ls-link {
    background: rgba(211, 255, 95, .08);
    color: var(--fg-0);
}
/* "(German)" suffix → quiet secondary text, no brackets */
.top-bar-right .wpml-ls .wpml-ls-bracket {
    display: none;
}
.top-bar-right .wpml-ls .wpml-ls-display {
    color: var(--fg-tertiary);
    font-size: 11.5px;
}

/* Mobile utility bar: tighter type so "Track your order / Start a Return"
   don't wrap to three lines beside the language pill. */
@media (max-width: 600px) {
    .top-bar-left .gpd-util-links {
        gap: 12px;
    }
    .top-bar-left .gpd-util-link {
        font-size: 11.5px;
        white-space: nowrap;
    }
    .top-bar-right .wpml-ls-statics-shortcode_actions {
        min-width: 120px;
    }
}

/* 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;
    }
}
.topbar_contactus_inner {
    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);
}

/* ==========================================================================
   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 {
        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 */
}

/* ==========================================================================
   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;
    z-index: 40;
}
/* 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 {
    border-bottom: 2px solid transparent;
    transition: 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,
.main-navigation .menu > li.menu-item-has-children:hover > a.main-menu-link,
.main-navigation .menu > li.current-menu-item > a.main-menu-link,
.main-navigation .menu > li.current-menu-ancestor > a.main-menu-link,
.main-navigation .menu > li.current-product-ancestor > a.main-menu-link,
.main-navigation .menu > li.current-product-parent > a.main-menu-link {
    border-bottom-color: 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;
    }
    .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);
    }
}
/* 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) #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) #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) #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) #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) #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) #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) #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) #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) #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) #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) #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) #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) #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) #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) #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) #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) #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) #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) #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) #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) #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) #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) #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) #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) #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) #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) #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) #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) #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) #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) #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) #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) #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;
}
@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 {
    border-bottom-color: 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; }
.gpd-foot-tp #droix-tp-widget-micro-trustscore { font-size: 13px; color: var(--fg-secondary); }
.gpd-foot-tp #droix-tp-widget-micro-trustscore strong { color: #fff; }

/* ── 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;
    padding-top: 16px;
    padding-bottom: 16px;
}
.gpd-foot-copy {
    color: var(--fg-tertiary);
    font-size: 12.5px;
}
.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;
}