/*
 * autowiper.com.ua — site.css
 * ---------------------------------------------------------------------------
 * ONE hand-maintained stylesheet for the PHP static-site generator. There is
 * no build step: this file is served as-is from /assets/site.css.
 *
 * PROVENANCE. Every value here was reverse-engineered by measuring
 * getComputedStyle() on the live legacy PrestaShop site — it is NOT the legacy
 * stylesheet reformatted. The numbers ARE the spec. Changing one is a visual
 * regression, so do not "tidy", round, or normalise them.
 *
 * FIDELITY TARGET
 *   >= 1020px : pixel-identical to the legacy 980px fixed grid
 *   768-1019  : fluid single column, sidebar drops
 *   <  768    : mobile, hamburger nav
 *
 * ASSEMBLED FROM the Astro prototype under web/src/. Each section is labelled
 * with the file it came from, so any rule can be traced back. Declaration
 * order inside each block is preserved verbatim — the cascade depends on it.
 * Astro scoped these blocks by hashing; here they share one global namespace,
 * so see migration/css-renames.csv for the (one) selector that had to change.
 *
 * ORDER: tokens -> base/reset -> chrome -> shared components -> page-specific.
 *
 * EXCLUDED: web/src/pages/search.astro (133 lines) — search is dropped from
 * the rebuild entirely (REBUILD-SPEC §13).
 */

/* ============================================================================
   1. TOKENS   source: web/src/styles/tokens.css
   ============================================================================ */

/*
 * Design tokens, reverse-engineered from the live PrestaShop theme by measuring
 * computed styles rather than copying its CSS. Every value here was read off
 * https://autowiper.com.ua at a 1280px viewport.
 */

