/**
 * StrongMag Adaptive Glass UI — v1.4.9
 *
 * Frosted/matted glass surfaces inspired by premium automotive interfaces.
 * The visual system is deliberately scoped to the desktop navigation strip,
 * the vertical product-category rail and the My Account dropdown.
 *
 * JavaScript adds `.sm-glass-tone-light` / `.sm-glass-tone-dark` according to
 * the visible content behind each surface. CSS remains fully usable without
 * JavaScript and falls back to the light treatment.
 */

:root {
    /* Denser BYD-like matte diffusion: enough blur to dissolve underlying text,
       while preserving broad colour and light from the scene beneath. */
    --sm-glass-blur: 64px;
    --sm-glass-blur-heavy: 88px;
    --sm-glass-saturate: 82%;
    --sm-glass-backdrop-contrast: 48%;
    --sm-glass-radius-nav: 24px;
    --sm-glass-radius-panel: 18px;
    --sm-glass-shadow-light: 0 16px 44px rgba(15, 23, 42, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.48);
    --sm-glass-shadow-dark: 0 18px 48px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

/* --------------------------------------------------------------------------
   Shared adaptive tokens
   -------------------------------------------------------------------------- */

.strongmag-site .sm-glass-surface,
.strongmag-site .whb-header-bottom > .container,
.strongmag-site .wd-dropdown-cats,
.strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical > li > .wd-dropdown-menu,
.strongmag-site .wd-header-my-account > .wd-dropdown-my-account {
    --sm-glass-bg: rgba(244, 246, 248, 0.93);
    --sm-glass-bg-deep: rgba(248, 249, 250, 0.96);
    --sm-glass-mega-bg: rgba(244, 246, 248, 0.95);
    --sm-glass-border: rgba(255, 255, 255, 0.76);
    --sm-glass-separator: rgba(100, 116, 139, 0.18);
    --sm-glass-text: #172033;
    --sm-glass-text-muted: #475569;
    --sm-glass-active: #166534;
    --sm-glass-hover: rgba(255, 255, 255, 0.68);
    --sm-glass-active-bg: rgba(240, 253, 244, 0.70);
    --sm-glass-danger: #b91c1c;
    --sm-glass-shadow: var(--sm-glass-shadow-light);
}

.strongmag-site .sm-glass-tone-dark {
    --sm-glass-bg: rgba(24, 26, 29, 0.84);
    --sm-glass-bg-deep: rgba(24, 27, 30, 0.90);
    --sm-glass-mega-bg: rgba(20, 22, 25, 0.89);
    --sm-glass-border: rgba(255, 255, 255, 0.24);
    --sm-glass-separator: rgba(255, 255, 255, 0.14);
    --sm-glass-text: #f8fafc;
    --sm-glass-text-muted: #e2e8f0;
    --sm-glass-active: #bbf7d0;
    --sm-glass-hover: rgba(255, 255, 255, 0.10);
    --sm-glass-active-bg: rgba(34, 197, 94, 0.12);
    --sm-glass-danger: #fecaca;
    --sm-glass-shadow: var(--sm-glass-shadow-dark);
}

/* Slightly translucent layered fill creates a matte rather than "clear glass" look. */
.strongmag-site .sm-glass-surface,
.strongmag-site .whb-header-bottom > .container,
.strongmag-site .wd-dropdown-cats,
.strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical > li > .wd-dropdown-menu,
.strongmag-site .wd-header-my-account > .wd-dropdown-my-account {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.055)),
        var(--sm-glass-bg) !important;
    border: 1px solid var(--sm-glass-border) !important;
    box-shadow: var(--sm-glass-shadow) !important;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .strongmag-site .sm-glass-surface,
    .strongmag-site .whb-header-bottom > .container,
    .strongmag-site .wd-dropdown-cats,
    .strongmag-site .wd-header-my-account > .wd-dropdown-my-account {
        -webkit-backdrop-filter: blur(var(--sm-glass-blur)) saturate(var(--sm-glass-saturate)) contrast(var(--sm-glass-backdrop-contrast)) brightness(1.10);
        backdrop-filter: blur(var(--sm-glass-blur)) saturate(var(--sm-glass-saturate)) contrast(var(--sm-glass-backdrop-contrast)) brightness(1.10);
    }
}


/* --------------------------------------------------------------------------
   Desktop navigation strip — one floating frosted surface
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
    .strongmag-site .whb-header .whb-header-bottom {
        padding-block: 6px;
        background: transparent !important;
        border-bottom: 0 !important;
    }

    .strongmag-site .whb-header-bottom > .container {
        position: relative;
        min-height: 54px;
        padding-inline: 8px;
        border-radius: var(--sm-glass-radius-nav) !important;
        color: var(--sm-glass-text);
        overflow: visible;
        transition:
            background-color 220ms ease,
            border-color 220ms ease,
            color 220ms ease,
            box-shadow 220ms ease;
    }

    /* Main-nav text follows the current glass tone. */
    .strongmag-site .whb-header-bottom > .container .wd-nav-main > li > a {
        color: var(--sm-glass-text) !important;
        background: transparent;
        box-shadow: inset 0 -2px 0 transparent;
    }

    .strongmag-site .whb-header-bottom > .container .wd-nav-main > li:hover > a,
    .strongmag-site .whb-header-bottom > .container .wd-nav-main > li.current-menu-item > a,
    .strongmag-site .whb-header-bottom > .container .wd-nav-main > li.current-menu-ancestor > a,
    .strongmag-site .whb-header-bottom > .container .wd-nav-main > li.current-product_cat-ancestor > a {
        color: var(--sm-glass-active) !important;
        background: var(--sm-glass-active-bg) !important;
        box-shadow: inset 0 -2px 0 var(--sm-glass-active) !important;
    }

    /* Other Header Builder text/menu elements in the same strip. */
    .strongmag-site .whb-header-bottom > .container :where(.wd-nav-secondary, .wd-nav, .wd-header-text) > li > a,
    .strongmag-site .whb-header-bottom > .container .wd-header-text,
    .strongmag-site .whb-header-bottom > .container .wd-header-text a {
        color: var(--sm-glass-text) !important;
    }

    /* Keep StrongMag's primary category CTA, but give it a glassy green depth. */
    .strongmag-site .whb-header-bottom .wd-header-cats .menu-opener {
        color: #fff !important;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.01)),
            rgba(20, 83, 45, 0.88) !important;
        border-color: rgba(255, 255, 255, 0.20) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    }

    .strongmag-site .whb-header-bottom .wd-header-cats .menu-opener:hover,
    .strongmag-site .whb-header-bottom .wd-header-cats.wd-opened .menu-opener {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.01)),
            rgba(20, 83, 45, 0.96) !important;
    }
}

