/* ============================================================================
   One car
   The photographs are the argument. Everything here is arranged so they are
   large, quickly compared, and honestly grouped.
   ========================================================================= */

.car{ padding-block:var(--s-6) var(--s-9); }
.car-back{ display:inline-block; margin-bottom:var(--s-4); font-size:var(--t-small); }
.car-h{ margin:0 0 var(--s-6); font-size:var(--t-h1); line-height:1.06;
  letter-spacing:-.022em; color:var(--mc-ink); }
.car-h span{ color:var(--mc-ink-3); font-weight:500; }

.car-grid{ display:grid; gap:var(--s-7); grid-template-columns:minmax(0,1fr); }
@media (min-width:1000px){
  .car-grid{ grid-template-columns:minmax(0,1fr) 21rem; align-items:start; }
  /* The long-form sections live inside the grid and drop into column 1 under the
     gallery, so the left side has something to run beside the offer panels. With
     them below the grid the left column ended at the thumbnails and the right
     carried on for another ~950px of empty page.
     .car-side stays in row 1 of column 2 and is not stretched, so if the left
     side ends up the taller of the two the space falls under the panels, where a
     sidebar ending is what anyone expects. */
  .car-grid > :not(.car-side){ grid-column:1; }
  /* Spanning every row of the left column, not sitting in row 1.
     A grid item sizes its row, so with the sidebar in row 1 the gallery's row was
     1,278px tall to fit the panels beside it, and the description started below
     all of that: ~790px of empty page under the thumbnails, which is the hole the
     client photographed. Spanning means its height is only distributed across
     rows that are already taller, so it stops forcing anything.
     The count comes from the template, because it varies: some cars have no
     description, some have no equipment list. --main-rows is 1, 2 or 3. */
  .car-side{ grid-column:2; grid-row:1 / span var(--main-rows, 1); align-self:start; }
  /* The grid's own row gap separates them now; the section margin would add a
     second, larger gap on top of it. */
  .car-grid{ row-gap:var(--s-8); }
  .car-grid > .car-sec{ margin-top:0; }
}

/* ---- the stage ----------------------------------------------------------
   3:2, which is what the camera gave. Cropping a car to a squarer frame cuts
   the nose or the tail off exactly when the buyer is judging its shape. */
.car-stage{ position:relative; margin:0; aspect-ratio:3 / 2; overflow:hidden;
  background:var(--mc-band); border:1px solid var(--mc-hairline);
  border-radius:var(--mc-r-card); }
.car-stage__img{ width:100%; height:100%; object-fit:cover; display:block; }
.car-stage__count{ position:absolute; right:var(--s-3); bottom:var(--s-3);
  padding:var(--s-1) var(--s-3); border-radius:var(--mc-r-card);
  background:rgba(17,28,46,.72); color:#FFFFFF;
  font-size:var(--t-label); font-variant-numeric:tabular-nums; }
.car-stage__count b{ font-weight:600; color:inherit; }