@font-face {
  font-family: 'OpenSans';
  src: url('/assets/fonts/opensansregular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans';
  src: url('/assets/fonts/opensanssemibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans';
  src: url('/assets/fonts/opensansbold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans';
  src: url('/assets/fonts/opensansitalic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --- layout ------------------------------------------------------------ */
  /* The legacy theme is a fixed 980px grid. We keep that as a max-width so the
     desktop rendering is identical while narrow viewports can reflow. */
  --page-width: 980px;
  --gutter: 20px;

  /* --- type -------------------------------------------------------------- */
  --font-body: Arial, Verdana, sans-serif;
  --font-display: 'OpenSans', Arial, Verdana, sans-serif;
  --text-base: 11px;
  --leading-base: 14px;

  /* --- colour ------------------------------------------------------------ */
  /* The page background is a vertical green-to-white gradient supplied as a
     1px-wide repeat-x JPEG in the original. Reproduced as a real gradient so
     it stays sharp at any height and costs no request. */
  --c-ink: #222;
  --c-ink-strong: #333129;
  --c-ink-dark: #0d1a0d;
  --c-heading: #333129;
  --c-phone: #333;

  --c-green-900: #0d1a0d;
  --c-green-700: #2d592d;
  --c-green-600: #3d993d;
  --c-green-200: #9dbd9d;
  --c-green-100: #c2f2c2;
  --c-green-050: #ccf4cc;

  --c-rule: #bfbfbf;
  --c-rule-green: #9dbd9d;
  --c-alert: #f00;
  --c-surface: #fff;

  /* bg.jpg is a 10x600 strip, repeat-x, anchored top: a linear ramp from
     #c2f2c2 to #ffffff over its first 480px, then flat white. Sampled pixel by
     pixel and restated as a real gradient — no request, no banding. */
  --bg-top: #c2f2c2;
  --bg-bottom: #ffffff;
  --bg-ramp-end: 480px;

  /* --- effects ----------------------------------------------------------- */
  --radius: 3px;
  --shadow-inset: inset 0 1px 1px rgba(38, 64, 38, 0.4);
  --shadow-inset-hairline: inset 0 1px 1px rgba(38, 64, 38, 0.4), inset 0 0 1px #e1f0e1;
  --btn-sheen: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));

  /* --- breakpoints (documented; media queries inline them) ---------------- */
  /* >= 1020px : desktop, pixel-identical to the legacy theme
     768-1019  : fluid single column, sidebar drops
     < 768     : mobile, hamburger nav */
}

/* ============================================================================
   2. BASE / RESET   source: web/src/styles/base.css
   ============================================================================ */

/*
 * Base layer: reset, page frame, typography, shared primitives.
 * Written from scratch against the measured tokens — this is not the legacy
 * PrestaShop CSS reformatted.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background-color: var(--bg-bottom);
  background-image: linear-gradient(
    to bottom,
    var(--bg-top) 0,
    var(--bg-bottom) var(--bg-ramp-end)
  );
  background-repeat: no-repeat;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font: 400 var(--text-base) / var(--leading-base) var(--font-body);
  color: var(--c-ink);
}

img {
  border: 0;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--c-green-700);
  cursor: pointer;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* --- page frame ---------------------------------------------------------- */

.page {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
}

@media (max-width: 1019px) {
  .page {
    max-width: none;
    padding-inline: var(--gutter);
  }
}

/* --- headings ------------------------------------------------------------ */

h1,
.h1 {
  /* Catalogue pages sit 10px above their scene card; the homepage editorial
     h1 overrides this to 25px. */
  margin: 20px auto 10px;
  font: 400 31px / 1.3em var(--font-display);
  font-weight: 700;
  color: var(--c-heading);
  text-align: center;
}

h2,
.h2 {
  margin: 0;
  padding: 27px 0 10px;
  font: italic 700 18px / 28px var(--font-display);
  color: var(--c-heading);
  text-align: center;
}

h3 {
  margin: 0;
  font: 700 14px / 20px var(--font-display);
  color: var(--c-heading);
}

/* --- form primitives ----------------------------------------------------- */

.field {
  height: 25px;
  padding: 0 5px;
  border: 0;
  border-radius: var(--radius);
  background: var(--c-surface);
  box-shadow: var(--shadow-inset);
}

/* The green sheen button: flat green with a top-light gradient over it. */
.btn {
  display: inline-block;
  padding: 5px 7px;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--c-green-100);
  text-align: center;
  text-shadow: 0 1px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  background-color: var(--c-green-600);
  background-image: var(--btn-sheen);
  cursor: pointer;
}

.btn:disabled,
.btn[disabled] {
  color: #e6e6e6;
  background-color: #b3b3b3;
  cursor: default;
}

.btn--lg {
  width: 300px;
  height: 45px;
  font-size: 16px;
  line-height: 16px;
}

/* --- utilities ----------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rte p {
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 18px;
}

.rte h2 {
  text-align: left;
  padding-top: 18px;
}

.rte ul {
  margin: 0 0 12px 18px;
  list-style: disc;
  font-size: 12px;
  line-height: 18px;
}

/* ============================================================================
   3. SITE CHROME   header, footer, breadcrumb
   ============================================================================ */

/* --- SiteHeader   source: web/src/components/SiteHeader.astro ---------------- */

.hd {
  position: relative;
}

/* --- top row ----------------------------------------------------------- */
/* Legacy uses float + absolute positioning; grid gets the same geometry
   (logo left at 24px, search box top-right, phones under the logo, cart
   right) without the clearfix scaffolding. */
.hd__top {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  padding-top: 24px;
}

.hd__logo {
  grid-column: 1;
  grid-row: 1;
  display: block;
}
.hd__logo img {
  display: block;
}

/* `.hd__search` used to occupy column 2 / row 1 here. The form was removed from
   partials/header.php (D52) — /search is not a page this build writes, so every
   use of it 404d — and its rules go with it rather than sitting in the
   stylesheet matching nothing. The cell is simply empty now; row 1's height was
   always the logo's 47px, not this control's 25px, so nothing moved. */

.hd__phones {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 40px;
  /* Legacy gives these a 60px line-height band under the logo; matching the
     band height rather than the line-height keeps the text metrics right. */
  height: 60px;
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: normal;
}
.hd__phones a {
  color: var(--c-ink);
  text-decoration: none;
}
.hd__phones a:hover {
  text-decoration: underline;
}
.hd__phones strong {
  color: var(--c-phone);
  font-weight: 700;
}

.hd__cart {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: center;
}
.hd__cart a {
  display: block;
  padding: 15px 9px 10px 43px;
  border-radius: var(--radius);
  background: url('/assets/img/cart.gif') no-repeat 10px 9px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: #0d131a;
  text-decoration: none;
}

/* --- language switcher ------------------------------------------------- */
/* Shares the top row's second column with the cart — the cart is pinned right,
   this is pinned left, and at 980px the column is 418px against their combined
   ~320px, so they never meet. The legacy header has no switcher of its own to
   copy, so it takes the region the legacy header does keep for controls rather
   than a new one. Deliberately NOT styled as a menu link: the owner could not
   tell it from the other six, so it is a bordered control carrying its language
   code as a badge. */
.hd__lang {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 5px;
  border: 1px solid var(--c-rule-green);
  border-radius: var(--radius);
  background: var(--c-surface);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
  color: var(--c-green-700);
  text-decoration: none;
  white-space: nowrap;
}
.hd__lang:hover {
  border-color: var(--c-green-600);
  background: #f4fbf4;
}
.hd__lang-tag {
  padding: 2px 6px;
  border-radius: var(--radius);
  background: var(--c-green-600);
  font-size: 11px;
  line-height: 12px;
  color: var(--c-green-100);
  letter-spacing: 0.5px;
}

/* --- nav --------------------------------------------------------------- */
.hd__nav {
  border-top: 1px solid var(--c-rule-green);
  border-bottom: 1px solid var(--c-rule-green);
}

.hd__menu {
  display: flex;
  gap: 6px;
  margin: 10px 0;
}
.hd__menu a {
  display: block;
  padding: 6px 16px;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  line-height: 14px;
  color: var(--c-green-900);
  text-decoration: none;
  white-space: nowrap;
}
/* Trading a pixel of padding for the border keeps the item the same size
   hovered as not — same trick the legacy theme uses. */
.hd__menu a:hover,
.hd__menu a[aria-current='page'] {
  padding: 5px 15px;
  border: 1px solid rgba(13, 26, 13, 0.25);
  background-color: var(--c-surface);
}

.hd__burger {
  display: none;
}

/* --- notice ------------------------------------------------------------ */
.hd__notice {
  margin: 0 0 30px;
  padding: 15px 0;
  border-bottom: 1px solid var(--c-rule-green);
  font-size: 18px;
  line-height: 30px;
  color: var(--c-alert);
  text-align: center;
  text-shadow: 1px 0 rgba(0, 0, 0, 0.5);
}

/* --- responsive -------------------------------------------------------- */
@media (max-width: 1019px) {
  .hd__menu {
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .hd__top {
    grid-template-columns: 1fr;
    padding-top: 16px;
  }
  .hd__logo,
  .hd__phones,
  .hd__cart,
  .hd__lang {
    grid-column: 1;
    justify-self: stretch;
  }
  .hd__logo {
    grid-row: 1;
  }
  .hd__phones {
    grid-row: 2;
    gap: 20px;
    padding: 12px 0;
    font-size: 16px;
  }
  .hd__cart {
    grid-row: 3;
    justify-self: start;
  }
  /* One row of its own once the top row is a single column — it cannot share
     row 3 with the cart there, and the burger menu is below it either way. */
  .hd__lang {
    grid-row: 4;
    justify-self: start;
    margin-top: 4px;
  }

  .hd__burger {
    display: block;
    width: 44px;
    height: 38px;
    margin: 4px 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .hd__burger span:first-child,
  .hd__burger span:first-child::before,
  .hd__burger span:first-child::after {
    display: block;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--c-green-900);
    content: '';
  }
  .hd__burger span:first-child::before {
    transform: translateY(-8px);
  }
  .hd__burger span:first-child::after {
    transform: translateY(5px);
  }

  .hd__menu {
    display: none;
    flex-direction: column;
    gap: 0;
  }
  .hd__nav[data-open] .hd__menu {
    display: flex;
  }
  .hd__menu a {
    padding: 10px 4px;
    border-bottom: 1px solid var(--c-rule-green);
    border-radius: 0;
  }

  .hd__notice {
    font-size: 15px;
    line-height: 22px;
  }
}

/* --- SiteFooter   source: web/src/components/SiteFooter.astro ---------------- */

.ft {
  margin-top: 24px;
  padding-bottom: 30px;
  border-top: 1px solid var(--c-rule);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-green-900);
}

/* Legacy floats four 175px columns; a fixed-track grid gives the same result
   and keeps the last row from collapsing when a column is short. */
.ft__cols,
.ft__brands {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 0 20px;
}

.ft__brands {
  /* Live floats this band as four `width: 22%` columns inside a wrapper that
     carries `style="margin-top: 20px"` — measured on autowiper.com.ua, the two
     bands are 20px apart, not flush. `auto-fill` gave five 180px tracks here,
     which left the eight brand columns wrapping 5 + 3 with two dead cells; four
     equal tracks are live's own column count AND divide the eight exactly, so
     the full width is used and no cell is empty. */
  margin-top: 20px;
  grid-template-columns: repeat(4, 1fr);
}

.ft__title {
  margin-bottom: 4px;
  padding: 0 0 0 5px;
  border-bottom: 1px solid var(--c-rule);
  text-transform: uppercase;
  font-weight: 400;
}

.ft__col ul {
  padding-left: 2%;
}

.ft__col li {
  padding-bottom: 5px;
}

.ft__col a {
  font-size: 13px;
  color: var(--c-green-700);
  text-decoration: underline;
}

.ft__col a:hover {
  text-decoration: none;
}

@media (max-width: 767px) {
  .ft__cols,
  .ft__brands {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* --- Breadcrumb   source: web/src/components/Breadcrumb.astro ---------------- */

.crumbs {
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 14px;
  color: var(--c-ink-strong);
}
.crumbs a {
  color: var(--c-ink-strong);
  text-decoration: none;
}
.crumbs a:hover {
  text-decoration: underline;
}
.crumbs__sep {
  margin: 0 3px 0 5px;
}

/* ============================================================================
   4. SHARED COMPONENTS   reused across two or more page types
   ============================================================================ */

/* --- SceneCard    source: web/src/components/SceneCard.astro ----------------- */

.scene {
  /* Live's `.content_scene_cat` measures 979 x 182.1 at a 1280px viewport on
     every catalogue page — make, model and generation all print the same
     `category_default` derivative at 280 x 170 inside it. The port sized the box
     to whatever the migrated original happened to be, so a make whose logo is
     only 96 x 72 (c/106.jpg, Skoda) collapsed the card to 82.5px tall. Pinning
     the SLOT rather than the image keeps the box at live's height without
     upscaling a 96px logo to 280px of mush: the art sits at its natural size,
     centred, exactly as PrestaShop's padded canvas renders it. */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 182px;
  margin-bottom: 20px;
  padding: 5px 20px 0;
  border: 1px solid #ccc;
  border-radius: var(--radius);
  background: var(--c-surface);
  box-shadow: 0 1px 1px #e2e2e2;
  text-align: center;
}

.scene img {
  max-width: 100%;
  /* live's category_default slot is 280 x 170 and nothing in it is ever taller
     than 170; `object-fit` is what keeps the cap from squashing a 300 x 200
     generation photo, since the intrinsic width still comes from the attribute. */
  max-height: 170px;
  height: auto;
  object-fit: contain;
}

/* --- CarPicker    source: web/src/components/CarPicker.astro ----------------- */

.picker {
  margin-bottom: 40px;
  padding: 15px 0;
  border-radius: var(--radius);
  background: var(--c-surface);
  box-shadow: var(--shadow-inset-hairline);
  text-align: center;
  color: var(--c-ink-strong);
}

.picker .h2 {
  font-size: 24px;
}

.picker__body {
  display: flex;
  /* Legacy floats both columns, so they share a top edge — the form's own
     70px offset does the positioning, not vertical centring. */
  align-items: flex-start;
  justify-content: space-between;
  width: 99%;
  margin: 0 auto 15px;
}

.picker__form {
  /* Matches the legacy `margin: 70px 0 0 70px` on the form column. */
  margin: 70px 0 0 70px;
  font-size: 13px;
  color: #0d131a;
}

.picker__row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-bottom: 10px;
  text-align: right;
}

.picker__row label {
  font-weight: 700;
  font-size: 14px;
}

/* 300 x 30 at 18px is the live picker, measured on autowiper.com.ua: all three
   selects 300.00 x 30.00 with their left edges on the same pixel. That part was
   already right here — the widths never moved, before or after a make was
   picked, at 1280, at 1024 or at 375.

   What DID move is the widget itself. Chrome draws a DISABLED <select> with a
   half-size arrow, a flat square outline and none of the rounding the enabled
   control gets, so until a make was chosen the model and year controls read as
   a different, smaller thing than the make control sitting right above them —
   the "size is wrong" the owner reported. It is a state difference, not a
   layout difference, so no amount of width pinning fixes it.

   Taking the native appearance off ALL THREE is what fixes it: one box, one
   border, one arrow, drawn identically in every state and in every engine
   (Safari and Firefox each round and pad the native control differently again).
   :disabled below then differs ONLY in colour, and nothing about the row can
   reflow when the options arrive. */
.picker__row select {
  box-sizing: border-box;
  width: 300px;
  height: 30px;
  padding: 0 28px 0 6px;
  border: 1px solid #767676;   /* Chrome's own menulist border colour */
  border-radius: 4px;
  background-color: #fff;
  /* The chevron the native control drew for us. Inlined, so it costs no
     request and cannot go missing. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 10px 6px;
  font-family: inherit;
  font-size: 18px;
  color: #0d131a;
  -webkit-appearance: none;
  appearance: none;
}

.picker__row--submit {
  justify-content: flex-end;
}

/* A disabled select is the picker's "not yet" state — model until a make is
   chosen, year until a model is. picker.js puts "Сначала выберите марку" /
   "…модель" in it as the visible option, so the control says what it wants
   rather than sitting there empty; this is the colour that goes with it.
   `opacity: 1` because iOS Safari otherwise fades disabled controls to half,
   which would put the geometry back in question. */
.picker__row select:disabled {
  background-color: #eef1f4;
  color: #6b7785;
  cursor: not-allowed;
  opacity: 1;
}

/* <noscript> only: the cascade needs JS, so the visitor is pointed at the make
   grid further down this same page, which is plain links and always works. */
.picker__nojs {
  margin: 10px 0 0;
  text-align: right;
  font-size: 13px;
  color: #6b7785;
}

.picker__art {
  width: 450px;
  flex: none;
}

.picker__art img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 1019px) {
  .picker__form {
    margin: 30px 0 0 20px;
  }
  .picker__art {
    width: 38%;
  }
}

@media (max-width: 767px) {
  .picker__body {
    flex-direction: column;
  }
  .picker__form {
    width: 100%;
    margin: 10px 0 0;
  }
  .picker__row {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .picker__row select,
  .picker .btn--lg {
    width: 100%;
  }
  /* The illustration is decoration; it costs a lot of vertical space. */
  .picker__art {
    display: none;
  }
}

/* --- TileGrid     source: web/src/components/TileGrid.astro ------------------ */

.tiles {
  margin-bottom: 22px;
  padding: 20px 0 20px 50px;
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-ink-strong);
}

.tiles .h2 {
  font-size: 18px;
}

/* 100px tiles with a 5px margin all round — the legacy float grid. */
.tiles__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  gap: 10px;
  /* Legacy gives each tile a 5px margin on all sides; as a grid that is a
     10px gap plus 5px of padding around the whole block. */
  padding: 5px;
  text-align: center;
}

.tiles__item {
  width: 100px;
  /* Legacy tiles are a fixed 130px so two-line make names ("Alfa Romeo",
     "Great Wall") do not shunt the row below them. */
  min-height: 130px;
}

.tiles__img {
  display: block;
  height: 104px;
}
.tiles__img img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.tiles__label {
  display: block;
  font-size: 11px;
  line-height: 14px;
  color: #333;
  text-decoration: none;
}
.tiles__label:hover {
  text-decoration: underline;
}

/* Generations: the catalogue ships a 121px car photo per year range, so the
   tile carries the picture and states the years plainly under it. */
.tiles[data-variant='wide'] .tiles__list {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.tiles[data-variant='wide'] .tiles__item {
  width: auto;
  min-height: 0;
  border: 1px solid #e3ece3;
  border-radius: var(--radius);
  overflow: hidden;
  transition: none;
}
.tiles[data-variant='wide'] .tiles__item:hover {
  border-color: var(--c-green-200);
  background: #f4fbf4;
}
.tiles[data-variant='wide'] .tiles__img {
  height: auto;
  padding: 8px 8px 0;
}
.tiles[data-variant='wide'] .tiles__img img {
  width: 121px;
  height: 121px;
  object-fit: contain;
}
.tiles[data-variant='wide'] .tiles__label {
  padding: 8px 6px 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  color: var(--c-green-700);
}

/* No artwork available: label-only buttons. */
.tiles[data-variant='text'] .tiles__list {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.tiles[data-variant='text'] .tiles__item {
  width: auto;
  min-height: 0;
}
.tiles[data-variant='text'] .tiles__label {
  padding: 12px 8px;
  border: 1px solid #e3ece3;
  border-radius: var(--radius);
  font-size: 15px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--c-green-700);
}
.tiles[data-variant='text'] .tiles__label:hover {
  background: #f4fbf4;
  text-decoration: none;
}

@media (max-width: 767px) {
  .tiles {
    padding: 16px 12px;
  }
  .tiles__list {
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    justify-items: center;
  }
  .tiles__item {
    width: 100%;
    max-width: 100px;
  }
}

/* The make page's model list — `ul.inline_list.carmodel` on live, and NOT the
   100px logo grid the port reused for it. Every number below was read off
   https://autowiper.com.ua/skoda/ at a 1280px viewport, where the content column
   is 979px:
     card        305.5 x 162 border-box, step 326 across / 177 down
                 => three 31% floats, 20.5px apart, 15px row gap
     card chrome 1px solid #ccc on #f3fdf4, hover #fcfffc + 0 0 1em #707070
     a.wrap      padding-top 10px
     .cat_name   Arial bold 18px / 25.2px #333, margin-bottom 5px
     .cat_desc   Arial 14px / 19.6px #333, padding-bottom 14px
     .cat_name_desc  float left, width 57%, margin-left 3%
     .img        float right, width 40% (121.4px of art)
   Declared after the shared @media block on purpose: that block re-pads `.tiles`
   at 767px and would otherwise win over the panel reset below. */
.tiles[data-variant='card'] {
  /* Live has no white panel behind these cards; the bordered tiles ARE the
     surface, which is what the owner meant by the tiles "losing the rectangle". */
  padding: 0;
  background: none;
}
.tiles[data-variant='card'] .tiles__list {
  grid-template-columns: repeat(3, 1fr);
  gap: 15px 20px;
  padding: 0 10px;
  text-align: left;
}
.tiles[data-variant='card'] .tiles__item {
  width: auto;
  min-height: 162px;
  border: 1px solid #ccc;
  border-radius: 0;
  background: #f3fdf4;
  transition: background-color 0.2s, box-shadow 0.2s;
}
.tiles[data-variant='card'] .tiles__item:hover {
  background: #fcfffc;
  box-shadow: 0 0 1em #707070;
}

.tiles__card {
  display: block;
  overflow: hidden; /* contains the two floats, as `a.wrap` does on live */
  padding: 10px 0 5px;
  color: inherit;
  text-decoration: none;
}

.tiles__text {
  display: block;
  float: left;
  width: 57%;
  margin-left: 3%;
}

.tiles__name {
  display: block;
  margin-bottom: 5px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: #333;
}

.tiles__desc {
  display: block;
  padding-bottom: 14px;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
}

.tiles__art {
  display: block;
  float: right;
  width: 40%;
}
.tiles__art img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 991px) {
  .tiles[data-variant='card'] .tiles__desc {
    padding-bottom: 4px;
    font-size: 12px;
  }
}

@media (max-width: 767px) {
  /* Live drops to one full-width card per row below 767px. */
  .tiles[data-variant='card'] {
    padding: 0;
  }
  .tiles[data-variant='card'] .tiles__list {
    grid-template-columns: 1fr;
    padding: 0;
    justify-items: stretch;
  }
  .tiles[data-variant='card'] .tiles__item {
    width: auto;
    max-width: none;
    min-height: 0;
  }
}

/* --- ProductGrid  source: web/src/components/ProductGrid.astro --------------- */

/* Legacy floats 317px tiles three-up with a 10px gutter. Grid reproduces the
   same track width at 980px and reflows on its own below that. */
.pg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px 10px;
  margin: 0;
  padding: 0;
}

