/* ============================================================================
   AXT : THE CONFIGURATOR, ALL OF ITS STYLE. Linked AFTER assets/axt.css by
   every page that mounts it:
     <link rel="stylesheet" href="assets/axt.css">
     <link rel="stylesheet" href="assets/configurator.css">

   It goes with assets/configurator.js, which BUILDS the markup below. Nothing
   here is written by a page, and nothing here may be overridden in a page
   <style>: two copies of a tick box is exactly what this file exists to stop.

   THE HOST PAGE OWES IT THREE THINGS AND NOTHING ELSE:
     1. a mount point:  <div data-configurator></div>
     2. the band that carries the colour: class .cfg-band on the element that
        should paint the strip edge to edge (a <section> on the site, the full
        screen view on the stand tablet). Without it the block still works, it
        simply stops bleeding to the edges.
     3. THE ONE SCREEN CONTRACT, on desktop and on the stand tablet:
          .cfg-fit     on the band. It becomes exactly one screen tall.
          .cfg-fit-in  on EVERY wrapper between the band and the mount point
                       (the .wrap-wide of the site, .kiosk-build and its wrap
                       on the tablet). Each one becomes a flex column that may
                       shrink, so the height reaches the block instead of
                       stopping at the first div that did not ask for it.
          --cfg-top    what the band has to give back at the top of the
                       screen. The site: the sticky header plus the scroll
                       padding of an anchor. The kiosk: 0, its bar is inside.
        Leave them out and the block goes back to its natural height: the
        contract is opt in, and it is off below 1181px on the site, where the
        two columns stack and a phone scrolls the way a phone scrolls.

   WHY A BAND AND NOT A PLATE (22 August 2026). The studio renders carry their
   background BAKED INTO THE FILE: a spot, a mirror floor, a vignette that
   already falls to near black at the edges. As long as the configurator was a
   black rectangle inside a white column, that vignette ended on a hard line
   and the whole thing read as a screenshot pasted on the page. Two decisions
   fix it and neither may be undone lightly:
     1. the colour runs edge to edge, the content stays on the column;
     2. the stage lays a veil over its own edges that ends on the band colour,
        so the baked vignette and the band become one surface.

   EVERY colour of this block is a token declared below, and ONE class flips
   all of them: .is-light, set by configurator.js on the band and on .cfg when
   the FAMILY on screen is photographed on white (a white cutout on black is a
   white box, with a hard border where the file ends). Which family is which is
   never written here and never written in a page: it is read from the data by
   AXT.sceneTheme, see the block that publishes it in assets/axt.js. Never
   write a raw colour below, add a token. Secondary text never goes below
   #a3a3a3 on black: #b4b6b8 is 10:1.

   Contract of the markup, in the order configurator.js writes it:
     .cfg
       .stage-col > .stage (img + .stage-tag + .stage-msg + .stage-foot)
                  + .stage-ctl (button + .gal)
       .rail      > .rail-head (.rail-head-t + .cfg-steps > .cfg-stepb)
                  + .rail-body > .cfg-step[data-step-key] x N
                      model    .rail-blk-model (.cfg-shelf-k + .cfg-shelf
                                          + .kicker + .seg)
                             + .rail-blk-tint  (.tints + .cfg-tint-note)
                             + .rail-blk-spec  (.cfg-spec-l + .cfg-spec)
                      finish   .rail-blk-finish (.cfg-fin + .cfg-fin-groups
                                          > .cfg-fin-g > .swatches > .sw)
                      options  .rail-blk-opts  (.ogrps > .ogrp > .modes > .mode
                                          + .ogrp-std)
                      quote    .quote-scroll (.quote-h + .cur-row + .cfg-sum
                                          + .ogrp-asset > .asset)
                             + .quote-act    (.price + .cfg-duty + .rail-btns
                                          + .cfg-dl)
                  + .rail-foot (.cfg-nav-b + .cfg-nav-n)

   HOW MANY PANELS THERE ARE IS THE PRODUCT'S BUSINESS, not this file's: a
   panel that does not apply is [hidden], and the chips renumber. So NO RULE
   HERE MAY NAME A STEP BY ITS NUMBER. What is stable is [data-step-key]
   (model, finish, options, quote) and .cfg-step-last, which configurator.js
   moves to the last panel on screen.
     and, hung on <body>, .cfg-print: the sheet, invisible until print.
============================================================================ */

/* ---------------------------------------------------------------- tokens */
/* TWO NAMES FOR ONE COLOUR, AND THE SECOND ONE IS WHY THE GROUND CAN MOVE
   (25 August 2026). --c-* is the public name: pages and assets/calendar.css
   read it, and it stays a plain custom property, declared only inside the
   band, so `var(--c-fg,#131313)` written outside one still falls back the way
   it always did. --scene-* is the private source, REGISTERED below as a
   colour so it can be animated: a registered property interpolates, and
   everything that reads it through --c-* follows frame by frame, gradients
   included. Never read --scene-* outside this file, and never register --c-*:
   registering it would give every element on every page an initial value and
   silently kill those fallbacks. */
.cfg-band,.cfg{
  --scene-bg:#000;
  --scene-fg:#ffffff;
  --scene-dim:#b4b6b8;
  --scene-card:#101112;
  --scene-card-on:#191b1c;
  --scene-line:rgb(255 255 255 / .14);
  --scene-line-2:rgb(255 255 255 / .32);
  --scene-tick-in:#131313;
  --scene-btn-bg:#ffffff; --scene-btn-fg:#131313; --scene-btn-hover:#e8e8e8;
  --scene-ghost:rgb(255 255 255 / .5);
  --scene-veil:rgb(0 0 0 / .55);
  --scene-glass:rgb(12 13 14 / .88);
  /* THE ONLY COLOUR THE BLOCK OWNS, and it is spent once: the five-year line
     when it turns in the owner's favour. The red left this file on 27 August;
     this green is not its replacement, it never marks a state or an error, it
     marks a gain. Two values because a colour legible on near-black is washed
     out on white. */
  --scene-gain:#5ee08f;

  --c-bg:var(--scene-bg);
  --c-fg:var(--scene-fg);
  --c-dim:var(--scene-dim);
  --c-card:var(--scene-card);
  --c-card-on:var(--scene-card-on);
  --c-line:var(--scene-line);
  --c-line-2:var(--scene-line-2);
  --c-tick-in:var(--scene-tick-in);
  --c-btn-bg:var(--scene-btn-bg); --c-btn-fg:var(--scene-btn-fg);
  --c-btn-hover:var(--scene-btn-hover);
  --c-ghost:var(--scene-ghost);
  --c-veil:var(--scene-veil);
  --c-glass:var(--scene-glass);
  --c-gain:var(--scene-gain)}