/* --------------------------------------------------------------------------
   Vertical category rail — matte glass over the hero/page beneath it
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
    .strongmag-site .wd-dropdown-cats {
        border-radius: var(--sm-glass-radius-panel) !important;
        color: var(--sm-glass-text);
        /* Keep overflow visible: WoodMart mega-menus are positioned outside the rail. */
        overflow: visible !important;
        transition:
            background-color 220ms ease,
            border-color 220ms ease,
            color 220ms ease,
            box-shadow 220ms ease;
    }

    /* Prevent WoodMart's inner list from painting an opaque second surface. */
    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical {
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical > li {
        border-color: var(--sm-glass-separator) !important;
    }

    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical > li > a {
        color: var(--sm-glass-text) !important;
        background: transparent !important;
        transition: color 140ms ease, background-color 140ms ease;
    }

    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical > li:hover > a,
    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical > li.current-menu-item > a,
    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical > li.strongmag-menu-intent-active > a {
        color: var(--sm-glass-active) !important;
        background: var(--sm-glass-active-bg) !important;
    }

    /* Demo category SVGs are monochrome, so adapt them together with text. */
    .strongmag-site .wd-dropdown-cats.sm-glass-tone-dark .wd-nav-img {
        filter: brightness(0) invert(1);
        opacity: 0.90;
    }

    .strongmag-site .wd-dropdown-cats.sm-glass-tone-light .wd-nav-img {
        filter: none;
        opacity: 0.88;
    }
}

/* --------------------------------------------------------------------------
   Category mega-menus — floating adaptive matte glass

   Important: the category rail must keep overflow visible because each
   WoodMart mega-menu is a direct child of the corresponding category row and
   extends outside the rail. The 1.4.0 rail used overflow:hidden, which clipped
   those panels completely.
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu {
        border-radius: 22px !important;
        color: var(--sm-glass-text);
        overflow: hidden;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.07)),
            var(--sm-glass-mega-bg) !important;
        border: 1px solid var(--sm-glass-border) !important;
        box-shadow: var(--sm-glass-shadow) !important;
    }

    @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        .strongmag-site .wd-dropdown-cats
            > ul.wd-nav-vertical
            > li
            > .wd-dropdown-menu {
            -webkit-backdrop-filter: blur(var(--sm-glass-blur-heavy)) saturate(76%) contrast(42%) brightness(1.12);
            backdrop-filter: blur(var(--sm-glass-blur-heavy)) saturate(76%) contrast(42%) brightness(1.12);
        }
    }

    /* Do not let WoodMart's content wrapper repaint the glass with opaque white. */
    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu
        > .container.wd-entry-content {
        background: transparent !important;
    }

    /* Existing menu cards become subtle secondary panes instead of white tiles. */
    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu
        .elementor-widget-wd_extra_menu_list
        > .elementor-widget-container
        > ul.wd-sub-menu.mega-menu-list {
        background: rgba(255, 255, 255, 0.74) !important;
        border: 1px solid rgba(255, 255, 255, 0.78) !important;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
    }

    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu.sm-glass-tone-dark
        .elementor-widget-wd_extra_menu_list
        > .elementor-widget-container
        > ul.wd-sub-menu.mega-menu-list {
        background: rgba(255, 255, 255, 0.18) !important;
        border-color: rgba(255, 255, 255, 0.20) !important;
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16) !important;
    }

    /* Adapt the key mega-menu text to the sampled glass tone. */
    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu
        .mega-menu-list
        > li
        > a,
    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu
        :where(.woodmart-title-container, .wd-entities-title) {
        color: var(--sm-glass-text) !important;
    }

    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu
        .sub-sub-menu
        > li
        > a {
        color: var(--sm-glass-text-muted) !important;
    }

    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu
        .sub-sub-menu
        > li
        > a:hover {
        color: var(--sm-glass-active) !important;
    }

    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu
        .price {
        color: var(--sm-glass-active) !important;
    }
}