.pg__item {
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
  border-radius: var(--radius);
  background: var(--c-surface);
}

.pg__name {
  padding: 13px 15px 9px;
  font: 700 15px / 14px var(--font-body);
}
.pg__name a {
  color: #000;
  text-decoration: none;
}
.pg__name a:hover {
  text-decoration: underline;
}

.pg__media {
  margin: 0 15px;
  text-align: center;
}
.pg__media img {
  width: 285px;
  max-width: 100%;
  height: auto;
}

/* Live's `#product_list .features` is a plain block <ul> whose <li>s FLOAT and
   size to their content — `margin: 13px 13px 8px`, `font: 14px/18px`, bold
   <span> label. The port turned it into a flex row of `width: 50%` cells, and
   at a 292px inner width that is 144px a cell, which is 12px short of the
   156.4px «Размеры: 600 и 450 мм» measures on live — so the trailing "мм"
   dropped to a line of its own on every single card. Shrink-to-fit is what
   keeps a spec line whole, and it is what live does. */
.pg__features {
  display: block;
  overflow: auto; /* contains the floats, as live's `overflow: auto` does */
  margin: 13px 13px 8px;
  padding: 0;
  font-size: 14px;
  line-height: 18px;
}
.pg__features li {
  float: left;
  width: auto;
  /* Live separates neighbouring floats with the leading space inside each <li>;
     a real gutter is steadier and costs the same 10px. */
  padding-right: 10px;
}
.pg__features span {
  /* live: `#product_list .features span { font-weight: bold }`, inheriting the
     body colour. The Astro source had it grey and unbolded — the two disagree,
     and live is the reference. */
  font-weight: 700;
  color: inherit;
}