/* ---- what the buyer is asking ------------------------------------------- */
.car-tabs{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-4); }
.car-tab{
  min-height:44px; padding:0 var(--s-4);
  border:1px solid var(--mc-rule); border-radius:var(--mc-r);
  background:var(--mc-surface); color:var(--mc-ink-2);
  font:500 var(--t-ui)/1 var(--f-ui); cursor:pointer;
  display:inline-flex; align-items:center; gap:var(--s-2);
  transition:border-color var(--m-quick) var(--e-out), color var(--m-quick) var(--e-out),
             background var(--m-quick) var(--e-out);
}
.car-tab span{ color:var(--mc-ink-3); font-variant-numeric:tabular-nums; font-weight:500; }
.car-tab:hover{ border-color:var(--mc-control); color:var(--mc-ink); }
.car-tab.is-on{ background:var(--mc-ink); border-color:var(--mc-ink); color:#FFFFFF; font-weight:600; }
.car-tab.is-on span{ color:rgba(255,255,255,.72); }
.car-tab:focus-visible{ outline:3px solid var(--mc-blue); outline-offset:2px; }

/* ---- the strip ----------------------------------------------------------
   Scrolled, never wrapped: 58 thumbnails in a grid is a wall the buyer has to
   read, while a strip is one they can flick through. Edge to edge on a phone,
   so the last one is always half-visible and the strip says it continues. */
.car-thumbs{
  display:flex; gap:var(--s-2); margin-top:var(--s-4);
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity;
  padding-bottom:var(--s-2); scrollbar-width:thin;
}
.car-thumbs[hidden]{ display:none; }   /* display:flex beats the [hidden] default */
.car-thumbs::-webkit-scrollbar{ height:6px; }
.car-thumbs::-webkit-scrollbar-thumb{ background:var(--mc-rule); border-radius:var(--mc-r-pill); }
.car-thumb{
  flex:0 0 auto; width:7.5rem; aspect-ratio:3 / 2; display:block; position:relative;
  overflow:hidden; background:var(--mc-band);
  border:1px solid var(--mc-hairline); border-radius:var(--mc-r-card);
  scroll-snap-align:start; cursor:pointer;
  transition:border-color var(--m-quick) var(--e-out), opacity var(--m-quick) var(--e-out);
}
.car-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.car-thumb:hover{ border-color:var(--mc-control); }
/* the one on the stage: a solid ink edge, not a glow — it has to survive on a
   photograph of any colour, which a shadow does not */
.car-thumb.is-on{ border-color:var(--mc-ink); box-shadow:inset 0 0 0 2px var(--mc-ink); }
.car-thumb:focus-visible{ outline:3px solid var(--mc-blue); outline-offset:2px; }
@media (max-width:768px){
  .car-thumbs{ margin-inline:calc(var(--mc-gutter-m) * -1); padding-inline:var(--mc-gutter-m); }
  .car-thumb{ width:6.5rem; }
}

.car-empty{ margin:var(--s-4) 0 0; max-width:52ch; font-size:var(--t-small);
  line-height:1.5; color:var(--mc-ink-2);
  padding:var(--s-4); background:var(--mc-band); border-radius:var(--mc-r-card); }

/* ---- the facts ---------------------------------------------------------- */
.car-side{ display:flex; flex-direction:column; gap:var(--s-5); }
.car-price{ display:flex; align-items:baseline; gap:var(--s-3); flex-wrap:wrap; }
.car-price .mc-price{ font-size:var(--t-h1); font-weight:700; }
/* One column here whatever the sheet says: the side panel is 336px, and two
   columns of it leave 160px a row — not enough for a label and a value, which is
   how "Diesel" ended up set one letter per line. */
.car-specs{ margin:0; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-2); }
.car-specs .mc-specs__row{ grid-template-columns:minmax(9ch,11ch) minmax(0,1fr); }

/* ---- arrows on the stage -------------------------------------------------
   Only drawn once the script is running, because without it they would do
   nothing. Ink on white rather than white on the photograph: a car photographed
   at dusk and one photographed in a white showroom are both in this gallery, and
   only a solid chip survives both. */
