/* ==========================================================
   PROTEKTOR — WHITE PREMIUM + BLUE ACCENT
   ----------------------------------------------------------
   app.css is never edited. It still carries the whole dark
   ".dp-*" homepage from the previous direction, so this design
   uses its own "pk-*" namespace: base.php and home.php were
   renamed to match, app.css's dp layer no longer matches
   anything, and every rule below is plain CSS — no override
   layer, no !important war.

   Ground is white. Ink is graphite. Blue appears only on an
   action, a selected state or a link.

   Reading order
     0  type + tokens
     1  page shell            (retint app.css's warm-paper tokens)
     2  header                (site-wide)
     3  hero
     4  hero visual
     5  finder                ← the product
     6  trust row
     7  categories
     8  the page below the fold
     9  responsive
    10  reduced motion
   ========================================================== */


/* ==========================================================
   0 · TYPE + TOKENS
   ----------------------------------------------------------
   app.css sets every heading in --fd = "Archivo", which has no
   Georgian coverage at all: every Georgian headline fell through
   to the OS fallback (DejaVu / Sylfaen). That is the blunt
   "newspaper" look. Self-hosted Noto Sans Georgian VARIABLE
   covers it properly, and adding it to --fd itself fixes the
   headings in app.css's own components too, without touching
   that file.
   ========================================================== */

@font-face{
  font-family:'PROTEKTOR Geo';
  src:url(../fonts/nsg-var-georgian.woff2) format('woff2');
  font-weight:100 900;
  font-stretch:62.5% 100%;
  font-display:swap;
  unicode-range:U+0589,U+10A0-10FF,U+1C90-1CBA,U+1CBD-1CBF,U+205A,U+2D00-2D2F,U+2E31;
}

@font-face{
  font-family:'PROTEKTOR Geo';
  src:url(../fonts/nsg-var-latin.woff2) format('woff2');
  font-weight:100 900;
  font-stretch:62.5% 100%;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212;
}

:root{
  /* Archivo leads for Latin and numerals; Georgian resolves to the
     variable Noto. Both carry a width axis, so app.css's existing
     font-variation-settings:"wdth" still behave. */
  --fd:"Archivo","PROTEKTOR Geo",system-ui,sans-serif;
  --pk-font:"Archivo","PROTEKTOR Geo",system-ui,sans-serif;

  /* ground */
  --pk-bg:#FFFFFF;
  --pk-bg-2:#F8FAFC;
  --pk-bg-3:#F1F5F9;

  /* ink */
  --pk-ink:#111827;
  --pk-ink-2:#475467;
  --pk-ink-3:#667085;
  --pk-ink-4:#98A2B3;

  /* lines */
  --pk-line:#E5E7EB;
  --pk-line-2:#D5DAE1;

  /* the one accent */
  --pk-blue:#1B54F0;
  --pk-blue-d:#1240C9;
  --pk-blue-tint:#EFF6FF;
  --pk-blue-line:#BFDBFE;

  --pk-sh-1:0 1px 2px rgba(16,24,40,.05);
  --pk-sh-2:0 1px 3px rgba(16,24,40,.05), 0 10px 28px -14px rgba(16,24,40,.20);
  --pk-sh-3:0 2px 4px rgba(16,24,40,.04), 0 22px 48px -26px rgba(16,24,40,.28);

  --pk-e:cubic-bezier(.22,.72,.28,1);
  --pk-e2:cubic-bezier(.22,.61,.36,1);   /* the stage's long transition */
  --pk-nav:66px;
}

/* app.css reserves body{padding-top:118px} for a sticky ".nv" bar that
   base.php stopped rendering. With the header in flow that reserve is a
   dead band above every page. */
body{
  padding-top:0;
}


/* ==========================================================
   1 · PAGE SHELL
   ----------------------------------------------------------
   The homepage re-points app.css's own tokens instead of
   re-styling its components one by one: rails, product cards,
   size tiles and brand cells then render themselves white.
   ========================================================== */

body.page-home{
  --paper:#FFFFFF;
  --paper-2:#F8FAFC;
  --paper-3:#F1F5F9;
  --card:#FFFFFF;

  --ink:  #111827;
  --ink-2:#475467;
  --ink-3:#667085;
  --ink-4:#98A2B3;

  --rule:  #E5E7EB;
  --rule-2:#D5DAE1;

  --hv:     #1B54F0;
  --hv-deep:#1240C9;

  --asphalt:  #101828;
  --asphalt-2:#1D2939;
  --asphalt-3:#344054;

  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-s: 0 2px 6px -2px rgba(16,24,40,.10), 0 1px 2px rgba(16,24,40,.05);
  --shadow-m: 0 10px 24px -14px rgba(16,24,40,.20), 0 2px 6px -3px rgba(16,24,40,.07);
  --shadow-l: 0 26px 50px -28px rgba(16,24,40,.28), 0 6px 14px -10px rgba(16,24,40,.10);

  background:#FFFFFF;
  color:var(--pk-ink);
}

/* the warm tread texture app.css lays over every page: off, here.
   The brief is explicit — no noise, no background markings. */
body.page-home::before{
  display:none;
}


/* ==========================================================
   2 · HEADER  (site-wide)
   ----------------------------------------------------------
   White, compact, one blue action. Nothing decorative.
   ========================================================== */

.pk-nav{
  position:sticky;
  top:0;
  z-index:100;

  height:var(--pk-nav);

  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);

  border-bottom:1px solid var(--pk-line);
  color:var(--pk-ink);
}

.pk-nav-in{
  max-width:var(--wrap,1280px);
  height:100%;
  margin:0 auto;
  padding:0 var(--gut,24px);

  display:flex;
  align-items:center;
}

.pk-logo{
  display:flex;
  align-items:center;
  gap:9px;

  color:var(--pk-ink);
}

.pk-logo-mark{
  width:22px;
  height:22px;
  flex:0 0 22px;
  color:var(--pk-ink);
}

.pk-logo-txt{
  display:inline-flex;
  align-items:baseline;

  font-family:var(--pk-font);
  font-size:18px;
  font-weight:760;
  letter-spacing:-.028em;
  line-height:1;
}

/* Saburavebi.com — the name is the domain, so the mark says so.
   The old wordmark spelt PROTEKTOR with its E drawn as a blue bar;
   a mixed-case name has no letter to give up, so the accent moves
   to the suffix, which is the half that carries the address. */
.pk-logo-txt i{
  font-style:normal;
  font-weight:580;

  color:var(--pk-blue);
}

.pk-links{
  margin-left:clamp(26px,4vw,58px);

  display:flex;
  align-items:center;
  gap:2px;
}

.pk-links a{
  position:relative;

  padding:8px 13px;
  border-radius:9px;

  color:var(--pk-ink-2);

  font-size:14px;
  font-weight:550;

  transition:color .18s var(--pk-e), background .18s var(--pk-e);
}

.pk-links a:hover{
  background:var(--pk-bg-3);
  color:var(--pk-ink);
}

.pk-links a.on{
  color:var(--pk-blue-d);
  font-weight:640;
}

.pk-actions{
  margin-left:auto;

  display:flex;
  align-items:center;
  gap:2px;
}

.pk-icon{
  position:relative;

  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  border-radius:10px;
  color:var(--pk-ink-2);

  transition:background .18s var(--pk-e), color .18s var(--pk-e);
}

.pk-icon:hover{
  background:var(--pk-bg-3);
  color:var(--pk-ink);
}

.pk-badge{
  position:absolute;
  top:5px;
  right:5px;

  min-width:16px;
  height:16px;
  padding:0 4px;

  border-radius:8px;

  background:var(--pk-blue);
  color:#fff;

  font:700 10px/16px var(--pk-font);
  text-align:center;
}

.pk-sell{
  margin-left:12px;

  height:40px;
  padding:0 18px;

  display:inline-flex;
  align-items:center;
  gap:7px;

  border-radius:10px;

  background:var(--pk-blue);
  color:#fff;

  font-size:13.5px;
  font-weight:650;
  white-space:nowrap;

  transition:background .18s var(--pk-e);
}

.pk-sell:hover{
  background:var(--pk-blue-d);
}

.pk-sell-sm{
  display:none;
}

.pk-sell:focus-visible,
.pk-icon:focus-visible,
.pk-links a:focus-visible{
  outline:2px solid var(--pk-blue);
  outline-offset:2px;
}


/* ==========================================================
   3 · HERO STAGE — the full-width slider
   ----------------------------------------------------------
   Three scenes. Each one gets its own layout, its own type
   scale, its own motion axis and its own ground tone, so the
   slider reads as a change of scene rather than a change of
   banner. Everything is set in type and hairlines — there is
   not one image in the hero.
   ========================================================== */

.pk-stage{
  position:relative;
  overflow:hidden;

  /* vertical scrolling stays with the browser, horizontal drags come
     to the slider — without this the gesture is cancelled mid-swipe */
  touch-action:pan-y;

  background:#FFFFFF;
  border-bottom:1px solid var(--pk-line);

  /* the ground shifts a shade with the scene; white still rules */
  transition:background-color .7s var(--pk-e2);
}

.pk-stage[data-i="1"]{ background:#F8FAFC }
.pk-stage[data-i="2"]{ background:#F6F8FC }

.pk-stage-in{
  max-width:var(--wrap,1280px);
  margin:0 auto;
  padding:clamp(22px,2.2vw,32px) var(--gut,24px) clamp(14px,1.4vw,18px);

  display:flex;
  flex-direction:column;
}

.pk-scenes{
  position:relative;
  flex:1;
  min-height:clamp(322px,26vw,368px);
}

.pk-scene{
  position:absolute;
  inset:0;

  display:grid;
  align-content:center;

  visibility:hidden;
  pointer-events:none;
}

.pk-scene.is-on{
  visibility:visible;
  pointer-events:auto;
}

.pk-scene.is-out{
  visibility:visible;                /* it is still leaving the frame */
}


/* ---------- the layered transition ----------
   copy lifts out upward, the graphic layer leaves on its own axis,
   the next scene's lines arrive one behind the other ---------- */

.pk-el{
  opacity:0;
  transform:translateY(26px);

  transition:opacity .34s var(--pk-e2), transform .52s var(--pk-e2);
}

.pk-scene.is-on .pk-el{
  opacity:1;
  transform:none;
  transition-delay:var(--d,0s);
}

.pk-scene.is-out .pk-el{
  opacity:0;
  transform:translateY(-24px);

  transition-duration:.24s,.32s;
  transition-delay:0s;
}

.pk-art{
  opacity:0;
  transform:translate(var(--ax,0px), var(--ay,0px));

  transition:opacity .38s var(--pk-e2), transform .58s var(--pk-e2);
}

.pk-scene.is-on .pk-art{
  opacity:1;
  transform:none;
  transition-delay:.06s;
}

.pk-scene.is-out .pk-art{
  opacity:0;
  transform:translate(var(--ox,0px), var(--oy,0px));

  transition-duration:.26s,.34s;
  transition-delay:0s;
}


/* ---------- shared type ---------- */

.pk-brow{
  display:inline-flex;
  align-items:center;
  gap:10px;

  color:var(--pk-ink-3);

  font-family:var(--pk-font);
  font-size:11.5px;
  font-weight:640;
  line-height:1;
  letter-spacing:.155em;
}

.pk-brow::before{
  content:"";

  width:22px;
  height:2px;

  border-radius:2px;
  background:var(--pk-blue);
}

.pk-h{
  margin:20px 0 0;

  color:var(--pk-ink);

  font-family:var(--pk-font);
  font-weight:720;
  line-height:1.1;
  letter-spacing:-.024em;
}

.pk-h span{
  display:block;
}

.pk-h em{
  font-style:normal;
  color:var(--pk-blue);
}

.pk-scene p{
  margin:18px 0 0;
  max-width:46ch;

  color:var(--pk-ink-3);

  font-size:16px;
  line-height:1.65;
}

.pk-acts{
  margin-top:26px;

  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:11px;
}

.pk-b1{
  height:50px;
  padding:0 24px;

  display:inline-flex;
  align-items:center;
  gap:10px;

  border:0;
  border-radius:12px;

  background:var(--pk-blue);
  color:#fff;

  font-family:inherit;
  font-size:15.5px;
  font-weight:660;

  cursor:pointer;

  transition:background .18s var(--pk-e);
}

.pk-b1 svg{
  transition:transform .22s var(--pk-e);
}

.pk-b1:hover{ background:var(--pk-blue-d) }
.pk-b1:hover svg{ transform:translateX(3px) }

.pk-b2{
  height:50px;
  padding:0 22px;

  display:inline-flex;
  align-items:center;

  border:1px solid var(--pk-line-2);
  border-radius:12px;

  background:#fff;
  color:var(--pk-ink);

  font-size:15px;
  font-weight:600;

  transition:border-color .18s var(--pk-e), background .18s var(--pk-e);
}

.pk-b2:hover{
  border-color:var(--pk-ink-4);
  background:var(--pk-bg-2);
}

.pk-b1:focus-visible,
.pk-b2:focus-visible{
  outline:2px solid var(--pk-blue);
  outline-offset:3px;
}


/* ==========================================================
   SCENE 01 — copy left, the size read as a spec sheet
   ========================================================== */

.pk-scene-1{
  grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  align-items:center;
  gap:clamp(30px,4vw,66px);

  --ax:64px;
  --ox:-46px;
}

.pk-scene-1 .pk-h{
  font-size:clamp(31px,3.4vw,49px);
}

.pk-art-spec{
  display:flex;
  flex-direction:column;
}

.pk-spec{
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:20px;

  padding:2px 0;
  border-bottom:1px solid var(--pk-line);
}

.pk-spec:first-child{
  border-top:1px solid var(--pk-line);
}

.pk-spec i{
  font-style:normal;
  color:var(--pk-ink-4);

  font-family:var(--pk-font);
  font-size:10.5px;
  font-weight:640;
  letter-spacing:.22em;
}

.pk-spec b{
  font-family:var(--pk-font);
  font-size:clamp(54px,7.2vw,110px);
  font-weight:750;
  line-height:1.02;
  letter-spacing:-.045em;
  font-feature-settings:"tnum" 1;
}

/* two treatments in one composition: drawn, then filled */
.pk-out{
  color:transparent;
  -webkit-text-stroke:1.6px #D2DBE7;
}

@supports not (-webkit-text-stroke:1px #000){
  .pk-out{ color:#E7EDF5 }
}

.pk-solid{
  color:#DCE7FA;
}


/* ==========================================================
   SCENE 02 — mirrored: the vehicle set as display type
   ========================================================== */

.pk-scene-2{
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:center;
  gap:clamp(24px,3vw,50px);

  --ax:-70px;
  --ox:52px;
}

.pk-scene-2 .pk-h{
  font-size:clamp(30px,3.6vw,52px);
}

.pk-art-car{
  --model:clamp(42px,5.6vw,84px);

  display:flex;
  flex-direction:column;
  align-items:flex-start;

  font-family:var(--pk-font);
}

.pk-make{
  margin-left:-.055em;              /* optical: pull the B off the edge */

  font-size:clamp(64px,11.8vw,178px);
  font-weight:760;
  line-height:.8;
  letter-spacing:-.055em;
  color:#E7EDF6;
}

.pk-model{
  margin:-.1em 0 0 calc(var(--model) * 1.35);

  font-size:var(--model);
  font-weight:730;
  line-height:1;
  letter-spacing:-.042em;
  color:var(--pk-ink);
}

.pk-year{
  margin:14px 0 0 calc(var(--model) * 1.35);

  display:inline-flex;
  align-items:center;
  gap:11px;

  font-size:12.5px;
  font-weight:660;
  letter-spacing:.24em;
  color:var(--pk-blue);
}

.pk-year i{
  width:34px;
  height:2px;

  border-radius:2px;
  background:var(--pk-blue);
}


/* ==========================================================
   SCENE 03 — the grid breaks: a full-width band under the copy
   ========================================================== */

.pk-scene-3{
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  grid-template-rows:auto auto;
  align-items:end;
  gap:clamp(26px,3.2vw,42px) clamp(30px,4vw,62px);

  --ay:48px;
  --oy:-38px;
}

.pk-scene-3 .pk-h{
  font-size:clamp(33px,4.2vw,60px);
  line-height:1.07;
}

.pk-scene-3 .pk-scene-side{
  padding-bottom:4px;
}

.pk-scene-3 .pk-scene-side p{
  margin-top:0;
}

.pk-art-seasons{
  position:relative;
  grid-column:1 / -1;

  display:grid;
  grid-template-columns:repeat(3,1fr);

  border-top:1px solid var(--pk-line);
}

/* one blue segment on the rule — the whole accent budget of the scene */
.pk-art-seasons::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;

  width:72px;
  height:2px;

  background:var(--pk-blue);
}

.pk-ss{
  display:flex;
  align-items:center;
  gap:16px;

  padding:20px 22px 0 0;
  border-right:1px solid var(--pk-line);
}

.pk-ss + .pk-ss{
  padding-left:26px;
}

.pk-ss:last-child{
  border-right:0;
}

.pk-ss svg{
  width:26px;
  height:26px;
  flex:0 0 26px;

  color:var(--pk-ink-4);
}

.pk-ss:last-child svg{
  color:var(--pk-blue);
}

.pk-ss b{
  font-family:var(--pk-font);
  font-size:clamp(23px,2.9vw,44px);
  font-weight:730;
  line-height:1;
  letter-spacing:-.025em;
  color:#C8D3E1;
}


/* ==========================================================
   NAVIGATION — part of the composition
   ========================================================== */

.pk-stage-nav{
  margin-top:clamp(20px,2.4vw,32px);
  align-self:flex-end;

  display:flex;
  align-items:center;
  gap:clamp(14px,1.8vw,24px);
}

.pk-stage-count{
  display:inline-flex;
  align-items:baseline;
  gap:5px;

  font-family:var(--pk-font);
  font-feature-settings:"tnum" 1;
}

.pk-stage-count b{
  font-size:16px;
  font-weight:750;
  color:var(--pk-blue-d);
}

.pk-stage-count i{
  font-style:normal;
  font-size:12px;
  color:var(--pk-ink-4);
}

.pk-stage-count span{
  font-size:12px;
  font-weight:600;
  color:var(--pk-ink-4);
}

.pk-bars{
  display:flex;
  gap:8px;
}

.pk-bar{
  position:relative;
  overflow:hidden;

  width:clamp(42px,4.8vw,70px);
  height:3px;
  padding:0;

  border:0;
  border-radius:3px;

  background:var(--pk-line);
  cursor:pointer;
}

/* a 3px bar is not a tap target — this is */
.pk-bar::before{
  content:"";
  position:absolute;
  inset:-13px 0;
}

.pk-bar i{
  position:absolute;
  inset:0;

  border-radius:3px;
  background:var(--pk-blue);

  transform:scaleX(0);
  transform-origin:left;
}

/* the fill IS the autoplay clock */
.pk-bar.is-on i{
  animation:pkRun 4.2s linear forwards;
}

@keyframes pkRun{
  from{ transform:scaleX(0) }
  to  { transform:scaleX(1) }
}

.pk-stage.is-paused .pk-bar.is-on i{
  animation-play-state:paused;
}

.pk-stage.is-manual .pk-bar.is-on i{
  animation:none;
  transform:scaleX(1);
}

.pk-stage-next{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border:1px solid var(--pk-line-2);
  border-radius:50%;

  background:#fff;
  color:var(--pk-ink-2);

  cursor:pointer;

  transition:background .18s var(--pk-e), border-color .18s var(--pk-e),
             color .18s var(--pk-e);
}

.pk-stage-next:hover{
  background:var(--pk-blue);
  border-color:var(--pk-blue);
  color:#fff;
}

.pk-bar:focus-visible,
.pk-stage-next:focus-visible{
  outline:2px solid var(--pk-blue);
  outline-offset:4px;
}


/* ==========================================================
   4 · THE FINDER BLOCK'S OWN BAND
   ========================================================== */

.pk-hero-in,
.pk-cats-in{
  max-width:var(--wrap,1280px);
  margin:0 auto;
  padding:0 var(--gut,24px);
}


/* ==========================================================
   5 · FINDER — the homepage product
   ----------------------------------------------------------
   Two ways in, both visible at once; big targets; blue only on
   what is chosen or what submits.
   ========================================================== */


/* ---------- tabs ---------- */

/* a segmented control, not a full-width band: two tabs sized to their
   own content read as a choice, a stretched pair reads as a header */


/* ---------- panes ---------- */


/* ---------- fields ---------- */


/* ---------- primary CTA ---------- */


/* ---------- season ---------- */


/* ---------- notices + car stepper ---------- */


/* ==========================================================
   6 · TRUST ROW
   ========================================================== */


/* ==========================================================
   7 · CATEGORIES
   ----------------------------------------------------------
   White surround, dark photographic cards. That contrast is
   what keeps a white page from reading as empty.

   The cards used to say only what a season is called. Each one
   now carries the two facts a buyer actually wants — how many
   are in stock and what they start at — plus the temperature
   the tyre is built for, which is the reason the season exists.
   The season's own mark sits behind it as a watermark.
   ========================================================== */

.pk-cats{
  padding:clamp(30px,3.2vw,54px) 0 0;
  background:#fff;
  color:var(--pk-ink);
}

.pk-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;

  color:var(--pk-ink-3);

  font-family:var(--pk-font);
  font-size:11.5px;
  font-weight:660;
  line-height:1;
  letter-spacing:.15em;
}

.pk-eyebrow::before{
  content:"";

  width:16px;
  height:3px;

  border-radius:2px;
  background:var(--pk-blue);
}

.pk-cats-head-row{
  margin-top:18px;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(28px,5vw,80px);
}

.pk-cats-head-row h2{
  margin:0;

  color:var(--pk-ink);

  font-family:var(--pk-font);
  font-size:clamp(25px,2.5vw,38px);
  font-weight:720;
  line-height:1.14;
  letter-spacing:-.021em;
}

.pk-cats-head-row p{
  margin:0 0 4px;
  max-width:420px;

  color:var(--pk-ink-3);

  font-size:14.5px;
  line-height:1.65;
}

.pk-cat-grid{
  margin-top:clamp(22px,2.4vw,34px);

  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:16px;
}


/* ---------- the card ---------- */

.pk-cat{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  display:block;
  height:clamp(360px,25vw,430px);

  border-radius:24px;

  background:var(--pk-ink);
  box-shadow:var(--pk-sh-2), inset 0 0 0 1px rgba(255,255,255,.08);

  transition:box-shadow .38s var(--pk-e), transform .38s var(--pk-e);
}

.pk-cat:hover{
  transform:translateY(-5px);
  box-shadow:0 34px 60px -34px rgba(8,14,22,.62), inset 0 0 0 1px rgba(255,255,255,.16);
}

.pk-cat:focus-visible{
  outline:2px solid var(--pk-blue);
  outline-offset:3px;
}


/* ---------- the photograph ---------- */

.pk-cat-media{
  position:absolute;
  z-index:0;
  inset:0;
  display:block;
}

.pk-cat-media img{
  width:100%;
  height:100%;

  display:block;
  object-fit:cover;

  transform:translateY(var(--pk-img-y, 0)) scale(var(--pk-img-s, 1.01));
  transition:transform 1.1s var(--pk-e), filter .5s var(--pk-e);
}

.pk-cat:hover .pk-cat-media img{
  transform:translateY(var(--pk-img-y, 0)) scale(calc(var(--pk-img-s, 1.01) + .06));
  filter:saturate(1.06) contrast(1.03);
}

/* two layers: a soft fall from the top, then a deep floor that the
   type can sit on without a box around it */
.pk-cat-media::after{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(180deg,
      rgba(6,10,16,.28) 0%,
      rgba(6,10,16,.05) 26%,
      rgba(6,10,16,0)   46%),
    linear-gradient(180deg,
      rgba(6,10,16,0)   44%,
      rgba(6,10,16,.54) 74%,
      rgba(6,10,16,.92) 100%);

  transition:opacity .4s var(--pk-e);
}

/* the accent the season is filed under, pooled at the very bottom */
.pk-cat::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:auto 0 0;

  height:42%;

  background:linear-gradient(180deg, transparent, var(--pk-cat-tint, rgba(11,70,87,.55)));
  opacity:.42;

  transition:opacity .4s var(--pk-e);
  pointer-events:none;
}

.pk-cat:hover::after{ opacity:.62; }

.pk-cat--allseason{ --pk-img-y:-17%; --pk-img-s:1.52; }
.pk-cat--allseason .pk-cat-media img{ filter:brightness(1.12) saturate(1.06); }
.pk-cat--allseason:hover .pk-cat-media img{ filter:brightness(1.16) saturate(1.12) contrast(1.03); }

.pk-cat--summer   { --pk-cat-tint:rgba(11,70,87,.50); }
.pk-cat--winter   { --pk-cat-tint:rgba(16,54,78,.55); }
.pk-cat--allseason{ --pk-cat-tint:rgba(13,62,72,.52); }


/* ---------- the watermark ---------- */

.pk-cat-mark{
  position:absolute;
  z-index:1;
  top:20px;
  right:18px;

  display:block;
  width:clamp(74px,7vw,104px);
  height:clamp(74px,7vw,104px);

  color:#fff;
  opacity:.13;

  transition:opacity .45s var(--pk-e), transform .8s var(--pk-e);
  pointer-events:none;
}

.pk-cat-mark svg{ display:block; width:100%; height:100%; }

.pk-cat:hover .pk-cat-mark{
  opacity:.30;
  transform:rotate(26deg) scale(1.06);
}

.pk-cat--summer:hover .pk-cat-mark{ transform:rotate(45deg) scale(1.08); }


/* ---------- the type ---------- */