.pg__buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  /* 12px above and below a 24px control gives the legacy 48px band. */
  padding: 12px 14px;
  background: #f2f2f2;
}

/* Price and stock share one right-aligned line, as in the legacy tile —
   not stacked. */
.pg__price {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  /* Live floats this block right and lets it take its natural width. As a flex
     item it was shrinking instead, squeezing «1 085 грн» from 79px to 67px and
     breaking the price over two lines — which is what made the grey band 64px
     tall against live's 48px. */
  flex: 0 0 auto;
  white-space: nowrap;
  text-align: right;
}
.pg__amount {
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  color: #900;
}
.pg__stock {
  font-size: 11px;
  color: #488c40;
}
.pg__stock[data-out] {
  color: #900;
}

/* Live's tile carries exactly ONE control, 90.6 x 24 beside the price, and the
   grey band is 48px because of it. Ours carries two (D48): "Подробнее", which
   ships visible and works with no JavaScript, and "В корзину", which cart.js
   un-hides. Three items do not fit on one 290px line — measured, they want
   325.5px — so they wrapped and the band grew to 80px.
   The band is single-row again because the two controls are never shown at
   once: once the cart button is live, it IS the control, and the product page
   is still one click away from the tile's title and photo, exactly as on the
   legacy tile. With JavaScript off `.pg__add` keeps its `hidden` attribute and
   "Подробнее" stays — and a browser without `:has()` support simply shows both
   and wraps, which is where this started. */
