/* ------------------------------------------------------------------
 * Shared navbar — liquid-glass edition.
 *
 * A horizontal pill (the BAR) with a circular BULGE centred on its
 * bottom edge. The bar + bulge form ONE continuous shape via a
 * JS-built clip-path; an SVG <path> traces the same outline as the
 * highlight rim. The `liquid-glass-filter` SVG filter applies a
 * displacement map for the refraction effect (Chromium-only — other
 * browsers fall back to plain backdrop-blur).
 *
 * The HTML structure + inline JS that drives this lives in
 * _navbar.twig. The five custom properties below are the tuning
 * knobs the JS reads on every layout pass.
 * ------------------------------------------------------------------ */

/* Fonts hosted off Tebex — https://s3.nanoscripts.cloud/tebex/fonts/ */
@font-face {
    font-family: "GTA Art Deco";
    src: url("https://s3.nanoscripts.cloud/tebex/fonts/GTAArtDeco-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "GTA Art Deco";
    src: url("https://s3.nanoscripts.cloud/tebex/fonts/GTAArtDeco-Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "GTA Art Deco";
    src: url("https://s3.nanoscripts.cloud/tebex/fonts/GTAArtDeco-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

/* ╭─────────────────────────────────────────────────────────────╮
 * │  LIQUID GLASS TUNING                                        │
 * │  These CSS variables are read by the inline script in       │
 * │  _navbar.twig. JS rebuilds the clip-path, the rim stroke,   │
 * │  and the displacement map from these on load + resize.      │
 * │                                                             │
 * │  BAR + BULGE GEOMETRY                                       │
 * │  The bulge is a smooth Bézier dome (half-cosine bell), NOT  │
 * │  a circle — so it joins the bar with a horizontal tangent   │
 * │  on both sides AND at the apex (no visible corner).         │
 * │  • --bar-h        height of the horizontal bar              │
 * │  • --bar-radius   corner radius of the pill ends. Use a     │
 * │                   small value (~6-10px) for a soft-rect     │
 * │                   look; --bar-h/2 gives a fully-rounded     │
 * │                   pill (capsule) shape.                     │
 * │  • --bulge-w  HALF-width of the dome at its base (where it  │
 * │               meets the bar's bottom edge). Larger = wider. │
 * │  • --bulge-d  depth — how far the dome dips below the bar.  │
 * │               Width and depth are independent; any ratio    │
 * │               stays smooth (no kinks). Tall, narrow bulge   │
 * │               looks dome-like; wide, shallow bulge looks    │
 * │               like a gentle swell merged into the bar.      │
 * │                                                             │
 * │  CENTERED LOGO  (independent of the bulge)                  │
 * │  • --logo-size  width/height of the centered logo image.    │
 * │  • --logo-y     vertical offset of the logo from the bar's  │
 * │                 vertical centre. Positive = down. Default   │
 * │                 puts the logo's centre on the bulge rim.    │
 * ╰─────────────────────────────────────────────────────────────╯ */
:root {
    --bar-h:      58px;
    --bar-radius: 24px;
    --bulge-w:    40px;
    --bulge-d:    15px;
    --logo-size:  70px;
    --logo-y:     calc(var(--bar-h) * 0.2);
}

/* ──────────── WRAPPER (full-width fixed bar) ──────────── */
/* Flex row: liquid-nav on the left, standalone .cart-pill on the
 * right (its own glass disc). align-items: flex-start so the cart
 * pill aligns with the BAR, not the bar+bulge centre line.
 *
 * The wrap shrink-wraps its contents — width is driven by whatever
 * .liquid-nav (which itself sizes to its child links) plus the cart
 * pill add up to. If the bar is wider than the viewport, .nav-wrap
 * scrolls horizontally so long labels are not squeezed or clipped. */
.nav-wrap {
    position: fixed;
    /* Sits 18px below the announcement bar (or 18px from viewport
     * top when the bar is hidden — --announce-h falls back to 0). */
    top: calc(var(--announce-h, 0px) + 18px);
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    pointer-events: none;
    padding: 0 16px;
    /* overflow stays visible — the cart pill's hover/click animation
     * (translateY going slightly negative) needs to extend above the
     * bar without being clipped. CSS spec quirk: any non-visible
     * overflow on one axis silently forces the other axis to clip
     * too, so we can't combine `overflow-x: auto` with a vertical
     * `visible`. The bar collapses into the mobile drawer below
     * 992px, so horizontal scrolling for very narrow viewports
     * isn't needed here. */
    overflow: visible;
}
.nav-wrap > * { pointer-events: auto; }
.liquid-nav {
    flex: 0 0 auto;
    min-width: max-content;
}

/* Hidden SVG holding the liquid-glass filter, rim gradients, and
 * the `remove-black` filter for the logo. */
.glass-svg {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: -1;
}

/* ──────────── LIQUID NAV (bar + bulge shell) ──────────── */
/* The element's box height = --bar-h + --bulge-d. JS sets the
 * clip-path so only the bar+bulge silhouette is visible.
 *
 * Apple-style liquid glass: NO solid fill. The visual is pure
 * refraction — the SVG #liquid-glass-filter applies a per-pixel
 * displacement map derived from a convex-squircle bezel profile
 * with Snell's-law refraction (n=1.5), so the background bends
 * through the rim like real glass. We add only:
 *   • a very subtle backdrop-blur for "frosted" depth (kept low
 *     so the refraction does most of the work),
 *   • a small saturation/contrast boost so colours come through
 *     looking lively rather than washed-out,
 *   • drop-shadows that follow the clip-path so the bar+bulge
 *     looks like it's floating above the page.
 * No background-color, no brightness multiplier — those would
 * tint or dim the glass and kill the see-through effect. */
.liquid-nav {
    position: relative;
    height: calc(var(--bar-h) + var(--bulge-d));
    background: transparent;
    backdrop-filter: url(#liquid-glass-filter) blur(2px) saturate(140%) contrast(105%);
    -webkit-backdrop-filter: blur(6px) saturate(140%) contrast(105%);
    /* drop-shadow follows clip-path; box-shadow would not. */
    filter:
        drop-shadow(0 1px 1px rgba(0, 0, 0, 0.10))
        drop-shadow(0 8px 20px rgba(0, 0, 0, 0.30))
        drop-shadow(0 18px 44px rgba(0, 0, 0, 0.22));
}

/* SVG rim — drawn along the actual bar+bulge outline. The two
 * <path> elements inside .nav-rim are updated by the inline script
 * with the SAME path string that drives clip-path, so the rim
 * always follows the current bezier-dome silhouette. */
.nav-rim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 2;
}
.nav-rim path { fill: none; }
/* Half of each stroke is clipped away by the parent's clip-path —
 * the listed width is over-drawn 2×, so the VISIBLE rim ends up at
 * ~half. The two layered strokes give a top-bright, bottom-faint
 * highlight (light from above). Keep these small for a thin
 * hairline look; bump them up for a chunkier polished bezel. */
.nav-rim .rim-outer  { stroke: url(#rim-grad-outer);  stroke-width: 1.5; }
.nav-rim .rim-bright { stroke: url(#rim-grad-bright); stroke-width: 1; }

/* Light beam — a single soft, narrow streak skimming across the
 * upper half of the bar (as if a low-angle light source were just
 * out of frame). Plus a faint glow at the bulge apex so the dome
 * still reads as a 3D protrusion. Much subtler than the previous
 * two-blob bloom — fits the dark-mode look. */
.liquid-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        /* Horizontal light beam across the upper third of the bar */
        linear-gradient(
            10deg,
            transparent 0%,
            rgba(255, 255, 255, 0) 18%,
            rgba(255, 255, 255, 0.1) 38%,
            rgba(255, 255, 255, 0) 58%,
            transparent 100%
        ),
        /* Soft apex glow on the bulge */
        radial-gradient(ellipse 22% 50% at 50% 100%, rgba(255, 255, 255, 0.10), transparent 70%);
    /* Mask so the beam stays in the upper half of the bar only */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 75%);
            mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 75%);
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 1;
}

/* ──────────── INNER ITEMS (bar portion) ──────────── */
/* Three-slot layout: [left links] · [brand] · [right links].
 * Left and right lists are `flex: 1 1 0` with opposite justification
 * (end / start) so they soak equal width; the brand stays on the
 * bar's geometric centre even when category counts differ. `.nav-inner`
 * width still propagates up to `.liquid-nav` as max-content.
 *
 * Inline JS still reads `.nav-brand` for the bulge centre — it now
 * matches W/2 unless clamped near the bar's rounded corners. */
.nav-inner {
    position: relative;
    height: var(--bar-h);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Clear the clip-path’s rounded ends — 5px let the first/last links sit
     * in the corner arc and get clipped from view. */
    padding: 0 max(16px, calc(var(--bar-radius) * 0.55));
    gap: 14px;
    z-index: 3;
}

.nav-links {
    /* min-width:max-content lets the cluster grow to fit ALL its
     * link labels in full — without it the equal-width left/right
     * columns squeeze a label like "OPEN SOURCE" down to "OPEN
     * SOUR…". overflow:visible (was: overflow-x:auto) avoids the
     * mid-character clip the auto-scroll fallback was causing. */
    min-width: max-content;
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: visible;
}
.nav-links > li {
    flex-shrink: 0;
}
/* Defensive: keep the inner label on a single line even if some
 * ancestor forces line-breaking. */
.nav-link > span {
    white-space: nowrap;
}

.nav-links--left,
.nav-links--right {
    flex: 1 1 0;
}
/* Pack each cluster's links TOWARD the centred bulge / logo. Any
 * extra slack sits on the outer edges of the bar — visually, the
 * logo always reads as the bar's centre even when one cluster has
 * shorter labels than the other (e.g. left = "Home / ESCROW /
 * OPEN SOURCE", right = "BUNDLES / About / FAQ"). The earlier
 * outer-edge packing made the right cluster look like it floated
 * away from the bulge whenever its labels were shorter. */
.nav-links--left  { justify-content: flex-end;  }
.nav-links--right { justify-content: flex-start; }

.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    box-sizing: border-box;
    max-width: none;
    overflow: visible;
    padding: 8px 14px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.85);
    font-family: "GTA Art Deco", sans-serif;
    font-weight: 500;
    font-size: 14px;
    border-radius: 9999px;
    white-space: nowrap;
    /* The gooey lens replaces the old solid-tint hover background.
     * We keep the colour-only hover so the text still brightens
     * without competing with the lens's own glass body. */
    transition: color 0.2s ease;
    z-index: 1;
}
.nav-link:hover {
    color: #fff;
}
.nav-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.nav-link:hover .nav-icon { transform: scale(1.06); }
.nav-icon--pill { width: 14px; height: 14px; }

/* ──────────── GOOEY HOVER LENS ──────────── */
/* A single glass capsule that follows the cursor across .nav-link
 * items. Sits ABOVE the links in z-order (z-index 5) so its
 * backdrop-filter captures the link icon + text underneath and
 * refracts them through the squircle bezel — the letters visibly
 * bulge as the lens passes over them, like a real magnifying glass.
 * pointer-events: none keeps clicks/hovers reaching the link below.
 *
 * Positioning + sizing is driven by JS on .nav-link pointerenter:
 *   • --lens-x / --lens-y custom props are read by the active state
 *     rule below to translate the lens into place
 *   • width/height match the link's bounding box (with small inflate)
 * CSS transitions handle the gooey slide between adjacent links — the
 * lens never disappears while moving across the cluster, it just
 * stretches/squashes between targets like a blob of liquid glass.
 *
 * The cubic-bezier(0.34, 1.56, 0.64, 1) easing (a.k.a "back" curve)
 * gives a slight overshoot at the end of each transition so the lens
 * "settles" onto the new link with a subtle bounce — essential for
 * the gooey feel. */
.nav-hover-lens {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.04);
    /* Frosted-glass body only — NO displacement filter. The squircle
     * refraction map made link letters near the lens rim get sampled
     * from inward positions, producing ghost-text duplicates. The
     * lens still reads as glass via:
     *   • a subtle blur of the bar's already-refracted backdrop,
     *   • saturation/contrast pop so colours come through alive,
     *   • the inset rim highlights below.
     * That gives the "magnifying capsule" feel without distorting
     * the text underneath. */
    backdrop-filter: blur(2px) saturate(160%) contrast(110%);
    -webkit-backdrop-filter: blur(2px) saturate(160%) contrast(110%);
    /* Inset highlights for the lens's own glassy rim — top bright,
     * bottom faint (light from above, matches the bar's rim). */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(255, 255, 255, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.22),
        0 4px 14px rgba(0, 0, 0, 0.18);
    opacity: 0;
    /* We use the standalone `translate` and `scale` CSS properties
     * (not the `transform` shorthand) so position and squash compose
     * cleanly without fighting each other:
     *   • translate is driven by --lens-x / --lens-y (set by JS),
     *     transitions with the bouncy easing → X / Y position bounce
     *     on every link change.
     *   • scale is animated separately by the lensSquash keyframe
     *     below, retriggered on every move → Y-axis squash & stretch
     *     even when the lens height doesn't change between links. */
    translate: var(--lens-x, 0) var(--lens-y, 0);
    scale: 0.85;
    transform-origin: center center;
    transition:
        translate 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        scale     0.22s ease,
        width     0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        height    0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity   0.22s ease;
    z-index: 5;
    will-change: translate, scale, width, height, opacity;
}
.nav-hover-lens[data-active="true"] {
    opacity: 1;
    scale: 1;
}

/* Squash & stretch — fired on every link change by toggling
 * data-bouncing in JS. Uses cubic-bezier overshoot so the lens
 * compresses vertically (scaleY 0.92) and elongates horizontally
 * (scaleX 1.05) at ~30% in, then over-rebounds (scaleY 1.03,
 * scaleX 0.99) before settling at 1, 1. The animation overrides
 * the inactive→active scale transition while it's running, then
 * hands back control once it ends — giving full 2-axis bounce
 * even when the lens height stays the same between links. */
@keyframes lensSquash {
    0%   { scale: 1    1;    }
    30%  { scale: 1.05 0.92; }
    65%  { scale: 0.99 1.03; }
    100% { scale: 1    1;    }
}
.nav-hover-lens[data-bouncing="true"][data-active="true"] {
    animation: lensSquash 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ──────────── STANDALONE ACCOUNT ACTIONS (currency + login) ──────── */
/* Outside the liquid bar so the inner row can use equal-width side
 * columns; same glass-pill look as .cart-pill. */
.nav-account {
    position: absolute;
    right: calc(16px + var(--bar-h) + 10px);
    top: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    height: var(--bar-h);
    padding: 0 14px;
    border-radius: calc(var(--bar-h) / 2);
    background: transparent;
    backdrop-filter: blur(6px) saturate(140%) contrast(105%);
    -webkit-backdrop-filter: blur(8px) saturate(140%) contrast(105%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(255, 255, 255, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.18),
        0 1px 1px rgba(0, 0, 0, 0.10),
        0 8px 20px rgba(0, 0, 0, 0.30),
        0 18px 44px rgba(0, 0, 0, 0.22);
}

/* ──────────── STANDALONE CART PILL ──────────── */
/* A small circular liquid-glass disc that sits outside the navbar,
 * vertically aligned with the bar (height = --bar-h) so it lines
 * up with the centred items inside the bar. Same dark-glass look
 * as the navbar (no displacement filter — that one is bound to the
 * bar+bulge silhouette and would be wrong for a circle). */
.cart-pill {
    position: absolute;
    right: 16px;
    top: 0;
    width:  var(--bar-h);
    height: var(--bar-h);
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    background: transparent;
    backdrop-filter: blur(6px) saturate(140%) contrast(105%);
    -webkit-backdrop-filter: blur(8px) saturate(140%) contrast(105%);
    /* The cart-pill is a circle, so we can't reuse the bar+bulge
     * SVG refraction filter (it's bound to that exact silhouette).
     * Instead we fake the rim with a thin inset highlight + drop
     * shadows, matching the bar's "no fill, just rim + shadow"
     * look so they read as the same material. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(255, 255, 255, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.18),
        0 1px 1px rgba(0, 0, 0, 0.10),
        0 8px 20px rgba(0, 0, 0, 0.30),
        0 18px 44px rgba(0, 0, 0, 0.22);
    /* Standalone translate / scale / rotate properties (NOT the
     * `transform` shorthand) so hover, press and wobble can compose
     * without overwriting each other. The wobble keyframe drives
     * `rotate` + a tiny extra `translate`, hover drives `translate`
     * (the lift), :active drives `scale` (the press). */
    translate: 0 0;
    scale: 1;
    rotate: 0deg;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        background 0.2s ease,
        translate 0.2s ease,
        scale 0.12s ease;
}
.cart-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    translate: 0 -1px;
}
/* Press state — small inward squish so the button feels physical
 * when clicked, before the wobble takes over and bounces it back. */
.cart-pill:active {
    scale: 0.94;
    transition: scale 0.06s ease;
}

.cart-icon {
    width: 22px;
    height: 22px;
    fill: none;
    /* Subtle drop on the icon itself so the strokes feel "raised"
     * inside the glass disc rather than painted flat on it. */
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
    /* Icon owns its own translate so the wobble keyframe can shake
     * it slightly more than the pill itself for a livelier feel. */
    transition: scale 0.2s ease;
}
.cart-pill:hover .cart-icon { scale: 1.06; }

/* Wobble — fired by the inline JS toggling data-wobbling=true on
 * click. Uses the SAME squash-and-stretch language as the gooey
 * hover lens above, so the cart-pill clicks feel like part of the
 * same liquid-glass material:
 *   • compress vertically (scaleY 0.84) and bulge sideways
 *     (scaleX 1.14) — water-droplet impact
 *   • rebound tall (scaleY 1.12, scaleX 0.92) — jelly stretch up
 *   • small over-shoot in both directions, then settle at 1, 1
 * Animates standalone `scale` + a tiny `translate` kick so it
 * composes cleanly with the hover lift and press squish without
 * fighting them for control of `transform`. The cubic-bezier
 * easing carries the overshoot through each segment. */
@keyframes cartWobble {
    0%   { scale: 1    1;    translate: 0 0;   }
    20%  { scale: 1.14 0.84; translate: 0 2px; }
    40%  { scale: 0.92 1.12; translate: 0 -3px;}
    60%  { scale: 1.05 0.96; translate: 0 1px; }
    78%  { scale: 0.98 1.02; translate: 0 0;   }
    100% { scale: 1    1;    translate: 0 0;   }
}
.cart-pill[data-wobbling="true"] {
    animation: cartWobble 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-badge {
    /* Sit just outside the pill's top-right rim so the counter
     * looks like it's clipped onto the cart, not painted inside
     * it. The dark outline ring (first box-shadow) is what creates
     * the optical separation against the glass. */
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff5a52 0%, #d4392f 100%);
    color: #fff;
    font-family: "GTA Art Deco", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
    box-sizing: border-box;
    box-shadow:
        0 0 0 2px rgba(15, 18, 27, 0.85),
        0 0 0 3px rgba(255, 255, 255, 0.10),
        0 4px 10px rgba(212, 57, 47, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: scale 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}
.cart-pill:hover .nav-badge { scale: 1.1; }

.nav-pill {
    height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.95);
    font-family: "GTA Art Deco", sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.nav-pill:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}
.nav-pill--currency { padding: 0 10px; }

/* ──────────── CURRENCY DROPDOWN ──────────── */
/* Wrapper sits inside .nav-account; keeps the menu anchored to the
 * pill's right edge and contained for the click-outside JS. */
.nav-pill-wrap--currency {
    position: relative;
}
.nav-pill-wrap--currency .nav-pill--currency svg {
    transition: transform 0.18s ease;
}
.nav-pill-wrap--currency.is-open .nav-pill--currency svg {
    transform: rotate(180deg);
}

/* Positioned `fixed` so it escapes the navbar's clip-path / overflow:hidden
 * (the liquid-glass bar clips its contents to the bar+bulge shape, which
 * would crop a normal absolute-positioned menu). The toggle JS computes
 * top/right from the button's getBoundingClientRect() each time it opens.
 *
 * Glass treatment matches the basket sidebar: thin translucent navy with
 * a heavy backdrop blur + soft inset rim so it reads as one material with
 * the rest of the chrome. */
.nav-currency-menu {
    position: fixed;
    top: 0;
    right: 0;
    min-width: 110px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%),
        rgba(15, 18, 27, 0.55);
    outline: 2px solid rgba(255, 255, 255, 0.05);
    outline-offset: -2px;
    border-radius: 10px;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    /* Hidden by default — opens via .is-open on the wrap. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 1100; /* above the navbar (1000) */
    max-height: min(70vh, 360px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.nav-currency-menu::-webkit-scrollbar { width: 6px; }
.nav-currency-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
}
/* Menu is reparented to <body> at runtime so the .is-open class
 * lives directly on the menu, not on its (former) ancestor wrap. */
.nav-currency-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-currency-menu__item { margin: 0; }
.nav-currency-menu__item a {
    display: block;
    padding: 8px 14px;
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    /* `font-family: inherit` falls through to the browser default
     * once the menu is reparented to <body> at runtime — pin the
     * theme font explicitly so the dropdown matches the navbar. */
    font-family: "GTA Art Deco", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}
.nav-currency-menu__item a:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}
.nav-currency-menu__item--active a {
    background: rgba(250, 64, 57, 0.14);
    color: #FA4039;
    font-weight: 500;
}
.nav-currency-menu__item--active a:hover {
    background: rgba(250, 64, 57, 0.22);
    color: #FA4039;
}

/* ──────────── CENTERED BRAND (inside nav-inner) ──────────── */
/* The brand lives in the bar's flex row, centred horizontally
 * between the two link groups. Its size and vertical position are
 * driven by --logo-size / --logo-y so they stay independent of the
 * bulge geometry — resizing the bulge does NOT resize the logo.
 * The parent's clip-path shapes any overflow to the bar+bulge
 * silhouette, so the brand never escapes the glass. */
.nav-brand {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width:  var(--logo-size);
    height: var(--logo-size);
    /* align-items:center on .nav-inner vertically centres the brand
     * in the bar; --logo-y then nudges it downward by that amount.
     * Default lands the brand's centre on the bulge rim. */
    margin-top: var(--logo-y);
    text-decoration: none;
    pointer-events: auto;
}
.nav-brand-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: url(#remove-black) drop-shadow(0 6px 14px rgba(250, 64, 57, 0.45));
    -webkit-filter: url(#remove-black) drop-shadow(0 6px 14px rgba(250, 64, 57, 0.45));
}

/* The bulge stays as a decorative protrusion underneath the brand —
 * empty container, no children. Keeping the rule for layout sanity. */
.bulge-content {
    position: absolute;
    left: 50%;
    top: var(--bar-h);
    width: calc(var(--bulge-w) * 2);
    height: var(--bulge-d);
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
}

/* ──────────── MOBILE TOGGLE (hidden by default) ──────────── */
.mobile-toggle {
    display: none;
    width: 46px;
    height: 46px;
    padding: 0;
    background: transparent;
    backdrop-filter: blur(6px) saturate(140%) contrast(105%);
    -webkit-backdrop-filter: blur(8px) saturate(140%) contrast(105%);
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(255, 255, 255, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.18),
        0 1px 1px rgba(0, 0, 0, 0.10),
        0 8px 20px rgba(0, 0, 0, 0.30),
        0 18px 44px rgba(0, 0, 0, 0.22);
    transition: background 0.2s ease;
}
.mobile-toggle:hover { background: rgba(255, 255, 255, 0.08); }
.hamburger {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 22px;
    height: 16px;
    justify-content: center;
}
.hamburger span {
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: block;
}
.mobile-toggle.active .hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-toggle.active .hamburger span:nth-child(2) { opacity: 0; }
.mobile-toggle.active .hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ──────────── MOBILE DRAWER + OVERLAY ──────────── */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
.mobile-menu-overlay.active { opacity: 1; visibility: visible; }

.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: min(340px, 88vw);
    height: 100vh;
    height: 100dvh;
    background: rgba(15, 18, 27, 0.65);
    backdrop-filter: blur(40px) saturate(150%) contrast(105%);
    -webkit-backdrop-filter: blur(40px) saturate(150%) contrast(105%);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        -20px 0 60px rgba(0, 0, 0, 0.45),
        inset 1px 0 0 rgba(255, 255, 255, 0.08);
    z-index: 1600;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.mobile-menu.active { transform: translateX(0); }

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-menu-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
    font-family: "GTA Art Deco", sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
}
.mobile-menu-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: url(#remove-black) drop-shadow(0 4px 10px rgba(250, 64, 57, 0.4));
}
.mobile-menu-close {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.mobile-menu-close:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.mobile-menu-nav {
    list-style: none;
    margin: 0;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.mobile-menu-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.55;
    transition: opacity 0.2s ease;
}
.mobile-menu-link:hover .mobile-menu-icon { opacity: 1; }

.mobile-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: 14px;
    background: transparent;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-family: "GTA Art Deco", sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.mobile-menu-link:hover,
.mobile-menu-link.active {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.10);
    color: #fff;
}

.mobile-menu-link--cart {
    position: relative;
}
.mobile-menu-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff5a52 0%, #d4392f 100%);
    color: #fff;
    font-family: Inter, system-ui, -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(212, 57, 47, 0.4);
}

.mobile-menu-footer {
    padding: 16px 18px 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ──────────── MOBILE CURRENCY PICKER ────────────
 * The desktop currency dropdown lives in .nav-account, which is
 * hidden below 992px. The drawer carries its own picker — a simple
 * row of code chips. Each chip is a real <a href="?currency=CODE">
 * so a tap just navigates (Tebex switches the basket currency
 * server-side and round-trips to the same page); no dropdown JS.
 * Chips wrap to a 2nd row on narrow phones — that's intentional,
 * lets all supported codes stay visible without horizontal scroll. */
.mobile-menu-currency {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 2px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mobile-menu-currency__label {
    font-family: "GTA Art Deco", sans-serif;
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}
.mobile-menu-currency__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mobile-menu-currency__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    padding: 7px 10px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-family: "GTA Art Deco", sans-serif;
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}
.mobile-menu-currency__chip:hover,
.mobile-menu-currency__chip:focus-visible {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
    outline: none;
}
.mobile-menu-currency__chip--active {
    background: rgba(250, 64, 57, 0.16);
    border-color: rgba(250, 64, 57, 0.55);
    color: #FA4039;
}
.mobile-menu-currency__chip--active:hover {
    background: rgba(250, 64, 57, 0.24);
    border-color: rgba(250, 64, 57, 0.7);
    color: #FA4039;
}

.mobile-cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fa4039 0%, #c8332e 100%);
    color: #fff;
    text-decoration: none;
    font-family: "GTA Art Deco", sans-serif;
    font-weight: 600;
    font-size: 0.92rem;
    box-shadow:
        0 8px 20px rgba(250, 64, 57, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mobile-cta-button:hover {
    transform: translateY(-1px);
    box-shadow:
        0 12px 28px rgba(250, 64, 57, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.mobile-cta-button .mobile-menu-icon {
    opacity: 1;
}

/* ──────────── RESPONSIVE ──────────── */
@media (max-width: 1180px) {
    /* Squeeze: drop labels so the bar fits with all icons + actions. */
    .nav-link span        { display: none; }
    .nav-link             { padding: 8px 10px; }
    .nav-account          { display: none; }
}

@media (max-width: 992px) {
    /* Re-apply --announce-h offset (the desktop rule used calc()
     * but a hardcoded `top: 16px` here was overriding it, so the
     * mobile hamburger sat behind the announcement bar). */
    .nav-wrap { justify-content: flex-end; top: calc(var(--announce-h, 0px) + 16px); padding: 0 20px; }
    .liquid-nav,
    .cart-pill,
    .nav-account { display: none; }
    .mobile-toggle { display: inline-flex; position: static; transform: none; }
}

@media (max-width: 480px) {
    .nav-wrap { top: calc(var(--announce-h, 0px) + 14px); padding: 0 16px; }
    .mobile-toggle { width: 42px; height: 42px; }
}