@charset "utf-8";

/* =========================================================
   JUPITER BLUE — NAVIGATION (v4 rebuild)

   Three strips, ruthless restraint, matrix register.

       1. Utility strip   .jb-util         — micro typography, dark, account chrome
       2. Main strip      .jb-main         — wordmark · Technical Hub · MENU
       3. Search strip    .jb-search-strip — underline + Q prefix
       4. Overlay         .nav-overlay     — bento mega-menu (showcase moment)

   Theme colours come from brand.css. This file only defines its own
   structural tokens (radii, shadows, z-index, font).
   ========================================================= */

:root {
    /* Type */
    --font-sans:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Radius — tightened Aug 2026. These were 6/14/24, which gave the mega-menu
       cards a softness that read as consumer rather than trade and sat oddly
       against the square three-band device. Near-square now; the corner is a
       hairline concession, not a feature. These three tokens are used ONLY in
       this file, so the change is contained to the nav and the overlay. */
    --r-sm: 3px;
    --r-md: 4px;
    --r-lg: 6px;
    --r-pill: 999px;

    /* Shadow */
    --shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md:  0 8px 24px rgba(15, 23, 42, 0.06);
    --shadow-lg:  0 20px 40px rgba(15, 23, 42, 0.10);
    --shadow-pop: 0 18px 35px rgba(0, 0, 0, 0.18);

    /* Layout */
    --bento-max:  1300px;

    /* Z-index */
    --z-overlay:   2500;
    --z-nav:       3000;
    --z-utility:   3001;

    --line-soft:  rgba(0, 0, 0, 0.06);
}

body[data-theme="trade"] {
    --line-soft: rgba(255, 255, 255, 0.06);
}

/* =========================================================
   RESET & BASE
   ========================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    font-feature-settings: "ss01", "tnum";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }

h1, h2, h3, h4 {
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
    line-height: 1.15;
}
a { color: inherit; text-decoration: none; }

.visually-hidden, .sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute;
    top: -40px; left: 12px;
    background: var(--ink);
    color: var(--paper);
    padding: 10px 14px;
    border-radius: var(--r-sm);
    z-index: 9999;
    transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 12px; outline: 2px solid var(--jb-blue); outline-offset: 2px; }

:focus-visible {
    outline: 2px solid var(--jb-blue);
    outline-offset: 2px;
    border-radius: 4px;
}
.jb__spot{
	position: relative;
	top: -20px;
	right: 5px;
}
.jb__spot img{
	width: 24px;
}
/* =========================================================
   1. UTILITY STRIP  .jb-util
   Always dark. Pure micro-typography. No icons, no decoration.
   ========================================================= */
.jb-util {
    background: var(--night);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    padding: 0;
    position: relative;
    z-index: var(--z-utility);
}
/* Given room, Aug 2026. Was 38px tall with 11.5px type and 12/20px gaps — the
   complaint was that it felt cramped, and nothing needed removing, it needed
   space. Three zones with no guest special case: when a zone is empty,
   space-between absorbs it, so signed-out and signed-in align identically. */
.jb-util__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 40px;
    min-height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
}
/* Sections inside the utility strip (markup uses --contact / --prefs / --account) */
.jb-util__section {
    display: flex;
    align-items: center;
    gap: 18px;
}
/* No vertical dividers between the preference groups. The underline on the
   live option already separates them; rules on top of that were the "too
   busy" problem. */
.jb-util__section--prefs { gap: 22px; }

/* Login is the one control people hunt for — an admin asking a colleague to
   sign in was taking too long to find it — so it is the only framed thing on
   the bar. Outlined rather than filled: with the segments quietened there is
   plenty of contrast without a solid block competing with the wordmark
   directly beneath. */
.jb-util__login {
    border: 1px solid var(--jb-blue);
    color: var(--jb-blue) !important;
    padding: 6px 16px;
    font-weight: 800;
    transition: background var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out);
}
.jb-util__login:hover {
    background: var(--jb-blue);
    color: var(--night) !important;
}
/* Nobody signed in is searching for Logout. Dimming it is what buys Login its
   prominence — you cannot make one thing louder without quietening another. */