/* --------------------------------------------------------------------------
   My Account — adaptive matte glass
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
    .strongmag-site .whb-header .wd-header-my-account > .wd-dropdown-my-account {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.055)),
            var(--sm-glass-bg) !important;
        border-color: var(--sm-glass-border) !important;
        border-radius: var(--sm-glass-radius-panel) !important;
        color: var(--sm-glass-text);
        box-shadow: var(--sm-glass-shadow) !important;
        transition:
            background-color 220ms ease,
            border-color 220ms ease,
            color 220ms ease,
            box-shadow 220ms ease;
    }

    .strongmag-site .whb-header .wd-header-my-account
        > .wd-dropdown-my-account
        > ul.wd-sub-menu
        > li
        > a {
        color: var(--sm-glass-text) !important;
        background: transparent !important;
    }

    .strongmag-site .whb-header .wd-header-my-account
        > .wd-dropdown-my-account
        > ul.wd-sub-menu
        > li
        > a:hover,
    .strongmag-site .whb-header .wd-header-my-account
        > .wd-dropdown-my-account
        > ul.wd-sub-menu
        > li.is-active
        > a {
        color: var(--sm-glass-active) !important;
        background: var(--sm-glass-hover) !important;
    }

    .strongmag-site .whb-header .wd-header-my-account
        > .wd-dropdown-my-account
        > ul.wd-sub-menu
        > li.woocommerce-MyAccount-navigation-link--customer-logout {
        border-top-color: var(--sm-glass-separator) !important;
    }

    .strongmag-site .whb-header .wd-header-my-account
        > .wd-dropdown-my-account
        > ul.wd-sub-menu
        > li.woocommerce-MyAccount-navigation-link--customer-logout
        > a,
    .strongmag-site .whb-header .wd-header-my-account
        > .wd-dropdown-my-account
        > ul.wd-sub-menu
        > li.woocommerce-MyAccount-navigation-link--customer-logout
        > a:hover {
        color: var(--sm-glass-danger) !important;
    }

    .strongmag-site .whb-header .wd-header-my-account
        > .wd-dropdown-my-account
        > ul.wd-sub-menu
        > li.woocommerce-MyAccount-navigation-link--customer-logout
        > a:hover {
        background: rgba(239, 68, 68, 0.10) !important;
    }
}

/* --------------------------------------------------------------------------
   Graceful fallback when backdrop-filter is unavailable or reduced transparency
   is requested by the user/OS.
   -------------------------------------------------------------------------- */

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .strongmag-site .sm-glass-surface,
    .strongmag-site .whb-header-bottom > .container,
    .strongmag-site .wd-dropdown-cats,
    .strongmag-site .wd-header-my-account > .wd-dropdown-my-account {
        --sm-glass-bg: rgba(248, 250, 252, 0.96);
    }

    .strongmag-site .sm-glass-tone-dark {
        --sm-glass-bg: rgba(17, 24, 39, 0.96);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .strongmag-site .sm-glass-surface,
    .strongmag-site .whb-header-bottom > .container,
    .strongmag-site .wd-dropdown-cats,
    .strongmag-site .wd-header-my-account > .wd-dropdown-my-account {
        --sm-glass-bg: rgba(248, 250, 252, 0.96);
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .strongmag-site .sm-glass-tone-dark {
        --sm-glass-bg: rgba(17, 24, 39, 0.96);
    }
}

/* --------------------------------------------------------------------------
   v1.4.6 — BYD-style dense matte frost, layout-safe

   Important: WoodMart positions the category rail, mega-menu and account menu
   absolutely. Never change their position property merely to host an overlay;
   doing so pulls them into document flow and breaks the header/menu geometry.

   This version creates the denser matte veil entirely with layered backgrounds,
   backdrop-filter and inset highlights, leaving WoodMart positioning untouched.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    .strongmag-site .whb-header-bottom > .container,
    .strongmag-site .wd-dropdown-cats,
    .strongmag-site .wd-header-my-account > .wd-dropdown-my-account {
        background:
            linear-gradient(135deg, rgba(255,255,255,.30), rgba(255,255,255,.12)),
            linear-gradient(rgba(247,248,249,.10), rgba(247,248,249,.10)),
            var(--sm-glass-bg) !important;
        box-shadow:
            var(--sm-glass-shadow),
            inset 0 0 0 1px rgba(255,255,255,.16) !important;
    }

    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical > li > .wd-dropdown-menu {
        background:
            linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.14)),
            linear-gradient(rgba(247,248,249,.12), rgba(247,248,249,.12)),
            var(--sm-glass-mega-bg) !important;
        border-radius: 28px !important;
        box-shadow:
            var(--sm-glass-shadow),
            inset 0 0 0 1px rgba(255,255,255,.16) !important;
    }

    .strongmag-site .sm-glass-tone-dark,
    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical > li > .wd-dropdown-menu.sm-glass-tone-dark {
        box-shadow:
            var(--sm-glass-shadow),
            inset 0 0 0 1px rgba(255,255,255,.06) !important;
    }
}


/* --------------------------------------------------------------------------
   v1.4.9 — Optical glass architecture

   The previous versions made the surfaces increasingly opaque in an attempt
   to hide the hero content. That improved legibility, but it also removed the
   coloured, dimensional quality that makes the BYD treatment read as glass.

   More importantly, CSS backdrop-filter surfaces create a Backdrop Root.
   Applying the filter directly to the navigation container and category rail
   means the nested mega-menu cannot sample the original page backdrop cleanly.
   This version paints those two ancestor surfaces on ::before layers instead.
   The mega-menu is then free to blur the real page behind it.
   -------------------------------------------------------------------------- */

:root {
    --sm-optical-blur: 34px;
    --sm-optical-blur-mega: 46px;
    --sm-optical-saturate: 142%;
    --sm-optical-contrast: 96%;
    --sm-optical-light: rgba(236, 240, 244, 0.34);
    --sm-optical-light-strong: rgba(242, 245, 247, 0.40);
    --sm-optical-dark: rgba(20, 23, 27, 0.36);
    --sm-optical-rim: rgba(255, 255, 255, 0.62);
    --sm-optical-rim-dark: rgba(255, 255, 255, 0.24);
    --sm-optical-shadow:
        0 22px 54px rgba(15, 23, 42, 0.16),
        0 4px 12px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.60),
        inset 0 -1px 0 rgba(255, 255, 255, 0.14);
    --sm-optical-shadow-dark:
        0 24px 60px rgba(0, 0, 0, 0.30),
        0 4px 14px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

@media (min-width: 1025px) {
    /* These two elements contain other glass surfaces. Do not make them a
       Backdrop Root themselves; paint their frost on a sibling-like layer. */
    .strongmag-site .whb-header-bottom > .container,
    .strongmag-site .wd-dropdown-cats {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        isolation: isolate;
    }

    .strongmag-site .whb-header-bottom > .container::before,
    .strongmag-site .wd-dropdown-cats::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        border: 1px solid var(--sm-optical-rim);
        border-radius: inherit;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.035) 58%, rgba(255, 255, 255, 0.10)),
            var(--sm-optical-light);
        -webkit-backdrop-filter: blur(var(--sm-optical-blur)) saturate(var(--sm-optical-saturate)) contrast(var(--sm-optical-contrast));
        backdrop-filter: blur(var(--sm-optical-blur)) saturate(var(--sm-optical-saturate)) contrast(var(--sm-optical-contrast));
        box-shadow: var(--sm-optical-shadow);
    }

    .strongmag-site .whb-header-bottom > .container.sm-glass-tone-dark::before,
    .strongmag-site .wd-dropdown-cats.sm-glass-tone-dark::before {
        border-color: var(--sm-optical-rim-dark);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.015) 60%, rgba(255, 255, 255, 0.045)),
            var(--sm-optical-dark);
        box-shadow: var(--sm-optical-shadow-dark);
    }

    /* The rail radius is slightly softer than the large mega-panel. */
    .strongmag-site .wd-dropdown-cats::before {
        border-radius: 20px;
    }

    /* Mega-menu: coloured backdrop must remain visible, while detail is
       destroyed by blur. The edge + shadow, not an opaque white fill, makes
       the panel stand apart from the page. */
    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.025) 58%, rgba(255, 255, 255, 0.085)),
            rgba(236, 240, 244, 0.36) !important;
        border: 1px solid rgba(255, 255, 255, 0.66) !important;
        border-radius: 30px !important;
        -webkit-backdrop-filter: blur(var(--sm-optical-blur-mega)) saturate(138%) contrast(92%) !important;
        backdrop-filter: blur(var(--sm-optical-blur-mega)) saturate(138%) contrast(92%) !important;
        box-shadow: var(--sm-optical-shadow) !important;
    }

    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu.sm-glass-tone-dark {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.012) 60%, rgba(255, 255, 255, 0.04)),
            rgba(18, 21, 25, 0.40) !important;
        border-color: rgba(255, 255, 255, 0.25) !important;
        box-shadow: var(--sm-optical-shadow-dark) !important;
    }

    /* Inner cards should read as a second sheet of glass, not opaque white
       tiles. Their modest tint creates hierarchy while preserving depth. */
    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu
        .elementor-widget-wd_extra_menu_list
        > .elementor-widget-container
        > ul.wd-sub-menu.mega-menu-list {
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08)),
            rgba(248, 250, 252, 0.36) !important;
        border: 1px solid rgba(255, 255, 255, 0.68) !important;
        box-shadow:
            0 14px 34px rgba(15, 23, 42, 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.72),
            inset 0 -1px 0 rgba(255, 255, 255, 0.12) !important;
    }

    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu.sm-glass-tone-dark
        .elementor-widget-wd_extra_menu_list
        > .elementor-widget-container
        > ul.wd-sub-menu.mega-menu-list {
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.025)),
            rgba(28, 32, 37, 0.30) !important;
        border-color: rgba(255, 255, 255, 0.22) !important;
        box-shadow:
            0 16px 38px rgba(0, 0, 0, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    }

    /* My Account can use a direct backdrop filter because it does not host a
       nested frosted panel. Match the same optical recipe. */
    .strongmag-site .whb-header .wd-header-my-account > .wd-dropdown-my-account {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.035)),
            rgba(236, 240, 244, 0.38) !important;
        border: 1px solid rgba(255, 255, 255, 0.66) !important;
        -webkit-backdrop-filter: blur(38px) saturate(140%) contrast(94%) !important;
        backdrop-filter: blur(38px) saturate(140%) contrast(94%) !important;
        box-shadow: var(--sm-optical-shadow) !important;
    }

    .strongmag-site .whb-header .wd-header-my-account > .wd-dropdown-my-account.sm-glass-tone-dark {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.015)),
            rgba(18, 21, 25, 0.40) !important;
        border-color: rgba(255, 255, 255, 0.24) !important;
        box-shadow: var(--sm-optical-shadow-dark) !important;
    }
}


