/* ==========================================================================
   MitiMarkets autos — the skin over "Gallery White & Claret"
   Loaded AFTER core/css/styles.css (core/base.html's extra_css block), so this
   overrides rather than replaces. There is deliberately no second design
   system: the core stylesheet carries documented traps (padding-block not
   padding; overflow-x on root not body; the two-span money markup) and a fork
   would have to carry all of them twice.

   What genuinely differs for cars:
     * LANDSCAPE frames. A car on core's 3:4 portrait canvas renders as a thin
       band marooned in white space.
     * A denser fact bar. Cars are compared on numbers.
     * Graphite for brass. Brass reads jewellery; graphite reads automotive.
   ========================================================================== */

:root {
  /* The one token swap. Claret and the Didone stay -- they are what make this
     read as the same company. */
  --brass: #5A5F66;   /* graphite */
}

/* ---- Landscape media ------------------------------------------------------- */
/* 16:9 on the grid card, 4:3 on the detail stage, matching AUTOS_FRAME_SIZE
   (960x720) so the stored derivative is displayed at its own shape and nothing
   is letterboxed twice. */
.vehicle-card-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
}
.vehicle-card-media .listing-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vehicle-gallery-stage {
  aspect-ratio: 4 / 3;
}

/* ---- Thumbnails run UNDER the stage, horizontally, at EVERY width ---------- */
/* Core stacks them in a 72px vertical rail beside the stage, which suits a
   handbag's four to six photos. A dealer gallery routinely carries twelve --
   measured at 11.7 on average across the first real import, capped at 12 -- and
   twelve stacked thumbs run ~900px against a 4:3 stage barely 450px tall.
   Measured before this rule: the column overhung the stage by 812px, dangling
   most of a screen below the photo it belongs to.

   This is exactly what core already does below 700px (styles.css), applied here
   at all widths rather than only on a phone, because the photo COUNT is what
   drives it and that does not change with the viewport. */
.pdp-gallery {
  grid-template-columns: minmax(0, 1fr);
}
/* The stage MUST be re-placed into column 1 alongside the template change.
   Core sets `.pdp-stage { grid-column: 2 }` for its two-column rail and only
   resets it inside its own <=700px media query. Collapsing the template to one
   column without this leaves the stage pointing at column 2, which grid then
   creates IMPLICITLY -- and the implicit column takes the width, squeezing
   column 1 (now holding the thumbs) to ZERO. The strip keeps its height, so it
   reads as "the thumbnails vanished" rather than as a layout error. */
.pdp-stage,
.pdp-placeholder {
  grid-column: 1;
  grid-row: 1;
}
.pdp-thumbs {
  grid-column: 1;
  grid-row: 2;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  /* Room for the scrollbar the overflow can summon, so it never sits on top of
     the last thumbnail. */
  padding-bottom: .3rem;
}
/* Core's thumbs take their size from the 72px rail this rule just removed, so
   they need an explicit one here -- without it each expands to its image's
   natural size (measured: 482x643 per thumb). LANDSCAPE, matching the cards and
   the stage: core's 3/4 portrait aspect would letterbox a car twice over. */
.pdp-thumb {
  flex: 0 0 84px;
  aspect-ratio: 4 / 3;
}

/* ---- Fact bar -------------------------------------------------------------- */
/* Denser than core's four-item bar: a car carries make, model, trim, miles,
   year, condition and drivetrain, and they are read as a block of numbers. */
.vehicle-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0;
}
.vehicle-facts .fact {
  padding: 1rem 1.1rem;
}
.vehicle-facts .fact strong {
  font-size: 1.05rem;
}

.vehicle-card-facts {
  font-variant-numeric: tabular-nums;
}

/* ---- Stock-image label ----------------------------------------------------- */
/* A quality label, not a legal one: a manufacturer render is a real photo of
   the MODEL but not of this car. Per photo, because a listing carries a mix. */
