/* ============================================================================
   AXT : THE SHOP. vehicles.html, the one sale page (29 September 2026).

   The grammar of the rental page of axtbnb.ae, which Arnaud called « hyper
   clair » (white, a bar of filters, cards that are a photograph and a few
   lines, a sheet), spoken in the words of this site: Inter Tight, the tokens
   of assets/axt.css, rectangles of 6px, and ONE red per screen. On this page
   the red is "Configure yours", in the sheet; the grid itself has no button.

   Order: the top . the bar . the results row . the cards . the comparison .
   the empty state and the foot . the dialogs . the sheet . the pickup
   question . motion . reduced motion.

   Nothing here draws a figure: the words and the amounts are painted by
   assets/shop.js from the catalogue and assets/sale-data.js.
============================================================================ */

/* ------------------------------------------------------------------ top */
/* one sober title and one line, no hero: the vehicles are the first thing
   the page shows */
.shop-top{padding-top:clamp(26px,3.6vw,56px)}
.shop-top h1{font-size:clamp(2.125rem,1.35rem + 2.6vw,3.5rem);letter-spacing:-.045em;line-height:.98;text-wrap:balance}
.shop-lede{margin-top:14px;font-size:var(--fs-lede);line-height:1.5;color:var(--ink-3);max-width:62ch;text-wrap:pretty}
.shop-lede b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ bar */
/* The filters, in one white bar with a hairline, on the left under the
   title. Pressed is ink, never red. */
.shop-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;
  margin-top:clamp(20px,2.4vw,32px)}
.shop-bar{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow)}
.shop-bar:empty{display:none}
.sb-seg{display:flex;gap:2px}
.sb-seg-b,.sb-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 14px;
  border:0;border-radius:var(--r);background:transparent;cursor:pointer;font-size:.875rem;font-weight:600;
  color:var(--ink-3);white-space:nowrap;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.sb-seg-b:hover,.sb-b:hover{background:var(--soft);color:var(--ink)}
.sb-seg-b[aria-pressed="true"]{background:var(--ink);color:#fff}
.sb-seg-b .n{font-weight:500;opacity:.6;font-variant-numeric:tabular-nums}
.sb-sep{flex:0 0 1px;width:1px;height:24px;background:var(--line)}
.sb-sleeps{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 4px 0 12px;font-size:.875rem;
  font-weight:600;color:var(--ink-3)}
.sb-sleeps select{height:32px;border:0;border-radius:var(--r);padding:0 30px 0 12px;background-color:var(--soft);
  font-weight:600;color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 16px) 14px,calc(100% - 11px) 14px;background-size:5px 5px;background-repeat:no-repeat}
.sb-ic{display:inline-grid;place-items:center;flex:0 0 auto}
.sb-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sb-mine{color:var(--ink)}
/* the pickup check, one red button (8 October 2026): it opens the question
   and never filters; the cells that fit then carry a dark badge with a tick */
.sb-mine.is-red{background:var(--red);color:#fff}
.sb-mine.is-red:hover{background:var(--red-deep);color:#fff}

/* A FILTER THAT IS ON: ink, its name, its cross (Arnaud, 30 September 2026:
   "que le filtre soit clairement sélectionné"). The family button that is on
   carries the cross too: a second tap gives back every family. */
.sb-seg-x{margin-left:-2px;font-size:1.125rem;font-weight:500;line-height:1;opacity:.8}
.sb-chip{display:inline-flex;align-items:center;gap:2px;min-width:0;height:40px;padding:0 4px 0 0;
  border-radius:var(--r);background:var(--ink);color:#fff;font-size:.875rem;font-weight:600}
.sb-chip-b{display:inline-flex;align-items:center;gap:8px;min-width:0;height:40px;padding:0 6px 0 12px;
  border:0;border-radius:var(--r);background:transparent;color:inherit;font:inherit;cursor:default}
button.sb-chip-b{cursor:pointer}
button.sb-chip-b:hover .sb-chip-t{text-decoration:underline;text-underline-offset:3px}
.sb-chip-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-x{flex:0 0 auto;width:32px;height:32px;border:0;border-radius:var(--r);background:transparent;cursor:pointer;
  font-size:1.25rem;line-height:1;color:inherit;opacity:.85;transition:background var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)}
.sb-x:hover{background:rgba(255,255,255,.16);opacity:1}
.sb-chip .sb-x:focus-visible,.sb-chip-b:focus-visible{outline-color:#fff;outline-offset:-3px}
/* a number of sleeping places chosen reads as on, like the rest */
.sb-sleeps.is-on{color:var(--ink)}
.sb-sleeps.is-on select{background-color:var(--ink);color:#fff}

@media (max-width:760px){
  /* two rows a thumb can read, not a strip that hides half its buttons */
  .shop-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;gap:5px}
  .sb-seg{grid-column:1 / -1}
  .sb-seg-b{flex:1 1 0;min-width:0;gap:6px;padding:0 8px;white-space:normal;line-height:1.1;text-align:center}
  .sb-seg-b[data-family=""]{flex:0 0 auto;padding:0 16px}
  .sb-seg-b .n{display:none}
  .sb-sep{display:none}
  .sb-sleeps{justify-content:space-between;padding:0 4px 0 10px;border-radius:var(--r);background:var(--soft)}
  .sb-sleeps select{background-color:#fff}
  .sb-sleeps.is-on select{background-color:var(--ink)}
  .sb-mine{justify-content:center;min-width:0;background:var(--soft)}
  .sb-mine span:last-child{overflow:hidden;text-overflow:ellipsis}
  .sb-chip{justify-content:space-between}
  .sb-rg{grid-column:1 / -1}
  .shop-bar:not(:has(.sb-sleeps)) > .sb-mine,.shop-bar:not(:has(.sb-sleeps)) > .sb-veh{grid-column:1 / -1}
}

/* ------------------------------------------------------- the results row */
.shop{padding-top:clamp(22px,2.6vw,36px);padding-bottom:var(--sec-pad)}
.shop-meta{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;min-height:42px}
@media (max-width:760px){.shop-meta{width:100%}}
.shop-count{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:.875rem;font-weight:600;color:var(--ink-3)}
/* the way back, where the result is read */
.shop-count-all{padding:0;border:0;background:none;font:inherit;color:var(--ink);cursor:pointer;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.shop-count-all:hover{text-decoration-thickness:2.5px}
@media (max-width:420px){.shop-count-w{display:none}}
.shop-view{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:var(--r-card);background:#fff}
.sv-b{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border:0;border-radius:var(--r);
  background:transparent;cursor:pointer;font-size:.8125rem;font-weight:600;color:var(--ink-3);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.sv-b:hover{color:var(--ink);background:var(--soft)}
.sv-b[aria-pressed="true"]{background:var(--ink);color:#fff}
.sv-ic{display:inline-grid}
.sv-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:420px){.sv-b{padding:0 10px}.sv-b .sv-ic{display:none}}

/* ------------------------------------------------------------- the cards */
/* THE CARDS READ ACROSS. Every card spans the same six rows of the grid
   (photograph, name, one line, the facts, a sentence, the price) and the
   rows are shared, so the facts of two neighbours sit on the same line
   whatever the cards above them say. */
/* no row gap: in a subgrid it would also fall between the rows INSIDE a
   card. The rows are spaced by margins, and a card ends with its own air. */
/* the answer to "which pickup do you drive?", as one heading over the grid */
.shop-fit{margin:clamp(6px,1vw,14px) 0 clamp(22px,2.6vw,36px);padding-left:clamp(14px,1.6vw,20px);
  border-left:2px solid var(--ink)}
.shop-fit-k{font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.shop-fit-h{margin-top:8px;font-size:clamp(1.5rem,1.05rem + 1.7vw,2.5rem);font-weight:600;letter-spacing:-.04em;
  line-height:1.05;text-wrap:balance;max-width:26ch}
/* the one red on a heading of the site, asked by Arnaud (29 September
   2026): the pickup the answer is about, underlined like a marker */
.shop-fit-h b{font-weight:600;color:var(--ink);box-shadow:inset 0 -.12em 0 var(--red,#e30613)}
.shop-fit-s{margin-top:10px;font-size:1rem;line-height:1.5;color:var(--ink-3);max-width:64ch}
/* a pickup whose bed the list cannot judge: the way to the two measurements */
.shop-fit-m{margin-top:14px}
.shop-grid{display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--gap);row-gap:0}
@media (min-width:640px){.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1060px){.shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vc{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;cursor:pointer}
@supports (grid-template-rows:subgrid){
  .vc{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0}
  .vc-b{display:contents}
}
.vc-media{position:relative;z-index:1;aspect-ratio:3 / 2;border-radius:var(--r-card);overflow:hidden;background:#fff;
  margin-bottom:14px}
.vc-strip{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.vc-strip::-webkit-scrollbar{display:none}
.vc-img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start;scroll-snap-stop:always;
  background:var(--soft);-webkit-user-drag:none;user-select:none;transition:transform 700ms var(--ease)}
/* the exterior is an object on white: contained, never cropped, and the
   near whites of its file taken to pure white so it floats on the page */
.vc-img.is-cut{object-fit:contain;padding:3% 3% 6%;background:#fff;filter:brightness(1.035)}
.vc-img.is-plate{object-fit:cover;padding:0;filter:none}
/* a cutout shot 4:3 on a white studio floor (the caravans) has air above and
   below its body: it fills the 3:2 tile, and only white is cut. A wider file
   (the cells, 16:9) keeps "contain", or the cab would lose its nose. */
.vc-img.is-cut.is-tall{object-fit:cover;padding:0}
@media (hover:hover) and (pointer:fine){.vc:hover .vc-img.is-cut:not(.is-plate){transform:scale(1.035)}}

.vc-tag{position:absolute;top:12px;left:12px;z-index:2;padding:5px 9px;border-radius:var(--r);font-size:.75rem;
  font-weight:600;line-height:1.2;pointer-events:none;background:rgb(255 255 255 / .94);color:var(--ink);
  box-shadow:0 0 0 1px var(--line)}
.vc-tag.is-fit{background:var(--ink);color:#fff;box-shadow:none}
.vc-tag.is-fit{display:inline-flex;align-items:center;gap:5px}
.vc-tick{display:inline-grid;width:13px;height:13px}
.vc-tick svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* the dots say "there is more than one photograph": short bars, the one on
   screen longer, on a dark glass that reads over white and over a room */
.vc-dots{position:absolute;left:50%;bottom:10px;z-index:2;transform:translateX(-50%);display:flex;align-items:center;
  gap:7px;padding:6px 9px;border-radius:var(--r);background:rgb(19 19 19 / .34);pointer-events:none}
/* the bar on screen grows by a transform, never by its width: nothing
   around it is laid out again while a photograph slides */
.vc-dots i{display:block;width:10px;height:3px;border-radius:2px;background:rgb(255 255 255 / .55);
  transition:transform var(--t) var(--ease),background var(--t-fast) var(--ease)}
.vc-dots i.on{transform:scaleX(1.6);background:#fff}
.vc-nav{position:absolute;top:50%;z-index:3;display:grid;place-items:center;width:38px;height:38px;margin-top:-19px;
  border:0;border-radius:var(--r-card);background:rgb(255 255 255 / .96);color:var(--ink);cursor:pointer;
  box-shadow:0 2px 12px rgb(0 0 0 / .16),0 0 0 1px var(--line);font-size:1rem;line-height:1;opacity:0;visibility:hidden;
  transition:opacity var(--t-fast) var(--ease),visibility var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.vc-nav:hover{background:var(--ink);color:#fff}
.vc-prev{left:10px}.vc-next{right:10px}
/* a convenience for the mouse, out of the tab order: the keyboard walks the
   photographs in the sheet, where the carousel is whole */
@media (hover:hover) and (pointer:fine){.vc:hover .vc-nav:not(:disabled){opacity:1;visibility:visible}}
@media (hover:none),(pointer:coarse){.vc-nav{display:none}}

.vc-n{font-size:1.3125rem;font-weight:600;letter-spacing:-.03em;line-height:1.12}
.vc-a::after{content:"";position:absolute;inset:0;z-index:0}
.vc-a:focus-visible{outline:none}
.vc:has(.vc-a:focus-visible) .vc-media{outline:2px solid var(--ink);outline-offset:3px}
.vc-m{margin-top:4px;font-size:.875rem;color:var(--ink-3)}

/* THE KEY FIGURES OF A CARD: three numbers a buyer reads in one glance
   (sleeps, fresh water, weight; the weight first on a pickup camper), each
   with its unit and a small label, then a few chips for what is left. The
   full register of eight lines is in the sheet. */
/* the container is a wrapper, not the card: a card that is a size
   container gets layout containment, and a contained box cannot be a
   subgrid, which is what keeps the rows level */
.vc-fw{container-type:inline-size;min-width:0;margin-top:14px}
.vc-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding-top:14px;border-top:1px solid var(--line);
  align-content:start}
.vc-figs>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;min-width:0;padding-inline:14px;
  border-left:1px solid var(--line)}
.vc-figs>div:first-child{padding-left:0;border-left:0}
.vc-figs dt{display:flex;align-items:center;gap:5px;min-width:0;font-size:.8125rem;line-height:1.2;color:var(--ink-3)}
.vc-figs dt span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc-fi{display:grid;flex:0 0 auto;width:15px;height:15px;color:var(--ink-4)}
.vc-fi svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vc-figs dd{margin:0;display:flex;align-items:baseline;gap:4px;min-width:0;color:var(--ink);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.vc-figs dd b{font-size:clamp(1.5rem,7cqi,2rem);font-weight:600;letter-spacing:-.04em;line-height:1}
.vc-figs dd span{font-size:.875rem;font-weight:500;color:var(--ink-3)}
.vc-figs dd.is-long b{font-size:clamp(1rem,4.6cqi,1.25rem);letter-spacing:-.02em;line-height:1.1}
@container (max-width:400px){.vc-fi{display:none}.vc-figs>div{padding-inline:10px}.vc-figs dt{font-size:.78125rem}}
.vc-figs .is-none dd{color:var(--line-2)}
.vc-chips{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0;list-style:none;align-content:flex-start}
.vc-chips:empty{margin-top:0}
.vc-chips li{padding:5px 10px;border-radius:var(--r);background:var(--soft);font-size:.8125rem;line-height:1.25;color:var(--ink-2)}
/* the sheet: the same figures, a little larger, with the full register under */
.sh-figs{margin:4px 0 18px;container-type:inline-size}
.sh-figs dd b{font-size:clamp(1.5rem,8cqi,2.25rem)}

.vc-foot{display:grid;gap:4px;align-content:start;margin-top:14px;padding-bottom:clamp(40px,4vw,60px)}
.vc-p{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 7px;font-size:.9375rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.vc-p b{font-size:1.3125rem;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
.vc-p .cq,.sh-price .cq,.cmp-p .cq{display:inline;margin:0}
.vc-note{font-size:.8125rem;line-height:1.45;color:var(--ink-3)}
.vc-warn,.sh-warn{position:relative;padding-left:16px;font-size:.8125rem;line-height:1.45;color:var(--ink-2)}
.vc-warn::before,.sh-warn::before{content:"";position:absolute;left:2px;top:.5em;width:7px;height:7px;border-radius:50%;
  box-shadow:inset 0 0 0 2px var(--ink-2)}
/* the pickup check of a pickup camper: a button of its own, a help and
   never a gate (the rest of the card opens the sheet) */
.vc-ask{position:relative;z-index:1;display:flex;align-items:center;gap:10px;width:100%;margin-top:10px;min-height:44px;
  padding:0 14px;border:0;border-radius:var(--r-card);background:var(--soft);font:inherit;font-size:.875rem;font-weight:600;
  color:var(--ink);text-align:left;cursor:pointer;transition:background var(--t-fast) var(--ease)}
.vc-ask svg{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vc-ask span:not(.arr){flex:1 1 auto;min-width:0}
.vc-ask .arr{transition:transform var(--t) var(--ease)}
.vc-ask:hover{background:#ececec}
.vc-ask:hover .arr{transform:translateX(3px)}
.vc-ask:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sh-ask{margin:14px 0 4px}

/* ------------------------------------------------------- the comparison */
.cmp-head{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-bottom:12px}
.cmp-diff{display:inline-flex;align-items:center;gap:9px;font-size:.875rem;font-weight:600;cursor:pointer}
.cmp-diff input{width:18px;height:18px;margin:0;accent-color:var(--ink);cursor:pointer}
.cmp-frame{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:#fff;
  overscroll-behavior-x:contain}
.cmp-frame:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cmpt{width:100%;border-collapse:separate;border-spacing:0;font-size:.9375rem}
.cmpt th,.cmpt td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cmpt tr:last-child>*{border-bottom:0}
.cmpt thead th{padding-top:16px;padding-bottom:14px;vertical-align:bottom}
.cmpt tbody th,.cmp-corner{position:sticky;left:0;z-index:1;width:1%;min-width:128px;background:#fff;
  box-shadow:1px 0 0 var(--line);font-size:.6875rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-4);white-space:nowrap}
.cmpt td{min-width:160px;color:var(--ink-3)}
.cmp-open{display:grid;justify-items:start;gap:8px;width:100%;padding:0;border:0;background:none;cursor:pointer;
  text-align:left;color:var(--ink)}
.cmp-open img{width:100%;max-width:180px;aspect-ratio:4 / 3;object-fit:contain;filter:brightness(1.035);
  transition:transform var(--t) var(--ease)}
.cmp-open:hover img{transform:scale(1.04)}
.cmp-n{font-size:1rem;font-weight:600;letter-spacing:-.02em}
.cmp-open:hover .cmp-n{text-decoration:underline;text-underline-offset:3px}
.cv{font-variant-numeric:tabular-nums}
.cs{display:block;margin-top:2px;font-size:.75rem;color:var(--ink-4)}
.cmpt td.is-none .cv{color:var(--line-2)}
/* WHERE A CHOICE IS MADE: a row whose columns disagree is marked by a dot
   on its label, and its values go to full ink on a light ground; a row
   where they agree stays quiet */
.cmpt tr.is-diff td{background:#fafafa;color:var(--ink)}
.cmpt tr.is-diff td .cv{font-weight:600}
.cmpt tr.is-diff th::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-radius:50%;
  background:var(--ink);vertical-align:middle}
.cmpt tr.is-price td{color:var(--ink)}
.cmpt tr.is-price th::after{content:none}
.cmp-p{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;font-variant-numeric:tabular-nums}
.cmp-p .from{color:var(--ink-3)}
.cmp-p b{font-size:1.0625rem;font-weight:600}
@media (max-width:640px){
  .cmpt th,.cmpt td{padding:11px 12px}
  .cmpt tbody th,.cmp-corner{min-width:0;width:84px;max-width:84px;white-space:normal;font-size:.625rem;letter-spacing:.05em}
  .cmpt td{min-width:136px}
  .cmpt tr.is-diff th::after{display:block;margin:6px 0 0}
  .cmp-open img{max-width:128px}
}
.cmpt.only-diff tbody tr:not(.is-diff):not(.is-keep){display:none}

/* ------------------------------------------------- the empty, the foot */
.shop-empty{padding:clamp(22px,3vw,36px);border-radius:var(--r-card);background:var(--soft)}
.shop-empty p{max-width:62ch;color:var(--ink-2)}
.shop-empty-a{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.shop-wa svg,.sh-wa svg{width:20px;height:20px;fill:currentColor;flex:0 0 auto}
.shop-foot{display:grid;gap:10px;margin-top:8px;padding-top:22px;border-top:1px solid var(--line)}

/* ------------------------------------------------------------ dialogs */
html.shop-locked,html.shop-locked body{overflow:hidden}
.dlg{max-width:none;max-height:none;margin:0;padding:0;border:0;background:none;color:inherit;overflow:visible}
.dlg::backdrop{background:rgb(10 10 10 / .55)}

/* ------------------------------------------------------------ the sheet */
/* Full screen on a phone and a tablet; on a desktop, a frame inset from the
   window with the photographs on the left and the words on the right, the
   button always in view. */
.dlg-s{position:fixed;inset:0;width:100%;height:100%}
@media (min-width:1024px){.dlg-s{inset:clamp(14px,2.4vh,30px);width:auto;height:auto}}
.sh{position:relative;height:100%;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;background:#fff;color:var(--ink)}
.sh-x{position:absolute;z-index:6;top:12px;left:12px;display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:0;border-radius:var(--r-card);background:#fff;color:var(--ink-2);cursor:pointer;font-size:1.5rem;line-height:1;
  box-shadow:0 2px 12px rgb(0 0 0 / .16),0 0 0 1px var(--line);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.sh-x:hover{background:var(--ink);color:#fff}

.sh-stage{position:relative;flex:0 0 auto;display:flex;flex-direction:column;background:#fff;padding-bottom:6px}
.sh-view{position:relative;height:clamp(230px,44svh,440px)}
.sh-track{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.sh-track::-webkit-scrollbar{display:none}
.sh-track:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.sh-slide{flex:0 0 100%;display:flex;align-items:center;justify-content:center;height:100%;margin:0;
  padding:60px 16px 16px;scroll-snap-align:center;scroll-snap-stop:always}
.sh-slide img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;
  -webkit-user-drag:none;user-select:none}
.sh-slide.is-cut img{filter:brightness(1.035)}
.sh-slide.is-photo img{border-radius:var(--r-card)}
.sh-nav{position:absolute;top:50%;z-index:3;display:grid;place-items:center;width:44px;height:44px;margin-top:-4px;
  padding:0;border:0;border-radius:var(--r-card);background:#fff;color:var(--ink);cursor:pointer;font-size:1.0625rem;
  box-shadow:0 2px 12px rgb(0 0 0 / .14),0 0 0 1px var(--line);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)}
.sh-nav:hover:not(:disabled){background:var(--ink);color:#fff}
.sh-nav:disabled{opacity:.28;cursor:default}
.sh-prev{left:12px}.sh-next{right:12px}
.sh-count{position:absolute;top:18px;right:14px;z-index:3;padding:5px 9px;border-radius:var(--r);
  background:rgb(19 19 19 / .78);color:#fff;font-size:.75rem;font-weight:600;letter-spacing:.02em;
  font-variant-numeric:tabular-nums}
.sh-dots{display:flex;justify-content:center;align-items:center;gap:9px;padding-top:8px}
.sh-dots i{display:block;width:12px;height:3px;border-radius:2px;background:var(--line-2);
  transition:transform var(--t) var(--ease),background var(--t-fast) var(--ease)}
.sh-dots i.on{transform:scaleX(1.7);background:var(--ink)}
.sh-thumbs{display:none}
.sh-thumb{flex:0 0 auto;width:78px;height:58px;padding:0;overflow:hidden;border:1px solid var(--line);
  border-radius:var(--r);background:#fff;cursor:pointer;opacity:.72;
  transition:opacity var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.sh-thumb:hover{opacity:1}
.sh-thumb img{width:100%;height:100%;object-fit:cover}
.sh-thumb.is-cut img{object-fit:contain;padding:4px;filter:brightness(1.035)}
.sh-thumb[aria-current]{opacity:1;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

.sh-pane{display:flex;flex-direction:column;flex:1 0 auto;min-height:0}
.sh-body{display:flex;flex-direction:column;gap:16px;padding:clamp(18px,2.4vw,34px) clamp(18px,2.4vw,34px) 26px}
.sh-k{color:var(--ink-3)}
.sh-t{font-size:clamp(1.875rem,1.35rem + 1.6vw,2.75rem);letter-spacing:-.045em;line-height:.98;margin-top:-6px}
.sh-models{display:flex;flex-wrap:wrap;gap:6px}
.sh-chip{height:36px;padding:0 13px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff;cursor:pointer;
  font-size:.8125rem;font-weight:600;color:var(--ink-2);
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.sh-chip:hover{border-color:var(--ink)}
.sh-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.sh-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;font-size:1rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.sh-price b{font-size:clamp(1.625rem,1.3rem + 1vw,2.125rem);font-weight:600;letter-spacing:-.035em;color:var(--ink)}
.sh-note{margin-top:-10px;font-size:.8125rem;color:var(--ink-3)}
.sh-fit{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-card);background:var(--soft)}
.sh-fit p{display:grid;gap:6px;font-size:.9375rem;color:var(--ink-2)}
.sh-fit b{color:var(--ink)}
.sh-facts{display:grid;border-top:1px solid var(--line)}
.sh-facts>div{display:grid;grid-template-columns:minmax(104px,38%) minmax(0,1fr);gap:14px;padding:11px 0;
  border-bottom:1px solid var(--line)}
.sh-facts dt{font-size:.875rem;color:var(--ink-3)}
.sh-facts dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.sh-facts dd small{display:block;margin-top:1px;font-size:.8125rem;font-weight:500;color:var(--ink-4)}
.sh-more{margin-top:-6px}
.sh-dif{font-size:1rem;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.sh-sec{display:grid;gap:10px;margin-top:6px}
.sh-h{font-size:1.125rem;letter-spacing:-.02em}
.sh-inc,.sh-grp{border-top:1px solid var(--line)}
.sh-grp:last-child{border-bottom:1px solid var(--line)}
.sh-inc{border-bottom:1px solid var(--line)}
.sh-inc summary,.sh-grp summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;
  cursor:pointer;list-style:none;font-weight:600}
.sh-inc summary::-webkit-details-marker,.sh-grp summary::-webkit-details-marker{display:none}
.sh-inc summary::after,.sh-grp summary::after{content:"";flex:0 0 auto;width:8px;height:8px;margin-right:4px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-3px);
  transition:transform var(--t) var(--ease)}
.sh-inc[open] summary::after,.sh-grp[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.sh-inc summary>span:first-child,.sh-grp summary>span:first-child{flex:1 1 auto}
.sh-cnt{font-size:.8125rem;font-weight:500;color:var(--ink-4)}
.sh-inc ul{display:grid;gap:6px;padding:2px 0 16px}
.sh-inc li{position:relative;padding-left:16px;font-size:.9375rem;color:var(--ink-2);line-height:1.4}
.sh-inc li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1.5px;background:var(--ink-4)}
.sh-opt-l{display:grid;padding-bottom:12px}
.sh-opt-l li{padding:10px 0;border-top:1px solid var(--soft)}
.sh-opt-l li:first-child{border-top:0;padding-top:2px}
.sh-opt{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.sh-opt-n{font-size:.9375rem;color:var(--ink)}
.sh-opt-p{flex:0 0 auto;font-size:.9375rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.sh-opt-w{margin-top:3px;font-size:.8125rem;line-height:1.45;color:var(--ink-3)}

/* THE ONE RED, and WhatsApp beside it: always in view, at the foot of the
   sheet on a phone as on a desktop */
.sh-act{position:sticky;bottom:0;z-index:4;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;
  margin-top:auto;padding:12px clamp(16px,2.4vw,34px) calc(12px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line);background:#fff}
.sh-go{width:100%}
.sh-wa{gap:10px;padding:0 18px}
@media (max-width:380px){.sh-wa span{display:none}.sh-wa{padding:0 15px}}

@media (min-width:1024px){
  .sh{display:grid;grid-template-columns:minmax(0,1fr) clamp(420px,38vw,540px);grid-template-rows:minmax(0,1fr);
    overflow:hidden;border-radius:var(--r-card);box-shadow:var(--shadow-2)}
  .sh-stage{min-height:0;padding:22px 26px 22px}
  .sh-view{flex:1 1 auto;height:auto;min-height:0}
  .sh-slide{padding:48px 56px 12px}
  .sh-prev{left:0}.sh-next{right:0}
  .sh-count{top:6px;right:0}
  .sh-pane{min-height:0;border-left:1px solid var(--line)}
  .sh-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .sh-act{position:static;margin-top:0}
}
@media (min-width:1024px) and (min-height:680px){
  .sh-thumbs{display:flex;justify-content:center;gap:8px;padding-top:16px;overflow-x:auto;scrollbar-width:none}
  .sh-dots{display:none}
}

/* ---------------------------------------------- which pickup do you drive */
/* A sheet that rises from the bottom on a phone, a centred card on a wider
   screen. The list scrolls inside it; the three ways out stay at its foot. */
.dlg-p{position:fixed;inset:auto 0 0 0;width:100%;max-height:92svh}
@media (min-width:640px){.dlg-p{inset:0;margin:auto;width:min(580px,calc(100% - 32px));height:fit-content;max-height:min(740px,88svh)}}
.pk{position:relative;display:flex;flex-direction:column;max-height:92svh;overflow:hidden;background:#fff;color:var(--ink);
  border-radius:12px 12px 0 0;box-shadow:var(--shadow-2)}
@media (min-width:640px){.pk{max-height:min(740px,88svh);border-radius:var(--r-card)}}
.pk-h{position:relative;display:grid;gap:8px;padding:24px 72px 0 24px}
.pk-t{font-size:clamp(1.5rem,1.2rem + 1.1vw,2.125rem);letter-spacing:-.04em;line-height:1.02}
.pk-x{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;
  border-radius:var(--r-card);background:var(--soft);color:var(--ink-2);cursor:pointer;font-size:1.5rem;line-height:1}
.pk-x:hover{background:var(--ink);color:#fff}
.pk-lede{padding:8px 24px 0;font-size:.9375rem;color:var(--ink-3)}
/* the vehicle kept from an earlier visit: offered first, one tap, and a
   way to forget it; every make stays listed under it */
.pk-mine{display:grid;gap:6px;margin:16px 24px 0}
.pk-mine[hidden]{display:none}
.pk-mine-b{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:1px solid var(--ink);
  border-radius:var(--r-card);background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer;
  transition:background var(--t-fast) var(--ease)}
.pk-mine-b:hover{background:var(--soft)}
.pk-mine-b:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pk-mine-b .arr{margin-left:auto;transition:transform var(--t-fast) var(--ease)}
.pk-mine-b:hover .arr{transform:translateX(3px)}
.pk-mine-t{display:grid;gap:2px;min-width:0}
.pk-mine-t b{font-size:1rem;font-weight:600;letter-spacing:-.01em}
.pk-mine-t span{font-size:.8125rem;color:var(--ink-3)}
.pk-mine-x{justify-self:start;padding:4px 0;border:0;background:none;font:inherit;font-size:.8125rem;
  color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pk-mine-x:hover{color:var(--ink)}
.pk-mine-or{margin-top:8px;font-size:.8125rem;font-weight:600;color:var(--ink-3)}
.pk-t:focus{outline:none}
.pk-search{display:flex;align-items:center;gap:10px;height:50px;margin:16px 24px 4px;padding:0 14px;
  border:1px solid var(--line-2);border-radius:var(--r-card);background:#fff;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.pk-search:focus-within{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.pk-si{display:inline-grid}
.pk-si svg{width:18px;height:18px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round}
.pk-search input{flex:1 1 auto;min-width:0;height:100%;border:0;outline:0;background:none;font-size:1rem}
.pk-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.pk-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 24px 0;font-size:.8125rem}
.pk-crumb:empty{display:none}
.pk-cr{padding:4px 0;border:0;background:none;cursor:pointer;font-weight:600;color:var(--ink-3);
  text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.pk-cr:hover{color:var(--ink);text-decoration-color:var(--ink)}
.pk-cr-s{color:var(--line-2)}
.pk-cr-h{font-weight:600;color:var(--ink)}
.pk-list{flex:1 1 auto;min-height:132px;overflow-y:auto;overscroll-behavior:contain;display:grid;align-content:start;
  gap:2px;padding:8px 14px 12px}
.pk-list.is-makes{grid-template-columns:repeat(2,minmax(0,1fr))}
.pk-opt{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1px 12px;min-height:58px;padding:10px 12px;
  border:0;border-radius:var(--r-card);background:transparent;cursor:pointer;text-align:left;color:var(--ink);
  transition:background var(--t-fast) var(--ease)}
.pk-opt:hover,.pk-opt:focus-visible{background:var(--soft)}
.pk-opt:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.pk-opt-t{grid-column:1;font-size:1rem;font-weight:600;letter-spacing:-.01em}
.pk-opt-s{grid-column:1;font-size:.8125rem;color:var(--ink-3)}
.pk-opt-a{grid-column:2;grid-row:1 / span 2;color:var(--ink-4);transition:transform var(--t) var(--ease)}
.pk-opt:hover .pk-opt-a{transform:translateX(3px);color:var(--ink)}
.pk-empty{padding:22px 10px;color:var(--ink-3);font-size:.9375rem}
.pk-unknown p{color:var(--ink-2);max-width:48ch}
.pk-unknown-a{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.pk-opt.is-other .pk-opt-t{font-weight:500;color:var(--ink-2)}
.pk-wait{display:flex;align-items:center;gap:12px}
.pk-spin{flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--ink)}
.axt-motion .pk-spin{animation:pk-spin .8s linear infinite}
@keyframes pk-spin{to{transform:rotate(360deg)}}
/* the form scrolls inside the dialog: three fields and their help must
   stay reachable on a 320 x 568 phone */
.pk-custom{display:grid;align-content:start;gap:14px;flex:1 1 auto;min-height:0;overflow-y:auto;
  overscroll-behavior:contain;padding:16px 24px 18px}
.pk-help{font-size:.9375rem;color:var(--ink-2)}
.pk-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pk-fields label{display:grid;gap:6px;font-size:.8125rem;font-weight:600;color:var(--ink-3)}
.pk-in{display:flex;align-items:center;gap:8px;height:50px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-card)}
.pk-in:focus-within{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.pk-in input{flex:1 1 auto;width:100%;min-width:0;height:100%;border:0;outline:0;background:none;font-size:1rem;
  font-variant-numeric:tabular-nums}
.pk-in i{font-style:normal;color:var(--ink-4)}
/* the towing capacity: its own line, and said optional in the label */
.pk-fields .pk-wide{grid-column:1 / -1}
.pk-fields em{margin-left:4px;font-style:normal;font-weight:500;color:var(--ink-4)}
.pk-err{font-size:.875rem;font-weight:600;color:var(--ink)}
.pk-form-a{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.pk-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;
  padding:12px 24px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.pk-alt{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0;border:0;background:none;cursor:pointer;
  font-size:.875rem;font-weight:600;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);
  text-underline-offset:4px;transition:color var(--t-fast) var(--ease),text-decoration-color var(--t-fast) var(--ease)}
.pk-alt:hover{color:var(--ink);text-decoration-color:var(--ink)}
.pk-wa{text-decoration:none}
.pk-wa svg{width:18px;height:18px;fill:currentColor}
/* a short phone keeps the list, not the sentence above it */
@media (max-height:640px){.pk-lede{display:none}.pk-search{margin-top:12px}}
@media (max-width:420px){
  .pk-h{padding:20px 64px 0 18px}
  .pk-lede,.pk-crumb{padding-inline:18px}
  .pk-search,.pk-mine{margin-inline:18px}
  .pk-list.is-makes{grid-template-columns:minmax(0,1fr)}
  .pk-custom{padding-inline:18px}
  .pk-fields{grid-template-columns:minmax(0,1fr)}
  .pk-foot{padding-inline:18px}
}

/* ---------------------------------------------------------------- motion */
/* The dialogs arrive and leave; the cards of a filter move inside a view
   transition (assets/shop.js names them for its duration only). */
@media (prefers-reduced-motion:no-preference){
  .dlg[open]::backdrop{animation:shop-fade .3s ease-out both}
  .dlg.is-closing::backdrop{animation:shop-fade .2s ease-in reverse both}
  .dlg-s[open] .sh{animation:sh-in .5s var(--ease) both}
  .dlg-s.is-closing .sh{animation:sh-out .2s ease-in both}
  .dlg-p[open] .pk{animation:pk-up .42s var(--ease) both}
  .dlg-p.is-closing .pk{animation:pk-down .18s ease-in both}
  @media (min-width:640px){
    .dlg-p[open] .pk{animation-name:pk-in}
    .dlg-p.is-closing .pk{animation-name:pk-out}
  }
  @keyframes shop-fade{from{opacity:0}}
  @keyframes sh-in{from{opacity:0;transform:translateY(26px)}}
  @keyframes sh-out{to{opacity:0;transform:translateY(16px)}}
  @keyframes pk-up{from{transform:translateY(100%)}}
  @keyframes pk-down{to{transform:translateY(100%)}}
  @keyframes pk-in{from{opacity:0;transform:translateY(14px) scale(.985)}}
  @keyframes pk-out{to{opacity:0;transform:translateY(8px) scale(.99)}}
  ::view-transition-group(shop-veh){animation-duration:.52s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  ::view-transition-group(shop-cmp){animation-duration:.4s}
}
/* a card that moves with a filter: a little longer than the browser's
   default, and the ease of the rest of the site (the class is set by
   assets/shop.js for the length of the transition) */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-group(*.vc){animation-duration:.46s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  ::view-transition-old(*.vc),::view-transition-new(*.vc){animation-duration:.3s}
}

/* ---------------------------------------------- the vehicle of the visit */
/* on a card of the full grid: what the model is to the vehicle given */
.vc-ask.is-no{color:var(--ink-3)}
.vc-ask.is-no .arr{opacity:.5}
/* in the configurator bar: the vehicle, the verdict for the model on screen,
   and Change. The same glass as the other pills of that bar (dark on the
   caravans' studio, light on the cells' white), never the red of an action */
.cfg-veh{display:inline-flex;align-items:center;gap:10px;min-height:48px;min-width:0;max-width:min(440px,44vw);
  margin-left:auto;padding:4px 18px 4px 14px;border:1px solid rgb(255 255 255 / .22);border-radius:999px;
  background:rgb(12 13 14 / .64);color:#fff;font:inherit;text-align:left;cursor:pointer;
  backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);
  transition:border-color .2s ease}
.cfg-veh[hidden]{display:none}
.cfg-veh:hover{border-color:rgb(255 255 255 / .48)}
.cfg-veh:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.cfg-screen:has(.cfg.is-light) .cfg-veh{border-color:rgb(19 19 19 / .18);background:rgb(255 255 255 / .84);color:#131313}
.cfg-screen:has(.cfg.is-light) .cfg-veh:hover{border-color:rgb(19 19 19 / .44)}
.cfg-veh-i{display:inline-flex;flex:0 0 auto;width:22px;height:22px}
.cfg-veh-i svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cfg-veh-t{display:grid;min-width:0;line-height:1.2}
.cfg-veh-t b{font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfg-veh-t span{font-size:.75rem;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfg-veh.is-no .cfg-veh-t span{opacity:1;color:#ff6b6b}
.cfg-screen:has(.cfg.is-light) .cfg-veh.is-no .cfg-veh-t span{color:var(--red-deep,#c00510)}
.cfg-veh-c{flex:0 0 auto;margin-left:4px;font-size:.8125rem;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.cfg-screen-end:has(.cfg-veh:not([hidden])){flex:1 1 auto;min-width:0;justify-content:flex-end}
/* a phone: the way back keeps its arrow, the mark leaves, and the vehicle
   takes the room left, name and verdict on two lines */
@media (max-width:560px){
  .cfg-screen:has(.cfg-veh:not([hidden])) .cfg-screen-close{width:48px;padding:0}
  .cfg-screen:has(.cfg-veh:not([hidden])) .cfg-screen-close [data-close-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cfg-screen:has(.cfg-veh:not([hidden])) .cfg-screen-mark{display:none}
  .cfg-veh{flex:1 1 auto;max-width:none;padding:4px 14px 4px 12px;gap:8px}
  .cfg-veh-i{display:none}
  .cfg-screen-bar{gap:10px;padding-inline:14px}
}

/* ------------------------------------- what a photograph shows as option */
.sh-slide{position:relative}
.sh-badge{position:absolute;right:26px;bottom:26px;z-index:2;padding:6px 11px;border-radius:999px;
  background:rgb(19 19 19 / .82);color:#fff;font-size:.8125rem;font-weight:600;letter-spacing:.005em;pointer-events:none}
@media (min-width:1024px){.sh-badge{right:60px;bottom:16px}}