.pk-cat-body{
  position:relative;
  z-index:2;

  height:100%;
  padding:24px 26px 26px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.pk-cat-top{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}

.pk-cat-label{
  padding:6px 11px;

  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;

  background:rgba(255,255,255,.11);
  color:rgba(255,255,255,.94);

  font-family:var(--pk-font);
  font-size:9.5px;
  font-weight:700;
  line-height:1;
  letter-spacing:.16em;

  backdrop-filter:blur(8px);

  transition:background .3s var(--pk-e), border-color .3s var(--pk-e);
}

.pk-cat.is-lead .pk-cat-label{
  border-color:transparent;
  background:var(--pk-blue);
  color:#fff;
}

.pk-cat:hover .pk-cat-label{ background:rgba(255,255,255,.2); }
.pk-cat.is-lead:hover .pk-cat-label{ background:var(--pk-blue); }

/* the temperature the compound is built for — the actual reason the
   seasons are different products */
.pk-cat-temp{
  padding:5px 10px 6px;

  border-radius:999px;
  background:rgba(6,10,16,.42);
  color:rgba(255,255,255,.80);

  font-family:var(--pk-font);
  font-size:10.5px;
  font-weight:640;
  line-height:1;
  font-feature-settings:"tnum" 1;

  backdrop-filter:blur(8px);
}

.pk-cat-txt{ display:block; }

.pk-cat-body h3{
  margin:0;

  color:#fff;

  font-family:var(--pk-font);
  font-size:23px;
  font-weight:700;
  line-height:1.16;
  letter-spacing:-.022em;
}

.pk-cat.is-lead .pk-cat-body h3{ font-size:29px; }

.pk-cat-body p{
  margin:9px 0 0;
  max-width:310px;

  color:rgba(255,255,255,.74);

  font-size:13.5px;
  line-height:1.6;
}


/* ---------- what is actually in stock ---------- */

.pk-cat-foot{
  margin-top:18px;
  padding-top:15px;

  display:flex;
  align-items:center;
  gap:14px;

  border-top:1px solid rgba(255,255,255,.16);

  transition:border-color .3s var(--pk-e);
}

.pk-cat:hover .pk-cat-foot{ border-color:rgba(255,255,255,.30); }

.pk-cat-fig{
  min-width:0;

  color:rgba(255,255,255,.68);
  font-size:12.5px;
  line-height:1.3;
}

.pk-cat-fig b{
  font-family:var(--pk-font);
  font-size:17px;
  font-weight:800;
  letter-spacing:-.03em;
  font-feature-settings:"tnum" 1;
  color:#fff;
}

.pk-cat-fig i{
  display:block;
  margin-top:2px;

  font-style:normal;
  font-family:var(--pk-font);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:-.015em;
  font-feature-settings:"tnum" 1;
  color:rgba(255,255,255,.55);
}

.pk-cat-go{
  margin-left:auto;
  flex-shrink:0;

  display:grid;
  place-items:center;

  width:42px;
  height:42px;

  border:1px solid rgba(255,255,255,.26);
  border-radius:50%;

  color:#fff;

  transition:background .28s var(--pk-e), border-color .28s var(--pk-e),
             transform .28s var(--pk-e);
}

.pk-cat-go svg{ transition:transform .28s var(--pk-e); }

.pk-cat:hover .pk-cat-go{
  background:var(--pk-blue);
  border-color:var(--pk-blue);
  transform:scale(1.06);
}

.pk-cat:hover .pk-cat-go svg{ transform:translateX(3px); }


@media(prefers-reduced-motion:reduce){
  .pk-cat, .pk-cat-media img, .pk-cat-mark, .pk-cat-go, .pk-cat-go svg{ transition:none; }
  .pk-cat:hover{ transform:none; }
  .pk-cat:hover .pk-cat-media img{ transform:translateY(var(--pk-img-y, 0)) scale(var(--pk-img-s, 1.01)); }
  .pk-cat:hover .pk-cat-mark{ transform:none; }
  .pk-cat:hover .pk-cat-go{ transform:none; }
}


/* ==========================================================
   8 · THE PAGE BELOW THE FOLD
   ----------------------------------------------------------
   app.css's components already follow the tokens retinted in
   §1. What is left are the places where it used the accent as
   a BACKGROUND behind dark text — lime allowed that, blue does
   not — plus the last of its warm decoration.
   ========================================================== */

/* app.css paints the whole lower page with the old dark ground and
   white section headings — put it back on paper */
body.page-home > main > .wrap,
body.page-home .msec{
  background:transparent;
  color:var(--pk-ink);
}

body.page-home .mh h2{
  color:var(--pk-ink);
}

body.page-home .mh p{
  color:var(--pk-ink-3);
}

body.page-home ::selection{
  background:var(--pk-blue);
  color:#fff;
}

/* accent-on-dark and accent-as-fill both need white text now */
body.page-home .tag.new,
body.page-home .tag.vip,
body.page-home .tc-tags .tag.new,
body.page-home .tc-tags .tag.vip,
body.page-home .dchip.new,
body.page-home .dchip.vip,
body.page-home .sizetile:hover .st-size .r,
body.page-home .bnav a .bdg,
body.page-home .btn-hv{
  color:#fff;
}

/* the tread that used to roll across a size tile on hover */
body.page-home .sizetile::before{
  display:none;
}

/* section links read as links */
body.page-home .mh .more{
  color:var(--pk-blue);
  border-bottom-color:var(--pk-blue);
}

body.page-home .mh .more:hover{
  color:var(--pk-blue-d);
}

/* the one banner CTA and the by-car call become the same blue button */
body.page-home .bycar .btn-1{
  background:var(--pk-blue);
  color:#fff;
}

body.page-home .bycar .btn-1:hover{
  background:var(--pk-blue-d);
}

body.page-home .bycar{
  border:1px solid var(--pk-line);
}

/* a tinted band, not a warm one */
body.page-home .band{
  background:var(--pk-bg-2);
  border-top:1px solid var(--pk-line);
  border-bottom:1px solid var(--pk-line);
}

/* ---------- editorial banners, now typographic ----------
   home.php no longer feeds these the supplier promo artwork, so what
   is left is a graphite panel: one headline, one action, no burnt-in
   branding to fight and no yellow to remove. */

body.page-home .eb{
  min-height:280px;
  box-shadow:none;
}

body.page-home .eb--winter{
  background:linear-gradient(115deg,#08151C 0%,#0F2530 58%,#153B4A 100%);
}

body.page-home .eb--perf{
  background:linear-gradient(115deg,#0D1016 0%,#171C25 58%,#232B39 100%);
}

body.page-home .eb--suv{
  background:linear-gradient(115deg,#101828 0%,#1D2939 60%,#2C3D55 100%);
}

/* the veil has no photograph to sit on any more — it becomes the one
   soft light in the panel, kept low so it never reads as a glow */
body.page-home .eb.left .veil2,
body.page-home .eb--winter .veil2,
body.page-home .eb--perf .veil2,
body.page-home .eb--suv .veil2{
  background:radial-gradient(58% 110% at 86% 42%,
    rgba(27,84,240,.15), transparent 64%);
}

body.page-home .eb--perf .eb-kick span,
body.page-home .eb--suv  .eb-kick span,
body.page-home .eb--winter .eb-kick span{
  color:#8FD2E4;
  letter-spacing:.2em;
}

body.page-home .eb--perf .eb-kick i,
body.page-home .eb--suv  .eb-kick i,
body.page-home .eb--winter .eb-kick i{
  background:#8FD2E4;
  width:22px;
  height:2px;
}

body.page-home .eb--perf::after,
body.page-home .eb--suv::after,
body.page-home .eb--winter::after{
  display:none;               /* speed streaks, frost lines, tread band */
}

body.page-home .eb .eb-cta,
body.page-home .eb--winter .eb-cta,
body.page-home .eb--perf .eb-cta,
body.page-home .eb--suv .eb-cta{
  background:#fff;
  color:var(--pk-ink);
}

/* the product photo well was mixed warm by hand, not by token */
body.page-home .pc-ph{
  background:linear-gradient(180deg,#FDFEFE,var(--pk-bg-2));
}

body.page-home .brandcell:hover{
  background:var(--pk-bg-2);
}

/* footer: graphite, with a legible blue on dark */
body.page-home .ftr a:hover{
  color:#7FD3E6;
}

body.page-home .nv-sig{
  background:var(--pk-blue);
  box-shadow:0 0 0 3px rgba(11,70,87,.28);
}


/* ==========================================================
   9 · RESPONSIVE
   ========================================================== */

/* a short laptop screen: give the stage less room so the finder is
   still on the fold underneath it */
@media(min-width:951px) and (max-height:820px){

  .pk-scenes{
    min-height:356px;
  }

  .pk-stage-in{
    padding-top:20px;
  }
}

/* laptop */
@media(max-width:1180px){

  .pk-scenes{
    min-height:316px;
  }

  .pk-scene p{
    font-size:15px;
    max-width:42ch;
  }

  .pk-cat-grid{
    grid-template-columns:1fr 1fr;
  }

  .pk-cat.is-lead{
    grid-column:1 / -1;
    height:clamp(320px,30vw,380px);
  }

  .pk-cat{
    height:clamp(310px,34vw,380px);
  }
}


/* the nav links collapse; the finder takes the fold */
@media(max-width:950px){

  .pk-links{
    display:none;
  }

  /* every scene folds to one column: copy first, graphic under it */
  .pk-scene{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    align-content:start;
    align-items:start;
    gap:26px;
  }

  .pk-scene-2 .pk-art-car{
    order:2;
  }

  .pk-scene-3 .pk-scene-side{
    padding-bottom:0;
  }

  .pk-scenes{
    min-height:clamp(500px,62vw,552px);
  }

  .pk-scene p{
    max-width:56ch;
  }

  .pk-scene-1 .pk-h,
  .pk-scene-2 .pk-h{
    font-size:clamp(29px,4.3vw,42px);
  }

  .pk-scene-3 .pk-h{
    font-size:clamp(31px,4.8vw,46px);
  }

  .pk-spec b{
    font-size:clamp(46px,8vw,72px);
  }

  .pk-make{
    font-size:clamp(64px,13vw,116px);
  }

  .pk-model{
    font-size:clamp(40px,6.4vw,58px);
  }

  .pk-ss b{
    font-size:clamp(19px,3.2vw,28px);
  }
}


/* mobile — every target is thumb-sized, nothing scrolls sideways */
@media(max-width:700px){

  :root{
    --pk-nav:58px;
  }

  .pk-logo-txt{
    font-size:15.5px;
    letter-spacing:.13em;
  }

  .pk-logo-mark{
    width:20px;
    height:20px;
    flex:0 0 20px;
  }

  /* favourites and profile already live in the bottom bar on a phone;
     dropping them here leaves room for the labelled blue action */
  .pk-icon{
    display:none;
  }

  .pk-sell{
    margin-left:auto;
    height:38px;
    padding:0 14px;
    gap:6px;
    font-size:12.5px;
  }

  .pk-sell-lg{
    display:none;
  }

  .pk-sell-sm{
    display:inline;
  }

  /* ---- the stage on a phone: its own composition, not a shrink ---- */

  .pk-stage-in{
    padding:18px var(--gut,16px) 12px;
  }

  .pk-scenes{
    min-height:400px;
  }

  .pk-scene{
    gap:22px;
  }

  .pk-brow{
    font-size:10.5px;
    letter-spacing:.13em;
  }

  .pk-brow::before{
    width:16px;
  }

  .pk-h{
    margin-top:14px;
  }

  .pk-scene-1 .pk-h,
  .pk-scene-2 .pk-h{
    font-size:clamp(24px,6.6vw,32px);
  }

  .pk-scene-3 .pk-h{
    font-size:clamp(26px,7.4vw,36px);
  }

  .pk-scene p{
    margin-top:12px;
    font-size:14.5px;
    line-height:1.6;
  }

  .pk-acts{
    margin-top:18px;
    gap:9px;
  }

  .pk-b1,
  .pk-b2{
    height:46px;
    font-size:14.5px;
  }

  .pk-b1{ padding:0 20px }
  .pk-b2{ padding:0 18px }

  /* the spec sheet turns on its side so it costs one row, not three */
  .pk-art-spec{
    flex-direction:row;
    align-items:flex-end;
    gap:16px;

    padding-top:13px;
    border-top:1px solid var(--pk-line);
  }

  .pk-spec{
    flex-direction:column;
    align-items:flex-start;
    gap:1px;

    padding:0;
    border:0;
  }

  .pk-spec:first-child{
    border-top:0;
  }

  .pk-spec i{
    order:2;
    margin-right:0;
    font-size:9px;
    letter-spacing:.16em;
  }

  .pk-spec b{
    order:1;
    font-size:42px;
    letter-spacing:-.04em;
  }

  .pk-out{
    -webkit-text-stroke-width:1.2px;
  }

  .pk-make{
    font-size:clamp(58px,17vw,78px);
  }

  .pk-art-car{
    --model:clamp(34px,9.4vw,42px);
  }

  .pk-model{
    margin-left:calc(var(--model) * 1.1);
  }

  .pk-year{
    margin:11px 0 0 calc(var(--model) * 1.1);
    font-size:11px;
  }

  /* the season band keeps three cells; the cue stacks over the word */
  .pk-ss{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;

    padding:14px 10px 0 0;
  }

  .pk-ss + .pk-ss{
    padding-left:12px;
  }

  .pk-ss svg{
    width:21px;
    height:21px;
    flex:0 0 21px;
  }

  .pk-ss b{
    font-size:13px;
    letter-spacing:.02em;
  }

  .pk-art-seasons::before{
    width:48px;
  }

  .pk-stage-nav{
    margin-top:16px;
    align-self:stretch;
    justify-content:flex-end;
    gap:14px;
  }

  .pk-bar{
    width:38px;
  }

  .pk-stage-next{
    width:38px;
    height:38px;
  }

  .pk-cats{
    padding-top:44px;
  }

  .pk-cats-head-row{
    margin-top:14px;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }

  .pk-cats-head-row h2{
    font-size:clamp(23px,6.6vw,30px);
  }

  .pk-cats-head-row h2 br{
    display:none;
  }

  .pk-cats-head-row p{
    margin-bottom:0;
    max-width:none;
    font-size:13.5px;
  }

  .pk-cat-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .pk-cat,
  .pk-cat.is-lead{
    grid-column:auto;
    height:288px;
    border-radius:18px;
  }

  .pk-cat-body{
    padding:18px 20px 20px;
  }

  .pk-cat-body h3,
  .pk-cat.is-lead .pk-cat-body h3{
    font-size:21px;
  }

  .pk-cat-body p{ font-size:13px; }

  .pk-cat-mark{ top:16px; right:14px; width:66px; height:66px; }

  .pk-cat-foot{ margin-top:14px; padding-top:12px; }
  .pk-cat-go{ width:38px; height:38px; }
}


/* very narrow phones */
@media(max-width:380px){

  .pk-logo-txt{
    font-size:14.5px;
    letter-spacing:.1em;
  }

  .pk-sell{
    padding:0 11px;
    font-size:12px;
  }
}


/* ==========================================================
   10 · REDUCED MOTION
   ========================================================== */

@media(prefers-reduced-motion:reduce){

  .pk-cat,
  .pk-cat-media img,
  .pk-cat-go svg,
  .pk-cta svg,
  .pk-b1 svg,
  .pk-tab,
  .pk-finder,
  .pk-stage{
    transition:none;
  }

  .pk-cat:hover,
  .pk-cat:hover .pk-cat-media img,
  .pk-cta:hover svg,
  .pk-b1:hover svg,
  .pk-cat:hover .pk-cat-go svg{
    transform:none;
  }

  /* the stage still changes scene — it just does not animate or
     advance on its own */
  .pk-el,
  .pk-art{
    transition:none;
    transform:none;
  }

  .pk-scene.is-out .pk-el,
  .pk-scene.is-out .pk-art{
    opacity:0;
    transform:none;
  }

  .pk-bar.is-on i{
    animation:none;
    transform:scaleX(1);
  }
}


/* ==========================================================
   5 · TIRE FINDER
   ----------------------------------------------------------
   A configurator, not a card. The whole thing is one white
   surface with a hairline round it, and the only graphic in
   it is the size itself:

     225 / 70 R15        set large, as one specification
     სიგანე პროფილი დიამეტრი   named underneath, small

   Under a rule sit the three secondary choices and the one
   action. Nothing floats over anything else, nothing is
   illustrated, and the shadow budget for the entire section
   is one 1px lift on the panel plus one on the open menu.

   Rules the section keeps to:
     · ground is #FFFFFF; the only tint is a 3% blue wash
       behind the panel, and it should be hard to notice
     · borders do the work shadows used to: #E8ECF2
     · blue only on hover, on what is open, and on the CTA
     · type sizes: 12.5 labels · 14.5 secondary · 52 size
     · nothing animates on its own — every transition is a
       response to hover, focus or a choice

   Reading order
     a  band + panel
     b  mode tabs
     c  the size, as a specification
     d  season · category · quantity
     e  the CTA
     f  the menu
     g  under the panel
     h  narrow screens
     i  reduced motion
   ========================================================== */


/* ---------- a · band + panel ---------- */

.tf{
  position:relative;
  padding:clamp(14px,1.8vw,26px) 0 clamp(18px,2.2vw,32px);
  background:#fff;
}

/* the one piece of atmosphere in the section, and it is 3% */
.tf::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:radial-gradient(58% 130% at 50% 0%,
    rgba(27,84,240,.030) 0%,
    rgba(27,84,240,0)   68%);
}

.tf-in{
  position:relative;
  max-width:var(--wrap,1280px);
  margin:0 auto;
  padding:0 var(--gut,24px);
}

.tf-panel{
  position:relative;

  padding:clamp(14px,1.5vw,20px) clamp(16px,1.9vw,28px) clamp(16px,1.6vw,22px);

  border:1px solid #E8ECF2;
  border-radius:20px;

  background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.035);

  transition:border-color .3s var(--pk-e), box-shadow .3s var(--pk-e);

  animation:tfIn .44s var(--pk-e) both;
}

@keyframes tfIn{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:none; }
}

/* the hero's CTAs jump the visitor here — one quiet acknowledgement */
.tf-panel.is-flash{
  border-color:var(--pk-blue-line);
  box-shadow:0 0 0 3px rgba(27,84,240,.09);
}


/* ---------- b · mode tabs ---------- */

.tf-tabs{
  display:flex;
  gap:clamp(20px,2.2vw,28px);

  margin:0 0 clamp(14px,1.6vw,20px);
  border-bottom:1px solid #EFF2F6;
}

.tf-tab{
  position:relative;

  padding:0 1px 11px;
  margin-bottom:-1px;

  border:0;
  background:none;

  color:var(--pk-ink-4);

  font-family:inherit;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.005em;

  cursor:pointer;
  transition:color .2s var(--pk-e);
}

.tf-tab::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;

  height:2px;

  border-radius:2px 2px 0 0;
  background:var(--pk-blue);

  transform:scaleX(0);
  transform-origin:left;
  transition:transform .26s var(--pk-e);
}

.tf-tab:hover{ color:var(--pk-ink-2); }

.tf-tab.on{
  color:var(--pk-ink);
  font-weight:670;
}

.tf-tab.on::after{ transform:scaleX(1); }

.tf-tab:focus-visible{
  outline:2px solid var(--pk-blue);
  outline-offset:3px;
  border-radius:5px;
}


/* ---------- the two panes share one cell ---------- */

.tf-body{
  position:relative;

  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:clamp(16px,2vw,34px);
}

.tf-pane{
  grid-area:1 / 1;
  min-width:0;

  opacity:0;
  transform:translateY(4px);
  pointer-events:none;

  transition:opacity .22s var(--pk-e), transform .28s var(--pk-e);
}

.tf-panel[data-mode="size"] .tf-pane[data-say="size"],
.tf-panel[data-mode="car"]  .tf-pane[data-say="car"]{
  opacity:1;
  transform:none;
  pointer-events:auto;
}


/* ---------- c · the size, as a specification ---------- */

.tf-spec{
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;

  gap:clamp(8px,1.2vw,18px);
}

.tf-val{
  position:relative;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;

  padding:0 2px 7px;

  border:0;
  background:none;

  font-family:var(--pk-font);
  text-align:left;

  cursor:pointer;
}

/* the rule that says "this is the value being set" */
.tf-val::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  height:2px;

  border-radius:2px;
  background:var(--pk-blue);

  transform:scaleX(0);
  transform-origin:left;
  transition:transform .24s var(--pk-e);
}

.tf-val:hover::after,
.tf-val[aria-expanded="true"]::after{ transform:scaleX(1); }

.tf-val:focus-visible{
  outline:2px solid var(--pk-blue);
  outline-offset:4px;
  border-radius:6px;
}

.tf-val:disabled{ cursor:default; }
.tf-val:disabled::after{ display:none; }

.tf-num{
  display:block;

  color:var(--pk-ink);

  font-size:clamp(30px,8vw,44px);
  font-weight:730;
  line-height:1.04;
  letter-spacing:-.045em;
  font-feature-settings:"tnum" 1;
}

.tf-num .ss-od{
  display:block;
  height:1.06em;
  overflow:hidden;
}

.tf-num .ss-od i{
  display:block;
  font-style:normal;
  line-height:1.06em;
  white-space:nowrap;
}

.tf-num .ss-od.is-rolling{
  transform:translateY(-1.06em);
  transition:transform .24s cubic-bezier(.2,.72,.28,1);
}