.pg__buy:has(.pg__add:not([hidden])) .pg__cta {
  display: none;
}

.pg__cta,
.pg__add {
  padding: 5px 12px;
  font-family: var(--font-display);
  line-height: 14px;
  white-space: nowrap;
}

.pg__desc {
  padding: 7px 13px;
  font-size: 14px;
  line-height: 18px;
  color: var(--c-ink-strong);
}
.pg__desc ul {
  margin-left: 20px;
  list-style: disc;
}

@media (max-width: 900px) {
  .pg {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .pg {
    grid-template-columns: 1fr;
  }
}

/* --- Prose        source: web/src/components/Prose.astro --------------------- */

/* Legacy body copy is OpenSans 14/20, not the Arial the rest of the chrome
   uses. Matching it is most of why the text blocks line up. */
.prose {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 20px;
  color: var(--c-ink-strong);
}

.prose h2 {
  padding: 0 0 10px;
  font-size: 20px;
  line-height: 25px;
}

.prose h3 {
  padding: 14px 0 6px;
  font-size: 16px;
  font-family: var(--font-display);
}

/* `font-size`/`line-height: inherit` are LOAD-BEARING, not tidying.
   Articles and static pages carry BOTH classes — `<div class="rte prose">` —
   and `.rte p` above sets 12px/18px. `.rte p` and `.prose p` have identical
   specificity (0,1,1), so before this rule declared a size the 12px simply won
   on source order and every article and contact-page paragraph rendered at
   12px inside a 14px container. That is the "font is too small" the owner
   reported (items 1 and 2).

   MEASURED at 1280px on https://autowiper.com.ua/content/istorija-kompanii-bosch
   and .../kontakty — live renders BOTH at 14px/20px, from exactly one rule,
   `#page .rte { font-size:14px; line-height:20px }` in global.css. Live styles
   a static info page identically to an article, so the two keep sharing `.prose`.

   `inherit` rather than a literal 14px so the narrow-screen step-down below
   (`.home__intro`/`.home__editorial` -> 12px under 768px, which live does with
   `@media (max-width:767px) #page .rte { font-size:12px }`) still reaches the
   paragraphs. A hard-coded 14px here would silently break that.

   margin-bottom 20px, was 12px: live has a site-wide `p { padding-bottom:20px }`
   (global.css:138), measured as a 20px gap on articles, contacts AND the
   homepage intro — where ours was also 12px. */
.prose p {
  margin-bottom: 20px;
  font-size: inherit;
  line-height: inherit;
}

/* Same collision as `.prose p`: `.rte ul` sets 12px/18px. This rule already
   declared `inherit` and already won on source order — kept explicit. */
.prose ul {
  margin: 0 0 12px 20px;
  list-style: disc;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.prose li {
  margin-bottom: 2px;
}

.prose__figure {
  margin: 0 0 16px;
  text-align: center;
}
.prose__figure img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.prose__figure figcaption {
  margin-top: 6px;
  font-size: 12px;
  color: #6b7d6b;
}

.prose__scroll {
  overflow-x: auto;
  margin-bottom: 12px;
}

.prose table {
  border-collapse: collapse;
  width: 100%;
}

.prose td {
  padding: 6px 10px;
  border: 1px solid #dbe6db;
}

/* --- BrandPage    source: web/src/components/BrandPage.astro ----------------- */

.brand__tagline {
  margin: -12px 0 22px;
  font-family: var(--font-display);
  font-size: 15px;
  font-style: italic;
  color: var(--c-green-700);
  text-align: center;
}

.brand__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 40px;
  margin-bottom: 26px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--c-surface);
}
.brand__logos img {
  max-height: 60px;
  width: auto;
}