.photo-note {
  margin: .5rem 0 0;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---- Reward banner detail --------------------------------------------------- */
/* The vehicle banner explains the cascade inline; core's shows the figure
   alone, because its How It Works page is one click away in the header and
   this host's is a different page. */
.reward-banner-detail {
  display: block;
  margin-top: .35rem;
  font-family: var(--sans);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0;
}

/* ---- Detail note ------------------------------------------------------------ */
.vehicle-detail-note {
  margin-top: 1.2rem;
}

/* ---- Search + clear --------------------------------------------------------- */
.clear-search {
  align-self: center;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.clear-search:hover {
  color: var(--accent);
  border-color: var(--accent);
}


/* --- The proof-of-purchase claim ---------------------------------------- */

/* Built from the site's existing form vocabulary rather than a new one:
   .contact-form supplies the uppercase letter-spaced labels and hairline
   inputs, .card the shell, and .cart-final-sale the square claret checkbox.
   What is added here is only layout and the few states a form with file
   uploads needs and the others do not. */

.claim-lede { max-width: 66ch; color: var(--ink-soft); margin-bottom: 1.8rem; }

.claim-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
}
@media (max-width: 820px) { .claim-layout { grid-template-columns: 1fr; } }

/* .contact-form caps itself at 480px for a short support form; a claim has
   three grouped sections and needs the room. */
.claim-form { max-width: none; padding: clamp(1.2rem, 3vw, 1.8rem); }

/* Section headings inside the form. The Didone, so the form reads as part of
   the same house as the listing pages. */
.claim-form h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.05rem;
  margin: 1.6rem 0 .2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.claim-form h3:first-of-type { margin-top: .2rem; padding-top: 0; border-top: 0; }

.claim-help {
  font-size: .78rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: .35rem;
}
.claim-error, .claim-errors {
  font-size: .8rem;
  color: var(--accent);
  margin-top: .35rem;
}
.claim-errors ul { margin: 0; padding-left: 1.1rem; }

/* The file input is the one control with no precedent on the site. Given the
   same hairline treatment as every other field so it does not read as a
   browser default dropped into a designed page. */
.claim-form input[type="file"] {
  width: 100%;
  padding: .7rem .8rem;
  border: 1px dashed var(--line);
  background: var(--ground);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: .9rem;
  cursor: pointer;
}
.claim-form input[type="file"]:hover { border-color: var(--ink-soft); }

/* The OS file button is a rounded grey chip that reads as a foreign object
   against hairline borders and squared corners. Restyled to the site's own
   secondary-button shape -- the file input is the single most important control
   on this page, so it cannot be the one thing that looks unfinished. */
.claim-form input[type="file"]::file-selector-button {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--ink-soft);
  border-radius: 0;
  padding: .5rem .9rem;
  margin-right: .8rem;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.claim-form input[type="file"]::file-selector-button:hover {
  background: var(--ink);
  color: var(--surface);
}

/* Same reasoning for the dropdown: .contact-form gives it the hairline border,
   but the native arrow and rounded corners survive that, so it sat visibly
   apart from the squared text fields above it. The chevron is an inline SVG
   data URI -- no extra request, and it inherits nothing from the UA. */
.claim-form select {
  appearance: none; -webkit-appearance: none;
  border-radius: 0;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23726c66' stroke-width='1.4' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.4rem;
}
.claim-form select:hover { border-color: var(--ink-soft); }

/* The authorisation clause. .cart-final-sale already draws the square claret
   checkbox; this only re-lefts it, since the cart's version is right-aligned
   inside a summary column. */
.claim-consent {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  max-width: none;
  text-align: left;
}
.claim-consent label {
  margin: 0;
  font-size: .84rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-soft);
  line-height: 1.5;
}

.claim-aside { display: flex; flex-direction: column; gap: 1rem; }
.claim-aside .card { padding: 1.1rem 1.25rem; }
.claim-aside h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.claim-aside p { font-size: .87rem; color: var(--ink-soft); margin: 0 0 .6rem; }
.claim-aside p:last-child { margin-bottom: 0; }
.claim-list { margin: 0 0 .8rem; padding-left: 1.1rem; font-size: .87rem; color: var(--ink-soft); }
.claim-list li { margin-bottom: .3rem; }

.claim-next { max-width: 52ch; margin: 0 auto 1rem; color: var(--ink-soft); }

/* The claim prompt on a vehicle page. Understated on purpose: it speaks to the
   small number of visitors who already bought, and must not compete with the
   refer and ask cards, which speak to everyone else. */
.claim-prompt { margin-top: 1.4rem; font-size: 1.02rem; }
.claim-prompt a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }