/*
Theme Name: Powrex
Theme URI: https://powrex.shop/
Author: Powrex
Description: Motorsport / high-performance WooCommerce theme for the Powrex tool shop — carbon black, racing red, diagonal cuts, a speed-wipe hero with a timing-tower price, a race-bar header, gear-selector categories, pit-stop carousels, a brand leaderboard and dashboard gauges.
Version: 1.2.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: powrex
WC requires at least: 9.0
WC tested up to: 11.1
*/

/* =========================================================================
   Fonts (self-hosted, Latin + Cyrillic)
   ========================================================================= */
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 500 700; font-display: swap; src: url(assets/fonts/oswald-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 500 700; font-display: swap; src: url(assets/fonts/oswald-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/inter-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* =========================================================================
   Tokens
   ========================================================================= */
:root {
    --carbon: #0B0B0C;
    --graphite: #1A1A1D;
    --g2: #222226;
    --g3: #2C2C31;
    --line-d: #26262b;
    --red: #E10600;
    --red-hi: #FF3B30;
    --red-dk: #B30500;
    --off: #F5F5F5;
    --paper: #FFFFFF;
    --amber: #FFB000;
    --ink: #0B0B0C;
    --ink-2: #48484F;
    --mute: #A3A3AB;
    --line-l: #D9D9DE;

    --f-d: "Oswald", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
    --f-b: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    --gut: clamp(16px, 4vw, 56px);
    --max: 1360px;
    --cut: clamp(28px, 4.2vw, 72px);
    --ease: cubic-bezier(.2, .8, .2, 1);
    --focus: var(--amber);
    --hd: 64px;

    --carbon-weave:
        linear-gradient(27deg, #101012 5px, transparent 5px) 0 5px,
        linear-gradient(207deg, #101012 5px, transparent 5px) 10px 0,
        linear-gradient(27deg, #0e0e10 5px, transparent 5px) 0 10px,
        linear-gradient(207deg, #0e0e10 5px, transparent 5px) 10px 5px,
        linear-gradient(90deg, #0c0c0d 10px, transparent 10px),
        linear-gradient(#0d0d0f 25%, #0b0b0c 25%, #0b0b0c 50%, transparent 50%, transparent 75%, #0f0f11 75%, #0f0f11);
}

/* =========================================================================
   Base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
    margin: 0;
    background: var(--off);
    color: var(--ink);
    font: 400 16px/1.6 var(--f-b);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
html.menu-open { overflow: hidden; }
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; text-wrap: balance; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; }
[hidden] { display: none !important; }
.main { display: block; overflow-x: clip; }
.nw { white-space: nowrap; }
.main:focus { outline: none; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
.sec--light, .shop, .info, .flow, .pdp__desc, .toolbar { --focus: var(--ink); }

.screen-reader-text {
    border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
    height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
    position: absolute !important; word-wrap: normal !important;
}
.skip {
    position: fixed; top: 10px; left: 10px; z-index: 200;
    padding: 12px 18px; background: var(--amber); color: var(--carbon);
    font: 600 15px/1 var(--f-d); text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
    transform: translateY(-160%); transition: transform .2s var(--ease);
}
.skip:focus { transform: none; outline: 3px solid var(--carbon); }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.wrap--bleed { max-width: none; padding-right: 0; padding-left: max(var(--gut), calc((100% - var(--max)) / 2)); }

/* Fake italics: Oswald has none, so skew. */
.sk { display: inline-block; transform: skewX(-9deg); }

.eyebrow {
    display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
    font: 500 13px/1.2 var(--f-d); letter-spacing: .2em; text-transform: uppercase; color: var(--red);
}
.sec--dark .eyebrow, .band .eyebrow, .eyebrow--hero, .pdp__top .eyebrow { color: var(--red-hi); }
.eyebrow__n {
    display: inline-block; min-width: 34px; padding: 4px 9px; text-align: center;
    background: var(--red); color: #fff; font-weight: 700; letter-spacing: .06em;
    transform: skewX(-12deg);
}
/* Un-numbered eyebrow: a small chequered flag instead of a section number. */
.eyebrow__flag { flex: none; width: 26px; height: 16px; background: repeating-conic-gradient(var(--carbon) 0 25%, var(--off) 0 50%) 0 0 / 8px 8px; border: 1px solid var(--carbon); transform: skewX(-12deg); }
.sec--dark .eyebrow__flag, .hero .eyebrow__flag { background: repeating-conic-gradient(var(--off) 0 25%, var(--carbon) 0 50%) 0 0 / 8px 8px; border-color: var(--off); }

/* =========================================================================
   Buttons (skewed pseudo background keeps focus rings rectangular)
   ========================================================================= */
.btn,
.button,
button.button,
a.button,
input.button,
#place_order,
.wc-proceed-to-checkout .checkout-button {
    --btn-bg: var(--red);
    --btn-bg-h: #FF1A0E;
    --btn-fg: #fff;
    position: relative; isolation: isolate; z-index: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 0 28px; margin: 0;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    color: var(--btn-fg);
    font: 600 15px/1.1 var(--f-d); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; text-align: center;
    cursor: pointer; -webkit-appearance: none; appearance: none;
    transition: color .2s;
}
.btn::before,
.button::before,
#place_order::before,
.wc-proceed-to-checkout .checkout-button::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background: var(--btn-bg);
    transform: skewX(-12deg);
    transition: transform .28s var(--ease), background-color .2s;
}
.btn::after,
.button::after,
#place_order::after,
.wc-proceed-to-checkout .checkout-button::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    transform: skewX(-12deg);
    background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%) no-repeat;
    background-size: 260% 100%; background-position: 140% 0;
    transition: background-position .55s var(--ease);
}
.btn:hover::before, .button:hover::before, #place_order:hover::before, .wc-proceed-to-checkout .checkout-button:hover::before { transform: skewX(-18deg) scaleX(1.03); background: var(--btn-bg-h); }
.btn:hover::after, .button:hover::after, #place_order:hover::after, .wc-proceed-to-checkout .checkout-button:hover::after { background-position: -40% 0; }
.btn .ic { width: 20px; height: 20px; transition: transform .25s var(--ease); }
.btn:hover .ic { transform: translateX(5px); }
.btn--lg { min-height: 60px; padding: 0 34px; font-size: 17px; }
.btn--amber { --btn-bg: var(--amber); --btn-bg-h: #FFC53D; --btn-fg: var(--carbon); }
.btn--dark, button[name="update_cart"], button[name="apply_coupon"], .woocommerce-message .button, .woocommerce-info .button { --btn-bg: var(--carbon); --btn-bg-h: var(--red); --btn-fg: #fff; }
.btn--ghost { --btn-bg: transparent; --btn-bg-h: var(--off); --btn-fg: var(--off); }
.btn--ghost::before { border: 2px solid currentColor; }
.btn--ghost:hover { color: var(--carbon); }
.btn--ghost:hover::before { border-color: var(--off); }
/* Outline variant for secondary actions on dark (e.g. "Добави в количката" next to "Купи сега"). */
.btn--outline, .pdp__summary .single_add_to_cart_button { --btn-bg: transparent; --btn-bg-h: var(--off); --btn-fg: var(--off); }
.btn--outline::before, .pdp__summary .single_add_to_cart_button::before { border: 2px solid rgba(245, 245, 245, .7); }
.btn--outline:hover, .pdp__summary .single_add_to_cart_button:hover { color: var(--carbon); }
.btn--outline:hover::before, .pdp__summary .single_add_to_cart_button:hover::before { border-color: var(--off); }
.button:disabled, .button[disabled], .button.disabled { opacity: .45; cursor: not-allowed; }
.button:disabled::before { transform: skewX(-12deg); background: var(--btn-bg); }
.button.loading { opacity: .75; pointer-events: none; }

/* =========================================================================
   Top bar + header
   ========================================================================= */
.topbar { background: #060607; color: #B4B4BB; border-bottom: 1px solid #1a1a1d; font: 500 12px/1 var(--f-b); letter-spacing: .02em; }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 36px; }
.topbar__facts { display: flex; gap: 26px; list-style: none; padding: 0; margin: 0; white-space: nowrap; }
.topbar__facts li, .topbar__mail { display: inline-flex; align-items: center; gap: 8px; }
.topbar .ic { flex: none; width: 15px; height: 15px; color: var(--red-hi); stroke-width: 2.2; }
.topbar__mail { color: #D6D6DB; text-decoration: none; }
.topbar__mail:hover { color: #fff; }

/* One slim black race bar: red livery logo block · numbered categories · search · skewed cart. */
.hd {
    position: sticky; top: 0; z-index: 60;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch;
    height: var(--hd);
    background: var(--carbon); color: var(--off);
    transition: box-shadow .3s;
}
.hd::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; pointer-events: none;
    background: var(--red);
}
.hd.is-scrolled { box-shadow: 0 14px 34px rgba(0, 0, 0, .35); }

.hd__livery {
    grid-column: 1; grid-row: 1; position: relative;
    display: flex; align-items: center;
    padding: 0 66px 0 var(--gut);
    background: linear-gradient(115deg, var(--red) 0 72%, #C80500 72%);
    clip-path: polygon(0 0, 100% 0, calc(100% - 34px) 100%, 0 100%);
}
.hd__livery::after {
    content: ""; position: absolute; top: 0; bottom: 0; right: 20px; width: 7px;
    background: var(--carbon); transform: skewX(28deg); transform-origin: top; opacity: .9;
}

.logo { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; white-space: nowrap; }
.logo__mark { width: 42px; height: 28px; flex: none; }
.logo__word { display: inline-block; font: 700 34px/1 var(--f-d); letter-spacing: .035em; text-transform: uppercase; transform: skewX(-10deg); }
.logo--hd .logo__word { font-size: 31px; }
.logo--hd .logo__mark { width: 38px; height: 25px; }
.logo:focus-visible { outline-color: #fff; outline-offset: 5px; }
.logo--menu .logo__mark, .logo--ft .logo__mark { color: var(--red); }

/* Numbered categories, inline in the bar. Hover: a skewed graphite slab slides in; current: red slab. */
.hd__gears { grid-column: 2; grid-row: 1; min-width: 0; display: flex; align-items: stretch; padding-left: 4px; }
.gears { display: flex; align-items: stretch; list-style: none; margin: 0 auto; padding: 0; }
.gears li { display: flex; }
.gears__a {
    position: relative; isolation: isolate; display: flex; align-items: center; gap: 7px; padding: 0 13px;
    color: #D2D2D8; text-decoration: none; white-space: nowrap;
    font: 500 14.5px/1 var(--f-d); letter-spacing: .06em; text-transform: uppercase;
    transition: color .15s;
}
.gears__a::before {
    content: ""; position: absolute; left: 2px; right: 2px; top: 12px; bottom: 12px; z-index: -1;
    background: var(--g3); transform: skewX(-16deg) scaleX(0); transform-origin: left;
    transition: transform .22s var(--ease), background-color .2s;
}
.gears__n { color: var(--red-hi); font-weight: 700; font-size: 12px; letter-spacing: .04em; transition: color .15s; }
.gears__t { display: inline-block; transition: transform .22s var(--ease); }
.gears__a:hover, .gears__a:focus-visible, .gears__a.is-active { color: #fff; }
.gears__a:hover::before, .gears__a:focus-visible::before { transform: skewX(-16deg) scaleX(1); }
.gears__a:hover .gears__t { transform: skewX(-8deg) translateX(2px); }
.gears__a.is-active::before { transform: skewX(-16deg) scaleX(1); background: var(--red); }
.gears__a.is-active .gears__n { color: #fff; }
.gears__a:focus-visible { outline-offset: -6px; }

.hd__actions { grid-column: 3; grid-row: 1; display: flex; align-items: center; gap: 6px; padding: 0 var(--gut) 0 10px; }
.hd__icon { position: relative; isolation: isolate; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; background: none; border: 0; color: var(--off); cursor: pointer; text-decoration: none; }
.hd__icon::before { content: ""; position: absolute; inset: 6px 2px; z-index: -1; border: 2px solid transparent; transform: skewX(-14deg); transition: border-color .2s, background-color .2s, transform .22s var(--ease); }
.hd__icon:hover::before { border-color: #3A3A40; background: var(--g2); transform: skewX(-20deg); }
.hd__icon .ic { width: 24px; height: 24px; }
.hd__search:hover .ic { color: #fff; }
.hd__burger { display: none; }

.hd__cart { position: relative; isolation: isolate; display: inline-flex; align-items: center; height: 44px; padding: 0 22px; margin-left: 8px; color: var(--carbon); text-decoration: none; }
.hd__cart::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--off); transform: skewX(-16deg); transition: background-color .2s, transform .22s var(--ease); }
.hd__cart:hover::before { background: var(--amber); transform: skewX(-22deg) translateX(3px); }
.hd__cart-in { display: inline-flex; align-items: center; gap: 10px; font: 600 14px/1 var(--f-d); letter-spacing: .1em; text-transform: uppercase; }
.hd__cart .ic { width: 22px; height: 22px; }
.sc-cart-count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; background: var(--red); color: #fff; font: 700 14px/1 var(--f-d); letter-spacing: 0; transform: skewX(-12deg); }
.hd__cart.is-bump { animation: bump .6s var(--ease); }
@keyframes bump { 0% { transform: none; } 30% { transform: translateY(-4px) scale(1.06); } 60% { transform: translateY(1px); } 100% { transform: none; } }

/* Slim checkout header */
.hd--slim { grid-template-columns: auto minmax(0, 1fr); }
.hd--slim .hd__bar { grid-column: 2; display: flex; align-items: center; gap: 22px; min-width: 0; padding: 0 var(--gut) 0 8px; }
.hd--slim .hd__actions { margin-left: auto; padding: 0; }
.hd__secure { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding-left: 18px; color: #C9C9CF; font: 500 13px/1 var(--f-d); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.hd__secure .ic { width: 20px; height: 20px; color: var(--amber); }
.hd__mail { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; color: #C9C9CF; text-decoration: none; font-size: 14px; }
.hd__mail .ic { width: 18px; height: 18px; color: var(--red-hi); }
.hd__mail:hover { color: #fff; }
.hd__back { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; margin-left: 8px; color: var(--carbon); text-decoration: none; font: 600 14px/1 var(--f-d); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.hd__back::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--off); transform: skewX(-14deg); transition: background-color .2s, transform .25s var(--ease); }
.hd__back:hover::before { background: var(--amber); transform: skewX(-20deg); }
.hd__back .ic { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.hd__back:hover .ic { transform: translateX(-4px); }
.hd__back .sc-cart-count { min-width: 24px; height: 24px; font-size: 13px; }
.hd__back-s { display: none; }

.burger { display: grid; gap: 5px; width: 26px; transform: skewX(-14deg); }
.burger span { display: block; height: 3px; background: currentColor; }
.burger span:nth-child(2) { width: 78%; margin-left: auto; background: var(--red-hi); }
.burger span:nth-child(3) { width: 56%; }

/* Search field (menu, search results, 404). */
.sf { position: relative; display: flex; align-items: center; width: 100%; }
.sf input[type="search"] {
    width: 100%; height: 46px; padding: 0 104px 0 46px;
    background: #151517; border: 1px solid #2C2C31; border-radius: 0;
    color: var(--off); font: 400 15px/1 var(--f-b);
    -webkit-appearance: none; appearance: none;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.sf input[type="search"]::placeholder { color: #8E8E96; }
.sf input[type="search"]:focus { outline: none; border-color: var(--red); background: #1B1B1E; box-shadow: inset 0 -3px 0 var(--red); }
.sf input[type="search"]::-webkit-search-cancel-button { filter: invert(1) grayscale(1); }
.sf__ic { position: absolute; left: 15px; width: 19px; height: 19px; color: #8E8E96; pointer-events: none; }
.sf__go {
    position: absolute; right: 5px; top: 5px; bottom: 5px; padding: 0 18px;
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--red); color: #fff; border: 0; cursor: pointer;
    font: 600 13px/1 var(--f-d); letter-spacing: .12em; text-transform: uppercase;
    transition: background-color .2s;
}
.sf__go:hover { background: #FF1A0E; }
.sf__go .ic { width: 20px; height: 20px; }

/* No JS: no burger (the menu needs JS); on small screens the categories become a scrolling second row. */
html:not(.js) .hd__burger { display: none !important; }

/* =========================================================================
   Full-screen search overlay
   ========================================================================= */
.so {
    position: fixed; inset: 0; z-index: 110;
    display: none; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
    background: var(--carbon-weave); background-color: var(--carbon); background-size: 20px 20px; color: var(--off);
}
.so.is-open, html:not(.js) .so:target { display: flex; }
.so.is-open { animation: soIn .38s var(--ease) both; }
.so.is-closing { animation: soOut .26s cubic-bezier(.6, 0, .8, .4) both; }
@keyframes soIn { from { clip-path: polygon(0 0, 0 0, -24% 100%, -24% 100%); } to { clip-path: polygon(0 0, 124% 0, 100% 100%, -24% 100%); } }
@keyframes soOut { from { clip-path: polygon(0 0, 124% 0, 100% 100%, -24% 100%); } to { clip-path: polygon(124% 0, 124% 0, 100% 100%, 100% 100%); } }
html.so-open { overflow: hidden; }
.so__bg { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.so__slab { position: absolute; top: 0; bottom: 0; right: 0; width: 30%; background: linear-gradient(170deg, #F20700, var(--red) 45%, #9E0400); clip-path: polygon(52% 0, 100% 0, 100% 100%, 0 100%); opacity: .95; }
.speed--so { opacity: .5; -webkit-mask-image: linear-gradient(90deg, transparent 0 62%, #000 80%); mask-image: linear-gradient(90deg, transparent 0 62%, #000 80%); }
.so__top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 var(--gut); background: var(--carbon); border-bottom: 3px solid var(--red); }
.so__close { position: relative; isolation: isolate; display: grid; place-items: center; width: 52px; height: 52px; color: var(--off); }
.so__close::before { content: ""; position: absolute; inset: 4px; z-index: -1; background: var(--g2); transform: skewX(-14deg); transition: background-color .2s, transform .22s var(--ease); }
.so__close:hover::before { background: var(--red); transform: skewX(-20deg); }
.so__close .ic { width: 28px; height: 28px; }
.so__body { position: relative; z-index: 1; padding-top: clamp(40px, 9vh, 110px); padding-bottom: 56px; }
.so__title { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font: 600 13px/1.2 var(--f-d); letter-spacing: .22em; text-transform: uppercase; color: var(--amber); }
.so__flag { width: 26px; height: 16px; background: repeating-conic-gradient(var(--off) 0 25%, var(--carbon) 0 50%) 0 0 / 8px 8px; transform: skewX(-12deg); }
.so__form { display: flex; align-items: flex-end; gap: 18px; max-width: 1100px; border-bottom: 4px solid #3A3A40; transition: border-color .2s; }
.so__form:focus-within { border-color: var(--red); }
.so__form input[type="search"] {
    flex: 1; min-width: 0; height: auto; padding: 8px 0 14px; margin: 0;
    background: transparent; border: 0; border-radius: 0; color: #fff;
    font: 700 clamp(38px, 6.4vw, 96px)/1.05 var(--f-d); text-transform: uppercase; letter-spacing: -.005em;
    -webkit-appearance: none; appearance: none;
}
.so__form input[type="search"]::placeholder { color: #85858D; }
.so__form input[type="search"]:focus { outline: none; }
.so__form input[type="search"]::-webkit-search-cancel-button { filter: invert(1) grayscale(1); }
.so__go { position: relative; isolation: isolate; flex: none; display: inline-flex; align-items: center; gap: 10px; height: 58px; margin-bottom: 16px; padding: 0 26px; background: none; border: 0; color: #fff; cursor: pointer; font: 600 16px/1 var(--f-d); letter-spacing: .12em; text-transform: uppercase; }
.so__go::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--red); transform: skewX(-14deg); transition: background-color .2s, transform .22s var(--ease); }
.so__go:hover::before { background: #FF1A0E; transform: skewX(-20deg); }
.so__go .ic { width: 22px; height: 22px; transition: transform .22s var(--ease); }
.so__go:hover .ic { transform: translateX(4px); }
.so__quick { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 96px); max-width: 1100px; margin-top: clamp(36px, 6vh, 64px); }
.so__label { margin: 0 0 12px; font: 600 12px/1 var(--f-d); letter-spacing: .2em; text-transform: uppercase; color: #9C9CA4; }
.so__cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-d); }
.so__cats a { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-d); color: var(--off); text-decoration: none; font: 600 20px/1.1 var(--f-d); letter-spacing: .03em; text-transform: uppercase; transition: color .15s, transform .2s var(--ease); }
.so__cats a:hover { color: #fff; transform: translateX(6px) skewX(-6deg); }
.so__n { font-size: 13px; color: var(--red-hi); letter-spacing: .06em; }
.so__brands { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.so__brands a { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border: 1px solid #34343A; background: rgba(11, 11, 12, .6); color: var(--off); text-decoration: none; font: 600 15px/1 var(--f-d); letter-spacing: .08em; text-transform: uppercase; transform: skewX(-10deg); transition: background-color .15s, border-color .15s; }
.so__brands a::before { content: ""; width: 5px; height: 18px; background: var(--team, var(--red)); }
.so__brands a:hover { background: var(--red); border-color: var(--red); }

/* =========================================================================
   Full-screen mobile menu
   ========================================================================= */
.menu {
    position: fixed; inset: 0; z-index: 100;
    display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
    background: var(--carbon-weave); background-color: var(--carbon); background-size: 20px 20px; color: var(--off);
    transform: translateX(105%) skewX(-7deg); transform-origin: bottom left;
    transition: transform .4s var(--ease);
}
.menu.is-open { transform: none; }
/* Livery stripe on the right edge; no speed lines behind the menu text. */
.menu__bg { position: fixed; top: 0; bottom: 0; right: 0; width: 34px; pointer-events: none; background: linear-gradient(180deg, var(--red), #9E0400); clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); }
.menu__bg::after { content: ""; position: absolute; top: 0; bottom: 0; left: 2px; width: 4px; background: var(--amber); transform: skewX(-3deg); }
.menu__top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 42px 0 16px; background: var(--carbon); border-bottom: 3px solid var(--red); }
.logo--menu .logo__word { font-size: 28px; }
.menu__close { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; background: none; border: 0; color: var(--off); cursor: pointer; }
.menu__close .ic { width: 30px; height: 30px; }
.menu__body { position: relative; padding: 20px 50px 48px 16px; width: 100%; max-width: 760px; margin-inline: auto; }
.sf--menu input[type="search"] { height: 54px; font-size: 16px; padding-right: 64px; }
.sf--menu .sf__go { padding: 0 14px; }
.menu__cats { list-style: none; padding: 0; margin: 20px 0 8px; border-top: 1px solid var(--line-d); }
.menu__cats a { display: grid; grid-template-columns: 46px 1fr auto; align-items: baseline; gap: 8px; padding: 13px 4px 13px 0; border-bottom: 1px solid var(--line-d); color: var(--off); text-decoration: none; }
.menu__n { font: 700 14px/1 var(--f-d); color: var(--red-hi); letter-spacing: .06em; }
.menu__name { font: 700 30px/1.02 var(--f-d); text-transform: uppercase; letter-spacing: .01em; transform: skewX(-8deg); transform-origin: left; transition: transform .25s var(--ease), color .2s; }
.menu__c { font: 500 14px/1 var(--f-d); color: #9C9CA4; }
.menu__cats a:hover .menu__name, .menu__cats a:focus-visible .menu__name { color: var(--red-hi); transform: skewX(-8deg) translateX(8px); }
.menu.is-open .menu__cats li { animation: menuIn .5s var(--ease) both; animation-delay: calc(var(--i) * 35ms + 90ms); }
@keyframes menuIn { from { opacity: 0; transform: translateX(48px) skewX(-8deg); } }
.menu__label { margin: 26px 0 12px; font: 600 12px/1 var(--f-d); letter-spacing: .2em; text-transform: uppercase; color: #9C9CA4; }
.menu__brands { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.menu__brands a { display: inline-block; padding: 9px 14px; border: 1px solid #34343A; color: var(--off); text-decoration: none; font: 600 14px/1 var(--f-d); letter-spacing: .08em; text-transform: uppercase; transform: skewX(-10deg); }
.menu__brands a:hover { background: var(--red); border-color: var(--red); }
.menu__info { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.menu__info a { display: block; padding: 7px 0; color: #D2D2D8; text-decoration: none; font-size: 15px; }
.menu__info a:hover { color: #fff; text-decoration: underline; }
.menu__facts { list-style: none; padding: 20px 0 0; margin-top: 24px; border-top: 1px solid var(--line-d); display: grid; gap: 10px; color: #BDBDC4; font-size: 14px; }
.menu__facts li { display: flex; align-items: center; gap: 10px; }
.menu__facts .ic { width: 18px; height: 18px; color: var(--red-hi); }
.menu__facts a { color: var(--amber); }

/* =========================================================================
   Sections + diagonal cuts
   ========================================================================= */
.sec { --pad: clamp(64px, 7.4vw, 108px); position: relative; padding: var(--pad) 0 calc(var(--pad) + var(--cut)); }
.sec--dark { background: var(--carbon); color: var(--off); }
.sec--light { background: var(--off); color: var(--ink); }
.sec + .sec,
.band + .sec {
    margin-top: calc(-1 * var(--cut));
    padding-top: calc(var(--pad) + var(--cut));
    clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
}
.sec:last-child, .sec + .sec:last-child { padding-bottom: var(--pad); }
.sec--dark.sec + .sec--dark { border-top: 0; }

/* Section heading */
.sh { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-bottom: clamp(28px, 4vw, 52px); }
.sh__title { font: 700 clamp(42px, 6.4vw, 100px)/.9 var(--f-d); text-transform: uppercase; letter-spacing: -.005em; }
.sh__title .sk { transform: skewX(-9deg); transform-origin: bottom left; }
.sh__title em { font-style: normal; color: var(--red); }
.sec--dark .sh__title em { color: var(--red-hi); }
.sh__sub { max-width: 46ch; margin: 18px 0 0; font-size: 17px; color: var(--ink-2); }
.sec--dark .sh__sub { color: var(--mute); }

/* Speed lines — always masked away from text columns (see each instance). */
.speed { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.speed__g { animation: speed 14s linear infinite; }
.speed__g2 { animation-duration: 9s; }
.speed__g3 { animation-duration: 21s; }
@keyframes speed { to { transform: translateX(-1600px); } }

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
    position: relative; overflow: clip; color: var(--off);
    background: var(--carbon-weave); background-color: var(--carbon); background-size: 20px 20px;
    padding-bottom: clamp(40px, 4vw, 60px);
}
.hero__main { position: relative; display: flex; min-height: clamp(560px, calc(100svh - 250px), 760px); }
.hero__fx { position: absolute; inset: 0; pointer-events: none; }

/*
 * Full-bleed product photo, revealed by a diagonal speed wipe: a solid slanted edge followed
 * by ever-thinner streaks. Where the streaks run ahead of the photo they show the red livery
 * behind it, so the wipe reads as carbon → red streaks → photo.
 */
.hero__photo {
    position: absolute; inset: 0;
    background: linear-gradient(165deg, #F20700, var(--red) 45%, #A00400);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M46 0H100V100H33Z'/%3E%3Cpath d='M41.5 0H44.5L31.5 100H28.5Z'/%3E%3Cpath d='M37.4 0H39.8L26.8 100H24.4Z'/%3E%3Cpath d='M33.8 0H35.6L22.6 100H20.8Z'/%3E%3Cpath d='M30.7 0H32L19 100H17.7Z'/%3E%3Cpath d='M28 0H28.9L15.9 100H15Z'/%3E%3Cpath d='M25.7 0H26.3L13.3 100H12.7Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M46 0H100V100H33Z'/%3E%3Cpath d='M41.5 0H44.5L31.5 100H28.5Z'/%3E%3Cpath d='M37.4 0H39.8L26.8 100H24.4Z'/%3E%3Cpath d='M33.8 0H35.6L22.6 100H20.8Z'/%3E%3Cpath d='M30.7 0H32L19 100H17.7Z'/%3E%3Cpath d='M28 0H28.9L15.9 100H15Z'/%3E%3Cpath d='M25.7 0H26.3L13.3 100H12.7Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.hero__photo img { position: absolute; top: 0; right: 0; width: 80%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* A soft floor under the photo so the gauges below sit on something, not on a hard crop. */
.hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 11, 12, .55) 12%, rgba(11, 11, 12, .22) 34%, transparent 46%), linear-gradient(180deg, rgba(11, 11, 12, .28), transparent 22%, transparent 72%, rgba(11, 11, 12, .7)); }
/* Amber hairline on the leading edge of the wipe. */
.hero__slab { position: absolute; inset: 0; background: var(--amber); clip-path: polygon(47.2% 0, 47.8% 0, 34.8% 100%, 34.2% 100%); z-index: 1; }
.speed--hero {
    z-index: 1; opacity: .55;
    -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 16%, #000 40%, transparent 56%), linear-gradient(180deg, #000 0 24%, transparent 42%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 4%, #000 16%, #000 40%, transparent 56%), linear-gradient(180deg, #000 0 24%, transparent 42%);
    mask-composite: intersect;
}

.hero__in { position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 350px); align-items: end; gap: 32px clamp(28px, 4vw, 64px); padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(24px, 3vw, 40px); }
.hero__copy { position: relative; max-width: 760px; }
.hero__kicker { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 8px 16px 8px 12px; font: 600 13px/1.2 var(--f-d); letter-spacing: .22em; text-transform: uppercase; color: #fff; }
.hero__kicker::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(11, 11, 12, .92); box-shadow: inset 3px 0 0 var(--red); transform: skewX(-12deg); }
.hero__flag { flex: none; width: 30px; height: 18px; background: repeating-conic-gradient(var(--off) 0 25%, var(--carbon) 0 50%) 0 0 / 9px 9px; border: 1px solid var(--off); transform: skewX(-12deg); }
.hero__title { margin: 0 0 24px; font: 700 clamp(60px, 8vw, 132px)/.84 var(--f-d); text-transform: uppercase; letter-spacing: -.012em; text-shadow: 0 6px 40px rgba(0, 0, 0, .55); }
.hero__l { display: block; overflow: hidden; padding: 0 .14em 0 0; }
.hero__l .sk { transform: skewX(-10deg); transform-origin: bottom left; }
/* The key word rides on a red number plate, legible over carbon, streaks or photo. */
.hero__title em { display: inline-block; padding: .06em .1em 0 .08em; margin: 0 -.02em; font-style: normal; color: #fff; background: var(--red); text-shadow: none; box-shadow: .06em .06em 0 var(--carbon); }
.hero__lead { max-width: 40ch; margin: 0 0 28px; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: #D4D4DA; text-shadow: 0 2px 16px rgba(0, 0, 0, .8); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px 22px; }

/* Timing tower: the hero price as a stack of slanted broadcast rows. */
.tower { position: relative; align-self: center; display: grid; gap: 4px; width: 100%; margin-bottom: 8px; filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .5)); }
.tower__head, .tower__team, .tower__name, .tower__row { position: relative; isolation: isolate; margin: 0; padding: 10px 18px 10px 20px; }
.tower__head::before, .tower__team::before, .tower__name::before, .tower__row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(11, 11, 12, .93); transform: skewX(-10deg); }
.tower__head { display: flex; align-items: center; gap: 12px; padding-block: 8px; font: 600 13px/1 var(--f-d); letter-spacing: .2em; text-transform: uppercase; color: #fff; }
.tower__head::before { background: var(--red); }
.tower__pos { font: 700 26px/1 var(--f-d); letter-spacing: 0; transform: skewX(-10deg); }
.tower__flag { margin-left: auto; width: 32px; height: 20px; background: repeating-conic-gradient(#fff 0 25%, var(--carbon) 0 50%) 0 0 / 10px 10px; transform: skewX(-10deg); }
.tower__team { display: flex; align-items: center; gap: 12px; font: 700 22px/1 var(--f-d); letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.tower__bar { flex: none; width: 6px; height: 24px; background: var(--team); transform: skewX(-10deg); }
.tower__off { margin-left: auto; padding: 5px 9px; background: #fff; color: var(--red); font-size: 17px; letter-spacing: .02em; transform: skewX(-10deg); }
.tower__name { font: 600 14px/1.4 var(--f-b); }
.tower__name a { color: #E7E7EB; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tower__name a:hover { color: #fff; text-decoration: underline; }
.tower__data { display: grid; gap: 4px; margin: 0; }
.tower__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.tower__row dt { font: 600 12px/1 var(--f-d); letter-spacing: .16em; text-transform: uppercase; color: #A9A9B1; }
.tower__row dd { margin: 0; font: 600 18px/1 var(--f-d); color: #fff; white-space: nowrap; }
.tower__row dd del { color: #BDBDC4; text-decoration-color: var(--red-hi); text-decoration-thickness: 2px; }
.tower__row--now { align-items: center; padding-block: 14px 12px; }
.tower__row--now::before { background: rgba(26, 26, 29, .96); box-shadow: inset 4px 0 0 var(--red); }
.tower__row--gap dd { color: var(--amber); }
.bp--tower { font-size: clamp(54px, 4.6vw, 74px); color: #fff; }
.tower__buy { display: flex; align-items: center; gap: 20px; padding-top: 10px; }
.tower__buy .btn { flex: 1; }
.tower__more { color: var(--off); font: 600 14px/1 var(--f-d); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: 4px; }
.tower__more:hover { color: var(--red-hi); }
/* Rows lean like one italic slab. */
.tower > :nth-child(2) { margin-left: -4px; margin-right: 4px; }
.tower > :nth-child(3) { margin-left: -8px; margin-right: 8px; }
.tower__data > :nth-child(1) { margin-left: -12px; margin-right: 12px; }
.tower__data > :nth-child(2) { margin-left: -17px; margin-right: 17px; }
.tower__data > :nth-child(3) { margin-left: -21px; margin-right: 21px; }
.tower__buy { margin-left: -26px; margin-right: 26px; }

.js .hero__l .sk { animation: heroLine .8s var(--ease) both; }
.js .hero__l:nth-child(2) .sk { animation-delay: .07s; }
.js .hero__l:nth-child(3) .sk { animation-delay: .14s; }
.js .hero__photo { animation: heroWipe .9s var(--ease) both; }
.js .hero__slab { animation: heroWipe .9s var(--ease) .05s both; }
.js .tower > *, .js .tower__data > * { animation: towerRow .5s var(--ease) both; }
.js .tower > :nth-child(2) { animation-delay: .32s; }
.js .tower > :nth-child(3) { animation-delay: .38s; }
.js .tower__data > :nth-child(1) { animation-delay: .44s; }
.js .tower__data > :nth-child(2) { animation-delay: .5s; }
.js .tower__data > :nth-child(3) { animation-delay: .56s; }
.js .tower > :nth-child(1) { animation-delay: .26s; }
.js .tower__data { animation: none; }
.js .tower__buy { animation-delay: .62s; }
@keyframes heroLine { from { transform: translateY(105%) skewX(-10deg); } to { transform: skewX(-10deg); } }
@keyframes heroWipe { from { transform: translateX(22%); opacity: 0; } }
@keyframes towerRow { from { opacity: 0; transform: translateX(60px) skewX(-8deg); } }

.save { display: inline-flex; align-items: stretch; background: var(--red); color: #fff; font: 600 13px/1.1 var(--f-d); letter-spacing: .06em; text-transform: uppercase; transform: skewX(-10deg); white-space: nowrap; }
.save__flag { flex: none; width: 18px; background: repeating-conic-gradient(#fff 0 25%, var(--carbon) 0 50%) 0 0 / 9px 9px; }
.save__t { padding: 7px 10px; }
.save .amount { font-family: var(--f-d); }
.save b { display: flex; align-items: center; padding: 0 10px; background: #fff; color: var(--red); font-weight: 700; }

/* Big price numerals */
.bp { display: inline-flex; white-space: nowrap; }
.bp__v { display: inline-flex; align-items: flex-start; font-family: var(--f-d); font-weight: 700; line-height: .9; letter-spacing: -.01em; transform: skewX(-10deg); transform-origin: bottom left; }
.bp__i { font-size: 1em; }
.bp__f { font-size: max(12px, .42em); margin-top: .1em; }
.bp__c { font-size: max(12px, .42em); margin: .1em 0 0 .14em; color: var(--red-hi); }
.bp--card { font-size: 30px; }
/* Cents and currency on cards: legible, same size, € in off-white. */
.bp--card .bp__f, .bp--card .bp__c { font-size: clamp(12px, .44em, 16px); }
.bp--card .bp__c { color: var(--off); letter-spacing: 1px; margin-left: .2em; }
.bp--xl { font-size: clamp(50px, 4.4vw, 72px); color: #fff; }
.bp--slot { font-size: 40px; color: #fff; }
.bp--slot .bp__c { color: var(--off); }
.bp--stick { font-size: 30px; color: #fff; }

/* Dashboard gauges */
.dash {
    position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: clamp(28px, 3vw, 44px);
    background: linear-gradient(180deg, rgba(34, 34, 38, .92), rgba(20, 20, 22, .96));
    border-top: 1px solid #34343a;
    clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px));
}
.gauge { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: start; align-content: start; gap: 16px; padding: 20px 22px; border-left: 1px solid #2C2C31; }
.gauge:first-child { border-left: 0; }
.gauge__svg { width: 112px; height: auto; overflow: visible; }
.gauge__read { min-width: 0; padding-top: 2px; }
.garc { fill: none; stroke: #2E2E34; stroke-width: 12; }
.gband { fill: none; stroke: var(--amber); stroke-width: 6; stroke-linecap: butt; }
.gband.is-red { stroke: var(--red); }
.gt { stroke: #66666E; stroke-width: 1.6; }
.gt--maj { stroke: #E4E4E8; stroke-width: 2.6; }
.glabel { fill: #B4B4BB; font: 600 15px var(--f-d); letter-spacing: .04em; text-transform: uppercase; }
.gneedle { fill: var(--off); transform-origin: 110px 104px; transform: rotate(var(--needle)); transition: transform 1.6s cubic-bezier(.3, 1.45, .45, 1) .25s; }
.ghub { fill: var(--red); stroke: var(--carbon); stroke-width: 3; }
.js .gauge.is-armed:not(.is-live) .gneedle { transform: rotate(-90deg); }
.gauge__v { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 0 10px; font: 700 42px/1 var(--f-d); color: #fff; white-space: nowrap; }
.gauge__v small { font: 500 12.5px/1 var(--f-d); letter-spacing: .12em; text-transform: uppercase; color: #A3A3AB; }
.gauge__t { margin: 0; font-size: 14px; line-height: 1.45; color: #B8B8BF; }
.gauge__t strong { display: block; color: #fff; font-weight: 600; font-size: 15px; }

/* =========================================================================
   Start line: a static chequered band painted across the track at the top
   of the starting grid (the footer carries the finish line).
   ========================================================================= */
.startline {
    position: absolute; left: -3%; right: -3%; top: 18px; z-index: 3; height: 46px;
    background: repeating-conic-gradient(var(--off) 0 25%, var(--carbon) 0 50%) 0 0 / 23px 23px;
    border-block: 3px solid var(--off);
    transform: skewY(-1.8deg);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
    pointer-events: none;
}
.startline__plate {
    position: absolute; top: 50%; left: calc(3% + max(var(--gut), (100% - var(--max)) / 2));
    padding: 9px 22px 9px 18px; background: var(--red); color: #fff;
    font: 700 20px/1 var(--f-d); letter-spacing: .26em; text-transform: uppercase;
    transform: translateY(-50%) skewX(-14deg);
    box-shadow: 0 0 0 3px var(--carbon);
}

/* =========================================================================
   Gear rail (numbered category selector)
   ========================================================================= */
.rail { position: relative; display: flex; align-items: stretch; background: var(--carbon); color: var(--off); box-shadow: 0 18px 40px rgba(11, 11, 12, .18); }
.rail__gate { flex: none; display: grid; place-items: center; width: 78px; background: var(--red); color: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.rail__gate svg { width: 36px; height: 36px; }
.rail__gate circle { fill: var(--carbon); }
.rail__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(136px, 1fr); flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.rail__list::-webkit-scrollbar { display: none; }
.rail__list > li { display: flex; scroll-snap-align: start; }
.rail__gear {
    position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
    min-height: 96px; padding: 14px 16px 14px 18px; border-left: 1px solid #222226;
    color: #D4D4DA; text-decoration: none; transition: background-color .25s, color .2s;
}
.rail__gear::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.rail__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.rail__n { font: 700 40px/1 var(--f-d); color: transparent; -webkit-text-stroke: 1.3px #75757D; transform: skewX(-10deg); transform-origin: bottom left; transition: color .2s, -webkit-text-stroke-color .2s, transform .3s var(--ease); }
.rail__c { margin-top: 4px; padding: 3px 6px; font: 600 12px/1 var(--f-d); color: #A3A3AB; letter-spacing: .06em; background: #17171A; }
/* A fixed two-line label area keeps numbers and counts aligned across gears. */
.rail__name { display: flex; align-items: flex-end; min-height: 2.3em; font: 600 15px/1.15 var(--f-d); letter-spacing: .06em; text-transform: uppercase; overflow-wrap: break-word; }
.rail__gear:hover { background: #141416; color: #fff; }
.rail__gear:hover .rail__n { color: var(--off); -webkit-text-stroke-color: transparent; transform: skewX(-14deg) translateX(3px); }
.rail__gear.is-active { background: var(--graphite); color: #fff; }
.rail__gear.is-active::before { transform: scaleX(1); }
.rail__gear.is-active .rail__n { color: var(--red-hi); -webkit-text-stroke-color: transparent; }
.rail__gear.is-active .rail__c { background: var(--red); color: #fff; }
.rail__gear:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }
/* "More gears" hint: only while the rail can still scroll. */
.rail__more { display: none; position: absolute; top: 0; right: 0; bottom: 0; z-index: 2; width: 58px; padding: 0 0 0 12px; border: 0; background: var(--red); color: #fff; cursor: pointer; clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%); box-shadow: -18px 0 24px rgba(11, 11, 12, .6); }
.rail__last { font: 700 13px/1 var(--f-d); letter-spacing: .04em; white-space: nowrap; }
.rail.is-scrollable:not(.is-end) .rail__more { display: grid; place-items: center; }
.rail.is-scrollable:not(.is-end) .rail__list { padding-right: 58px; }

.sh--gear { align-items: flex-end; }
.gearsel__big { display: flex; align-items: flex-end; gap: 12px; margin: 0; }
.gearsel__big .sk { font: 700 clamp(84px, 10vw, 150px)/.8 var(--f-d); color: transparent; -webkit-text-stroke: 2px var(--off); transform-origin: bottom left; }
.gearsel__big small { max-width: 6em; margin-bottom: 6px; font: 600 13px/1.2 var(--f-d); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
/* On the dark track the rail is graphite, lit by a red edge; cards get a hairline so they separate from the ground. */
.gearsel .rail { background: var(--graphite); box-shadow: inset 0 3px 0 var(--red), 0 18px 40px rgba(0, 0, 0, .4); }
.gearsel .rail__gear { border-left-color: #2A2A2F; }
.gearsel .rail__gear:hover { background: #222226; }
.gearsel .rail__gear.is-active { background: var(--g3); }
.gearsel .rail__c { background: #0F0F11; }
.gearsel .pc { background: #19191C; box-shadow: inset 0 0 0 1px #29292E; }
.gearsel .pc:hover { background: #202024; }
.gearsel__panel { margin-top: 28px; }
.gearsel__panel.is-shift .grid > * { animation: shift .5s var(--ease) both; }
.gearsel__panel.is-shift .grid > :nth-child(2) { animation-delay: 40ms; }
.gearsel__panel.is-shift .grid > :nth-child(3) { animation-delay: 80ms; }
.gearsel__panel.is-shift .grid > :nth-child(4) { animation-delay: 120ms; }
.gearsel__panel.is-shift .grid > :nth-child(5) { animation-delay: 60ms; }
.gearsel__panel.is-shift .grid > :nth-child(6) { animation-delay: 100ms; }
.gearsel__panel.is-shift .grid > :nth-child(7) { animation-delay: 140ms; }
.gearsel__panel.is-shift .grid > :nth-child(8) { animation-delay: 180ms; }
@keyframes shift { from { opacity: 0; transform: translateX(46px) skewX(-6deg); } }
.gearsel__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; padding-top: 22px; border-top: 1px solid #2A2A2F; }
.gearsel__count { margin: 0; font: 600 15px/1.2 var(--f-d); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.gearsel__count .sk { font-size: 28px; color: var(--red-hi); margin-right: 6px; vertical-align: -4px; }

/* =========================================================================
   Grid + product card
   ========================================================================= */
.grid { display: grid; gap: clamp(12px, 1.6vw, 24px); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.pc {
    position: relative; isolation: isolate; display: flex; flex-direction: column; height: 100%;
    background: var(--graphite); color: var(--off);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
    transition: transform .35s var(--ease), background-color .3s;
}
.pc:hover { transform: translateY(-5px); background: #1F1F23; }
.pc::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 4px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); pointer-events: none; }
.pc:hover::after, .pc:focus-within::after { transform: scaleX(1); }
.pc:focus-within { box-shadow: inset 0 0 0 3px var(--amber); }
.pc__media { position: relative; aspect-ratio: 1; overflow: hidden; background: #111113; }
.pc__img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.pc:hover .pc__img { transform: scale(1.06); }
.pc .bp__v, .pc__off { transition: transform .3s var(--ease); }
.pc:hover .bp__v { transform: skewX(-16deg) translateX(3px); }
.pc:hover .pc__off { transform: skewX(-20deg) translateX(6px); }
.pc__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .22) 50%, transparent 60%) no-repeat; background-size: 250% 100%; background-position: 160% 0; transition: background-position .8s var(--ease); pointer-events: none; }
.pc:hover .pc__media::after { background-position: -60% 0; }
.pc__off { position: absolute; top: 12px; left: -6px; z-index: 2; padding: 7px 14px 7px 18px; background: var(--red); color: #fff; font: 700 18px/1 var(--f-d); letter-spacing: .02em; transform: skewX(-12deg); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.pc__body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 16px 18px 22px; }
.pc__brand { margin: 0; font: 600 12px/1 var(--f-d); letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.pc__title { margin: 0 0 10px; min-height: 4.05em; font: 600 15px/1.35 var(--f-b); letter-spacing: -.005em; overflow-wrap: break-word; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }
.pc__link { color: #EDEDF0; text-decoration: none; }
.pc__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pc__link:focus-visible { outline: none; }
.pc__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; }
.pc__price { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.pc__price del { font-size: 13px; color: #9A9AA2; text-decoration-color: rgba(255, 59, 48, .8); }
.pc__price del .amount { white-space: nowrap; }
.pc .pc__add {
    position: relative; z-index: 2; flex: none; width: 48px; min-height: 0; height: 48px; padding: 0;
    color: #fff; --btn-bg: var(--red);
}
.pc .pc__add .ic { width: 22px; height: 22px; stroke-width: 2.4; transition: transform .3s var(--ease); }
.pc .pc__add:hover .ic { transform: rotate(90deg); }
.pc .pc__add.loading .ic { animation: spin .8s linear infinite; }
.pc .pc__add.added { --btn-bg: var(--amber); --btn-bg-h: var(--amber); color: var(--carbon); }
.pc__add-t { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pc .added_to_cart { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================================
   Carousel
   ========================================================================= */
.car { position: relative; }
.car__nav { display: flex; justify-content: flex-end; gap: 12px; padding-right: max(var(--gut), calc((100vw - var(--max)) / 2)); margin: -12px 0 22px; }
.car__btn { position: relative; isolation: isolate; display: grid; place-items: center; width: 60px; height: 50px; padding: 0; background: none; border: 0; color: #fff; cursor: pointer; }
.car__btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--carbon); transform: skewX(-12deg); transition: background-color .2s, transform .25s var(--ease); }
.sec--dark .car__btn::before { background: var(--g3); }
.car__btn:hover::before { background: var(--red); transform: skewX(-18deg); }
.car__btn .ic { width: 22px; height: 22px; }
.car__btn:disabled { opacity: .35; cursor: default; }
.car__btn:disabled::before { background: var(--carbon); transform: skewX(-12deg); }
.car.is-static .car__nav, .car.is-static .car__bar, .car__nav.is-static { visibility: hidden; }
/* Pit-stop head: title, note and arrows on one line, like a pit board. */
.sh--pit { align-items: flex-end; }
.sh--pit .sh__text { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: clamp(20px, 3vw, 44px); }
.sh--pit .eyebrow { grid-column: 1 / -1; }
.sh--pit .sh__title { font-size: clamp(42px, 5.4vw, 84px); }
.sh--pit .sh__sub { margin: 0 0 6px; max-width: 34ch; padding-left: 18px; border-left: 3px solid var(--red); font-size: 15px; }
.sh__extra .car__nav { margin: 0; padding: 0; }
.car__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 21.5vw, 300px); gap: clamp(14px, 1.6vw, 22px);
    list-style: none; margin: 0; padding: 8px max(var(--gut), calc((100vw - var(--max)) / 2)) 26px 0;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    cursor: grab;
}
.car__track::-webkit-scrollbar { display: none; }
.car__track:focus-visible { outline-offset: -3px; }
.car__track.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.car__track.is-drag a { pointer-events: none; }
.car__item { display: flex; scroll-snap-align: start; }
.car__item > .pc { width: 100%; }
.car__bar { position: relative; height: 3px; margin-right: max(var(--gut), calc((100vw - var(--max)) / 2)); background: rgba(128, 128, 136, .28); overflow: hidden; }
.car__bar span { display: block; width: 20%; height: 100%; background: var(--red); transition: transform .12s linear; }

/* =========================================================================
   Starting grid (featured)
   ========================================================================= */
.sgrid { background: var(--carbon-weave); background-color: var(--carbon); background-size: 20px 20px; padding-top: calc(var(--pad) + 36px); }
/* Two columns, the right one staggered back by half a box — an F1 starting grid.
   The head takes the pole slot (P1 is the hero product above). */
.sgrid__grid {
    --stag: clamp(70px, 10vw, 150px);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(36px, 6vw, 96px); row-gap: clamp(44px, 4.6vw, 70px);
    padding-bottom: var(--stag);
}
.sgrid__list { display: contents; }
.sgrid__head { position: relative; grid-column: 1; grid-row: 1; align-self: start; padding: 64px 16px 0; }
.sgrid__head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; border: 3px dashed rgba(245, 245, 245, .28); border-bottom: 0; pointer-events: none; }
.sgrid__title { margin: 0 0 18px; font: 700 clamp(48px, 6.4vw, 96px)/.88 var(--f-d); text-transform: uppercase; }
.sgrid__title .sk { transform: skewX(-9deg); transform-origin: bottom left; }
.sgrid__title em { font-style: normal; color: var(--red-hi); }
.sgrid__head .sh__sub { margin: 0 0 22px; }
.sgrid__pole { display: inline-grid; gap: 6px; max-width: 100%; padding: 12px 18px 12px 16px; background: rgba(26, 26, 29, .9); border-left: 4px solid var(--red); color: var(--off); text-decoration: none; transition: background-color .25s, transform .3s var(--ease); }
.sgrid__pole:hover { background: var(--red); transform: translateX(6px); }
.sgrid__pole-l { font: 600 12px/1 var(--f-d); letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.sgrid__pole:hover .sgrid__pole-l { color: #fff; }
.sgrid__pole-n { font-weight: 600; font-size: 15px; line-height: 1.35; }

.sgrid__slot { position: relative; padding: 16px 16px 0; list-style: none; }
.sgrid__slot:nth-child(odd) { translate: 0 var(--stag); }
/* The painted grid box: off-white lines hugging the tile, open at the back. */
.sgrid__slot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 74%; border: 3px solid rgba(245, 245, 245, .82); border-bottom: 0; pointer-events: none; }
.sgrid__pos {
    position: absolute; left: 22px; top: 0; z-index: 3; transform: translateY(-58%) skewX(-10deg);
    padding: 0 12px; background: var(--carbon);
    font: 700 clamp(46px, 4.6vw, 70px)/1 var(--f-d); color: var(--off); letter-spacing: -.01em;
}
.sgrid__pos--pole { left: 22px; color: var(--red-hi); }
.slot {
    position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch;
    background: var(--graphite);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
    transition: transform .35s var(--ease), background-color .3s;
}
.slot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); z-index: 2; }
.slot:hover { transform: translateY(-6px); background: #202024; }
.slot:hover::after, .slot:focus-within::after { transform: scaleX(1); }
.slot:focus-within { box-shadow: inset 0 0 0 3px var(--amber); }
.slot__img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #111; }
.slot__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.slot:hover .slot__img img { transform: scale(1.06); }
.slot__img .pc__off { top: 16px; }
.slot:hover .pc__off { transform: skewX(-20deg) translateX(6px); }
.slot__body { display: flex; flex-direction: column; min-width: 0; padding: 22px 22px 24px; }
.slot__meta { margin: 0 0 10px; font: 600 12px/1 var(--f-d); letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.slot__title { margin: 0 0 16px; font: 600 17px/1.35 var(--f-b); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }
.slot__title a { color: #EDEDF0; text-decoration: none; }
.slot__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.slot__title a:focus-visible { outline: none; }
.slot__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; }
.slot__price { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.slot__price del { font-size: 13px; color: #9A9AA2; text-decoration-color: rgba(255, 59, 48, .8); }
.slot__go { position: relative; flex: none; display: grid; place-items: center; width: 50px; height: 44px; color: #fff; }
.slot__go::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--g3); transform: skewX(-12deg); transition: background-color .2s, transform .25s var(--ease); }
.slot:hover .slot__go::before { background: var(--red); transform: skewX(-18deg); }
.slot__go .ic { width: 22px; height: 22px; transition: transform .25s var(--ease); }
.slot:hover .slot__go .ic { transform: translateX(4px); }

/* =========================================================================
   Teams — brands as a leaning timing tower (leaderboard)
   ========================================================================= */
.teams__grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.5fr); align-items: center; gap: 36px clamp(32px, 5vw, 84px); }
.sh--teams { flex-direction: column; align-items: flex-start; margin: 0; }
.sh--teams .sh__title { font-size: clamp(44px, 5.4vw, 84px); }

.lb { --lean: 17px; --cols: 50px 8px minmax(0, 1fr) 128px 132px 40px; }
.lb__head {
    display: grid; grid-template-columns: var(--cols); column-gap: 16px; margin: 0 0 10px;
    padding: 0 16px 0 calc(18px + (var(--n) - 1) * var(--lean));
    font: 600 11px/1 var(--f-d); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2);
}
.lb__head span:nth-child(2) { grid-column: 3; }
.lb__head span:nth-child(4) { text-align: right; }
.lb__list { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
/* Each row sits one lean-step to the left of the one above: the tower reads as one slanted slab. */
.lb__li { margin-left: calc((var(--n) - 1 - var(--i)) * var(--lean)); margin-right: calc(var(--i) * var(--lean)); }
.lb__row {
    position: relative; isolation: isolate;
    display: grid; grid-template-columns: var(--cols); align-items: center; column-gap: 16px;
    min-height: 66px; padding: 0 16px 0 18px;
    color: #fff; text-decoration: none;
    transition: transform .2s var(--ease);
}
.lb__row::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--carbon); transform: skewX(-14deg); transition: transform .2s var(--ease); }
.lb__row::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--red); transform: skewX(-14deg) scaleX(0); transform-origin: left; transition: transform .28s var(--ease); }
.lb__row:hover, .lb__row:focus-visible { transform: translateX(12px); }
.lb__row:hover::before, .lb__row:focus-visible::before { transform: skewX(-20deg); }
.lb__row:hover::after, .lb__row:focus-visible::after { transform: skewX(-20deg) scaleX(1); }
.lb__row:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.lb__pos { display: grid; place-items: center; height: 40px; background: var(--off); color: var(--carbon); font: 700 24px/1 var(--f-d); transform: skewX(-14deg); }
.lb__li:first-child .lb__pos { background: var(--amber); }
.lb__bar { width: 8px; height: 42px; background: var(--team); transform: skewX(-14deg); }
.lb__name { min-width: 0; font: 700 clamp(26px, 2.5vw, 38px)/1 var(--f-d); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: .1em; transform: skewX(-9deg); transform-origin: left; }
.lb__gap { font: 500 13px/1 var(--f-d); letter-spacing: .08em; text-transform: uppercase; color: #BDBDC4; white-space: nowrap; }
.lb__gap b { font: 700 26px/1 var(--f-d); color: #fff; margin-right: 3px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.lb__from { font: 600 19px/1 var(--f-d); color: #fff; text-align: right; white-space: nowrap; }
.lb__from-l { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #BDBDC4; }
.lb__go { display: grid; place-items: center; justify-self: end; width: 36px; height: 36px; color: var(--red-hi); }
.lb__go .ic { width: 22px; height: 22px; transition: transform .2s var(--ease); }
.lb__row:hover .lb__go, .lb__row:focus-visible .lb__go { color: #fff; }
.lb__row:hover .lb__go .ic { transform: translateX(4px); }
.lb__row:hover .lb__gap, .lb__row:hover .lb__from-l, .lb__row:focus-visible .lb__gap, .lb__row:focus-visible .lb__from-l { color: #fff; }
.lb__row:hover .lb__pos { background: #fff; }

/* =========================================================================
   Lap strip (how ordering works) — folded into the footer
   ========================================================================= */
.laps { position: relative; background: var(--graphite); border-bottom: 1px solid #26262B; }
.laps__in { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px clamp(28px, 4vw, 60px); padding-block: 26px; }
.laps__title { margin: 0; font: 700 clamp(26px, 2.4vw, 36px)/.95 var(--f-d); text-transform: uppercase; color: #fff; max-width: 6.2em; }
.laps__title .sk { transform-origin: bottom left; }
.laps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.lap { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 16px; padding: 4px clamp(16px, 2vw, 28px); }
.lap::before { content: ""; position: absolute; left: 0; top: -4px; bottom: -4px; width: 2px; background: #3A3A40; transform: skewX(-16deg); }
.lap__n { display: grid; margin: 0; }
.lap__l { font: 600 10.5px/1 var(--f-d); letter-spacing: .2em; text-transform: uppercase; color: #A3A3AB; }
.lap__d { display: flex; align-items: baseline; margin-top: 4px; font: 700 42px/.9 var(--f-d); color: var(--red-hi); }
.lap__d small { margin-left: 2px; font-size: 16px; color: #8E8E96; }
.lap__body { min-width: 0; }
.lap__t { display: flex; align-items: center; gap: 8px; margin: 0 0 5px; font: 600 16px/1.2 var(--f-d); letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.lap__ic { flex: none; width: 18px; height: 18px; color: var(--red-hi); }
.lap__x { margin: 0; font-size: 13.5px; line-height: 1.5; color: #BDBDC4; }

/* =========================================================================
   Page band (dark page header)
   ========================================================================= */
.band {
    position: relative; overflow: clip; z-index: 1;
    padding: clamp(26px, 3.4vw, 44px) 0 calc(var(--cut) + clamp(44px, 5vw, 72px));
    background: var(--carbon-weave); background-color: var(--carbon); background-size: 20px 20px; color: var(--off);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}
.band__bg { position: absolute; inset: 0; pointer-events: none; }
.band__bg::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 34%; background: linear-gradient(160deg, #F20700, var(--red) 45%, #A00400); clip-path: polygon(46% 0, 100% 0, 100% 100%, 0 100%); opacity: .95; }
/* Lines only over the red slab on the right, never through the title. */
.speed--band { opacity: .5; -webkit-mask-image: linear-gradient(90deg, transparent 0 58%, #000 76%); mask-image: linear-gradient(90deg, transparent 0 58%, #000 76%); }
.band__ghost { position: absolute; right: 2%; bottom: -6%; z-index: 1; font: 700 clamp(180px, 30vw, 460px)/.8 var(--f-d); text-transform: uppercase; color: transparent; -webkit-text-stroke: 2px rgba(245, 245, 245, .14); transform: skewX(-10deg); white-space: nowrap; }
.band--brand .band__ghost { font-size: clamp(110px, 17vw, 280px); }
.band__in { position: relative; z-index: 2; }
.band__text { min-width: 0; }
.band__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 26px; }
.band__title { margin: 6px 0 14px; font: 700 clamp(44px, 7.4vw, 118px)/.9 var(--f-d); text-transform: uppercase; letter-spacing: -.005em; overflow-wrap: anywhere; }
.band__title .sk { transform: skewX(-9deg); transform-origin: bottom left; }
.band__meta { font: 500 15px/1.4 var(--f-d); letter-spacing: .12em; text-transform: uppercase; color: #B8B8BF; }
.band__meta p { margin: 0; display: flex; align-items: baseline; gap: 10px; }
/* Model count as a lap counter next to the title. */
.band__count { display: flex; align-items: baseline; gap: 10px; margin: 0 0 18px; }
.band__count-n { font: 700 clamp(34px, 3.4vw, 52px)/.9 var(--f-d); color: var(--amber); }
.band__count-l { font: 500 14px/1.2 var(--f-d); letter-spacing: .16em; text-transform: uppercase; color: #fff; }
/* Category/brand photo: a skewed plate inside the red slab, cut by the band's diagonal. */
.band__img { position: absolute; z-index: 1; top: 20px; bottom: 0; right: max(var(--gut), calc((100% - var(--max)) / 2)); width: clamp(220px, 24vw, 340px); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }
.band__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 68%; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); transform: scale(1.06); transform-origin: 50% 70%; }
.band--img .band__ghost { right: calc(max(var(--gut), calc((100% - var(--max)) / 2)) + clamp(220px, 24vw, 340px)); }
.band--info .band__bg::after, .band--flow .band__bg::after { width: 22%; }

/* Archives: compact band so products start in the first viewport. */
.band--shop { padding: 22px 0 calc(var(--cut) + 50px); }
.band--shop .crumbs ol { margin-bottom: 10px; }
.band--shop .eyebrow { margin-bottom: 4px; }
.band--shop .band__title { margin: 4px 0 10px; font-size: clamp(40px, 6vw, 88px); }
.band--shop .band__count { margin-bottom: 14px; }
.band--shop .band__ghost { font-size: clamp(150px, 20vw, 300px); bottom: -10%; }
.band--shop.band--brand .band__ghost { font-size: clamp(100px, 13vw, 210px); }

.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; list-style: none; margin: 0 0 18px; padding: 0; font-size: 13px; color: #A3A3AB; }
.crumbs li { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.crumbs li + li::before { content: ""; width: 7px; height: 11px; background: var(--red-hi); clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%); }
.crumbs a { color: #D2D2D8; text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs li:last-child { color: #A3A3AB; max-width: 48ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
.crumbs li:last-child::before { display: inline-block; margin-right: 10px; vertical-align: 0; }

/* =========================================================================
   Shop archive
   ========================================================================= */
.shop { position: relative; z-index: 2; padding: 0 0 clamp(72px, 9vw, 130px); }
.shop .rail { margin-top: -48px; }
.shop__notices:not(:empty) { padding-top: 24px; }
/* One row: brand chips left, count + sort right. */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; padding: 14px 0; margin-bottom: 22px; border-bottom: 1px solid var(--line-l); }
.chips { display: flex; align-items: center; gap: 14px; min-width: 0; }
.chips__l { flex: none; font: 600 12px/1 var(--f-d); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.chips ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 4px 6px; overflow-x: auto; scrollbar-width: none; }
.chips ul::-webkit-scrollbar { display: none; }
.chips li { flex: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--paper); border: 1px solid #CFCFD5; color: var(--ink); text-decoration: none; font: 600 14px/1 var(--f-d); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transform: skewX(-10deg); transition: background-color .2s, color .2s, border-color .2s; }
.chip span { font-size: 12px; color: #5E5E66; }
.chip:hover { background: var(--carbon); border-color: var(--carbon); color: #fff; }
.chip:hover span { color: #C4C4CA; }
.chip.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.chip.is-active span { color: #fff; }
.chip:focus-visible { outline-offset: 2px; }
.toolbar__sort { flex: none; display: flex; align-items: center; gap: 18px; margin-left: auto; }
.toolbar--nochips .toolbar__sort { margin-left: auto; }
.woocommerce-result-count { margin: 0; font-size: 14px; color: var(--ink-2); }
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select, .pw-select {
    height: 46px; padding: 0 44px 0 16px; min-width: 230px;
    background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23E10600' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat right 16px center;
    border: 2px solid var(--carbon); border-radius: 0; color: var(--ink);
    font: 600 14px/1 var(--f-b); cursor: pointer; -webkit-appearance: none; appearance: none;
}
.woocommerce-ordering select:hover { border-color: var(--red); }
.shop__sub { margin: 56px 0 20px; font: 700 40px/1 var(--f-d); text-transform: uppercase; }

.woocommerce-pagination { margin-top: 48px; }
.woocommerce-pagination ul, .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.woocommerce-pagination .page-numbers li { display: flex; }
.woocommerce-pagination a.page-numbers, .woocommerce-pagination span.page-numbers, .nav-links .page-numbers {
    display: grid; place-items: center; min-width: 50px; height: 50px; padding: 0 14px;
    background: var(--paper); border: 1px solid #CFCFD5; color: var(--ink); text-decoration: none;
    font: 700 18px/1 var(--f-d); transform: skewX(-10deg); transition: background-color .2s, color .2s;
}
.woocommerce-pagination a.page-numbers:hover, .nav-links a.page-numbers:hover { background: var(--carbon); color: #fff; }
.woocommerce-pagination span.current, .nav-links .current { background: var(--red); border-color: var(--red); color: #fff; }

.noresults { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 60px); padding: 40px 0; }
.noresults__n { margin: 0; font: 700 clamp(140px, 18vw, 260px)/.8 var(--f-d); color: transparent; -webkit-text-stroke: 2px var(--carbon); }
.noresults__t { margin: 0 0 12px; font: 700 clamp(32px, 4vw, 52px)/1 var(--f-d); text-transform: uppercase; }
.noresults > div > p { color: var(--ink-2); max-width: 52ch; }
.sf--block { max-width: 560px; margin-top: 18px; }
.sec--light .sf--block input[type="search"], .shop .sf--block input[type="search"], .noresults .sf input[type="search"], .toolbar--search .sf input[type="search"] { background: var(--paper); border: 2px solid var(--carbon); color: var(--ink); height: 54px; }
.shop .sf--block input[type="search"]::placeholder { color: #6E6E76; }
.shop .sf--block input[type="search"]:focus { box-shadow: inset 0 -3px 0 var(--red); border-color: var(--carbon); }
.toolbar--search { justify-content: flex-start; }
.toolbar--search .sf--block { margin: 0; }

.plist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-l); }
.plist__i { padding: 22px 0; border-bottom: 1px solid var(--line-l); }
.plist__t { margin: 0 0 6px; font: 600 26px/1.1 var(--f-d); text-transform: uppercase; }
.plist__t a { color: var(--ink); text-decoration: none; }
.plist__t a:hover { color: var(--red); }
.plist__x p { margin: 0; color: var(--ink-2); }

/* =========================================================================
   Single product
   ========================================================================= */
.pdp-notices .woocommerce-notices-wrapper:not(:empty) { padding: 18px 0 2px; }
.pdp__top {
    position: relative; overflow: clip; color: var(--off);
    background: var(--carbon-weave); background-color: var(--carbon); background-size: 20px 20px;
    padding: 26px 0 calc(var(--cut) + clamp(56px, 7vw, 96px));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}
.pdp__bg { position: absolute; inset: 0; pointer-events: none; }
.pdp__slab { position: absolute; top: 0; bottom: 0; left: 0; width: 44%; background: linear-gradient(170deg, #F20700, var(--red) 40%, #950400); clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%); }
/* Lines stay over the red slab / gallery column, never across the summary. */
.speed--pdp { opacity: .4; -webkit-mask-image: linear-gradient(90deg, #000 0 34%, transparent 46%); mask-image: linear-gradient(90deg, #000 0 34%, transparent 46%); }
.pdp__summary { position: relative; z-index: 2; }
.pdp__top .wrap { position: relative; }
.pdp__top .crumbs ol { display: inline-flex; max-width: 100%; padding: 8px 14px; background: rgba(11, 11, 12, .9); }
.pdp__top .crumbs li:last-child { max-width: 42ch; }
.pdp__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 84px); align-items: start; margin-top: 8px; }
.pdp__media { position: sticky; top: calc(var(--hd) + 20px); }

.gal { filter: drop-shadow(0 36px 50px rgba(0, 0, 0, .5)); }
/* A clean carbon panel behind the photo (portrait shots get crisp dark side panels, never a blurred copy). */
.gal__main {
    position: relative; aspect-ratio: 1; overflow: hidden;
    background: radial-gradient(80% 64% at 50% 42%, #24242A 0%, #151518 62%, #0E0E10 100%);
    clip-path: polygon(0 0, calc(100% - 54px) 0, 100% 54px, 100% 100%, 54px 100%, 0 calc(100% - 54px));
}
.gal__main::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--red); z-index: 1; }
.gal__zoom { position: relative; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.gal__img { position: relative; width: 100%; height: 100%; object-fit: contain; }
.gal__off { position: absolute; top: 24px; left: 0; z-index: 2; padding: 8px 18px 8px 22px; background: var(--red); color: #fff; font: 700 clamp(26px, 2.6vw, 38px)/1 var(--f-d); transform: skewX(-12deg); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.gal__thumbs { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 14px 0 0; padding: 0; }
.gal__thumb { display: block; width: 82px; height: 82px; padding: 0; background: #111; border: 2px solid #34343A; cursor: pointer; transition: border-color .2s; }
.gal__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gal__thumb.is-active, .gal__thumb:hover { border-color: var(--red-hi); }

.pdp__summary { padding-top: 6px; }
.pdp__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border: 1px solid #3A3A40; color: #DADADF; text-decoration: none; font: 600 13px/1 var(--f-d); letter-spacing: .12em; text-transform: uppercase; transform: skewX(-10deg); transition: background-color .2s, border-color .2s; }
.tag:hover { border-color: #fff; color: #fff; }
.tag--brand { background: var(--red); border-color: var(--red); color: #fff; }
.tag--brand:hover { background: #FF1A0E; border-color: #FF1A0E; }
.tag__n { color: var(--red-hi); }
/* The title leads: set large, the price numerals follow a step below it. */
.pdp__title { margin: 18px 0 24px; font: 700 clamp(34px, 3.5vw, 58px)/.96 var(--f-d); text-transform: uppercase; letter-spacing: 0; overflow-wrap: break-word; text-wrap: balance; }
.pdp__title--long { font-size: clamp(30px, 2.9vw, 46px); line-height: 1; }
.pdp__price { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 22px; padding: 18px 0 20px; margin-bottom: 22px; border-top: 1px solid #2C2C31; border-bottom: 1px solid #2C2C31; }
.pdp__now { margin: 0; }
.pdp__was { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-bottom: 6px; }
.pdp__was del { font-size: 17px; color: #A3A3AB; text-decoration-color: var(--red-hi); }
.woocommerce-product-details__short-description { color: #C9C9CF; margin-bottom: 20px; }

.pdp__summary form.cart { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 22px; }
.pdp__summary .single_add_to_cart_button { flex: 1 1 150px; min-height: 58px; font-size: 16px; }
/* "Купи сега" is the one filled CTA; "Добави в количката" is the outline one. */
.pdp__buynow { flex: 1 1 100%; min-height: 62px; font-size: 18px; }
.stock { margin: 0 0 12px; font-size: 14px; color: #BDBDC4; }

.quantity { display: inline-flex; }
.quantity.is-stepper { align-items: stretch; height: 58px; border: 2px solid #3A3A40; background: #121214; }
.qty-btn { display: grid; place-items: center; width: 44px; padding: 0; background: none; border: 0; color: var(--off); cursor: pointer; transition: color .2s, background-color .2s; }
.qty-btn:hover { background: var(--red); color: #fff; }
.qty-btn:focus-visible { outline-offset: -3px; }
input.qty { width: 54px; min-height: 100%; padding: 0; text-align: center; background: transparent; border: 0; color: var(--off); font: 600 20px/1 var(--f-d); -moz-appearance: textfield; appearance: textfield; }
input.qty::-webkit-outer-spin-button, input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.qty:focus { outline: none; box-shadow: inset 0 -3px 0 var(--red); }
.quantity:not(.is-stepper) input.qty { height: 52px; border: 2px solid #3A3A40; }

/* Delivery / payment / returns box */
.trust { position: relative; padding: 18px 22px 16px; background: rgba(24, 24, 27, .92); border: 1px solid #2C2C31; }
.trust::before { content: ""; position: absolute; left: -1px; top: -1px; width: 80px; height: 3px; background: var(--red); }
.trust__h { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 600 13px/1 var(--f-d); letter-spacing: .16em; text-transform: uppercase; color: #BDBDC4; }
.trust__led { width: 8px; height: 8px; background: var(--amber); box-shadow: 0 0 10px var(--amber); transform: skewX(-12deg); }
.trust__list { list-style: none; margin: 0; padding: 0; }
.trust__list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 0; border-bottom: 1px dashed #2E2E34; font-size: 14px; line-height: 1.45; color: #B8B8BF; }
.trust__list .ic { width: 24px; height: 24px; color: var(--red-hi); }
.trust__list strong { color: #fff; font-weight: 600; }
.trust__note { margin: 12px 0 0; font-size: 13px; color: #A3A3AB; }
.trust__note a { color: var(--amber); }

/* Telemetry strip: full-width big readouts riding over the diagonal cut, then one reading column. */
.pdp__desc { padding-top: 0; }
.pdp__tele { position: relative; z-index: 3; margin-top: calc(-1 * (var(--cut) + clamp(44px, 5vw, 70px))); }
.tele {
    position: relative; background: var(--carbon); color: #fff;
    clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px));
}
.tele::before { content: ""; position: absolute; left: 0; top: 0; width: 38%; height: 4px; background: var(--red); }
.tele__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.tele__i { position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 12px; min-width: 0; padding: clamp(22px, 2.4vw, 32px) clamp(18px, 2.4vw, 34px); }
.tele__i + .tele__i::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px; background: #2C2C31; transform: skewX(-14deg); }
.tele__v { margin: 0; font: 700 clamp(46px, 5vw, 80px)/.86 var(--f-d); letter-spacing: -.01em; white-space: nowrap; }
.tele__v .sk { transform-origin: bottom left; }
.tele__v small { margin-left: .1em; font-size: .36em; font-weight: 600; letter-spacing: .04em; color: #BDBDC4; }
.tele__i.is-red .tele__v { color: var(--red-hi); }
.tele__i.is-amber .tele__v { color: var(--amber); }
.tele__l { font: 600 12px/1.3 var(--f-d); letter-spacing: .16em; text-transform: uppercase; color: #A9A9B1; }
.pdp__meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 16px 0 0; font-size: 14px; color: var(--ink-2); }
.pdp__meta b { margin-right: 6px; font: 600 12px/1 var(--f-d); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.pdp__meta a { color: var(--ink); font-weight: 600; }
.pdp__meta a:hover { color: var(--red); }

.pdp__desc-col { max-width: calc(800px + 2 * var(--gut)); padding-top: clamp(48px, 6vw, 84px); }
.pdp__desc-title { margin: 0 0 30px; font: 700 clamp(46px, 5vw, 76px)/.9 var(--f-d); text-transform: uppercase; }
.pdp__desc-title .sk { transform: skewX(-9deg); transform-origin: bottom left; }
.pdp__prose { max-width: none; }
.pdp__finish {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
    margin-top: clamp(36px, 4vw, 56px); padding: 22px 28px; background: var(--carbon); color: #fff;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
.pdp__finish-p { display: flex; align-items: baseline; gap: 16px; margin: 0; }
.pdp__finish-l { font: 600 12px/1 var(--f-d); letter-spacing: .18em; text-transform: uppercase; color: #A9A9B1; }
.bp--finish { font-size: clamp(40px, 3.6vw, 54px); color: #fff; }

/* Sticky mobile add-to-cart */
.stick { display: none; }

/* =========================================================================
   Prose (descriptions, info pages)
   ========================================================================= */
.prose { max-width: 74ch; font-size: 17px; line-height: 1.72; color: #1E1E22; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.05em; }
.prose h2 { margin: 1.8em 0 .6em; font: 700 clamp(28px, 3vw, 40px)/1.05 var(--f-d); text-transform: uppercase; letter-spacing: .005em; }
.prose h3, .prose .pw-dh { position: relative; margin: 2em 0 .8em; padding-left: 18px; font: 600 clamp(21px, 2vw, 26px)/1.15 var(--f-d); text-transform: uppercase; letter-spacing: .02em; }
.prose h3::before, .prose .pw-dh::before { content: ""; position: absolute; left: 0; top: .12em; bottom: .12em; width: 6px; background: var(--red); transform: skewX(-12deg); }
.prose h2 strong, .prose h3 strong { font-weight: inherit; }
.prose .pw-lead { font-size: 1.16em; font-weight: 600; line-height: 1.5; color: var(--ink); }
.prose a { color: var(--red); font-weight: 600; }
.prose a:hover { color: var(--ink); }
.prose strong { font-weight: 650; color: var(--ink); }
.prose ul, .prose ol { margin: 0 0 1.3em; padding: 0; list-style: none; }
.prose li { position: relative; margin: 0 0 .55em; padding-left: 28px; }
.prose ul > li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 12px; height: 7px; background: var(--red); transform: skewX(-24deg); }
.prose ol { counter-reset: pw; }
.prose ol > li { counter-increment: pw; padding-left: 40px; }
.prose ol > li::before { content: counter(pw, decimal-leading-zero); position: absolute; left: 0; top: .05em; font: 700 15px/1.6 var(--f-d); color: var(--red); letter-spacing: .04em; }
/* Structured description blocks (see inc/typeset.php). */
.prose .pw-dh--sub { margin-top: .6em; padding-left: 0; font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); }
.prose .pw-dh--sub::before { display: none; }
.prose .pw-dh + .pw-dh--sub { margin-top: -.2em; }

/* Check list: red check tiles, one row per line. */
.prose .pw-checks { display: grid; gap: 0; margin: 0 0 1.6em; border-top: 1px solid var(--line-l); }
.prose .pw-checks > li { margin: 0; padding: 12px 6px 12px 44px; border-bottom: 1px solid var(--line-l); line-height: 1.55; }
.prose .pw-checks > li::before { content: ""; position: absolute; left: 4px; top: 14px; width: 24px; height: 24px; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E") center / 16px no-repeat; transform: skewX(-10deg); }
.prose .pw-checks > li:hover { background: var(--paper); }

/* Bullet list: red speed chevrons. */
.prose .pw-ul { margin: 0 0 1.6em; }
.prose .pw-ul > li { margin: 0 0 .7em; padding-left: 30px; }
.prose .pw-ul > li::before { content: ""; left: 2px; top: .52em; width: 16px; height: 11px; background: var(--red); clip-path: polygon(0 0, 40% 0, 100% 50%, 40% 100%, 0 100%, 60% 50%); transform: none; }
.prose .pw-ul .pw-ul { margin: .7em 0 .2em; }
.prose .pw-ul .pw-ul > li::before { background: var(--ink-2); }
.prose .pw-checks .pw-ul { margin: .6em 0 0; }
.prose li strong:first-child { color: var(--ink); }

/* Spec table: "Label: value" lines become a telemetry sheet. */
.prose .pw-specs { margin: 0 0 1.8em; border-top: 3px solid var(--carbon); font-size: 15.5px; }
.prose .pw-specs > div { display: grid; grid-template-columns: minmax(120px, 40%) minmax(0, 1fr); gap: 4px 24px; padding: 11px 12px; border-bottom: 1px solid var(--line-l); }
.prose .pw-specs > div:nth-child(odd) { background: var(--paper); }
.prose .pw-specs dt { font: 600 13px/1.5 var(--f-d); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.prose .pw-specs dd { margin: 0; font-weight: 600; color: var(--ink); line-height: 1.5; }

.prose .pw-note { position: relative; margin: 1.6em 0; padding: 14px 18px 14px 56px; background: #FFF8E6; border-left: 5px solid var(--amber); font-size: 16px; line-height: 1.55; }
.prose .pw-note::before { content: "!"; position: absolute; left: 16px; top: 14px; width: 26px; height: 26px; display: grid; place-items: center; background: var(--amber); color: var(--carbon); font: 700 16px/1 var(--f-d); transform: skewX(-10deg); }
.prose .pw-meta { margin: 1.6em 0 0; padding-top: 14px; border-top: 1px solid var(--line-l); font: 500 14px/1.5 var(--f-d); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.prose hr { height: 8px; margin: 2.2em 0; border: 0; background: repeating-linear-gradient(90deg, var(--red) 0 22px, var(--off) 22px 44px); max-width: 220px; transform: skewX(-20deg); }
.prose blockquote { margin: 1.6em 0; padding: 18px 24px; background: var(--carbon); color: var(--off); border-left: 6px solid var(--red); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 15px; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--line-l); text-align: left; }
.prose img { height: auto; margin: 1.4em 0; }
.prose .about-page, .prose .page-content, .prose .about-section, .prose .about-hero { display: contents; }

/* =========================================================================
   Info pages
   ========================================================================= */
.info { padding: 6px 0 clamp(72px, 9vw, 130px); }
.info__grid { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.info__aside { position: sticky; top: calc(var(--hd) + 24px); }
.info__nav { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--carbon); }
.info__nav a { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line-l); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; transition: color .2s, padding-left .25s var(--ease); }
.info__nav a::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: var(--red); transform: scale(0) skewX(-14deg); transition: transform .25s var(--ease); }
.info__nav a:hover, .info__nav a.is-active { color: var(--red); padding-left: 20px; }
.info__nav a:hover::before, .info__nav a.is-active::before { transform: scale(1) skewX(-14deg); }
.info__n { font: 600 13px/1 var(--f-d); color: #62626A; letter-spacing: .06em; }
.info__card { margin-top: 28px; padding: 22px 22px 18px; background: var(--carbon); color: #C9C9CF; font-size: 14px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
.info__card p { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.info__card p > span { min-width: 0; }
.info__card .ic { width: 18px; height: 18px; color: var(--red-hi); flex: none; }
.info__card a { color: var(--amber); display: inline-flex; align-items: center; gap: 10px; }
.info__card-h { font: 600 18px/1 var(--f-d) !important; letter-spacing: .06em; text-transform: uppercase; color: #fff; margin-bottom: 14px !important; }
.info__prose { padding-top: 0; }
.info__prose > :first-child, .info__prose > .about-page > :first-child, .info__prose > .page-content > :first-child { margin-top: 0; }
.info__nav { margin-top: 0; }

/* =========================================================================
   Cart / checkout flow
   ========================================================================= */
.band--flow { padding-bottom: calc(var(--cut) + clamp(36px, 4vw, 56px)); }
.band--flow .band__title { font-size: clamp(44px, 6vw, 96px); }
.steps { display: flex; flex-wrap: wrap; list-style: none; margin: 22px 0 0; padding: 0; }
.steps__i { display: flex; align-items: center; gap: 10px; margin-right: -4px; padding: 11px 30px 11px 26px; background: #1E1E21; color: #9C9CA4; font: 600 14px/1 var(--f-d); letter-spacing: .1em; text-transform: uppercase; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); }
.steps__i:first-child { padding-left: 18px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
.steps__n { font-size: 18px; font-weight: 700; }
.steps__ls { display: none; }
.steps__i.is-done { background: #2C2C31; color: #E4E4E8; }
.steps__i.is-current { background: var(--red); color: #fff; }
/* Checkout: compact band, title and steps on one line. */
.band--compact { padding: 18px 0 calc(var(--cut) + 18px); }
.band--compact .band__text { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: end; column-gap: 40px; }
.band--compact .eyebrow { grid-column: 1 / -1; margin-bottom: 4px; }
.band--compact .band__title { margin: 0; font-size: clamp(38px, 4.4vw, 64px); }
.band--compact .steps { justify-self: end; margin: 0 0 4px; }
.band--compact .band__ghost { display: none; }
.pw-slim .flow--checkout { padding-top: 0; }

.band--finish .band__bg::after { background: repeating-conic-gradient(var(--off) 0 25%, var(--carbon) 0 50%) 0 0 / 44px 44px; opacity: .9; }

.flow { position: relative; z-index: 2; padding: 10px 0 clamp(72px, 9vw, 130px); }
.flow .woocommerce { position: relative; }
.flow--cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 410px); gap: 24px clamp(28px, 4vw, 56px); align-items: start; }
.flow--cart .woocommerce > .woocommerce-notices-wrapper, .flow--cart .woocommerce > .woocommerce-message, .flow--cart .woocommerce > .woocommerce-info, .flow--cart .woocommerce > .woocommerce-error { grid-column: 1 / -1; }
.flow--cart .woocommerce-notices-wrapper:empty { display: none; }
.flow--cart .woocommerce-cart-form { grid-column: 1; min-width: 0; }
.flow--cart .cart-collaterals { grid-column: 2; position: sticky; top: calc(var(--hd) + 24px); }
.flow--empty .woocommerce { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(20px, 5vw, 70px); align-items: center; }
.flow--empty .woocommerce > .woocommerce-notices-wrapper, .flow--empty .woocommerce > .woocommerce-message, .flow--empty .woocommerce > .woocommerce-info { grid-column: 1 / -1; }
.flow--empty .wc-empty-cart-message, .flow--empty .empty { display: contents; }
.flow--empty .empty__n { grid-row: span 2; }
.flow--empty .return-to-shop { grid-column: 2; align-self: start; margin-top: 8px; }

table.shop_table { width: 100%; border-collapse: collapse; border-spacing: 0; }
.woocommerce-cart-form .shop_table thead th { padding: 0 12px 14px; border-bottom: 3px solid var(--carbon); text-align: left; font: 600 12px/1 var(--f-d); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.woocommerce-cart-form .shop_table td { padding: 18px 12px; border-bottom: 1px solid var(--line-l); vertical-align: middle; }
.woocommerce-cart-form .product-remove { width: 48px; }
.woocommerce-cart-form .product-thumbnail { width: 118px; }
.woocommerce-cart-form .product-thumbnail img { width: 96px; height: 96px; object-fit: cover; background: #111; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
.woocommerce-cart-form .product-name a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px; line-height: 1.4; }
.woocommerce-cart-form .product-name a:hover { color: var(--red); }
.woocommerce-cart-form .product-price, .woocommerce-cart-form .product-subtotal { font: 600 18px/1 var(--f-d); white-space: nowrap; }
.woocommerce-cart-form .product-subtotal { font-size: 22px; }
/* The add-to-cart notice links to the cart — pointless on the cart itself. */
.woocommerce-cart .woocommerce-message .button, .woocommerce-cart .woocommerce-message .wc-forward { display: none; }
/* Quantities update the cart on their own (JS); the coupon hides behind a toggle. */
.js .woocommerce-cart-form button[name="update_cart"] { display: none; }
.coupon-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 8px 0; background: none; border: 0; color: var(--ink); cursor: pointer; font: 600 14px/1 var(--f-d); letter-spacing: .1em; text-transform: uppercase; }
.coupon-toggle::before { content: "+"; display: grid; place-items: center; width: 24px; height: 24px; background: var(--carbon); color: #fff; font: 700 16px/1 var(--f-d); transform: skewX(-10deg); transition: background-color .2s, transform .25s var(--ease); }
.coupon-toggle[aria-expanded="true"]::before { content: "−"; background: var(--red); }
.coupon-toggle:hover span { text-decoration: underline; text-underline-offset: .2em; }
.js .coupon:not(.is-open) { display: none !important; }
.js .coupon.is-open { margin-top: 10px; }
.cbar { display: none; }

a.remove { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #CFCFD5; color: var(--ink-2); font-size: 24px; line-height: 1; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
a.remove:hover { background: var(--red); border-color: var(--red); color: #fff; }
.flow .quantity.is-stepper { border-color: var(--carbon); background: var(--paper); height: 50px; }
.flow .qty-btn { color: var(--ink); width: 40px; }
.flow .qty-btn:hover { color: #fff; }
.flow input.qty { color: var(--ink); width: 46px; }
.flow .quantity:not(.is-stepper) input.qty { border-color: var(--carbon); }
.woocommerce-cart-form td.actions { padding-top: 22px; border-bottom: 0; }
.woocommerce-cart-form td.actions::after { content: ""; display: table; clear: both; }
.coupon { float: left; display: flex; flex-wrap: wrap; gap: 10px; }
.coupon .input-text { width: 200px; }
button[name="update_cart"] { float: right; }

.input-text, .flow select, .flow textarea, .woocommerce-form input[type="text"], .woocommerce-form input[type="email"], .woocommerce-form input[type="password"] {
    width: 100%; height: 54px; padding: 0 16px;
    background: var(--paper); border: 2px solid #CACAD0; border-radius: 0; color: var(--ink);
    font: 400 16px/1.2 var(--f-b); -webkit-appearance: none; appearance: none;
    transition: border-color .2s, box-shadow .2s;
}
textarea.input-text { height: 120px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.input-text::placeholder { color: #86868E; }
.input-text:hover { border-color: #9D9DA5; }
.input-text:focus, .flow select:focus { outline: none; border-color: var(--carbon); box-shadow: 5px 5px 0 var(--red); }

.cart_totals, #order_review {
    position: relative; padding: 28px 28px 30px; background: var(--carbon); color: var(--off);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
.cart_totals::before, #order_review::before { content: ""; position: absolute; left: 0; top: 0; width: 90px; height: 4px; background: var(--red); }
.cart_totals h2 { margin: 0 0 18px; font: 600 26px/1 var(--f-d); text-transform: uppercase; letter-spacing: .04em; }
.cart_totals table th, .cart_totals table td,
#order_review table th, #order_review table td { padding: 14px 0; border-bottom: 1px solid #2A2A2F; text-align: left; vertical-align: top; font-size: 14px; }
.cart_totals table td, #order_review table td { text-align: right; }
.cart_totals table th, #order_review tfoot th { font: 600 12px/1.5 var(--f-d); letter-spacing: .14em; text-transform: uppercase; color: #A3A3AB; font-weight: 600; }
.cart_totals .cart-subtotal td, #order_review .cart-subtotal td { font: 600 18px/1.2 var(--f-d); }
.pw-delivery td { color: #BDBDC4; font-size: 13px !important; max-width: 200px; }
.cart_totals .order-total th, #order_review .order-total th { color: #fff; padding-top: 20px; }
.cart_totals .order-total td, #order_review .order-total td { padding-top: 16px; font: 700 40px/1 var(--f-d); color: #fff; }
.order-total td strong { font-weight: 700; display: inline-block; transform: skewX(-10deg); }
.order-total .includes_tax { display: block; font: 400 12px/1.4 var(--f-b); color: #A3A3AB; margin-top: 6px; }
.wc-proceed-to-checkout { margin-top: 24px; }
.wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 62px; font-size: 18px; }

/* Checkout */
.flow--checkout .woocommerce { display: block; }
form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 450px); grid-template-rows: auto auto 1fr; column-gap: clamp(28px, 4.5vw, 64px); align-items: start; }
form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; grid-row: 1; }
form.checkout > #customer_details { grid-column: 1; grid-row: 2 / span 2; }
form.checkout > #order_review_heading { grid-column: 2; grid-row: 2; margin: 0 0 14px; font: 600 26px/1 var(--f-d); text-transform: uppercase; letter-spacing: .04em; }
form.checkout > #order_review { grid-column: 2; grid-row: 3; position: sticky; top: calc(var(--hd) + 24px); }
.col2-set .col-1, .col2-set .col-2 { width: 100%; }
.woocommerce-billing-fields h3, .woocommerce-additional-fields h3 { margin: 0 0 18px; font: 600 26px/1 var(--f-d); text-transform: uppercase; letter-spacing: .04em; }
.woocommerce-additional-fields { margin-top: 30px; }
.woocommerce-billing-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 18px; }
.form-row { margin: 0; grid-column: 1 / -1; }
.form-row-first { grid-column: 1; }
.form-row-last { grid-column: 2; }
.form-row label:not(.checkbox):not(.woocommerce-form__label-for-checkbox) { display: block; margin-bottom: 8px; font: 600 13px/1.2 var(--f-d); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.form-row .required { color: var(--red); text-decoration: none; border: 0; }
#order_review .required, .cart_totals .required { color: var(--red-hi); }
.form-row .optional { display: none; }
.woocommerce-input-wrapper { display: block; }
.form-row.woocommerce-invalid .input-text { border-color: var(--red); background: #FFF6F5; }
.checkout-inline-error-message, .woocommerce-input-wrapper .error { margin: 6px 0 0; color: var(--red-dk); font-size: 13px; font-weight: 600; }
.pw-checkout-note { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; padding: 14px 18px; background: var(--paper); border-left: 4px solid var(--amber); font-size: 14.5px; color: var(--ink); }
.pw-checkout-note .ic { width: 22px; height: 22px; color: var(--red); flex: none; }

#order_review .shop_table { margin-bottom: 18px; }
#order_review thead th { padding: 0 0 12px; border-bottom: 2px solid #34343A; font: 600 12px/1 var(--f-d); letter-spacing: .16em; text-transform: uppercase; color: #A3A3AB; }
#order_review thead th.product-total { text-align: right; }
#order_review .cart_item td { font-size: 14px; line-height: 1.45; color: #E4E4E8; }
#order_review td.product-name, #order_review thead th.product-name { text-align: left; padding-right: 14px; }
#order_review .cart_item .product-total { font: 600 17px/1.3 var(--f-d); white-space: nowrap; }
#order_review .product-quantity { color: var(--amber); font-weight: 700; }
#payment { margin-top: 6px; }
#payment .payment_methods { list-style: none; margin: 0 0 16px; padding: 0; }
#payment .wc_payment_method { padding: 14px 16px; background: #17171A; border: 1px solid #2C2C31; }
#payment .wc_payment_method > label { display: inline-flex; align-items: center; gap: 10px; font: 600 16px/1.2 var(--f-d); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
#payment .wc_payment_method input[type="radio"] { width: 20px; height: 20px; margin: 0 8px 0 0; accent-color: var(--red); vertical-align: middle; }
#payment .payment_box { margin-top: 10px; font-size: 14px; color: #BDBDC4; }
#payment .payment_box p { margin: 0; }
.woocommerce-terms-and-conditions-wrapper { margin: 16px 0; font-size: 13px; color: #A3A3AB; }
.woocommerce-terms-and-conditions-wrapper a, .woocommerce-privacy-policy-text a { color: var(--amber); }
.woocommerce-privacy-policy-text p { margin: 0 0 12px; }
.woocommerce-form__label-for-checkbox { position: relative; display: block; padding-left: 32px; font-size: 14px; color: inherit; cursor: pointer; line-height: 1.45; }
.woocommerce-form__label-for-checkbox input[type="checkbox"] { position: absolute; left: 0; top: 0; width: 20px; height: 20px; margin: 0; accent-color: var(--red); }
.woocommerce-terms-and-conditions { max-height: 220px; overflow: auto; padding: 12px; margin-bottom: 12px; background: #17171A; }
#place_order { width: 100%; min-height: 64px; font-size: 18px; margin-top: 4px; }
/* Reassurance list: cart summary and checkout payment box (both dark). */
.assure { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.assure li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13.5px; line-height: 1.4; color: #BDBDC4; }
.assure .ic { width: 20px; height: 20px; color: var(--red-hi); }
.assure strong { color: #fff; font-weight: 600; }
.assure--pay { margin: 0 0 18px; }
.assure--cart { margin-top: 18px; padding-top: 16px; border-top: 1px dashed #34343A; }
.woocommerce-form-coupon-toggle { margin-bottom: 18px; }
.woocommerce-form-coupon-toggle .woocommerce-info { padding: 10px 18px 10px 56px; font-size: 14px; box-shadow: none; border-left-width: 4px; }
.woocommerce-form-coupon-toggle .woocommerce-info::before { top: 50%; width: 24px; height: 24px; margin-top: -12px; font-size: 14px; }
form.checkout_coupon { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 0 0 28px; padding: 18px; background: var(--paper); border: 1px solid var(--line-l); }
form.checkout_coupon p { margin: 0; }
form.checkout_coupon .form-row-first { flex: 1 1 220px; }
.blockUI.blockOverlay { background: rgba(245, 245, 245, .6) !important; }
#order_review .blockUI.blockOverlay { background: rgba(11, 11, 12, .6) !important; }

/* Order received */
.flow--received .woocommerce-order { max-width: 980px; }
.flow .woocommerce-thankyou-order-received, .flow--received .woocommerce-notice--success {
    position: relative; margin: 0 0 24px; padding: 24px 28px 24px 84px;
    background: var(--paper); border-left: 6px solid var(--red);
    font: 600 clamp(20px, 2.2vw, 28px)/1.25 var(--f-d); text-transform: uppercase; letter-spacing: .02em;
}
.flow .woocommerce-thankyou-order-received::before { content: ""; position: absolute; left: 26px; top: 50%; width: 38px; height: 38px; margin-top: -19px; background: repeating-conic-gradient(var(--carbon) 0 25%, var(--off) 0 50%) 0 0 / 19px 19px; border: 2px solid var(--carbon); transform: skewX(-10deg); }
ul.woocommerce-order-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 2px; list-style: none; margin: 0 0 30px; padding: 0; background: var(--carbon); }
ul.woocommerce-order-overview li { padding: 20px 22px; background: var(--carbon); color: #A3A3AB; font: 600 12px/1.3 var(--f-d); letter-spacing: .14em; text-transform: uppercase; }
ul.woocommerce-order-overview li strong { display: block; margin-top: 8px; color: #fff; font: 700 24px/1.1 var(--f-d); letter-spacing: .01em; text-transform: none; }
.flow--received .woocommerce-order > p:not(.woocommerce-notice) { font-size: 16px; padding: 16px 20px; background: var(--paper); border-left: 4px solid var(--amber); }
.woocommerce-order-details, .woocommerce-customer-details { margin-top: 34px; }
.woocommerce-order-details__title, .woocommerce-column__title, .woocommerce-customer-details h2 { margin: 0 0 14px; font: 600 26px/1 var(--f-d); text-transform: uppercase; letter-spacing: .04em; }
table.order_details { background: var(--paper); }
table.order_details th, table.order_details td { padding: 14px 16px; border-bottom: 1px solid var(--line-l); text-align: left; font-size: 15px; }
table.order_details thead th { background: var(--carbon); color: #fff; font: 600 12px/1 var(--f-d); letter-spacing: .14em; text-transform: uppercase; }
table.order_details tfoot th { font: 600 13px/1.3 var(--f-d); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
table.order_details .pw-total { font: 700 26px/1 var(--f-d); white-space: nowrap; }
table.order_details td.product-total, table.order_details tfoot td, table.order_details thead th.product-total { text-align: right; }
table.order_details a { color: var(--ink); font-weight: 600; text-decoration: none; }
table.order_details a:hover { color: var(--red); }
table.order_details .product-quantity { color: var(--red); }
.woocommerce-customer-details address { padding: 20px 22px; background: var(--paper); border: 2px solid var(--line-l); font-style: normal; line-height: 1.7; }
.woocommerce-customer-details address p { margin: 6px 0 0; }

/* Order received: what happens next (dark panel, four laps). */
.next { position: relative; margin: 34px 0 0; padding: clamp(22px, 2.6vw, 34px); background: var(--carbon); color: #C9C9CF; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); }
.next::before { content: ""; position: absolute; left: 0; top: 0; width: 38%; height: 4px; background: var(--red); }
.next__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin-bottom: 22px; }
.next__head .eyebrow { order: 2; margin: 0; }
.next .eyebrow__flag { background: repeating-conic-gradient(var(--off) 0 25%, var(--carbon) 0 50%) 0 0 / 8px 8px; border-color: var(--off); }
.next__title { margin: 0; font: 700 clamp(30px, 3vw, 42px)/.95 var(--f-d); text-transform: uppercase; color: #fff; }
.next__title em { font-style: normal; color: var(--red-hi); }
.next__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.next__i { position: relative; display: grid; align-content: start; gap: 12px; min-width: 0; padding: 2px clamp(14px, 1.6vw, 22px); }
.next__i:first-child { padding-left: 0; }
.next__i + .next__i::before { content: ""; position: absolute; left: 0; top: -2px; bottom: -2px; width: 2px; background: #3A3A40; transform: skewX(-16deg); }
.next__n { font: 700 46px/.86 var(--f-d); color: var(--red-hi); }
.next__t { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 600 16px/1.2 var(--f-d); letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.next__t .ic { flex: none; width: 20px; height: 20px; color: var(--red-hi); }
.next__x { margin: 0; font-size: 14px; line-height: 1.5; color: #BDBDC4; }
.next__help { display: flex; align-items: flex-start; gap: 10px; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid #26262B; font-size: 14px; line-height: 1.5; color: #BDBDC4; }
.next__help .ic { flex: none; width: 20px; height: 20px; color: var(--red-hi); }
.next__help a { color: var(--amber); font-weight: 600; }
.flow--received .woocommerce-order > .next + .woocommerce-order-details { margin-top: 40px; }
.woocommerce-customer-details--phone::before, .woocommerce-customer-details--email::before { display: block; margin-bottom: 3px; font: 600 11.5px/1.2 var(--f-d); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.woocommerce-customer-details--phone::before { content: "Телефон"; }
.woocommerce-customer-details--email::before { content: "Имейл"; }
.woocommerce-customer-details address p { margin-top: 14px; }

/* Order received on wide screens: order on the left, "Какво следва" as a sticky sidebar. */
@media (min-width: 1100px) {
    .flow--received .woocommerce-order { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); column-gap: clamp(32px, 3.4vw, 56px); align-items: start; max-width: none; }
    .flow--received .woocommerce-order > * { grid-column: 1; min-width: 0; }
    .flow--received .woocommerce-order > .next { grid-column: 2; grid-row: 1 / span 6; position: sticky; top: calc(var(--hd) + 24px); margin: 0; }
    .flow--received .woocommerce-order > .next + .woocommerce-order-details { margin-top: 34px; }
    .flow--received .next__head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .flow--received .next__head .eyebrow { order: 0; }
    .flow--received .next__list { grid-template-columns: 1fr; }
    .flow--received .next__i { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-top: 1px dashed #2E2E34; }
    .flow--received .next__i:first-child { padding-top: 0; border-top: 0; }
    .flow--received .next__i + .next__i::before { display: none; }
    .flow--received .next__n { font-size: 40px; }
}

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice {
    scroll-margin-top: calc(var(--hd) + 60px);
    position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
    margin: 0 0 20px; padding: 16px 20px 16px 62px; list-style: none;
    background: var(--paper); color: var(--ink); border-left: 5px solid var(--amber);
    font-size: 15px; line-height: 1.45; box-shadow: 0 10px 30px rgba(11, 11, 12, .08);
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before {
    content: "✓"; position: absolute; left: 18px; top: 14px; width: 28px; height: 28px; display: grid; place-items: center;
    background: var(--amber); color: var(--carbon); font: 700 16px/1 var(--f-d); transform: skewX(-10deg);
}
.woocommerce-info { border-left-color: var(--carbon); }
.woocommerce-info::before { content: "i"; background: var(--carbon); color: #fff; }
.woocommerce-error { border-left-color: var(--red); display: block; }
.woocommerce-error::before { content: "!"; background: var(--red); color: #fff; }
.woocommerce-error li { margin: 2px 0; }
.woocommerce-message .button, .woocommerce-info .button { order: 2; min-height: 42px; padding: 0 20px; font-size: 13px; }
.woocommerce-message a:not(.button), .woocommerce-info a:not(.button), .woocommerce-error a { color: var(--red); font-weight: 600; }
.pdp-notices .woocommerce-message { margin-bottom: 0; }

/* Empty cart */
.empty { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 5vw, 70px); padding: 30px 0 10px; }
.empty__n { margin: 0; font: 700 clamp(160px, 22vw, 320px)/.78 var(--f-d); color: transparent; -webkit-text-stroke: 3px var(--carbon); transform: skewX(-10deg); }
.empty__title { margin: 0 0 14px; font: 700 clamp(36px, 5vw, 72px)/.95 var(--f-d); text-transform: uppercase; }
.empty__title .sk { transform-origin: bottom left; }
.empty__text p:not(.eyebrow) { color: var(--ink-2); font-size: 17px; max-width: 48ch; }
.return-to-shop { margin: 18px 0 0; }
.flow--empty .return-to-shop .button { min-height: 60px; padding: 0 36px; font-size: 17px; }
.pitstop--empty { margin-top: 30px; clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); padding-top: calc(var(--cut) + 72px); }

/* =========================================================================
   404
   ========================================================================= */
.lost { position: relative; overflow: clip; padding: clamp(48px, 7vw, 100px) 0 calc(var(--cut) + 72px); background: var(--carbon-weave); background-color: var(--carbon); background-size: 20px 20px; color: var(--off); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%); }
.lost__bg { position: absolute; inset: 0; pointer-events: none; }
.lost__slab { position: absolute; top: 0; bottom: 0; left: 0; width: 48%; background: linear-gradient(170deg, #F20700, var(--red) 45%, #950400); clip-path: polygon(0 0, 100% 0, 66% 100%, 0 100%); }
.speed--lost { opacity: .5; -webkit-mask-image: linear-gradient(90deg, #000 0 34%, transparent 46%); mask-image: linear-gradient(90deg, #000 0 34%, transparent 46%); }
.lost__text { position: relative; z-index: 2; }
.lost__in { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.lost__code { margin: 0; font: 700 clamp(150px, 24vw, 380px)/.8 var(--f-d); color: #fff; letter-spacing: -.02em; text-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.lost__code .sk { transform: skewX(-12deg); }
.lost__title { margin: 0 0 18px; font: 700 clamp(44px, 5.6vw, 88px)/.92 var(--f-d); text-transform: uppercase; }
.lost__title .sk { transform-origin: bottom left; }
.lost__title em { font-style: normal; color: var(--red-hi); }
.lost__lead { color: #C9C9CF; font-size: 17px; max-width: 48ch; }
.lost .sf--block { margin: 24px 0 28px; }
.lost__cta { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.lost__rail { position: relative; margin-top: clamp(40px, 6vw, 80px); }
.lost + .sec { margin-top: calc(-1 * var(--cut)); }

/* =========================================================================
   Footer: finish line · lap strip · brand + contact · podium columns
   ========================================================================= */
.ft { position: relative; overflow: clip; background: var(--carbon); color: #B8B8BF; }
.ft__flag { position: relative; height: 32px; background: repeating-conic-gradient(var(--off) 0 25%, var(--carbon) 0 50%) 0 0 / 16px 16px; border-bottom: 3px solid var(--red); }
.ft__flag-plate {
    position: absolute; top: 50%; right: max(var(--gut), calc((100% - var(--max)) / 2));
    padding: 7px 18px; background: var(--carbon); color: #fff; box-shadow: 0 0 0 2px var(--off);
    font: 700 14px/1 var(--f-d); letter-spacing: .26em; text-transform: uppercase;
    transform: translateY(-50%) skewX(-14deg);
}

.ft__lead { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: end; gap: 26px clamp(28px, 5vw, 72px); padding: clamp(44px, 5vw, 64px) 0 clamp(34px, 4vw, 48px); border-bottom: 1px solid #232327; }
.logo--ft .logo__word { font-size: 40px; }
.ft__claim { max-width: 46ch; margin: 18px 0 0; font-size: 15px; line-height: 1.6; }
.ft__contact { display: grid; gap: 10px; }
.ft__contact .ft__h { margin-bottom: 6px; }
.ft__mail, .ft__hours { display: inline-flex; align-items: center; gap: 12px; margin: 0; font-size: 14.5px; }
.ft__mail { color: var(--amber); text-decoration: none; font-weight: 600; }
.ft__mail:hover { text-decoration: underline; }
.ft__contact .ic { width: 20px; height: 20px; flex: none; color: var(--red-hi); }
.ft__cta { justify-self: end; }

.ft__h { position: relative; margin: 0 0 18px; padding-left: 18px; font: 600 14px/1 var(--f-d); letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.ft__h::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--red); transform: skewX(-14deg); }
.ft ul { list-style: none; margin: 0; padding: 0; }
.ft__links a { display: inline-flex; align-items: baseline; gap: 10px; padding: 6px 0; color: #C4C4CA; text-decoration: none; font-size: 15px; transition: color .15s, transform .2s var(--ease); }
.ft__links a:hover { color: #fff; transform: translateX(6px) skewX(-6deg); }
.ft__n { font: 600 12px/1 var(--f-d); color: var(--red-hi); letter-spacing: .06em; }
.ft__facts li { display: flex; align-items: flex-start; gap: 12px; padding: 6px 0; font-size: 14.5px; line-height: 1.45; }
.ft__facts .ic { width: 20px; height: 20px; flex: none; color: var(--red-hi); }

/* Podium: the three link columns stand on steps 2 · 1 · 3. */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; column-gap: 8px; padding-top: clamp(44px, 5vw, 70px); }
.podium__col { display: flex; flex-direction: column; min-width: 0; }
.podium__body { padding: 0 clamp(14px, 2vw, 30px) 24px; }
.podium__col--1 { --pod: var(--red); --h: 150px; }
.podium__col--2 { --pod: var(--off); --h: 106px; }
.podium__col--3 { --pod: var(--amber); --h: 72px; }
.podium__step {
    position: relative; display: flex; justify-content: center; align-items: flex-start; height: var(--h); padding-top: 12px;
    background: linear-gradient(180deg, #1E1E22, #131315);
    border-top: 4px solid var(--pod);
}
.podium__step .sk { font: 700 clamp(44px, 4.4vw, 66px)/.9 var(--f-d); color: transparent; -webkit-text-stroke: 1.5px rgba(245, 245, 245, .45); }
.podium__col--1 .podium__step { background: linear-gradient(180deg, #26262B, #151517); }
.podium__col--1 .podium__step .sk { color: var(--red-hi); -webkit-text-stroke: 0; }

.ft__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 20px 0 24px; border-top: 1px solid #232327; font-size: 13px; color: #8E8E96; }
.ft__bottom p { margin: 0; }
.ft__brands { font: 500 13px/1.4 var(--f-d); letter-spacing: .14em; text-transform: uppercase; }

/* Toast */
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 90; display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--carbon); color: var(--off); border-left: 5px solid var(--amber); box-shadow: 0 18px 40px rgba(0, 0, 0, .4); font-size: 15px; opacity: 0; transform: translateY(20px) skewX(-4deg); transition: opacity .3s, transform .35s var(--ease); }
.toast.is-on { opacity: 1; transform: none; }
.toast .ic { width: 22px; height: 22px; color: var(--amber); }
.toast__a { display: inline-flex; align-items: center; gap: 6px; color: var(--amber); font: 600 14px/1 var(--f-d); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.toast__a .ic { width: 16px; height: 16px; color: var(--amber); }
.toast__t { white-space: nowrap; }
.has-cbar .toast { bottom: 92px; }

/* =========================================================================
   Reveal on scroll (only when JS adds .rv; content is never hidden without JS)
   ========================================================================= */
.js .rv { opacity: 0; transform: translateX(42px) skewX(-5deg); transition: opacity .6s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms); }
.js .rv.is-in { opacity: 1; transform: none; }

/* =========================================================================
   Responsive
   ========================================================================= */
/* Race bar: the inline categories tighten step by step, then hand over to the full-screen menu. */
@media (max-width: 1599px) {
    .hd__cart-t { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .hd__cart { padding: 0 18px; }
}

@media (max-width: 1479px) {
    .gears__a { padding: 0 10px; font-size: 13.5px; letter-spacing: .045em; gap: 6px; }
    .hd__livery { padding-right: 58px; }
}

@media (max-width: 1379px) {
    .gears__a { padding: 0 8px; font-size: 12.5px; letter-spacing: .04em; gap: 5px; }
    .gears__n { font-size: 11px; }
    .logo--hd .logo__word { font-size: 28px; }
    .hd__actions { padding-left: 4px; }
}

@media (max-width: 1239px) {
    .hd__gears { display: none; }
    .hd__burger { display: grid; }
    /* No JS: keep the categories reachable as a scrolling second row. */
    html:not(.js) .hd { height: auto; grid-template-rows: var(--hd) auto; }
    html:not(.js) .hd__gears { display: flex; grid-column: 1 / -1; grid-row: 2; overflow-x: auto; padding: 0 var(--gut); border-top: 1px solid #1d1d21; }
    html:not(.js) .gears__a { min-height: 46px; }
}

@media (max-width: 1180px) {
    .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gearsel .grid--4 > :nth-child(n+7) { display: none; }
    .teams__grid { grid-template-columns: 1fr; }
    .sh--teams { flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: 0 40px; }
    .laps__in { grid-template-columns: 1fr; }
    .laps__title { max-width: none; }
    .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }
    .gauge { grid-template-columns: 112px minmax(0, 1fr); align-items: center; padding: 16px 22px; }
    .gauge:nth-child(odd) { border-left: 0; }
    .gauge:nth-child(n+3) { border-top: 1px solid #2C2C31; }
    .gauge__read { padding-top: 0; }
    .slot { grid-template-columns: 1fr; }
    .slot__img { aspect-ratio: 16 / 11; }
    .hd__mail { display: none; }
}

@media (max-width: 1099px) {
    :root { --hd: 60px; }
    .hd__livery { padding-right: 56px; clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0 100%); }
    .hd__livery::after { right: 16px; width: 6px; transform: skewX(26deg); }
    .logo--hd .logo__word { font-size: 27px; }
    .logo--hd .logo__mark { width: 34px; height: 23px; }
    .hd__actions { gap: 2px; padding-right: 10px; }
    .hd__cart { height: 42px; padding: 0 16px; margin: 0 6px; }
    .hd--slim .hd__bar { justify-content: flex-end; padding-right: 10px; }
    .hd__secure { display: none; }
    .so__quick { grid-template-columns: 1fr; }


    .pdp__grid { grid-template-columns: 1fr; }
    .pdp__media { position: relative; top: 0; }
    .pdp__slab { width: 100%; height: min(78vw, 560px); clip-path: polygon(0 0, 100% 0, 100% 62%, 0 100%); }
    .speed--pdp { bottom: auto; height: min(78vw, 560px); -webkit-mask-image: linear-gradient(180deg, #000 0 40%, transparent 80%); mask-image: linear-gradient(180deg, #000 0 40%, transparent 80%); }
    .info__grid { grid-template-columns: 1fr; grid-template-rows: none; }
    .info__aside { position: static; order: 2; }
    .tele__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tele__i:nth-child(3)::before { display: none; }
    .tele__i:nth-child(n+3) { border-top: 1px solid #26262B; }
    .band__img { display: none; }
    .band--img .band__ghost { right: 2%; }

    .flow--cart .woocommerce { grid-template-columns: 1fr; }
    .flow--cart .cart-collaterals { grid-column: 1; position: static; }
    form.checkout { grid-template-columns: 1fr; grid-template-rows: none; }
    form.checkout > .woocommerce-NoticeGroup, form.checkout > #customer_details, form.checkout > #order_review_heading, form.checkout > #order_review { grid-column: 1; grid-row: auto; position: static; }
    form.checkout > #order_review_heading { margin-top: 36px; }
    .band--compact .band__text { grid-template-columns: 1fr; row-gap: 14px; }
    .band--compact .steps { justify-self: start; }

    .lost__in { grid-template-columns: 1fr; }
    .lost__slab { width: 100%; height:  min(340px, 62vw + 90px); clip-path: polygon(0 0, 100% 0, 100% 55%, 0 100%); }
    .speed--lost { bottom: auto; height: min(340px, 62vw + 90px); -webkit-mask-image: linear-gradient(180deg, #000 0 45%, transparent 75%); mask-image: linear-gradient(180deg, #000 0 45%, transparent 75%); }
    .lost .eyebrow { color: #fff; }

    .ft__lead { grid-template-columns: minmax(0, 1fr) auto; }
    .ft__brand { grid-column: 1 / -1; }

    .stick {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
        display: flex; align-items: center; gap: 10px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) 16px;
        background: rgba(11, 11, 12, .97); border-top: 3px solid var(--red);
        box-shadow: 0 -12px 30px rgba(0, 0, 0, .3);
        transform: translateY(115%); transition: transform .35s var(--ease);
    }
    .stick.is-on { transform: none; }
    .stick__price { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
    .stick__off { padding: 4px 7px; background: var(--red); color: #fff; font: 700 13px/1 var(--f-d); transform: skewX(-10deg); }
    .stick .stick__add { width: 52px; min-height: 0; height: 50px; padding: 0; --btn-bg: var(--g3); --btn-bg-h: var(--g3); }
    .stick .stick__add .ic { width: 22px; height: 22px; }
    .stick .stick__add.added { --btn-bg: var(--amber); color: var(--carbon); }
    .stick .added_to_cart { display: none; }
    .stick__buy { min-height: 50px; padding: 0 20px; }
    body.single-product .toast { bottom: 92px; }
}

@media (max-width: 700px) {
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Top bar: four facts and the e-mail need ~860px; drop the e-mail, then the returns fact. */
@media (max-width: 980px) {
    .topbar__mail { display: none; }
    .topbar__in { justify-content: center; }
}
@media (max-width: 800px) {
    .topbar__facts .topbar__return { display: none; }
}

@media (max-width: 860px) {
    .next__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
    .next__i:nth-child(3) { padding-left: 0; }
    .next__i:nth-child(3)::before { display: none; }
    /* Hero: the photo takes the top, wiped away downwards; the copy and the tower follow. */
    .hero__main { display: block; min-height: 0; }
    .hero__fx { bottom: auto; height: min(100vw, 640px); }
    .hero__photo {
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V56L0 74Z'/%3E%3Cpath d='M0 77.5L100 59.5V63L0 81Z'/%3E%3Cpath d='M0 84L100 66V68.6L0 86.6Z'/%3E%3Cpath d='M0 89.6L100 71.6V73.4L0 91.4Z'/%3E%3Cpath d='M0 94.2L100 76.2V77.4L0 95.4Z'/%3E%3Cpath d='M0 98L100 80V80.8L0 98.8Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V56L0 74Z'/%3E%3Cpath d='M0 77.5L100 59.5V63L0 81Z'/%3E%3Cpath d='M0 84L100 66V68.6L0 86.6Z'/%3E%3Cpath d='M0 89.6L100 71.6V73.4L0 91.4Z'/%3E%3Cpath d='M0 94.2L100 76.2V77.4L0 95.4Z'/%3E%3Cpath d='M0 98L100 80V80.8L0 98.8Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    }
    .hero__photo img { width: 100%; height: 76%; }
    .hero__photo::after { background: linear-gradient(180deg, rgba(11, 11, 12, .2), transparent 30%); }
    .hero__slab { clip-path: polygon(0 74.8%, 100% 56.8%, 100% 57.6%, 0 75.6%); }
    .speed--hero { -webkit-mask-image: linear-gradient(180deg, transparent 0 58%, #000 72%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent 0 58%, #000 72%, #000 86%, transparent); -webkit-mask-composite: source-over; mask-composite: add; }
    .hero__in { grid-template-columns: minmax(0, 1fr); padding-top: min(60vw, 420px); }
    .tower { max-width: 560px; justify-self: start; margin-bottom: 0; }

    .sh { flex-direction: column; align-items: flex-start; }
    .sh--gear { flex-direction: row; align-items: flex-end; }
    .sh--gear .sh__extra { display: none; }
    .sh--pit { flex-direction: row; align-items: flex-end; }
    .sh--pit .sh__text { grid-template-columns: 1fr; }
    .sh--pit .sh__sub { margin-top: 14px; }
    .sh--pit .sh__extra { display: none; }

    /* Starting grid → horizontal snap carousel of large tiles. */
    .sgrid__grid { display: block; padding-bottom: 0; }
    .sgrid__head { padding: 0; margin-bottom: 10px; }
    .sgrid__head::before, .sgrid__pos--pole { display: none; }
    .sgrid__list { display: grid; grid-auto-flow: column; grid-auto-columns: min(80vw, 400px); gap: 18px; margin: 0 calc(-1 * var(--gut)); padding: 44px var(--gut) 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--gut); scrollbar-width: none; }
    .sgrid__list::-webkit-scrollbar { display: none; }
    .sgrid__slot { scroll-snap-align: start; }
    .sgrid__slot:nth-child(odd) { translate: none; }
    .slot__img { aspect-ratio: 1; }

    /* Lap strip: one lap per row, numerals in a fixed column. */
    .laps__list { grid-template-columns: 1fr; gap: 16px; }
    .lap { grid-template-columns: 74px minmax(0, 1fr); padding: 0 0 0 16px; }

    /* Leaderboard: two-line rows, a shallower lean. */
    .lb { --lean: 7px; --cols: 38px 6px minmax(0, 1fr) auto; }
    .lb__head { display: none; }
    .lb__row { grid-template-areas: "pos bar name from" "pos bar gap from"; row-gap: 5px; column-gap: 12px; min-height: 66px; padding: 10px 14px; }
    .lb__row:hover, .lb__row:focus-visible { transform: translateX(6px); }
    .lb__pos { grid-area: pos; height: 34px; font-size: 20px; }
    .lb__bar { grid-area: bar; height: 38px; }
    .lb__name { grid-area: name; font-size: 25px; }
    .lb__gap { grid-area: gap; font-size: 11px; }
    .lb__gap b { font-size: 16px; }
    .lb__from { grid-area: from; display: grid; justify-items: end; gap: 4px; font-size: 17px; }
    .lb__go { display: none; }

    /* Podium columns stack; each step turns into a numbered post on the left. */
    .podium { grid-template-columns: 1fr; row-gap: 26px; }
    .podium__col { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: start; }
    .podium__step { order: -1; height: auto !important; min-height: 64px; padding: 6px 0 0; border-top: 0; border-left: 4px solid var(--pod); background: none; justify-content: flex-start; padding-left: 10px; }
    .podium__step .sk { font-size: 40px; }
    .podium__body { padding: 0 0 0 10px; }

    /* Archive toolbar: chips as one scrolling row, count + sort side by side. */
    .toolbar { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 0; margin-bottom: 16px; }
    .chips { gap: 10px; margin-right: calc(-1 * var(--gut)); }
    .chips ul { padding-right: var(--gut); }
    .toolbar__sort { margin-left: 0; justify-content: space-between; gap: 12px; }
    .woocommerce-result-count { font-size: 13px; line-height: 1.3; }
    .woocommerce-ordering select { min-width: 0; width: auto; max-width: 56vw; height: 42px; font-size: 13.5px; padding: 0 38px 0 12px; background-position: right 12px center; }

    /* Cart table → cards */
    .woocommerce-cart-form .shop_table thead { display: none; }
    .woocommerce-cart-form .shop_table, .woocommerce-cart-form .shop_table tbody { display: block; }
    .woocommerce-cart-form tr.cart_item {
        display: grid; position: relative; grid-template-columns: 88px minmax(0, 1fr) auto;
        grid-template-areas: "thumb name name" "thumb price price" "qty qty sub";
        gap: 8px 14px; padding: 18px 0; border-bottom: 1px solid var(--line-l);
    }
    .woocommerce-cart-form tr.cart_item td { display: block; padding: 0; border: 0; }
    .woocommerce-cart-form .product-thumbnail { grid-area: thumb; width: auto; }
    .woocommerce-cart-form .product-thumbnail img { width: 88px; height: 88px; }
    .woocommerce-cart-form .product-name { grid-area: name; }
    .woocommerce-cart-form tr.cart_item td.product-name { padding-right: 46px; }
    .woocommerce-cart-form .product-name a { font-size: 15px; }
    .woocommerce-cart-form tr.cart_item td.product-remove { position: absolute; top: 14px; right: 0; left: auto; z-index: 2; width: auto; }
    .woocommerce-cart-form .product-remove a.remove { width: 34px; height: 34px; font-size: 20px; background: var(--paper); }
    .woocommerce-cart-form .product-price { grid-area: price; font-size: 16px; }
    .woocommerce-cart-form .product-quantity { grid-area: qty; align-self: center; justify-self: start; }
    .woocommerce-cart-form .product-subtotal { grid-area: sub; align-self: center; justify-self: end; text-align: right; font-size: 24px; }
    .woocommerce-cart-form .product-price::before, .woocommerce-cart-form .product-subtotal::before { content: attr(data-title) ": "; font: 500 11px/1 var(--f-d); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); display: block; margin-bottom: 4px; }
    .woocommerce-cart-form tr:not(.cart_item) { display: block; }
    .woocommerce-cart-form td.actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 0 0; }
    .coupon-toggle { align-self: flex-start; }
    .coupon, button[name="update_cart"] { float: none; width: 100%; }
    .coupon .input-text { flex: 1; width: auto; }
    /* Sticky total + checkout bar. */
    .cbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) 16px;
        background: rgba(11, 11, 12, .97); color: var(--off); border-top: 3px solid var(--red);
        box-shadow: 0 -12px 30px rgba(0, 0, 0, .3);
        transform: translateY(115%); transition: transform .35s var(--ease);
    }
    .cbar.is-on { transform: none; }
    .cbar__t { display: grid; gap: 2px; margin: 0; }
    .cbar__t > span { font: 500 11px/1 var(--f-d); letter-spacing: .16em; text-transform: uppercase; color: #A3A3AB; }
    .cbar__t > strong { font: 700 26px/1 var(--f-d); color: #fff; white-space: nowrap; }
    .cbar__t > strong * { font: inherit; }
    .cbar__go { min-height: 50px; padding: 0 18px; font-size: 14px; }
    .has-cbar .ft { padding-bottom: 76px; }

    .noresults, .empty { grid-template-columns: 1fr; }
    .flow--empty .woocommerce { grid-template-columns: 1fr; }
    .flow--empty .empty__n { grid-row: auto; }
    .flow--empty .return-to-shop { grid-column: 1; }
    .noresults__n, .empty__n { font-size: 140px; }
}

@media (max-width: 640px) {
    .next { margin-top: 26px; padding: 22px 18px 20px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
    .next__list { grid-template-columns: 1fr; gap: 0; }
    .next__i { grid-template-columns: 50px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px dashed #2E2E34; }
    .next__i:first-child { padding-top: 0; border-top: 0; }
    .next__i + .next__i::before { display: none; }
    .next__n { font-size: 38px; }
    :root { --cut: 26px; }
    body { font-size: 15.5px; }
    .topbar__facts { gap: 16px; }
    .topbar__facts .topbar__truck, .topbar__facts .topbar__return, .topbar__mail { display: none; }
    .topbar__in { justify-content: center; height: 32px; }
    .hd__cart-t { display: none; }
    .hd__cart { padding: 0 13px; }
    .logo--hd .logo__word { font-size: 25px; }
    .hd__livery { padding-right: 50px; padding-left: 16px; }
    .hd__back { padding: 0 14px; font-size: 13px; }
    .hd__back-l { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .hd__back-s { display: inline; }

    .hero { padding-bottom: 44px; }
    .hero__fx { height: 112vw; }
    .hero__in { padding-top: 70vw; padding-bottom: 8px; gap: 28px; }
    .hero__kicker { margin-bottom: 14px; padding: 7px 12px 7px 10px; font-size: 11.5px; letter-spacing: .16em; }
    .hero__title { font-size: clamp(54px, 16vw, 76px); margin-bottom: 18px; }
    .hero__lead { margin-bottom: 24px; font-size: 15.5px; }
    .hero__cta .btn { flex: 1 1 auto; }
    .tower { padding-left: 26px; }
    .tower__team { font-size: 20px; }
    .bp--tower { font-size: 54px; }
    .tower__buy .btn { min-height: 54px; }
    .save__t { padding: 7px 8px; }
    .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
    .gauge { grid-template-columns: 1fr; justify-items: center; align-items: start; text-align: center; gap: 6px; padding: 14px 8px 16px; }
    .gauge__svg { width: 96px; }
    .gauge__v { flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; height: auto; min-height: 50px; font-size: 28px; margin-bottom: 6px; }
    .gauge__v small { font-size: 10.5px; letter-spacing: .1em; }
    .gauge__t { color: transparent; font-size: 0; }
    .gauge__t strong { color: #fff; font-size: 13px; line-height: 1.25; }
    .glabel { font-size: 17px; }

    .startline { height: 38px; background-size: 19px 19px; top: 12px; }
    .startline__plate { font-size: 16px; padding: 7px 16px 7px 14px; }
    .sgrid { padding-top: calc(var(--pad) + 24px); }
    .so__form { gap: 10px; }
    .so__form input[type="search"] { font-size: clamp(26px, 7.4vw, 34px); }
    .so__slab { width: 14%; }
    .so__go span { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .so__go { margin: 0 4px 12px 0; height: 50px; padding: 0 16px; }
    .so__cats { grid-template-columns: 1fr; }
    .so__cats a { font-size: 18px; padding: 10px 0; }
    .tele__i { padding: 18px 14px 18px 16px; gap: 8px; }
    .tele__v { font-size: 40px; }
    .tele__l { font-size: 11px; letter-spacing: .12em; }
    .pdp__finish { padding: 18px; }
    .pdp__finish .btn { width: 100%; }
    .ft__lead { grid-template-columns: 1fr; }
    .ft__cta { justify-self: stretch; }

    /* Rail bleeds off the right edge; ~2.4 gears visible so the next one peeks. */
    .rail { margin-right: calc(-1 * var(--gut)); }
    .rail__gate { display: none; }
    .rail__list { grid-auto-columns: 40%; }
    .rail__gear { min-height: 84px; padding: 12px 12px 12px 14px; gap: 8px; }
    .rail__n { font-size: 32px; }
    .rail__name { font-size: 12px; letter-spacing: .05em; }
    .gearsel__foot { flex-direction: column; align-items: stretch; }
    .gearsel__foot .btn { width: 100%; }

    .pc__body { padding: 12px 12px 18px; gap: 5px; }
    .pc__title { font-size: 13.5px; line-height: 1.33; min-height: 4em; margin-bottom: 8px; }
    .pc__brand { font-size: 11px; letter-spacing: .14em; }
    .bp--card { font-size: 26px; }
    .pc__price del { font-size: 12px; }
    .pc .pc__add { width: 40px; height: 40px; }
    .pc .pc__add .ic { width: 19px; height: 19px; }
    .pc__off { font-size: 15px; padding: 6px 10px 6px 14px; top: 10px; }
    .pc { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); }
    .pc__foot { gap: 6px; }

    .car__track { grid-auto-columns: 72vw; }
    .car__nav { margin: -6px 0 18px; }

    .sgrid__pos { left: 16px; font-size: 44px; }
    .slot__body { padding: 16px 16px 18px; }
    .slot__title { font-size: 15px; -webkit-line-clamp: 3; }
    .bp--slot { font-size: 32px; }

    /* Archive band: compact, no ghost numeral or speed lines. */
    .band__title { font-size: clamp(38px, 11vw, 56px); }
    .band__bg::after { width: 38%; }
    .speed--band { display: none; }
    .band--shop { padding: 14px 0 calc(var(--cut) + 34px); }
    .band--shop .crumbs ol { margin-bottom: 8px; font-size: 12.5px; }
    .band--shop .band__title { font-size: clamp(32px, 9.4vw, 44px); margin: 2px 0 6px; }
    .band--shop .band__head { gap: 2px 14px; }
    .band--shop .band__count { margin-bottom: 8px; }
    .band--shop .band__count-n { font-size: 28px; }
    .band--shop .band__ghost { display: none; }
    .crumbs li:last-child { max-width: 60vw; }
    .shop .rail { margin-top: -34px; }

    .pdp__title { font-size: clamp(30px, 8.4vw, 38px); margin: 14px 0 18px; }
    .pdp__title--long { font-size: clamp(25px, 7vw, 30px); line-height: 1.02; }
    .quantity.is-stepper { height: 54px; }
    .qty-btn { width: 36px; }
    input.qty { width: 40px; font-size: 18px; }
    .pdp__summary .single_add_to_cart_button, .pdp__buynow { min-height: 54px; font-size: 14.5px; padding: 0 16px; }
    .pdp__buynow { min-height: 58px; font-size: 16px; }
    .bp--xl { font-size: 52px; }
    .gal__main { clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 34px 100%, 0 calc(100% - 34px)); }
    .trust { padding: 16px 16px 14px; }
    .prose .pw-specs > div { grid-template-columns: 1fr; gap: 2px; padding: 10px; }

    /* Steps: three equal columns, short labels under the numbers. */
    .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
    .steps__i { flex-direction: column; align-items: flex-start; gap: 4px; margin-right: -8px; padding: 9px 16px 9px 22px; font-size: 11px; letter-spacing: .08em; }
    .steps__i:first-child { padding-left: 14px; }
    .steps__i:last-child { margin-right: 0; }
    .steps__n { font-size: 17px; }
    .steps__lf { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .steps__ls { display: block; }
    .band--compact .steps { width: 100%; }
    .cart_totals, #order_review { padding: 22px 18px 26px; }
    .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; }
    .form-row-first, .form-row-last { grid-column: 1; }

    .ft__bottom { flex-direction: column; }
    .toast { left: 12px; right: 12px; bottom: 12px; justify-content: space-between; }
    .lost__code { font-size: 38vw; }
}

@media (hover: none) {
    .pc:hover { transform: none; }
    .pc:hover .pc__img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
    .speed__g { animation: none !important; }
}

@media print {
    .topbar, .hd, .menu, .so, .ft, .stick, .toast, .speed, .startline, .hero__fx { display: none !important; }
    .band, .pdp__top, .hero { background: none !important; color: #000 !important; clip-path: none !important; }
}

/* =========================================================================
   Account (kept out of navigation, but styled)
   ========================================================================= */
#order_review .woocommerce-form__label-for-checkbox { color: #E4E4E8; }
.flow--account .woocommerce { max-width: 560px; }
.flow--account h2 { margin: 10px 0 20px; font: 600 30px/1 var(--f-d); text-transform: uppercase; letter-spacing: .03em; }
.flow--account form .form-row { margin-bottom: 18px; }
.flow--account .woocommerce-form__label-for-checkbox { margin: 4px 0 18px; font-size: 15px; }
.flow--account .woocommerce-form-login__submit { margin-right: 18px; }
.flow--account .woocommerce-LostPassword { margin-top: 18px; }
.flow--account .woocommerce-LostPassword a { color: var(--red); font-weight: 600; }
.password-input { position: relative; display: block; }
.password-input .input-text { padding-right: 56px; }
.show-password-input {
    position: absolute; right: 10px; top: 50%; width: 36px; height: 36px; margin-top: -18px; padding: 0; border: 0; cursor: pointer;
    background: var(--ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 22px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.show-password-input.display-password { background: var(--red); }