.jb-util__link--quiet { color: rgba(255, 255, 255, 0.55); }
.jb-util__link--quiet:hover { color: #fff; }

/* Basket compresses to an icon: a bag with a number beside it needs no label,
   and the count is the only part carrying information. */
.jb-util__basket { display: inline-flex; align-items: center; gap: 7px; }
.jb-util__basket svg { width: 15px; height: 15px; flex: 0 0 auto; }
.jb-util__link {
    color: inherit;
    transition: color var(--dur-fast) var(--ease-out);
    white-space: nowrap;
}
.jb-util__link:hover { color: #fff; }
.jb-util__link--strong { color: rgba(255, 255, 255, 0.85); }
.jb-util__link--strong:hover { color: #fff; }
.jb-util__count {
    font-variant-numeric: tabular-nums;
    color: var(--jb-blue);
}
.jb-util__sep, .jb-util__dot {
/*    color: rgba(255, 255, 255, 0.20);*/
	color: rgba(255, 255, 255, 0.14);
    font-weight: 400;
}

/* Theme toggle (Light · Dark) — inside the utility strip */
.jb-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.jb-theme-toggle__btn {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: color 180ms ease;
}
.jb-theme-toggle__btn:hover { color: rgba(255, 255, 255, 0.85); }
.jb-theme-toggle__btn.is-active { color: #fff; }
.jb-theme-toggle__btn:focus-visible {
    outline: 1px solid var(--jb-blue);
    outline-offset: 3px;
}

/* VAT control — minimal switch, no labels coloured */
.jb-vat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}
.jb-vat__label { color: rgba(255, 255, 255, 0.55); }
.jb-vat__label:first-child { color: #fff; }
.jb-vat input:checked ~ * + .jb-vat__label,
.jb-vat:has(input:checked) .jb-vat__label:first-child { color: rgba(255, 255, 255, 0.55); }
.jb-vat:has(input:checked) .jb-vat__label:last-child  { color: #fff; }

/* ---------------------------------------------------------------------------
   PREFERENCE SEGMENTS — replaced the 28x14px two-label sliders, Aug 2026.

   The old control forced you to read the knob's POSITION and then map it onto
   whichever label it sat nearer. Worse, only vat-toggle.js moved the bold
   is-active class; theme-toggle.js never did, so flipping Light/Dark changed
   the page while the labels kept insisting on the old state until the next
   load. A segmented control makes the live cell BE the state, which removes
   the class of bug entirely — there is no separate label to forget to update.

   Deliberately monochrome: accent is the action colour and a preference is not
   an action. Blue survives in the strip only on the Admin link and the basket
   count, which are the two things there that want the eye.
   --------------------------------------------------------------------------- */
.jb-seg {
    display: inline-flex;
    align-items: stretch;
}
.jb-seg__opt {
    appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    padding: 6px 9px;
    /* Underline sits inside the box so it never shifts the row's height. */
    box-shadow: inset 0 -2px 0 transparent;
    transition: color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}
.jb-seg__opt:hover { color: rgba(255, 255, 255, 0.75); }
.jb-seg__opt[aria-checked="true"] {
    color: #fff;
    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.55);
}
.jb-seg__opt:focus-visible {
    outline: 2px solid var(--jb-blue);
    outline-offset: 1px;
}

/* Legacy switch — kept because other pages still render it. Delete once
   nothing outside the utility strip uses .jb-switch. */
.jb-switch {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 14px;
}
.jb-switch input {
    position: absolute; inset: 0;
    opacity: 0; width: 100%; height: 100%;
    margin: 0; cursor: pointer;
}
.jb-switch__track {
    position: absolute; inset: 0;
    background: rgba(255, 255, 255, 0.25);
    border-radius: var(--r-pill);
    transition: background var(--dur-base) var(--ease-out);
    cursor: pointer;
}
.jb-switch__track::before {
    content: "";
    position: absolute;
    height: 10px; width: 10px;
    left: 2px; top: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--dur-base) var(--ease-pop);
}
.jb-switch input:checked + .jb-switch__track {
    background: var(--jb-blue);
}
.jb-switch input:checked + .jb-switch__track::before {
    transform: translateX(14px);
}
.jb-switch input:focus-visible + .jb-switch__track {
    box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--jb-blue);
}

/* =========================================================
   2. MAIN STRIP  .jb-main
   Wordmark + Technical Hub link + MENU button.
   Generous breathing room. Display typography.
   ========================================================= */
.jb-main {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: var(--z-nav);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}
.jb-main__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 28px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

/* Wordmark — display-confident */
.jb-wordmark {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    line-height: 1;
    /* Keep the wordmark + its spot on one line so the spot never
       wraps below on narrow screens (e.g. ~390px). */
    white-space: nowrap;
    transition: opacity var(--dur-fast) var(--ease-out);
}
.jb-wordmark:hover { opacity: 0.7; }
.jb-wordmark__accent { color: var(--jb-blue); }

/* Right-side primary nav */
.jb-mainnav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.jb-mainnav__link {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-2);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    padding: 8px 0;
    transition: color var(--dur-fast) var(--ease-out);
    position: relative;
}
.jb-mainnav__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 1px;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
}
.jb-mainnav__link:hover {
    color: var(--ink);
}
.jb-mainnav__link:hover::after { opacity: 1; }

.jb-mainnav__link--feature {
    color: var(--ink);
}

/* MENU button — quiet, hairline, text-driven */
.jb-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: transparent;
    border: 1px solid var(--ink);
    border-radius: var(--radius-btn);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.jb-menu-btn:hover {
    background: var(--ink);
    color: var(--paper);
}
.jb-menu-btn__arrow {
    font-size: 0.9rem;
    line-height: 1;
    transition: transform var(--dur-fast) var(--ease-out);
}
.jb-menu-btn[aria-expanded="true"] .jb-menu-btn__arrow {
    transform: rotate(90deg);
}
.jb-menu-btn[aria-expanded="true"] {
    background: var(--ink);
    color: var(--paper);
}