.brand__series ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 26px;
}
.brand__series a {
  display: block;
  padding: 14px 16px;
  border: 1px solid #e3ece3;
  border-radius: var(--radius);
  background: var(--c-surface);
  text-decoration: none;
}
.brand__series a:hover {
  border-color: var(--c-green-200);
  background: #f4fbf4;
}
.brand__series strong {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--c-green-900);
}
.brand__series span {
  font-size: 12px;
  color: #6b7d6b;
}

.brand__copy {
  margin-bottom: 26px;
  font-size: 14px;
  line-height: 19.6px;
  color: var(--c-ink-strong);
}
.brand__copy h2 {
  padding: 0 0 10px;
  font-size: 20px;
  text-align: left;
}
.brand__copy p {
  margin-bottom: 12px;
}

.brand__codegroup {
  margin-bottom: 20px;
}
.brand__codelead {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-ink-strong);
}
.brand__codes ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.brand__codes a,
.brand__codes span {
  display: block;
  padding: 4px 9px;
  border: 1px solid #e3ece3;
  border-radius: var(--radius);
  background: var(--c-surface);
  font-size: 12px;
  color: var(--c-green-700);
  text-decoration: none;
}
.brand__codes span {
  color: #8a958a;
}
.brand__codes a:hover {
  border-color: var(--c-green-200);
  background: #f4fbf4;
}
.brand__more {
  margin-top: 6px;
  font-size: 11px;
  color: #7d8a7d;
}

/* --- ContactForm  source: web/src/components/ContactForm.astro --------------- */

.cf {
  max-width: 520px;
  margin: 26px auto 0;
  padding-top: 20px;
  border-top: 1px solid #e3ece3;
}

.cf .h2 {
  padding-top: 0;
  text-align: left;
}

.cf__row {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.cf__row label {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-ink-strong);
}

.cf__row--area {
  align-items: start;
}

.cf textarea.field {
  height: auto;
  padding: 6px;
  resize: vertical;
}

.cf__row--submit {
  grid-template-columns: 130px 1fr;
}
.cf__row--submit .btn {
  justify-self: start;
  padding: 8px 22px;
  grid-column: 2;
}

.cf__trap {
  position: absolute;
  left: -9999px;
}

@media (max-width: 560px) {
  .cf__row,
  .cf__row--submit {
    grid-template-columns: 1fr;
  }
  .cf__row--submit .btn {
    grid-column: 1;
  }
}

/* --- Outcome      source: web/src/components/Outcome.astro ------------------- */

.oc {
  max-width: 620px;
  margin: 40px auto 60px;
  padding: 40px 40px 34px;
  border-radius: var(--radius);
  background: var(--c-surface);
  box-shadow: var(--shadow-inset-hairline);
  text-align: center;
}

.oc__mark {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 62px;
  color: #fff;
}
.oc[data-tone='ok'] .oc__mark {
  background: var(--c-green-600);
}
.oc[data-tone='error'] .oc__mark {
  background: #b03030;
}

.oc__head {
  margin: 0 0 12px;
  font-size: 26px;
}

.oc__msg {
  margin-bottom: 22px;
  font-size: 15px;
  line-height: 22px;
  color: var(--c-ink-strong);
}

.oc__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.oc__btn {
  padding: 9px 24px;
}
.oc__link {
  font-size: 14px;
  color: var(--c-green-700);
}

/* ============================================================================
   5. PAGE-SPECIFIC
   ============================================================================ */

/* --- Homepage    source: web/src/pages/index.astro --------------------------- */

/* RENAMED: this block styled a bare `h1`, which Astro scoped to the
   homepage. Merged into one global sheet it would have overridden the
   `h1, .h1` rule in section 2 on EVERY page, so it is now `.home__h1`.
   The homepage template must put class="home__h1" on its <h1>.
   See migration/css-renames.csv. */
/* The editorial h1 is narrower and tighter than the catalogue one: 82% of
   the column at a 28px line-height. */
.home__h1 {
  width: 82%;
  margin: 0 auto 25px;
  line-height: 28px;
}