/* the white world: the cells and every product photographed on white */
.cfg-band.is-light,.cfg.is-light{
  --scene-bg:#ffffff;
  --scene-fg:var(--ink);
  --scene-dim:var(--ink-3);
  --scene-card:#ffffff;
  --scene-card-on:var(--grey);
  --scene-line:var(--grey-2);
  --scene-line-2:var(--grey-3);
  --scene-tick-in:#ffffff;
  --scene-btn-bg:var(--ink); --scene-btn-fg:#ffffff; --scene-btn-hover:#000;
  --scene-ghost:var(--grey-3);
  --scene-veil:rgb(255 255 255 / .55);
  --scene-glass:rgb(255 255 255 / .86);
  --scene-gain:#0f7a43}

/* ---- THE GROUND MOVES, AND IT DOES NOT JUMP ----------------------------
   The kiosk offers every family in one screen, so a visitor goes from a
   caravan to a cell without leaving the page: the room has to change colour
   under him. A hard cut reads as a page reload, so the eleven colours cross
   over together, once, in under half a second: the same length as the
   crossfade the picture itself does (AXT.swapImage, 0.14 out then 0.32 in),
   so the object and its ground arrive together instead of racing.

   IT IS ARMED, NOT DECLARED. .is-tuned is added by configurator.js after the
   first ground is laid: a band written dark in the markup that finds a cell
   on the stage must LAND on white, not fade to it while the page loads. */
@property --scene-bg{syntax:"<color>";inherits:true;initial-value:#000}
@property --scene-fg{syntax:"<color>";inherits:true;initial-value:#ffffff}
@property --scene-dim{syntax:"<color>";inherits:true;initial-value:#b4b6b8}
@property --scene-card{syntax:"<color>";inherits:true;initial-value:#101112}
@property --scene-card-on{syntax:"<color>";inherits:true;initial-value:#191b1c}
@property --scene-line{syntax:"<color>";inherits:true;initial-value:rgb(255 255 255 / .14)}
@property --scene-line-2{syntax:"<color>";inherits:true;initial-value:rgb(255 255 255 / .32)}
@property --scene-tick-in{syntax:"<color>";inherits:true;initial-value:#131313}
@property --scene-btn-bg{syntax:"<color>";inherits:true;initial-value:#ffffff}
@property --scene-btn-fg{syntax:"<color>";inherits:true;initial-value:#131313}
@property --scene-btn-hover{syntax:"<color>";inherits:true;initial-value:#e8e8e8}
@property --scene-ghost{syntax:"<color>";inherits:true;initial-value:rgb(255 255 255 / .5)}
@property --scene-veil{syntax:"<color>";inherits:true;initial-value:rgb(0 0 0 / .55)}
@property --scene-gain{syntax:"<color>";inherits:true;initial-value:#5ee08f}

.cfg-band.is-tuned,.cfg.is-tuned{
  --scene-t:420ms;
  transition:
    --scene-bg var(--scene-t) var(--ease),
    --scene-fg var(--scene-t) var(--ease),
    --scene-dim var(--scene-t) var(--ease),
    --scene-card var(--scene-t) var(--ease),
    --scene-card-on var(--scene-t) var(--ease),
    --scene-line var(--scene-t) var(--ease),
    --scene-line-2 var(--scene-t) var(--ease),
    --scene-tick-in var(--scene-t) var(--ease),
    --scene-btn-bg var(--scene-t) var(--ease),
    --scene-btn-fg var(--scene-t) var(--ease),
    --scene-btn-hover var(--scene-t) var(--ease),
    --scene-ghost var(--scene-t) var(--ease),
    --scene-veil var(--scene-t) var(--ease),
    --scene-gain var(--scene-t) var(--ease)}
/* a reader who asked for no motion gets the ground laid, not swept */
@media (prefers-reduced-motion:reduce){
  .cfg-band.is-tuned,.cfg.is-tuned{transition:none}
}

.cfg-band{background:var(--c-bg);color:var(--c-fg)}
.cfg-band .kicker,.cfg-band .lede,.cfg-band .note,
.cfg .kicker,.cfg .lede,.cfg .note{color:var(--c-dim)}
.cfg-band .note b,.cfg-band .lede b,
.cfg .note b,.cfg .lede b{color:var(--c-fg)}
.cfg-band :focus-visible,.cfg :focus-visible{outline-color:var(--c-fg)}

/* ------------------------------------------------------------- the frame */
/* HEIGHT: the studio files are 16/9 and object-fit is contain, so every pixel
   of height beyond that ratio is empty band above and below the vehicle, with
   a hard seam where the picture starts. Measured on 22 August 2026: a 672px
   stage held a 378px picture inside 530px, so 76px of nothing at each end.
   aspect-ratio removes it entirely wherever the stage is wide enough, and the
   min-height only catches the narrow screens, where the veil fades the rest. */
.cfg{display:grid;grid-template-columns:minmax(0,1fr) 420px;
  background:var(--c-bg);color:var(--c-fg)}
.cfg .stage-col,.cfg .stage,.cfg .rail{background:var(--c-bg)}
.stage-col{display:flex;flex-direction:column;min-width:0}
.stage-col .stage{flex:1 1 auto}
.stage{position:relative;aspect-ratio:16 / 9;min-height:min(30vh,260px);overflow:hidden}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  object-position:center 54%}
.stage.is-cover img{object-fit:cover;object-position:center}

/* THE SEAM KILLER. Two layers, transparent over the vehicle and the band's own
   colour at the border, and neither ever catches a click.
   The linear one does the work: object-fit is contain, so wherever the stage
   is not exactly 16/9 the picture starts on a horizontal line, and that line
   is what betrayed the block. The radial one only carries the corners, gently:
   the renders already vignette their own sides. */
.cfg .stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom,var(--c-bg) 0%,rgb(0 0 0 / 0) 12%,
      rgb(0 0 0 / 0) 74%,var(--c-veil) 92%,var(--c-bg) 100%),
    radial-gradient(78% 96% at 50% 52%,
      rgb(0 0 0 / 0) 0%,rgb(0 0 0 / 0) 50%,var(--c-veil) 84%,var(--c-bg) 100%)}
/* the veil sits over the picture, so the writing sits over the veil */
.cfg .stage-tag,.cfg .stage-name,.cfg .stage-foot,.cfg .stage-msg{z-index:2}
.stage-tag{position:absolute;left:clamp(18px,2vw,34px);top:clamp(18px,2vw,30px);
  font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-dim)}
.stage-name{position:absolute;left:clamp(18px,2vw,34px);bottom:clamp(18px,2vw,30px);
  font-size:.875rem;font-weight:600;letter-spacing:.02em;color:var(--c-fg)}
.stage-foot{position:absolute;left:clamp(18px,2vw,34px);right:clamp(18px,2vw,34px);
  bottom:clamp(18px,2vw,30px);display:grid;gap:5px;justify-items:start}
.stage-foot .stage-name{position:static;left:auto;bottom:auto}
.stage-foot .stage-name[hidden]{display:none}

/* ---- THE FACTS OF THE OBJECT, ON THE OBJECT -----------------------------
   The foot of the stage carried one word, the name of the tint. It carries a
   row of small badges now: the colour with its dot, then the specs the FAMILY
   asks for, in the family's own order. They are a caption, not a table: light
   plates that lift off the picture, wrapping to a second line rather than
   running under the rail, and never more than the picture can carry.
   The plate is the band's own veil so it reads on a render and on a white
   cutout alike, and its text is --c-fg, which flips with .is-light. */
.stage-badges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;
  max-width:min(100%,660px)}
.stage-badges[hidden]{display:none}
.stage-badge{display:inline-flex;align-items:center;gap:7px;
  padding:5px 10px;border-radius:999px;
  font-size:.75rem;font-weight:600;line-height:1.25;letter-spacing:.01em;
  color:var(--c-fg);background:var(--c-veil);
  box-shadow:inset 0 0 0 1px var(--c-line);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis}
.stage-badge-d{width:11px;height:11px;flex:0 0 auto;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--c-line-2)}
.stage-note{font-size:.8125rem;font-weight:500;line-height:1.4;color:var(--c-dim);max-width:36ch}
.stage-msg{position:absolute;inset:0;display:grid;place-items:center;padding:26px;text-align:center;
  font-size:.9375rem;font-weight:600;color:var(--c-dim)}

/* the control bar under the render */
.stage-ctl{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:16px clamp(18px,2vw,34px);border-top:1px solid var(--c-line)}
.stage-ctl .btn{min-width:200px}
.cfg .stage-ctl .btn-white{background:var(--c-btn-bg);color:var(--c-btn-fg)}
.cfg .stage-ctl .btn-white:hover{background:var(--c-btn-hover)}

/* the interior viewer: two arrows and the count, nothing else */
.gal{display:flex;align-items:center;gap:8px}
.gal-b{width:38px;height:38px;border-radius:50%;border:0;padding:0;cursor:pointer;font-size:1rem;
  line-height:1;display:grid;place-items:center;background:var(--c-line);color:var(--c-fg);
  transition:background var(--t) var(--ease)}
.gal-b:hover{background:var(--c-line-2)}
.gal-n{font-size:.875rem;font-weight:600;color:var(--c-fg);font-variant-numeric:tabular-nums;
  min-width:54px;text-align:center}

/* -------------------------------------------------------------- the rail */
/* THREE STEPS, and the rail is head / body / foot: the head and the foot are
   fixed furniture, the body is the only thing that may take what is left and
   the only thing that may scroll. */
.rail{padding:clamp(24px,2.2vw,36px);display:flex;flex-direction:column;gap:18px;min-width:0}
.rail h2{font-size:clamp(1.75rem,2.3vw,2.125rem)}
/* the labels of the rail keep the rhythm they were drawn with */
.rail-blk-model .kicker{margin-bottom:6px}
.rail-blk-tint .kicker{margin-bottom:10px}
.rail-blk-opts .kicker{margin-bottom:8px}

.rail-head{flex:0 0 auto;display:grid;gap:14px}
/* the head of the whole block, in ONE line: the section title of the host
   page moved in here on 22 August 2026 so the band could be one screen tall */
.rail-head-t{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rail-title{font-size:clamp(1.375rem,1.9vw,1.75rem);letter-spacing:-.02em;margin:0}

/* the indicator. Numbered, never a bar that fills: it says WHERE the visitor
   is, and each chip is the way back to its step. */
/* the chips take the room their words need and share out what is left: three
   equal thirds cut "The caravan" in half on the 400px rail of the tablet */
.cfg-steps{display:flex;gap:2px;justify-content:space-between}
.cfg-stepb{flex:0 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;
  background:none;border:0;padding:8px 6px;border-radius:999px;cursor:pointer;
  font-size:.8125rem;font-weight:600;color:var(--c-dim);
  transition:color var(--t) var(--ease),background var(--t) var(--ease)}
.cfg-stepb:hover{color:var(--c-fg)}
.cfg-stepb-n{flex:0 0 auto;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;
  font-size:.6875rem;font-variant-numeric:tabular-nums;
  box-shadow:inset 0 0 0 1px var(--c-line-2);
  transition:background var(--t) var(--ease),color var(--t) var(--ease),
    box-shadow var(--t) var(--ease)}
.cfg-stepb-l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfg-stepb[data-done="true"] .cfg-stepb-n{box-shadow:inset 0 0 0 1px var(--c-fg);color:var(--c-fg)}
.cfg-stepb[aria-current="step"]{color:var(--c-fg);background:var(--c-card)}
.cfg-stepb[aria-current="step"] .cfg-stepb-n{background:var(--c-fg);color:var(--c-bg);box-shadow:none}
.cfg-stepb[hidden]{display:none}
/* FOUR STEPS IN THE SAME 420px RAIL. The chips give up their padding and a
   little of their type before they give up their words, and the ellipsis of
   .cfg-stepb-l is the last resort. Measured at 1280, 1440 and on the tablet:
   "The cell / Finish / Options / Quote" fits without one. */
.cfg-steps[data-cfg-steps="4"] .cfg-stepb{font-size:.75rem;gap:6px;padding:8px 4px}
.cfg-steps[data-cfg-steps="4"] .cfg-stepb-n{width:19px;height:19px;font-size:.625rem}
.cfg-steps[data-cfg-steps="5"] .cfg-stepb,
.cfg-steps[data-cfg-steps="6"] .cfg-stepb{font-size:.6875rem;gap:5px;padding:8px 3px}
/* past five there is no room for five words: the rank is the label, and the
   name each chip answers to is written in its aria-label by configurator.js */
.cfg-steps[data-cfg-steps="5"] .cfg-stepb:not([aria-current="step"]) .cfg-stepb-l,
.cfg-steps[data-cfg-steps="6"] .cfg-stepb:not([aria-current="step"]) .cfg-stepb-l{display:none}

/* the body and its panels. A panel that is not on screen is display:none and
   not a folded height: nothing here animates a box, and a hidden step must
   cost the rail nothing at all. */
.rail-body{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column}
.cfg-step{flex:1 1 auto;min-height:0;min-width:0;display:flex;flex-direction:column;gap:18px}
.cfg-step[hidden]{display:none}
.cfg-step:focus{outline:none}
.cfg-step:focus-visible{outline:2px solid var(--c-fg);outline-offset:2px;border-radius:var(--r)}
.cfg-empty{max-width:42ch}

/* step 1: the choices scroll, the price under them does not. The shelves, the
   model tabs and the swatches take what is left and give it back when the
   catalogue grows; .rail-blk-spec stays where the visitor can read it. */
.cfg-pick{display:flex;flex-direction:column;gap:18px;min-width:0;min-height:0}
.cfg-pick>*{flex:0 0 auto}

/* the last step: the recap scrolls, the figure and the buttons never do */
.quote-scroll{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:14px}
.quote-h .kicker{margin-bottom:6px}
.quote-n{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;margin:0}
.quote-t{margin-top:4px}
.quote-act{flex:0 0 auto;display:grid;gap:12px}

/* the foot: the same two places, at every step */
.rail-foot{flex:0 0 auto;display:flex;gap:10px}
.cfg-nav{flex:1 1 auto;min-width:0}
.cfg-nav-b{flex:0 0 auto;min-width:112px}
.cfg .rail .cfg-nav-b{background:transparent;color:var(--c-fg);
  box-shadow:inset 0 0 0 1px var(--c-ghost)}
.cfg .rail .cfg-nav-b:hover{box-shadow:inset 0 0 0 1px var(--c-fg)}

/* ---- THE MODEL SWITCH, IN TWO MOVES -------------------------------------
   A row of tabs holds three names and breaks at five, and the catalogue now
   carries eight cells. So the shelf comes first (a row of chips that WRAPS,
   never scrolls sideways) and the models of that shelf come second, four at
   the most. With a single shelf the chip row is not rendered at all, so the
   three caravans keep the switch they have always had, to the pixel.
   EACH ROW CARRIES ITS OWN HEADING since 25 August 2026: the chips answer a
   spec of the catalogue and wear that spec's label, the tabs keep "Model". */
.cfg-shelf{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.cfg-shelf[hidden]{display:none}
/* the heading of the chip row, and the one over the models under it. Both are
   .kicker, so the second needs the air the first gets from the block above it.
   Neither exists on a family that needs no shelf: the rule is written on the
   element, and the element is [hidden] then. */
.cfg-shelf-k[hidden]{display:none}
.rail-blk-model .cfg-shelf-k + .cfg-shelf + .kicker{margin-top:2px}
.cfg-shelfb{appearance:none;-webkit-appearance:none;border:0;background:none;font:inherit;
  font-size:.8125rem;font-weight:600;line-height:1.2;
  padding:7px 13px;border-radius:999px;cursor:pointer;
  color:var(--c-dim);box-shadow:inset 0 0 0 1px var(--c-line);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color var(--t) var(--ease),box-shadow var(--t) var(--ease),
    background var(--t) var(--ease)}
.cfg-shelfb:hover{color:var(--c-fg);box-shadow:inset 0 0 0 1px var(--c-line-2)}
.cfg-shelfb[aria-pressed="true"]{color:var(--c-bg);background:var(--c-fg);
  box-shadow:none}

/* the model switch */
.seg{display:flex;border-bottom:1px solid var(--c-line)}
.seg button{flex:1;background:none;border:0;padding:12px 4px;font-size:.9375rem;font-weight:600;
  color:var(--c-dim);cursor:pointer;position:relative;transition:color var(--t) var(--ease)}
.seg button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--c-fg);transform:scaleX(0);transition:transform var(--t) var(--ease)}
.seg button[aria-pressed="true"]{color:var(--c-fg)}
.seg button[aria-pressed="true"]::after{transform:scaleX(1)}
/* four models in the switch instead of three: the labels get a little smaller */
.seg.seg-4 button{font-size:.875rem;padding:12px 2px}
/* FIVE NAMES LIKE "Mercedes Sprinter 4x4" DO NOT SHARE A NARROW ROW. Under
   700px the switch scrolls sideways instead of crushing every label into three
   stacked words: a tab that has to be read on two lines is a tab nobody reads.
   No visible bar, the tabs themselves say there is more. */
@media (max-width:700px){
  .seg{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .seg::-webkit-scrollbar{display:none}
  .seg button,.seg.seg-4 button{flex:0 0 auto;padding:12px 14px;white-space:nowrap}
}

/* THE TINTS, ON ONE LINE, ALWAYS.
   They used to wrap, and six of them in a rail this width meant five on the
   first row and the red one alone underneath: a lone circle reads as a
   different kind of thing, not as the sixth colour. They now share the row and
   SHRINK if they have to, capped at their natural size so a family with four
   colours does not blow them up. `aspect-ratio` keeps a circle round while its
   width is being negotiated. */
/* THE SELECTED RING NEEDS ROOM TO EXIST.
   The ring is drawn OUTSIDE the swatch (a box-shadow spread), and the rail
   scrolls, which makes its container clip on both axes: the first swatch sat
   flush against the panel edge and lost the left of its ring. Three pixels of
   padding on the row is all it takes, and the gap between swatches is
   untouched. */
.tints{display:flex;gap:10px;flex-wrap:wrap;padding:3px}
.tint{flex:1 1 0;width:auto;height:auto;max-width:38px;aspect-ratio:1;
  border-radius:50%;border:0;cursor:pointer;padding:0;position:relative;
  box-shadow:0 0 0 1px var(--c-line-2) inset;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.tint:hover{transform:scale(1.08)}
.tint[aria-pressed="true"]{box-shadow:0 0 0 1px var(--c-bg) inset,0 0 0 2px var(--c-fg)}
/* the colour line under the swatches: a tint is either included or it is not,
   and the page says which before the total moves */
.cfg-tint-note{margin-top:12px}
.cfg-tint-note b{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- THE FINISHES -------------------------------------------------------
   A step of its own when the product has one. Swatches, not tick boxes: a
   fabric is a choice between four, not a list of four things you may all have.

   WHAT IT DOES NOT DO, AND IT MATTERS: it never draws the vehicle in the
   material. There is no render per combination and there will not be one for
   a long while, so the big square shows the MATERIAL, the stage shows the best
   interior photograph there is, and the line under the swatches says so in as
   many words. Promising a picture that does not exist is how a configurator
   stops being believed. */
.rail-blk-finish{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:14px}
.cfg-fin{flex:0 0 auto;display:flex;align-items:center;gap:16px}
.cfg-fin[hidden]{display:none}
/* the sample, large enough to be a material and not a dot */
.cfg-fin-p{position:relative;flex:0 0 auto;width:clamp(72px,7vw,92px);
  height:clamp(72px,7vw,92px);border-radius:10px;overflow:hidden;
  background:var(--c-card);box-shadow:inset 0 0 0 1px var(--c-line-2)}
.cfg-fin-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cfg-fin-img[hidden]{display:none}
.cfg-fin-t{min-width:0;display:grid;gap:3px}
.cfg-fin-n{margin:0;font-size:1.125rem;font-weight:600;letter-spacing:-.02em;
  color:var(--c-fg)}
.cfg-fin-c{margin:0}
.cfg-fin-c b{font-variant-numeric:tabular-nums;white-space:nowrap}
/* the groups take what is left and scroll inside, exactly like the options */
.cfg-fin-groups{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:14px}
.cfg-fin-g{display:grid;gap:8px}
.cfg-fin-g .kicker{margin:0}
.cfg-fin-note{flex:0 0 auto;max-width:46ch}

/* a swatch: the material, its name, and its amount when it has one */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.sw{display:flex;align-items:center;gap:10px;text-align:left;border:0;cursor:pointer;
  border-radius:var(--r);padding:8px 12px 8px 8px;min-width:0;
  background:var(--c-card);color:var(--c-fg);
  box-shadow:inset 0 0 0 1px var(--c-line);
  transition:box-shadow var(--t) var(--ease),background var(--t) var(--ease)}
.sw:hover{box-shadow:inset 0 0 0 1px var(--c-line-2)}
.sw[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--c-fg);background:var(--c-card-on)}
.sw-c{flex:0 0 auto;width:30px;height:30px;border-radius:7px;
  box-shadow:inset 0 0 0 1px var(--c-line-2)}
.sw-n{min-width:0;font-size:.875rem;font-weight:600;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis}
.sw-p{margin-left:auto;font-size:.8125rem;font-weight:600;font-style:normal;
  color:var(--c-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.sw[aria-pressed="true"] .sw-p{color:var(--c-fg)}

/* ---- THE OPTIONS, BY GROUP ----------------------------------------------
   Thirty five options on the 3X and the 4X, seven on the 5X: a flat list is a
   wall. <details> because the browser already opens one INSTANTLY, with the
   keyboard and the right ARIA, and because nothing in this site animates a
   height. The first group of a model is open, the others wait.
   The whole column is rebuilt when the MODEL changes and never when an option
   is ticked, or every group the visitor opened would slam shut. */
/* the caravan in a line and three figures, at the foot of the first step */
.rail-blk-spec{flex:0 0 auto;margin-top:auto;padding-top:16px;border-top:1px solid var(--c-line)}
.cfg-spec-l{margin:0;font-size:.9375rem;line-height:1.5;color:var(--c-dim);max-width:34ch}
.cfg-spec{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px}
.cfg-spec li{display:flex;flex-direction:column;gap:2px;min-width:0}
.cfg-spec b{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;color:var(--c-fg);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.cfg-spec span{font-size:.8125rem;color:var(--c-dim)}

/* step 2 is one column: the groups take what is left and scroll, and
   "Included as standard" stays where it can always be reached, at the bottom,
   folded, one line tall */
.rail-blk-opts{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
/* A FLEX COLUMN AND NOT A GRID, and that is a measurement and not a taste:
   an .ogrp carries overflow:hidden, so its automatic minimum size is zero, and
   inside a box of a fixed height an auto grid row happily squeezes it. The
   open group came out cut in half. flex:0 0 auto refuses to shrink, so the
   column overflows and the scroller does its job. */
.ogrps{display:flex;flex-direction:column;gap:8px}
.ogrps>.ogrp{flex:0 0 auto}
.rail-blk-opts .ogrps{flex:1 1 auto;min-height:0}
.rail-blk-opts .ogrp-std{flex:0 0 auto;width:100%}
.quote-scroll>*{flex:0 0 auto}
.ogrp{border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--c-line);overflow:hidden}
.ogrp-h{display:flex;align-items:center;gap:12px;min-height:48px;padding:11px 16px;cursor:pointer;list-style:none;
  font-size:.9375rem;font-weight:600;color:var(--c-fg);
  transition:background var(--t-fast) var(--ease)}
.ogrp-h::-webkit-details-marker{display:none}
.ogrp-h::marker{content:""}
.ogrp-h:hover{background:var(--c-card)}
.ogrp-h:focus-visible{outline:2px solid var(--c-fg);outline-offset:-2px}
.ogrp[open]>.ogrp-h{background:var(--c-card)}
.ogrp-n{min-width:0}
.ogrp-c{margin-left:auto;font-size:.8125rem;font-weight:500;color:var(--c-dim);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
/* THE ACCENT OF THIS SCREEN IS THE THEME, NOT THE BRAND RED (Arnaud,
   28 August 2026). A configurator is a room full of choices, and a red badge
   on each group that has one turned "you picked something" into an alarm. The
   pill now inverts the surface it sits on: white on the dark scene, graphite
   on the light one, so it reads as a state and never as a warning. The red
   stays where it belongs on this site, on the ONE action that opens a
   product. */
.ogrp.has-selection>.ogrp-h .ogrp-c{padding:4px 8px;border-radius:999px;
  background:var(--c-fg);color:var(--c-bg)}
/* a plus becomes a minus without changing the header's geometry */
.ogrp-x{flex:0 0 auto;position:relative;width:20px;height:20px;border-radius:50%;color:var(--c-fg);
  box-shadow:inset 0 0 0 1px var(--c-line-2)}
.ogrp-x::before,.ogrp-x::after{content:"";position:absolute;inset-inline:5px;inset-block-start:9px;
  height:1.5px;background:currentColor;transition:transform var(--t) var(--ease)}
.ogrp-x::after{transform:rotate(90deg)}
.ogrp[open]>.ogrp-h .ogrp-x::after{transform:rotate(90deg) scaleX(0)}
/* THE BODY IS RECESSED, so the options read as cards INSIDE a group and not
   as cards stacked on top of one. The panel, its header and each option all
   used `--c-card` with the same hairline: three nested boxes of the same tone
   with the same edge, which the eye resolves as overlap. Nothing was actually
   overlapping, measured; the ground was simply missing. The body drops to the
   page colour, so the header stays raised, the cards stay raised, and the dark
   band between them says which is which. */
.ogrp .modes{padding:8px;gap:4px;background:var(--c-bg)}

/* the option row: a name, an amount, a tick. No description: the catalogue
   ships none, and an invented line is a line nobody can stand behind. */
.modes{display:grid;gap:8px}
.mode{text-align:left;border:0;border-radius:var(--r);cursor:pointer;
  background:var(--c-card);color:var(--c-fg);padding:12px 14px;
  box-shadow:inset 0 0 0 1px var(--c-line);
  transition:box-shadow var(--t) var(--ease),background var(--t) var(--ease)}
.mode:hover{box-shadow:inset 0 0 0 1px var(--c-line-2)}
.mode[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--c-fg);background:var(--c-card-on)}
.mode .mt{font-weight:600;display:flex;justify-content:flex-start;align-items:center;gap:10px}
.mode .tick{width:18px;height:18px;border-radius:50%;flex:0 0 auto;position:relative;
  box-shadow:inset 0 0 0 1px var(--c-line-2)}
.mode[aria-pressed="true"] .tick{background:var(--c-fg);box-shadow:none}
.mode[aria-pressed="true"] .tick::after{content:"";position:absolute;left:5px;top:4px;width:8px;height:5px;
  border-left:1.5px solid var(--c-tick-in);border-bottom:1.5px solid var(--c-tick-in);
  transform:rotate(-45deg)}
.mode .on-name{min-width:0;font-size:.9375rem;line-height:1.35}
/* it is an <i> so the amount is a distinct thing in the line, not because it
   should lean: the charter has no italic */
.mode .op{margin-left:auto;font-size:.875rem;font-weight:600;color:var(--c-dim);
  font-style:normal;font-variant-numeric:tabular-nums;white-space:nowrap}
.mode[aria-pressed="true"] .op{color:var(--c-fg)}

/* what comes with the vehicle before a single box is ticked. Closed by
   default: it answers a question, it does not ask one. */
.ogrp-std .std-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 22px;
  padding:2px 16px 16px;font-size:.875rem;line-height:1.4;color:var(--c-dim)}
.ogrp-std .std-list li{position:relative;padding-left:14px}
.ogrp-std .std-list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;
  background:var(--c-line-2)}

/* ---- the recap and the total --------------------------------------------
   every line the total is made of except the base, so an amount can be read
   backwards without opening a group again */
.cfg-sum{display:grid;gap:7px;font-size:.875rem;color:var(--c-dim)}
.cfg-sum li{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.cfg-sum .sum-n{min-width:0}
.cfg-sum b{font-weight:600;color:var(--c-fg);font-variant-numeric:tabular-nums;white-space:nowrap}

.price{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:18px;
  border-top:1px solid var(--c-line)}
/* the word that keeps an unconfirmed figure honest at a glance. Same chip as
   the owner example, so the page has ONE way of saying "not a firm number". */
.cfg-est{margin-left:6px;transform:translateY(-1px)}
.cfg-est[hidden]{display:none}
.price .pv{font-size:1.25rem;font-weight:600;color:var(--c-fg);font-variant-numeric:tabular-nums}

/* ---- the currency switch, above the total -------------------------------
   AED is the currency of this business: the catalogue, the quote and the
   invoice are in dirhams and nothing here changes that. This switch changes
   how an amount is WRITTEN on this page, for a visitor who does not think in
   dirhams, and the line under the total says so in as many words.
   Small, quiet, and pressed states drawn the way the rest of the rail draws
   them: a ring in box-shadow, never a border that shifts the layout. */
.cur-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cur{display:inline-flex;gap:2px;padding:2px;border-radius:999px;max-width:100%;
  box-shadow:inset 0 0 0 1px var(--c-line)}
.cur-b{appearance:none;-webkit-appearance:none;border:0;background:none;font:inherit;
  font-size:.75rem;font-weight:600;letter-spacing:.06em;padding:6px 11px;border-radius:999px;
  color:var(--c-dim);cursor:pointer;
  transition:color var(--t) var(--ease),box-shadow var(--t) var(--ease),
    transform var(--t-fast) var(--ease)}
.cur-b:hover{color:var(--c-fg)}
.cur-b:active{transform:translateY(1px)}
.cur-b[aria-pressed="true"]{color:var(--c-fg);box-shadow:inset 0 0 0 1px var(--c-fg)}
.cfg .cur-b:focus-visible{outline:2px solid var(--c-fg);outline-offset:2px}

/* the two buttons under the total. Side by side while they fit, stacked the
   moment they do not: they are the two ways of asking the same question and
   they must not eat the pinned zone they sit in. */
.cfg .rail .btn-ink{background:var(--c-btn-bg);color:var(--c-btn-fg);box-shadow:none}
.cfg .rail .btn-ink:hover{background:var(--c-btn-hover)}
.cfg .rail .btn-ghost{background:transparent;color:var(--c-fg);
  box-shadow:inset 0 0 0 1px var(--c-ghost)}
.cfg .rail .btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--c-fg)}
.quote-act .rail-btns{flex-direction:row;flex-wrap:wrap;gap:10px}
.quote-act .rail-btns .btn{flex:1 1 150px;width:auto;min-width:0;padding:0 14px}
.cfg-dl{width:100%}

/* the order: the one red act of the quote step, above the two ask buttons.
   Its amount rides inside the button, so the tap target IS the promise. */
.cfg-order{display:grid;gap:7px;margin-bottom:2px}
/* .btn is a flex box with a 10px gap: the label and its amount span would
   split around it, so this button closes the gap and the span leads with
   its own comma */
.cfg-order .cfg-order-b{width:100%;gap:0}
.cfg-order-n{margin:0}
.cfg-order-e{margin:0;font-size:.8125rem;font-weight:600;color:var(--red);line-height:1.45}

/* Fleet is a fourth Quote action. The five-year scenario owns a fullscreen
   dialog so neither the quote total nor its three existing actions move. */
.cfg .fleet-open{width:100%;height:44px;padding:0 14px;background:var(--c-fg);
  color:var(--c-bg);box-shadow:none}
.cfg .fleet-open:hover{background:var(--c-fg);color:var(--c-bg);opacity:.86}
.cfg .fleet-open.is-included{box-shadow:inset 0 0 0 2px var(--c-fg)}
.fleet-modal{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;
  padding:0;background:var(--c-bg);color:var(--c-fg);overflow:auto;overscroll-behavior:contain}
.fleet-modal:not([open]){display:none}
.fleet-modal::backdrop{background:rgb(0 0 0 / .82)}
.fleet-modal-shell{width:min(100%,1440px);min-height:100%;margin-inline:auto;
  padding:max(22px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right))
    max(22px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));
  display:flex;flex-direction:column;gap:clamp(38px,7vh,86px)}
.fleet-modal-top{display:flex;align-items:center;justify-content:space-between;gap:20px}
.fleet-chip{display:inline-flex;align-items:center;min-height:32px;padding:5px 11px;border-radius:999px;
  background:var(--c-fg);color:var(--c-bg);font-size:.6875rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase}
.fleet-close{appearance:none;border:0;min-width:48px;min-height:48px;padding:0 18px;border-radius:999px;
  background:transparent;color:var(--c-fg);font:inherit;font-size:.875rem;font-weight:600;
  box-shadow:inset 0 0 0 1px var(--c-line-2);cursor:pointer}
.fleet-close:hover{box-shadow:inset 0 0 0 1px var(--c-fg)}
.fleet-modal-grid{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);
  align-items:center;gap:clamp(44px,8vw,128px);padding:0 clamp(0px,4vw,56px) clamp(22px,4vh,52px)}
.fleet-story{align-self:center;max-width:650px}
.fleet-title{margin:0;max-width:13ch;font-size:clamp(2.8rem,6.4vw,6.8rem);font-weight:600;
  line-height:.92;letter-spacing:-.055em}
.fleet-intro{max-width:52ch;margin:clamp(24px,4vh,44px) 0 0;color:var(--c-dim);
  font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.55}
.fleet-facts{list-style:none;margin:clamp(28px,5vh,52px) 0 0;padding:0;display:grid;gap:13px;
  color:var(--c-dim);font-size:.9375rem}
.fleet-facts li{display:flex;align-items:flex-start;gap:12px}
.fleet-facts li::before{content:"";flex:0 0 auto;width:8px;height:8px;margin-top:.45em;
  border-radius:50%;background:var(--c-fg)}
.fleet-calc{align-self:center;width:100%;max-width:560px;display:grid;gap:14px}
.fleet-modal-result{padding:clamp(22px,3vw,36px);gap:16px;background:var(--c-card)}
.fleet-modal-result .asset-lines{gap:12px;padding-top:15px}
.fleet-modal-result .asset-net{padding-top:15px}
.fleet-modal-result[hidden]{display:none}
.cfg .fleet-choice{width:100%;height:52px;background:var(--c-fg);color:var(--c-bg);box-shadow:none}
.cfg .fleet-choice:hover{background:var(--c-fg);color:var(--c-bg);opacity:.86}
.cfg .fleet-choice[aria-pressed="true"]{background:transparent;color:var(--c-fg);
  box-shadow:inset 0 0 0 1px var(--c-fg)}
.fleet-state{margin:0;text-align:center;color:var(--c-dim);font-size:.8125rem;line-height:1.4}
.cfg .fleet-link{justify-self:center;display:inline-flex;align-items:center;min-height:44px;
  color:var(--c-fg);font-size:.8125rem;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.fleet-progress{height:6px;border-radius:999px;overflow:hidden;background:var(--c-line)}
.fleet-progress-bar{display:block;width:100%;height:100%;background:var(--c-fg);
  transform:scaleX(var(--fleet-progress,0));transform-origin:left center;
  transition:transform 320ms var(--ease)}
@media (max-width:800px){
  .fleet-modal-shell{gap:28px}
  .fleet-modal-grid{grid-template-columns:1fr;align-items:start;gap:34px;padding-inline:0}
  .fleet-story{max-width:none}
  .fleet-title{font-size:clamp(2.6rem,12vw,5rem)}
  .fleet-calc{max-width:none}
}
@media (prefers-reduced-motion:reduce){.fleet-progress-bar{transition:none}}

/* ---- the five year example ----------------------------------------------
   It came from index.html on 11 August 2026, when the range took the place of
   the home configurator (decision d'Arnaud): a figure is only worth reading
   next to the vehicle it prices, and the vehicle is picked HERE. It reads the
   build on screen, so a chosen option moves all three lines, and it says it is
   an example twice: the chip and the note. */
.ex-chip{display:inline-flex;align-items:center;font-size:.6875rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;background:var(--c-fg);color:var(--c-bg);
  border-radius:2px;padding:5px 9px}
.asset{background:var(--c-card);border-radius:var(--r);padding:clamp(18px,2vw,24px);
  display:grid;gap:13px;box-shadow:inset 0 0 0 1px var(--c-line)}
.asset-basis{margin:0;font-size:.9375rem;line-height:1.5;color:var(--c-dim)}
.asset-basis b{font-weight:600;color:var(--c-fg);font-variant-numeric:tabular-nums;white-space:nowrap}
.asset-lines{display:grid;gap:10px;padding-top:12px;border-top:1px solid var(--c-line)}
.asset-l{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-size:.9375rem;color:var(--c-dim)}
.asset-l b{font-weight:600;color:var(--c-fg);font-variant-numeric:tabular-nums;white-space:nowrap}
.asset-net{padding-top:12px;border-top:1px solid var(--c-line);color:var(--c-fg)}
/* only the last figure of the row grows: the amount paid is read inside the
   sentence, not weighed against it */
.asset-net>b{font-size:clamp(1.0625rem,1.5vw,1.25rem);letter-spacing:-.02em}
/* the five years came out ahead of the build: the figure, its row and the bar
   under it say so together, and they are the only green in the block */
.asset.is-gain .asset-net,.asset.is-gain .asset-net>b{color:var(--c-gain)}
.asset.is-gain .fleet-progress-bar{background:var(--c-gain)}
.asset .btn{width:100%;min-width:0}

/* the interiors strip: a page may lay the five interior photographs flat
   instead of stepping through them in the stage. Nothing uses it today, it is
   kept with the block it belongs to. */
.inside{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.inside figure{position:relative;overflow:hidden;background:var(--grey)}
.inside img{width:100%;height:clamp(180px,19vw,290px);object-fit:cover;
  transition:transform 900ms var(--ease)}
.inside figure:hover img{transform:scale(1.05)}
.inside figcaption{position:absolute;left:14px;bottom:12px;color:#fff;font-size:.8125rem;font-weight:600;
  text-shadow:var(--halo)}

/* ============================================================================
   THE KIOSK VARIANT: the same block, on the stand tablet.
   Nothing changes but the SIZE of what a thumb has to hit: every control goes
   to 48px at least, and the figures grow with them. No colour, no layout and
   no behaviour is forked here, or the two surfaces would start drifting again.
============================================================================ */
.cfg--kiosk{grid-template-columns:minmax(0,1fr) 460px}
.cfg--kiosk .rail{gap:26px;padding:clamp(24px,2.4vw,36px)}
.cfg--kiosk .stage-ctl{padding:14px clamp(18px,2vw,34px)}
.cfg--kiosk .btn{height:52px;font-size:1rem}
.cfg--kiosk .btn-sm{height:48px}
.cfg--kiosk .seg button{padding:16px 4px;font-size:1rem;min-height:52px}
.cfg--kiosk .seg.seg-4 button{font-size:.9375rem}
.cfg--kiosk .tints{gap:10px}
.cfg--kiosk .tint{max-width:48px}
.cfg--kiosk .gal-b{width:48px;height:48px;font-size:1.125rem}
.cfg--kiosk .gal-n{font-size:1rem;min-width:64px}
.cfg--kiosk .cur-b{display:inline-flex;align-items:center;min-height:48px;
  padding:0 20px;font-size:.875rem}
.cfg--kiosk .ogrp-h{padding:16px 18px;font-size:1rem;min-height:56px}
.cfg--kiosk .ogrp-c{font-size:.875rem}
.cfg--kiosk .mode{padding:15px 16px;min-height:56px;display:flex;align-items:center}
.cfg--kiosk .mode .mt{width:100%}
.cfg--kiosk .mode .on-name{font-size:1rem}
.cfg--kiosk .mode .op{font-size:.9375rem}
.cfg--kiosk .mode .tick{width:22px;height:22px}
.cfg--kiosk .mode[aria-pressed="true"] .tick::after{left:6px;top:5px;width:10px;height:6px}
.cfg--kiosk .ogrp-std .std-list{font-size:.9375rem;gap:8px 22px}
.cfg--kiosk .cfg-sum{font-size:.9375rem}
.cfg--kiosk .price .pv{font-size:1.625rem}
.cfg--kiosk .note{font-size:.875rem}
.cfg--kiosk .asset-l,.cfg--kiosk .asset-basis{font-size:1rem}
/* the shelves, the swatches and the sample are thumb targets like the rest */
.cfg--kiosk .cfg-shelfb{min-height:44px;padding:0 18px;font-size:.875rem;
  display:inline-flex;align-items:center}
.cfg--kiosk .swatches{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.cfg--kiosk .sw{min-height:56px;padding:9px 14px 9px 9px}
.cfg--kiosk .sw-c{width:36px;height:36px}
.cfg--kiosk .sw-n{font-size:.9375rem}
.cfg--kiosk .cfg-fin-n{font-size:1.25rem}
.cfg--kiosk .stage-badge{font-size:.8125rem;padding:6px 12px}
/* the steps and the two ways out of a step are thumb targets like the rest */
.cfg--kiosk .cfg-stepb{min-height:48px;font-size:.875rem;padding:8px}
.cfg--kiosk .cfg-steps[data-cfg-steps="4"] .cfg-stepb{font-size:.8125rem;padding:8px 4px}
.cfg--kiosk .cfg-stepb-n{width:26px;height:26px;font-size:.75rem}
.cfg--kiosk .rail-title{font-size:1.625rem}
.cfg--kiosk .quote-n{font-size:1.375rem}
.cfg--kiosk .cfg-nav-b{min-width:130px}

/* A LANDSCAPE TABLET IS A SHORT SCREEN, and the first step is the one that
   pays for it: the shelves of a family with eight products take three lines of
   chips. Measured on 23 August 2026 at 1180x820 (the stand iPad) and at
   1024x768: the block fits either way, this only decides how much of the first
   step has to be scrolled inside .cfg-pick. Nothing is hidden and no target
   goes under the 44px a thumb needs: what shrinks is the air. */
@media (max-height:900px){
  .cfg--kiosk .rail{gap:18px;padding:clamp(18px,2vw,28px)}
  .cfg--kiosk .cfg-step,.cfg--kiosk .cfg-pick{gap:14px}
  .cfg--kiosk .cfg-shelf{gap:6px;margin-bottom:8px}
  .cfg--kiosk .rail-blk-spec{padding-top:12px}
  .cfg--kiosk .rail-blk-tint .kicker{margin-bottom:8px}
}

/* ============================================================================
   THE ONE SCREEN CONTRACT (22 August 2026, demande d'Arnaud, capture a l'appui)
   The band is exactly one screen tall and the page does not scroll to read it.
   How it holds, and none of these three lines may be dropped:
     1. the band has a HEIGHT (100svh minus what the host gives back at the
        top), and every wrapper down to .cfg is a flex column that may shrink
        (min-height:0). Without that one declaration a flex item refuses to go
        below its content and the height never reaches the block.
     2. the rail is head / body / foot: only the body may take what is left,
        and only the inside of a step may scroll. The steps are what makes
        this possible at all: thirty five options no longer have to be in the
        same column as the total.
     3. the render keeps its 16/9 and takes the middle of its column. Stretched
        to the full height it would be a 16/9 picture in a 4/3 box, which is
        the empty band the aspect-ratio was put there to remove.
   It is OPT IN: a band without .cfg-fit keeps the natural height it always
   had, and below 1181px on the site the two columns stack and the page scrolls
   the way a page scrolls.
============================================================================ */
.cfg-fit{--cfg-top:calc(var(--head) + 14px);--cfg-pad:clamp(14px,2.2vh,26px)}

/* the sticky render of the free standing block, DECLARED FIRST on purpose:
   the fit rules below undo it, and two rules of the same weight are settled by
   the order they are written in */
@media (min-width:1181px){
  .cfg .stage-col{position:sticky;top:var(--head);align-self:start}
  /* the stand tablet has no site header, its own bar sets the offset */
  .cfg--kiosk .stage-col{top:var(--kiosk-head,16px)}
}

@media (min-width:1181px){
  .cfg-fit{height:calc(100svh - var(--cfg-top));display:flex;flex-direction:column;
    overflow:hidden;padding-block:var(--cfg-pad)}
  /* the mount point is part of the chain and it is not the host's job to
     remember that: it is named in the contract, so it is styled here */
  .cfg-fit .cfg-fit-in,.cfg-fit [data-configurator]{flex:1 1 auto;min-height:0;min-width:0;
    display:flex;flex-direction:column;max-width:1500px;margin-inline:auto;width:100%}
  .cfg-fit .cfg{flex:1 1 auto;min-height:0}
  .cfg-fit .stage-col,.cfg-fit .rail{min-height:0}
  .cfg-fit .rail{overflow:hidden}
  /* nothing scrolls past the render any more, so it has nothing left to stick
     to: it is a row of a grid that is already exactly one screen tall */
  .cfg-fit .stage-col{position:static;align-self:stretch;
    display:grid;grid-template-rows:minmax(0,1fr) auto}
  .cfg-fit .stage-col .stage{flex:none;align-self:center;max-height:100%}
  /* THE ONLY THING THAT SCROLLS: the inside of a step. The first step is on
     the list since 23 August: it carries a shelf row now, and a family whose
     names run long must be allowed to overflow rather than push the rail past
     the screen. The scrollbar only appears when there is something to scroll. */
  .cfg-fit .rail-blk-opts .ogrps,.cfg-fit .quote-scroll,
  .cfg-fit .cfg-fin-groups,.cfg-fit .cfg-pick,
  .cfg-fit .cfg-step[data-step-key="model"]{
    overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
    scrollbar-color:var(--c-line-2) transparent;
    scrollbar-gutter:stable;padding-right:4px}
}

/* ============================================================================
   THE OVERLAY LAYOUT: THE VEHICLE IS THE BACKGROUND, THE STEPS FLOAT OVER IT.

   Idee d'Arnaud, 22 aout 2026 : "tu peux peut-etre avoir le vehicule en grand,
   on clique dessus, animation, et il passe en background de la page pour
   l'avoir en grand, et les fenetres se mettent au-dessus."

   The two column band is a good page section and a bad dialog: below 1181px it
   stacks, and a dialog that stacks puts its rail somewhere under a full height
   photograph, out of sight. This layout has ONE composition at every width and
   that is the whole point of it: the picture fills the block, and the rail is a
   window laid on top of it. Wide, the window sits on the right; narrow, it sits
   at the bottom, which is where a hand reaches.

   It is opt in: AXT.mountJourney(root, {layout: "overlay"}).
============================================================================ */
.cfg--overlay{display:block;position:relative;overflow:hidden;
  background:var(--c-bg)}
/* THE HEIGHT IS WRITTEN, NOT INHERITED FROM inset:0. Above 1181px the two
   column band gives .stage-col an align-self:start, and an absolutely
   positioned box that carries an alignment does NOT stretch between its top
   and its bottom: it takes its content height. The column collapsed to the
   25px of its empty control row, and with overflow:hidden on the stage the
   photograph and the name of the vehicle went with it. Measured 22 August
   2026, and invisible under 1181px, which is why it shipped: every window it
   had been measured in was narrower than that. */
.cfg--overlay .stage-col{position:absolute;inset:0;width:100%;height:100%;
  align-self:stretch;display:flex;flex-direction:column;background:transparent}
/* the picture takes the whole block: no ratio of its own, it is the ground */
.cfg--overlay .stage{flex:1 1 auto;aspect-ratio:auto;height:auto;min-height:0;
  background:transparent}
/* THE VEHICLE SITS IN THE ROOM THE WINDOW LEAVES. Centred on the whole frame
   it would spend its right third under the panel; the window takes 42% on the
   right, so the middle of what is free is a third of the way in. */
.cfg--overlay .stage img{object-position:32% 48%}
.cfg--overlay .stage-ctl{flex:0 0 auto;padding:0 clamp(18px,2vw,34px) clamp(14px,1.8vw,24px)}
.cfg--overlay .stage-ctl .btn{min-width:0}

/* THE WINDOW. A card of the band's own card colour, so it reads as a surface
   of this world and not as a foreign panel: white on white in the light world,
   near black on black in the dark one, and a hairline plus a long shadow to
   lift it off the picture. */
.cfg--overlay .rail{position:absolute;z-index:2;
  inset:clamp(12px,1.6vw,20px) clamp(12px,1.6vw,20px) clamp(12px,1.6vw,20px) auto;
  width:min(430px,42%);
  background:var(--c-card);border-radius:14px;
  box-shadow:inset 0 0 0 1px var(--c-line),0 30px 70px -34px rgb(0 0 0 / .55);
  padding:clamp(18px,1.8vw,26px);gap:14px;overflow:hidden}
.cfg--overlay .rail-body{min-height:0}
.cfg--overlay .cfg-step{min-height:0}
/* the only thing that scrolls is the inside of a step */
.cfg--overlay .cfg-step,.cfg--overlay .quote-scroll{
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--c-line-2) transparent;
  scrollbar-gutter:stable}
/* THE LAST STEP KEEPS ITS FIGURE AND ITS TWO BUTTONS OUT OF THE SCROLL.
   It used to be written .cfg-step-3, and that was a trap: the quote is the
   third step of a caravan and the fourth of a product that has finishes, so
   the rule would have followed the wrong panel the day a step was inserted.
   .cfg-step-last is put on the last panel THAT IS ON SCREEN by
   configurator.js, and it moves with the journey. No rule anywhere may name a
   step by its number again. */
.cfg--overlay .cfg-step-last{overflow:hidden;display:flex;flex-direction:column}
.cfg--overlay .rail h2{font-size:clamp(1.375rem,1.7vw,1.75rem)}

/* the name of the vehicle stays readable over its own photograph: the picture
   is contained on the band colour, so the corners are the band, and a plate is
   only needed where the two can meet */
.cfg--overlay .stage-foot{max-width:min(48%,420px)}

@media (max-width:900px){
  /* THE WINDOW COMES DOWN TO THE THUMB, AND IT STOPS FLOATING. Two absolutely
     positioned boxes on a narrow screen leave a hole between them whose size
     nobody can predict (the panel is as tall as its content, the picture is a
     percentage) and, worse, object-fit is contain: a picture box that still
     ran the whole height would centre the vehicle behind the panel and leave
     nothing but its roof showing. So the block becomes a column: the picture
     takes everything that is left, the panel takes what it needs, and there
     is no hole to predict. */
  .cfg--overlay{display:flex;flex-direction:column}
  /* the panel keeps the height its content asks for, capped; the picture
     takes what is left. flex:1 1 0 on the picture and 0 0 auto on the panel,
     in that order: the other way round the picture grows first and squeezes
     the panel down to a strip. */
  .cfg--overlay .stage-col{position:static;inset:auto;flex:1 1 0;
    min-height:110px;height:auto;width:auto}
  .cfg--overlay .stage{height:auto}
  .cfg--overlay .stage img{object-position:center 52%}
  .cfg--overlay .rail{position:static;inset:auto;width:auto;flex:0 0 auto;
    max-height:64%;margin:0 10px 10px;border-radius:14px}
  .cfg--overlay .stage-foot{max-width:none;bottom:auto;top:clamp(52px,9vw,64px)}
  .cfg--overlay .stage-ctl{display:none}
}
@media (max-width:520px){
  .cfg--overlay .rail{max-height:68%;margin:0 8px 8px;padding:16px 14px;gap:12px}
  .cfg--overlay .rail h2{font-size:1.25rem}
}

/* ---------------------------------------------------------- responsive */
@media (max-width:1180px){
  .cfg,.cfg--kiosk{grid-template-columns:minmax(0,1fr)}
  .rail{order:2}
  /* full width now, so the 16/9 of .stage already gives it all the height it
     can use: a min-height here would only bring the empty band back */
  .stage img{object-position:center 50%}
  .inside{grid-template-columns:repeat(3,minmax(0,1fr))}
  .inside figure:nth-child(4),.inside figure:nth-child(5){display:none}
}
/* THE STAND TABLET IS A LANDSCAPE SCREEN, and the landscape iPads sit right on
   the site's breakpoint (1180 x 820 for the Air, 1194 for the 11 inch Pro): on
   the site that width stacks, on the stand it must not, or the render leaves
   the screen the moment anyone touches an option. So the kiosk keeps its two
   columns down to the smallest landscape tablet, and only a PORTRAIT one
   stacks. Nothing else is forked: same grid, narrower rail. */
@media (min-width:1000px) and (max-width:1180px){
  .cfg--kiosk{grid-template-columns:minmax(0,1fr) 400px}
  .cfg--kiosk .rail{order:0;padding:clamp(20px,2.2vw,28px)}
  .cfg--kiosk .stage-col{position:sticky;top:var(--kiosk-head,16px);align-self:start}
  .cfg--kiosk .stage img{object-position:center 54%}

  /* AND THE ONE SCREEN CONTRACT COMES WITH THEM. The rules are the ones above,
     written a second time on purpose and not merged: between 1000 and 1180 the
     SITE stacks its two columns and must go back to scrolling, while the stand
     tablet keeps them and must still fit its screen. One media query cannot say
     both, so the kiosk band asks for it by name (.cfg-fit--kiosk). */
  .cfg-fit--kiosk{height:calc(100svh - var(--cfg-top));display:flex;flex-direction:column;
    overflow:hidden;padding-block:var(--cfg-pad)}
  .cfg-fit--kiosk .cfg-fit-in,.cfg-fit--kiosk [data-configurator]{
    flex:1 1 auto;min-height:0;min-width:0;
    display:flex;flex-direction:column;max-width:1500px;margin-inline:auto;width:100%}
  .cfg-fit--kiosk .cfg{flex:1 1 auto;min-height:0}
  .cfg-fit--kiosk .stage-col,.cfg-fit--kiosk .rail{min-height:0}
  .cfg-fit--kiosk .rail{overflow:hidden}
  .cfg-fit--kiosk .stage-col{position:static;align-self:stretch;display:grid;
    grid-template-rows:minmax(0,1fr) auto}
  .cfg-fit--kiosk .stage-col .stage{flex:none;align-self:center;max-height:100%}
  .cfg-fit--kiosk .rail-blk-opts .ogrps,.cfg-fit--kiosk .quote-scroll,
  .cfg-fit--kiosk .cfg-fin-groups,.cfg-fit--kiosk .cfg-pick,
  .cfg-fit--kiosk .cfg-step[data-step-key="model"]{
    overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
    scrollbar-color:var(--c-line-2) transparent;
    scrollbar-gutter:stable;padding-right:4px}
}
@media (max-width:720px){
  .stage-ctl{justify-content:center}
  .stage-ctl .btn{width:100%}
  .gal{width:100%;justify-content:center}
  /* the rail gives its padding back to the option rows: at 390px a group
     header and a 40 character option name have to fit on the same column */
  .rail{padding:26px 18px}
  .ogrp-h{padding:12px 13px;font-size:.875rem;gap:10px}
  .ogrp .modes{padding:0 6px 6px}
  .mode{padding:11px 12px}
  .ogrp-std .std-list{grid-template-columns:minmax(0,1fr);padding:2px 13px 14px}
  .inside{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inside figure:nth-child(3){display:none}
  /* the kiosk keeps its thumb sized targets even on a phone sized viewport */
  .cfg--kiosk .ogrp-h{padding:16px 14px;font-size:.9375rem}
  .cfg--kiosk .mode{padding:14px 13px}
  /* the steps still say what they are on a 390px column, and past three of
     them only the rank is left: the aria-label carries the name */
  .cfg-stepb{font-size:.75rem;gap:6px;padding:8px 2px}
  .cfg-stepb-n{width:19px;height:19px;font-size:.625rem}
  .cfg-steps[data-cfg-steps="4"] .cfg-stepb:not([aria-current="step"]) .cfg-stepb-l{display:none}
  .swatches{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
  .cfg-fin{gap:12px}
  .rail-foot{flex-wrap:wrap}
  .cfg-nav-b{flex:1 1 120px;min-width:0}
}

/* ============================================================================
   THE SHARED FULLSCREEN HOST. Preview opens it in a native dialog; Sales uses
   the same .cfg--fullscreen directly inside its kiosk view. The engine, state,
   catalogue and callbacks remain one module. Only the host action after the
   quote differs.
============================================================================ */
html.cfg-screen-open,html.cfg-screen-open body{overflow:hidden}
dialog.cfg-screen{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;
  max-height:none;margin:0;padding:0;border:0;background:#000;color:#fff;overflow:hidden}
dialog.cfg-screen[open]{display:block}
dialog.cfg-screen::backdrop{background:rgb(0 0 0 / .78)}
.cfg-screen-bar{position:absolute;z-index:30;inset:0 0 auto;display:flex;
  align-items:center;justify-content:space-between;gap:16px;min-height:68px;
  padding:10px clamp(18px,3vw,48px);pointer-events:none}
.cfg-screen-bar>*{pointer-events:auto}
.cfg-screen-close{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 18px;border:1px solid rgb(255 255 255 / .22);
  border-radius:999px;background:rgb(12 13 14 / .64);color:#fff;font:inherit;
  font-size:.875rem;font-weight:600;cursor:pointer;
  backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%)}
.cfg-screen-close:hover{border-color:rgb(255 255 255 / .48)}
.cfg-screen-mark{display:inline-flex;align-items:center;background:#fff;border-radius:8px;
  padding:6px 10px}
.cfg-screen-mark img{display:block;width:auto;height:26px}
.cfg-screen-payban{position:absolute;z-index:32;inset:78px clamp(18px,3vw,48px) auto;
  margin:0;max-width:620px}
.cfg-screen-mount{position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0}
.cfg-screen-mount>.cfg{width:100%;height:100%}

/* The image is the room. Dark studio renders fill it; white catalogue renders
   stay whole on a perfectly white ground, so their own plate disappears. */
.cfg--fullscreen{width:100%;height:100%;min-width:0;min-height:0;display:block;
  position:relative;overflow:hidden;background:var(--c-bg)}
.cfg--fullscreen .stage-col{position:absolute;inset:0;width:100%;height:100%;display:block;
  background:var(--c-bg)}
.cfg--fullscreen .stage{position:absolute;inset:0;width:100%;height:100%;min-height:0;
  max-height:none;aspect-ratio:auto;background:var(--c-bg)}
.cfg--fullscreen:not(.is-light) .stage img{width:100%;height:100%;object-fit:cover;
  object-position:100% 50%}
.cfg--fullscreen:not(.is-light) .stage::after{
  background:
    linear-gradient(to left,var(--c-bg) 0%,rgb(0 0 0 / .9) 9%,
      rgb(0 0 0 / .5) 24%,rgb(0 0 0 / 0) 44%),
    linear-gradient(to bottom,var(--c-bg) 0%,rgb(0 0 0 / 0) 12%,
      rgb(0 0 0 / 0) 74%,var(--c-veil) 92%,var(--c-bg) 100%),
    radial-gradient(78% 96% at 50% 52%,
      rgb(0 0 0 / 0) 0%,rgb(0 0 0 / 0) 50%,var(--c-veil) 84%,var(--c-bg) 100%)}
.cfg--fullscreen.is-light .stage{background:#fff}
.cfg--fullscreen.is-light .stage img{width:100%;height:100%;object-fit:contain;
  object-position:center 58%;padding:7vh 4vw 1vh;background:#fff;mix-blend-mode:multiply}
.cfg--fullscreen.is-light[data-step-key="model"] .stage img,
.cfg--fullscreen.is-light[data-step-key="finish"] .stage img,
.cfg--fullscreen.is-light[data-step-key="quote"] .stage img{
  padding:7vh calc(min(430px,38vw) + 96px) 1vh 32px}
.cfg--fullscreen .stage-tag{display:none}
.cfg--fullscreen .stage-ctl{position:absolute;z-index:4;inset:auto auto 28px 48px;
  padding:0;border:0}
.cfg--fullscreen .stage-foot{left:48px;right:auto;bottom:92px;max-width:min(46%,540px)}

/* One glass window for model and review. It expands for option decisions, then
   returns to the edge so the clean vehicle owns the review scene again. */
.cfg--fullscreen .rail{position:absolute;z-index:8;inset:76px 48px 32px auto;
  width:min(390px,34%);margin:0;padding:clamp(18px,2vw,28px);gap:14px;
  overflow:hidden;border-radius:18px;background:var(--c-glass);
  box-shadow:inset 0 0 0 1px var(--c-line-2),0 28px 74px -30px rgb(0 0 0 / .58);
  backdrop-filter:blur(22px) saturate(130%);-webkit-backdrop-filter:blur(22px) saturate(130%)}
.cfg--fullscreen:not(.is-light) .rail{
  --c-bg:#0c0d0e;--c-fg:#fff;--c-dim:#b4b6b8;
  --c-card:rgb(255 255 255 / .07);--c-card-on:rgb(255 255 255 / .12);
  --c-line:rgb(255 255 255 / .12);--c-line-2:rgb(255 255 255 / .26);
  --c-tick-in:#0c0d0e;--c-btn-bg:#fff;--c-btn-fg:#131313;
  --c-btn-hover:#e8e8e8;--c-ghost:rgb(255 255 255 / .46);
  --c-glass:rgb(12 13 14 / .88);--c-gain:#5ee08f}
.cfg--fullscreen .rail-body,.cfg--fullscreen .cfg-step{min-height:0}
.cfg--fullscreen .cfg-step,.cfg--fullscreen .quote-scroll{overflow-y:auto;
  overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--c-line-2) transparent}
.cfg--fullscreen[data-step-key="options"] .stage-col{filter:blur(5px) saturate(.78);
  transform:scale(1.01);opacity:.82;transition:filter 360ms var(--ease),
  transform 440ms var(--ease),opacity 240ms var(--ease)}
.cfg--fullscreen[data-step-key="finish"] .stage-col{filter:none;transform:none;opacity:1}
.cfg--fullscreen[data-step-key="finish"] .rail-blk-finish,
.cfg--fullscreen[data-step-key="finish"] .cfg-fin-groups{flex:0 0 auto;min-height:auto}
.cfg--fullscreen[data-step-key="finish"] .rail,
.cfg--fullscreen[data-step-key="options"] .rail{bottom:auto;max-height:calc(100% - 108px)}
.cfg--fullscreen[data-step-key="finish"] .rail-body,
.cfg--fullscreen[data-step-key="finish"] .cfg-step,
.cfg--fullscreen[data-step-key="options"] .rail-body,
.cfg--fullscreen[data-step-key="options"] .cfg-step,
.cfg--fullscreen[data-step-key="options"] .rail-blk-opts,
.cfg--fullscreen[data-step-key="options"] .rail-blk-opts .ogrps{flex:0 1 auto}
.cfg--fullscreen[data-step-key="options"] .rail{inset:50% auto auto 50%;
  width:min(760px,calc(100% - 96px));max-height:calc(100% - 152px);
  padding:18px 22px;transform:translate(-50%,-50%)}
.cfg--fullscreen[data-step-key="options"] .rail-head{display:none}
.cfg--fullscreen[data-step-key="options"] .rail-blk-opts .ogrps{display:flex;flex-direction:column;
  align-items:stretch;gap:8px;overflow:auto;padding-bottom:0;
  scrollbar-width:auto;scrollbar-color:var(--c-fg) var(--c-line)}
.cfg--fullscreen[data-step-key="options"] .rail-blk-opts .ogrp{align-self:stretch;width:100%}
.cfg--fullscreen[data-step-key="options"] .rail-blk-opts .ogrp[open] .modes{
  grid-template-columns:repeat(2,minmax(0,1fr))}
@keyframes cfg-option-reveal{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}
.cfg--fullscreen[data-step-key="options"] .ogrp[open]>.modes{
  animation:cfg-option-reveal 180ms var(--ease) both}
.cfg--fullscreen[data-step-key="quote"] .stage-col{filter:none;transform:none;opacity:1}
.cfg--fullscreen[data-step-key="quote"] .rail{inset:76px 48px 32px auto;
  width:min(390px,34%);background:var(--c-glass)}
.cfg--fullscreen[data-step-key="quote"] .price .pv{color:var(--c-fg);font-size:1.75rem}
.cfg--fullscreen[data-step-key="quote"] .quote-act .btn-ink{opacity:1;
  background:var(--c-fg);color:var(--c-bg)}
.cfg--fullscreen .rail .cfg-nav-n{background:var(--c-fg);color:var(--c-bg);box-shadow:none}
.cfg--fullscreen .rail .cfg-nav-n:hover{opacity:.88}
.cfg--fullscreen:not(.is-light)[data-step-key="quote"] .quote-act .btn-ghost,
.cfg--fullscreen:not(.is-light)[data-step-key="quote"] .cfg-dl{color:#fff;
  background:rgb(255 255 255 / .08);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .42)}
.cfg--fullscreen .cfg-shelfb,.cfg--fullscreen .seg button,
.cfg--fullscreen .cfg-stepb{min-height:44px}
/* 40 AND NOT 44. The touch floor of 44 px is a floor the flex algorithm
   cannot cross, and six swatches plus their gutters at that size are five
   pixels wider than the rail: the sixth was clipped by the panel. At 40 they
   fit on one line at every width the stand uses, measured, and they still grow
   back to 48 when there is room. `flex-wrap` stays as a last resort so a
   narrower rail wraps instead of cutting a colour in half. */
.cfg--fullscreen .tint{min-width:40px;min-height:40px}

@media (min-width:901px){
  .cfg--fullscreen:not(.is-light) .stage img{transform:translateX(-64px)}
}

@media (max-width:900px){
  .cfg--fullscreen{display:block}
  .cfg--fullscreen .stage-col{position:absolute;inset:0;width:100%;height:100%;min-height:0}
  .cfg--fullscreen .stage{height:100%}
  .cfg--fullscreen:not(.is-light) .stage img{object-fit:cover;object-position:68% 50%}
  .cfg--fullscreen.is-light .stage img,
  .cfg--fullscreen.is-light[data-step-key="model"] .stage img,
  .cfg--fullscreen.is-light[data-step-key="quote"] .stage img{
    object-fit:contain;object-position:center 58%;padding:7vh 3vw 52vh}
  .cfg--fullscreen .stage-ctl{display:none}
  .cfg--fullscreen .stage-foot{top:auto;left:22px;right:22px;
    bottom:calc(58% - 40px);max-width:none}
  .cfg--fullscreen .stage-badges{width:100%;max-width:none;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none}
  .cfg--fullscreen .stage-badges::-webkit-scrollbar{display:none}
  .cfg--fullscreen .stage-badge{flex:0 0 auto}
  .cfg--fullscreen .rail{position:absolute;inset:auto 12px 12px;width:auto;max-height:58%;
    margin:0;padding:16px 14px;flex:0 0 auto}
  .cfg--fullscreen[data-step-key="options"] .rail{inset:50% auto auto 50%;
    width:min(760px,calc(100% - 40px));max-height:calc(100% - 152px);
    transform:translate(-50%,-50%)}
  .cfg--fullscreen[data-step-key="options"] .rail-blk-opts .ogrp[open] .modes{
    grid-template-columns:minmax(0,1fr)}
  .cfg--fullscreen[data-step-key="quote"] .rail{inset:auto 12px 12px;width:auto;max-height:58%}
}
@media (max-width:560px){
  .cfg--fullscreen[data-step-key="quote"] .rail{
    inset:72px 20px 20px;width:auto;max-height:none}
  .cfg--fullscreen:not(.is-light)[data-step-key="quote"] .rail{
    background:rgb(12 13 14 / .98)}
  .cfg--fullscreen.is-light[data-step-key="quote"] .rail{
    background:rgb(255 255 255 / .98)}
}
@media (prefers-reduced-motion:reduce){
  .cfg--fullscreen .stage-col{transition:none!important}
  .cfg--fullscreen[data-step-key="options"] .ogrp[open]>.modes{animation:none!important}
}

/* ============================================================================
   THE SHEET: what "Download this build" puts on paper.
   The node is a DIRECT CHILD OF <body> (configurator.js hangs it there), so
   this stylesheet can hide every other child of the body and show this one
   alone. Two guards, and both matter:
     .cfg-printing on <html>  the sheet only takes the printer over when the
        button asked for it. Ctrl+P on the page prints THE PAGE.
     [data-print="1"]         two configurators on one document hang two
        sheets on the body: only the one that was asked for goes out.
   The rule that hides the sheet on screen is written OUTSIDE any width query
   on purpose: the pitfall of this project is a print query that also matches a
   narrow screen, so nothing below is ever combined with a max-width and the
   screen rule stands on its own.
============================================================================ */
.cfg-print{display:none}

@media print{
  html.cfg-printing,.cfg-printing body{background:#fff !important;color:#131313 !important}
  .cfg-printing body>*{display:none !important}
  .cfg-printing body>.cfg-print[data-print="1"]{display:block !important;
    padding:16mm;margin:0;font-size:11pt;line-height:1.45;color:#131313}
  .cfg-print h1{font-size:22pt;letter-spacing:-.01em;margin:2mm 0 0}
  .cfg-print .cfg-print-m{font-size:9pt;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;margin:0}
  .cfg-print .cfg-print-s{font-size:10pt;margin:2mm 0 0;color:#4a4a4a}
  .cfg-print .cfg-print-h{padding-bottom:4mm;border-bottom:1px solid #131313}
  .cfg-print .cfg-print-l{list-style:none;margin:5mm 0 0;padding:0}
  .cfg-print .cfg-print-l li{display:flex;justify-content:space-between;gap:10mm;
    padding:2mm 0;border-bottom:1px solid #d8d8d8}
  .cfg-print .cfg-print-l b{font-weight:600;white-space:nowrap}
  .cfg-print .cfg-print-t{display:flex;justify-content:space-between;gap:10mm;
    margin:4mm 0 0;padding-top:3mm;border-top:1px solid #131313;
    font-size:14pt;font-weight:600}
  .cfg-print .cfg-print-n{font-size:9pt;color:#4a4a4a;margin:4mm 0 0;max-width:150mm}
  /* MARGIN ZERO, AND THE SHEET PAYS FOR ITS OWN MARGIN.
     A non-zero @page margin makes the browser print ITS header and footer in
     that space: the document title and the date on top, THE PAGE URL and the
     page number underneath. A visitor who saved his build got
     "https://preview.axt.ae/pivot/vehicles.html#buy=ntr3x" printed at the foot
     of a sheet he might show to someone. At margin zero the browser prints
     nothing of its own, which is exactly why the quotation sheet has always
     been on `@page{size:A4;margin:0}`. The 16 mm moves onto the sheet. */
  @page{size:A4;margin:0}
}