/* =========================================================
   2b. CATEGORY BAR  .jb-catnav
   Desktop product nav under the search strip. Hover / keyboard-focus
   reveals a hairline panel of sub-categories. Hidden ≤900px, where the
   MENU button + bento overlay take over. Scoped to header.php pages only.
   ========================================================= */
.jb-catnav {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    position: relative;
    z-index: calc(var(--z-nav) - 2);
}
.jb-catnav__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    gap: 30px;
}
.jb-catnav__group { position: relative; }

.jb-catnav__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 14px 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ink-2);
    white-space: nowrap;
    position: relative;
    transition: color var(--dur-fast) var(--ease-out);
}
.jb-catnav__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 9px;
    height: 2px;
    background: var(--jb-blue);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
}
.jb-catnav__chev {
    font-size: 0.58rem;
    color: var(--ink-4);
    transition: transform var(--dur-base) var(--ease-pop),
                color var(--dur-fast) var(--ease-out);
}

/* Open state — hover or keyboard focus within the group */
.jb-catnav__group:hover > .jb-catnav__link,
.jb-catnav__group:focus-within > .jb-catnav__link { color: var(--ink); }
.jb-catnav__group:hover > .jb-catnav__link::after,
.jb-catnav__group:focus-within > .jb-catnav__link::after { opacity: 1; }
.jb-catnav__group:hover .jb-catnav__chev,
.jb-catnav__group:focus-within .jb-catnav__chev {
    transform: rotate(180deg);
    color: var(--jb-blue);
}

/* Dropdown panel */
.jb-catnav__panel {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.10);
    padding: 16px 18px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                visibility var(--dur-fast) var(--ease-out);
    z-index: 60;
}
.jb-catnav__group--has-panel:hover > .jb-catnav__panel,
.jb-catnav__group--has-panel:focus-within > .jb-catnav__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* Trailing items right-align their panel so it never spills off-screen */
.jb-catnav__group--end .jb-catnav__panel { left: auto; right: 0; }

.jb-catnav__sublink {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-2);
    padding: 6px 0;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.jb-catnav__sublink:hover { color: var(--jb-blue); transform: translateX(3px); }

.jb-catnav__foot {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}
.jb-catnav__all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--jb-blue);
    transition: gap var(--dur-fast) var(--ease-out);
}
.jb-catnav__all:hover { gap: 11px; }

/* Desktop shows the bar; the MENU button stays visible at all widths
   so the overlay extras (size pills, featured card, matrix link) stay
   reachable. */
@media (max-width: 900px) { .jb-catnav { display: none; } }

/* Mid-desktop squeeze (901–1200) — tighten so all items stay one row */
@media (max-width: 1200px) and (min-width: 901px) {
    .jb-catnav__inner { gap: 18px; padding-left: 20px; padding-right: 20px; }
    .jb-catnav__link  { font-size: 0.64rem; letter-spacing: 0.12em; }
}

/* =========================================================
   3. SEARCH STRIP  .jb-search-strip
   Full-width row with underline + Q prefix. Secure Hub register.
   ========================================================= */
.jb-search-strip {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    position: relative;
    z-index: calc(var(--z-nav) - 1);
}
.jb-search-strip__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
}

.jb-search {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    gap: 0;
}
.jb-search__prefix {
    color: var(--ink-3);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    width: 22px;
    flex-shrink: 0;
}
.jb-search__input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 18px 0;
    color: var(--ink);
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.jb-search__input::placeholder {
    color: var(--ink-3);
    font-weight: 400;
	font-size: .9rem;
}
.jb-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.jb-search__submit {
    background: none;
    border: none;
    color: var(--ink-3);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    padding: 8px 12px;
    transition: color var(--dur-fast) var(--ease-out);
}
.jb-search__submit:hover { color: var(--ink); }

/* AI panel — anchored under the search strip */
.ai-panel {
    position: absolute;
    top: calc(100% - 1px);
    left: 40px;
    right: 40px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.10);
    padding: 14px;
    max-height: 70vh;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
    z-index: 100;
}
.ai-panel.open {
    opacity: 1;
    transform: translateY(0);
}
.ai-panel[hidden] { display: none; }

.ai-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--ink-3);
    padding: 6px 10px 12px;
    border-bottom: 1px dashed var(--line);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    font-weight: 600;
}
.ai-hint i { color: var(--jb-blue); }
.ai-hint kbd {
    display: inline-block;
    padding: 2px 6px;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink);
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: 0 1px 0 var(--line);
}

.ai-suggestions { list-style: none; margin: 0; padding: 0; }
.ai-suggestion {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    text-decoration: none;
    color: inherit;
    transition: background var(--dur-fast) var(--ease-out);
}