/* .rte's own 20px plus the editorial block's 2em. */
.home__intro {
  margin-bottom: 48px;
}

.home__editorial {
  margin-top: 22px;
}

@media (max-width: 767px) {
  .home__h1 {
    width: 100%;
    font-size: 24px;
    line-height: 30px;
  }

  /* HOMEPAGE BODY TEXT — 12px (T36 / Q9, owner decision D61).
     MEASURED, not assumed. The live cascade for the two homepage `.rte`
     wrappers is exactly two rules, both in themes/default/css/global.css:

       #page .rte                                { font-size: 14px; line-height: 20px }
       @media screen and (max-width: 767px)
         #page .rte                              { font-size: 12px }

     So live is 14/20 on desktop and 12/20 below 768px — the line-height is
     never overridden. The port's `.prose` was already 14/20 and therefore
     already matched live on desktop; what it was missing is this narrow-screen
     step down, which is where the 12px the decision asks for actually lives.
     Scoped to the two homepage wrappers so `.prose` on articles and static
     pages is untouched. See QUESTIONS.md for the desktop half of this. */
  .home__intro,
  .home__editorial {
    font-size: 12px;
  }
}

/* --- Make / segment landing        source: web/src/pages/[segment]/index.astro ---- */

.pending {
  margin-bottom: 22px;
  padding: 26px 30px;
  border-radius: var(--radius);
  background: var(--c-surface);
  font-size: 15px;
  line-height: 22px;
  text-align: center;
}
.pending strong {
  font-family: var(--font-display);
  white-space: nowrap;
}

/* --- Generation listing            source: web/src/pages/[segment]/[sub]/[generation]/index.astro ---- */

.empty {
  padding: 30px;
  border: 1px solid #e3ece3;
  border-radius: var(--radius);
  background: var(--c-surface);
  font-size: 15px;
  text-align: center;
}

.gen__copy {
  margin-top: 26px;
}

/* --- Product detail + fitment      source: web/src/pages/product/[slug].astro ---- */

/* Gallery left, buy panel right — the legacy 480/460 split. */
.pd {
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 20px;
  margin-top: 15px;
}

.pd__gallery {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: var(--radius);
  background: var(--c-surface);
  box-shadow: 0 1px 1px #e2e2e2;
}
.pd__photo {
  display: block;
  width: 100%;
  height: auto;
}

.pd__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.pd__thumbs img {
  width: 80px;
  height: auto;
  border: 1px solid #e3ece3;
  border-radius: var(--radius);
}

.pd__name {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  text-align: left;
}

.pd__sku {
  margin-bottom: 16px;
  font-size: 14px;
}

.pd__lead,
.pd__bullets {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 20px;
  color: #555;
}
.pd__lead {
  margin-bottom: 10px;
}
.pd__bullets {
  margin: 0 0 18px 20px;
  list-style: disc;
}

.pd__specs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 20px;
}
.pd__specs dt {
  font-weight: 700;
  color: var(--c-ink-strong);
}
.pd__specs dd {
  margin: 0;
  color: #555;
}

.pd__buy {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: #f2f2f2;
}
.pd__price {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: #900;
  /* The price is a flex item in `.pd__buy` and was being allowed to shrink, so
     "1 060 грн" broke across two lines mid-amount ("1 060" / "грн") even at
     1280 where the row has room. The owner mentioned the price in the same
     breath as the button; an amount split over two lines is the visible half of
     that. Nowrap keeps it one token — it is ~103px, the row has room at every
     width, and below 768px `.pd__buy` wraps to a second line anyway. */
  white-space: nowrap;
}
/* `.pd__cta` removed with the "Заказать" anchor it styled — see the note in
   templates/product.php. `.pd__buy` is unchanged and needs no compensation: it
   is a flex row that still holds price | Кол-во | Добавить в корзину | stock,
   and with JavaScript off (or on the 53 unpriced / out-of-stock products, where
   `$cartable` is false) it degrades to price | stock, which is a price-and-
   availability band rather than an empty container. */

.pd__phone {
  margin-top: 10px;
  font-size: 14px;
  color: #6b7d6b;
}
.pd__phone strong {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--c-ink-strong);
}

/* --- fitment ----------------------------------------------------------- */

.fit {
  margin-top: 34px;
}
.fit__head {
  padding: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  font-size: 31px;
  line-height: 40px;
  color: var(--c-heading);
  text-align: center;
}
.fit__count {
  margin-bottom: 18px;
  font-size: 13px;
  color: #6b7d6b;
  text-align: center;
}

.fit__universal {
  padding: 24px 30px;
  border-radius: var(--radius);
  background: var(--c-surface);
  font-size: 15px;
  line-height: 22px;
  text-align: center;
}

/* A grid, not CSS columns: a blade that fits 60 Audis and one Porsche should
   put each make in its own cell, not balance one make across four columns. */
.fit__groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
  align-items: start;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--c-surface);
}
.fit__group {
  min-width: 0;
}
.fit__make {
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid #e3ece3;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--c-ink-strong);
}
.fit__group a,
.fit__group span {
  display: block;
  padding: 2px 0;
  font-size: 14px;
  line-height: 22px;
  color: #333;
  text-decoration: none;
}
.fit__group span {
  color: #8a958a;
}
.fit__group a:hover {
  color: var(--c-green-700);
  text-decoration: underline;
}

@media (max-width: 1019px) {
  .pd {
    grid-template-columns: 380px 1fr;
  }
}

@media (max-width: 767px) {
  .pd {
    grid-template-columns: 1fr;
  }
  .fit__head {
    font-size: 22px;
    line-height: 28px;
  }
  .fit__groups {
    grid-template-columns: 1fr;
  }
  .pd__buy {
    flex-wrap: wrap;
  }
}

/* --- Manufacturers index           source: web/src/pages/manufacturers.astro ---- */