/* --------------------------------------------------------------------------
   v1.4.10 — Promote the top strip + left category rail to the same visual
   quality tier as the mega-menu.

   The mega-menu already had the stronger optical recipe. This pass applies a
   denser, more dimensional frosted treatment to the ancestor shells too, so
   the header strip and category rail read as deliberate glass components
   instead of flatter translucent containers.
   -------------------------------------------------------------------------- */
:root {
    --sm-shell-blur: 44px;
    --sm-shell-saturate: 152%;
    --sm-shell-contrast: 94%;
    --sm-shell-light: rgba(239, 243, 247, 0.48);
    --sm-shell-light-deep: rgba(243, 246, 249, 0.38);
    --sm-shell-dark: rgba(20, 23, 27, 0.42);
    --sm-shell-rim: rgba(255, 255, 255, 0.74);
    --sm-shell-rim-dark: rgba(255, 255, 255, 0.26);
    --sm-shell-shadow:
        0 26px 64px rgba(15, 23, 42, 0.16),
        0 8px 22px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        inset 0 -1px 0 rgba(255, 255, 255, 0.16);
    --sm-shell-shadow-dark:
        0 28px 68px rgba(0, 0, 0, 0.30),
        0 10px 24px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

@media (min-width: 1025px) {
    .strongmag-site .whb-header-bottom > .container::before,
    .strongmag-site .wd-dropdown-cats::before {
        border-color: var(--sm-shell-rim);
        background:
            radial-gradient(140% 100% at 0% 0%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.08) 34%, rgba(255, 255, 255, 0.00) 68%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06) 42%, rgba(255, 255, 255, 0.10) 100%),
            linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 58%, rgba(255, 255, 255, 0.09)),
            linear-gradient(180deg, var(--sm-shell-light), var(--sm-shell-light-deep)) !important;
        -webkit-backdrop-filter: blur(var(--sm-shell-blur)) saturate(var(--sm-shell-saturate)) contrast(var(--sm-shell-contrast));
        backdrop-filter: blur(var(--sm-shell-blur)) saturate(var(--sm-shell-saturate)) contrast(var(--sm-shell-contrast));
        box-shadow: var(--sm-shell-shadow) !important;
    }

    .strongmag-site .whb-header-bottom > .container.sm-glass-tone-dark::before,
    .strongmag-site .wd-dropdown-cats.sm-glass-tone-dark::before {
        border-color: var(--sm-shell-rim-dark);
        background:
            radial-gradient(140% 100% at 0% 0%, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.03) 36%, rgba(255, 255, 255, 0.00) 70%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0.05) 100%),
            linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01) 58%, rgba(255, 255, 255, 0.03)),
            var(--sm-shell-dark) !important;
        box-shadow: var(--sm-shell-shadow-dark) !important;
    }

    /* Slightly more generous geometry helps the top strip feel like a single
       premium glass bar instead of a flat narrow slab. */
    .strongmag-site .whb-header-bottom {
        padding-block: 8px;
    }

    .strongmag-site .whb-header-bottom > .container {
        min-height: 58px;
        padding-inline: 10px;
        border-radius: 26px !important;
    }

    .strongmag-site .wd-dropdown-cats {
        border-radius: 22px !important;
    }

    /* Give interactive rows/pills a faint inner sheen so the shell treatment
       is echoed inside the menu, without turning every item into a hard card. */
    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical > li > a {
        border-radius: 0 !important;
        background-image: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00));
    }

    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical > li:first-child > a {
        border-top-left-radius: 18px !important;
        border-top-right-radius: 18px !important;
    }

    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical > li:last-child > a {
        border-bottom-left-radius: 18px !important;
        border-bottom-right-radius: 18px !important;
    }

    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical > li:hover > a,
    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical > li.current-menu-item > a,
    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical > li.strongmag-menu-intent-active > a {
        background:
            linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.08)),
            var(--sm-glass-active-bg) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.40);
    }

    .strongmag-site .whb-header-bottom > .container .wd-nav-main > li > a {
        border-radius: 16px;
        padding-inline: 16px;
        min-height: 42px;
    }

    .strongmag-site .whb-header-bottom > .container .wd-nav-main > li:hover > a,
    .strongmag-site .whb-header-bottom > .container .wd-nav-main > li.current-menu-item > a,
    .strongmag-site .whb-header-bottom > .container .wd-nav-main > li.current-menu-ancestor > a,
    .strongmag-site .whb-header-bottom > .container .wd-nav-main > li.current-product_cat-ancestor > a {
        background:
            linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.10)),
            var(--sm-glass-active-bg) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.56),
            inset 0 -2px 0 var(--sm-glass-active) !important;
    }

    /* Categories opener should feel integrated with the new shell, not like a
       flatter solid button. */
    .strongmag-site .whb-header-bottom .wd-header-cats .menu-opener {
        background:
            radial-gradient(130% 100% at 0% 0%, rgba(255,255,255,0.18), rgba(255,255,255,0.04) 42%, rgba(255,255,255,0.00) 70%),
            linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.01)),
            rgba(20, 83, 45, 0.82) !important;
        border-color: rgba(255,255,255,0.22) !important;
        box-shadow:
            0 14px 28px rgba(20, 83, 45, 0.18),
            inset 0 1px 0 rgba(255,255,255,0.18),
            inset 0 -1px 0 rgba(255,255,255,0.05) !important;
    }

    .strongmag-site .whb-header-bottom .wd-header-cats .menu-opener:hover,
    .strongmag-site .whb-header-bottom .wd-header-cats.wd-opened .menu-opener {
        background:
            radial-gradient(130% 100% at 0% 0%, rgba(255,255,255,0.22), rgba(255,255,255,0.05) 42%, rgba(255,255,255,0.00) 70%),
            linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)),
            rgba(20, 83, 45, 0.90) !important;
    }
}