.ai-suggestion:hover,
.ai-suggestion:focus-visible {
    background: var(--paper-2);
    outline: none;
}

.ai-thumb {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--paper-2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ai-thumb-placeholder { color: var(--ink-4); font-size: 1.2rem; }

.ai-suggestion-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ai-suggestion-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ai-suggestion-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 0.78rem;
    color: var(--ink-3);
}
.ai-fire {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--spec-fire-text);
    font-weight: 600;
}
.ai-price {
    font-weight: 700;
    color: var(--jb-blue);
    font-variant-numeric: tabular-nums;
}
.ai-suggestion-arrow {
    color: var(--ink-4);
    font-size: 0.8rem;
    transition: transform var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.ai-suggestion:hover .ai-suggestion-arrow {
    color: var(--jb-blue);
    transform: translateX(3px);
}
.ai-suggestion-empty {
    padding: 14px;
    color: var(--ink-3);
    font-size: 0.85rem;
    text-align: center;
}

.ai-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px;
    color: var(--ink-3);
    font-size: 0.92rem;
    font-weight: 600;
}
.ai-loading-dots { display: inline-flex; gap: 4px; }
.ai-loading-dots span {
    width: 6px;
    height: 6px;
    background: var(--jb-blue);
    border-radius: 50%;
    animation: ai-bounce 1.2s var(--ease-out) infinite;
}
.ai-loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.ai-loading-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
    30%           { transform: translateY(-6px); opacity: 1; }
}

.ai-answer,
.ai-answer p,
.ai-answer span,
.ai-answer li {
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.55;
}
.ai-answer { padding: 14px 14px 4px; }
.ai-answer p { margin-bottom: 8px; }
.ai-answer strong, .ai-answer b { font-weight: 700; color: var(--ink); }
.ai-answer em, .ai-answer i { font-style: italic; }

.ai-products {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 4px 4px;
}
.ai-product-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-pop);
}
.ai-product-card:hover {
    border-color: var(--jb-blue);
    background: var(--paper);
    transform: translateY(-2px);
}
.ai-product-card .ai-thumb { width: 52px; height: 52px; }
.ai-product-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ai-product-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
    line-height: 1.3;
}
.ai-product-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--jb-blue);
    flex-shrink: 0;
    transition: gap var(--dur-fast) var(--ease-out);
}
.ai-product-cta i { font-size: 0.72rem; }
.ai-product-card:hover .ai-product-cta { gap: 10px; }

/* =========================================================
   4. OVERLAY (bento mega-menu) — unchanged showcase aesthetic
   ========================================================= */
.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(250, 250, 250, 0.96);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    z-index: var(--z-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-slow) var(--ease-out);
    /* Clears all four strips: utility + main + search + category bar. */
    padding-top: 190px;
    overflow-y: auto;
}
body[data-theme="trade"] .nav-overlay {
    background: rgba(26, 26, 26, 0.96);
}
.nav-overlay.active { opacity: 1; pointer-events: auto; }
.nav-overlay[hidden] { display: none; }

.nav-bento-grid {
	margin-top: 20px;
    max-width: var(--bento-max);
    margin: 0 auto;
    padding: 40px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 20px;
}