.car-stage__nav{
  position:absolute; top:50%; translate:0 -50%; z-index:2;
  width:44px; height:44px; padding:0; cursor:pointer;
  border:1px solid rgba(17,28,46,.14); border-radius:var(--mc-r-pill);
  background:rgba(255,255,255,.92); color:var(--mc-ink);
  display:grid; place-items:center;
  opacity:0; transition:opacity var(--m-quick) var(--e-out), background var(--m-quick) var(--e-out);
}
.car-stage__nav::before{
  content:""; width:11px; height:11px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
}
.car-stage__nav--prev{ left:var(--s-3); }
.car-stage__nav--prev::before{ rotate:135deg; translate:2px 0; }
.car-stage__nav--next{ right:var(--s-3); }
.car-stage__nav--next::before{ rotate:-45deg; translate:-2px 0; }
.car-stage:hover .car-stage__nav,
.car-stage__nav:focus-visible{ opacity:1; }
.car-stage__nav:hover{ background:#FFFFFF; }
.car-stage__nav:focus-visible{ outline:3px solid var(--mc-blue); outline-offset:2px; }
/* a finger has no hover, so on touch they are simply always there */
@media (hover:none){ .car-stage__nav{ opacity:.92; } }

/* ---- full screen ---------------------------------------------------------
   Black, because at this size the surround is most of what the eye sees and any
   colour of mine would sit in judgement on the photograph. */
.car-view{
  position:fixed; inset:0; z-index:80;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:var(--s-3); padding:var(--s-4);
  background:rgb(var(--mc-scrim));
}
.car-view[hidden]{ display:none; }
.car-view__img{
  max-width:100%; max-height:calc(100vh - var(--s-8));
  max-height:calc(100svh - var(--s-8));
  object-fit:contain; display:block;
}
.car-view__nav{
  width:56px; height:56px; padding:0; cursor:pointer;
  border:1px solid rgba(255,255,255,.22); border-radius:var(--mc-r-pill);
  background:rgba(255,255,255,.08); color:#FFFFFF;
  display:grid; place-items:center;
  transition:background var(--m-quick) var(--e-out);
}
.car-view__nav::before{
  content:""; width:13px; height:13px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
}
.car-view__nav--prev{ grid-column:1; }
.car-view__nav--prev::before{ rotate:135deg; translate:2px 0; }
.car-view__nav--next{ grid-column:3; }
.car-view__nav--next::before{ rotate:-45deg; translate:-2px 0; }
.car-view__nav:hover{ background:rgba(255,255,255,.18); }
.car-view__nav:focus-visible{ outline:3px solid #FFFFFF; outline-offset:2px; }
.car-view__x{
  position:absolute; top:var(--s-4); right:var(--s-4); z-index:1;
  width:44px; height:44px; padding:0; cursor:pointer; line-height:1;
  border:1px solid rgba(255,255,255,.22); border-radius:var(--mc-r-pill);
  background:rgba(255,255,255,.08); color:#FFFFFF; font-size:24px;
}
.car-view__x:hover{ background:rgba(255,255,255,.18); }
.car-view__x:focus-visible{ outline:3px solid #FFFFFF; outline-offset:2px; }
.car-view__count{
  position:absolute; left:50%; bottom:var(--s-4); translate:-50% 0;
  font-size:var(--t-label); color:rgba(255,255,255,.72);
  font-variant-numeric:tabular-nums;
}
@media (max-width:768px){
  /* the buttons would eat the photograph on a narrow screen, so they go under it
     and the swipe carries the movement */
  .car-view{ grid-template-columns:1fr; padding:var(--s-3); }
  .car-view__img{ max-height:calc(100svh - 9rem); }
  .car-view__count{ bottom:calc(var(--s-4) + env(safe-area-inset-bottom,0px)); }

  /* grid-column:auto is the fix, and it is the whole bug.
     An absolutely positioned child of a grid container that HAS a definite grid
     position is laid out against its grid area, not against the container's
     padding box. These buttons carry grid-column 1 and 3 from the desktop rule;
     the phone template has one column, so column 3 is an implicit line and the
     button's containing block collapsed to a zero-width strip at the right edge.
     `right:22%` of 0px is 0px — the next button sat 3px from the screen edge
     while prev sat at 95px, and the pair looked broken.
     The counter underneath was always centred correctly, and that is the proof:
     it is the one absolutely positioned child with no grid-column on it.

     Positioned as a PAIR around one point rather than as two independent edges,
     so they cannot drift apart again; and that point is the middle of the USABLE
     width, so a notch — which is on the left in landscape — moves both together
     instead of pushing one of them under it. */
  .car-view__nav{
    position:absolute; grid-column:auto;
    bottom:calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
    width:52px; height:52px;
    left:calc(50% + (env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) / 2);
  }
  .car-view__nav--prev{ translate:calc(-100% - var(--s-4)) 0; }
  .car-view__nav--next{ translate:var(--s-4) 0; }
}

/* ---- the sections below the fold ---------------------------------------- */
.car-sec{ margin-top:var(--s-9); }
.car-text{ max-width:60ch; }
.car-price__was{
  display:inline-flex; align-items:baseline; gap:var(--s-2);
  font-size:var(--t-small); color:var(--mc-ink-3);
}
.car-price__was s{ text-decoration-thickness:1px; }
.car-price__was b{ color:var(--mc-ok); font-weight:600; }

/* the long spec list: two columns of pairs, which reads faster than one long
   ladder and does not become a wall like a table would */
.car-tech{ margin:0; display:grid; gap:var(--s-2) var(--s-5);
  grid-template-columns:minmax(0,1fr); }
@media (min-width:700px){ .car-tech{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.car-tech__row{
  display:grid; grid-template-columns:minmax(12ch,15ch) minmax(0,1fr); gap:var(--s-3);
  align-items:baseline; padding:var(--s-3) var(--s-4);
  background:var(--mc-blue-tint); border-radius:var(--mc-r-card);
}
.car-tech dt{ font-size:var(--t-small); color:var(--mc-ink-3); }
.car-tech dd{ margin:0; min-width:0; overflow-wrap:break-word;
  font-size:var(--t-value); font-weight:600; color:var(--mc-ink); }

.car-tags{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin:0; padding:0; list-style:none; }
.car-tags li{
  padding:var(--s-2) var(--s-4); border:1px solid var(--mc-rule);
  border-radius:var(--mc-r-card); font-size:var(--t-small); color:var(--mc-ink-2);
}

/* ---- what goes with the car --------------------------------------------
   Two panels: the warranty, which is included and can be extended, and the
   maintenance plan, which is not included at all. Same shape on purpose — same
   panel, same ladder, same note — because the thing that differs between them is
   the only thing worth reading: one starts at "Incluido", the other at a price.

   They live in the right-hand column under the price, which is where the client
   asked for them. That changes the layout problem: the panel's width is now set
   by a 21rem column, not by the viewport, so the viewport-width rules this block
   used to carry were answering the wrong question. Below 1000px .car-grid is a
   single column and the panel is as wide as the page; at 1440 it is 336px — the
   same panel, with four times the width between the two cases.

   So the ladder is lines, always: term left, amount right. A container query was
   written to turn it back into a row of cells above 27.5rem of panel, and then
   measured across nine viewports from 320 to 1800 — the panel is 336px in the
   sidebar and never exceeds 410px anywhere, because two side by side is the
   widest it ever gets. The query could not fire, so it is not here. A rule that
   cannot be shown to do anything is a comment pretending to be code.
   ========================================================================= */
.car-with{ margin-top:var(--s-7); }
.car-with__h{
  margin:0 0 var(--s-4); font-size:var(--t-h3); font-weight:700;
  letter-spacing:-.010em; color:var(--mc-ink);
}
.car-with__grid{
  display:grid; gap:var(--s-4);
  /* 17rem: two panels side by side from about 568px of column, one below that.
     In the 21rem sidebar this always resolves to one. */
  grid-template-columns:repeat(auto-fit, minmax(17rem, 1fr));
}

.car-off{
  min-width:0; padding:var(--s-5);
  background:var(--mc-surface); border:1px solid var(--mc-hairline);
  border-radius:var(--mc-r-card); box-shadow:var(--mc-shadow-1);
}
.car-off__h{
  margin:0 0 var(--s-2); font-size:var(--t-value); font-weight:700;
  letter-spacing:-.010em; color:var(--mc-ink);
}
.car-off__say{
  margin:0 0 var(--s-4); max-width:40ch;
  font-size:var(--t-small); line-height:1.55; color:var(--mc-ink);
}
/* A price table is the fastest way to make a page look like a template, so the
   figures are not put in a table. In a narrow panel each option is a line — term
   left, amount right; wide enough, the same lines become a row of cells and read
   as a scale. The included step is the only one that inverts to navy: it is the
   one you already have, and the eye should land on it first. */
.car-off__steps{
  margin:0 0 var(--s-4); padding:0; list-style:none;
  display:grid; gap:var(--s-2); grid-template-columns:minmax(0,1fr);
}
.car-off__step{
  padding:var(--s-3) var(--s-4);
  background:var(--mc-band); border-radius:var(--mc-r-card);
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-4);
}
.car-off__t{ font-size:var(--t-small); color:var(--mc-ink-2); }
.car-off__step--inc{ background:var(--mc-navy); }
.car-off__step--inc .car-off__t{ color:var(--mc-on-navy-2); }
.car-off__p{
  font-size:var(--t-km); font-weight:700; letter-spacing:-.020em;
  line-height:1.1; color:var(--mc-ink); font-variant-numeric:tabular-nums;
}
.car-off__step--inc .car-off__p{ color:var(--mc-on-navy); }
.car-off__note{
  margin:0; font-size:var(--t-label); line-height:1.55; color:var(--mc-ink-2);
}

/* ============================================================================
   SOLD — the page for a car that is gone
   The client: "cele vandute ... nu se deschid ca anunt, dar vreau sa le putem
   deschide ... si trebuie pentru pagina masinii sa abordezi o tema gri total
   si doar imaginile sa aibe toate un filtru care sa aiba si culoare dar sa bata
   si ele in gri si sa fie o eticheta fixa in pagina din partea stanga sau
   dreapta in care sa scrie Vendido."
   ========================================================================= */

/* One override block, not thirty rules. Every accent in the system is pointed
   at a step of the ink ladder, so the page loses its blue, its red and its
   green without a single component knowing it happened — and without any of
   them being reimplemented here, which is how the two would drift apart.
   The ink ladder is this system's grey: blue-cast, never pure black, and every
   step already proven against all four grounds, so nothing here can quietly
   fail contrast. */
/* On <body>, not on <main>. Scoped to the content the header's WhatsApp button
   and the footer's "Reservar cita" stayed brand-green on an otherwise fully grey
   page — one green rectangle in the top right of an archive, which is exactly
   the kind of leftover the client notices. "Tema gri total" means the page, and
   the header and footer are part of the page. Only the accents neutralise; the
   navigation behaves identically. */
.car--sold{
  --mc-blue:        var(--mc-ink-2);
  --mc-blue-dark:   var(--mc-ink);
  --mc-blue-tint:   var(--mc-band);
  --mc-price:       var(--mc-ink);
  --mc-accent:      var(--mc-ink);
  --mc-accent-dark: var(--mc-ink);
  --mc-accent-tint: var(--mc-band);
  --mc-wa:          var(--mc-ink-2);
  --mc-wa-dark:     var(--mc-ink);
  --mc-wa-tint:     var(--mc-band);
  /* --mc-ok and --mc-warn are their own literals in mc-tokens.css, not aliases
     of --mc-wa, so remapping the green above left the price page's "-500 €"
     rendering green on a grey page. Anything that can carry a hue is listed
     here; that is the whole point of doing it with tokens. */
  --mc-ok:          var(--mc-ink-2);
  --mc-ok-tint:     var(--mc-band);
  --mc-warn:        var(--mc-ink-2);
  --mc-warn-tint:   var(--mc-band);
}

/* Only the images. The token is shared with the catalogue card so that clicking
   a grey card into a differently-grey page is impossible; see mc-tokens.css. */
/* The viewer's photograph is in this list too. It was not at first, and clicking
   a grey thumbnail then opened a full-colour photograph — the same picture in two
   states one tap apart. There is nothing to inspect the true colour of on a car
   that is already gone. */
.car--sold .car-stage__img,
.car--sold .car-thumb img,
.car--sold .car-view__img{ filter:var(--mc-sold-img); }

.car-gone{
  margin:calc(-1 * var(--s-4)) 0 var(--s-6); max-width:52ch;
  font-size:var(--t-prose); line-height:1.6; color:var(--mc-ink-2);
  border-left:3px solid var(--mc-ink-3); padding-left:var(--s-4);
}

/* ---- the fixed label ----------------------------------------------------
   A square stamp, bottom left, fixed, and there at every width — the client:
   "o eticheta patrata in partea stanga care sa apara chiar daca scrolezi ...
   ea tot timpul trebuie sa fie prezenta".

   The first version was a vertical tab down the RIGHT edge that only appeared
   above 1360px, because that is where it stopped sitting on the words. "Tot
   timpul prezenta" rules that out, so the position moved to the one place that
   is free at every width: the bottom left corner, which is where floating page
   chrome already lives on this site — the dock is fixed to the bottom edge and
   nobody reads a corner as part of the text.

   Square corners, via the card token, because a stamp with rounded corners is a
   button and this is not pressable. z-index sits under the full-screen viewer
   (80): inside it the photograph carries its own mark, and two of them on one
   screen would be one too many.

   aria-hidden: the sentence under the title already says this in the reading
   order, and the mark in the viewer is aria-hidden for the same reason. */
.car-tab-sold{
  position:fixed; z-index:70;
  left:var(--s-4); bottom:var(--s-4);
  margin:0; width:72px; height:72px;
  display:grid; place-items:center;
  background:var(--mc-navy); color:var(--mc-on-navy);
  border-radius:var(--mc-r-card);
  font-size:var(--t-label); font-weight:700; letter-spacing:.02em;
  /* A navy square on the navy footer would vanish as you reach the end of the
     page, and the page ALWAYS ends on the footer. The hairline is what keeps it
     a separate object down there. */
  box-shadow:0 0 0 1px rgba(255,255,255,.16), var(--mc-shadow-2);
}
/* On a phone it goes away entirely. The dock already owns the bottom of the
   screen and, on a sold car, the dock says "Vendido" instead of a price and two
   buttons — so a square stamp sitting just above it would be the same word twice
   in 120px of screen. One statement, in the place the eye already goes. */
@media (max-width:768px), (max-height:520px) and (orientation:landscape){
  body:has(.cat-dock) .car-tab-sold{ display:none; }
}

/* ---- the dock, on a car that is gone ------------------------------------
   A price and a "WhatsApp" button on a car nobody can buy is the same lie the
   side CTA had. The bar carries the state instead, and beside it the way back to
   the cars that ARE for sale — which is the only thing left to do from here.

   The bar stays white. It was given a navy ground to echo the stamp, and .mc-bar
   paints --mc-surface over .cat-dock, so the ground never changed and the white
   text landed on white: an invisible word in a bar that otherwise looked right.
   Setting the colour on the wrapper and reading it back off the wrapper is how
   that survived a measurement. The ground is whatever .mc-bar paints, and the
   text is ink. */
.cat-dock__sold{
  flex:1 1 auto; min-width:0;
  display:inline-flex; align-items:center; min-height:var(--mc-tap);
  font-size:var(--t-km); font-weight:700; letter-spacing:-.015em;
  color:var(--mc-ink);
}
.cat-dock__back{ flex:0 0 auto; }

/* ---- and on the photograph itself --------------------------------------
   "cand deschidem imaginea mai mare in coltul imaginii trebuie sa fie scris
   Vendido". In the corner of the IMAGE, not of the screen: the viewer centres
   the photograph and letterboxes around it, so a mark pinned to the overlay
   would float in the black beside a portrait shot. The figure wraps the img and
   shrink-wraps to it, so this corner is always the photograph's corner.
   Top left: the close button is top right and the counter is bottom centre. */
.car-view__fig{
  grid-column:2; justify-self:center; position:relative;
  margin:0; display:block; max-width:100%; line-height:0;
}
/* After the rule above, not inside the phone block further up the file: placed
   there it lost to this one on source order and the figure kept opening an
   implicit second column on a one-column template. */
@media (max-width:768px){ .car-view__fig{ grid-column:1; } }
.car-view__sold{
  position:absolute; left:0; top:0; z-index:1;
  padding:var(--s-2) var(--s-4);
  background:var(--mc-navy); color:var(--mc-on-navy);
  font-size:var(--t-label); font-weight:700; letter-spacing:.02em; line-height:1.4;
  box-shadow:0 0 0 1px rgba(255,255,255,.16);
}

/* ============================================================================
   THE WALL — the marque's colour behind the top of the page
   The client: "pe fundal să avem culoarea ce reprezintă brandul ... de exemplu
   la BMW ... albastru ... animația de culori ce este și pe catalog, doar că
   pentru o singură culoare ... cum se poate face contrast".

   The same stroke as a catalogue row (catalog.css, THE SEQUENCE): the colour
   is clipped from the left and crosses the width in --m-sweep with a 2px nib,
   the marque's mark sits in it at 7% white, and the words arrive once the
   colour has landed.

   Contrast, by placement rather than by effects:
   - Only white goes on the colour. All five marques are 5.46:1 or better
     against white; the year, the one dimmed word, is .84 white (4.6:1 on the
     weakest, Porsche, and it is large text). Small text on it is full white.
   - Nothing that has a colour of its own is ever on it. The wall ends part-way
     down the photograph on a phone, where the price is further down; on a
     desktop it ends in the gap between the price and the spec rows, and the
     price turns white only there.
   - The photograph is in front of the colour, so its light hairline is the
     edge between the two.
   - The focus ring on the colour is white; the blue one would vanish on BMW.
   - A sold car's wall is the grey of its page, as the rest of it is.
   ========================================================================= */
.car--wall{ overflow-x:clip; }   /* the wall is 100vw; the scrollbar is not the page's */

.car{ --wall-lip:calc((100vw - 2 * var(--mc-gutter-m)) * 2 / 3 * .42); }
@media (min-width:768px){ .car{ --wall-lip:calc((100vw - 2 * var(--mc-gutter-d)) * 2 / 3 * .42); } }
@media (min-width:1000px){ .car{ --wall-lip:7.5rem; } }

.car-top{ position:relative; z-index:0; display:flow-root; }
.car-grid{ position:relative; z-index:1; }

.car-wall{
  --brand-now:var(--brand, var(--mc-ink));
  position:absolute; z-index:-1; overflow:hidden;
  top:calc(-1 * var(--s-6));                 /* up to the header: .car's padding-top */
  bottom:calc(-1 * var(--wall-lip));
  left:calc(50% - 50vw); right:calc(50% - 50vw);
  background:var(--brand-now);
}
.car--sold .car-wall{ --brand-now:var(--mc-ink-2); }

.car-wall__mark{
  position:absolute; top:50%; translate:0 -50%;
  right:max(-6rem, calc(50vw - var(--mc-container) / 2 - 6rem));
  width:min(30rem, 70vw); aspect-ratio:1;
  background:rgba(255,255,255,.07);
  -webkit-mask:var(--logo) center/contain no-repeat;
          mask:var(--logo) center/contain no-repeat;
}

.car-wall::after{
  content:""; position:absolute; top:0; bottom:0; right:0; width:2px;
  background:#FFFFFF; opacity:0;
}

.car-top .car-back,
.car-top .car-h{ color:#FFFFFF; }
.car-top .car-h span{ color:rgba(255,255,255,.84); }
.car-top .car-back{ text-decoration-color:rgba(255,255,255,.6); }
.car-top .car-back:hover{ text-decoration-color:#FFFFFF; }
.car-top :focus-visible{ outline-color:#FFFFFF; }

@media (min-width:1000px){
  /* The price is the one thing in the side column on the wall. Its block is
     sized so the wall's edge falls in the middle of the gap under it. */
  .car--wall .car-price{ min-block-size:calc(var(--wall-lip) - var(--s-5) / 2); align-content:start; }
  .car--wall .car-price .mc-price,
  .car--wall .car-price .mc-km{ color:#FFFFFF; }
  /* full white: small text over the 7% mark, where Porsche at .84 fell under 4.5:1 */
  .car--wall .car-price__was{ color:#FFFFFF; }
  .car--wall .car-price__was b{ color:#FFFFFF; }
}

/* ---- the stroke ---------------------------------------------------------
   CSS, not script: it is the first thing on the page, so there is nothing to
   wait for, and without JavaScript it still plays. The finished state is the
   base state; the keyframes only describe the way there. */
@keyframes car-wall-sweep{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes car-wall-nib{ 0%,85%{ opacity:.55; } 100%{ opacity:0; } }
@keyframes car-wall-words{ from{ opacity:0; transform:translateX(-16px); } to{ opacity:1; transform:none; } }

.car-wall{ animation:car-wall-sweep var(--m-sweep) var(--e-inout) both; }
.car-wall::after{ animation:car-wall-nib var(--m-sweep) linear both; }
.car-top .car-back,
.car-top .car-h{ animation:car-wall-words var(--m-move) var(--e-out) both; }
.car-top .car-back{ animation-delay:var(--m-sweep); }
.car-top .car-h{ animation-delay:calc(var(--m-sweep) + 70ms); }
.car-top .car-gone{ color:rgba(255,255,255,.92); border-left-color:rgba(255,255,255,.6); }
.car-top .car-gone{ position:relative; animation:car-wall-words var(--m-move) var(--e-out) calc(var(--m-sweep) + 140ms) both; }
@media (min-width:1000px){
  .car--wall .car-price{ animation:car-wall-words var(--m-move) var(--e-out) calc(var(--m-sweep) + 140ms) both; }
}

@media (prefers-reduced-motion:reduce){
  .car-wall,.car-wall::after,
  .car-top .car-back,.car-top .car-h,.car-top .car-gone,
  .car--wall .car-price{ animation:none; }
}

/* ============================================================================
   THE PHONE GALLERY (2026-10-05) — a strip you swipe, dots like Instagram's,
   no arrows. The strip is built by the script; without it the stage is the
   single photograph it always was.
   ========================================================================= */
@media (max-width:768px){
  .car-stage__nav{ display:none; }
  .car-stage.is-track .car-stage__img{ display:none; }
  .car-track{ position:absolute; inset:0; display:flex; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .car-track::-webkit-scrollbar{ display:none; }
  .car-track__img{ flex:0 0 100%; width:100%; height:100%; object-fit:cover; display:block;
    scroll-snap-align:center; scroll-snap-stop:always; }
  .car-stage.is-track .car-stage__count{ z-index:1; pointer-events:none; }

  .car-dots{ display:flex; justify-content:center; align-items:center; gap:6px; height:22px; margin-top:var(--s-2); }
  .car-dots i{ width:7px; height:7px; border-radius:50%; background:var(--mc-rule);
    transition:background var(--m-quick) var(--e-out), transform var(--m-quick) var(--e-out); }
  .car-dots i.on{ background:var(--mc-blue); }
  .car-dots i.sm{ transform:scale(.6); }
  .car--sold .car-dots i.on{ background:var(--mc-ink); }

  .car-view.is-track:not([hidden]){ display:block; padding:0; }
  .car-view.is-track .car-view__fig, .car-view.is-track .car-view__nav{ display:none; }
  .car-view__track{ position:absolute; inset:0; display:flex; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; overscroll-behavior:contain; scrollbar-width:none; }
  .car-view__track::-webkit-scrollbar{ display:none; }
  .car-view__slide{ flex:0 0 100%; width:100%; height:100%; object-fit:contain; scroll-snap-align:center; scroll-snap-stop:always; }
  .car-view.is-track .car-view__x{ z-index:2; top:calc(var(--s-4) + env(safe-area-inset-top, 0px)); }
  .car-dots--view{ position:absolute; left:0; right:0; z-index:2; bottom:calc(var(--s-8) + env(safe-area-inset-bottom, 0px)); margin:0; }
  .car-dots--view i{ background:rgba(255,255,255,.4); }
  .car-dots--view i.on{ background:#FFFFFF; }
  .car-view.is-track .car-view__count{ z-index:2; }
}
@media (min-width:769px){ .car-dots{ display:none; } }

/* ---- phone pass, 2026-10-05 (two audits at 390/360/320) ------------------- */
/* WhatsApp + Llamar as one balanced row: the second button sat 4px lower and
   the pair used 268 of 358px; on a sold car the two stacked touching. */
.car-act{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.car-act .mc-btn{ flex:1 1 auto; justify-content:center; min-height:var(--mc-tap-pref); }
/* a car that is gone does not sell its warranty, its maintenance or a discount */
.car--sold .car-with, .car--sold .car-price__was{ display:none; }
.car-back{ display:inline-flex; align-items:center; min-height:var(--mc-tap); }
.car-text__p{ white-space:pre-line; }
.car-text__p.is-folded{ display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical; overflow:hidden; }
.car-more{ display:inline-flex; align-items:center; min-height:var(--mc-tap); margin-top:var(--s-2);
  background:none; border:0; padding:0; font:600 var(--t-ui)/1 var(--f-ui); color:var(--mc-blue); cursor:pointer; }
@media (max-width:768px){ .car-sec{ margin-top:var(--s-7); } .car-grid{ row-gap:var(--s-7); } .car-with{ margin-top:var(--s-5); } }
/* full screen: sideways swipes and pinch-zoom only; a vertical drag does not reach the page behind */
.car-view{ touch-action:pan-x pinch-zoom; overscroll-behavior:contain; }
.car-track{ touch-action:pan-x pan-y pinch-zoom; }

/* ---- share, under the two buttons ---------------------------------------- */
.car-share{
  display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%;
  min-height:var(--mc-tap-pref, 48px); margin-top:var(--s-2); padding:0 1rem;
  border:0; border-radius:var(--r-2, 10px); background:transparent; cursor:pointer;
  font:inherit; font-weight:600; color:var(--mc-ink); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:.25em;
}
.car-share:hover{ text-decoration-thickness:2px; }
.car-share:focus-visible{ outline:2px solid var(--mc-blue); outline-offset:2px; }
.car--sold .car-share{ display:none; }

/* ---- other cars, at the end ---------------------------------------------- */
.car-others__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3); flex-wrap:wrap; }
.car-others__head .mc-link{ display:inline-flex; align-items:center; min-height:44px; }
.car-others__rail{
  display:flex; gap:var(--s-4); overflow-x:auto; scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain; scrollbar-width:none; padding:var(--s-2) 0 var(--s-3);
  margin-top:var(--s-3);
}
.car-others__rail::-webkit-scrollbar{ display:none; }
.car-others__rail > *{ flex:0 0 15.5rem; scroll-snap-align:start; }
@media (max-width:768px){
  .car-others__rail{ margin-inline:calc(var(--mc-gutter-m) * -1); padding-inline:var(--mc-gutter-m); scroll-padding-inline:var(--mc-gutter-m); }
  .car-others__rail > *{ flex:0 0 72vw; max-width:19rem; }
}

/* [hidden] must win over the display these set (a dead "Leer más" showed on short texts) */
.car-more[hidden], .car-share[hidden]{ display:none; }

/* a sold car: the figure is what it sold for, said so */
.car-price__sold{ display:block; width:100%; font-size:var(--t-label); font-weight:600; color:var(--mc-ink-3); }

/* Imperfecciones with none: only the message, no stray photograph or counter */
.car-stage.is-empty .car-track, .car-stage.is-empty .car-stage__count,
.is-track.is-empty .car-track, .is-track.is-empty .car-stage__count{ display:none; }

/* narrow phones: specifications stack, so "Mercedes-Benz" is never cut in half */
@media (max-width:400px){
  .car-tech__row{ grid-template-columns:1fr; row-gap:2px; }
}