/* --------------------------------------------------------------------------
   v1.4.12 — More breathing room inside the top glass navigation strip

   The glass shell was visually polished but the controls still sat a little
   too close to its top/bottom edge. Increase the internal padding without
   changing the navigation order or the established category/mega-menu logic.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    .strongmag-site .whb-header-bottom > .container {
        box-sizing: border-box;
        min-height: 72px;
        padding: 8px 16px !important;
    }

    /* Keep the controls vertically centered within the roomier glass shell. */
    .strongmag-site .whb-header-bottom > .container > .whb-column,
    .strongmag-site .whb-header-bottom > .container .whb-column {
        align-items: center;
    }

    .strongmag-site .whb-header-bottom > .container .wd-nav-main > li > a,
    .strongmag-site .whb-header-bottom > .container .wd-tools-element > a {
        min-height: 46px;
    }

    .strongmag-site .whb-header-bottom .wd-header-cats .menu-opener {
        min-height: 50px;
    }
}

/* --------------------------------------------------------------------------
   v1.4.13 — Keep horizontal breathing room, restore compact vertical geometry

   Preserve the wider left/right padding introduced in 1.4.12, but return the
   top strip and its controls to the earlier vertical dimensions so the glass
   bar no longer overlaps the dropdown/menu content below it.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    .strongmag-site .whb-header-bottom > .container {
        min-height: 58px;
        padding: 0 16px !important;
    }

    .strongmag-site .whb-header-bottom > .container .wd-nav-main > li > a {
        min-height: 42px;
    }

    .strongmag-site .whb-header-bottom > .container .wd-tools-element > a,
    .strongmag-site .whb-header-bottom .wd-header-cats .menu-opener {
        min-height: 44px;
    }
}

/* --------------------------------------------------------------------------
   v1.4.14 — Add top breathing room without changing the lower menu geometry

   The Categories opener visually sat almost flush with the top edge of the
   glass strip. Extend only the optical shell upward so the green control is
   fully framed, while keeping the actual navigation flow and dropdown anchor
   positions unchanged.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    .strongmag-site .whb-header-bottom > .container::before {
        inset: -8px 0 0 0;
        border-radius: 28px;
    }
}


/* --------------------------------------------------------------------------
   v1.4.15 — My Account dark-mode legibility

   Header-navigation.css intentionally gives account links a fixed dark ink
   colour. When adaptive glass switches the dropdown to its dark tone, override
   that fixed colour explicitly so normal account destinations remain white.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    .strongmag-site .whb-header .wd-header-my-account
        > .wd-dropdown-my-account.sm-glass-tone-dark
        > ul.wd-sub-menu
        > li:not(.woocommerce-MyAccount-navigation-link--customer-logout)
        > a {
        color: #ffffff !important;
    }

    .strongmag-site .whb-header .wd-header-my-account
        > .wd-dropdown-my-account.sm-glass-tone-dark
        > ul.wd-sub-menu
        > li:not(.woocommerce-MyAccount-navigation-link--customer-logout)
        > a:hover,
    .strongmag-site .whb-header .wd-header-my-account
        > .wd-dropdown-my-account.sm-glass-tone-dark
        > ul.wd-sub-menu
        > li.is-active:not(.woocommerce-MyAccount-navigation-link--customer-logout)
        > a {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.12) !important;
    }

    .strongmag-site .whb-header .wd-header-my-account
        > .wd-dropdown-my-account.sm-glass-tone-dark
        > ul.wd-sub-menu
        > li.woocommerce-MyAccount-navigation-link--customer-logout {
        border-top-color: rgba(255, 255, 255, 0.18) !important;
    }
}


/* --------------------------------------------------------------------------
   v1.4.16 — Active states that belong to the glass system

   Replace the older pale-green filled pills/rows with quieter, optical states:
   active navigation keeps a subtle green cue, but the glass remains visible.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    /* Top navigation: hover is neutral glass; current page is a restrained
       green-tinted pane rather than an opaque green/white pill. */
    .strongmag-site .whb-header-bottom > .container .wd-nav-main > li > a {
        border: 1px solid transparent;
        border-radius: 13px;
        box-shadow: none !important;
    }

    .strongmag-site .whb-header-bottom > .container .wd-nav-main > li:hover > a {
        color: var(--sm-glass-text) !important;
        background:
            linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.055)) !important;
        border-color: rgba(255,255,255,.30);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.44) !important;
    }

    .strongmag-site .whb-header-bottom > .container .wd-nav-main > li.current-menu-item > a,
    .strongmag-site .whb-header-bottom > .container .wd-nav-main > li.current-menu-ancestor > a,
    .strongmag-site .whb-header-bottom > .container .wd-nav-main > li.current-product_cat-ancestor > a {
        color: var(--sm-glass-active) !important;
        background:
            radial-gradient(120% 110% at 50% 0%, rgba(255,255,255,.28), rgba(255,255,255,.06) 52%, transparent 76%),
            rgba(22,101,52,.045) !important;
        border-color: rgba(22,101,52,.12);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.56),
            inset 0 -2px 0 rgba(22,101,52,.52),
            0 5px 14px rgba(15,23,42,.035) !important;
    }

    /* Left category rail: avoid a full mint block. Active/intent state is
       indicated by green ink + a soft left-to-right glow + a thin edge cue. */
    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical > li:hover > a {
        color: var(--sm-glass-text) !important;
        background:
            linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.04) 60%, transparent) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.30) !important;
    }

    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical > li.current-menu-item > a,
    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical > li.strongmag-menu-intent-active > a {
        color: var(--sm-glass-active) !important;
        background:
            linear-gradient(90deg, rgba(22,101,52,.10), rgba(22,101,52,.035) 44%, rgba(255,255,255,.04) 72%, transparent) !important;
        box-shadow:
            inset 3px 0 0 rgba(22,101,52,.52),
            inset 0 1px 0 rgba(255,255,255,.34) !important;
    }

    /* Dark adaptive glass gets the same hierarchy with lighter green cues. */
    .strongmag-site .whb-header-bottom > .container.sm-glass-tone-dark .wd-nav-main > li.current-menu-item > a,
    .strongmag-site .whb-header-bottom > .container.sm-glass-tone-dark .wd-nav-main > li.current-menu-ancestor > a,
    .strongmag-site .whb-header-bottom > .container.sm-glass-tone-dark .wd-nav-main > li.current-product_cat-ancestor > a {
        background:
            radial-gradient(120% 110% at 50% 0%, rgba(255,255,255,.10), rgba(255,255,255,.025) 54%, transparent 78%),
            rgba(74,222,128,.07) !important;
        border-color: rgba(187,247,208,.18);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.14),
            inset 0 -2px 0 rgba(187,247,208,.55) !important;
    }

    .strongmag-site .wd-dropdown-cats.sm-glass-tone-dark > ul.wd-nav-vertical > li.current-menu-item > a,
    .strongmag-site .wd-dropdown-cats.sm-glass-tone-dark > ul.wd-nav-vertical > li.strongmag-menu-intent-active > a {
        background:
            linear-gradient(90deg, rgba(74,222,128,.14), rgba(74,222,128,.045) 46%, rgba(255,255,255,.025) 72%, transparent) !important;
        box-shadow:
            inset 3px 0 0 rgba(187,247,208,.62),
            inset 0 1px 0 rgba(255,255,255,.12) !important;
    }

    /* Mega-menu link hover/selection: keep it equally understated so the
       inner glass cards do not suddenly turn into flat mint chips. */
    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu
        .mega-menu-list a:hover,
    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu
        .mega-menu-list .current-menu-item > a {
        color: var(--sm-glass-active) !important;
        background:
            linear-gradient(90deg, rgba(22,101,52,.075), rgba(22,101,52,.025) 72%, transparent) !important;
        box-shadow: inset 2px 0 0 rgba(22,101,52,.32) !important;
    }
}