.nav-overlay.active .nav-card {
    animation: bento-in var(--dur-slow) var(--ease-pop) backwards;
}
.nav-overlay.active .nav-card:nth-child(1) { animation-delay: 60ms; }
.nav-overlay.active .nav-card:nth-child(2) { animation-delay: 120ms; }
.nav-overlay.active .nav-card:nth-child(3) { animation-delay: 180ms; }
.nav-overlay.active .nav-card:nth-child(4) { animation-delay: 240ms; }
.nav-overlay.active .nav-card:nth-child(5) { animation-delay: 300ms; }
.nav-overlay.active .nav-card:nth-child(6) { animation-delay: 360ms; }
@keyframes bento-in {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

.nav-card {
    background: var(--paper-2);
    padding: 32px;
    border-radius: var(--r-md);   /* tightened from --r-lg (24px) -> 14px */
    border: 1px solid var(--line-soft);
    transition: box-shadow var(--dur-base) var(--ease-out),
                transform  var(--dur-base) var(--ease-out);
}
.card-heading {
    font-size: 0.72rem;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 700;
    margin-bottom: 18px;
}
.mobile-account-actions { display: none; }
.category-card { grid-row: span 2; }

/* Size pills */
.size-pill-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.size-pill-link { display: inline-block; margin: 4px 2px; }
.size-pill-link span {
    display: inline-block;
    background: var(--paper);
    padding: 8px 14px;
    border-radius: var(--r-sm);
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid var(--line);
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    transition: transform var(--dur-fast) var(--ease-pop),
                background var(--dur-fast) var(--ease-out),
                color      var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}
.size-pill-link:hover span {
    background: var(--jb-blue);
    color: #fff;
    border-color: var(--jb-blue);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(58, 163, 206, 0.30);
}

/* Bespoke CTA — dark in both themes */
/* Request Quote — brand navy, matching the Matrix card and the band.
   Was --night (#1a1a1a) in trade and --ink (#1a1a1a) in customer, i.e. black
   in both, which is what made it read as a different design language from
   everything around it. Same navy in both themes now, so the two dark blocks
   in the overlay are deliberately the same colour rather than nearly. */
.bespoke-cta {
    position: relative;
    display: block;
    margin-top: 24px;
    padding: 22px;
    background: var(--jb-navy);
    color: #fff;
    border-radius: var(--r-md);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    transition: transform var(--dur-base) var(--ease-pop),
                border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}
body[data-theme="customer"] .bespoke-cta {
    background: var(--jb-navy);
}
.cta-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.cta-sub {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    transition: color var(--dur-base) var(--ease-out);
}
.cta-main {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.cta-main i { color: var(--jb-accent); transition: transform var(--dur-base) var(--ease-pop); }
.cta-shimmer {
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.08), transparent);
    transform: skewX(-25deg);
    transition: left 0.7s var(--ease-out);
    pointer-events: none;
}
.bespoke-cta:hover {
    transform: translateY(-4px);
    border-color: var(--jb-accent);
    box-shadow: var(--shadow-pop);
}
.bespoke-cta:hover .cta-sub { color: #fff; }
.bespoke-cta:hover .cta-main i { transform: translateX(6px); }
.bespoke-cta:hover .cta-shimmer { left: 150%; }

/* Featured card */
.featured-card {
    background: var(--night);
    color: #fff;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
body[data-theme="customer"] .featured-card {
    background: var(--ink);
}
.featured-card::after {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at 20% 30%, rgba(58, 163, 206, 0.18), transparent 60%);
    z-index: 0;
    pointer-events: none;
}
.featured-content { position: relative; z-index: 1; }
.badge {
    display: inline-block;
    background: var(--jb-accent);
    color: #1a1a1a;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    padding: 5px 10px;
    border-radius: var(--r-pill);
    margin-bottom: 14px;
}
.featured-title { font-size: 1.5rem; margin-bottom: 6px; color: #fff; }
.featured-blurb { font-size: 0.9rem; opacity: 0.75; line-height: 1.5; max-width: 22ch; color: #fff; }
.featured-card .nav-img {
    position: absolute;
    bottom: -10px; right: -10px;
    width: 300px;
    opacity: 0.4;
    z-index: 0;
}

/* Tag cloud */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud a {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink-2);
    background: var(--paper);
    padding: 8px 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-pop);
}
.tag-cloud a:hover {
    background: var(--jb-blue);
    color: #fff;
    border-color: var(--jb-blue);
    transform: translateY(-1px);
}

/* Accordion (Access Solutions) */
.expansive-list { display: flex; flex-direction: column; }
.menu-group { position: relative; }
.menu-row {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--r-sm);
    transition: background var(--dur-fast) var(--ease-out);
}
.menu-row:hover { background: rgba(58, 163, 206, 0.05); }

.main-link {
    flex: 1 1 auto;
    display: block;
    color: var(--ink);
    font-weight: 700;
    font-size: 1.02rem;
    padding: 12px 8px 12px 12px;
    transition: color var(--dur-fast) var(--ease-out),
                padding-left var(--dur-fast) var(--ease-out);
    min-width: 0;
}
.main-link span { display: inline-block; position: relative; }
.main-link:hover { color: var(--jb-blue); }

.sub-toggle {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin-right: 4px;
    border: none;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: background var(--dur-fast) var(--ease-out),
                color      var(--dur-fast) var(--ease-out),
                transform  var(--dur-base) var(--ease-pop);
}
.sub-toggle:hover {
    background: rgba(58, 163, 206, 0.12);
    color: var(--jb-blue);
}
.sub-toggle i { transition: transform var(--dur-base) var(--ease-pop); }
.menu-group.active > .menu-row .sub-toggle i { transform: rotate(180deg); }
.menu-group.active > .menu-row .sub-toggle   { color: var(--jb-blue); }

.sub-links {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-left: 18px;
    margin-left: 12px;
    border-left: 1px solid transparent;
    transition: max-height var(--dur-slow) var(--ease-out),
                opacity    var(--dur-base) var(--ease-out),
                margin     var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}
.menu-group.active > .sub-links {
    max-height: 2000px;
    opacity: 1;
    margin: 4px 0 10px 12px;
    padding-bottom: 6px;
    border-left-color: rgba(58, 163, 206, 0.20);
}

.menu-group.level-0 > .menu-row .main-link {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
}
.menu-group.level-1 > .menu-row .main-link {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink-2);
}
.menu-group.level-2 > .menu-row .main-link {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink-3);
    padding-top: 8px;
    padding-bottom: 8px;
}