.mf {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.mf__card {
  padding: 20px;
  border: 1px solid #e3ece3;
  border-radius: var(--radius);
  background: var(--c-surface);
}

.mf__name {
  padding: 0 0 4px;
  font-size: 22px;
  font-style: normal;
  text-align: left;
}
.mf__name a {
  color: var(--c-green-900);
  text-decoration: none;
}
.mf__name a:hover {
  text-decoration: underline;
}

.mf__tagline {
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 18px;
  color: #6b7d6b;
}

.mf__series {
  display: grid;
  gap: 6px;
}
.mf__series a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: #f4fbf4;
  text-decoration: none;
}
.mf__series a:hover {
  background: #e8f6e8;
}
.mf__series strong {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--c-green-700);
}
.mf__series span {
  font-size: 11px;
  color: #7d8a7d;
}

@media (max-width: 767px) {
  .mf {
    grid-template-columns: 1fr;
  }
}

/* --- Article index (/stati)        source: web/src/pages/content/stati.astro ---- */

.art__intro {
  margin: -12px 0 20px;
  font-size: 14px;
  color: #6b7d6b;
  text-align: center;
}

.art__toc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}
.art__toc a {
  padding: 6px 14px;
  border: 1px solid #e3ece3;
  border-radius: var(--radius);
  background: var(--c-surface);
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--c-green-700);
  text-decoration: none;
}
.art__toc a:hover {
  border-color: var(--c-green-200);
}

.art__cat {
  margin-bottom: 10px;
  /* Anchor targets must clear nothing here, but keep a scroll offset in case
     a sticky header is added later. */
  scroll-margin-top: 12px;
}

.art__cat .h2 {
  text-align: left;
  font-size: 20px;
}

.art__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 20px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--c-surface);
}

/* Thumbnail left, title + excerpt right — the same pairing the legacy
   two-column table shows, as a card. */
.art__card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  align-items: start;
}

.art__thumb {
  display: block;
  overflow: hidden;
  border: 1px solid #e8efe8;
  border-radius: var(--radius);
  background: #f7faf7;
}
.art__thumb img {
  display: block;
  width: 100%;
  height: 80px;
  object-fit: cover;
}
.art__noimg {
  display: block;
  height: 80px;
}

.art__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 19px;
  color: var(--c-green-700);
}
.art__title:hover {
  text-decoration: none;
}

.art__excerpt {
  margin-top: 5px;
  font-size: 12px;
  line-height: 17px;
  color: #6b7d6b;
  /* Excerpt lengths vary wildly in the CMS; cap them so rows stay even. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 767px) {
  .art__list {
    grid-template-columns: 1fr;
    padding: 14px;
  }
  .art__card {
    grid-template-columns: 92px 1fr;
    gap: 10px;
  }
}

/* --- Article / static page         source: web/src/pages/content/[slug].astro ---- */

/* `:global(.prose)` below was Astro's escape hatch for reaching into the
   Prose component's scoped styles. In one global sheet the wrapper is
   meaningless, so it is unwrapped to a plain descendant selector. Same
   match, same specificity — no markup change needed. */
.doc {
  padding: 24px 30px 30px;
  border-radius: var(--radius);
  background: var(--c-surface);
}

/* The 46em measure cap that stood here is REMOVED. It was a deliberate
   readability improvement on the legacy site ("the legacy site runs full 980px,
   which is ~150 characters a line"), but it is a deviation from live and it
   compounded the too-small body text: at 1280px it rendered the article column
   at 644px against live's 979px, so an article read as a narrow strip of 12px
   type. MEASURED on live: `#center_column .rte` is 979px wide with `max-width:
   none` on both the article and the contacts page.

   If the owner later prefers the capped measure, this is the rule to restore —
   but restore it WITH the 14px body text, not the 12px it used to sit on. */

.doc__back {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e3ece3;
  font-size: 14px;
}

@media (max-width: 767px) {
  .doc {
    padding: 16px;
  }
}

/* --- 404                           source: web/src/pages/404.astro ----------- */

.nf {
  max-width: 700px;
  margin: 30px auto 60px;
  padding: 36px 40px 32px;
  border-radius: var(--radius);
  background: var(--c-surface);
  box-shadow: var(--shadow-inset-hairline);
  text-align: center;
}

.nf__code {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  color: var(--c-green-200);
}

.nf__head {
  margin: 6px 0 10px;
  font-size: 26px;
}

.nf__msg {
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 22px;
}

.nf__search {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}
.nf__input {
  width: 320px;
  max-width: 100%;
  height: 34px;
}
.nf__search .btn {
  padding: 8px 20px;
}

.nf__makes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.nf__makes a {
  display: block;
  padding: 5px 12px;
  border: 1px solid #e3ece3;
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--c-green-700);
  text-decoration: none;
}
.nf__makes a:hover {
  background: #f4fbf4;
}

/* --- Form error (/oshibka)         source: web/src/pages/oshibka.astro ------- */

.phone {
  margin: -8px 0 22px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--c-ink-strong);
}

/* The number is now a tel: link so it can be tapped on a phone — this page is
   where a failed submission lands, so calling is the visitor's way through.
   Inheriting colour/weight is what makes that safe: `a` is green site-wide, and
   taking the link colour here is precisely why templates/static.php used to
   keep the number as plain text. Underline only on hover, so it still reads as
   a number at rest but is discoverable as a control. */
.phone a {
  color: inherit;
  font: inherit;
  text-decoration: none;
}
.phone a:hover {
  text-decoration: underline;
}

/* Why the submission failed — populated from `?e=` by the inline script in
   templates/static.php and `hidden` until then, so it occupies no space when
   the reason is absent or unrecognised. Sits between the generic message and
   the phone number: it is the actionable line, but the number is the fallback
   for a visitor who cannot act on it. */
.oc__why {
  margin: -12px 0 22px;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: #fdf3f3;
  font-size: 15px;
  line-height: 22px;
  color: #8a2b2b;
}

/* --- Form thanks (/spasibo)        source: web/src/pages/spasibo.astro ------- */

.hours {
  margin: -10px 0 22px;
  font-size: 13px;
  color: #6b7d6b;
}