/* --------------------------------------------------------------------------
   v1.4.17 — Floating glass-pill active states

   Inspired by the soft highlighted "Send Reminder" row in the supplied
   reference: active destinations now sit on a rounded translucent glass pill
   with a gentle highlight sweep and soft lift, instead of a flat mint block or
   underline. Geometry stays unchanged; this is a visual-state override only.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    /* TOP NAV — soft floating glass capsule. */
    .strongmag-site .whb-header-bottom > .container .wd-nav-main > li.current-menu-item > a,
    .strongmag-site .whb-header-bottom > .container .wd-nav-main > li.current-menu-ancestor > a,
    .strongmag-site .whb-header-bottom > .container .wd-nav-main > li.current-product_cat-ancestor > a {
        color: var(--sm-glass-active) !important;
        border: 1px solid rgba(255, 255, 255, 0.52) !important;
        border-radius: 18px !important;
        background:
            linear-gradient(90deg,
                rgba(255, 255, 255, 0.12) 0%,
                rgba(255, 255, 255, 0.28) 48%,
                rgba(255, 255, 255, 0.42) 78%,
                rgba(255, 255, 255, 0.20) 100%),
            rgba(22, 101, 52, 0.055) !important;
        box-shadow:
            0 8px 22px rgba(15, 23, 42, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.72),
            inset 0 -1px 0 rgba(255, 255, 255, 0.14) !important;
        -webkit-backdrop-filter: blur(16px) saturate(135%);
        backdrop-filter: blur(16px) saturate(135%);
    }

    /* Remove the older underline cue completely. */
    .strongmag-site .whb-header-bottom > .container .wd-nav-main > li.current-menu-item > a,
    .strongmag-site .whb-header-bottom > .container .wd-nav-main > li.current-menu-ancestor > a,
    .strongmag-site .whb-header-bottom > .container .wd-nav-main > li.current-product_cat-ancestor > a {
        text-decoration: none !important;
    }

    /* LEFT RAIL — same pill language, inset from the shell edges so it reads
       as a floating highlighted row like the reference. */
    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical > li.current-menu-item > a,
    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical > li.strongmag-menu-intent-active > a {
        width: calc(100% - 16px) !important;
        margin-inline: 8px !important;
        box-sizing: border-box;
        color: var(--sm-glass-active) !important;
        border: 1px solid rgba(255, 255, 255, 0.48) !important;
        border-radius: 16px !important;
        background:
            linear-gradient(90deg,
                rgba(255, 255, 255, 0.10) 0%,
                rgba(255, 255, 255, 0.22) 48%,
                rgba(255, 255, 255, 0.38) 82%,
                rgba(255, 255, 255, 0.18) 100%),
            rgba(22, 101, 52, 0.050) !important;
        box-shadow:
            0 7px 18px rgba(15, 23, 42, 0.065),
            inset 0 1px 0 rgba(255, 255, 255, 0.64),
            inset 0 -1px 0 rgba(255, 255, 255, 0.12) !important;
        -webkit-backdrop-filter: blur(14px) saturate(130%);
        backdrop-filter: blur(14px) saturate(130%);
    }

    /* MEGA-MENU LINKS — compact version of the same capsule. */
    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu
        .mega-menu-list .current-menu-item > a {
        display: inline-flex;
        align-items: center;
        width: auto;
        max-width: 100%;
        padding: 7px 13px !important;
        margin-inline: -2px;
        color: var(--sm-glass-active) !important;
        border: 1px solid rgba(255, 255, 255, 0.46) !important;
        border-radius: 14px !important;
        background:
            linear-gradient(90deg,
                rgba(255, 255, 255, 0.10),
                rgba(255, 255, 255, 0.34) 76%,
                rgba(255, 255, 255, 0.16)),
            rgba(22, 101, 52, 0.045) !important;
        box-shadow:
            0 6px 16px rgba(15, 23, 42, 0.055),
            inset 0 1px 0 rgba(255, 255, 255, 0.60) !important;
    }

    /* DARK GLASS — same optical pill, but made from light rather than green
       opacity, matching the supplied blue/dark reference behaviour. */
    .strongmag-site .whb-header-bottom > .container.sm-glass-tone-dark .wd-nav-main > li.current-menu-item > a,
    .strongmag-site .whb-header-bottom > .container.sm-glass-tone-dark .wd-nav-main > li.current-menu-ancestor > a,
    .strongmag-site .whb-header-bottom > .container.sm-glass-tone-dark .wd-nav-main > li.current-product_cat-ancestor > a,
    .strongmag-site .wd-dropdown-cats.sm-glass-tone-dark > ul.wd-nav-vertical > li.current-menu-item > a,
    .strongmag-site .wd-dropdown-cats.sm-glass-tone-dark > ul.wd-nav-vertical > li.strongmag-menu-intent-active > a {
        color: #ffffff !important;
        border-color: rgba(255, 255, 255, 0.22) !important;
        background:
            linear-gradient(90deg,
                rgba(255, 255, 255, 0.08) 0%,
                rgba(255, 255, 255, 0.16) 50%,
                rgba(255, 255, 255, 0.24) 80%,
                rgba(255, 255, 255, 0.12) 100%) !important;
        box-shadow:
            0 9px 24px rgba(0, 0, 0, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.22),
            inset 0 -1px 0 rgba(255, 255, 255, 0.05) !important;
    }
}