.menu-group:not(.has-children) > .menu-row .main-link {
    position: relative;
}
.menu-group:not(.has-children) > .menu-row .main-link::after {
    content: '\f105';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: 8px;
    color: var(--jb-blue);
    opacity: 0;
    display: inline-block;
    transform: translateX(-4px);
    transition: opacity var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.menu-group:not(.has-children) > .menu-row .main-link:hover::after {
    opacity: 1;
    transform: translateX(0);
}

.menu-error, .menu-empty {
    color: var(--ink-3);
    font-size: 0.9rem;
    padding: 12px 0;
}

/* Matrix card — solid navy block, no gradient, no band.
   The gradient it used to carry did no work at this size: it read as a smudge
   rather than a graduation, and the pale icon tile had too little contrast to
   register as an icon at all. Solid navy instead, so the card anchors the
   right-hand column against the promo above it.
   No three-band device here — that stays exclusive to the Technical Hub, so
   the band means one thing wherever it appears rather than becoming generic
   site furniture.
   Colours are literals, not theme tokens: the card is navy in BOTH themes, so
   pulling --paper or --ink would invert it in trade mode. */
.nav-matrix-link { text-decoration: none; }
.matrix-highlight {
    background: var(--jb-navy);
    border: 1px solid var(--jb-navy);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
    position: relative;
    overflow: hidden;
    transition: transform var(--dur-base) var(--ease-pop),
                box-shadow var(--dur-base) var(--ease-out);
}
.matrix-icon {
    background: var(--jb-blue);
    color: var(--jb-navy);
    width: 46px; height: 46px;
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: transform var(--dur-base) var(--ease-pop),
                background var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}
.matrix-text h4 { color: #ffffff; margin-bottom: 4px; font-size: 1.05rem; font-weight: 700; }
.matrix-text p  { color: #a9bccb; font-size: 0.83rem; line-height: 1.4; }
.matrix-arrow {
    margin-left: auto;
    color: var(--jb-accent);
    opacity: 0.75;
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-pop);
}
.nav-matrix-link:hover .matrix-highlight {
    transform: translateY(-3px);
    box-shadow: var(--shadow-pop);
}
.nav-matrix-link:hover .matrix-icon {
    /* Icon brightens rather than changing hue — on navy the old white-fill
       hover blew out and lost the icon shape entirely. */
    background: #57b8df;
    transform: scale(1.06);
    box-shadow: 0 6px 14px rgba(58, 163, 206, 0.35);
}
.nav-matrix-link:hover .matrix-arrow {
    opacity: 1;
    transform: translateX(6px);
}

/* ---------------------------------------------------------------------------
   THE THREE-BAND DEVICE — navy / blue / accent, in that order.
   The Technical Hub's marker, and only the Hub's: it appears on this card, on
   the hub-guide.php hero and on the PDF cover, and nowhere else. Putting it on
   the Matrix card too was tried and dropped — a mark that goes on everything
   stops meaning anything.
   10px because it has to hold its own against a full-colour promo photo in the
   next column; at 5px it disappeared.
   --------------------------------------------------------------------------- */
.jb-bands { display: flex; height: 10px; }
.jb-bands span { flex: 1; display: block; }
.jb-bands .jb-band--navy   { background: var(--jb-navy); }
.jb-bands .jb-band--blue   { background: var(--jb-blue); }
.jb-bands .jb-band--accent { background: var(--jb-accent); }

/* Hub guide card — sits at the foot of the Access Solutions column, filling
   the space left over by that card's grid-row: span 2.
   White body in BOTH themes, so the two cards in the overlay stay legible
   against the dark menu in trade mode. That means literal colours here rather
   than --paper / --ink, which would invert. */
.nav-hubguide-link { text-decoration: none; display: block; margin-top: 20px; }
.hubguide-highlight {
    background: #ffffff;
    border: 1px solid var(--line);
    border-top: none;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
    position: relative;
    transition: transform var(--dur-base) var(--ease-pop),
                box-shadow var(--dur-base) var(--ease-out);
}
.hubguide-icon {
    background: var(--jb-navy);
    color: #ffffff;
    width: 46px; height: 46px;
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: transform var(--dur-base) var(--ease-pop),
                background var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}
.hubguide-text h4 { color: #101820; margin-bottom: 4px; font-size: 1.05rem; font-weight: 700; }
.hubguide-text p  { color: #78838f; font-size: 0.83rem; line-height: 1.4; }
.hubguide-arrow {
    margin-left: auto;
    color: var(--jb-navy);
    opacity: 0.45;
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-pop);
}
/* Lift the whole unit, bands included, not just the white body. */
.nav-hubguide-link:hover .jb-bands,
.nav-hubguide-link:hover .hubguide-highlight {
    transform: translateY(-3px);
}
.nav-hubguide-link:hover .hubguide-highlight {
    box-shadow: var(--shadow-pop);
}
.nav-hubguide-link .jb-bands {
    transition: transform var(--dur-base) var(--ease-pop);
}
.nav-hubguide-link:hover .hubguide-icon {
    background: #1b3d5c;
    transform: scale(1.06);
    box-shadow: 0 6px 14px rgba(14, 34, 51, 0.30);
}
.nav-hubguide-link:hover .hubguide-arrow {
    opacity: 1;
    transform: translateX(6px);
}

/* =========================================================
   JUPITER BLUE — COOKIE CONSENT
   Slide-in banner + inline "feature blocked" hint pill.
   ========================================================= */

.jb-cookie {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    width: 340px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    padding: 20px 22px 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
    font-family: inherit;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 280ms cubic-bezier(.2, .8, .2, 1), opacity 220ms ease;
    pointer-events: none;
}
.jb-cookie.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Dark theme support — matches body[data-theme="trade"] */
body[data-theme="trade"] .jb-cookie {
    background: #1a1a1a;
    border-color: #2a2a2a;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
}

.jb-cookie__label {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
    margin-bottom: 8px;
}
body[data-theme="trade"] .jb-cookie__label { color: #888; }

.jb-cookie__title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 6px;
    line-height: 1.3;
}
body[data-theme="trade"] .jb-cookie__title { color: #fff; }

.jb-cookie__body {
    font-size: 0.82rem;
    color: #555;
    line-height: 1.5;
    margin: 0 0 14px;
}
body[data-theme="trade"] .jb-cookie__body { color: #b0b0b0; }

.jb-cookie__body a {
    color: #1a1a1a;
    border-bottom: 1px solid #ccc;
    transition: border-color 180ms ease;
}
.jb-cookie__body a:hover { border-bottom-color: #1a1a1a; }
body[data-theme="trade"] .jb-cookie__body a {
    color: #fff;
    border-bottom-color: #555;
}
body[data-theme="trade"] .jb-cookie__body a:hover { border-bottom-color: #fff; }

.jb-cookie__actions {
    display: flex;
    gap: 8px;
}

.jb-cookie__btn {
    flex: 1;
    padding: 11px 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.jb-cookie__btn--accept {
    background: #ff6b4a;
    color: #fff;
}
.jb-cookie__btn--accept:hover { background: #e85a3a; }

.jb-cookie__btn--decline {
    background: transparent;
    color: #666;
    border-color: #e0e0e0;
}
.jb-cookie__btn--decline:hover {
    color: #1a1a1a;
    border-color: #1a1a1a;
}
body[data-theme="trade"] .jb-cookie__btn--decline {
    color: #aaa;
    border-color: #333;
}
body[data-theme="trade"] .jb-cookie__btn--decline:hover {
    color: #fff;
    border-color: #fff;
}

/* =========================================================
   Inline "feature blocked" hint
   Use: JBCookies.renderHint(element, 'message')
   ========================================================= */
.jb-cookie-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #999;
    padding: 6px 10px;
    background: #f5f5f5;
    border-radius: 6px;
    letter-spacing: 0.02em;
}
.jb-cookie-hint::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff6b4a;
    flex-shrink: 0;
}
.jb-cookie-hint a {
    color: #1a1a1a;
    font-weight: 700;
    border-bottom: 1px solid currentColor;
}
body[data-theme="trade"] .jb-cookie-hint {
    background: #2a2a2a;
    color: #aaa;
}
body[data-theme="trade"] .jb-cookie-hint a { color: #fff; }

/* =========================================================
   COOKIE TOGGLE — persistent preferences icon (bottom-left)
   Appears once the user has made a choice. Click to reopen banner.
   ========================================================= */
.jb-cookie-toggle {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9998;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e5e5e5;
    color: #666;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
    font-size: 0.95rem;
    padding: 0;
    font-family: inherit;
}
.jb-cookie-toggle.show { display: inline-flex; }
.jb-cookie-toggle:hover {
    transform: scale(1.08);
    color: #ff6b4a;
    border-color: #ff6b4a;
}
.jb-cookie-toggle:focus-visible {
    outline: 2px solid #ff6b4a;
    outline-offset: 2px;
}

/* Status dot — green when accepted, grey when declined */
.jb-cookie-toggle::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #bbb;
    border: 1.5px solid #fff;
}
.jb-cookie-toggle.is-accepted::after { background: #36bf59; }

/* Dark theme */
body[data-theme="trade"] .jb-cookie-toggle {
    background: #1a1a1a;
    border-color: #2a2a2a;
    color: #aaa;
}
body[data-theme="trade"] .jb-cookie-toggle:hover {
    color: #ff6b4a;
    border-color: #ff6b4a;
}
body[data-theme="trade"] .jb-cookie-toggle::after { border-color: #1a1a1a; }

/* Hide toggle while banner is open to avoid overlap on mobile */
.jb-cookie.show ~ .jb-cookie-toggle { display: none !important; }
.jb-rchip{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-size:.82rem;color:var(--ink);white-space:nowrap;transition:color var(--dur-fast,.15s) var(--ease-out,ease);}
.jb-rchip:hover{color:var(--jb-blue);}
.jb-rchip__star{color:var(--jb-accent);font-size:.9rem;line-height:1;}
.jb-rchip__score{font-weight:800;font-variant-numeric:tabular-nums;}
.jb-rchip__sep{color:var(--ink-4);}
.jb-rchip__count{color:var(--ink-3);}
.jb-rchip__arr{color:var(--ink-4);transition:transform var(--dur-fast,.15s) var(--ease-out,ease);}
.jb-rchip:hover .jb-rchip__arr{transform:translateX(2px);color:var(--jb-blue);}
@media (max-width:700px){.jb-rchip__sep,.jb-rchip__count,.jb-rchip__arr{display:none;}}
/* =========================================================
   5. RESPONSIVE
   ========================================================= */
/* Stage 1 — below the 1400 container cap: shrink padding/gap/font fluidly
   so the bar keeps fitting. Tune the clamp stops to taste. */
@media (max-width: 1400px) and (min-width: 993px) {
    .jb-catnav__inner {
        gap: clamp(10px, 2vw, 30px);
        padding: 0 clamp(16px, 2.4vw, 40px);
    }
    .jb-catnav__link {
        font-size: clamp(0.58rem, 0.4rem + 0.32vw, 0.68rem);
        letter-spacing: 0.1em;
    }
}

/* Stage 2 — mid range: drop the dropdown arrows + panels and let the
   labels sit tighter. Sub-nav is reachable via the Menu overlay here. */
@media (max-width: 1170px) and (min-width: 993px) {
    .jb-catnav__chev  { display: none; }
    .jb-catnav__panel { display: none; }
}

/* Stage 3 — won't push in any further: collapse to the Menu overlay. */
@media (max-width: 992px) {
    .jb-catnav { display: none; }
}

/* The .jb-util--guest margin-right:auto hack was removed here, Aug 2026. It
   existed to stop the sparse signed-out strip going gappy, and was the reason
   signed-out and signed-in did not line up the same way. With three zones and
   space-between, an empty preferences zone collapses on its own. */

@media (max-width: 900px) {
    .jb-util__inner,
    .jb-main__inner,
    .jb-search-strip__inner { padding-left: 20px; padding-right: 20px; }

    /* Two-row strip: phone + account share row 1, toggles centre on row 2.
       Phone stays put. */
    .jb-util { font-size: 0.62rem; padding: 10px 0; }
    .jb-util__inner { flex-wrap: wrap; gap: 8px 14px; }
    .jb-util__section { flex-wrap: wrap; gap: 10px 14px; }
    .jb-util__section--prefs {
        order: 3;
        flex-basis: 100%;
        justify-content: center;
    }
    .jb-util__section--prefs > * + * { margin-left: 0; } /* divider keeps its padding-left */

    .jb-main__inner { padding: 18px 20px; }
    .jb-wordmark { font-size: 1.3rem; }
    .jb-mainnav { gap: 16px; }
    .jb-mainnav__link { font-size: 0.66rem; }

    .ai-panel { left: 20px; right: 20px; }

    .nav-overlay { padding-top: 180px; }
    .nav-bento-grid { grid-template-columns: 1fr; padding: 20px; gap: 14px; }
    .category-card { grid-row: auto; }

    .mobile-account-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        order: -1;
    }
    .mobile-action {
        background: var(--jb-blue-soft);
        color: var(--jb-blue);
        padding: 18px;
        border-radius: var(--r-md);
        font-weight: 700;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: background var(--dur-fast) var(--ease-out),
                    transform var(--dur-fast) var(--ease-pop);
    }
    .mobile-action:hover { background: var(--jb-blue); color: #fff; transform: translateX(4px); }
    .jb__spot {
        position: relative;
        top: -13px;
        right: 4px;
    }
    .jb__spot img { width: 14px; }
}

@media (max-width: 1107px) and (min-width: 901px) {
    .nav-bento-grid { grid-template-columns: repeat(2, 1fr); }
    .category-card  { grid-row: span 2; }
    .featured-card  { grid-column: span 1; }
}

@media (max-width: 600px) {
    .jb-mainnav__link { display: none; }
    .jb-search__input { font-size: 0.9rem; padding: 14px 0; }
    .jb-wordmark { font-size: 1.15rem; }
    .jb__spot {
        position: relative;
        top: -11px;
        right: 4px;
    }
    .jb__spot img { width: 13px; }
}

/* =========================================================
   Responsive + motion
   ========================================================= */
@media (max-width: 480px) {
    .jb-cookie {
        bottom: 12px;
        right: 12px;
        left: 12px;
        width: auto;
    }
    .jb-cookie-toggle { bottom: 12px; left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .nav-overlay.active .nav-card { animation: none; }

    .jb-cookie {
        transition: opacity 100ms ease;
        transform: none;
    }
}