/* ==========================================================================
   Ajla — the tyre wall at night.

   Design language: dark · pill · shadow · condensed-display ·
   scroll-driven-scene. One motif: THE SIDEWALL — the size code moulded
   around a rubber arc, each part named, the buyer's own size lit in
   road-marking yellow; and the wheel drawn to its true diameter against the
   buyer's dashed ring.

   Rules:
   · Asphalt canvas; every panel floats on a soft deep shadow, never a hard
     edge or a glass blur.
   · Pill geometry: every control is a capsule, every panel a 26–30px slab,
     every photograph a circle in a ring of tread.
   · Yellow (primary) is the ACTION and the buyer's size; orange (secondary)
     is a WARNING; green (accent) is a PASS. The EU label colours are
     constants, like the label itself.
   · Every colour is derived from the brand tokens in :root (layout.blade.php)
     with color-mix(), so a recoloured shop recolours its road.
   ========================================================================== */

:root {
    --aj-go: var(--primary-color, #ffd23f);
    --aj-warn: var(--secondary-color, #ff6b2c);
    --aj-pass: var(--accent-color, #3ddc97);
    --aj-road: var(--background-color, #0d0f12);
    --aj-slab: var(--surface-color, #181b21);
    --aj-ink: var(--text-color, #eef0f3);
    --aj-dim: var(--text-muted-color, #8e96a3);
    --aj-line: var(--border-color, #2b3039);
    --aj-rubber: color-mix(in srgb, var(--aj-road) 70%, #2a2d33 30%);
    --aj-rubber-hi: color-mix(in srgb, var(--aj-slab) 70%, #3a3e46 30%);
    --aj-glow: color-mix(in srgb, var(--aj-go) 28%, transparent);
    --aj-on-go: #14130c;
    --aj-eu-a: #00a651;
    --aj-eu-b: #8dc63f;
    --aj-eu-c: #e8d800;
    --aj-eu-d: #fdb913;
    --aj-eu-e: #ed1c24;
    --aj-eu-f: #f37021;
    --aj-eu-g: #c4161c;
    --aj-display: var(--heading-font, 'Oswald', sans-serif);
    --aj-text: var(--body-font, 'Inter Tight', sans-serif);
    --aj-lift: 0 22px 44px -22px rgba(0, 0, 0, .85), 0 2px 6px rgba(0, 0, 0, .35);
    --aj-lift-sm: 0 10px 24px -14px rgba(0, 0, 0, .9);
    --aj-tread: repeating-conic-gradient(from 0deg, var(--aj-rubber) 0 7deg, var(--aj-rubber-hi) 7deg 14deg);
}

/* ------------------------------------------------------------------ base */

:where(.aj-body) { margin: 0; }
:where(.aj-body *, .aj-body *::before, .aj-body *::after) { box-sizing: border-box; }
.aj-body {
    background:
        radial-gradient(70rem 32rem at 10% -10%, color-mix(in srgb, var(--aj-go) 6%, transparent), transparent 70%),
        var(--aj-road);
    color: var(--aj-ink);
    font-family: var(--aj-text);
    font-size: 15.5px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
html:has(> .aj-body) { background: var(--aj-road); }
:where(.aj-body) :where(a) { color: inherit; }
:where(.aj-body) :where(img) { max-width: 100%; display: block; }
:where(.aj-body) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.aj-body) :where(h1, h2, h3, p, ol, ul, figure, dl, dd) { margin: 0; }
:where(.aj-body) :where(ol, ul) { padding: 0; list-style: none; }
:where(.aj-body) :where(fieldset) { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.aj-body [hidden] { display: none !important; }
html:not(.aj-js) .aj-js-only { display: none !important; }
[dir="rtl"] .aj-body * { letter-spacing: normal !important; }
.aj-sr { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.aj-wrap { inline-size: 100%; max-inline-size: 1240px; margin-inline: auto; padding-inline: 18px; }
@media (min-width: 760px) { .aj-wrap { padding-inline: 32px; } }

.aj-h1 { font-family: var(--aj-display); font-weight: 600; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; text-transform: uppercase; letter-spacing: .01em; }
.aj-h2 { font-family: var(--aj-display); font-weight: 600; font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: 1.05; text-transform: uppercase; }
.aj-kicker { font-family: var(--aj-display); font-weight: 500; font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; color: var(--aj-go); margin-block-end: 10px; }
.aj-lead { color: var(--aj-dim); font-size: 1.05rem; margin-block-start: 14px; max-inline-size: 60ch; }
.aj-fine { color: var(--aj-dim); font-size: .85rem; }
.aj-chip { display: inline-block; margin-block-start: 12px; padding: 6px 14px; border-radius: 999px; background: var(--aj-slab); color: var(--aj-dim); font-size: .85rem; }
.aj-link { color: var(--aj-go); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.aj-empty { padding: 30px; border-radius: 26px; background: var(--aj-slab); color: var(--aj-dim); text-align: center; }
.aj-ok { padding: 12px 18px; border-radius: 999px; background: color-mix(in srgb, var(--aj-pass) 16%, var(--aj-slab)); color: var(--aj-pass); margin-block: 12px; }
.aj-warn { color: var(--aj-warn); font-weight: 600; }
.aj-warn--box { padding: 14px 20px; border-radius: 22px; background: color-mix(in srgb, var(--aj-warn) 14%, var(--aj-slab)); margin-block-end: 18px; }
.aj-err { color: var(--aj-warn); font-size: .82rem; font-weight: 600; }
.aj-prose :where(p, ul, ol) { margin-block-end: 1em; }
.aj-prose :where(ul) { list-style: disc; padding-inline-start: 1.2em; }
.aj-panel { background: var(--aj-slab); border-radius: 28px; box-shadow: var(--aj-lift); }

.aj-body a:focus-visible, .aj-body button:focus-visible, .aj-body input:focus-visible, .aj-body select:focus-visible, .aj-body textarea:focus-visible, .aj-body label:has(> input:focus-visible) {
    outline: 3px solid var(--aj-go); outline-offset: 3px;
}

.aj-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 50px; padding: 10px 26px;
    border: 0; border-radius: 999px; font-family: var(--aj-display); font-weight: 600; font-size: 1.05rem; letter-spacing: .05em; text-transform: uppercase;
    text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.aj-btn--go { background: var(--aj-go); color: var(--aj-on-go); box-shadow: 0 12px 28px -12px var(--aj-glow); }
.aj-btn--go:hover { transform: translateY(-1px); box-shadow: 0 16px 32px -12px var(--aj-glow); }
.aj-btn--ghost { background: transparent; color: var(--aj-ink); box-shadow: inset 0 0 0 2px var(--aj-line); }
.aj-btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--aj-go); }
.aj-btn--small { min-block-size: 38px; padding: 6px 16px; font-size: .9rem; background: var(--aj-go); color: var(--aj-on-go); }
.aj-btn--wide { inline-size: 100%; }
.aj-btn:disabled { opacity: .4; cursor: not-allowed; }

.aj-field { display: grid; gap: 6px; }
.aj-field > span { font-size: .82rem; font-weight: 600; color: var(--aj-dim); }
.aj-field input, .aj-field select, .aj-field textarea, .aj-filters select, .aj-filters input[type="search"], .aj-addtyre select, .aj-extras select, .aj-extras input[type="text"], .aj-coupon input {
    inline-size: 100%; min-block-size: 46px; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--aj-road); box-shadow: inset 0 0 0 1.5px var(--aj-line); font-size: .95rem;
}
.aj-field textarea { border-radius: 22px; }

/* --------------------------------------------------------- the motif */

.aj-hub { display: inline-block; inline-size: 26px; block-size: 26px; border-radius: 50%; flex: none; background: radial-gradient(circle, var(--aj-go) 0 22%, var(--aj-rubber) 24% 58%, transparent 60%), var(--aj-tread); box-shadow: 0 0 0 2px var(--aj-rubber-hi); }
.aj-hub--big { inline-size: 74px; block-size: 74px; }
.aj-badge { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; background: var(--aj-rubber); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6), inset 0 -1px 0 var(--aj-rubber-hi); text-decoration: none; }
.aj-badge b, .aj-badge { font-family: var(--aj-display); font-weight: 600; letter-spacing: .06em; color: var(--aj-dim); text-shadow: 0 -1px 0 rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .08); }
.aj-badge.is-set, .aj-badge.is-set b { color: var(--aj-go); }
.aj-badge--inline { padding: 2px 12px; font-size: .9rem; }

.aj-eu { display: inline-grid; place-items: center; min-inline-size: 30px; block-size: 30px; padding-inline: 8px; border-radius: 999px; font-family: var(--aj-display); font-weight: 700; color: #111; }
.aj-eu--a { background: var(--aj-eu-a); color: #fff; }
.aj-eu--b { background: var(--aj-eu-b); }
.aj-eu--c { background: var(--aj-eu-c); }
.aj-eu--d { background: var(--aj-eu-d); }
.aj-eu--e { background: var(--aj-eu-e); color: #fff; }
.aj-eu--f { background: var(--aj-eu-f); }
.aj-eu--g { background: var(--aj-eu-g); color: #fff; }
.aj-eu--none { background: var(--aj-rubber); color: var(--aj-dim); }

/* ------------------------------------------------------------------- bar */

.aj-bar { position: relative; z-index: 40; }
.aj-bar__strip { background: var(--aj-go); color: var(--aj-on-go); text-align: center; font-family: var(--aj-display); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; padding: 6px 12px; }
.aj-bar__road { position: sticky; inset-block-start: 0; display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: color-mix(in srgb, var(--aj-road) 92%, transparent); box-shadow: 0 1px 0 var(--aj-line); }
@media (min-width: 760px) { .aj-bar__road { padding-inline: 32px; } }
.aj-bar__name { display: inline-flex; align-items: center; gap: 10px; font-family: var(--aj-display); font-weight: 700; font-size: 1.6rem; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; }
.aj-bar__name img { max-block-size: 40px; inline-size: auto; }
.aj-bar__nav { display: none; gap: 2px; margin-inline-end: auto; }
.aj-bar__item { position: relative; }
.aj-bar__item > a { display: block; padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .92rem; }
.aj-bar__item > a:hover { background: var(--aj-slab); }
.aj-bar__sub { display: none; position: absolute; inset-block-start: 100%; inset-inline-start: 0; min-inline-size: 210px; padding: 10px; border-radius: 22px; background: var(--aj-slab); box-shadow: var(--aj-lift); }
.aj-bar__sub a { display: block; padding: 8px 12px; border-radius: 999px; text-decoration: none; }
.aj-bar__sub a:hover { background: var(--aj-rubber); }
.aj-bar__item:hover .aj-bar__sub, .aj-bar__item:focus-within .aj-bar__sub { display: block; }
@media (min-width: 1180px) { .aj-bar__nav { display: flex; } }
@media (max-width: 1179px) { .aj-bar__name { margin-inline-end: auto; } }
.aj-bar__find { display: none; align-items: center; border-radius: 999px; background: var(--aj-rubber); box-shadow: inset 0 0 0 1.5px var(--aj-line); }
.aj-bar__find input { inline-size: 190px; min-block-size: 42px; padding: 8px 6px 8px 18px; border: 0; background: transparent; font-family: var(--aj-display); letter-spacing: .05em; }
.aj-bar__find button { inline-size: 40px; block-size: 40px; margin: 1px; border: 0; border-radius: 50%; background: var(--aj-go); color: var(--aj-on-go); font-weight: 800; cursor: pointer; }
@media (min-width: 900px) { .aj-bar__find { display: inline-flex; } }
.aj-bar__set { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--aj-go); color: var(--aj-on-go); text-decoration: none; font-family: var(--aj-display); font-weight: 700; }
.aj-bar__tyres { display: inline-flex; gap: 2px; }
.aj-bar__tyres i { inline-size: 8px; block-size: 16px; border-radius: 4px; background: currentColor; }
.aj-bar__open { min-block-size: 42px; padding: 8px 18px; border: 0; border-radius: 999px; background: var(--aj-slab); font-family: var(--aj-display); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
@media (max-width: 560px) { .aj-badge:not(.is-set) { display: none; } .aj-bar__road { gap: 8px; padding-inline: 12px; } .aj-bar__name { font-size: 1.25rem; } .aj-badge.is-set { padding: 6px 10px; font-size: .8rem; } }
.aj-seasons { display: flex; gap: 8px; overflow-x: auto; padding: 10px 18px; scrollbar-width: none; }
@media (min-width: 760px) { .aj-seasons { padding-inline: 32px; } }
.aj-seasons a { display: inline-flex; gap: 6px; align-items: center; padding: 6px 14px; border-radius: 999px; background: var(--aj-slab); text-decoration: none; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.aj-seasons a::before { content: ''; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--aj-dim); }
.aj-seasons__summer::before { background: var(--aj-go) !important; }
.aj-seasons__winter::before { background: #8fc7ff !important; }
.aj-seasons__all::before { background: var(--aj-pass) !important; }
.aj-seasons a.is-on { box-shadow: inset 0 0 0 2px var(--aj-go); }
.aj-seasons small { color: var(--aj-dim); }
.aj-menu { inset: 12px 12px 12px auto; inline-size: min(380px, calc(100vw - 24px)); block-size: auto; max-block-size: calc(100vh - 24px); margin: 0; padding: 26px; border: 0; border-radius: 30px; background: var(--aj-slab); color: var(--aj-ink); box-shadow: var(--aj-lift); overflow-y: auto; }
[dir="rtl"] .aj-menu { inset: 12px auto 12px 12px; }
.aj-menu::backdrop { background: rgba(0, 0, 0, .6); }
.aj-menu:popover-open { display: flex; flex-direction: column; gap: 20px; }
.aj-menu__x { align-self: flex-end; padding: 8px 16px; border: 0; border-radius: 999px; background: var(--aj-rubber); cursor: pointer; }
.aj-menu__list { display: grid; gap: 6px; }
.aj-menu__list > li > a { display: block; font-family: var(--aj-display); font-weight: 600; font-size: 1.6rem; text-transform: uppercase; text-decoration: none; }
.aj-menu__list ul { display: grid; gap: 2px; padding-inline-start: 14px; }
.aj-menu__list ul a { color: var(--aj-dim); text-decoration: none; }
.aj-menu__langs { display: flex; gap: 8px; flex-wrap: wrap; }
.aj-menu__langs a { padding: 5px 12px; border-radius: 999px; background: var(--aj-rubber); text-decoration: none; font-size: .85rem; }
.aj-menu__langs a.is-on { background: var(--aj-go); color: var(--aj-on-go); }
.aj-menu__phone { font-family: var(--aj-display); font-size: 1.3rem; color: var(--aj-go); }

/* --------------------------------------------------------- the sidewall */

.aj-wall { padding-block: 48px 72px; }
.aj-wall__grid { display: grid; gap: 40px; }
@media (min-width: 1020px) { .aj-wall__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.aj-code { margin-block-start: 28px; padding: 22px; display: grid; gap: 18px; }
.aj-code__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.aj-code__row > b { font-family: var(--aj-display); font-size: 2rem; color: var(--aj-dim); padding-block-end: 4px; }
.aj-code label { display: grid; gap: 4px; }
.aj-code label span { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--aj-dim); }
.aj-code select, .aj-code input { min-block-size: 52px; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--aj-road); box-shadow: inset 0 0 0 1.5px var(--aj-line); font-family: var(--aj-display); font-size: 1.35rem; font-weight: 600; }
.aj-code input { inline-size: 86px; }
.aj-wall__found { display: flex; gap: 12px; flex-wrap: wrap; margin-block-start: 18px; }
.aj-wall__found a { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--aj-slab); text-decoration: none; box-shadow: var(--aj-lift-sm); }
.aj-wall__found b { font-family: var(--aj-display); font-size: 1.6rem; color: var(--aj-go); }
.aj-sidewall { display: grid; gap: 14px; }
.aj-sidewall svg { inline-size: 100%; block-size: auto; overflow: visible; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .7)); }
.aj-sidewall__tread { fill: none; stroke: var(--aj-rubber-hi); stroke-width: 22; stroke-dasharray: 6 5; }
.aj-sidewall__rubber { fill: var(--aj-rubber); stroke: var(--aj-line); stroke-width: 1.5; }
.aj-sidewall__rim { fill: none; stroke: color-mix(in srgb, var(--aj-ink) 30%, transparent); stroke-width: 6; }
.aj-sidewall__code { direction: ltr; unicode-bidi: bidi-override; font-family: var(--aj-display); font-weight: 700; font-size: 44px; letter-spacing: .08em; fill: color-mix(in srgb, var(--aj-ink) 72%, var(--aj-rubber)); stroke: rgba(0, 0, 0, .6); stroke-width: 1; paint-order: stroke; }
.aj-wall:has(.aj-wall__found) .aj-sidewall__code { fill: var(--aj-go); }
.aj-sidewall figcaption { text-align: center; color: var(--aj-dim); font-size: .9rem; }
.aj-sidewall__parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.aj-sidewall__part { padding: 12px 16px; border-radius: 22px; background: var(--aj-slab); }
.aj-sidewall__part dt { font-family: var(--aj-display); font-weight: 700; font-size: 1.5rem; color: var(--aj-go); }
.aj-sidewall__part dd { font-size: .82rem; color: var(--aj-dim); }

/* ------------------------------------------------------------- the roll */

.aj-roll { padding-block: 72px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--aj-slab) 55%, transparent) 30%, transparent); }
.aj-roll__head { margin-block-end: 32px; }
.aj-roll__track { display: grid; gap: 28px; }
@media (min-width: 900px) { .aj-roll__track { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } .aj-motion .aj-roll__stage { position: sticky; inset-block-start: 120px; } }
.aj-roll__stage { display: grid; justify-items: center; gap: 12px; }
.aj-roll__stage svg { inline-size: min(360px, 80vw); block-size: auto; overflow: visible; }
.aj-roll__yours { fill: none; stroke: var(--aj-go); stroke-width: 2; stroke-dasharray: 6 6; }
.aj-roll__wheel { transform-origin: 150px 150px; transform: rotate(var(--aj-turn, 0deg)); }
.aj-roll__tyre { fill: var(--aj-rubber); stroke: var(--aj-rubber-hi); stroke-width: 10; stroke-dasharray: 4 3; transition: r .5s ease; }
.aj-roll__rim { fill: color-mix(in srgb, var(--aj-ink) 18%, var(--aj-slab)); stroke: color-mix(in srgb, var(--aj-ink) 45%, transparent); stroke-width: 3; transition: r .5s ease; }
.aj-roll__spokes { stroke: color-mix(in srgb, var(--aj-ink) 40%, transparent); stroke-width: 8; stroke-linecap: round; }
.aj-roll__hub { fill: var(--aj-go); }
.aj-roll__now { font-family: var(--aj-display); font-weight: 700; font-size: 1.8rem; letter-spacing: .06em; }
.aj-roll__sizes { display: grid; gap: 18px; }
.aj-roll__size { padding: 24px 26px; border-radius: 28px; background: var(--aj-slab); opacity: .6; transition: opacity .3s ease, box-shadow .3s ease; }
.aj-roll__size.is-lit { opacity: 1; box-shadow: var(--aj-lift), inset 0 0 0 2px var(--aj-go); }
@media (min-width: 900px) { .aj-motion .aj-roll__size { min-block-size: 46vh; } }
.aj-roll__code { font-family: var(--aj-display); font-weight: 700; font-size: 2.2rem; letter-spacing: .04em; }
.aj-roll__size.is-yours .aj-roll__code { color: var(--aj-go); }
.aj-roll__say { color: var(--aj-ink); font-weight: 600; margin-block: 4px 6px; }
.aj-roll__meta { color: var(--aj-dim); margin-block-end: 12px; }

/* ------------------------------------------------------------ the board */

.aj-board { padding-block: 64px; }
.aj-board__head { margin-block-end: 24px; }
.aj-board__scroll { position: relative; overflow-x: auto; border-radius: 28px; background: var(--aj-slab); box-shadow: var(--aj-lift); }
.aj-board__table { inline-size: 100%; border-collapse: collapse; min-inline-size: 760px; }
.aj-board__table th, .aj-board__table td { padding: 14px 16px; text-align: start; vertical-align: middle; }
.aj-board__table thead th { font-family: var(--aj-display); font-weight: 500; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--aj-dim); border-block-end: 1px solid var(--aj-line); }
.aj-board__table tbody tr + tr { border-block-start: 1px solid color-mix(in srgb, var(--aj-line) 60%, transparent); }
.aj-board__table tbody tr:hover { background: color-mix(in srgb, var(--aj-go) 5%, transparent); }
.aj-board__table tbody th a { font-weight: 700; text-decoration: none; }
.aj-board__table tbody th small { display: block; color: var(--aj-dim); font-weight: 400; }
.aj-board__table em { font-style: normal; color: var(--aj-go); }
.aj-board__eu { text-align: center !important; }

/* ------------------------------------------------------------- the pit */

.aj-pit { padding-block: 64px; }
.aj-pit__grid { display: grid; gap: 30px; }
@media (min-width: 980px) { .aj-pit__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.aj-pit__nuts { display: grid; gap: 14px; margin-block-start: 22px; }
@media (min-width: 640px) { .aj-pit__nuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aj-pit__nut { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 18px 20px; border-radius: 26px; background: var(--aj-slab); box-shadow: var(--aj-lift-sm); }
.aj-pit__hub { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); background: var(--aj-go); color: var(--aj-on-go); font-family: var(--aj-display); font-weight: 700; font-size: 1.2rem; }
.aj-pit__nut h3 { font-family: var(--aj-display); font-weight: 600; font-size: 1.15rem; text-transform: uppercase; }
.aj-pit__nut p { color: var(--aj-dim); font-size: .92rem; }
.aj-pit__rules { padding: 26px; display: grid; gap: 12px; }
.aj-pit__rules h3 { font-family: var(--aj-display); font-weight: 600; font-size: 1.4rem; text-transform: uppercase; }
.aj-pit__rules > p { color: var(--aj-dim); }
.aj-pit__ladder-title { color: var(--aj-ink) !important; font-weight: 600; }
.aj-pit__ladder { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.aj-pit__ladder li { display: grid; justify-items: center; padding: 6px 10px; border-radius: 999px; background: var(--aj-rubber); }
.aj-pit__ladder b { font-family: var(--aj-display); color: var(--aj-go); }
.aj-pit__ladder small { font-size: .7rem; color: var(--aj-dim); }

/* ------------------------------------------------------------ the index */

.aj-index { padding-block: 36px 72px; }
.aj-index__top { margin-block-end: 24px; }
.aj-index__count { color: var(--aj-dim); margin-block-start: 12px; }
.aj-index__count a { color: var(--aj-go); }
.aj-index__layout { display: grid; gap: 26px; }
@media (min-width: 1000px) { .aj-index__layout { grid-template-columns: 290px minmax(0, 1fr); align-items: start; } .aj-filters { position: sticky; inset-block-start: 96px; } }
.aj-filters { padding: 22px; display: grid; gap: 16px; }
.aj-filters__q { display: grid; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--aj-dim); }
.aj-filters__group legend { font-family: var(--aj-display); font-weight: 500; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--aj-dim); margin-block-end: 8px; }
.aj-filters__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.aj-filters__pills label { position: relative; cursor: pointer; }
.aj-filters__pills input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.aj-filters__pills span { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--aj-rubber); font-size: .85rem; }
.aj-filters__pills input:checked + span { background: var(--aj-go); color: var(--aj-on-go); font-weight: 700; }
.aj-filters__tick { display: flex; gap: 8px; align-items: center; font-size: .9rem; }
.aj-filters__tick input { inline-size: 18px; block-size: 18px; accent-color: var(--aj-go); }
.aj-index__grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.aj-index__cats { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 32px; }
.aj-index__cats a { padding: 6px 14px; border-radius: 999px; background: var(--aj-slab); text-decoration: none; font-size: .85rem; }
.aj-index__cats a.is-on { background: var(--aj-go); color: var(--aj-on-go); }
.aj-pager { display: flex; justify-content: center; align-items: center; gap: 14px; margin-block-start: 32px; }
.aj-pager a { padding: 8px 20px; border-radius: 999px; background: var(--aj-slab); text-decoration: none; font-weight: 700; box-shadow: var(--aj-lift-sm); }

/* A tyre on the wall. */
.aj-tyre { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 30px; background: var(--aj-slab); box-shadow: var(--aj-lift); }
.aj-tyre.is-fit { box-shadow: var(--aj-lift), inset 0 0 0 1.5px color-mix(in srgb, var(--aj-pass) 55%, transparent); }
.aj-tyre.is-out { opacity: .55; }
.aj-tyre__face { display: grid; justify-items: center; gap: 6px; text-align: center; text-decoration: none; }
.aj-tyre__round { display: block; inline-size: 160px; aspect-ratio: 1; border-radius: 50%; padding: 16px; background: var(--aj-tread); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .9); transition: transform .5s ease; }
.aj-tyre__round img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 50%; }
.aj-tyre__face:hover .aj-tyre__round { transform: rotate(20deg); }
.aj-tyre__brand { font-family: var(--aj-display); letter-spacing: .14em; text-transform: uppercase; color: var(--aj-dim); font-size: .78rem; }
.aj-tyre__name { font-family: var(--aj-display); font-weight: 600; font-size: 1.25rem; line-height: 1.15; text-transform: uppercase; }
.aj-tyre__code { padding: 3px 12px; border-radius: 999px; background: var(--aj-rubber); font-family: var(--aj-display); letter-spacing: .06em; color: var(--aj-ink); }
.aj-tyre__fit { text-align: center; font-size: .82rem; font-weight: 600; color: var(--aj-warn); }
.aj-tyre__fit.is-ok { color: var(--aj-pass); }
.aj-tyre__eu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; text-align: center; }
.aj-tyre__eu span { display: grid; justify-items: center; gap: 4px; }
.aj-tyre__eu i { font-style: normal; font-size: .68rem; color: var(--aj-dim); text-transform: uppercase; letter-spacing: .08em; }
.aj-tyre__eu b { font-size: .85rem; }
.aj-tyre__money { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px; margin-block-start: auto; }
.aj-tyre__money b { font-family: var(--aj-display); font-size: 1.5rem; color: var(--aj-go); }
.aj-tyre__money small { color: var(--aj-dim); }
.aj-tyre__season { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--aj-rubber); font-size: .75rem; }
.aj-tyre__season--summer { color: var(--aj-go); }
.aj-tyre__season--winter { color: #8fc7ff; }
.aj-tyre__season--all { color: var(--aj-pass); }

/* ------------------------------------------------------------ the sheet */

.aj-sheet { padding-block-end: 72px; }
.aj-sheet__band { padding-block: 30px 34px; background: linear-gradient(180deg, var(--aj-rubber), transparent); margin-block-end: 30px; }
.aj-crumbs { color: var(--aj-dim); font-size: .85rem; margin-block-end: 12px; }
.aj-crumbs a { text-decoration: none; }
.aj-sheet__code { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; margin-block-start: 20px; }
.aj-sheet__code span { display: grid; justify-items: center; }
.aj-sheet__code b { font-family: var(--aj-display); font-weight: 700; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; color: var(--aj-go); text-shadow: 0 2px 0 rgba(0, 0, 0, .6); }
.aj-sheet__code small { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--aj-dim); }
.aj-sheet__code i { font-style: normal; font-family: var(--aj-display); font-size: 2.4rem; color: var(--aj-dim); }
.aj-sheet__grid { display: grid; gap: 28px; }
@media (min-width: 1000px) { .aj-sheet__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .aj-sheet__decide { position: sticky; inset-block-start: 96px; } }
.aj-sheet__left { display: grid; gap: 22px; }
.aj-sheet__pics { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: 6px; }
.aj-sheet__pics img { flex: none; inline-size: min(100%, 420px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; padding: 18px; background: var(--aj-tread); scroll-snap-align: center; }
.aj-eulabel { padding: 24px; display: grid; gap: 16px; }
.aj-eulabel__title { font-family: var(--aj-display); font-weight: 600; font-size: 1.2rem; text-transform: uppercase; }
.aj-eulabel__row { display: grid; gap: 8px; }
.aj-eulabel__row > p:first-child { font-weight: 600; color: var(--aj-dim); font-size: .85rem; }
.aj-eulabel__scale { display: flex; gap: 6px; }
.aj-eulabel__scale li { flex: 1; display: grid; place-items: center; block-size: 36px; border-radius: 999px; font-family: var(--aj-display); font-weight: 700; color: #111; opacity: .28; }
.aj-eulabel__scale li.aj-eu--a, .aj-eulabel__scale li.aj-eu--e { color: #fff; }
.aj-eulabel__scale li.aj-eu--a { background: var(--aj-eu-a); }
.aj-eulabel__scale li.aj-eu--b { background: var(--aj-eu-b); }
.aj-eulabel__scale li.aj-eu--c { background: var(--aj-eu-c); }
.aj-eulabel__scale li.aj-eu--d { background: var(--aj-eu-d); }
.aj-eulabel__scale li.aj-eu--e { background: var(--aj-eu-e); }
.aj-eulabel__scale li.is-it { opacity: 1; flex: 1.6; box-shadow: 0 0 0 3px var(--aj-slab), 0 0 0 5px var(--aj-ink); }
.aj-eulabel__db { display: flex; align-items: center; gap: 12px; font-family: var(--aj-display); font-size: 1.5rem; }
.aj-waves { display: inline-flex; gap: 4px; align-items: center; }
.aj-waves i { inline-size: 6px; border-radius: 3px; background: var(--aj-line); }
.aj-waves i:nth-child(1) { block-size: 12px; }
.aj-waves i:nth-child(2) { block-size: 20px; }
.aj-waves i:nth-child(3) { block-size: 28px; }
.aj-waves--1 i:nth-child(1), .aj-waves--2 i:nth-child(-n+2), .aj-waves--3 i { background: var(--aj-go); }
.aj-sheet__decide { padding: 26px; display: grid; gap: 16px; }
.aj-sheet__votes { color: var(--aj-go); text-decoration: none; font-weight: 700; }
.aj-sheet__price { color: var(--aj-dim); }
.aj-sheet__price b { font-family: var(--aj-display); font-size: 2.6rem; color: var(--aj-ink); }
.aj-sheet__price s { margin-inline-start: 10px; }
.aj-sheet__buy { display: grid; gap: 16px; }
.aj-sizes legend, .aj-qty legend { font-family: var(--aj-display); font-weight: 500; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--aj-dim); margin-block-end: 8px; }
.aj-sizes { display: grid; gap: 8px; }
.aj-size { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 20px; border-radius: 999px; background: var(--aj-rubber); cursor: pointer; }
.aj-size input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.aj-size:has(:checked) { box-shadow: inset 0 0 0 2px var(--aj-go); }
.aj-size__code { font-family: var(--aj-display); font-weight: 600; letter-spacing: .05em; font-size: 1.1rem; }
.aj-size__price { font-weight: 700; }
.aj-size small { grid-column: 1 / -1; font-size: .78rem; color: var(--aj-dim); }
.aj-size.is-fit small { color: var(--aj-pass); }
.aj-size.is-miss small { color: var(--aj-warn); }
.aj-size.is-out { opacity: .4; cursor: not-allowed; }
.aj-size.is-out .aj-size__code { text-decoration: line-through; }
.aj-mirror { display: none; }
.aj-qty { display: flex; flex-wrap: wrap; gap: 8px; }
.aj-qty legend { inline-size: 100%; }
.aj-qty label { position: relative; cursor: pointer; }
.aj-qty input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.aj-qty span { display: inline-block; padding: 8px 20px; border-radius: 999px; background: var(--aj-rubber); font-weight: 600; }
.aj-qty input:checked + span { background: var(--aj-go); color: var(--aj-on-go); }
.aj-checks { display: grid; gap: 8px; }
.aj-checks li { position: relative; padding: 10px 16px 10px 40px; border-radius: 999px; background: var(--aj-road); font-size: .88rem; }
[dir="rtl"] .aj-checks li { padding: 10px 40px 10px 16px; }
.aj-checks li::before { content: '•'; position: absolute; inset-inline-start: 16px; font-weight: 800; color: var(--aj-dim); }
.aj-checks li.is-ok::before { content: '✓'; color: var(--aj-pass); }
.aj-checks li.is-bad::before { content: '!'; color: var(--aj-warn); }
.aj-checks li.is-bad { color: var(--aj-warn); }
.aj-checks li.is-unknown::before { content: '?'; color: var(--aj-dim); }
.aj-checks li.is-old { color: var(--aj-warn); }
.aj-sheet__boosters { margin-block-start: 28px; }
.aj-sheet__story, .aj-voices, .aj-sheet__same { margin-block-start: 56px; }
.aj-sheet__story .aj-prose { margin-block-start: 16px; max-inline-size: 72ch; color: color-mix(in srgb, var(--aj-ink) 85%, transparent); }
.aj-voices__list { display: grid; gap: 14px; margin-block: 18px; }
@media (min-width: 760px) { .aj-voices__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aj-voices__list > li { padding: 20px 24px; display: grid; gap: 6px; }
.aj-voices__stars { color: var(--aj-go); letter-spacing: .1em; }
.aj-voices__write summary { cursor: pointer; font-family: var(--aj-display); text-transform: uppercase; letter-spacing: .08em; color: var(--aj-go); }
.aj-voices__write form { display: grid; gap: 12px; padding: 22px; margin-block-start: 12px; max-inline-size: 560px; }
.aj-stars { display: flex; gap: 6px; flex-wrap: wrap; }
.aj-stars label { padding: 4px 12px; border-radius: 999px; background: var(--aj-rubber); cursor: pointer; }
.aj-stars label:has(:checked) { background: var(--aj-go); color: var(--aj-on-go); }

/* ---------------------------------------------------------- the checkout */

.aj-checkout { padding-block-end: 72px; }
.aj-checkout__band { padding-block: 34px; margin-block-end: 28px; background: repeating-linear-gradient(90deg, var(--aj-go) 0 34px, transparent 34px 60px) bottom / 100% 4px no-repeat, linear-gradient(180deg, var(--aj-rubber), transparent); }
.aj-checkout__band .aj-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.aj-checkout__band .aj-lead { flex-basis: 100%; margin: 0; }
.aj-garage { display: grid; gap: 28px; }
@media (min-width: 1060px) { .aj-garage { grid-template-columns: 330px minmax(0, 1fr); align-items: start; } .aj-garage__car { position: sticky; inset-block-start: 96px; } }
.aj-garage__car { display: grid; gap: 16px; }
.aj-car { padding: 22px; display: grid; justify-items: center; gap: 10px; }
.aj-car svg { inline-size: min(220px, 60vw); block-size: auto; }
.aj-car__body { fill: var(--aj-rubber-hi); stroke: var(--aj-line); stroke-width: 2; }
.aj-car__glass { fill: color-mix(in srgb, var(--aj-road) 80%, #6b86a8 20%); }
.aj-car__wheel { fill: var(--aj-rubber); stroke: var(--aj-line); stroke-width: 2; }
.aj-car__wheel.is-on { fill: var(--aj-go); stroke: var(--aj-go); filter: drop-shadow(0 0 8px var(--aj-glow)); }
.aj-car__front { font-family: var(--aj-display); font-size: 11px; letter-spacing: .2em; fill: var(--aj-dim); }
.aj-car figcaption { color: var(--aj-dim); font-size: .85rem; text-align: center; }
@media (max-width: 1059px) {
    .aj-car { grid-template-columns: 96px minmax(0, 1fr); justify-items: start; align-items: center; padding: 14px 18px; }
    .aj-car svg { inline-size: 96px; }
    .aj-car figcaption { text-align: start; }
}
.aj-garage__lines { display: grid; gap: 18px; }
.aj-setlines { inline-size: 100%; border-collapse: separate; border-spacing: 0 10px; }
.aj-setlines td, .aj-setlines th { padding: 12px 14px; background: var(--aj-slab); text-align: start; vertical-align: middle; }
.aj-setlines tr > :first-child { border-start-start-radius: 999px; border-end-start-radius: 999px; }
.aj-setlines tr > :last-child { border-start-end-radius: 999px; border-end-end-radius: 999px; }
.aj-setlines__pic { inline-size: 70px; }
.aj-setlines__pic img { inline-size: 52px; block-size: 52px; border-radius: 50%; object-fit: cover; padding: 5px; background: var(--aj-tread); }
.aj-setlines th a, .aj-setlines th b { font-weight: 700; text-decoration: none; }
.aj-setlines__code { display: block; font-family: var(--aj-display); letter-spacing: .05em; color: var(--aj-go); }
.aj-setlines th small { display: block; font-size: .78rem; font-weight: 400; color: var(--aj-warn); }
.aj-setlines th small.is-ok { color: var(--aj-pass); }
.aj-setlines__qty { white-space: nowrap; }
.aj-setlines__qty a { display: inline-grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 50%; background: var(--aj-rubber); text-decoration: none; font-weight: 800; }
.aj-setlines__qty b { margin-inline: 6px; }
.aj-setlines__sum { font-weight: 700; white-space: nowrap; }
.aj-setlines__x { text-decoration: none; font-size: 1.3rem; color: var(--aj-dim); }
@media (max-width: 640px) {
    .aj-setlines, .aj-setlines tbody { display: block; }
    .aj-setlines tr { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; grid-template-areas: "pic name x" "pic qty sum"; margin-block-end: 10px; border-radius: 26px; background: var(--aj-slab); padding: 10px; }
    .aj-setlines td, .aj-setlines th { background: transparent; padding: 4px 6px; border-radius: 0 !important; }
    .aj-setlines__pic { grid-area: pic; inline-size: auto; }
    .aj-setlines th { grid-area: name; }
    .aj-setlines__qty { grid-area: qty; }
    .aj-setlines__sum { grid-area: sum; text-align: end; }
    .aj-setlines tr > :last-child { grid-area: x; }
}
.aj-addtyre { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.aj-addtyre label { flex-basis: 100%; font-weight: 600; color: var(--aj-dim); font-size: .85rem; }
.aj-addtyre select { flex: 1 1 240px; }
.aj-order { padding: 26px; display: grid; gap: 16px; }
.aj-order__h { font-family: var(--aj-display); font-weight: 600; font-size: 1.3rem; text-transform: uppercase; }
.aj-order__pair { display: grid; gap: 12px; }
@media (min-width: 640px) { .aj-order__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aj-field--wide { grid-column: 1 / -1; } }
.aj-extras { inline-size: 100%; border-collapse: collapse; }
.aj-extras th, .aj-extras td { padding: 8px 0; text-align: start; }
.aj-extras th { inline-size: 40%; padding-inline-end: 14px; font-weight: 600; color: var(--aj-dim); font-size: .88rem; }
.aj-ways { display: grid; gap: 8px; }
.aj-ways > span { font-size: .82rem; font-weight: 600; color: var(--aj-dim); }
.aj-way { display: flex; gap: 10px; align-items: center; padding: 10px 18px; border-radius: 999px; background: var(--aj-road); cursor: pointer; }
.aj-way:has(:checked) { box-shadow: inset 0 0 0 2px var(--aj-go); }
.aj-way b { margin-inline-start: auto; }
.aj-order__money { display: grid; gap: 6px; padding-block-start: 10px; border-block-start: 1px solid var(--aj-line); }
.aj-order__money > div { display: flex; justify-content: space-between; gap: 12px; color: var(--aj-dim); }
.aj-order__money dd { color: var(--aj-ink); font-weight: 600; }
.aj-order__total { padding-block-start: 8px; color: var(--aj-ink) !important; }
.aj-order__total dt { font-family: var(--aj-display); font-size: 1.2rem; text-transform: uppercase; }
.aj-order__total dd { font-family: var(--aj-display); font-size: 1.8rem; color: var(--aj-go) !important; }
.aj-coupon { display: flex; gap: 8px; flex-wrap: wrap; }
.aj-coupon input { flex: 1 1 160px; }
.aj-coupon small { inline-size: 100%; font-weight: 700; }
.aj-coupon small.is-ok { color: var(--aj-pass); }
.aj-coupon small.is-bad { color: var(--aj-warn); }
.aj-order__cod p { font-size: .85rem; color: var(--aj-dim); margin-block-start: 8px; }

/* -------------------------------------------------------- content pages */

.aj-page { padding-block: 48px 72px; }
.aj-bay { display: grid; gap: 30px; }
@media (min-width: 980px) { .aj-bay { grid-template-columns: 300px minmax(0, 1fr); align-items: start; } .aj-bay__card { position: sticky; inset-block-start: 96px; } }
.aj-bay__card { padding: 24px; display: grid; gap: 18px; justify-items: start; }
.aj-bay__facts { display: grid; gap: 10px; inline-size: 100%; }
.aj-bay__facts dt { font-family: var(--aj-display); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--aj-dim); }
.aj-bay__facts dd { font-weight: 600; }
.aj-bay__lanes { display: grid; gap: 6px; inline-size: 100%; }
.aj-bay__lanes a { display: flex; gap: 12px; align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--aj-rubber); text-decoration: none; font-weight: 600; }
.aj-bay__lanes b { font-family: var(--aj-display); color: var(--aj-go); }
.aj-bay__floor { min-inline-size: 0; }
.aj-bay__text { margin-block-start: 26px; max-inline-size: 760px; padding-inline-start: 26px; border-inline-start: 6px solid; border-image: repeating-linear-gradient(180deg, var(--aj-go) 0 18px, transparent 18px 30px) 6; }
.aj-bay__rounds { display: flex; flex-wrap: wrap; gap: 22px; margin-block-start: 30px; }
.aj-bay__rounds figure { display: grid; justify-items: center; gap: 8px; inline-size: 170px; }
.aj-bay__rounds img { inline-size: 170px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; padding: 12px; background: var(--aj-tread); }
.aj-bay__rounds figcaption { font-size: .82rem; color: var(--aj-dim); text-align: center; }

/* ------------------------------------------------------------ crew desk */

.aj-desk { padding-block: 48px 72px; }
.aj-desk__head { max-inline-size: 760px; }
.aj-desk__nuts { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 26px; }
.aj-desk__nuts a, .aj-desk__nuts p { display: inline-flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; border-radius: 999px; background: var(--aj-slab); box-shadow: var(--aj-lift-sm); text-decoration: none; font-weight: 600; }
[dir="rtl"] .aj-desk__nuts a, [dir="rtl"] .aj-desk__nuts p { padding: 6px 6px 6px 18px; }
.aj-desk__nuts i { display: inline-grid; place-items: center; inline-size: 38px; block-size: 38px; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); background: var(--aj-go); color: var(--aj-on-go); font-style: normal; font-weight: 800; }
.aj-desk__form { padding: 28px; display: grid; gap: 24px; max-inline-size: 900px; }
.aj-desk__part { display: grid; gap: 14px; }
.aj-desk__part legend { display: flex; align-items: center; gap: 12px; margin-block-end: 14px; font-family: var(--aj-display); font-size: 1.2rem; text-transform: uppercase; }
.aj-desk__part legend b { display: inline-grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 50%; background: var(--aj-go); color: var(--aj-on-go); }
.aj-desk__q { display: grid; gap: 14px; }
@media (min-width: 640px) { .aj-desk__q { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aj-desk__drive { grid-column: 1 / -1; } }
.aj-desk__drive { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aj-desk__drive > span { inline-size: 100%; font-size: .82rem; font-weight: 600; color: var(--aj-dim); }
.aj-desk__drive label { position: relative; cursor: pointer; }
.aj-desk__drive input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.aj-desk__drive label span { display: inline-block; padding: 7px 16px; border-radius: 999px; background: var(--aj-rubber); }
.aj-desk__drive input:checked + span { background: var(--aj-go); color: var(--aj-on-go); }
.aj-desk__you { display: grid; gap: 12px; }
@media (min-width: 640px) { .aj-desk__you { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.aj-desk__body { margin-block-start: 30px; max-inline-size: 760px; color: var(--aj-dim); }

/* ---------------------------------------------------------------- foot */

.aj-foot { position: relative; padding-block: 60px 26px; margin-block-start: 30px; background: linear-gradient(180deg, var(--aj-rubber), var(--aj-road)); }
.aj-foot__line { position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 4px; background: repeating-linear-gradient(90deg, var(--aj-go) 0 46px, transparent 46px 80px); }
.aj-foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-block-end: 36px; }
.aj-foot__id { display: grid; gap: 8px; }
.aj-foot__id strong { font-family: var(--aj-display); font-weight: 700; font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1; text-transform: uppercase; }
.aj-foot__id img { max-block-size: 64px; inline-size: auto; }
.aj-foot__id span { color: var(--aj-dim); max-inline-size: 46ch; }
.aj-foot__tread { inline-size: 180px; block-size: 46px; border-radius: 999px; background: repeating-linear-gradient(115deg, var(--aj-rubber-hi) 0 10px, var(--aj-road) 10px 20px); box-shadow: inset 0 0 0 2px var(--aj-line); }
.aj-foot__cols { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.aj-foot__cols > div { display: grid; gap: 6px; align-content: start; }
.aj-foot__title { font-family: var(--aj-display); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--aj-go); margin-block-end: 6px; }
.aj-foot__cols a { text-decoration: none; color: color-mix(in srgb, var(--aj-ink) 80%, transparent); }
.aj-foot__cols a:hover { color: var(--aj-ink); }
.aj-foot__shoulder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; margin-block-start: 40px; padding-block-start: 18px; border-block-start: 1px solid var(--aj-line); color: var(--aj-dim); font-size: .85rem; }
.aj-foot__langs { display: flex; gap: 6px; }
.aj-foot__langs a { padding: 3px 12px; border-radius: 999px; background: var(--aj-slab); text-decoration: none; }
.aj-foot__langs a.is-on { background: var(--aj-go); color: var(--aj-on-go); }

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
    .aj-body *, .aj-body *::before, .aj-body *::after { transition: none !important; animation: none !important; }
    .aj-roll__stage { position: static !important; }
    .aj-roll__size { min-block-size: 0 !important; opacity: 1 !important; }
    .aj-roll__wheel { transform: none !important; }
}