/* --------------------------------------------------------------------------
   v1.4.18 — Moving top-navigation glass pill

   The active glass capsule is now one shared surface. It rests under the
   current page, glides to whichever top-level item is hovered, and returns to
   the current page when the pointer leaves the navigation. This avoids having
   a permanent active pill plus a separate hover treatment at the same time.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    .strongmag-site .whb-header-bottom > .container .wd-nav-main.strongmag-nav-pill-ready {
        position: relative;
        isolation: isolate;
    }

    .strongmag-site .whb-header-bottom > .container .wd-nav-main.strongmag-nav-pill-ready > li {
        position: relative;
        z-index: 2;
    }

    .strongmag-site .whb-header-bottom > .container .wd-nav-main .strongmag-nav-hover-pill {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        pointer-events: none;
        opacity: 0;
        border: 1px solid rgba(255, 255, 255, 0.52);
        border-radius: 18px;
        background:
            linear-gradient(90deg,
                rgba(255, 255, 255, 0.12) 0%,
                rgba(255, 255, 255, 0.28) 48%,
                rgba(255, 255, 255, 0.42) 78%,
                rgba(255, 255, 255, 0.20) 100%),
            rgba(22, 101, 52, 0.055);
        box-shadow:
            0 8px 22px rgba(15, 23, 42, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.72),
            inset 0 -1px 0 rgba(255, 255, 255, 0.14);
        -webkit-backdrop-filter: blur(16px) saturate(135%);
        backdrop-filter: blur(16px) saturate(135%);
        will-change: transform, width, height, opacity;
        transition:
            transform 210ms cubic-bezier(.22,.75,.20,1),
            width 210ms cubic-bezier(.22,.75,.20,1),
            height 210ms cubic-bezier(.22,.75,.20,1),
            opacity 120ms ease;
    }

    /* Once the moving surface is available, remove the static active capsule
       from the link itself. The shared pill now provides that appearance. */
    .strongmag-site .whb-header-bottom > .container .wd-nav-main.strongmag-nav-pill-ready
        > li.current-menu-item > a,
    .strongmag-site .whb-header-bottom > .container .wd-nav-main.strongmag-nav-pill-ready
        > li.current-menu-ancestor > a,
    .strongmag-site .whb-header-bottom > .container .wd-nav-main.strongmag-nav-pill-ready
        > li.current-product_cat-ancestor > a {
        border-color: transparent !important;
        background: transparent !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* Only the item currently carrying the moving pill gets the accent ink.
       This makes the state feel as if it genuinely travels from Home to the
       hovered destination instead of duplicating itself. */
    .strongmag-site .whb-header-bottom > .container .wd-nav-main.strongmag-nav-pill-ready
        > li > a {
        transition: color 150ms ease !important;
    }

    .strongmag-site .whb-header-bottom > .container .wd-nav-main.strongmag-nav-pill-ready
        > li.current-menu-item:not(.strongmag-nav-pill-target) > a,
    .strongmag-site .whb-header-bottom > .container .wd-nav-main.strongmag-nav-pill-ready
        > li.current-menu-ancestor:not(.strongmag-nav-pill-target) > a,
    .strongmag-site .whb-header-bottom > .container .wd-nav-main.strongmag-nav-pill-ready
        > li.current-product_cat-ancestor:not(.strongmag-nav-pill-target) > a {
        color: var(--sm-glass-text) !important;
    }

    .strongmag-site .whb-header-bottom > .container .wd-nav-main.strongmag-nav-pill-ready
        > li.strongmag-nav-pill-target > a {
        color: var(--sm-glass-active) !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .strongmag-site .whb-header-bottom > .container.sm-glass-tone-dark
        .wd-nav-main .strongmag-nav-hover-pill {
        border-color: rgba(255, 255, 255, 0.22);
        background:
            linear-gradient(90deg,
                rgba(255, 255, 255, 0.08) 0%,
                rgba(255, 255, 255, 0.16) 50%,
                rgba(255, 255, 255, 0.24) 80%,
                rgba(255, 255, 255, 0.12) 100%);
        box-shadow:
            0 9px 24px rgba(0, 0, 0, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.22),
            inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    }

    .strongmag-site .whb-header-bottom > .container.sm-glass-tone-dark
        .wd-nav-main.strongmag-nav-pill-ready > li.strongmag-nav-pill-target > a {
        color: #ffffff !important;
    }
}


/* --------------------------------------------------------------------------
   v1.4.19 — Unified moving glass-pill hover states

   Reuse the top-navigation "Send Reminder" style inside the left category
   rail and the mega-menu cards. JavaScript moves one physical glass capsule
   within each menu surface, so hover feels continuous rather than spawning
   separate flat highlights under every link.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    /* LEFT CATEGORY RAIL --------------------------------------------------- */
    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical.strongmag-rail-pill-ready {
        position: relative;
        isolation: isolate;
    }

    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical.strongmag-rail-pill-ready > li {
        position: relative;
        z-index: 2;
    }

    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical .strongmag-rail-hover-pill {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        pointer-events: none;
        opacity: 0;
        border: 1px solid rgba(255, 255, 255, 0.52);
        border-radius: 17px;
        background:
            linear-gradient(90deg,
                rgba(255, 255, 255, 0.12) 0%,
                rgba(255, 255, 255, 0.28) 48%,
                rgba(255, 255, 255, 0.42) 78%,
                rgba(255, 255, 255, 0.20) 100%),
            rgba(22, 101, 52, 0.055);
        box-shadow:
            0 8px 22px rgba(15, 23, 42, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.72),
            inset 0 -1px 0 rgba(255, 255, 255, 0.14);
        -webkit-backdrop-filter: blur(16px) saturate(135%);
        backdrop-filter: blur(16px) saturate(135%);
        will-change: transform, width, height, opacity;
        transition:
            transform 210ms cubic-bezier(.22,.75,.20,1),
            width 210ms cubic-bezier(.22,.75,.20,1),
            height 210ms cubic-bezier(.22,.75,.20,1),
            opacity 120ms ease;
    }

    /* Once JS owns the highlight, remove all old per-link fills/pills. */
    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical.strongmag-rail-pill-ready
        > li > a,
    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical.strongmag-rail-pill-ready
        > li:hover > a,
    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical.strongmag-rail-pill-ready
        > li.current-menu-item > a,
    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical.strongmag-rail-pill-ready
        > li.strongmag-menu-intent-active > a {
        width: auto !important;
        margin-inline: 0 !important;
        border-color: transparent !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical.strongmag-rail-pill-ready
        > li.current-menu-item:not(.strongmag-rail-pill-target) > a,
    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical.strongmag-rail-pill-ready
        > li.strongmag-menu-intent-active:not(.strongmag-rail-pill-target) > a {
        color: var(--sm-glass-text) !important;
    }

    .strongmag-site .wd-dropdown-cats > ul.wd-nav-vertical.strongmag-rail-pill-ready
        > li.strongmag-rail-pill-target > a {
        color: var(--sm-glass-active) !important;
    }

    .strongmag-site .wd-dropdown-cats.sm-glass-tone-dark
        > ul.wd-nav-vertical .strongmag-rail-hover-pill {
        border-color: rgba(255, 255, 255, 0.22);
        background:
            linear-gradient(90deg,
                rgba(255, 255, 255, 0.08) 0%,
                rgba(255, 255, 255, 0.16) 50%,
                rgba(255, 255, 255, 0.24) 80%,
                rgba(255, 255, 255, 0.12) 100%);
        box-shadow:
            0 9px 24px rgba(0, 0, 0, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.22),
            inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    }

    .strongmag-site .wd-dropdown-cats.sm-glass-tone-dark
        > ul.wd-nav-vertical.strongmag-rail-pill-ready
        > li.strongmag-rail-pill-target > a {
        color: #ffffff !important;
    }

    /* MEGA-MENU CARDS ----------------------------------------------------- */
    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu
        ul.wd-sub-menu.mega-menu-list.strongmag-mega-pill-ready {
        position: relative;
        isolation: isolate;
    }

    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu
        ul.wd-sub-menu.mega-menu-list.strongmag-mega-pill-ready li:not(.strongmag-mega-hover-pill) {
        position: relative;
        z-index: 2;
    }

    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu
        ul.wd-sub-menu.mega-menu-list .strongmag-mega-hover-pill {
        position: absolute !important;
        left: 0;
        top: 0;
        z-index: 1 !important;
        display: block !important;
        pointer-events: none;
        opacity: 0;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        list-style: none !important;
        border: 1px solid rgba(255, 255, 255, 0.48);
        border-radius: 14px;
        background:
            linear-gradient(90deg,
                rgba(255, 255, 255, 0.10) 0%,
                rgba(255, 255, 255, 0.26) 50%,
                rgba(255, 255, 255, 0.38) 80%,
                rgba(255, 255, 255, 0.17) 100%),
            rgba(22, 101, 52, 0.045);
        box-shadow:
            0 7px 18px rgba(15, 23, 42, 0.065),
            inset 0 1px 0 rgba(255, 255, 255, 0.64),
            inset 0 -1px 0 rgba(255, 255, 255, 0.10);
        -webkit-backdrop-filter: blur(14px) saturate(132%);
        backdrop-filter: blur(14px) saturate(132%);
        will-change: transform, width, height, opacity;
        transition:
            transform 190ms cubic-bezier(.22,.75,.20,1),
            width 190ms cubic-bezier(.22,.75,.20,1),
            height 190ms cubic-bezier(.22,.75,.20,1),
            opacity 100ms ease;
    }

    /* Suppress old hover/current fills: the moving sheet supplies them now. */
    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu
        ul.wd-sub-menu.mega-menu-list.strongmag-mega-pill-ready a,
    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu
        ul.wd-sub-menu.mega-menu-list.strongmag-mega-pill-ready a:hover,
    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu
        ul.wd-sub-menu.mega-menu-list.strongmag-mega-pill-ready .current-menu-item > a {
        border-color: transparent !important;
        background: transparent !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu
        ul.wd-sub-menu.mega-menu-list.strongmag-mega-pill-ready
        a.strongmag-mega-pill-target {
        color: var(--sm-glass-active) !important;
    }

    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu.sm-glass-tone-dark
        ul.wd-sub-menu.mega-menu-list .strongmag-mega-hover-pill {
        border-color: rgba(255, 255, 255, 0.20);
        background:
            linear-gradient(90deg,
                rgba(255, 255, 255, 0.07) 0%,
                rgba(255, 255, 255, 0.14) 50%,
                rgba(255, 255, 255, 0.22) 80%,
                rgba(255, 255, 255, 0.10) 100%);
        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.20),
            inset 0 -1px 0 rgba(255, 255, 255, 0.04);
    }

    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu.sm-glass-tone-dark
        ul.wd-sub-menu.mega-menu-list.strongmag-mega-pill-ready
        a.strongmag-mega-pill-target {
        color: #ffffff !important;
    }
}


/* --------------------------------------------------------------------------
   v1.4.20 — Keep mega-menu anchored while rail pill moves

   v1.4.19 made each top-level rail <li> positioned so the moving hover pill
   could layer beneath it. In WoodMart those list items intentionally remain
   unpositioned: the mega-menu is absolutely positioned against the shared
   categories container. Making the hovered row a containing block caused each
   submenu to inherit that row's vertical offset and visibly jump downward.

   Keep the rows static and lift only their links above the moving pill.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical.strongmag-rail-pill-ready
        > li {
        position: static !important;
        z-index: auto !important;
    }

    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical.strongmag-rail-pill-ready
        > li
        > a {
        position: relative;
        z-index: 2;
    }

    /* Preserve WoodMart's shared mega-menu anchoring explicitly. */
    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical.strongmag-rail-pill-ready
        > li
        > .wd-dropdown-menu {
        z-index: 50;
    }
}


/* --------------------------------------------------------------------------
   v1.4.21 — Clear the upper header separator

   Add real layout space above the complete lower header row so the glass bar,
   its shadow, the categories opener and every dropdown below it start cleanly
   underneath the separator from the upper header. Because the spacing is on
   the Header Builder row itself, the hero/page content below is pushed down
   together with it instead of visually overlapping the separator.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    .strongmag-site .whb-header .whb-header-bottom {
        margin-top: 10px !important;
    }
}


/* --------------------------------------------------------------------------
   v1.4.22 — Lift the complete StrongMag site by 20px

   Apply the requested offset to WoodMart's outer site wrapper instead of
   individual header/menu pieces, so the upper header, glass navigation,
   category rail, mega-menu and page content all preserve their relative
   geometry while moving upward as one unit.
   -------------------------------------------------------------------------- */
.strongmag-site .website-wrapper {
    margin-top: -20px !important;
}