.tf-num .is-ph{ color:var(--pk-ink-4); font-weight:640; }
.tf-val:disabled .tf-num{ color:#C7CDD6; }

.tf-lb{
  display:inline-flex;
  align-items:center;
  gap:5px;

  color:var(--pk-ink-4);

  font-family:var(--pk-font);
  font-size:12.5px;
  font-weight:580;
  line-height:1.2;
  letter-spacing:.008em;
  white-space:nowrap;

  transition:color .2s var(--pk-e);
}

.tf-val:hover .tf-lb,
.tf-val[aria-expanded="true"] .tf-lb{ color:var(--pk-blue); }

.tf-val:disabled .tf-lb{ color:#C7CDD6; }

.tf-lb .ss-c{
  width:6px;
  height:6px;

  border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;

  opacity:.6;
  transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .22s var(--pk-e), opacity .2s var(--pk-e);
}

.tf-val:hover .ss-c{ opacity:1; }

.tf-val[aria-expanded="true"] .ss-c{
  opacity:1;
  transform:rotate(225deg) translate(-1px,-1px);
}

.tf-val:disabled .ss-c{ opacity:.4; }

/* the slash is set at the size of the numbers so its top lines up,
   then thinned and greyed until it reads as punctuation */
.tf-sl{
  align-self:flex-start;

  color:#D5DBE4;

  font-family:var(--pk-font);
  font-size:clamp(30px,8vw,44px);
  font-weight:200;
  line-height:1.04;
  letter-spacing:-.02em;

  user-select:none;
}

/* the vehicle chain carries words, so the type steps down */
.tf-val-w .tf-num{
  max-width:min(30vw, 260px);

  font-size:clamp(21px,4.4vw,30px);
  font-weight:690;
  letter-spacing:-.028em;
}

.tf-val-w .tf-num .ss-od i{
  overflow:hidden;
  text-overflow:ellipsis;
}

.tf-spec-car .tf-sl{ font-size:clamp(21px,4.4vw,30px); }

.tf-hint{
  margin:14px 0 0;

  color:var(--pk-ink-3);
  font-size:13.5px;
  line-height:1.5;
}


/* ---------- d · season · category · quantity ---------- */

.tf-opts{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  margin-top:clamp(13px,1.5vw,18px);
  padding-top:clamp(10px,1.2vw,14px);

  border-top:1px solid #EFF2F6;
}

.tf-opt{
  position:relative;

  display:inline-flex;
  align-items:center;
  gap:8px;

  height:40px;
  padding:0 13px;

  border:0;
  border-radius:9px;
  background:none;

  color:var(--pk-ink-2);

  font-family:inherit;
  font-size:14.5px;
  font-weight:560;
  line-height:1.2;
  white-space:nowrap;

  cursor:pointer;
  transition:background .18s var(--pk-e), color .18s var(--pk-e);
}

/* the first option sits under the first number, not indented by
   its own padding */
.tf-opts > .tf-opt:first-child{ margin-left:-13px; }

.tf-opt:hover{ background:#F5F7FA; color:var(--pk-ink); }

.tf-opt[aria-expanded="true"]{
  background:var(--pk-blue-tint);
  color:var(--pk-blue-d);
}

.tf-opt.is-set{ color:var(--pk-ink); font-weight:610; }

.tf-opt:focus-visible{
  outline:2px solid var(--pk-blue);
  outline-offset:2px;
}

.tf-opt .ss-od{
  display:block;
  height:1.2em;
  overflow:hidden;
}

.tf-opt .ss-od i{
  display:block;
  font-style:normal;
  line-height:1.2em;
  white-space:nowrap;
}

.tf-opt .ss-od.is-rolling{
  transform:translateY(-1.2em);
  transition:transform .22s cubic-bezier(.2,.72,.28,1);
}

.tf-opt .ss-c{
  width:5.5px;
  height:5.5px;

  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;

  opacity:.5;
  transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .22s var(--pk-e), opacity .2s var(--pk-e);
}

.tf-opt:hover .ss-c{ opacity:.85; }

.tf-opt[aria-expanded="true"] .ss-c{
  opacity:1;
  transform:rotate(225deg) translate(-1px,-1px);
}

.tf-div{
  width:1px;
  height:20px;
  flex:0 0 1px;

  margin:0 5px;
  background:#E8ECF2;
}

/* one glyph per season, the matching one shown */
.tf-ic{
  display:grid;
  place-items:center;

  width:17px;
  height:17px;
  flex:0 0 17px;

  color:var(--pk-ink-4);
  transition:color .18s var(--pk-e);
}

.tf-ic svg{
  display:none;
  width:17px;
  height:17px;
}

.tf-opt-s[data-v=""]          .tf-ic-all,
.tf-opt-s[data-v="summer"]    .tf-ic-summer,
.tf-opt-s[data-v="winter"]    .tf-ic-winter,
.tf-opt-s[data-v="allseason"] .tf-ic-allseason{ display:block; }

.tf-opt.is-set .tf-ic,
.tf-opt[aria-expanded="true"] .tf-ic{ color:var(--pk-blue); }


/* ---------- e · the CTA ---------- */

.tf-act{
  grid-area:1 / 2;
  align-self:end;

  display:flex;
}

.ss-go{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  height:58px;
  min-width:164px;
  padding:0 28px;

  border:0;
  border-radius:16px;

  background:var(--pk-blue);
  color:#fff;

  font-family:inherit;
  font-size:16px;
  font-weight:640;
  letter-spacing:-.008em;

  cursor:pointer;

  box-shadow:0 1px 2px rgba(29,78,216,.20);

  transition:transform .18s var(--pk-e), box-shadow .22s var(--pk-e),
             background .18s var(--pk-e);
}

.ss-go:hover{
  background:var(--pk-blue-d);
  transform:translateY(-1px);
  box-shadow:0 5px 14px -4px rgba(29,78,216,.38);
}

.ss-go:active{ transform:translateY(0); }

.ss-go:disabled{
  background:#EEF1F5;
  color:#A9B3C1;
  box-shadow:none;
  transform:none;
  cursor:not-allowed;
}

.ss-go:focus-visible{
  outline:2px solid var(--pk-blue-d);
  outline-offset:3px;
}

.ss-ar{
  position:relative;

  width:15px;
  height:11px;
  flex:0 0 15px;

  transition:transform .22s var(--pk-e);
}

.ss-ar i{
  position:absolute;
  left:1px;
  top:50%;

  width:6px;
  height:1.6px;

  background:currentColor;
  border-radius:2px;

  transform:translateY(-50%);
  transition:width .22s var(--pk-e);
}

.ss-ar::after{
  content:"";
  position:absolute;
  right:2px;
  top:50%;

  width:6px;
  height:6px;

  border-top:1.6px solid currentColor;
  border-right:1.6px solid currentColor;

  transform:translateY(-50%) rotate(45deg);
}

.ss-go:hover .ss-ar{ transform:translateX(3px); }
.ss-go:hover .ss-ar i{ width:9px; }
.ss-go:disabled .ss-ar{ opacity:.55; }


/* ---------- f · the menu ---------- */

.ss-pick{
  position:absolute;
  z-index:30;
  top:0;
  left:0;

  padding:6px;
  width:min(348px, calc(100% - 4px));

  border:1px solid #E8ECF2;
  border-radius:14px;

  background:#fff;
  box-shadow:
    0 1px 2px rgba(16,24,40,.04),
    0 14px 30px -14px rgba(16,24,40,.22);

  opacity:0;
  transform:translateY(-4px);
  transition:opacity .14s var(--pk-e), transform .18s var(--pk-e);
}

.ss-pick.is-open{ opacity:1; transform:none; }
.ss-pick[hidden]{ display:none; }

/* numbers read best as one strip you can run along */
.ss-pick-in{
  display:flex;
  gap:2px;

  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}

.ss-pick-in::-webkit-scrollbar{ display:none; }

/* words read best as a list */
.ss-pick.is-wide{ width:min(276px, calc(100% - 4px)); }

.ss-pick.is-wide .ss-pick-in{
  flex-direction:column;
  gap:1px;

  overflow-x:hidden;
  overflow-y:auto;
  max-height:268px;
}

.ss-o{
  flex:0 0 auto;
  scroll-snap-align:center;

  min-width:54px;
  height:40px;
  padding:0 13px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:0;
  border-radius:9px;
  background:none;

  color:var(--pk-ink-2);

  font-family:var(--pk-font);
  font-size:15.5px;
  font-weight:620;
  letter-spacing:-.02em;
  font-feature-settings:"tnum" 1;
  white-space:nowrap;

  cursor:pointer;
  transition:background .15s var(--pk-e), color .15s var(--pk-e);
}

.ss-o:hover{ background:#F5F7FA; color:var(--pk-ink); }

.ss-o.on{
  background:var(--pk-blue-tint);
  color:var(--pk-blue-d);
  font-weight:700;
}

.ss-o-w{
  width:100%;
  justify-content:flex-start;

  font-size:14.5px;
  font-weight:560;
  letter-spacing:-.008em;
}

.ss-o:focus-visible{
  outline:2px solid var(--pk-blue);
  outline-offset:-2px;
}


/* ---------- g · under the panel ---------- */

.tf-note{
  display:flex;
  align-items:center;
  gap:8px;

  margin:13px 0 0;
  padding:0 4px;

  color:var(--pk-ink-3);
  font-size:13px;
}

.tf-note::before{
  content:"";

  width:5px;
  height:5px;
  flex:0 0 5px;

  border-radius:50%;
  background:var(--pk-blue);
}

.tf-note[hidden]{ display:none; }

.tf-trust{
  display:flex;
  flex-wrap:wrap;
  align-items:center;

  margin:clamp(11px,1.2vw,15px) 0 0;
  padding:0 4px;

  color:var(--pk-ink-4);
  font-size:12.5px;
  line-height:1.5;
}

.tf-trust span + span::before{
  content:"·";
  margin:0 9px;
  color:#D5DBE4;
}

.tf-trust b{
  color:var(--pk-ink-2);
  font-weight:660;
  font-feature-settings:"tnum" 1;
}

/* the native controls stay in the page as the source of truth */
.ss-form{
  position:absolute;
  width:1px;
  height:1px;

  overflow:hidden;
  clip-path:inset(50%);
  opacity:0;
  pointer-events:none;
}


/* ---------- h · narrow screens ---------- */

@media(min-width:861px){
  .tf-num{ font-size:clamp(44px,3.6vw,56px); }
  .tf-sl { font-size:clamp(44px,3.6vw,56px); }

  .tf-val-w .tf-num,
  .tf-spec-car .tf-sl{ font-size:clamp(26px,2.1vw,30px); }
}

@media(max-width:860px){
  .tf-body{
    grid-template-columns:minmax(0,1fr);
    align-items:stretch;
    gap:0;
  }

  .tf-act{
    grid-area:2 / 1;
    margin-top:clamp(14px,2.4vw,18px);
  }

  .ss-go{ width:100%; }

  .tf-val-w .tf-num{ max-width:26vw; }
}

@media(max-width:620px){
  .tf{ padding:8px 0 18px; }

  .tf-panel{ padding:12px 14px 16px; border-radius:18px; }

  .tf-tabs{ gap:22px; margin-bottom:12px; }

  .tf-tab{
    display:inline-flex;
    align-items:center;

    min-height:44px;
    padding:0 2px 12px;
  }

  .tf-spec{ gap:6px 8px; }

  .tf-opts{
    /* the three secondary choices become full-width rows: a 44px
       target each, and no reflow whatever the labels say */
    flex-direction:column;
    align-items:stretch;
    gap:2px;

    margin-top:14px;
    padding-top:8px;
  }

  .tf-opt{
    justify-content:flex-start;
    height:44px;
    padding:0 10px;
  }

  .tf-opts > .tf-opt:first-child{ margin-left:0; }

  .tf-opt .ss-c{ margin-left:auto; }

  .tf-div{
    width:auto;
    height:1px;
    flex:0 0 1px;
    margin:1px 10px;
    background:#F1F4F8;
  }

  .ss-go{ height:54px; font-size:15.5px; border-radius:14px; }

  .ss-pick{
    left:4px !important;
    right:4px;
    width:auto;
  }

  .ss-pick.is-wide{ width:auto; }
  .ss-o{ height:44px; }
  .ss-o-w{ height:46px; }

  .tf-trust{ font-size:11.5px; }
  .tf-trust span + span::before{ margin:0 7px; }
  .tf-trust span:last-child{ display:none; }
}

@media(max-width:400px){
  .tf-num,
  .tf-sl{ font-size:29px; }

  .tf-lb{ font-size:11.5px; }
  .tf-val-w .tf-num{ font-size:19px; max-width:34vw; }
  .tf-spec-car .tf-sl{ font-size:19px; }
}


/* ---------- i · reduced motion ---------- */

@media(prefers-reduced-motion:reduce){

  .tf-panel{ animation:none; }

  .tf-pane, .tf-val::after, .tf-lb, .tf-num, .tf-opt, .tf-tab,
  .tf-tab::after, .tf-ic, .ss-c, .ss-od, .ss-go, .ss-ar, .ss-ar i,
  .ss-pick, .ss-o{
    transition:none;
  }

  .ss-go:hover,
  .ss-go:hover .ss-ar{ transform:none; }
}


/* ==========================================================
   h · THE MENU, CORRECTED
   ----------------------------------------------------------
   The strip ran sideways and pushed itself past the panel.
   Every menu now drops straight down from the left edge of the
   control that opened it: numbers as a pill grid, words as a
   list, one language for both search modes.
   ========================================================== */

.ss-pick{
  width:auto;
  min-width:0;
  padding:7px;
}

/* numbers: a grid you read down, not a strip you run along */
.ss-pick-in{
  display:grid;
  grid-template-columns:repeat(3, minmax(64px, 1fr));
  gap:4px;

  overflow-x:hidden;
  overflow-y:auto;
  max-height:238px;

  scrollbar-width:thin;
  scrollbar-color:#D3DAE4 transparent;
  overscroll-behavior:contain;
}

.ss-pick-in::-webkit-scrollbar{ display:block; width:6px; }
.ss-pick-in::-webkit-scrollbar-thumb{ background:#D3DAE4; border-radius:3px; }
.ss-pick-in::-webkit-scrollbar-track{ background:transparent; }

/* the scrollbar needs its own gutter or it sits on the pills */
.ss-pick-in.is-scroll{ padding-right:6px; }

.ss-o{
  width:100%;
  min-width:0;
  height:38px;
  padding:0 8px;

  justify-content:center;
  scroll-snap-align:none;

  font-size:15px;
}

/* words: one column, same pill, same states */
.ss-pick.is-wide{ width:auto; }

.ss-pick.is-wide .ss-pick-in{
  grid-template-columns:minmax(196px, 1fr);
  gap:2px;
  max-height:262px;
}

.ss-pick.is-wide .ss-o{
  justify-content:flex-start;
  padding:0 12px;
  height:40px;
}

/* a low, quick opening — the panel underneath must not move */
.ss-pick{
  transform:translateY(-6px) scale(.985);
  transform-origin:top left;
  transition:opacity .15s var(--pk-e), transform .2s var(--pk-e);
}

.ss-pick.is-open{ transform:none; }


/* ==========================================================
   i · THE SELECTION, DRAWN
   ----------------------------------------------------------
   The right of the panel was empty. It now holds the tyre the
   visitor is describing — an accurate one: the sidewall band
   thickens and thins with the profile, and the rim grows with
   the diameter, so the drawing answers the numbers instead of
   decorating them. Flat vector, three hairline callouts, no
   gradient and no shadow.
   ========================================================== */

.tf-body{
  grid-template-columns:minmax(0,1fr) auto auto;
}

/* the CTA was pinned to column two, which the drawing now occupies */
.tf-act{ grid-area:auto; grid-column:3; grid-row:1; align-self:end; }

.tf-pane{ align-self:center; }

.tf-viz{
  grid-column:2;
  grid-row:1;
  align-self:center;
  justify-self:center;

  width:clamp(170px, 15.5vw, 206px);
  margin:0 clamp(6px,1.6vw,26px) 0 0;
}

.tf-viz-stage{
  display:block;
  will-change:transform;
  transform:translate3d(0,0,0);
  animation:tfFloat 9s ease-in-out infinite;
}

@keyframes tfFloat{
  0%,100%{ transform:translate3d(0,0,0); }
  50%    { transform:translate3d(0,-3px,0); }
}

.tf-wheel{ display:block; width:100%; height:auto; overflow:visible; }

/* the sidewall band */
.tf-band{
  stroke:#E8EEF6;
  fill:none;
  transition:stroke-width .34s var(--pk-e), r .34s var(--pk-e);
}

.tf-edge{
  stroke:#111827;
  stroke-width:2;
  fill:none;
}

.tf-rim{
  stroke:#AEBACB;
  stroke-width:1.8;
  fill:#fff;
  transition:r .34s var(--pk-e);
}

.tf-tread line{ stroke:#CBD5E3; stroke-width:2.2; stroke-linecap:round; }
.tf-spokes line{ stroke:#B8C3D2; stroke-width:1.8; stroke-linecap:round; }

/* the wheel turns once a minute — motion you notice only if you wait */
.tf-roll{
  transform-box:fill-box;
  transform-origin:center;
  animation:tfRoll 64s linear infinite;
}

@keyframes tfRoll{ to{ transform:rotate(360deg); } }

/* hairline dimensions */
.tf-dim path{
  stroke:#B9C2CF;
  stroke-width:1;
  fill:none;
}

.tf-cap{
  fill:var(--pk-ink-2);
  font-family:var(--pk-font);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:-.01em;
}

.tf-cap .tf-unit{
  fill:var(--pk-ink-4);
  font-size:10px;
  font-weight:560;
}

.tf-cap-r{
  fill:var(--pk-blue);
  font-size:17px;
  font-weight:700;
  letter-spacing:-.02em;
}

/* the drawing only describes a tyre size */
.tf-panel[data-mode="car"] .tf-viz{ opacity:.55; }
.tf-viz{ transition:opacity .3s var(--pk-e); }


/* ==========================================================
   j · RESPONSIVE — the drawing steps aside before the search
   ========================================================== */

@media(max-width:1180px){
  .tf-viz{ width:clamp(152px, 15vw, 184px); margin-left:6px; margin-right:8px; }
}

@media(max-width:980px){
  .tf-body{ grid-template-columns:minmax(0,1fr) auto; }

  .tf-viz{
    grid-column:2;
    grid-row:1;
    width:140px;
    align-self:center;
    margin:0 0 0 8px;
  }

  .tf-act{ grid-column:1 / -1; grid-row:2; justify-self:stretch; }
}

@media(max-width:760px){
  .tf-body{ grid-template-columns:1fr; }

  /* a small tablet still has room for the drawing under the size */
  .tf-viz{
    grid-column:1;
    grid-row:2;
    justify-self:center;
    width:112px;
    margin:4px 0 0;
  }

  .tf-act{ grid-column:1; grid-row:3; }

  .ss-pick-in{ grid-template-columns:repeat(3, minmax(58px, 1fr)); }
  .ss-o{ height:44px; }
  .ss-pick.is-wide .ss-o{ height:46px; }
}

/* on a phone the numbers already are the visual: anything large enough
   to be worth drawing costs more height than the panel can spare */
@media(max-width:560px){
  .tf-viz{ display:none; }
  .tf-act{ grid-row:2; }
  .ss-pick-in{ max-height:210px; }
}

@media(prefers-reduced-motion:reduce){
  .tf-viz-stage, .tf-roll{ animation:none; }
  .tf-band, .tf-rim{ transition:none; }
}


/* ==========================================================
   k · THREE CORRECTIONS
   ========================================================== */

/* ---------- 1 · the odometer was cutting Georgian tails ----------
   ყ, გ, დ, ც, ძ, ჭ all drop below the baseline. The roll needs
   overflow:hidden, so the clip box has to be tall enough to hold
   the descender instead of the line box alone. */

.tf-opt .ss-od{ height:1.62em; }
.tf-opt .ss-od i{ line-height:1.62em; }
.tf-opt .ss-od.is-rolling{ transform:translateY(-1.62em); }

/* the vehicle pane puts Georgian words where the numerals normally sit */
.tf-val-w .tf-num .ss-od{ height:1.34em; }
.tf-val-w .tf-num .ss-od i{ line-height:1.34em; }
.tf-val-w .tf-num .ss-od.is-rolling{ transform:translateY(-1.34em); }


/* ---------- 2 · a better blue ----------
   #2563EB is the framework default and reads as such. This one is
   deeper and slightly cooler: it holds white text harder, sits
   better against graphite, and stops looking like a template. */

:root{
  --pk-blue:#1B54F0;
  --pk-blue-d:#1240C9;
  --pk-blue-tint:#EEF3FF;
  --pk-blue-line:#C4D5FE;

  --pk-blue-rgb:27,84,240;
}

body.page-home{
  --hv:     #1B54F0;
  --hv-deep:#1240C9;
}

/* the rings and washes that were mixed by hand from the old blue */
.tf-panel.is-flash{ box-shadow:0 0 0 3px rgba(var(--pk-blue-rgb), .10); }
.tf-val:focus-visible,
.tf-opt:focus-visible,
.ss-o:focus-visible{ outline-color:var(--pk-blue); }

.ss-go:hover{ background:#2F66FF; }


/* ---------- 3 · the light passes over the stage ----------
   The pale display type in each scene is the subject of that scene.
   On arrival a brighter band travels across it — the glyphs are the
   mask, so it reads as light moving over lettering rather than a
   glow bolted on top. The spec sheet takes it row by row, so the
   light runs down the three measurements. */

.pk-solid{
  --ghost:#DCE7FA;
  --ghost-hi:#8FB2FF;
}

.pk-make{
  --ghost:#E7EDF6;
  --ghost-hi:#AFC6F2;
}

.pk-solid,
.pk-make{
  background-image:linear-gradient(100deg,
    var(--ghost) 0 33%,
    var(--ghost-hi) 46%,
    var(--ghost) 59% 100%);
  background-size:300% 100%;
  background-position:100% 0;
  background-repeat:no-repeat;

  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.pk-scene.is-on .pk-solid,
.pk-scene.is-on .pk-make{
  animation:pkSweep 1.05s var(--pk-e2) both;
  animation-delay:var(--sw, .22s);
}

@keyframes pkSweep{
  from{ background-position:100% 0; }
  to  { background-position:0% 0; }
}

/* the outlined numerals cannot be clipped, so the stroke lights up */
.pk-scene.is-on .pk-out{
  animation:pkStroke 1.05s var(--pk-e2) both;
  animation-delay:var(--sw, .30s);
}

@keyframes pkStroke{
  0%  { -webkit-text-stroke-color:#D2DBE7; }
  46% { -webkit-text-stroke-color:#7B9EF0; }
  100%{ -webkit-text-stroke-color:#D2DBE7; }
}

/* row by row, so the light travels down the sheet */
.pk-art-spec .pk-spec:nth-child(1) b{ --sw:.22s; }
.pk-art-spec .pk-spec:nth-child(2) b{ --sw:.31s; }
.pk-art-spec .pk-spec:nth-child(3) b{ --sw:.40s; }

/* the two blue rules draw themselves in instead of appearing */
.pk-scene.is-on .pk-year i{ animation:pkRule .46s var(--pk-e2) .34s both; }
.pk-year i{ width:34px; }
@keyframes pkRule{ from{ width:0; } to{ width:34px; } }

.pk-art-seasons::before{ width:72px; }
.pk-scene.is-on .pk-art-seasons::before{ animation:pkRule2 .5s var(--pk-e2) .26s both; }
@keyframes pkRule2{ from{ width:0; } to{ width:72px; } }

@media(prefers-reduced-motion:reduce){
  .pk-scene.is-on .pk-solid,
  .pk-scene.is-on .pk-make,
  .pk-scene.is-on .pk-out,
  .pk-scene.is-on .pk-year i,
  .pk-scene.is-on .pk-art-seasons::before{ animation:none; }

  .pk-solid{ color:var(--ghost); -webkit-text-fill-color:var(--ghost); }
  .pk-make{ color:var(--ghost); -webkit-text-fill-color:var(--ghost); }
}


/* ==========================================================
   l · SCENE 03 GETS ITS OWN ARRIVAL
   ----------------------------------------------------------
   The seasons band was the one piece of the stage the light
   never reached. Now the band travels left to right across
   the three words, and each icon lights as it is passed —
   the last one keeps the accent, because all-season is the
   scene's own subject.
   ========================================================== */

.pk-ss b{
  --ghost:#C8D3E1;
  --ghost-hi:#7FA0EA;

  background-image:linear-gradient(100deg,
    var(--ghost) 0 33%,
    var(--ghost-hi) 46%,
    var(--ghost) 59% 100%);
  background-size:300% 100%;
  background-position:100% 0;
  background-repeat:no-repeat;

  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.pk-art-seasons .pk-ss:nth-child(1){ --sw:.22s; }
.pk-art-seasons .pk-ss:nth-child(2){ --sw:.32s; }
.pk-art-seasons .pk-ss:nth-child(3){ --sw:.42s; }

.pk-scene.is-on .pk-ss b{
  animation:pkSweep 1.05s var(--pk-e2) both;
  animation-delay:var(--sw, .22s);
}

.pk-scene.is-on .pk-ss svg{
  animation:pkIcon 1.05s var(--pk-e2) both;
  animation-delay:var(--sw, .22s);
}

@keyframes pkIcon{
  0%  { color:var(--pk-ink-4); }
  46% { color:var(--pk-blue); }
  100%{ color:var(--pk-ink-4); }
}

/* all-season keeps what the light gave it */
.pk-scene.is-on .pk-ss:last-child svg{ animation-name:pkIconHold; }

@keyframes pkIconHold{
  0%  { color:var(--pk-ink-4); }
  46% { color:var(--pk-blue); }
  100%{ color:var(--pk-blue); }
}

/* the hairline above the band draws in under the first word */
.pk-art-seasons .pk-ss{
  position:relative;
}

@media(prefers-reduced-motion:reduce){
  .pk-scene.is-on .pk-ss b,
  .pk-scene.is-on .pk-ss svg{ animation:none; }
  .pk-ss b{ color:var(--ghost); -webkit-text-fill-color:var(--ghost); }
  .pk-ss:last-child svg{ color:var(--pk-blue); }
}


/* ==========================================================
   m · THE PRIMARY BUTTON — PETROL
   ----------------------------------------------------------
   A deep teal, chosen by the client over graphite. It is dark
   enough to behave like a neutral against the white ground,
   so it still reads as the heaviest object on the page, and
   its icon carries a light teal rather than the brand blue —
   the button belongs to itself, not to the accent.

   One machined highlight along the top edge, one shadow mixed
   from the button's own colour. No gradient, no glow.
   ========================================================== */

.pk-sell,
.pk-b1,
.ss-go{
  background-image:none;
  background-color:#0B4657;
  color:#fff;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 9px 20px -11px rgba(11,70,87,.78);

  transition:
    background-color .2s var(--pk-e),
    box-shadow .22s var(--pk-e),
    transform .14s var(--pk-e);
}

.pk-sell svg,
.pk-b1 svg,
.ss-go .ss-ar{
  color:#6FD6E8;
}

.pk-sell:hover,
.pk-b1:hover,
.ss-go:hover{
  background-color:#0F5A70;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 13px 26px -11px rgba(11,70,87,.9);
}

.pk-sell:active,
.pk-b1:active,
.ss-go:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 4px 11px -8px rgba(11,70,87,.75);
}

.pk-sell{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 6px 15px -9px rgba(11,70,87,.75);
}

.pk-sell:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 9px 19px -9px rgba(11,70,87,.9);
}

.ss-go:disabled,
.ss-go:disabled:hover{
  background-color:#E7EBF2;
  color:#A6B0C0;
  box-shadow:none;
  transform:none;
}

.ss-go:disabled .ss-ar{ color:#A6B0C0; }

.pk-sell:focus-visible,
.pk-b1:focus-visible,
.ss-go:focus-visible{
  outline:2px solid #0F5A70;
  outline-offset:3px;
}


/* ==========================================================
   n · PETROL BECOMES THE ACCENT
   ----------------------------------------------------------
   The button changed colour, so everything that pointed at it
   has to follow — otherwise the page carries two unrelated
   accents and the eye cannot tell which one means "chosen".

   The deep petrol of the button is too dark to serve as text
   on white, so the scale keeps two steps: a mid petrol that
   reads as an accent, and the button's own deep tone for
   pressed and hover states.
   ========================================================== */

:root{
  --pk-blue:#0F6E86;          /* accent: links, live state, highlights */
  --pk-blue-d:#0B4657;        /* deep: the button, hovers, pressed */
  --pk-blue-tint:#E9F4F8;
  --pk-blue-line:#B4DAE5;

  --pk-blue-rgb:15,110,134;
}

body.page-home{
  --hv:     #0F6E86;
  --hv-deep:#0B4657;
}

/* the pale display type carried a blue cast in its base tone too */
.pk-solid{ --ghost:#D6E7EC; --ghost-hi:#6FB6CD; }
.pk-make { --ghost:#E2EDF1; --ghost-hi:#9FCADA; }
.pk-ss b { --ghost:#C4D5DC; --ghost-hi:#66A9C0; }

.pk-out{ -webkit-text-stroke-color:#CDD9DE; }

@keyframes pkStroke{
  0%  { -webkit-text-stroke-color:#CDD9DE; }
  46% { -webkit-text-stroke-color:#5FA3B9; }
  100%{ -webkit-text-stroke-color:#CDD9DE; }
}

/* the season popover's chosen row */
.ss-p.on .ss-p-ic{ color:#5FB8D0; }

/* the wheel drawing was drawn in blue-greys */
.tf-band{ stroke:#E6EFF2; }
.tf-rim{ stroke:#A6BFC7; }
.tf-tread line{ stroke:#C6D6DC; }
.tf-spokes line{ stroke:#AEC4CC; }

/* the focus ring the panel throws when the hero jumps here */
.tf-panel.is-flash{ box-shadow:0 0 0 3px rgba(15,110,134,.12); }


/* ==========================================================
   o · THE NAVIGATION RAIL
   ----------------------------------------------------------
   Four grey words with a grey pill behind them on hover is the
   most replaceable part of any site. These stand on a tread
   track instead: a dashed hairline runs under the group, and
   the three-block footprint — the same mark drawn on the wheel
   in the finder — travels to whichever link is being read and
   rests under the live one.

   Nothing fills, nothing boxes. The only motion is the mark.
   ========================================================== */

.pk-links{
  position:relative;
  gap:clamp(2px,.5vw,8px);
}

.pk-links a{
  border-radius:0;
  padding:8px 13px 12px;

  color:var(--pk-ink-3);
  font-weight:560;
  letter-spacing:-.008em;

  transition:color .18s var(--pk-e), transform .18s var(--pk-e);
}

/* the grey pill goes; the word itself answers instead */
.pk-links a:hover{
  background:none;
  color:var(--pk-ink);
  transform:translateY(-1px);
}

.pk-links a.on{
  background:none;
  color:var(--pk-ink);
  font-weight:660;
}

.pk-links a:focus-visible{
  outline:2px solid var(--pk-blue);
  outline-offset:2px;
  border-radius:6px;
}

/* the track */
.pk-rail{
  position:absolute;
  left:11px;
  right:11px;
  bottom:0;

  height:1px;

  background:repeating-linear-gradient(90deg,
    var(--pk-line-2) 0 5px,
    transparent 5px 11px);
  opacity:.85;
  pointer-events:none;
}

/* the footprint that runs along it */
.pk-tread{
  position:absolute;
  left:0;
  bottom:-1px;

  width:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:2px;

  opacity:0;
  pointer-events:none;

  transition:
    transform .34s var(--pk-e),
    width .34s var(--pk-e),
    opacity .22s var(--pk-e);
}

.pk-tread.is-live{ opacity:1; }

.pk-tread i{
  width:6px;
  height:3px;

  border-radius:1px;
  background:var(--pk-blue);
}

.pk-tread i:nth-child(2){ height:4px; }

@media(prefers-reduced-motion:reduce){
  .pk-tread{ transition:none; }
  .pk-links a:hover{ transform:none; }
}

/* the rail is a desktop device — the phone menu has its own shape */
@media(max-width:900px){
  .pk-rail, .pk-tread{ display:none; }
  .pk-links a{ padding:8px 13px; }
}


/* ==========================================================
   p · THE PRODUCT CARD
   ----------------------------------------------------------
   Three things were wrong. The tyre sat inside two baked-in
   backgrounds, so every product looked framed; those have been
   repainted white in the files themselves and the well is white
   here to match. The price was the same size as the size. And
   the brand was grey, when every one of these brands has a
   colour of its own — read out of its own logo, not guessed.
   ========================================================== */

/* ---------- the photo: nothing around the product ---------- */

body.page-home .pc-ph,
.pc-ph{
  background:#fff;
}

.pc-ph img{
  padding:2%;
}

/* the sweep existed to lift a warm well; on white it only greys it */
.pc-ph::after{ display:none; }

.pc{
  border-color:var(--pk-line);
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}

.pc:hover{
  border-color:var(--pk-line-2);
  box-shadow:0 2px 4px rgba(16,24,40,.05), 0 16px 30px -18px rgba(16,24,40,.28);
}


/* ---------- the size, set as a specification ---------- */

.pc-size{
  display:block;

  font-family:var(--pk-font);
  font-size:21px;
  font-weight:760;
  line-height:1;
  letter-spacing:-.042em;
  font-feature-settings:"tnum" 1;
  color:var(--pk-ink);
}

.pc-size .sl{
  margin:0 1px;
  font-weight:300;
  color:var(--pk-line-2);
}

.pc-size .rr{
  margin-left:6px;
  font-size:.72em;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--pk-ink-3);
}


/* ---------- the brand, in its own colour ---------- */

.pc-brand{
  display:block;
  margin-top:9px;

  font-family:var(--pk-font);
  font-size:11px;
  font-weight:750;
  letter-spacing:.13em;
  text-transform:uppercase;

  color:var(--pk-ink-2);          /* only where a logo gave no colour */
}

.pc-model{
  margin-top:3px;
  font-size:13px;
  color:var(--pk-ink-3);
  line-height:1.35;
}


/* ---------- the price does the shouting ---------- */

.pc-foot{
  display:block;
  margin-top:13px;
  padding-top:12px;
  border-top:1px solid var(--pk-line);
}

.pc-price{
  display:flex;
  align-items:baseline;
  gap:2px;

  font-family:var(--pk-font);
  font-size:clamp(26px,2.4vw,31px);
  font-weight:800;
  line-height:1;
  letter-spacing:-.045em;
  font-feature-settings:"tnum" 1;
  color:var(--pk-ink);
}

.pc-price .cur{
  margin-left:3px;
  font-size:.56em;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--pk-ink-3);
}

.pc-price small{
  margin-left:5px;
  font-size:11px;
  font-weight:550;
  letter-spacing:0;
  color:var(--pk-ink-4);
}

.pc-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;

  margin-top:8px;
  text-align:left;

  font-size:11.5px;
  color:var(--pk-ink-4);
  white-space:normal;
}

.pc-verified{
  display:inline-flex;
  align-items:center;
  gap:3px;

  color:var(--pk-ink-2);
  font-weight:620;
}

.pc-verified svg{ width:11px; height:11px; }
.pc-city{ color:var(--pk-ink-4); }

@media(max-width:620px){
  .pc-size{ font-size:19px; }
  .pc-price{ font-size:24px; }
  .pc-brand{ font-size:10.5px; }
}


/* ==========================================================
   q · A REDUCED PRICE
   ----------------------------------------------------------
   The cut is the loudest thing on the card after the price
   itself, and the old figure sits beside the new one rather
   than above it — so the eye reads "this, not that" in one
   move. Both come from price_old, so a tyre carries them into
   whatever rail it appears in.
   ========================================================== */

.pc-cut{
  display:inline-flex;
  align-items:center;

  height:22px;
  padding:0 8px;

  border-radius:6px;
  background:#B3261E;
  color:#fff;

  font-family:var(--pk-font);
  font-size:11.5px;
  font-weight:800;
  letter-spacing:-.01em;
  font-feature-settings:"tnum" 1;
  white-space:nowrap;
}

.pc-was{
  margin-left:8px;

  color:var(--pk-ink-4);
  font-family:var(--pk-font);
  font-size:13px;
  font-weight:600;
  letter-spacing:-.02em;
  font-feature-settings:"tnum" 1;
  text-decoration-thickness:1.5px;
  text-decoration-color:#C0392B;
}

@media(max-width:620px){
  .pc-cut{ height:20px; padding:0 7px; font-size:11px; }
  .pc-was{ font-size:12px; margin-left:6px; }
}


/* ==========================================================
   r · THE RIM SCALE
   ----------------------------------------------------------
   Between two rails of cards, another poster would just be a
   fourth banner. This is a measuring rule instead: every rim
   size the shop could carry, drawn along one ticked baseline.

   The heights used to be 30 + n × 4, which gave a single
   listing a third of the tallest column — a chart that lied.
   They are now the true share of the largest holding, floored
   at 7% so one listing still leaves a mark, and the dashed
   line across the top is what that largest holding is.
   ========================================================== */

.rimscale{ margin-top:clamp(34px,4vw,56px); }

.rs{
  padding:clamp(24px,2.8vw,34px) clamp(20px,2.6vw,34px) clamp(20px,2.2vw,28px);

  background:linear-gradient(180deg, #fff, var(--pk-bg-2) 62%);
  border:1px solid var(--pk-line);
  border-radius:20px;
  box-shadow:0 1px 2px rgba(16,24,40,.03), 0 18px 34px -30px rgba(16,24,40,.28);
}


/* ---------- the header ---------- */

.rs-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(16px,3vw,40px);

  margin-bottom:clamp(26px,3vw,38px);
}

.rs-head-t{ min-width:0; }

.rs-eyebrow{
  display:block;

  color:var(--pk-ink-4);
  font-family:var(--pk-font);
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
  font-feature-settings:"tnum" 1;
}

.rs-head h2{
  margin:9px 0 0;

  font-family:var(--fd);
  font-size:clamp(21px,2.3vw,28px);
  font-weight:720;
  letter-spacing:-.022em;
  line-height:1.14;
  color:var(--pk-ink);
}

.rs-head p{
  margin:7px 0 0;
  color:var(--pk-ink-3);
  font-size:13.5px;
  line-height:1.5;
}

/* what the whole rule adds up to */
.rs-sum{
  flex-shrink:0;

  display:flex;
  align-items:baseline;
  gap:10px;

  padding:11px 15px 12px;

  border:1px solid var(--pk-line-2);
  border-radius:13px;
  background:#fff;
}

.rs-sum-fig{
  font-family:var(--pk-font);
  font-size:26px;
  font-weight:820;
  line-height:1;
  letter-spacing:-.045em;
  font-feature-settings:"tnum" 1;
  color:var(--pk-blue);
}

.rs-sum-lb{
  color:var(--pk-ink-3);
  font-size:11px;
  line-height:1.35;
  white-space:nowrap;
}


/* ---------- the rule ---------- */

.rs-rule{
  position:relative;

  display:grid;
  grid-template-columns:repeat(10, minmax(0,1fr));
  align-items:end;
  gap:clamp(4px,.9vw,14px);

  height:clamp(124px,13vw,160px);
  margin-bottom:40px;
}

/* the baseline, and a tick under every size, so it reads as a scale
   rather than as a bar chart */
.rs-rule::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;

  height:1px;
  background:var(--pk-line-2);
}

.rs-t::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;

  width:1px;
  height:7px;

  background:var(--pk-line-2);
}

.rs-peak{
  position:absolute;
  z-index:0;
  left:0;
  right:0;
  top:0;

  border-top:1px dashed var(--pk-line-2);
  pointer-events:none;
}

.rs-peak i{
  position:absolute;
  right:0;
  top:-9px;

  padding:2px 7px 3px;

  border-radius:5px;
  background:var(--pk-bg-2);

  font-style:normal;
  font-family:var(--pk-font);
  font-size:10px;
  font-weight:750;
  letter-spacing:.02em;
  font-feature-settings:"tnum" 1;
  color:var(--pk-ink-4);
}


/* ---------- one size ---------- */

.rs-t{
  position:relative;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;

  height:100%;
  text-align:center;
}

.rs-bar{
  position:relative;

  width:100%;
  max-width:52px;
  height:var(--h,7%);

  border-radius:7px 7px 2px 2px;
  background:linear-gradient(180deg, #1A7690, var(--pk-blue) 78%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);

  transition:filter .22s var(--pk-e), transform .24s var(--pk-e),
             box-shadow .24s var(--pk-e);
}

.rs-t.is-peak .rs-bar{
  background:linear-gradient(180deg, #2BA6C6, #0E5B71 88%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 10px 22px -13px rgba(11,70,87,.6);
}

/* nothing in stock: a hollow mark on the line, not a stub of a bar
   that reads as if it held something */
.rs-dot{
  width:9px;
  height:9px;
  margin-bottom:-4px;

  border:1.5px solid var(--pk-line-2);
  border-radius:50%;
  background:#fff;
}

.rs-n{
  position:absolute;
  left:0;
  right:0;
  bottom:calc(var(--h,7%) + 9px);

  color:var(--pk-ink-2);
  font-family:var(--pk-font);
  font-size:14px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
  font-feature-settings:"tnum" 1;

  transition:opacity .18s var(--pk-e);
}

/* the readout, in the number's place, so nothing moves */
.rs-tip{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:calc(var(--h,7%) + 6px);

  display:flex;
  align-items:baseline;
  gap:6px;

  padding:6px 10px 7px;

  border-radius:9px;
  background:var(--pk-ink);
  color:rgba(255,255,255,.72);

  font-size:10.5px;
  line-height:1;
  white-space:nowrap;

  opacity:0;
  transform:translate(-50%, 4px);
  transition:opacity .2s var(--pk-e), transform .22s var(--pk-e);
  pointer-events:none;
}

.rs-tip b{
  font-family:var(--pk-font);
  font-size:13px;
  font-weight:800;
  letter-spacing:-.03em;
  font-feature-settings:"tnum" 1;
  color:#fff;
}

.rs-tip i{
  padding-left:7px;
  border-left:1px solid rgba(255,255,255,.20);

  font-style:normal;
  font-family:var(--pk-font);
  font-size:11px;
  font-weight:750;
  letter-spacing:-.02em;
  font-feature-settings:"tnum" 1;
  color:#7FD3E6;
}

.rs-lb{
  position:absolute;
  bottom:-30px;
  left:0;
  right:0;

  color:var(--pk-ink-4);
  font-family:var(--pk-font);
  font-size:12.5px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.01em;
  font-feature-settings:"tnum" 1;

  transition:color .2s var(--pk-e);
}

.rs-t.is-on .rs-lb{ color:var(--pk-ink-2); }
.rs-t.is-off .rs-lb{ color:var(--pk-line-2); }


/* ---------- on approach ---------- */

.rs-t.is-on:hover .rs-bar,
.rs-t.is-on:focus-visible .rs-bar{
  filter:brightness(1.12);
  transform:scaleY(1.035);
  transform-origin:bottom;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px -10px rgba(11,70,87,.75);
}

.rs-t.is-on:hover .rs-n,
.rs-t.is-on:focus-visible .rs-n{ opacity:0; }

.rs-t.is-on:hover .rs-tip,
.rs-t.is-on:focus-visible .rs-tip{ opacity:1; transform:translate(-50%, 0); }

.rs-t.is-on:hover .rs-lb,
.rs-t.is-on:focus-visible .rs-lb{ color:var(--pk-blue); }

.rs-t.is-on:focus-visible{
  outline:2px solid var(--pk-blue);
  outline-offset:4px;
  border-radius:8px;
}

/* the readout would run off the card at the ends */
.rs-t:nth-child(2) .rs-tip,
.rs-t:nth-child(3) .rs-tip{ left:0; transform:translate(0, 4px); }

.rs-t:nth-child(2):hover .rs-tip,
.rs-t:nth-child(3):hover .rs-tip{ transform:translate(0, 0); }

.rs-t:nth-last-child(1) .rs-tip,
.rs-t:nth-last-child(2) .rs-tip{ left:auto; right:0; transform:translate(0, 4px); }

.rs-t:nth-last-child(1):hover .rs-tip,
.rs-t:nth-last-child(2):hover .rs-tip{ transform:translate(0, 0); }


@media(max-width:760px){
  .rs-head{ flex-direction:column; align-items:flex-start; gap:16px; }
  .rs-sum{ padding:9px 13px 10px; }
  .rs-sum-fig{ font-size:22px; }

  .rs-rule{ gap:3px; height:112px; margin-bottom:34px; }
  .rs-bar{ max-width:28px; border-radius:6px 6px 2px 2px; }
  .rs-n{ font-size:12px; bottom:calc(var(--h,7%) + 7px); }
  .rs-lb{ font-size:11px; bottom:-26px; }
  .rs-peak i{ font-size:9px; }
  .rs-tip{ font-size:10px; padding:5px 8px 6px; }
  .rs-tip b{ font-size:12px; }
}

@media(max-width:520px){
  .rs{ padding:20px 14px 18px; border-radius:16px; }
  .rs-rule{ height:96px; margin-bottom:30px; }
  .rs-bar{ max-width:22px; border-radius:5px 5px 2px 2px; }
  .rs-n{ font-size:10.5px; }
  .rs-lb{ font-size:10px; bottom:-23px; }
  .rs-dot{ width:7px; height:7px; }
  .rs-tip i{ display:none; }
}

@media(prefers-reduced-motion:reduce){
  .rs-bar, .rs-n, .rs-lb, .rs-tip{ transition:none; }
  .rs-t.is-on:hover .rs-bar{ transform:none; }
}


/* ==========================================================
   s · THE VIP SHELF
   ----------------------------------------------------------
   A fourth rail of identical cards would say nothing about
   these being promoted. Paid placement earns a different
   shape: a lit vitrine on graphite, the most-viewed listing
   standing at full size and the rest ranked beside it.

   The product photographs are shot on white, so rather than
   fight that, each one gets its own lit niche — a pool of
   light with a floor under it. The ranking and the bars are
   the real view counts; nothing here is decorative.
   ========================================================== */

.vipshelf{ margin-top:clamp(34px,4vw,56px); }

.vs{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  padding:clamp(22px,2.6vw,32px) clamp(20px,2.6vw,32px) clamp(20px,2.4vw,28px);

  background:#0C1420;
  border-radius:24px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}

/* the light the vitrine is lit by */
.vs::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-30% 30% 20% -20%;

  background:radial-gradient(closest-side, rgba(23,120,148,.30), transparent 72%);
  pointer-events:none;
}

.vs::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:auto -10% -40% 40%;

  height:80%;
  background:radial-gradient(closest-side, rgba(12,68,86,.34), transparent 74%);
  pointer-events:none;
}

.vs > *{ position:relative; z-index:1; }


/* ---------- the header ---------- */

.vs-head{
  display:flex;
  align-items:center;
  gap:clamp(12px,1.6vw,18px);

  margin-bottom:clamp(18px,2.2vw,26px);
}

.vs-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;

  height:27px;
  padding:0 11px 0 9px;

  border-radius:8px;
  background:linear-gradient(180deg, #1B7E9B, var(--pk-blue));
  box-shadow:0 6px 16px -8px rgba(31,142,174,.9), inset 0 1px 0 rgba(255,255,255,.22);
  color:#fff;

  font-family:var(--pk-font);
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
}

.vs-badge svg{ width:11px; height:11px; color:#9BE3F5; }

.vs-head-t{ min-width:0; }

.vs-head h2{
  font-family:var(--fd);
  font-size:clamp(19px,2.1vw,25px);
  font-weight:720;
  letter-spacing:-.02em;
  line-height:1.15;
  color:#fff;
}

.vs-head p{
  margin:3px 0 0;
  color:#7D8CA3;
  font-size:13px;
}

.vs-rule{
  flex:1;
  min-width:16px;
  height:1px;

  background:linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,0));
}

.vs-all{
  display:inline-flex;
  align-items:center;
  gap:7px;

  color:#B9C6DA;
  font-size:13.5px;
  font-weight:620;
  white-space:nowrap;

  transition:color .18s var(--pk-e), gap .18s var(--pk-e);
}

.vs-all:hover{ color:#fff; gap:11px; }


/* ---------- the layout ---------- */

.vs-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(14px,1.8vw,22px);
}


/* ---------- the lead ---------- */

.vs-lead{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(14px,1.8vw,22px);
  align-items:center;

  padding:clamp(14px,1.6vw,18px);

  background:linear-gradient(155deg, rgba(28,44,62,.92), rgba(18,29,42,.92));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;

  transition:border-color .3s var(--pk-e), transform .3s var(--pk-e),
             box-shadow .3s var(--pk-e);
}

.vs-lead:hover{
  transform:translateY(-3px);
  border-color:rgba(159,224,240,.30);
  box-shadow:0 26px 48px -30px rgba(0,0,0,.9);
}

/* a light passes over the glass */
.vs-sheen{
  position:absolute;
  z-index:3;
  top:-60%;
  bottom:-60%;
  left:-40%;

  width:36%;

  background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform:skewX(-16deg);

  transition:left .85s var(--pk-e);
  pointer-events:none;
}

.vs-lead:hover .vs-sheen{ left:120%; }


/* ---------- the lit niche ---------- */

.vs-shot{
  position:relative;
  isolation:isolate;

  display:grid;
  place-items:center;
  aspect-ratio:1/1;

  border-radius:14px;
  overflow:hidden;

  background:
    radial-gradient(72% 60% at 50% 40%, #fff, #E9EFF3 62%, #D5DFE6 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), inset 0 -12px 26px -18px rgba(16,32,44,.5);
}

.vs-shot img{
  position:relative;
  z-index:2;

  width:100%;
  height:100%;
  object-fit:contain;
  padding:5%;

  mix-blend-mode:multiply;

  transition:transform .55s var(--pk-e);
}

.vs-lead:hover .vs-shot img{ transform:scale(1.05) translateY(-2px); }

/* the floor it stands on */
.vs-floor{
  position:absolute;
  z-index:1;
  left:16%;
  right:16%;
  bottom:9%;

  height:11%;

  border-radius:50%;
  background:radial-gradient(closest-side, rgba(22,42,58,.42), transparent 72%);

  transition:transform .55s var(--pk-e), opacity .55s var(--pk-e);
}

.vs-lead:hover .vs-floor{ transform:scaleX(.9); opacity:.75; }

.vs-cut{
  position:absolute;
  z-index:3;
  top:9px;
  left:9px;

  display:inline-flex;
  align-items:center;

  height:22px;
  padding:0 8px;

  border-radius:6px;
  background:#B3261E;
  color:#fff;

  font-family:var(--pk-font);
  font-size:11.5px;
  font-weight:800;
  font-feature-settings:"tnum" 1;
}


/* ---------- what it is ---------- */

.vs-info{
  position:relative;
  display:block;
  min-width:0;
}

/* the standing it earned, held large and quiet behind the size */
.vs-rank{
  position:absolute;
  top:-14px;
  right:-4px;

  font-family:var(--pk-font);
  font-size:58px;
  font-weight:850;
  line-height:1;
  letter-spacing:-.06em;
  font-feature-settings:"tnum" 1;
  color:rgba(255,255,255,.055);

  pointer-events:none;
}

.vs-size{
  position:relative;
  display:block;

  font-family:var(--pk-font);
  font-size:clamp(24px,2.5vw,32px);
  font-weight:780;
  line-height:1;
  letter-spacing:-.045em;
  font-feature-settings:"tnum" 1;
  color:#fff;
}

.vs-size i{ font-style:normal; font-weight:300; color:#3A4A63; margin:0 1px; }
.vs-size em{ font-style:normal; font-size:.7em; margin-left:6px; color:#8FA0B8; }

/* the logo colour, lifted so it survives a dark ground */
.vs-brand{
  display:block;
  margin-top:10px;

  font-family:var(--pk-font);
  font-size:11px;
  font-weight:750;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#9FB0C6;

  filter:brightness(1.55) saturate(1.15);
}

.vs-model{
  display:block;
  margin-top:3px;

  color:#B9C6DA;
  font-size:13.5px;
  line-height:1.35;
}

.vs-specs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;

  margin-top:12px;
}

.vs-specs span{
  padding:4px 9px;

  border:1px solid rgba(255,255,255,.10);
  border-radius:6px;

  color:#8FA0B8;
  font-size:11px;
  font-weight:560;
  white-space:nowrap;
}

.vs-specs .is-where{
  border-color:transparent;
  background:rgba(255,255,255,.06);
  color:#A9BACF;
}

.vs-buy{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px 14px;

  margin-top:15px;
  padding-top:13px;
  border-top:1px solid rgba(255,255,255,.09);
}

.vs-price{
  font-family:var(--pk-font);
  font-size:clamp(24px,2.4vw,30px);
  font-weight:800;
  line-height:1;
  letter-spacing:-.045em;
  font-feature-settings:"tnum" 1;
  color:#fff;
}

.vs-price b{ margin-left:4px; font-size:.56em; font-weight:700; color:#8FA0B8; }
.vs-price small{ margin-left:5px; font-size:11px; font-weight:550; color:#6D7E96; }

.vs-go{
  margin-left:auto;

  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:9px 14px;

  border:1px solid rgba(159,224,240,.28);
  border-radius:10px;
  background:rgba(159,224,240,.07);
  color:#9BE3F5;

  font-size:12.5px;
  font-weight:660;
  white-space:nowrap;

  transition:background .24s var(--pk-e), border-color .24s var(--pk-e),
             color .24s var(--pk-e), gap .24s var(--pk-e);
}

.vs-go svg{ transition:transform .24s var(--pk-e); }

.vs-lead:hover .vs-go{
  background:var(--pk-blue);
  border-color:var(--pk-blue);
  color:#fff;
  gap:11px;
}

.vs-lead:hover .vs-go svg{ transform:translateX(2px); }

.vs-views{
  display:block;
  margin-top:11px;

  color:#65788F;
  font-size:11.5px;
}

.vs-views b{
  font-family:var(--pk-font);
  font-weight:780;
  letter-spacing:-.02em;
  font-feature-settings:"tnum" 1;
  color:#93A6BC;
}


/* ---------- the ranked list ---------- */

.vs-list{
  display:grid;
  grid-template-rows:repeat(3, minmax(0,1fr));
  gap:clamp(8px,1vw,12px);
}

.vs-row{
  position:relative;
  overflow:hidden;

  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(9px,1.2vw,14px);

  padding:clamp(10px,1.2vw,14px);

  background:linear-gradient(150deg, rgba(26,40,57,.86), rgba(17,27,39,.86));
  border:1px solid rgba(255,255,255,.07);
  border-radius:15px;

  transition:border-color .22s var(--pk-e), transform .22s var(--pk-e),
             box-shadow .22s var(--pk-e);
}

.vs-row:hover{
  transform:translateX(3px);
  border-color:rgba(159,224,240,.26);
  box-shadow:0 16px 30px -24px rgba(0,0,0,.9);
}

.vs-rk{
  align-self:stretch;

  display:flex;
  align-items:center;
  padding-right:2px;

  font-family:var(--pk-font);
  font-size:13px;
  font-weight:820;
  letter-spacing:-.02em;
  font-feature-settings:"tnum" 1;
  color:#3D5068;

  transition:color .22s var(--pk-e);
}

.vs-row:hover .vs-rk{ color:#9BE3F5; }

.vs-th{
  position:relative;
  isolation:isolate;

  width:clamp(52px,5.2vw,66px);
  aspect-ratio:1/1;

  border-radius:11px;
  overflow:hidden;
  flex-shrink:0;

  background:radial-gradient(70% 60% at 50% 40%, #fff, #E4EBF0 70%, #D2DCE4 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
}

.vs-th img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:6%;

  mix-blend-mode:multiply;

  transition:transform .4s var(--pk-e);
}

.vs-row:hover .vs-th img{ transform:scale(1.06); }

.vs-row-txt{ display:block; min-width:0; }

.vs-row-size{
  display:block;

  font-family:var(--pk-font);
  font-size:16.5px;
  font-weight:760;
  line-height:1;
  letter-spacing:-.035em;
  font-feature-settings:"tnum" 1;
  color:#fff;
}

.vs-row-size i{ font-style:normal; font-weight:300; color:#3A4A63; }
.vs-row-size em{ font-style:normal; font-size:.74em; margin-left:5px; color:#8FA0B8; }

.vs-row-sub{
  display:block;
  margin-top:5px;

  font-family:var(--pk-font);
  font-size:10px;
  font-weight:750;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#9FB0C6;

  filter:brightness(1.55) saturate(1.15);
}

.vs-row-model{
  display:block;
  margin-top:2px;

  color:#7D8CA3;
  font-size:12px;
  line-height:1.3;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.vs-row-end{
  display:block;
  text-align:right;
  white-space:nowrap;
}

.vs-row-price{
  display:block;

  font-family:var(--pk-font);
  font-size:17px;
  font-weight:780;
  letter-spacing:-.035em;
  font-feature-settings:"tnum" 1;
  color:#fff;
}

.vs-row-views{
  display:block;
  margin-top:4px;

  color:#5E7189;
  font-size:10.5px;
  font-feature-settings:"tnum" 1;
}

/* how far behind the leader it is, drawn along the bottom edge */
.vs-bar{
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  height:2px;
  background:rgba(255,255,255,.05);
}

.vs-bar i{
  display:block;

  width:var(--v,6%);
  height:100%;

  background:linear-gradient(90deg, rgba(27,126,155,.55), #2FA9C9);

  transition:filter .22s var(--pk-e);
}

.vs-row:hover .vs-bar i{ filter:brightness(1.35); }


/* ---------- responsive ---------- */

@media(max-width:1080px){
  .vs-grid{ grid-template-columns:1fr; }
  .vs-list{ grid-template-rows:none; grid-template-columns:repeat(3, minmax(0,1fr)); }
  .vs-row{ grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; }
  .vs-rk{ grid-row:1 / span 2; align-self:center; }
  .vs-th{ grid-column:2; }
  .vs-row-txt{ grid-column:2; }
  .vs-row-end{ grid-column:2; text-align:left; }
}

@media(max-width:760px){
  .vs{ padding:18px 14px 16px; border-radius:20px; }
  .vs-lead{ grid-template-columns:1fr; }
  .vs-shot{ max-width:260px; margin:0 auto; width:100%; }
  .vs-rank{ font-size:46px; top:-10px; }
  .vs-list{ grid-template-columns:1fr; }
  .vs-row{ grid-template-columns:auto auto minmax(0,1fr) auto; grid-template-rows:auto; }
  .vs-rk{ grid-row:auto; }
  .vs-th, .vs-row-txt, .vs-row-end{ grid-column:auto; }
  .vs-row-end{ text-align:right; }
  .vs-head{ flex-wrap:wrap; }
  .vs-rule{ display:none; }
  .vs-all{ margin-left:auto; }
}

@media(max-width:420px){
  .vs-row-model{ display:none; }
  .vs-th{ width:46px; }
}

@media(prefers-reduced-motion:reduce){
  .vs-shot img, .vs-row, .vs-lead, .vs-go, .vs-all, .vs-sheen, .vs-th img{ transition:none; }
  .vs-lead:hover{ transform:none; }
  .vs-lead:hover .vs-shot img{ transform:none; }
  .vs-lead:hover .vs-sheen{ left:-40%; }
  .vs-row:hover{ transform:none; }
  .vs-row:hover .vs-th img{ transform:none; }
}


/* ==========================================================
   t · THE SIZE WALL
   ----------------------------------------------------------
   These were twelve identical boxes with numbers in them —
   nothing on the tile said anything about the tyre it stood
   for. Each tile now has its own wheel rolling in from the
   right edge, drawn at true proportion: sidewall depth is
   width × profile, the rim is the diameter. Put a 70-profile
   next to a 40-profile and the difference is visible before
   a single number is read. Approach a tile and the wheel
   rolls further in and the ground goes to graphite.
   ========================================================== */

.sizewall{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(10px,1.1vw,14px);
}

.sizetile{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  container-type:inline-size;

  display:block;
  min-height:132px;
  padding:clamp(15px,1.5vw,19px) clamp(15px,1.5vw,18px);

  background:#fff;
  border:1px solid var(--pk-line);
  border-radius:16px;

  transition:background .34s var(--pk-e), border-color .34s var(--pk-e),
             box-shadow .28s var(--pk-e), transform .26s var(--pk-e);
}

.sizetile:hover,
.sizetile:focus-visible{
  background:var(--pk-ink);
  border-color:var(--pk-ink);
  box-shadow:0 3px 6px rgba(16,24,40,.06), 0 20px 34px -22px rgba(16,24,40,.55);
  transform:translateY(-3px);
}

.sizetile:focus-visible{ outline:2px solid var(--pk-blue); outline-offset:3px; }


/* ---------- the wheel ----------
   Built as twenty-two transformed boxes it was a real cylinder, but the
   browser composites every face separately: the seams between them and
   the faceted silhouette showed as stair-stepped pixels along the edge,
   and no colour choice hides that. The same three-quarter view drawn as
   a single vector has no seams to show — every curve is antialiased by
   the rasteriser. The depth is still the section width, the rim is still
   the diameter, and rolling it is now one dash offset and one rotate. */

.st-wheel{
  --wr:clamp(40px, calc(48.7cqw - 52px), 65px);
  --wsz:calc(var(--wr) * 2);

  position:absolute;
  z-index:0;
  top:50%;
  right:-10px;

  width:calc(var(--wsz) * 1.1);
  height:var(--wsz);
  margin-top:calc(var(--wsz) / -2);

  transform:translateX(0);
  transition:transform .5s var(--pk-e);
}

.st-wheel svg{
  display:block;
  width:100%;
  height:100%;

  shape-rendering:geometricPrecision;
}


/* ---------- rubber ---------- */

.st-body   > *{ fill:#101A23; transition:fill .34s var(--pk-e); }
.st-side   { fill:#16222C; transition:fill .34s var(--pk-e); }
.st-bulge  { fill:none; stroke:#2A3B49; stroke-width:1.1; transition:stroke .34s var(--pk-e); }

.st-tread{
  fill:none;
  stroke:#425D71;
  stroke-linecap:butt;

  transition:stroke .34s var(--pk-e), stroke-dashoffset .9s var(--pk-e);
}

.st-groove{ fill:none; stroke:#080F16; stroke-width:1.6; transition:stroke .34s var(--pk-e); }


/* ---------- the alloy ---------- */

.st-lip  { fill:#B9C7D1; transition:fill .34s var(--pk-e); }
.st-dish { fill:#101C25; transition:fill .34s var(--pk-e); }

.st-spoke{
  fill:#D3DEE6;
  stroke:#0C161E;
  stroke-width:.6;
  stroke-linejoin:round;

  transition:fill .34s var(--pk-e);
}

.st-hub{ fill:#C6D2DA; transition:fill .34s var(--pk-e); }
.st-cap{ fill:#5C7383; transition:fill .34s var(--pk-e); }

.st-spokes{
  transform-box:fill-box;
  transform-origin:center;
  transition:transform .9s var(--pk-e);
}


/* ---------- on approach it rolls ---------- */

.sizetile:hover .st-wheel,
.sizetile:focus-visible .st-wheel{ transform:translateX(-8px); }

.sizetile:hover .st-spokes,
.sizetile:focus-visible .st-spokes{ transform:rotate(46deg); }

.sizetile:hover .st-tread,
.sizetile:focus-visible .st-tread{ stroke:#14607A; stroke-dashoffset:-128; }

/* the ground goes graphite, so the rubber has to lift off it */
.sizetile:hover .st-body > *,
.sizetile:focus-visible .st-body > *{ fill:#07303D; }

.sizetile:hover .st-side,
.sizetile:focus-visible .st-side{ fill:#0A3B4A; }

.sizetile:hover .st-bulge,
.sizetile:focus-visible .st-bulge{ stroke:#16607A; }

.sizetile:hover .st-groove,
.sizetile:focus-visible .st-groove{ stroke:#031A22; }

.sizetile:hover .st-lip,
.sizetile:focus-visible .st-lip{ fill:#E4EDF2; }

.sizetile:hover .st-dish,
.sizetile:focus-visible .st-dish{ fill:#04222C; }

.sizetile:hover .st-spoke,
.sizetile:focus-visible .st-spoke{ fill:#fff; stroke:#04222C; }

.sizetile:hover .st-hub,
.sizetile:focus-visible .st-hub{ fill:#EAF2F6; }

.sizetile:hover .st-cap,
.sizetile:focus-visible .st-cap{ fill:var(--pk-blue); }


/* ---------- the number ---------- */

.st-face{
  position:relative;
  z-index:2;

  display:flex;
  align-items:baseline;
  gap:8px;
}

.st-size{
  display:inline-flex;
  align-items:baseline;

  font-family:var(--pk-font);
  font-feature-settings:"tnum" 1;
  line-height:.92;
  letter-spacing:-.05em;
  color:var(--pk-ink);

  transition:color .34s var(--pk-e);
}

.st-size .w{ font-size:clamp(19px, 9.7cqw, 28px); font-weight:800; }

.st-size .p{
  font-size:clamp(13px, 5.9cqw, 17px);
  font-weight:650;
  letter-spacing:-.035em;
  color:var(--pk-ink-3);

  transition:color .34s var(--pk-e);
}

.st-r{
  padding:2px 6px 3px;

  border:1px solid var(--pk-line-2);
  border-radius:6px;

  font-family:var(--pk-font);
  font-size:11px;
  font-weight:750;
  line-height:1;
  letter-spacing:-.01em;
  color:var(--pk-ink-2);

  transition:background .34s var(--pk-e), border-color .34s var(--pk-e), color .34s var(--pk-e);
}

.sizetile:hover .st-size,
.sizetile:focus-visible .st-size{ color:#fff; }

.sizetile:hover .st-size .p,
.sizetile:focus-visible .st-size .p{ color:#8FA6B4; }

.sizetile:hover .st-r,
.sizetile:focus-visible .st-r{ background:var(--pk-blue); border-color:var(--pk-blue); color:#fff; }


/* ---------- what is behind the number ---------- */

.st-meta{
  position:absolute;
  z-index:2;
  right:auto;
  bottom:clamp(13px,1.4vw,16px);
  left:clamp(15px,1.5vw,18px);

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;

  font-size:11.5px;
  white-space:nowrap;
  color:var(--pk-ink-4);

  transition:color .34s var(--pk-e);
}

.st-meta .c{ position:relative; }

.st-meta .c::after{
  content:"";
  display:none;
  position:absolute;
  right:-8px;
  top:50%;

  width:3px;
  height:3px;
  margin-top:-1.5px;

  border-radius:50%;
  background:var(--pk-line-2);

  transition:background .34s var(--pk-e);
}

.st-meta .f{
  font-family:var(--pk-font);
  font-weight:750;
  font-feature-settings:"tnum" 1;
  letter-spacing:-.02em;
  color:var(--pk-ink-2);

  transition:color .34s var(--pk-e);
}

.sizetile:hover .st-meta,
.sizetile:focus-visible .st-meta{ color:#8FA6B4; }

.sizetile:hover .st-meta .c::after,
.sizetile:focus-visible .st-meta .c::after{ background:#41586A; }

.sizetile:hover .st-meta .f,
.sizetile:focus-visible .st-meta .f{ color:#fff; }


/* ---------- the one that leads ---------- */

.st-flag{
  position:absolute;
  z-index:3;
  top:0;
  right:0;

  padding:4px 10px 5px;

  border-radius:0 15px 0 10px;
  background:var(--pk-blue);
  color:#fff;

  font-family:var(--pk-font);
  font-size:9.5px;
  font-weight:780;
  line-height:1;
  letter-spacing:.1em;
}


/* ---------- responsive ---------- */

/* the wheel is drawn at a fixed size, so the column count has to keep
   the tile wide enough for the number and the price to clear it */
@media(max-width:1260px){ .sizewall{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media(max-width:900px) { .sizewall{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

@media(max-width:760px){
  .sizewall{ gap:9px; }
  .sizetile{ min-height:116px; padding:14px 13px; border-radius:14px; }
  .st-wheel{ --wr:clamp(34px, calc(48.7cqw - 58px), 62px); }
  .st-r{ font-size:10.5px; padding:2px 5px 3px; }
  .st-meta{ left:13px; bottom:12px; gap:12px; font-size:10.5px; }
  .st-flag{ font-size:8.5px; padding:3px 8px 4px; border-radius:0 13px 0 9px; }
}

@media(max-width:620px){
  .sizetile:hover .st-wheel,
  .sizetile:focus-visible .st-wheel{ transform:translateX(-6px); }

  .st-meta{
    bottom:11px;

    flex-direction:column;
    align-items:flex-start;
    gap:3px;
  }

  .st-meta .c::after{ display:none; }
}

/* below this a half tile cannot hold both a readable size and a
   recognisable wheel — one per row, and both get their space back */
@media(max-width:400px){
  .sizewall{ grid-template-columns:1fr; }
  .sizetile{ min-height:130px; }
  .st-wheel{ --wr:clamp(48px, calc(48.7cqw - 58px), 66px); }

  .sizetile:hover .st-wheel,
  .sizetile:focus-visible .st-wheel{ transform:translateX(-8px); }

  .st-meta{ flex-direction:row; align-items:baseline; gap:12px; }
  .st-meta .c::after{ display:block; }
}

@media(prefers-reduced-motion:reduce){
  .sizetile, .st-wheel, .st-spokes, .st-tread{ transition-duration:.01ms; }
  .sizetile:hover{ transform:none; }
  .sizetile:hover .st-spokes, .sizetile:focus-visible .st-spokes{ transform:none; }
}


/* ==========================================================
   u · THE WINTER BAND
   ----------------------------------------------------------
   It was a dark rectangle with text on one half and nothing
   on the other, carrying a claim — that a winter compound
   halves braking distance — that no one can stand behind.

   What is true is the +7°C line: below it a summer compound
   stiffens and stops gripping, and that single fact is the
   whole reason two compounds exist. So the band states it and
   then draws it, on the half that used to be empty.
   ========================================================== */

.wb{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  display:block;

  padding:clamp(26px,3.4vw,46px) clamp(22px,3vw,44px);

  border-radius:24px;
  background:
    linear-gradient(148deg, #0D2233 0%, #0A1724 52%, #0B1A26 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),
             0 22px 42px -34px rgba(6,18,28,.9);

  transition:box-shadow .34s var(--pk-e), transform .34s var(--pk-e);
}

.wb:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px rgba(159,216,245,.24),
             0 30px 54px -34px rgba(6,18,28,1);
}

.wb:focus-visible{ outline:2px solid #9FD8F5; outline-offset:3px; }

/* the cold light it sits in */
.wb-glow{
  position:absolute;
  z-index:0;
  inset:-40% -10% auto 34%;

  height:150%;

  background:radial-gradient(closest-side, rgba(46,132,178,.30), transparent 72%);
  pointer-events:none;
}

/* frost hairlines, faint enough to be texture rather than pattern */
.wb::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;

  background:repeating-linear-gradient(58deg,
    rgba(255,255,255,.035) 0 1px, transparent 1px 82px);
  pointer-events:none;
}

.wb-flake{
  position:absolute;
  z-index:0;
  top:50%;
  right:clamp(-40px,-2vw,-18px);

  width:clamp(220px,26vw,340px);
  height:clamp(220px,26vw,340px);
  margin-top:calc(clamp(220px,26vw,340px) / -2);

  color:#9FD8F5;
  opacity:.07;

  transition:transform 1.2s var(--pk-e), opacity .5s var(--pk-e);
  pointer-events:none;
}

.wb-flake svg{ display:block; width:100%; height:100%; }

.wb:hover .wb-flake{ transform:rotate(30deg); opacity:.11; }

.wb-in{
  position:relative;
  z-index:1;

  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  align-items:center;
  gap:clamp(24px,4vw,60px);
}


/* ---------- what it says ---------- */

.wb-txt{ display:block; min-width:0; }

.wb-kick{
  display:inline-flex;
  align-items:center;
  gap:9px;

  font-family:var(--pk-font);
  font-size:10.5px;
  font-weight:750;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#9FD8F5;
  font-feature-settings:"tnum" 1;
}

.wb-kick i{
  width:22px;
  height:2px;

  border-radius:2px;
  background:#9FD8F5;
}

.wb h3{
  margin:15px 0 0;

  font-family:var(--fd);
  font-size:clamp(28px,3.6vw,46px);
  font-weight:730;
  line-height:1.02;
  letter-spacing:-.035em;
  color:#fff;
}

.wb p{
  margin:15px 0 0;
  max-width:44ch;

  color:rgba(255,255,255,.66);
  font-size:14.5px;
  line-height:1.62;
}

.wb-cta{
  display:inline-flex;
  align-items:center;
  gap:9px;

  margin-top:24px;
  padding:13px 22px;

  border-radius:999px;
  background:#EAF6FD;
  color:#0C2436;
  box-shadow:0 10px 22px -14px rgba(180,225,250,.9);

  font-size:14.5px;
  font-weight:650;

  transition:gap .25s var(--pk-e), transform .22s var(--pk-e),
             box-shadow .22s var(--pk-e);
}

.wb:hover .wb-cta{
  gap:14px;
  transform:translateY(-1px);
  box-shadow:0 16px 28px -14px rgba(180,225,250,.95);
}

.wb-stat{
  display:flex;
  align-items:baseline;
  gap:9px;

  margin-top:18px;

  color:rgba(255,255,255,.44);
  font-size:12.5px;
}

.wb-stat b{
  font-family:var(--pk-font);
  font-size:16px;
  font-weight:800;
  letter-spacing:-.03em;
  font-feature-settings:"tnum" 1;
  color:#fff;
}

.wb-stat i{
  padding-left:9px;
  border-left:1px solid rgba(255,255,255,.16);

  font-style:normal;
  font-family:var(--pk-font);
  font-size:12.5px;
  font-weight:750;
  letter-spacing:-.02em;
  font-feature-settings:"tnum" 1;
  color:#9FD8F5;
}


/* ---------- the +7°C line ---------- */

.wb-scale{
  display:block;
  min-width:0;
}

.wb-zones{
  position:relative;

  display:block;
  height:19px;
  margin-bottom:9px;
}

.wb-zones b{
  position:absolute;
  bottom:0;

  font-family:var(--pk-font);
  font-size:10px;
  font-weight:750;
  line-height:1;
  letter-spacing:.11em;
  text-transform:uppercase;
  white-space:nowrap;
}

.wb-zones .is-cold{
  left:calc(var(--mark,54%) / 2);
  transform:translateX(-50%);
  color:#8FD1F2;
}

.wb-zones .is-warm{
  left:calc(var(--mark,54%) + (100% - var(--mark,54%)) / 2);
  transform:translateX(-50%);
  color:rgba(255,255,255,.34);
}

.wb-track{
  position:relative;

  display:block;
  height:12px;

  border-radius:999px;
  background:linear-gradient(90deg,
    #1C5C8E 0%,
    #2E86AE 34%,
    #3E7E86 var(--mark,54%),
    #57606B 78%,
    #6B6A63 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}

/* everything to the left of the line is where a summer tyre stops
   working, so it is the part that gets lit */
.wb-track::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:var(--mark,54%);

  border-radius:999px 0 0 999px;
  background:linear-gradient(90deg, rgba(159,216,245,.24), rgba(159,216,245,.05));
  box-shadow:inset 0 0 0 1px rgba(159,216,245,.55),
             0 0 18px -2px rgba(46,134,174,.75);
}

.wb-mark{
  position:absolute;
  top:-9px;
  bottom:-9px;
  left:var(--mark,54%);

  width:0;
}

.wb-mark i{
  position:absolute;
  inset:0;
  left:-1.5px;

  width:3px;

  border-radius:2px;
  background:#EAF6FD;
  box-shadow:0 0 12px rgba(234,246,253,.55);
}

.wb-mark em{
  position:absolute;
  top:-28px;
  left:50%;

  padding:4px 8px 5px;

  border-radius:6px;
  background:#EAF6FD;
  color:#0C2436;

  font-style:normal;
  font-family:var(--pk-font);
  font-size:11px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.01em;
  font-feature-settings:"tnum" 1;
  white-space:nowrap;

  transform:translateX(-50%);
}

.wb-ticks{
  display:flex;
  justify-content:space-between;

  margin-top:11px;

  font-family:var(--pk-font);
  font-size:10px;
  font-weight:650;
  letter-spacing:.02em;
  font-feature-settings:"tnum" 1;
  color:rgba(255,255,255,.34);
}


/* ---------- responsive ---------- */

@media(max-width:900px){
  .wb-in{ grid-template-columns:1fr; gap:30px; }
  .wb p{ max-width:none; }
  .wb-flake{ right:-70px; opacity:.05; }
}

@media(max-width:520px){
  .wb{ padding:24px 18px; border-radius:20px; }
  .wb h3{ font-size:clamp(25px,7.4vw,32px); }
  .wb p{ font-size:13.5px; }
  .wb-cta{ padding:12px 18px; font-size:13.5px; }
  .wb-ticks{ font-size:9px; }

  .wb-zones{ height:38px; }
  .wb-zones b{ top:0; bottom:auto; font-size:9px; letter-spacing:.08em; }

  .wb-mark em{ font-size:10px; padding:3px 7px 4px; }
}

@media(prefers-reduced-motion:reduce){
  .wb, .wb-flake, .wb-cta{ transition:none; }
  .wb:hover{ transform:none; }
  .wb:hover .wb-flake{ transform:none; }
  .wb:hover .wb-cta{ transform:none; }
}


/* ==========================================================
   w · THE SEARCH PAGE
   ----------------------------------------------------------
   The home page moved to white and petrol months of work ago;
   the page people actually spend their time on was still on
   the old beige ground with the old lime accent and the old
   card. This brings it across — same tokens, same fields,
   same card, same voice — without touching a line of the
   search logic or the JS that drives it.
   ========================================================== */

body.page-search{
  --paper:#FFFFFF;
  --paper-2:#F8FAFC;
  --paper-3:#F1F5F9;
  --card:#FFFFFF;

  --ink:  #111827;
  --ink-2:#475467;
  --ink-3:#667085;
  --ink-4:#98A2B3;

  --rule:  #E5E7EB;
  --rule-2:#D5DAE1;

  --hv:     #0F6E86;
  --hv-deep:#0B4657;

  background:var(--pk-bg);
  color:var(--pk-ink);
}

/* the beige page carried a printed texture behind it */
body.page-search::before{ display:none; }

body.page-search ::selection{ background:var(--pk-blue-tint); color:var(--pk-blue-d); }


/* ---------- the two columns ---------- */

body.page-search .srch{
  gap:clamp(20px,2.6vw,38px);
  padding-top:clamp(18px,2.4vw,30px);
}

body.page-search .filters{
  position:sticky;
  top:80px;
  align-self:start;

  max-height:calc(100vh - 104px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  padding:clamp(16px,1.6vw,20px);

  background:var(--pk-bg);
  border:1px solid var(--pk-line);
  border-radius:18px;
  box-shadow:var(--pk-sh-1);
}

body.page-search .filters-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding-bottom:14px;
  margin-bottom:4px;
  border-bottom:1px solid var(--pk-line);
}

body.page-search .filters-h h3{
  font-family:var(--pk-font);
  font-size:15px;
  font-weight:750;
  letter-spacing:-.015em;
  color:var(--pk-ink);
}

body.page-search .f-clear{
  color:var(--pk-blue);
  font-size:12.5px;
  font-weight:640;

  transition:color .18s var(--pk-e);
}

body.page-search .f-clear:hover{ color:var(--pk-blue-d); }


/* ---------- a group ---------- */

body.page-search .fgroup{
  padding:16px 0;
  border-bottom:1px solid var(--pk-line);
}

body.page-search .fgroup:last-child{ border-bottom:0; padding-bottom:4px; }

body.page-search .fgroup h4{
  margin-bottom:10px;

  font-family:var(--pk-font);
  font-size:10.5px;
  font-weight:750;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--pk-ink-4);
}


/* ---------- fields ---------- */

body.page-search .sel,
body.page-search .inp{
  width:100%;
  height:42px;
  padding:0 12px;

  background:var(--pk-bg);
  border:1px solid var(--pk-line);
  border-radius:11px;

  font-family:var(--pk-font);
  font-size:13.5px;
  font-weight:560;
  color:var(--pk-ink);

  transition:border-color .18s var(--pk-e), box-shadow .18s var(--pk-e),
             background .18s var(--pk-e);
}

body.page-search .sel{
  appearance:none;
  padding-right:32px;

  background-image:
    linear-gradient(45deg, transparent 50%, var(--pk-ink-3) 50%),
    linear-gradient(135deg, var(--pk-ink-3) 50%, transparent 50%);
  background-position:calc(100% - 16px) 19px, calc(100% - 11px) 19px;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}

body.page-search .sel:hover,
body.page-search .inp:hover{ border-color:var(--pk-line-2); }

body.page-search .sel:focus,
body.page-search .inp:focus{
  outline:none;
  border-color:var(--pk-blue);
  box-shadow:0 0 0 3px rgba(var(--pk-blue-rgb),.13);
}

/* a chosen field says so — and only a chosen one */
body.page-search .sel:not(#sort-sel):not(:has(option[value=""]:checked)),
body.page-search .inp:not(:placeholder-shown){
  border-color:var(--pk-blue-line);
  background:var(--pk-blue-tint);
}


body.page-search .f-size{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:7px;
}

body.page-search .f-size .sel{ padding:0 8px; background-position:calc(100% - 11px) 19px, calc(100% - 6px) 19px; }

body.page-search .f-price{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px;
}

body.page-search .f-price .sep{ color:var(--pk-ink-4); }


/* ---------- the segmented control ---------- */

body.page-search .seg{
  display:inline-flex;
  gap:3px;
  padding:3px;

  background:var(--pk-bg-3);
  border-radius:11px;
}

body.page-search .seg button{
  height:34px;
  padding:0 12px;

  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--pk-ink-2);

  font-family:var(--pk-font);
  font-size:12.5px;
  font-weight:620;
  cursor:pointer;

  transition:background .18s var(--pk-e), color .18s var(--pk-e),
             box-shadow .18s var(--pk-e);
}

body.page-search .seg button:hover{ color:var(--pk-ink); }

body.page-search .seg button.on{
  background:var(--pk-blue);
  color:#fff;
  font-weight:700;
  box-shadow:0 4px 10px -6px rgba(var(--pk-blue-rgb),.8);
}


/* ---------- ticks ---------- */

body.page-search .f-list{
  display:flex;
  flex-direction:column;
  gap:2px;
}

body.page-search .f-check{
  display:flex;
  align-items:center;
  gap:10px;

  padding:7px 8px;
  margin:0 -8px;

  border-radius:9px;

  color:var(--pk-ink-2);
  font-size:13.5px;
  cursor:pointer;

  transition:background .16s var(--pk-e), color .16s var(--pk-e);
}

body.page-search .f-check:hover{ background:var(--pk-bg-2); color:var(--pk-ink); }

body.page-search .f-check input{
  appearance:none;
  flex-shrink:0;

  width:17px;
  height:17px;
  margin:0;

  border:1.6px solid var(--pk-line-2);
  border-radius:5px;
  background:var(--pk-bg);

  transition:border-color .16s var(--pk-e), background .16s var(--pk-e);
}

body.page-search .f-check input[type="radio"]{ border-radius:50%; }

body.page-search .f-check input:checked{
  border-color:var(--pk-blue);
  background:var(--pk-blue);

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4 6.4 11.2 12.5 4.9'/%3E%3C/svg%3E");
  background-size:13px 13px;
  background-position:center;
  background-repeat:no-repeat;
}

body.page-search .f-check:has(input:checked){ color:var(--pk-ink); font-weight:620; }

body.page-search .f-check input:focus-visible{
  outline:2px solid var(--pk-blue);
  outline-offset:2px;
}


/* ---------- more ---------- */

body.page-search .f-more{
  display:inline-flex;
  align-items:center;
  gap:7px;

  margin-top:14px;
  padding:0;

  border:0;
  background:none;
  color:var(--pk-blue);

  font-family:var(--pk-font);
  font-size:13px;
  font-weight:640;
  cursor:pointer;

  transition:gap .18s var(--pk-e);
}

body.page-search .f-more:hover{ gap:10px; }
body.page-search .f-more svg{ transition:transform .22s var(--pk-e); }
body.page-search .f-more.on svg{ transform:rotate(180deg); }


/* ---------- the result head ---------- */

body.page-search .res-top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;

  margin-bottom:16px;
}

body.page-search .res-l{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

/* the size, drawn — the same wheel the home page draws */
body.page-search .res-wheel{
  flex-shrink:0;
  display:block;
  width:74px;
  height:66px;
}

body.page-search .res-wheel svg{ display:block; width:100%; height:100%; }

.rw-body > *{ fill:#101A23; }
.rw-side  { fill:#16222C; }
.rw-lip   { fill:#B9C7D1; }
.rw-dish  { fill:#101C25; }
.rw-spoke { fill:#D3DEE6; stroke:#0C161E; stroke-width:.5; stroke-linejoin:round; }
.rw-hub   { fill:#59707F; }

body.page-search .res-t{ min-width:0; }

body.page-search .res-top h1{
  font-family:var(--pk-font);
  font-size:clamp(26px,3.2vw,38px);
  font-weight:800;
  line-height:1;
  letter-spacing:-.045em;
  font-feature-settings:"tnum" 1;
  color:var(--pk-ink);
}

body.page-search .res-top h1 .sl{ font-weight:300; color:var(--pk-ink-4); margin:0 2px; }
body.page-search .res-top h1 .rr{ font-size:.62em; font-weight:700; color:var(--pk-ink-3); margin-left:3px; }

body.page-search .res-count{
  margin-top:7px;
  color:var(--pk-ink-3);
  font-size:13px;
}

body.page-search .res-count b{
  font-family:var(--pk-font);
  font-size:15px;
  font-weight:800;
  letter-spacing:-.03em;
  font-feature-settings:"tnum" 1;
  color:var(--pk-ink);
}

body.page-search .sort-wrap{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:9px;
}

body.page-search .sort-lb{
  color:var(--pk-ink-4);
  font-size:11px;
  font-weight:660;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
}

body.page-search .sort-wrap .sel{ width:auto; min-width:158px; height:40px; }

body.page-search .res-rule{
  height:1px;
  margin-bottom:16px;
  background:var(--pk-line);
}


/* ---------- the active filters ---------- */

body.page-search .fchips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

body.page-search .fchips:not(:empty){ margin-bottom:18px; }

body.page-search .fchip{
  display:inline-flex;
  align-items:center;
  gap:7px;

  height:31px;
  padding:0 5px 0 11px;

  border:1px solid var(--pk-blue-line);
  border-radius:999px;
  background:var(--pk-blue-tint);
  color:var(--pk-blue-d);

  font-size:12.5px;
  font-weight:620;
  white-space:nowrap;
}

body.page-search .fchip button{
  display:grid;
  place-items:center;

  width:21px;
  height:21px;

  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--pk-blue);
  cursor:pointer;

  transition:background .16s var(--pk-e), color .16s var(--pk-e);
}

body.page-search .fchip button:hover{ background:var(--pk-blue); color:#fff; }
body.page-search .fchip button svg{ width:10px; height:10px; }


/* ---------- the grid ---------- */

body.page-search .cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px);
}


/* ---------- nothing found ---------- */

body.page-search .empty{
  grid-column:1 / -1;

  padding:clamp(34px,5vw,64px) 24px;

  background:var(--pk-bg-2);
  border:1px solid var(--pk-line);
  border-radius:20px;
  text-align:center;
}

body.page-search .empty h3{
  margin-top:20px;

  font-family:var(--fd);
  font-size:clamp(19px,2.2vw,24px);
  font-weight:720;
  letter-spacing:-.02em;
  color:var(--pk-ink);
}

body.page-search .empty p{
  margin-top:8px;
  color:var(--pk-ink-3);
  font-size:14px;
}

body.page-search .empty-sizes{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;

  margin:20px 0 6px;
}

body.page-search .esz{
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:9px 13px;

  background:var(--pk-bg);
  border:1px solid var(--pk-line);
  border-radius:11px;

  transition:border-color .18s var(--pk-e), transform .18s var(--pk-e),
             box-shadow .18s var(--pk-e);
}

body.page-search .esz:hover{
  border-color:var(--pk-blue-line);
  transform:translateY(-1px);
  box-shadow:var(--pk-sh-1);
}

body.page-search .esz b{
  font-family:var(--pk-font);
  font-size:14px;
  font-weight:780;
  letter-spacing:-.03em;
  font-feature-settings:"tnum" 1;
  color:var(--pk-ink);
}

body.page-search .esz i{
  padding:2px 7px;

  border-radius:999px;
  background:var(--pk-blue-tint);
  color:var(--pk-blue-d);

  font-style:normal;
  font-family:var(--pk-font);
  font-size:11px;
  font-weight:750;
  font-feature-settings:"tnum" 1;
}

body.page-search .tread-art{
  display:flex;
  justify-content:center;
  gap:5px;
}

body.page-search .tread-art span{
  width:13px;
  height:34px;

  border-radius:3px;
  background:var(--pk-line-2);
}

body.page-search .tread-art span:nth-child(2n){ height:24px; background:var(--pk-blue-line); }

/* the rail scrolls, so let its bar be quiet */
body.page-search .filters::-webkit-scrollbar{ width:6px; }
body.page-search .filters::-webkit-scrollbar-thumb{ background:var(--pk-line-2); border-radius:99px; }
body.page-search .filters::-webkit-scrollbar-track{ background:transparent; }


/* ---------- more, and the pages ---------- */

body.page-search #load-more{
  height:46px;
  padding:0 26px;

  background:var(--pk-bg);
  border:1px solid var(--pk-line-2);
  border-radius:999px;
  color:var(--pk-ink);

  font-family:var(--pk-font);
  font-size:14px;
  font-weight:660;

  transition:border-color .2s var(--pk-e), background .2s var(--pk-e),
             transform .2s var(--pk-e);
}

body.page-search #load-more:hover{
  border-color:var(--pk-blue);
  background:var(--pk-blue-tint);
  color:var(--pk-blue-d);
  transform:translateY(-1px);
}

body.page-search .pager{
  display:flex;
  justify-content:center;
  gap:6px;

  margin-top:26px;
}

body.page-search .pager a,
body.page-search .pager .cur{
  display:grid;
  place-items:center;

  min-width:38px;
  height:38px;
  padding:0 10px;

  border:1px solid var(--pk-line);
  border-radius:10px;

  font-family:var(--pk-font);
  font-size:13.5px;
  font-weight:680;
  font-feature-settings:"tnum" 1;
  color:var(--pk-ink-2);

  transition:border-color .18s var(--pk-e), background .18s var(--pk-e),
             color .18s var(--pk-e);
}

body.page-search .pager a:hover{
  border-color:var(--pk-blue-line);
  background:var(--pk-blue-tint);
  color:var(--pk-blue-d);
}

body.page-search .pager .cur{
  border-color:var(--pk-blue);
  background:var(--pk-blue);
  color:#fff;
}


/* ---------- the mobile bar and the sheets ---------- */

body.page-search .msrch{
  gap:8px;
  padding:10px 0 14px;
}

body.page-search .sizebar,
body.page-search .mb{
  height:44px;

  background:var(--pk-bg);
  border:1px solid var(--pk-line);
  border-radius:12px;
  color:var(--pk-ink);

  font-family:var(--pk-font);
  font-size:13.5px;
  font-weight:640;

  transition:border-color .18s var(--pk-e), background .18s var(--pk-e);
}

body.page-search .sizebar{ padding:0 13px; }
body.page-search .mb{ padding:0 14px; }

body.page-search .sizebar:hover,
body.page-search .mb:hover{ border-color:var(--pk-line-2); }

body.page-search .sizebar .ph{ color:var(--pk-ink-4); font-weight:520; }

body.page-search .mb .n{
  margin-left:2px;
  color:var(--pk-blue);
  font-weight:800;
  font-feature-settings:"tnum" 1;
}

body.page-search .sheet{
  background:var(--pk-bg);
  border-radius:20px 20px 0 0;
}

body.page-search .sheet h3{
  font-family:var(--pk-font);
  font-size:17px;
  font-weight:750;
  letter-spacing:-.02em;
  color:var(--pk-ink);
}

body.page-search .m-sub{
  margin-top:4px;
  color:var(--pk-ink-3);
  font-size:13px;
}

body.page-search #f-done{
  height:50px;

  background:var(--pk-blue-d);
  border:0;
  border-radius:13px;
  color:#fff;

  font-family:var(--pk-font);
  font-size:15px;
  font-weight:700;
}

body.page-search #f-done:hover{ background:var(--pk-blue); }


/* ---------- responsive ---------- */

@media(max-width:1080px){
  body.page-search .cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media(max-width:860px){
  body.page-search .filters{ border:0; padding:0; box-shadow:none; }
  body.page-search .res-top{ flex-wrap:wrap; gap:12px; }
  body.page-search .sort-wrap{ width:100%; }
  body.page-search .sort-wrap .sel{ flex:1; }
}

@media(max-width:560px){
  body.page-search .cards{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  body.page-search .res-wheel{ width:58px; height:52px; }
  body.page-search .res-top h1{ font-size:clamp(23px,7vw,30px); }
  body.page-search .res-l{ gap:11px; }
}

@media(prefers-reduced-motion:reduce){
  body.page-search .esz, body.page-search #load-more, body.page-search .f-more{ transition:none; }
  body.page-search .esz:hover, body.page-search #load-more:hover{ transform:none; }
}


/* ==========================================================
   w2 · THE SEARCH PAGE — corrections
   ----------------------------------------------------------
   Three real faults, found by measuring rather than looking:

   1. The card chips were unreadable. app.css builds them as
      `.dchip.new{ color: var(--hv) }` and `.dchip.vip{ color:
      var(--ink) }`, which worked while --hv was lime. Setting
      --hv to petrol on this page turned both into dark-on-dark
      at a contrast ratio of 2.7. That one was mine.

   2. Georgian labels were letter-spaced, uppercased and given
      a 1.62 line box. Georgian has no uppercase, and its
      ascenders and descenders do not fit that box — the tops
      and tails were being shaved. scrollHeight does not catch
      it, because glyphs overflow without growing the box.

   3. "მთელი საქართველო" needed 151px and had 136px. The
      column is wider now instead of the text being cut.
   ========================================================== */

/* ---------- 1 · the chips, legible ---------- */

body.page-search .dchip{
  padding:4px 9px 5px;
  border-radius:7px;
  line-height:1.35;
  background:rgba(17,24,39,.86);
  color:#fff;
  backdrop-filter:blur(6px);
}

body.page-search .dchip.vip{
  background:var(--pk-blue);
  color:#fff;
  box-shadow:0 4px 10px -6px rgba(var(--pk-blue-rgb),.9);
}

body.page-search .dchip.new{
  background:rgba(17,24,39,.88);
  color:#fff;
}

body.page-search .pc-cut{
  padding:4px 9px 5px;
  border-radius:7px;
  line-height:1.35;
  background:#B3261E;
  color:#fff;
}


/* ---------- 2 · Georgian gets its line box back ---------- */

body.page-search .fgroup h4{
  margin-bottom:11px;

  font-family:var(--pk-font);
  font-size:11.5px;
  font-weight:700;
  line-height:1.8;
  letter-spacing:.01em;
  text-transform:none;
  color:var(--pk-ink-3);
}

body.page-search .filters-h h3{ line-height:1.6; }
body.page-search .f-clear{ line-height:1.6; }

body.page-search .sort-lb{
  font-size:12px;
  font-weight:620;
  line-height:1.6;
  letter-spacing:.01em;
  text-transform:none;
  color:var(--pk-ink-3);
}

body.page-search .f-check{ line-height:1.6; }
body.page-search .seg button{ line-height:1.6; }
body.page-search .res-count{ line-height:1.6; }
body.page-search .fchip{ height:auto; padding:6px 5px 7px 12px; line-height:1.5; }
body.page-search .empty h3{ line-height:1.45; }
body.page-search .sizebar,
body.page-search .mb{ line-height:1.6; }


/* ---------- 3 · the column fits its longest word ---------- */

body.page-search .srch{
  grid-template-columns:clamp(232px, 21vw, 276px) minmax(0,1fr);
}

body.page-search .sel{
  padding-right:30px;
  text-overflow:ellipsis;
}


/* ---------- and the part that was simply plain ---------- */

/* a white product on a white card had nothing to stand on */
body.page-search .pc-ph{
  background:linear-gradient(180deg, #FCFDFE 0%, #F2F6F8 100%);
}

body.page-search .pc{
  border:1px solid var(--pk-line);
  border-radius:18px;
  overflow:hidden;

  transition:border-color .24s var(--pk-e), transform .24s var(--pk-e),
             box-shadow .24s var(--pk-e);
}

body.page-search .pc:hover{
  border-color:var(--pk-blue-line);
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(16,24,40,.04), 0 20px 38px -24px rgba(16,24,40,.34);
}

body.page-search .pc-body{ padding:15px 16px 17px; }

/* the size is the first thing scanned, so let it lead */
body.page-search .pc-size{ font-size:21px; letter-spacing:-.04em; }
body.page-search .pc-price{ font-size:27px; letter-spacing:-.045em; }

body.page-search .pc-fav{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(6px);
  border:1px solid var(--pk-line);
  color:var(--pk-ink-3);

  transition:color .2s var(--pk-e), border-color .2s var(--pk-e),
             background .2s var(--pk-e);
}

body.page-search .pc-fav:hover{
  border-color:var(--pk-blue-line);
  background:#fff;
  color:var(--pk-blue);
}

/* the rail's scrollbar is a tool, not decoration */
body.page-search .filters{ scrollbar-width:none; }
body.page-search .filters::-webkit-scrollbar{ width:0; }
body.page-search .filters:hover{ scrollbar-width:thin; }
body.page-search .filters:hover::-webkit-scrollbar{ width:6px; }

/* the head sits on a rule, so give it room to breathe */
body.page-search .res-top{ margin-bottom:14px; }
body.page-search .res-rule{ margin-bottom:14px; }

@media(max-width:1080px){
  body.page-search .pc-size{ font-size:19px; }
  body.page-search .pc-price{ font-size:24px; }
}

@media(max-width:560px){
  body.page-search .pc-body{ padding:12px 13px 14px; }
  body.page-search .pc-size{ font-size:17px; }
  body.page-search .pc-price{ font-size:21px; }
  body.page-search .dchip{ font-size:9.5px; padding:3px 7px 4px; }
}


/* the count of what is on, and a denser grid — a 1:1 photograph on a
   three-up result page left the size and the price fighting for the
   bottom third of a very tall card */
body.page-search .filters-h h3{ display:inline-flex; align-items:center; gap:8px; }

body.page-search .f-n{
  display:grid;
  place-items:center;

  min-width:20px;
  height:20px;
  padding:0 6px;

  border-radius:999px;
  background:var(--pk-blue);
  color:#fff;

  font-family:var(--pk-font);
  font-size:11px;
  font-weight:800;
  line-height:1;
  font-feature-settings:"tnum" 1;
}

body.page-search .pc-ph{ aspect-ratio:5 / 4; }
body.page-search .pc-ph img{ padding:4%; }

@media(max-width:560px){
  body.page-search .pc-ph{ aspect-ratio:1 / 1; }
}


/* the stand-in for a listing with no photograph */
.pc-draw{
  position:absolute;
  inset:0;

  display:grid;
  place-items:center;
  gap:0;
}

.pc-draw svg{
  display:block;
  width:min(58%, 130px);
  height:auto;
}

.pc-draw em{
  position:absolute;
  bottom:11px;
  left:0;
  right:0;

  font-style:normal;
  font-family:var(--pk-font);
  font-size:10px;
  font-weight:680;
  letter-spacing:.06em;
  line-height:1.6;
  text-align:center;
  color:var(--pk-ink-4);
}

.pd-band { fill:none; stroke:#DCE3E8; }
.pd-edge { fill:none; stroke:#C3CFD6; stroke-width:1.2; }
.pd-rim  { fill:#F4F7F9; stroke:#C3CFD6; stroke-width:1.2; }
.pd-lip  { fill:none; stroke:#DDE5EA; stroke-width:1.4; }
.pd-spoke{ fill:#E7EDF1; stroke:#C3CFD6; stroke-width:.7; stroke-linejoin:round; }
.pd-hub  { fill:#C3CFD6; }


/* the tyre stands on the card, not in a box on the card */
.pc-ph{ background:transparent; }
body.page-home .pc-ph,
body.page-search .pc-ph{ background:transparent; }


/* ==========================================================
   y · THE LISTING PAGE
   ----------------------------------------------------------
   The page where the decision is made was the last one still
   on the old beige ground with the old card.

   Its own idea: 225/45 R17 is three numbers almost nobody
   converts. Everything that follows from them — sidewall in
   millimetres, overall diameter, circumference, revolutions
   per kilometre — is computed and drawn to scale, so the page
   tells the buyer what the tyre actually measures instead of
   leaving them to work it out.
   ========================================================== */

body.page-listing{
  --paper:#FFFFFF;
  --paper-2:#F8FAFC;
  --paper-3:#F1F5F9;
  --card:#FFFFFF;

  --ink:  #111827;
  --ink-2:#475467;
  --ink-3:#667085;
  --ink-4:#98A2B3;

  --rule:  #E5E7EB;
  --rule-2:#D5DAE1;

  --hv:     #0F6E86;
  --hv-deep:#0B4657;

  background:var(--pk-bg);
  color:var(--pk-ink);
}

body.page-listing::before{ display:none; }
body.page-listing ::selection{ background:var(--pk-blue-tint); color:var(--pk-blue-d); }

body.page-listing .rule{ height:1px; background:var(--pk-line); }


/* ---------- the trail ---------- */

body.page-listing .crumbs{
  display:flex;
  align-items:center;
  gap:7px;

  margin-bottom:18px;

  color:var(--pk-ink-4);
  font-size:12.5px;
  line-height:1.7;
}

body.page-listing .crumbs a{
  color:var(--pk-ink-3);
  transition:color .18s var(--pk-e);
}

body.page-listing .crumbs a:hover{ color:var(--pk-blue); }
body.page-listing .crumbs a:last-child{ color:var(--pk-ink); font-weight:640; }


/* ---------- the photograph, on a lit stage ---------- */

body.page-listing .gal-main{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  aspect-ratio:1 / 1;

  border:1px solid var(--pk-line);
  border-radius:22px;
  background:
    radial-gradient(62% 52% at 50% 42%, #FFFFFF 0%, #F4F8FA 62%, #E8EFF3 100%);
  box-shadow:var(--pk-sh-1);
}

/* the floor it stands on */
body.page-listing .gal-main::after{
  content:"";
  position:absolute;
  z-index:0;
  left:22%;
  right:22%;
  bottom:9%;

  height:7%;

  border-radius:50%;
  background:radial-gradient(closest-side, rgba(22,42,58,.20), transparent 72%);
}

body.page-listing .gal-main img{
  position:relative;
  z-index:1;

  width:100%;
  height:100%;
  object-fit:contain;
  padding:5%;

  mix-blend-mode:multiply;
  cursor:zoom-in;
}

body.page-listing .gal-nav{
  z-index:3;

  width:40px;
  height:40px;

  border:1px solid var(--pk-line);
  border-radius:50%;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);
  color:var(--pk-ink-2);

  transition:border-color .18s var(--pk-e), color .18s var(--pk-e),
             transform .18s var(--pk-e);
}

body.page-listing .gal-nav:hover{
  border-color:var(--pk-blue-line);
  color:var(--pk-blue);
  transform:scale(1.06);
}

body.page-listing .gal-count{
  z-index:3;

  padding:5px 11px 6px;

  border-radius:999px;
  background:rgba(17,24,39,.82);
  backdrop-filter:blur(6px);
  color:#fff;

  font-family:var(--pk-font);
  font-size:11.5px;
  font-weight:700;
  line-height:1.5;
  font-feature-settings:"tnum" 1;
}

body.page-listing .gal-thumbs{
  display:flex;
  gap:9px;
  margin-top:12px;
}

body.page-listing .gal-thumbs button{
  width:74px;
  height:74px;

  border:1px solid var(--pk-line);
  border-radius:13px;
  overflow:hidden;
  background:var(--pk-bg-2);
  cursor:pointer;

  transition:border-color .18s var(--pk-e), transform .18s var(--pk-e);
}

body.page-listing .gal-thumbs button img{
  width:100%; height:100%;
  object-fit:contain;
  padding:6%;
  mix-blend-mode:multiply;
}

body.page-listing .gal-thumbs button:hover{ border-color:var(--pk-line-2); transform:translateY(-2px); }
body.page-listing .gal-thumbs button.on{ border-color:var(--pk-blue); box-shadow:0 0 0 3px rgba(var(--pk-blue-rgb),.13); }


/* ---------- the size, decoded ---------- */

body.page-listing .mx{ margin-top:clamp(28px,3.4vw,44px); }

body.page-listing .mx h3,
body.page-listing .specs h3,
body.page-listing .desc-block h3,
body.page-listing .similar h3{
  margin-bottom:12px;

  font-family:var(--fd);
  font-size:clamp(17px,1.9vw,21px);
  font-weight:730;
  line-height:1.45;
  letter-spacing:-.02em;
  color:var(--pk-ink);
}

.mx-in{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(18px,3vw,44px);

  margin-top:18px;
  padding:clamp(18px,2.2vw,28px);

  background:linear-gradient(168deg, var(--pk-bg-2), #fff 72%);
  border:1px solid var(--pk-line);
  border-radius:20px;
}

.mx-art{ display:block; min-width:0; }
.mx-art svg{ display:block; width:100%; height:auto; }

.mx-band { fill:none; stroke:#E4EBF0; }
.mx-edge { fill:none; stroke:#0F1A23; stroke-width:1.5; }
.mx-rim  { fill:#EEF3F6; stroke:#0F1A23; stroke-width:1.5; }
.mx-lip  { fill:none; stroke:#C7D3DB; stroke-width:1.4; }
.mx-spoke{ fill:#FFFFFF; stroke:#8C9EAA; stroke-width:1; stroke-linejoin:round; }
.mx-hub  { fill:#8C9EAA; }

.mx-dim{ stroke:var(--pk-blue); stroke-width:1.2; fill:none; }

.mx-dl{
  fill:var(--pk-blue-d);
  font-family:var(--pk-font);
  font-size:11px;
  font-weight:750;
  font-feature-settings:"tnum" 1;
}

.mx-rows{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.mx-rows > div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;

  padding:9px 0;
}

.mx-rows dt{
  color:var(--pk-ink-3);
  font-size:13.5px;
  line-height:1.6;
}

.mx-rows dd{
  margin:0;
  display:flex;
  align-items:baseline;
  gap:7px;
  white-space:nowrap;

  color:var(--pk-ink-3);
  font-size:12.5px;
  line-height:1.6;
}

.mx-rows dd b{
  font-family:var(--pk-font);
  font-size:18px;
  font-weight:800;
  letter-spacing:-.035em;
  font-feature-settings:"tnum" 1;
  color:var(--pk-ink);
}

.mx-rows dd i{
  padding-left:8px;
  border-left:1px solid var(--pk-line);

  font-style:normal;
  font-size:11.5px;
  font-feature-settings:"tnum" 1;
  color:var(--pk-ink-4);
}

.mx-hr{
  display:block !important;
  height:1px;
  margin:7px 0;
  padding:0 !important;
  background:var(--pk-line);
}

.mx-rows .is-key dt{ color:var(--pk-ink); font-weight:660; }
.mx-rows .is-key dd b{ font-size:24px; color:var(--pk-blue-d); }

.mx-note{
  margin-top:12px;
  color:var(--pk-ink-4);
  font-size:11.5px;
  line-height:1.65;
}


/* ---------- the plain spec table ---------- */

body.page-listing .specs,
body.page-listing .desc-block,
body.page-listing .similar{ margin-top:clamp(28px,3.4vw,44px); }

body.page-listing .spec-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(168px,1fr));

  margin-top:16px;

  background:var(--pk-bg);
  border:1px solid var(--pk-line);
  border-radius:16px;
  overflow:hidden;
}

body.page-listing .spec-grid > div{
  padding:14px 16px;
  border-right:1px solid var(--pk-line);
  border-top:1px solid var(--pk-line);
}

body.page-listing .spec-grid > div:nth-child(-n+4){ border-top:0; }
body.page-listing .spec-grid > div:last-child{ border-right:0; }

body.page-listing .spec-grid .k{
  display:block;

  color:var(--pk-ink-4);
  font-size:11.5px;
  font-weight:640;
  line-height:1.7;
  letter-spacing:.01em;
  text-transform:none;
}

body.page-listing .spec-grid .v{
  display:block;
  margin-top:2px;

  font-family:var(--pk-font);
  font-size:17px;
  font-weight:760;
  line-height:1.5;
  letter-spacing:-.03em;
  font-feature-settings:"tnum" 1;
  color:var(--pk-ink);
}

body.page-listing .spec-grid .v.txt{ font-size:14.5px; font-weight:620; letter-spacing:-.01em; }

body.page-listing .desc-block p{
  margin-top:14px;
  color:var(--pk-ink-2);
  font-size:14.5px;
  line-height:1.75;
  white-space:pre-line;
}

body.page-listing .similar .cards{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(11px,1.3vw,16px);
  margin-top:16px;
}


/* ---------- the side, where the decision lands ---------- */

body.page-listing .ld-side{
  align-self:start;
  padding:clamp(20px,2.2vw,26px);

  background:var(--pk-bg);
  border:1px solid var(--pk-line);
  border-radius:20px;
  box-shadow:var(--pk-sh-2);
}

body.page-listing .ld-brand{
  display:block;

  font-family:var(--pk-font);
  font-size:11px;
  font-weight:750;
  line-height:1.6;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--pk-blue);
}

body.page-listing .ld-size{
  margin-top:6px;

  font-family:var(--pk-font);
  font-size:clamp(30px,3.6vw,40px);
  font-weight:820;
  line-height:1.05;
  letter-spacing:-.05em;
  font-feature-settings:"tnum" 1;
  color:var(--pk-ink);
}

body.page-listing .ld-size .sl{ font-weight:300; color:var(--pk-ink-4); margin:0 2px; }

body.page-listing .ld-model{
  margin-top:5px;
  color:var(--pk-ink-2);
  font-size:14.5px;
  line-height:1.6;
}

body.page-listing .ld-price{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--pk-line);

  font-family:var(--pk-font);
  font-size:clamp(32px,3.8vw,42px);
  font-weight:830;
  line-height:1;
  letter-spacing:-.05em;
  font-feature-settings:"tnum" 1;
  color:var(--pk-ink);
}

body.page-listing .ld-price{ display:block; }

body.page-listing .ld-price small{
  display:block;
  margin-top:8px;

  font-family:inherit;
  font-size:12.5px;
  font-weight:500;
  line-height:1.6;
  letter-spacing:0;
  color:var(--pk-ink-3);
}

.ld-total{
  display:inline-flex;
  align-items:baseline;
  gap:6px;

  margin-top:10px;
  padding:6px 11px 7px;

  border-radius:9px;
  background:var(--pk-blue-tint);
  color:var(--pk-blue-d);

  font-family:var(--pk-font);
  font-size:12.5px;
  font-weight:620;
  line-height:1.5;
  letter-spacing:0;
}

.ld-total b{ font-size:15px; font-weight:820; letter-spacing:-.03em; }

body.page-listing .ld-facts{
  display:flex;
  flex-wrap:wrap;
  gap:6px;

  margin-top:18px;
}

body.page-listing .ld-facts .tag{
  display:inline-flex;
  align-items:center;
  gap:5px;

  padding:5px 10px 6px;

  border:1px solid var(--pk-line);
  border-radius:8px;
  background:var(--pk-bg);
  color:var(--pk-ink-2);

  font-size:12px;
  font-weight:600;
  line-height:1.5;
}

body.page-listing .ld-facts .tag.new{
  border-color:var(--pk-blue-line);
  background:var(--pk-blue-tint);
  color:var(--pk-blue-d);
}

body.page-listing .ld-cta{
  display:flex;
  flex-direction:column;
  gap:9px;

  margin-top:20px;
}

body.page-listing .ld-cta .btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  height:50px;

  border-radius:13px;

  font-family:var(--pk-font);
  font-size:15px;
  font-weight:700;
  line-height:1.5;
}

body.page-listing .ld-cta .btn-1{
  background:var(--pk-blue-d);
  border:1px solid var(--pk-blue-d);
  color:#fff;
  box-shadow:0 10px 22px -14px rgba(11,70,87,.9);

  transition:background .2s var(--pk-e), transform .18s var(--pk-e);
}

body.page-listing .ld-cta .btn-1:hover{ background:var(--pk-blue); transform:translateY(-1px); }

body.page-listing .ld-cta .btn-2{
  background:var(--pk-bg);
  border:1px solid var(--pk-line-2);
  color:var(--pk-ink);

  transition:border-color .2s var(--pk-e), background .2s var(--pk-e);
}

body.page-listing .ld-cta .btn-2:hover{ border-color:var(--pk-blue-line); background:var(--pk-blue-tint); }


body.page-listing .seller{
  display:flex;
  align-items:center;
  gap:12px;

  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--pk-line);
}

body.page-listing .s-n{
  display:flex;
  align-items:center;
  gap:6px;

  font-family:var(--pk-font);
  font-size:14.5px;
  font-weight:720;
  line-height:1.5;
  color:var(--pk-ink);
}

body.page-listing .s-n svg{ color:var(--pk-blue); }

body.page-listing .s-t{
  margin-top:2px;
  color:var(--pk-ink-4);
  font-size:12.5px;
  line-height:1.6;
}

body.page-listing .s-go{
  margin-left:auto;

  display:grid;
  place-items:center;

  width:34px;
  height:34px;

  border:1px solid var(--pk-line);
  border-radius:10px;
  color:var(--pk-ink-3);

  transition:border-color .18s var(--pk-e), color .18s var(--pk-e);
}

body.page-listing .s-go:hover{ border-color:var(--pk-blue-line); color:var(--pk-blue); }

body.page-listing .report-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;

  margin-top:16px;
  padding:0;

  border:0;
  background:none;
  color:var(--pk-ink-4);

  font-size:12.5px;
  line-height:1.6;
  cursor:pointer;

  transition:color .18s var(--pk-e);
}

body.page-listing .report-btn:hover{ color:#B3261E; }


/* ---------- the phone bar ---------- */

body.page-listing .mobile-cta{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--pk-line);
}

body.page-listing .mobile-cta .p{
  font-family:var(--pk-font);
  font-size:22px;
  font-weight:820;
  line-height:1.3;
  letter-spacing:-.04em;
  font-feature-settings:"tnum" 1;
  color:var(--pk-ink);
}

body.page-listing .mobile-cta .btn-1{
  height:46px;
  border-radius:12px;
  background:var(--pk-blue-d);
  color:#fff;
  font-weight:700;
}


/* ---------- responsive ---------- */

@media(max-width:1080px){
  body.page-listing .similar .cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media(max-width:900px){
  .mx-in{ grid-template-columns:1fr; gap:20px; }
  .mx-art{ max-width:320px; margin:0 auto; }
}

@media(max-width:560px){
  body.page-listing .gal-thumbs button{ width:58px; height:58px; border-radius:11px; }
  body.page-listing .ld-side{ padding:18px 16px; border-radius:16px; }
  body.page-listing .spec-grid{ grid-template-columns:1fr 1fr; }
  .mx-rows dd b{ font-size:16px; }
  .mx-rows .is-key dd b{ font-size:20px; }
}

@media(prefers-reduced-motion:reduce){
  body.page-listing .gal-nav, body.page-listing .gal-thumbs button, body.page-listing .ld-cta .btn{ transition:none; }
  body.page-listing .gal-nav:hover, body.page-listing .gal-thumbs button:hover{ transform:none; }
  body.page-listing .ld-cta .btn-1:hover{ transform:none; }
}


body.page-listing .ld-price .cur{
  margin-left:6px;
  font-size:.5em;
  font-weight:700;
  letter-spacing:0;
  color:var(--pk-ink-3);
}


/* ==========================================================
   z · THE DEALERS
   ----------------------------------------------------------
   The old plate stacked a label straight against its number —
   .spm carried no style at all, so it read "განცხადება6", and
   the three groups sat in a nowrap flex row that pushed the
   city clean outside the card.

   Rebuilt around what a dealer is actually judged on: how much
   they hold, where their prices start, which rim sizes they
   carry, and what other buyers scored them. The rim range is
   drawn as a track, so two dealers can be compared at a glance
   instead of read.
   ========================================================== */

body.page-shops{
  --paper:#FFFFFF;
  --paper-2:#F8FAFC;
  --paper-3:#F1F5F9;

  --ink:  #111827;
  --ink-2:#475467;
  --ink-3:#667085;
  --ink-4:#98A2B3;

  --rule:  #E5E7EB;
  --rule-2:#D5DAE1;

  --hv:     #0F6E86;
  --hv-deep:#0B4657;

  background:var(--pk-bg);
  color:var(--pk-ink);
}

body.page-shops::before{ display:none; }
body.page-shops ::selection{ background:var(--pk-blue-tint); color:var(--pk-blue-d); }

.shp{ padding-top:clamp(26px,3.4vw,46px); padding-bottom:clamp(40px,5vw,72px); }


/* ---------- the head ---------- */

.shp-h{ margin-bottom:clamp(22px,2.6vw,34px); }

.shp-h-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(18px,4vw,56px);
  flex-wrap:wrap;

  margin-top:14px;
}

.shp-h h1{
  font-family:var(--fd);
  font-size:clamp(26px,3.2vw,40px);
  font-weight:730;
  line-height:1.16;
  letter-spacing:-.03em;
  color:var(--pk-ink);
}

.shp-h p{
  max-width:44ch;
  color:var(--pk-ink-3);
  font-size:14px;
  line-height:1.65;
}

.shp-h p b{
  font-family:var(--pk-font);
  font-weight:800;
  font-feature-settings:"tnum" 1;
  color:var(--pk-ink);
}


/* ---------- the plate ---------- */

.shp-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px);
}

.shp-c{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  display:flex;
  flex-direction:column;

  padding:clamp(18px,2vw,24px);

  background:var(--pk-bg);
  border:1px solid var(--pk-line);
  border-radius:20px;
  box-shadow:var(--pk-sh-1);

  transition:border-color .24s var(--pk-e), transform .24s var(--pk-e),
             box-shadow .24s var(--pk-e);
}

/* the dealer's own colour, pooled behind the monogram */
.shp-c::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:auto auto 100% -10%;

  width:60%;
  padding-bottom:60%;

  border-radius:50%;
  background:radial-gradient(closest-side, rgba(var(--pk-blue-rgb),.10), transparent 72%);
  transform:translateY(58%);

  transition:opacity .3s var(--pk-e);
  opacity:0;
  pointer-events:none;
}

.shp-c:hover{
  border-color:var(--pk-blue-line);
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(16,24,40,.04), 0 22px 40px -26px rgba(16,24,40,.34);
}

.shp-c:hover::before{ opacity:1; }

.shp-c:focus-visible{ outline:2px solid var(--pk-blue); outline-offset:3px; }

.shp-c > *{ position:relative; z-index:1; }


/* ---------- who ---------- */

.shp-top{
  display:flex;
  align-items:center;
  gap:13px;
}

.shp-mono{
  display:grid;
  place-items:center;
  flex-shrink:0;

  width:54px;
  height:54px;

  border-radius:15px;
  overflow:hidden;

  background:hsl(var(--h,200) 42% 96%);
  box-shadow:inset 0 0 0 1px hsl(var(--h,200) 38% 86%);
  color:hsl(var(--h,200) 46% 32%);

  font-family:var(--pk-font);
  font-size:21px;
  font-weight:800;
  line-height:1;
}

.shp-mono img{ width:100%; height:100%; object-fit:cover; }

.shp-id{ display:block; min-width:0; flex:1; }

.shp-n{
  display:flex;
  align-items:center;
  gap:7px;

  font-family:var(--pk-font);
  font-size:16.5px;
  font-weight:750;
  line-height:1.45;
  letter-spacing:-.02em;
  color:var(--pk-ink);
}

.shp-v{
  display:grid;
  place-items:center;
  flex-shrink:0;
  color:var(--pk-blue);
}

.shp-v svg{ display:block; }

.shp-city{
  display:inline-flex;
  align-items:center;
  gap:5px;

  margin-top:3px;

  color:var(--pk-ink-4);
  font-size:12.5px;
  line-height:1.6;
}

.shp-rate{
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex-shrink:0;

  padding:6px 11px 7px;

  border:1px solid var(--pk-line);
  border-radius:999px;
  background:var(--pk-bg-2);

  font-family:var(--pk-font);
  font-size:12px;
  line-height:1.4;
  font-feature-settings:"tnum" 1;
  color:var(--pk-ink-3);
}

.shp-rate svg{ width:13px; height:13px; color:#E8A93B; }
.shp-rate b{ font-size:14px; font-weight:800; letter-spacing:-.02em; color:var(--pk-ink); }
.shp-rate em{ font-style:normal; color:var(--pk-ink-4); }
.shp-rate em::before{ content:"·"; margin:0 4px; }

.shp-d{
  margin-top:14px;

  color:var(--pk-ink-3);
  font-size:13.5px;
  line-height:1.65;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}


/* ---------- what they carry ---------- */

.shp-range{
  margin-top:16px;
  padding:13px 14px 14px;

  background:var(--pk-bg-2);
  border:1px solid var(--pk-line);
  border-radius:13px;
}

.shp-range-l{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;

  color:var(--pk-ink-4);
  font-size:11.5px;
  line-height:1.6;
}

.shp-range-l b{
  font-family:var(--pk-font);
  font-size:13.5px;
  font-weight:800;
  letter-spacing:-.02em;
  font-feature-settings:"tnum" 1;
  color:var(--pk-blue-d);
  white-space:nowrap;
}

.shp-track{
  display:flex;
  gap:3px;
  margin-top:9px;
}

.shp-track i{
  flex:1;
  height:6px;

  border-radius:2px;
  background:var(--pk-line);

  transition:background .24s var(--pk-e);
}

.shp-track i.on{ background:linear-gradient(180deg, #1B7E9B, var(--pk-blue)); }

.shp-c:hover .shp-track i.on{ background:linear-gradient(180deg, #2BA6C6, #0E5B71); }


/* ---------- the numbers ---------- */

.shp-f{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px 16px;

  margin-top:auto;
  padding-top:16px;
}

.shp-c .shp-f{ margin-top:16px; }

.shp-stat{
  color:var(--pk-ink-3);
  font-size:12.5px;
  line-height:1.6;
  white-space:nowrap;
}

.shp-stat b{
  font-family:var(--pk-font);
  font-size:16px;
  font-weight:800;
  letter-spacing:-.03em;
  font-feature-settings:"tnum" 1;
  color:var(--pk-ink);
}

.shp-go{
  margin-left:auto;

  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:9px 15px;

  border:1px solid var(--pk-line-2);
  border-radius:999px;
  color:var(--pk-ink);

  font-family:var(--pk-font);
  font-size:13px;
  font-weight:640;
  line-height:1.5;
  white-space:nowrap;

  transition:background .22s var(--pk-e), border-color .22s var(--pk-e),
             color .22s var(--pk-e), gap .22s var(--pk-e);
}

.shp-c:hover .shp-go{
  background:var(--pk-blue-d);
  border-color:var(--pk-blue-d);
  color:#fff;
  gap:11px;
}


/* ---------- nothing yet ---------- */

.shp-empty{
  padding:clamp(40px,6vw,80px) 24px;

  background:var(--pk-bg-2);
  border:1px solid var(--pk-line);
  border-radius:20px;
  text-align:center;
}

.shp-empty h3{
  font-family:var(--fd);
  font-size:20px;
  font-weight:720;
  line-height:1.45;
  color:var(--pk-ink);
}

.shp-empty p{ margin-top:7px; color:var(--pk-ink-3); font-size:14px; line-height:1.6; }


/* ---------- responsive ---------- */

@media(max-width:900px){
  .shp-grid{ grid-template-columns:1fr; }
}

@media(max-width:560px){
  .shp-c{ padding:16px 15px; border-radius:16px; }
  .shp-mono{ width:46px; height:46px; border-radius:13px; font-size:18px; }
  .shp-n{ font-size:15.5px; }
  .shp-top{ flex-wrap:wrap; gap:11px; }
  .shp-rate{ order:3; }
  .shp-f{ gap:8px 13px; }
  .shp-go{ margin-left:0; width:100%; justify-content:center; }
}

@media(prefers-reduced-motion:reduce){
  .shp-c, .shp-go, .shp-track i{ transition:none; }
  .shp-c:hover{ transform:none; }
}


/* ==========================================================
   aa · SEARCH BY CAR
   ----------------------------------------------------------
   The step rail never advanced: show() toggled .vf-step while
   the markup wrote .step, so every screen said "1 მარკა".

   No manufacturer marks are drawn — those are trademarks and
   we hold no licensed files. Each make carries its published
   colour instead, which separates twelve plates perfectly
   well. If real logo files arrive, the plate already has the
   slot for them.

   And the payoff screen no longer lists sizes as text: each
   factory size is drawn at true proportion, so a 45 profile
   next to a 55 is a picture, not homework.
   ========================================================== */

body.page-vehicle{
  --paper:#FFFFFF;
  --paper-2:#F8FAFC;
  --paper-3:#F1F5F9;

  --ink:  #111827;
  --ink-2:#475467;
  --ink-3:#667085;
  --ink-4:#98A2B3;

  --rule:  #E5E7EB;
  --rule-2:#D5DAE1;

  --hv:     #0F6E86;
  --hv-deep:#0B4657;

  background:var(--pk-bg);
  color:var(--pk-ink);
}

body.page-vehicle::before{ display:none; }
body.page-vehicle ::selection{ background:var(--pk-blue-tint); color:var(--pk-blue-d); }

.vf{ padding-top:clamp(26px,3.4vw,46px); padding-bottom:clamp(44px,5vw,80px); }


/* ---------- the head ---------- */

.vf-head{ text-align:center; margin-bottom:clamp(22px,2.6vw,32px); }

.vf-head .pk-eyebrow{ justify-content:center; }

.vf-head h1{
  margin-top:14px;

  font-family:var(--fd);
  font-size:clamp(27px,3.4vw,42px);
  font-weight:730;
  line-height:1.14;
  letter-spacing:-.03em;
  color:var(--pk-ink);
}

.vf-head p{
  max-width:52ch;
  margin:11px auto 0;

  color:var(--pk-ink-3);
  font-size:14.5px;
  line-height:1.65;
}


/* ---------- the garage ---------- */

.vf-garage{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;

  margin-bottom:22px;
}

.vf-garage-l{
  color:var(--pk-ink-4);
  font-size:11.5px;
  font-weight:660;
  line-height:1.6;
}

.vf-quick{
  display:inline-flex;
  align-items:center;
  gap:7px;

  padding:8px 14px;

  border:1px solid var(--pk-line-2);
  border-radius:999px;
  background:var(--pk-bg);
  color:var(--pk-ink);

  font-family:var(--pk-font);
  font-size:13px;
  font-weight:620;
  line-height:1.5;
  cursor:pointer;

  transition:border-color .18s var(--pk-e), background .18s var(--pk-e);
}

.vf-quick:hover{ border-color:var(--pk-blue-line); background:var(--pk-blue-tint); }


/* ---------- the rail ---------- */

.vf-steps{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;

  margin-bottom:clamp(22px,2.6vw,32px);
}

.vf-step{
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:7px 13px 8px;

  border:1px solid transparent;
  border-radius:999px;

  color:var(--pk-ink-4);
  font-size:13px;
  line-height:1.6;

  transition:background .22s var(--pk-e), border-color .22s var(--pk-e),
             color .22s var(--pk-e);
}

.vf-step .b{
  display:grid;
  place-items:center;

  width:22px;
  height:22px;

  border-radius:50%;
  background:var(--pk-bg-3);
  color:var(--pk-ink-3);

  font-family:var(--pk-font);
  font-size:11.5px;
  font-weight:800;
  line-height:1;

  transition:background .22s var(--pk-e), color .22s var(--pk-e);
}

.vf-step .v{
  font-family:var(--pk-font);
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--pk-ink);
}

.vf-step .v:empty{ display:none; }

.vf-step.on{
  border-color:var(--pk-blue-line);
  background:var(--pk-blue-tint);
  color:var(--pk-blue-d);
}

.vf-step.on .b{ background:var(--pk-blue); color:#fff; }

.vf-step.done{ color:var(--pk-ink-2); }
.vf-step.done .b{ background:var(--pk-blue-d); color:#fff; }
.vf-step.done .t{ display:none; }

.vf-line{
  width:clamp(16px,3vw,40px);
  height:1px;
  background:var(--pk-line-2);
}


/* ---------- the panels ---------- */

.vf-panel{ display:none; }
.vf-panel.on{ display:block; animation:vf-in .3s var(--pk-e) both; }

@keyframes vf-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

.vf-find{
  position:relative;

  display:flex;
  align-items:center;
  gap:10px;

  max-width:340px;
  margin:0 auto 20px;
  padding:0 14px;

  height:46px;

  border:1px solid var(--pk-line);
  border-radius:999px;
  background:var(--pk-bg);
  color:var(--pk-ink-4);

  transition:border-color .18s var(--pk-e), box-shadow .18s var(--pk-e);
}

.vf-find:focus-within{
  border-color:var(--pk-blue);
  box-shadow:0 0 0 3px rgba(var(--pk-blue-rgb),.13);
}

.vf-find input{
  flex:1;
  min-width:0;

  border:0;
  background:none;
  outline:none;

  font-family:var(--pk-font);
  font-size:14px;
  color:var(--pk-ink);
}

.vf-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(164px,1fr));
  gap:clamp(9px,1.1vw,13px);
}


/* ---------- a make ---------- */

.vf-make{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  display:block;
  padding:16px 16px 15px 19px;

  border:1px solid var(--pk-line);
  border-radius:16px;
  background:var(--pk-bg);
  text-align:left;
  cursor:pointer;

  transition:border-color .22s var(--pk-e), transform .22s var(--pk-e),
             box-shadow .22s var(--pk-e);
}

/* the make's own colour, as a spine */
.vf-make::before{
  content:"";
  position:absolute;
  z-index:1;
  left:0;
  top:14px;
  bottom:14px;

  width:3px;

  border-radius:0 3px 3px 0;
  background:var(--mc, var(--pk-blue));

  transition:top .22s var(--pk-e), bottom .22s var(--pk-e);
}

.vf-make:hover{
  border-color:var(--pk-line-2);
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(16,24,40,.04), 0 14px 26px -18px rgba(16,24,40,.3);
}

.vf-make:hover::before{ top:0; bottom:0; }

.vf-make:focus-visible{ outline:2px solid var(--pk-blue); outline-offset:3px; }

.vm-ghost{
  position:absolute;
  z-index:0;
  right:-6px;
  bottom:-22px;

  font-family:var(--pk-font);
  font-size:74px;
  font-weight:850;
  line-height:1;
  letter-spacing:-.06em;
  color:var(--mc, var(--pk-blue));
  opacity:.07;

  transition:opacity .22s var(--pk-e), transform .3s var(--pk-e);
  pointer-events:none;
}

.vf-make:hover .vm-ghost{ opacity:.13; transform:translateY(-3px); }

.vm-n{
  position:relative;
  z-index:2;

  display:block;

  font-family:var(--pk-font);
  font-size:15px;
  font-weight:730;
  line-height:1.45;
  letter-spacing:-.02em;
  color:var(--pk-ink);
}

.vm-c{
  position:relative;
  z-index:2;

  display:block;
  margin-top:2px;

  color:var(--pk-ink-4);
  font-size:11.5px;
  line-height:1.6;
}

.vf-none{
  margin-top:26px;
  text-align:center;
  color:var(--pk-ink-4);
  font-size:14px;
  line-height:1.6;
}


/* ---------- models and years ---------- */

.vf-cell{
  padding:15px 16px;

  border:1px solid var(--pk-line);
  border-radius:14px;
  background:var(--pk-bg);
  color:var(--pk-ink);

  font-family:var(--pk-font);
  font-size:14.5px;
  font-weight:650;
  line-height:1.5;
  cursor:pointer;

  transition:border-color .2s var(--pk-e), background .2s var(--pk-e),
             transform .2s var(--pk-e);
}

.vf-cell:hover{
  border-color:var(--pk-blue-line);
  background:var(--pk-blue-tint);
  transform:translateY(-2px);
}

.vf-years{ grid-template-columns:repeat(auto-fill, minmax(104px,1fr)); }

.vc-y{
  font-family:var(--pk-font);
  font-size:18px;
  font-weight:790;
  letter-spacing:-.03em;
  font-feature-settings:"tnum" 1;
}

.vf-back{
  display:inline-flex;
  align-items:center;
  gap:6px;

  margin-bottom:16px;
  padding:0;

  border:0;
  background:none;
  color:var(--pk-blue);

  font-family:var(--pk-font);
  font-size:13px;
  font-weight:640;
  line-height:1.6;
  cursor:pointer;

  transition:gap .18s var(--pk-e);
}

.vf-back:hover{ gap:10px; }


/* ---------- the payoff ---------- */

.vf-res-h{
  position:relative;

  padding:20px 22px 21px;
  margin-bottom:16px;

  border:1px solid var(--pk-line);
  border-left:4px solid var(--mc, var(--pk-blue));
  border-radius:16px;
  background:linear-gradient(100deg, var(--pk-bg-2), #fff 62%);
}

.vf-res-car{
  display:block;

  font-family:var(--pk-font);
  font-size:11.5px;
  font-weight:750;
  line-height:1.6;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--pk-ink-4);
}

.vf-res-h h2{
  margin-top:5px;

  font-family:var(--fd);
  font-size:clamp(20px,2.4vw,27px);
  font-weight:730;
  line-height:1.3;
  letter-spacing:-.025em;
  color:var(--pk-ink);
}

.vf-res-h p{ margin-top:5px; color:var(--pk-ink-3); font-size:13.5px; line-height:1.6; }

.vf-fits{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(196px,1fr));
  gap:clamp(10px,1.2vw,14px);
}

.vf-fit{
  position:relative;
  overflow:hidden;

  display:flex;
  align-items:center;
  gap:14px;

  padding:16px 17px;

  border:1px solid var(--pk-line);
  border-radius:16px;
  background:var(--pk-bg);

  animation:vf-in .4s var(--pk-e) both;
  animation-delay:var(--d, 0ms);

  transition:border-color .22s var(--pk-e), transform .22s var(--pk-e),
             box-shadow .22s var(--pk-e);
}

.vf-fit:hover{
  border-color:var(--pk-blue-line);
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(16,24,40,.04), 0 18px 32px -22px rgba(16,24,40,.32);
}

.vf-oe{
  position:absolute;
  top:0;
  right:0;

  padding:4px 10px 5px;

  border-radius:0 15px 0 10px;
  background:var(--pk-blue);
  color:#fff;

  font-family:var(--pk-font);
  font-size:9.5px;
  font-weight:780;
  line-height:1.5;
  letter-spacing:.09em;
}

.vf-art{
  display:block;
  flex-shrink:0;

  width:58px;
  height:58px;
}

.vf-art svg{ display:block; width:100%; height:100%; }

.vw-band { fill:none; stroke:#16222E; }
.vw-edge { fill:none; stroke:#0A131B; stroke-width:1.4; }
.vw-rim  { fill:#D9E3EA; stroke:#0B141C; stroke-width:1.4; }
.vw-lip  { fill:none; stroke:#AEBECA; stroke-width:1.3; }
.vw-spoke{ fill:#F2F6F8; stroke:#0C161E; stroke-width:.6; stroke-linejoin:round; }
.vw-hub  { fill:#59707F; }

.vf-s{
  display:flex;
  align-items:baseline;

  font-family:var(--pk-font);
  font-size:20px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.04em;
  font-feature-settings:"tnum" 1;
  color:var(--pk-ink);
}

.vf-s i{ font-style:normal; font-weight:300; color:var(--pk-ink-4); margin:0 1px; }
.vf-s em{ font-style:normal; font-size:.7em; margin-left:5px; color:var(--pk-ink-3); }

.vf-m{
  margin-top:4px;
  display:block;

  color:var(--pk-ink-4);
  font-size:11.5px;
  line-height:1.6;
}

.vf-m b{
  font-family:var(--pk-font);
  font-size:13.5px;
  font-weight:800;
  letter-spacing:-.02em;
  font-feature-settings:"tnum" 1;
  color:var(--pk-ink);
}

.vf-t{ display:block; min-width:0; }

.vf-m.is-none{ color:var(--pk-ink-4); }

/* the badge must not land on the type */
.vf-fit{ padding-top:20px; }
.vf-fit:has(.vf-oe){ padding-top:26px; }

.vf-empty{
  padding:clamp(34px,5vw,64px) 24px;

  background:var(--pk-bg-2);
  border:1px solid var(--pk-line);
  border-radius:18px;
  text-align:center;
}

.vf-empty h3{
  font-family:var(--fd);
  font-size:19px;
  font-weight:720;
  line-height:1.45;
  color:var(--pk-ink);
}

.vf-empty p{ margin-top:7px; color:var(--pk-ink-3); font-size:14px; line-height:1.6; }

.vf-save-row{ margin-top:22px; text-align:center; }

.vf-save{
  display:inline-flex;
  align-items:center;
  gap:8px;

  height:44px;
  padding:0 20px;

  border:1px solid var(--pk-line-2);
  border-radius:999px;
  background:var(--pk-bg);
  color:var(--pk-ink);

  font-family:var(--pk-font);
  font-size:13.5px;
  font-weight:640;
  line-height:1.5;
  cursor:pointer;

  transition:border-color .2s var(--pk-e), background .2s var(--pk-e);
}

.vf-save:hover{ border-color:var(--pk-blue-line); background:var(--pk-blue-tint); }


/* ---------- responsive ---------- */

@media(max-width:640px){
  .vf-grid{ grid-template-columns:repeat(auto-fill, minmax(142px,1fr)); }
  .vf-years{ grid-template-columns:repeat(auto-fill, minmax(88px,1fr)); }
  .vf-fits{ grid-template-columns:1fr; }
  .vm-ghost{ font-size:62px; }
  .vf-step .t{ display:none; }
  .vf-step.on .t{ display:inline; }
  .vf-line{ width:12px; }
}

@media(prefers-reduced-motion:reduce){
  .vf-panel.on, .vf-fit{ animation:none; }
  .vf-make, .vf-cell, .vf-fit{ transition:none; }
  .vf-make:hover, .vf-cell:hover, .vf-fit:hover{ transform:none; }
}


/* ==========================================================
   ab · SIGN IN
   ----------------------------------------------------------
   .auth-wrap had no rule anywhere in the stylesheet — only
   .auth-card did. So nothing centred the card, it sat hard
   against the left edge with its words running off the page,
   and .a-mark, being an unsized SVG, inflated into the huge
   ring that filled a third of the screen.

   Rebuilt as a split: a graphite half that says where you
   are, and a white half that does the work.
   ========================================================== */

body.page-auth{
  --paper:#FFFFFF;
  --paper-2:#F8FAFC;
  --ink:  #111827;
  --ink-2:#475467;
  --ink-3:#667085;
  --ink-4:#98A2B3;
  --rule: #E5E7EB;
  --rule-2:#D5DAE1;
  --hv:     #0F6E86;
  --hv-deep:#0B4657;

  background:var(--pk-bg);
  color:var(--pk-ink);
}

body.page-auth::before{ display:none; }
body.page-auth ::selection{ background:var(--pk-blue-tint); color:var(--pk-blue-d); }

.au{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:stretch;

  min-height:calc(100vh - var(--nav-h, 64px));
}


/* ---------- the graphite half ---------- */

.au-side{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:clamp(34px,5vw,72px);

  background:linear-gradient(158deg, #0E1B27 0%, #0A1420 54%, #0C1A24 100%);
  color:#fff;
}

.au-glow{
  position:absolute;
  z-index:0;
  inset:-30% -20% auto -25%;

  height:120%;

  background:radial-gradient(closest-side, rgba(23,120,148,.32), transparent 72%);
  pointer-events:none;
}

/* the same fine diagonal the winter band uses */
.au-side::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;

  background:repeating-linear-gradient(58deg,
    rgba(255,255,255,.03) 0 1px, transparent 1px 78px);
  pointer-events:none;
}

.au-side > *{ position:relative; z-index:1; }

.au-mark{
  display:block;
  width:clamp(74px,7vw,96px);
  height:clamp(74px,7vw,96px);
  margin-bottom:clamp(22px,3vw,34px);
}

.au-mark svg{ display:block; width:100%; height:100%; }

.au-tyre { fill:none; stroke:#17232F; }
.au-edge { fill:none; stroke:#0A131B; stroke-width:1.6; }
.au-rim  { fill:#D3DEE6; stroke:#0B141C; stroke-width:1.6; }
.au-lip  { fill:none; stroke:#A9BAC6; stroke-width:1.4; }
.au-spoke{ fill:#EEF3F7; stroke:#0C161E; stroke-width:.7; stroke-linejoin:round; }
.au-hub  { fill:#5C7383; }

.au-word{
  display:block;

  font-family:var(--pk-font);
  font-size:clamp(21px,2.4vw,28px);
  font-weight:800;
  line-height:1.3;
  letter-spacing:.06em;
  color:#fff;
}

.au-word i{
  font-style:normal;
  margin:0 2px;
  color:#8FD1F2;
}

.au-claim{
  max-width:34ch;
  margin-top:14px;

  color:rgba(255,255,255,.62);
  font-size:15px;
  line-height:1.7;
}

.au-facts{
  display:block;
  margin-top:clamp(26px,3.4vw,40px);
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.10);

  color:rgba(255,255,255,.44);
  font-size:12.5px;
  line-height:1.7;
}

.au-facts b{
  font-family:var(--pk-font);
  font-size:15px;
  font-weight:800;
  letter-spacing:-.02em;
  font-feature-settings:"tnum" 1;
  color:#fff;
}


/* ---------- the working half ---------- */

.au-form{
  display:flex;
  align-items:center;
  justify-content:center;

  padding:clamp(30px,4vw,64px) clamp(20px,4vw,56px);
}

.au-box{ width:min(100%, 392px); }

.au-box h1{
  font-family:var(--fd);
  font-size:clamp(26px,3vw,34px);
  font-weight:730;
  line-height:1.24;
  letter-spacing:-.03em;
  color:var(--pk-ink);
}

.au-sub{
  margin-top:9px;
  color:var(--pk-ink-3);
  font-size:14px;
  line-height:1.65;
}


/* ---------- Google ---------- */

.au-google{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  height:50px;
  margin-top:24px;

  border:1px solid var(--pk-line-2);
  border-radius:13px;
  background:var(--pk-bg);
  color:var(--pk-ink);

  font-family:var(--pk-font);
  font-size:14.5px;
  font-weight:660;
  line-height:1.5;

  transition:border-color .2s var(--pk-e), background .2s var(--pk-e),
             box-shadow .2s var(--pk-e), transform .18s var(--pk-e);
}

.au-google:hover{
  border-color:var(--pk-line-2);
  background:var(--pk-bg-2);
  transform:translateY(-1px);
  box-shadow:var(--pk-sh-1);
}

.au-google svg{ flex-shrink:0; }

.au-or{
  position:relative;
  margin:20px 0 4px;
  text-align:center;
}

.au-or::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;

  height:1px;
  background:var(--pk-line);
}

.au-or span{
  position:relative;
  padding:0 12px;

  background:var(--pk-bg);
  color:var(--pk-ink-4);
  font-size:12px;
  line-height:1.6;
}


/* ---------- fields ---------- */

.au-box form{
  display:flex;
  flex-direction:column;
  gap:15px;

  margin-top:20px;
}

.au-fld{ display:block; }

.au-fld label{
  display:block;
  margin-bottom:7px;

  color:var(--pk-ink-2);
  font-size:12.5px;
  font-weight:640;
  line-height:1.6;
}

body.page-auth .inp{
  width:100%;
  height:48px;
  padding:0 14px;

  background:var(--pk-bg);
  border:1px solid var(--pk-line);
  border-radius:12px;

  font-family:var(--pk-font);
  font-size:15px;
  color:var(--pk-ink);

  transition:border-color .18s var(--pk-e), box-shadow .18s var(--pk-e);
}

body.page-auth .inp::placeholder{ color:var(--pk-ink-4); }

body.page-auth .inp:hover{ border-color:var(--pk-line-2); }

body.page-auth .inp:focus{
  outline:none;
  border-color:var(--pk-blue);
  box-shadow:0 0 0 3px rgba(var(--pk-blue-rgb),.13);
}

.au-hint{
  display:block;
  margin-top:6px;

  color:var(--pk-ink-4);
  font-size:11.5px;
  line-height:1.6;
}

.au-seg{
  display:flex;
  gap:3px;
  width:100%;
  padding:3px;

  background:var(--pk-bg-3);
  border-radius:12px;
}

.au-seg button{
  flex:1;
  height:38px;

  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--pk-ink-2);

  font-family:var(--pk-font);
  font-size:13px;
  font-weight:640;
  line-height:1.5;
  cursor:pointer;

  transition:background .18s var(--pk-e), color .18s var(--pk-e);
}

.au-seg button.on{
  background:var(--pk-blue);
  color:#fff;
  font-weight:700;
  box-shadow:0 4px 10px -6px rgba(var(--pk-blue-rgb),.8);
}

.au-go{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  height:50px;
  margin-top:5px;

  border:0;
  border-radius:13px;
  background:var(--pk-blue-d);
  color:#fff;

  font-family:var(--pk-font);
  font-size:15px;
  font-weight:700;
  line-height:1.5;
  cursor:pointer;

  box-shadow:0 10px 22px -14px rgba(11,70,87,.9);

  transition:background .2s var(--pk-e), transform .18s var(--pk-e);
}

.au-go:hover{ background:var(--pk-blue); transform:translateY(-1px); }
.au-go:active{ transform:none; }

.au-alt{
  margin-top:22px;
  text-align:center;

  color:var(--pk-ink-3);
  font-size:14px;
  line-height:1.65;
}

.au-alt a{
  color:var(--pk-blue);
  font-weight:640;

  transition:color .18s var(--pk-e);
}

.au-alt a:hover{ color:var(--pk-blue-d); }
.au-alt b{ color:var(--pk-ink); font-weight:700; }


/* ---------- responsive ---------- */

@media(max-width:900px){
  .au{ grid-template-columns:1fr; min-height:0; }

  .au-side{
    padding:26px 22px 24px;
    text-align:left;
  }

  .au-mark{ width:56px; height:56px; margin-bottom:16px; }
  .au-claim{ font-size:14px; margin-top:10px; }
  .au-facts{ margin-top:18px; padding-top:14px; }
  .au-form{ padding:28px 20px 48px; }
}

@media(prefers-reduced-motion:reduce){
  .au-google, .au-go{ transition:none; }
  .au-google:hover, .au-go:hover{ transform:none; }
}


/* app.css hides the spinner with ".btn .spin"; these buttons carry no
   .btn class, so it span permanently next to the label */
.au-go .spin,
.au-google .spin{ display:none; }

.au-go.loading .spin{ display:block; }
.au-go.loading .btn-l{ opacity:.35; }


/* ==========================================================
   ac · THE SIGN-IN MODAL
   ----------------------------------------------------------
   Reaching for "post a listing" should not cost a page load
   and the place you were standing. The same credentials the
   /login page takes, over the top of whatever you were doing,
   returning you to it afterwards.
   ========================================================== */

.lgm{
  width:min(94vw, 420px);
  padding:0;

  background:var(--pk-bg);
  border-radius:22px;
  box-shadow:0 40px 80px -40px rgba(9,14,22,.6);
}

.lgm .m-close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;

  display:grid;
  place-items:center;

  width:34px;
  height:34px;

  border:1px solid var(--pk-line);
  border-radius:50%;
  background:var(--pk-bg);
  color:var(--pk-ink-3);
  cursor:pointer;

  transition:border-color .18s var(--pk-e), color .18s var(--pk-e);
}

.lgm .m-close:hover{ border-color:var(--pk-line-2); color:var(--pk-ink); }
.lgm .m-close svg{ width:13px; height:13px; }

.lgm-in{ padding:clamp(26px,4vw,34px) clamp(22px,4vw,32px) clamp(22px,3vw,28px); }

.lgm h3{
  text-align:center;

  font-family:var(--fd);
  font-size:22px;
  font-weight:730;
  line-height:1.4;
  letter-spacing:-.025em;
  color:var(--pk-ink);
}

.lgm-sub{
  margin-top:6px;
  text-align:center;

  color:var(--pk-ink-3);
  font-size:13.5px;
  line-height:1.6;
}


/* ---------- Google ---------- */

.lgm-google{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  height:48px;
  margin-top:22px;

  border:1px solid var(--pk-line-2);
  border-radius:12px;
  background:var(--pk-bg);
  color:var(--pk-ink);

  font-family:var(--pk-font);
  font-size:14.5px;
  font-weight:660;
  line-height:1.5;

  transition:background .2s var(--pk-e), box-shadow .2s var(--pk-e),
             transform .18s var(--pk-e);
}

.lgm-google:hover{
  background:var(--pk-bg-2);
  transform:translateY(-1px);
  box-shadow:var(--pk-sh-1);
}

.lgm-google .spin{ display:none; }

.lgm-or{
  position:relative;
  margin:18px 0 2px;
  text-align:center;
}

.lgm-or::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;

  height:1px;
  background:var(--pk-line);
}

.lgm-or span{
  position:relative;
  padding:0 12px;

  background:var(--pk-bg);
  color:var(--pk-ink-4);
  font-size:12px;
  line-height:1.6;
}


/* ---------- the form ---------- */

.lgm form{
  display:flex;
  flex-direction:column;
  gap:14px;

  margin-top:18px;
}

.lgm-fld label{
  display:block;
  margin-bottom:6px;

  color:var(--pk-ink-2);
  font-size:12.5px;
  font-weight:640;
  line-height:1.6;
}

.lgm .inp{
  width:100%;
  height:48px;
  padding:0 14px;

  background:var(--pk-bg-2);
  border:1px solid var(--pk-line);
  border-radius:12px;

  font-family:var(--pk-font);
  font-size:15px;
  color:var(--pk-ink);

  transition:border-color .18s var(--pk-e), background .18s var(--pk-e),
             box-shadow .18s var(--pk-e);
}

.lgm .inp::placeholder{ color:var(--pk-ink-4); }

.lgm .inp:focus{
  outline:none;
  background:var(--pk-bg);
  border-color:var(--pk-blue);
  box-shadow:0 0 0 3px rgba(var(--pk-blue-rgb),.13);
}

.lgm-go{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  height:50px;
  margin-top:4px;

  border:0;
  border-radius:12px;
  background:var(--pk-blue-d);
  color:#fff;

  font-family:var(--pk-font);
  font-size:15px;
  font-weight:700;
  line-height:1.5;
  cursor:pointer;

  box-shadow:0 10px 22px -14px rgba(11,70,87,.9);

  transition:background .2s var(--pk-e), transform .18s var(--pk-e);
}

.lgm-go:hover{ background:var(--pk-blue); transform:translateY(-1px); }
.lgm-go:active{ transform:none; }

.lgm-go .spin{ display:none; }
.lgm-go.loading .spin{ display:block; }
.lgm-go.loading .btn-l{ opacity:.35; }

.lgm-alt{
  margin-top:20px;
  text-align:center;

  color:var(--pk-ink-3);
  font-size:13.5px;
  line-height:1.65;
}

.lgm-alt a{
  color:var(--pk-blue);
  font-weight:660;

  transition:color .18s var(--pk-e);
}

.lgm-alt a:hover{ color:var(--pk-blue-d); }


@media(max-width:560px){
  .lgm{ width:100%; border-radius:22px 22px 0 0; }
}

@media(prefers-reduced-motion:reduce){
  .lgm-google, .lgm-go{ transition:none; }
  .lgm-google:hover, .lgm-go:hover{ transform:none; }
}


/* ==========================================================
   ad · ONE DEALER
   ----------------------------------------------------------
   The page a dealer's name leads to. Same colour, same rating
   pill, same rim-range track as the list it came from, so the
   two read as one place rather than two designs.
   ========================================================== */

body.page-shop{
  --paper:#FFFFFF;
  --paper-2:#F8FAFC;
  --paper-3:#F1F5F9;

  --ink:  #111827;
  --ink-2:#475467;
  --ink-3:#667085;
  --ink-4:#98A2B3;

  --rule:  #E5E7EB;
  --rule-2:#D5DAE1;

  --hv:     #0F6E86;
  --hv-deep:#0B4657;

  background:var(--pk-bg);
  color:var(--pk-ink);
}

body.page-shop::before{ display:none; }
body.page-shop ::selection{ background:var(--pk-blue-tint); color:var(--pk-blue-d); }

.shd{ padding-top:clamp(18px,2.4vw,28px); padding-bottom:clamp(40px,5vw,72px); }

body.page-shop .crumbs{
  display:flex;
  align-items:center;
  gap:7px;

  margin-bottom:18px;

  color:var(--pk-ink-4);
  font-size:12.5px;
  line-height:1.7;
}

body.page-shop .crumbs a{ color:var(--pk-ink-3); transition:color .18s var(--pk-e); }
body.page-shop .crumbs a:hover{ color:var(--pk-blue); }
body.page-shop .crumbs a:last-child{ color:var(--pk-ink); font-weight:640; }


/* ---------- the header plate ---------- */

.shd-h{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  padding:clamp(20px,2.4vw,28px);

  background:var(--pk-bg);
  border:1px solid var(--pk-line);
  border-radius:22px;
  box-shadow:var(--pk-sh-1);
}

/* the dealer's colour, pooled behind the monogram */
.shd-h::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-40% 55% 30% -18%;

  background:radial-gradient(closest-side, hsl(var(--h,200) 60% 50% / .13), transparent 72%);
  pointer-events:none;
}

.shd-h > *{ position:relative; z-index:1; }

.shd-cover{
  display:block;
  margin:calc(clamp(20px,2.4vw,28px) * -1) calc(clamp(20px,2.4vw,28px) * -1) clamp(18px,2vw,24px);

  height:clamp(120px,16vw,190px);
  overflow:hidden;
  background:var(--pk-bg-2);
}

.shd-cover img{ width:100%; height:100%; object-fit:cover; display:block; }

.shd-top{
  display:flex;
  align-items:flex-start;
  gap:clamp(14px,1.8vw,20px);
  flex-wrap:wrap;
}

.shd-mono{
  display:grid;
  place-items:center;
  flex-shrink:0;

  width:clamp(60px,6vw,74px);
  height:clamp(60px,6vw,74px);

  border-radius:19px;
  overflow:hidden;

  background:hsl(var(--h,200) 42% 96%);
  box-shadow:inset 0 0 0 1px hsl(var(--h,200) 38% 85%);
  color:hsl(var(--h,200) 46% 30%);

  font-family:var(--pk-font);
  font-size:27px;
  font-weight:800;
  line-height:1;
}

.shd-mono img{ width:100%; height:100%; object-fit:cover; }

.shd-id{ flex:1; min-width:0; }

.shd-id h1{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;

  font-family:var(--fd);
  font-size:clamp(23px,2.8vw,32px);
  font-weight:730;
  line-height:1.3;
  letter-spacing:-.028em;
  color:var(--pk-ink);
}

.shd-v{ display:grid; place-items:center; color:var(--pk-blue); }
.shd-v svg{ display:block; }

.shd-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 14px;

  margin-top:10px;
}

.shd-rate{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:5px 11px 6px;

  border:1px solid var(--pk-line);
  border-radius:999px;
  background:var(--pk-bg-2);

  font-family:var(--pk-font);
  font-size:12px;
  line-height:1.5;
  font-feature-settings:"tnum" 1;
  color:var(--pk-ink-3);
}

.shd-rate svg{ width:13px; height:13px; color:#E8A93B; }
.shd-rate b{ font-size:14px; font-weight:800; letter-spacing:-.02em; color:var(--pk-ink); }
.shd-rate em{ font-style:normal; color:var(--pk-ink-4); }

.shd-fact{
  display:inline-flex;
  align-items:center;
  gap:6px;

  color:var(--pk-ink-3);
  font-size:13px;
  line-height:1.6;
}

.shd-fact svg{ color:var(--pk-ink-4); flex-shrink:0; }

.shd-d{
  max-width:62ch;
  margin-top:12px;

  color:var(--pk-ink-2);
  font-size:14px;
  line-height:1.7;
}

.shd-act{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex-shrink:0;
}

.shd-call{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  height:46px;
  padding:0 20px;

  border-radius:12px;
  background:var(--pk-blue-d);
  color:#fff;

  font-family:var(--pk-font);
  font-size:15px;
  font-weight:730;
  line-height:1.5;
  letter-spacing:-.01em;
  font-feature-settings:"tnum" 1;
  white-space:nowrap;

  box-shadow:0 10px 22px -14px rgba(11,70,87,.9);

  transition:background .2s var(--pk-e), transform .18s var(--pk-e);
}

.shd-call:hover{ background:var(--pk-blue); transform:translateY(-1px); }

.shd-map{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;

  height:40px;
  padding:0 16px;

  border:1px solid var(--pk-line-2);
  border-radius:11px;
  color:var(--pk-ink);

  font-size:13px;
  font-weight:640;
  line-height:1.5;
  white-space:nowrap;

  transition:border-color .18s var(--pk-e), background .18s var(--pk-e);
}

.shd-map:hover{ border-color:var(--pk-blue-line); background:var(--pk-blue-tint); }


/* ---------- what they hold ---------- */

.shd-stats{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px clamp(18px,2.4vw,30px);

  margin-top:clamp(18px,2vw,24px);
  padding-top:clamp(16px,1.8vw,20px);
  border-top:1px solid var(--pk-line);
}

.shd-stat{
  color:var(--pk-ink-3);
  font-size:12.5px;
  line-height:1.6;
  white-space:nowrap;
}

.shd-stat b{
  font-family:var(--pk-font);
  font-size:17px;
  font-weight:800;
  letter-spacing:-.03em;
  font-feature-settings:"tnum" 1;
  color:var(--pk-ink);
}

.shd-range{
  margin-left:auto;
  min-width:190px;
}

.shd-range-l{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;

  color:var(--pk-ink-4);
  font-size:11.5px;
  line-height:1.6;
}

.shd-range-l b{
  font-family:var(--pk-font);
  font-size:13px;
  font-weight:800;
  letter-spacing:-.02em;
  font-feature-settings:"tnum" 1;
  color:var(--pk-blue-d);
  white-space:nowrap;
}

.shd-track{
  display:flex;
  gap:3px;
  margin-top:7px;
}

.shd-track i{
  flex:1;
  height:6px;

  border-radius:2px;
  background:var(--pk-line);
}

.shd-track i.on{ background:linear-gradient(180deg, #1B7E9B, var(--pk-blue)); }


/* ---------- the stock ---------- */

.shd-stock{ margin-top:clamp(28px,3.4vw,44px); }

body.page-shop .mh{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;

  margin-bottom:16px;
}

body.page-shop .mh h2{
  font-family:var(--fd);
  font-size:clamp(19px,2.2vw,25px);
  font-weight:730;
  line-height:1.35;
  letter-spacing:-.022em;
  color:var(--pk-ink);
}

body.page-shop .mh p{ margin-top:5px; color:var(--pk-ink-3); font-size:13.5px; line-height:1.6; }

body.page-shop .more{
  display:inline-flex;
  align-items:center;
  gap:7px;

  color:var(--pk-blue);
  font-size:13.5px;
  font-weight:640;
  line-height:1.6;
  white-space:nowrap;

  transition:gap .18s var(--pk-e);
}

body.page-shop .more:hover{ gap:11px; }

body.page-shop .cards{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(11px,1.3vw,16px);
}

body.page-shop .pager{
  display:flex;
  justify-content:center;
  gap:6px;

  margin-top:26px;
}

body.page-shop .pager a,
body.page-shop .pager .cur{
  display:grid;
  place-items:center;

  min-width:38px;
  height:38px;
  padding:0 10px;

  border:1px solid var(--pk-line);
  border-radius:10px;

  font-family:var(--pk-font);
  font-size:13.5px;
  font-weight:680;
  font-feature-settings:"tnum" 1;
  color:var(--pk-ink-2);

  transition:border-color .18s var(--pk-e), background .18s var(--pk-e), color .18s var(--pk-e);
}

body.page-shop .pager a:hover{
  border-color:var(--pk-blue-line);
  background:var(--pk-blue-tint);
  color:var(--pk-blue-d);
}

body.page-shop .pager .cur{
  border-color:var(--pk-blue);
  background:var(--pk-blue);
  color:#fff;
}

.shd-empty{
  padding:clamp(38px,5vw,70px) 24px;

  background:var(--pk-bg-2);
  border:1px solid var(--pk-line);
  border-radius:20px;
  text-align:center;
}

.shd-empty h3{
  font-family:var(--fd);
  font-size:20px;
  font-weight:720;
  line-height:1.45;
  color:var(--pk-ink);
}

.shd-empty p{ margin-top:7px; color:var(--pk-ink-3); font-size:14px; line-height:1.6; }

.shd-back{
  display:inline-flex;
  align-items:center;
  gap:8px;

  margin-top:18px;
  padding:11px 18px;

  border:1px solid var(--pk-line-2);
  border-radius:999px;
  color:var(--pk-ink);

  font-size:13.5px;
  font-weight:640;
  line-height:1.5;

  transition:border-color .18s var(--pk-e), background .18s var(--pk-e), gap .18s var(--pk-e);
}

.shd-back:hover{ border-color:var(--pk-blue-line); background:var(--pk-blue-tint); gap:12px; }


/* ---------- responsive ---------- */

@media(max-width:1080px){
  body.page-shop .cards{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

@media(max-width:820px){
  body.page-shop .cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .shd-act{ width:100%; flex-direction:row; }
  .shd-call{ flex:1; }
  .shd-range{ margin-left:0; width:100%; }
}

@media(max-width:560px){
  .shd-h{ padding:16px 15px; border-radius:18px; }
  .shd-mono{ width:52px; height:52px; border-radius:15px; font-size:21px; }
  .shd-top{ gap:12px; }
  .shd-stats{ gap:10px 16px; }
  body.page-shop .mh{ flex-wrap:wrap; }
}

@media(prefers-reduced-motion:reduce){
  .shd-call, .shd-map, .shd-back{ transition:none; }
  .shd-call:hover{ transform:none; }
}


/* ==========================================================
   ae · SIGN IN BY CODE
   ----------------------------------------------------------
   The two ways in share one card, so the tabs, the hint and
   the code field are styled once and inherit whichever shell
   they land in — the modal or the /login page.
   ========================================================== */

.auth-tabs{
  display:flex;
  gap:3px;

  margin-top:20px;
  padding:3px;

  background:var(--pk-bg-3);
  border-radius:12px;
}

.auth-tabs button{
  flex:1;
  height:38px;

  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--pk-ink-2);

  font-family:var(--pk-font);
  font-size:13px;
  font-weight:640;
  line-height:1.5;
  cursor:pointer;

  transition:background .18s var(--pk-e), color .18s var(--pk-e);
}

.auth-tabs button:hover{ color:var(--pk-ink); }

.auth-tabs button.on{
  background:var(--pk-bg);
  color:var(--pk-ink);
  font-weight:700;
  box-shadow:var(--pk-sh-1);
}

.auth-hint{
  display:block;
  margin-top:7px;

  color:var(--pk-ink-4);
  font-size:11.5px;
  line-height:1.65;
}

.auth-hint b{
  font-family:var(--pk-font);
  font-weight:750;
  font-feature-settings:"tnum" 1;
  color:var(--pk-ink-2);
}

/* six digits, spaced so they can be read back off the phone */
.auth-code{
  text-align:center;
  font-family:var(--pk-font) !important;
  font-size:26px !important;
  font-weight:800;
  letter-spacing:.34em;
  text-indent:.34em;
  font-feature-settings:"tnum" 1;
}

.auth-code::placeholder{ letter-spacing:.24em; font-weight:600; }

.auth-again{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  margin-top:14px;
  min-height:20px;

  color:var(--pk-ink-4);
  font-size:12.5px;
  line-height:1.6;
}

.auth-again button{
  padding:0;

  border:0;
  background:none;
  color:var(--pk-blue);

  font-family:var(--pk-font);
  font-size:12.5px;
  font-weight:640;
  line-height:1.6;
  cursor:pointer;

  transition:color .18s var(--pk-e);
}

.auth-again button:hover{ color:var(--pk-blue-d); }

[data-pane] form + form{ margin-top:0; }
[data-pane="sms"] form{ margin-top:18px; }


/* the account type — two pills, kept because nothing else on the site
   can change it after the fact */
.auth-type{
  display:flex;
  gap:3px;

  margin-top:2px;
  padding:3px;

  background:var(--pk-bg-3);
  border-radius:12px;
}

.auth-type button{
  flex:1;
  height:38px;

  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--pk-ink-2);

  font-family:var(--pk-font);
  font-size:13px;
  font-weight:640;
  line-height:1.5;
  cursor:pointer;

  transition:background .18s var(--pk-e), color .18s var(--pk-e);
}

.auth-type button:hover{ color:var(--pk-ink); }

.auth-type button.on{
  background:var(--pk-blue);
  color:#fff;
  font-weight:700;
  box-shadow:0 4px 10px -6px rgba(var(--pk-blue-rgb),.8);
}

/* the one line that swaps signing in for registering */
.auth-alt{
  margin-top:20px;
  text-align:center;

  color:var(--pk-ink-3);
  font-size:13.5px;
  line-height:1.65;
}

.auth-alt a{
  color:var(--pk-blue);
  font-weight:660;
  cursor:pointer;

  transition:color .18s var(--pk-e);
}

.auth-alt a:hover{ color:var(--pk-blue-d); }

[data-pane="reg"] form{ margin-top:18px; }


/* ==========================================================
   af · THE VIP LANE
   ----------------------------------------------------------
   Paid placement moved to the slot directly under the finder,
   where it is actually worth paying for, and the graphite
   vitrine that used to sit two thirds down the page went with
   it — one VIP section, in the best position.

   Every other card on the site stands upright. These lie
   down: photograph left, figures right, one row across. The
   shape says "different" before any colour has to.
   ========================================================== */

.vipl{
  padding:clamp(26px,3vw,40px) 0 clamp(20px,2.4vw,30px);
  background:linear-gradient(180deg, var(--pk-bg-2), var(--pk-bg));
  border-top:1px solid var(--pk-line);
  border-bottom:1px solid var(--pk-line);
}

.vipl-in{
  max-width:var(--wrap,1280px);
  margin:0 auto;
  padding:0 var(--gut,24px);
}


/* ---------- the label ---------- */

.vipl-h{
  display:flex;
  align-items:center;
  gap:clamp(10px,1.4vw,16px);

  margin-bottom:clamp(14px,1.8vw,20px);
}

.vipl-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;

  height:26px;
  padding:0 11px 0 9px;

  border-radius:7px;
  background:linear-gradient(180deg, #1B7E9B, var(--pk-blue));
  color:#fff;
  box-shadow:0 5px 14px -8px rgba(var(--pk-blue-rgb),.95),
             inset 0 1px 0 rgba(255,255,255,.24);

  font-family:var(--pk-font);
  font-size:11.5px;
  font-weight:800;
  line-height:1;
  letter-spacing:.14em;
}

.vipl-badge svg{ width:10px; height:10px; color:#9BE3F5; }

.vipl-h h2{
  font-family:var(--fd);
  font-size:clamp(17px,2vw,22px);
  font-weight:730;
  line-height:1.4;
  letter-spacing:-.022em;
  color:var(--pk-ink);
  white-space:nowrap;
}

.vipl-rule{
  flex:1;
  min-width:12px;
  height:1px;

  background:linear-gradient(90deg, var(--pk-line-2), transparent);
}

.vipl-all{
  display:inline-flex;
  align-items:center;
  gap:7px;

  color:var(--pk-blue);
  font-size:13.5px;
  font-weight:640;
  line-height:1.6;
  white-space:nowrap;

  transition:gap .18s var(--pk-e), color .18s var(--pk-e);
}

.vipl-all:hover{ gap:11px; color:var(--pk-blue-d); }


/* ---------- one lying-down card ---------- */

.vipl-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(10px,1.2vw,14px);
}

.vipl-c{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(12px,1.5vw,18px);

  padding:clamp(11px,1.2vw,14px);

  background:var(--pk-bg);
  border:1px solid var(--pk-line);
  border-radius:16px;

  transition:border-color .22s var(--pk-e), transform .22s var(--pk-e),
             box-shadow .22s var(--pk-e);
}

/* the one stripe that marks it as bought placement */
.vipl-c::before{
  content:"";
  position:absolute;
  z-index:1;
  left:0;
  top:12px;
  bottom:12px;

  width:3px;

  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg, #2BA6C6, var(--pk-blue-d));

  transition:top .22s var(--pk-e), bottom .22s var(--pk-e);
}

.vipl-c:hover{
  border-color:var(--pk-blue-line);
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(16,24,40,.04), 0 18px 32px -22px rgba(16,24,40,.32);
}

.vipl-c:hover::before{ top:0; bottom:0; }

.vipl-c:focus-visible{ outline:2px solid var(--pk-blue); outline-offset:3px; }

.vipl-shot{
  position:relative;

  width:clamp(74px,7vw,92px);
  aspect-ratio:1/1;
  flex-shrink:0;

  border-radius:12px;
  overflow:hidden;
  background:radial-gradient(70% 60% at 50% 42%, #fff, #F1F5F8 72%, #E6EDF1 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}

.vipl-shot img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:5%;

  mix-blend-mode:multiply;
  transition:transform .45s var(--pk-e);
}

.vipl-c:hover .vipl-shot img{ transform:scale(1.06); }

.vipl-cut{
  position:absolute;
  z-index:2;
  top:6px;
  left:6px;

  padding:3px 6px 4px;

  border-radius:5px;
  background:#B3261E;
  color:#fff;

  font-family:var(--pk-font);
  font-size:10px;
  font-weight:800;
  line-height:1.2;
  font-feature-settings:"tnum" 1;
}

.vipl-t{ display:block; min-width:0; }

.vipl-size{
  display:block;

  font-family:var(--pk-font);
  font-size:clamp(17px,1.8vw,20px);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.04em;
  font-feature-settings:"tnum" 1;
  color:var(--pk-ink);
}

.vipl-size i{ font-style:normal; font-weight:300; color:var(--pk-ink-3); margin:0 1px; }
.vipl-size em{ font-style:normal; font-size:.7em; margin-left:5px; color:var(--pk-ink-3); }

.vipl-brand{
  display:block;
  margin-top:5px;

  font-family:var(--pk-font);
  font-size:10px;
  font-weight:750;
  line-height:1.5;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--pk-ink-3);
}

.vipl-model{
  display:block;
  margin-top:1px;

  color:var(--pk-ink-3);
  font-size:12px;
  line-height:1.5;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.vipl-e{
  text-align:right;
  white-space:nowrap;
}

.vipl-price{
  display:block;

  font-family:var(--pk-font);
  font-size:clamp(20px,2.1vw,24px);
  font-weight:820;
  line-height:1.2;
  letter-spacing:-.045em;
  font-feature-settings:"tnum" 1;
  color:var(--pk-ink);
}

.vipl-price b{ margin-left:3px; font-size:.52em; font-weight:700; color:var(--pk-ink-3); }

.vipl-meta{
  display:block;
  margin-top:4px;

  color:var(--pk-ink-3);
  font-size:11.5px;
  line-height:1.55;
}

/* where the tyre is matters in a marketplace, but not enough
   to cost a line on a phone */
.vipl-city{ font-style:normal; }

.vipl-note{
  margin-top:clamp(12px,1.4vw,16px);

  color:var(--pk-ink-3);
  font-size:11.5px;
  line-height:1.6;
}


/* ---------- responsive ---------- */

/* a single 800px-wide card is mostly empty space — stay two-up
   until the pair genuinely stops fitting */
@media(max-width:720px){
  .vipl-row{ grid-template-columns:1fr; }
}

@media(max-width:560px){
  .vipl-h{ flex-wrap:wrap; gap:9px; }
  .vipl-h h2{ font-size:17px; white-space:normal; }
  .vipl-rule{ display:none; }
  .vipl-all{ margin-left:auto; }
  .vipl-c{ gap:11px; padding:10px; border-radius:14px; }
  .vipl-shot{ width:64px; }
  .vipl-size{ font-size:16px; }
  .vipl-price{ font-size:18px; }
  .vipl-model{ display:none; }
  .vipl-city{ display:none; }
}

@media(prefers-reduced-motion:reduce){
  .vipl-c, .vipl-shot img, .vipl-all{ transition:none; }
  .vipl-c:hover{ transform:none; }
  .vipl-c:hover .vipl-shot img{ transform:none; }
}

/* ══ GARAGE DOORS ════════════════════════════════════════════════
   Ported from the Elgro shop (orange on asphalt), recoloured to the
   Saburavebi system: deep teal ground, the site accent (--pk-blue, teal),
   ice-blue for the cold card. */
.gx{
  display:grid;
  gap:16px;
}
@media (min-width:900px){
  .gx{ grid-template-columns:1fr 1fr; }
}

.gx-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  display:grid;
  grid-template-columns:1.1fr 1fr;
  grid-template-areas:"copy inside";
  min-height:250px;

  border-radius:20px;
  background:linear-gradient(148deg, #103038 0%, #0A1E25 55%, #0D252D 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),
             0 22px 42px -34px rgba(6,18,28,.9);
  color:#fff;
  text-decoration:none;

  transition:transform .34s var(--pk-e), box-shadow .34s var(--pk-e);
}
.gx-card:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px rgba(var(--pk-blue-rgb),.35),
             0 30px 54px -34px rgba(6,18,28,1);
}
.gx-card:focus-visible{ outline:2px solid var(--pk-blue); outline-offset:3px; }

.gx-copy{
  grid-area:copy;
  position:relative;
  z-index:2;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;

  padding:26px 18px 22px 24px;
}

.gx-k{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 10px;

  border-radius:6px;
  background:var(--pk-blue);
  color:#fff;

  font:700 12px/1 var(--pk-font);
}
.gx-ice .gx-k{ background:#D7F0F6; color:#0A1E25; }

.gx-title{
  font:800 clamp(22px,2.5vw,30px)/1.05 var(--pk-font);
  font-stretch:75%;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.gx-title em{ font-style:normal; color:#5CC8DC; }
.gx-ice .gx-title em{ color:#A9E3F2; }

.gx-sub{
  max-width:34ch;
  font:500 13.5px/1.45 var(--pk-font);
  color:#A8BCC2;
}

.gx-btn{
  margin-top:auto;

  display:inline-flex;
  align-items:center;
  gap:9px;
  height:42px;
  padding:0 18px;

  border-radius:11px;
  background:var(--pk-blue);
  color:#fff;
  box-shadow:0 10px 22px -12px rgba(var(--pk-blue-rgb),.9);

  font:700 14px/1 var(--pk-font);
  transition:background .22s var(--pk-e);
}
.gx-btn svg{ transition:transform .22s var(--pk-e); }
.gx-card:hover .gx-btn{ background:var(--pk-blue-d); }
.gx-card:hover .gx-btn svg{ transform:translateX(3px); }

.gx-no{
  position:absolute;
  z-index:1;
  left:20px;
  bottom:-18px;

  font:800 120px/1 var(--pk-font);
  color:transparent;
  -webkit-text-stroke:2px rgba(255,255,255,.06);
  pointer-events:none;
}

/* the garage: tyres on a lit floor */
.gx-inside{
  grid-area:inside;
  position:relative;
  z-index:0;
  overflow:hidden;
  min-height:236px;
  margin:14px 14px 0 0;

  border-radius:12px 12px 0 0;
  background:radial-gradient(80% 70% at 50% 45%, #FDFDFC, #DCDFE4);
}
.gx-inside img{
  position:absolute;
  object-fit:contain;
  mix-blend-mode:multiply;
}
.gx-t1{ width:78%; height:78%; right:4%; bottom:8%; z-index:1; }
.gx-t2{ width:50%; height:50%; left:0; bottom:6%; }
.gx-floor{
  position:absolute;
  left:0; right:0; bottom:0;
  height:12%;
  background:linear-gradient(#C3C8D0, #AEB4BE);
}

/* the roller door */
.gx-door{
  position:absolute;
  z-index:1;
  top:14px; right:14px; bottom:0;
  width:calc(47.6% - 14px);

  border-radius:12px 12px 0 0;
  background:repeating-linear-gradient(180deg, #DDE2E8 0 15px, #AFB7C2 15px 17px, #C9D0D8 17px 19px);
  box-shadow:inset 0 -8px 0 #8B95A3;

  transform:translateY(0);
  transition:transform 1.6s cubic-bezier(.6,.05,.25,1);
}
.gx-handle{
  position:absolute;
  left:50%;
  bottom:18px;
  width:46px; height:8px;
  margin-left:-23px;

  border-radius:4px;
  background:#6B7685;
}
.gx-card.open .gx-door{ transform:translateY(-88%); }
.gx-card.open:hover .gx-door{ transform:translateY(-92%); }

@media (max-width:560px){
  .gx-card{
    grid-template-columns:1fr;
    grid-template-areas:"copy" "inside";
    min-height:0;
  }
  .gx-inside{ height:190px; min-height:0; margin:0 14px; }
  .gx-door{ top:auto; left:14px; right:14px; width:auto; height:190px; }
}

@media (prefers-reduced-motion:reduce){
  .gx-door{ transform:translateY(-88%) !important; transition:none; }
  .gx-card{ transition:none; }
}

/* ══ SIZE FINDER ═════════════════════════════════════════════════
   Light aqua panel: copy and season switch on the left, three size
   selects on the right pinned to the numbers on a tyre's sidewall. */
.sf-wrap{
  --sf-ac:#0B9BB6;
  --sf-ac-d:#08829A;
  --sf-bg:#E6F5F8;
  --sf-line:#BFE4EB;

  width:min(1240px, calc(100% - 32px));
  margin:clamp(20px,3vw,34px) auto 0;
}

.sf{
  position:relative;
  overflow:hidden;

  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,560px);
  align-items:stretch;
  gap:24px;
  min-height:330px;
  padding:0 clamp(24px,5.5vw,80px);

  border:1px solid var(--sf-line);
  border-radius:18px;
  background:var(--sf-bg);
}

.sf-copy{
  align-self:center;
  padding:44px 0;
}
.sf-k{
  display:block;
  margin-bottom:12px;
  color:var(--sf-ac);
  font:800 13px/1.2 var(--pk-font);
  font-feature-settings:"case";
  text-transform:uppercase;
  letter-spacing:.02em;
}
.sf-h{
  margin:0;
  color:#111827;
  font:800 clamp(22px,2.2vw,27px)/1.2 var(--pk-font);
}
.sf-p{
  max-width:46ch;
  margin:18px 0 0;
  color:#6B7280;
  font:400 13.5px/1.6 var(--pk-font);
}

/* season switch — joined white tiles, the live one ringed */
.sf-seasons{
  display:inline-flex;
  margin-top:32px;
  border-radius:9px;
  background:#fff;
  box-shadow:0 0 0 1px #E1E8EC;
}
.sf-s{ position:relative; cursor:pointer; }
.sf-s input{ position:absolute; opacity:0; pointer-events:none; }
.sf-s span{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  height:48px;
  padding:0 26px;
  min-width:132px;

  border-left:1px solid #E7ECEF;
  color:#374151;
  font:500 14px/1 var(--pk-font);
  transition:box-shadow .2s, color .2s;
}
.sf-s:first-child span{ border-left:0; border-radius:9px 0 0 9px; }
.sf-s:last-child span{ border-radius:0 9px 9px 0; }
.sf-s input:checked + span{
  position:relative;
  z-index:1;
  box-shadow:0 0 0 1px var(--sf-ac);
  border-radius:9px;
  color:var(--sf-ac);
}
.sf-s input:focus-visible + span{ outline:2px solid var(--sf-ac); outline-offset:2px; }

.sf-ic{ width:20px; height:20px; flex:none; fill:none; stroke-linecap:round; }
.sf-snow{ stroke:#2AA7C9; stroke-width:1.7; }
.sf-sun{ fill:#F6B92B; stroke:none; }
.sf-ray{ stroke:#F6B92B; stroke-width:1.9; }
.sf-ic-all .sf-sun{ fill:#F6B92B; }

/* right: the selects, the tyre beneath */
.sf-right{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:38px;
}
.sf-fields{
  position:relative;
  z-index:3;
  display:flex;
  align-items:flex-end;
  gap:20px;
}
.sf-f{ display:flex; flex-direction:column; gap:12px; }
.sf-l{
  color:#111827;
  font:600 13px/1 var(--pk-font);
}
.sf-f select{
  width:90px;
  height:40px;
  padding:0 30px 0 14px;

  appearance:none;
  -webkit-appearance:none;
  border:1px solid #DDE5E9;
  border-radius:8px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23111827' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center / 10px no-repeat;
  color:#111827;
  font:500 13.5px/1 var(--pk-font);
  cursor:pointer;
}
.sf-f select:focus-visible{ outline:2px solid var(--sf-ac); outline-offset:1px; }
.sf-go{
  height:40px;
  padding:0 30px;

  border:0;
  border-radius:8px;
  background:var(--sf-ac);
  color:#fff;
  font:700 14px/1 var(--pk-font);
  cursor:pointer;
  transition:background .2s;
}
.sf-go:hover{ background:var(--sf-ac-d); }
.sf-go:focus-visible{ outline:2px solid var(--sf-ac); outline-offset:2px; }

.sf-tyre{
  position:relative;
  z-index:1;
  width:min(470px,100%);
  margin-top:auto;
  padding-top:22px;
}
.sf-wheel{ display:block; width:100%; height:auto; margin-bottom:-1px; }
.sf-side{
  fill:#C9CDD2;
  font:800 30px/1 "Archivo",var(--pk-font);
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}

.sf-pins{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.sf-pins line{ stroke:var(--sf-ac); stroke-width:2; }
.sf-pins circle{ fill:var(--sf-ac); stroke:#fff; stroke-width:1.5; }

@media (max-width:980px){
  .sf{
    grid-template-columns:1fr;
    gap:0;
    padding:0 20px;
  }
  .sf-copy{ padding:30px 0 6px; }
  .sf-right{ padding-top:22px; }
}
@media (max-width:560px){
  .sf-seasons{ display:flex; width:100%; margin-top:22px; }
  .sf-s{ flex:1; }
  .sf-s span{ min-width:0; padding:0 8px; gap:6px; font-size:13px; }
  .sf-fields{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:100%; }
  .sf-f select{ width:100%; }
  .sf-go{ grid-column:1 / -1; height:44px; }
  .sf-tyre{ width:min(360px,100%); }
}

/* phone: the search button sits between the selects and the tyre, so the pins would cross it */
@media (max-width:560px){
  .sf-pins{ display:none; }
  .sf-tyre{ padding-top:10px; }
}

/* ══ SIZES — read off a sidewall ═════════════════════════════════ */
.sz{
  --sz-ac:#0B9BB6;
  --sz-ac-d:#08829A;
  --sz-aqua:#E6F5F8;
  --sz-line:#E3E9EC;
}

.sz-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:26px;
}
.sz-k{
  display:block;
  margin-bottom:10px;
  color:var(--sz-ac);
  font:800 12.5px/1.2 var(--pk-font);
  font-feature-settings:"case";
  text-transform:uppercase;
}
.sz-h{
  margin:0;
  color:#111827;
  font:800 clamp(24px,2.6vw,32px)/1.15 var(--pk-font);
}
.sz-p{
  margin:8px 0 0;
  color:#6B7280;
  font:400 14px/1.5 var(--pk-font);
}
.sz-all{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:9px;
  height:44px;
  padding:0 20px;

  border:1px solid var(--sz-line);
  border-radius:11px;
  background:#fff;
  color:#111827;
  font:700 14px/1 var(--pk-font);
  text-decoration:none;
  transition:border-color .2s, color .2s, box-shadow .2s;
}
.sz-all svg{ transition:transform .22s var(--pk-e); }
.sz-all:hover{ border-color:var(--sz-ac); color:var(--sz-ac); box-shadow:0 8px 20px -14px rgba(11,155,182,.6); }
.sz-all:hover svg{ transform:translateX(3px); }

.sz-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.sz-card{
  position:relative;
  overflow:hidden;

  display:flex;
  flex-direction:column;

  border:1px solid var(--sz-line);
  border-radius:18px;
  background:#fff;
  color:inherit;
  text-decoration:none;

  transition:transform .3s var(--pk-e), box-shadow .3s var(--pk-e), border-color .3s;
}
.sz-card:hover{
  transform:translateY(-4px);
  border-color:#BFE4EB;
  box-shadow:0 24px 40px -28px rgba(8,60,74,.45);
}
.sz-card:focus-visible{ outline:2px solid var(--sz-ac); outline-offset:3px; }

/* the sidewall window */
.sz-art{
  position:relative;
  display:block;
  overflow:hidden;
  padding-top:14px;
  background:
    radial-gradient(120% 90% at 50% 0%, #F3FBFD 0%, var(--sz-aqua) 60%, #D9EFF4 100%);
}
.sz-art svg{ display:block; width:100%; height:auto; }
.sz-roll{
  transform-origin:150px 196px;
  transition:transform .9s cubic-bezier(.3,.7,.2,1);
}
.sz-card:hover .sz-roll{ transform:rotate(-14deg); }
.sz-side{
  fill:#CBD0D5;
  font:800 25px/1 "Archivo",var(--pk-font);
  letter-spacing:.03em;
}

.sz-flag{
  position:absolute;
  top:12px;
  left:12px;

  display:inline-flex;
  align-items:center;
  gap:6px;
  height:26px;
  padding:0 10px;

  border-radius:999px;
  background:#111827;
  color:#fff;
  font:700 11.5px/1 var(--pk-font);
}
.sz-flag::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:#F6B92B;
  box-shadow:0 0 0 3px rgba(246,185,43,.25);
}

.sz-body{
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
  padding:16px 18px 18px;
}

.sz-size{
  display:flex;
  align-items:baseline;
  gap:2px;
  color:#111827;
  font-family:"Archivo",var(--pk-font);
  font-variant-numeric:tabular-nums;
}
.sz-size b{ font-size:28px; font-weight:800; letter-spacing:-.02em; }
.sz-size i{ font-style:normal; font-size:19px; font-weight:600; color:#6B7280; }
.sz-size em{
  margin-left:10px;
  align-self:center;
  padding:4px 9px;

  border-radius:7px;
  background:var(--sz-aqua);
  color:var(--sz-ac-d);
  font-style:normal;
  font-size:14px;
  font-weight:800;
}

.sz-seas{ display:flex; flex-wrap:wrap; gap:6px; }
.sz-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:24px;
  padding:0 9px;

  border-radius:999px;
  font:600 11.5px/1 var(--pk-font);
}
.sz-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.sz-pill.is-w{ background:#E8F4FB; color:#1E87B8; }
.sz-pill.is-s{ background:#FEF5E2; color:#B7791F; }
.sz-pill.is-a{ background:#ECF7F0; color:#2F855A; }

.sz-foot{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:auto;
  padding-top:12px;
  border-top:1px dashed var(--sz-line);
}
.sz-n{
  flex:1;
  color:#6B7280;
  font:500 12.5px/1.2 var(--pk-font);
}
.sz-price{
  color:#111827;
  font:800 16px/1 "Archivo",var(--pk-font);
}
.sz-price small{ margin-left:2px; color:#6B7280; font-size:12px; font-weight:600; }
.sz-go{
  flex:none;
  display:grid;
  place-items:center;
  width:34px; height:34px;

  border-radius:10px;
  background:var(--sz-aqua);
  color:var(--sz-ac-d);
  transition:background .25s, color .25s, transform .25s var(--pk-e);
}
.sz-card:hover .sz-go{ background:var(--sz-ac); color:#fff; transform:translateX(2px); }

@media (max-width:1100px){
  .sz-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:820px){
  .sz-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .sz-size b{ font-size:23px; }
  .sz-size i{ font-size:16px; }
}
@media (max-width:560px){
  .sz-head{ flex-direction:column; align-items:flex-start; }
  .sz-body{ padding:12px 12px 14px; gap:10px; }
  .sz-size em{ margin-left:6px; padding:3px 7px; font-size:12.5px; }
  .sz-n{ display:none; }
  .sz-price{ flex:1; font-size:15px; }
  .sz-go{ width:30px; height:30px; }
}
@media (prefers-reduced-motion:reduce){
  .sz-roll, .sz-card{ transition:none; }
  .sz-card:hover .sz-roll{ transform:none; }
}

/* ── size cards: the real tyre, standing in an aqua studio ───────── */
.sz-art.has-photo{
  height:216px;
  padding-top:0;
  background:
    radial-gradient(70% 60% at 50% 38%, #FFFFFF 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #EAF7FA 0%, #DDF0F5 100%);
}
.sz-ghost{
  position:absolute;
  right:-6px;
  top:2px;
  z-index:0;

  color:transparent;
  -webkit-text-stroke:2px rgba(11,155,182,.16);
  font:900 104px/1 "Archivo",var(--pk-font);
  letter-spacing:-.04em;
  pointer-events:none;
  user-select:none;
}
.sz-art:not(.has-photo) .sz-ghost{ display:none; }

.sz-floor{
  position:absolute;
  left:50%;
  bottom:14px;
  z-index:1;
  width:62%;
  height:18px;
  margin-left:-31%;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(10,30,40,.38), rgba(10,30,40,0));
  transition:transform .5s var(--pk-e), opacity .5s;
}
.sz-img{
  position:absolute;
  left:50%;
  bottom:20px;
  z-index:2;
  height:182px;
  width:auto;
  max-width:80%;
  object-fit:contain;
  transform:translateX(-50%) rotate(-4deg);
  transform-origin:50% 100%;
  filter:drop-shadow(0 14px 14px rgba(10,30,40,.22));
  transition:transform .6s cubic-bezier(.3,.7,.2,1);
}
/* a listing photo without a cut-out: sit it on a white plate */
.sz-img.is-raw{
  height:170px;
  border-radius:12px;
  background:#fff;
  mix-blend-mode:multiply;
  filter:none;
}
.sz-card:hover .sz-img{ transform:translateX(-50%) rotate(0deg) scale(1.06); }
.sz-card:hover .sz-floor{ transform:scaleX(1.1); opacity:.85; }

@media (max-width:820px){
  .sz-art.has-photo{ height:170px; }
  .sz-img{ height:142px; bottom:16px; }
  .sz-ghost{ font-size:76px; }
}
@media (prefers-reduced-motion:reduce){
  .sz-img, .sz-floor{ transition:none; }
}