/*
 * automobilus.ro — storefront theme.
 * Identity (redesign 2026-07, deliberately diverged from the legacy kvik
 * look while keeping the brand colors): Inter, 14px root, -0.02em tracking,
 * 700 headings; #FD0E0F primary on white; red command nav band; ink #17130E
 * panels (garage hero, footer); sharp 4px radius; soft shadows allowed on
 * elevated surfaces (dropdowns) + lift hovers; outline icons on red tint
 * tiles; container 1472px; main mobile cut 600px.
 */

/* Inter — self-hosted variable font (OFL), latin + latin-ext (diacritice
   românești). Replaces the Google Fonts CDN link (GDPR: no visitor IPs to
   Google, no third-party request). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand */
  --color-primary: #FD0E0F;
  --color-primary-hover: #D90D0E;
  --color-logo-red: #FD0F0F;
  --color-logo-black: #17130E;

  /* Neutrals */
  --color-text: #232323;
  --color-text-muted: rgba(0, 0, 0, 0.5);
  --color-bg: #ffffff;
  --color-surface: #F3F3F3;
  --color-ink: #17130E;
  --color-border: rgba(0, 0, 0, 0.1);
  --color-hairline: rgba(0, 0, 0, 0.05);
  --color-tint: rgba(253, 14, 15, 0.07);
  /* Placeholder „fotografie indisponibilă" (handoff de design 2026-07-26):
     spălare caldă + eticheta gri. Valorile sunt MĂSURATE — eticheta dă 5.86:1
     pe spălare (WCAG AA la text mic cere 4.5:1); nu le rotunji „ca să fie mai
     pe brand", contrastul cade. */
  --color-nophoto-wash: #fff1eb;
  --color-nophoto-label: #5c5e66;

  /* Commerce semantics */
  --color-price-old: #E30613;
  --color-available: #59C736;
  --color-price-highlight: rgba(255, 204, 0, 0.25);
  --color-vehicle-search: #C8252C;
  --color-tag-recommended: #BC9446;

  /* Accents */
  --color-support-blue: #1D3FBF;
  --color-reviews-orange: #F26A25;

  /* Typography */
  --font-body: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif;
  --font-size-root: 14px;
  --letter-spacing: -0.02em;
  --font-size-h1: 2rem;
  --font-size-h2: 1.65rem;
  --font-size-h3: 1.35rem;
  --font-size-h4: 1.1rem;
  --font-weight-heading: 700;

  /* Shape & depth — sharp corners; hairlines for cards, soft shadow only on
     elevated surfaces (dropdowns, lifted tiles) */
  --radius: 4px;
  --radius-sm: 3px;
  --shadow-edge: 0 0 0 1px rgba(0, 0, 0, 0.05);
  --shadow-pop: 0 12px 32px rgba(23, 19, 14, 0.16);
  --shadow-lift: 0 6px 16px rgba(23, 19, 14, 0.08);
  --shadow-search-focus: 0 0 0 1px var(--color-primary), 0 0 8px rgba(0, 0, 0, 0.15);

  /* Layout */
  --container-max: 1472px;
  --nav-band-height: 48px;
  --logo-max-width: 200px;
  --logo-max-height: 48px;
  --gap-grid-nav: 8px;
  --pad-header-main: 16px 20px;
  --block-tile-min-height: 64px;
  --category-icon-size: 40px;
}

/* ---------------------------------------------------------------- base */

* { box-sizing: border-box; }

html {
  font-size: var(--font-size-root);
  /* House rule: the page NEVER scrolls horizontally — content must fit. */
  overflow-x: hidden;
  max-width: 100%;
}

body {
  margin: 0;
  /* clip (NOT hidden): overflow-x:hidden on body forces overflow-y to auto,
     turning body into a scroll container → position:sticky on .site-header
     constrains to body's (never-scrolling) scrollport and the slide-away
     header goes inert. `clip` blocks horizontal scroll WITHOUT establishing a
     scroll container, so the viewport (html) stays the scroller and sticky
     works. Evergreen-only; graceful fallback = today's behavior. */
  overflow-x: clip;
  max-width: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);
}

img { max-width: 100%; display: inline-block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-weight: var(--font-weight-heading);
  line-height: 1.2;
  letter-spacing: var(--letter-spacing);
  margin: 0;
}
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }

button, input, select {
  font-family: inherit;
  letter-spacing: inherit;
  font-size: 1rem;
  color: inherit;
}

.wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
}

/* Respirația de sus, UNIFORMĂ pentru orice pagină: conținutul (mereu un
   `<div class="wrap …">`) nu se mai lipește de banda roșie de navigație
   (sticky). Paginile care aveau `padding-top: 20px` propriu (product/vehicle/
   search) și l-au pierdut acum îl moștenesc de aici — aceeași valoare, zero
   schimbare vizuală pentru ele; restul (cont, checkout, retur, informații)
   câștigă spațiul care lipsea. */
main { padding-top: 20px; }

.icon {
  display: inline-flex;
  vertical-align: middle;
  flex: none;
}
.icon svg { display: block; }

/* Generic white card used by placeholder inner pages. */
.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
}
.text-muted { color: rgba(0, 0, 0, 0.45); }

.notice {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 0.93rem;
}
/* Footnote discret (nota de compatibilitate TecDoc coborâtă lângă fitment) —
   fără galben, fără bandă; text mic muted cu o subtilă hairline la stânga. */
.notice--soft {
  background: none;
  border: 0;
  border-left: 2px solid var(--color-hairline);
  border-radius: 0;
  padding: 4px 0 4px 12px;
  font-size: 0.86rem;
  color: rgba(0, 0, 0, 0.45);
}

/* Red uppercase section eyebrow — the section-header signature. */
.eyebrow {
  margin: 0 0 2px;
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-surface);
  color: #000;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0 14px;
  height: 40px;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--pill { border-radius: 100px; }
@media (hover: hover) {
  .btn:hover { background: var(--color-primary-hover); color: #fff; }
  .btn--primary:hover { background: var(--color-primary-hover); }
}

/* --------------------------------------------- placeholder „fără fotografie"
   Handoff de design 2026-07-26, direcția „watermark": spălare caldă + emblema
   Automobilus decupată de colțul din stânga-jos + eticheta în română. UN singur
   component pentru TOATE plasamentele (rând de listare, pagina de produs, linie
   de coș, kit revizie, retururi, mini-coș, modalul „adăugat în coș").

   Umple cutia gazdă (`inset: 0`), deci raportul de aspect ȘI raza de colț rămân
   ale cutiei, nu ale placeholderului — gazda are nevoie doar de
   `position: relative` + `overflow: hidden` (le are deja toate, paritatea
   „fundal alb + hairline" din runda 4).

   Static INTENȚIONAT: o poză care lipsește DEFINITIV nu trebuie să pară una
   care se încarcă. Handoff-ul are și o variantă „sheen" — NU o folosim, n-avem
   slot care să se umple ulterior cu poza reală. */

.no-photo {
  position: absolute;
  inset: 0;
  /* Stratul de FUNDAL al cutiei. Placeholderul e absolut și vine DUPĂ badge-uri
     în DOM (badge-ul „−N %" și plăcuța de marcă se randează primele), deci fără
     `z-index` le-ar acoperi: elementele poziționate cu `z-index: auto` se pictează
     în ordinea din arbore. `0` aici + `1` pe suprapuneri = ordine explicită. */
  z-index: 0;
  background: var(--color-nophoto-wash);
  /* Pragul etichetei se ia din LĂȚIMEA PROPRIE, nu din viewport: același
     component, fără variante, pe 440px (pagina de produs) și pe 48px
     (mini-coș). */
  container-type: inline-size;
  overflow: hidden;
}

/* Emblema, decupată de marginea din stânga-jos. Emblema e INLINE ca data-URI,
   nu un /images/emblem.svg: CF cache-uiește staticele agresiv, iar un `url()`
   din CSS nu poate purta `?v=filemtime` (gotcha casei) — inline, se
   invalidează împreună cu shop.css, care e busted la fiecare deploy. Bonus:
   zero request în plus pe paginile de listare, unde apare de 20 de ori.
   Decorativă: pseudo-element, niciodată un <img>, deci n-o anunță cititorul de
   ecran.
   ⚠ Handoff-ul o dimensiona pe ÎNĂLȚIME (92%); aici o dimensionăm pe LĂȚIME —
   la 1:1 (pagina de produs, coș, kit, retururi, mini-coș) rezultatul e
   IDENTIC, dar miniatura de rând e PORTRET (150px lățime × înălțimea rândului,
   dictată de corpul rândului), unde 92% din înălțime ar depăși lateral și
   cercul s-ar citi ca o bandă orizontală, nu ca o emblemă decupată. */
.no-photo::after {
  content: "";
  position: absolute;
  left: -5%;
  bottom: -20%;
  width: 92%;
  aspect-ratio: 1;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='116.592 17.442 96.541 96.541' width='1024' height='1024'%3E%3Cg transform='matrix(1 0 0 -1 0 182.62)'%3E%3Cg transform='translate(164.8623 161.6025)'%3E%3Cpath d='M 0 0 C 24.445 0 44.293 -20.027 44.293 -44.695 C 44.293 -69.363 24.445 -89.391 0 -89.391 C -24.445 -89.391 -44.292 -69.363 -44.292 -44.695 C -44.292 -20.027 -24.445 0 0 0' fill='%232c2e35'%3E%3C/path%3E%3C/g%3E%3Cg transform='translate(164.8633 156.7939)'%3E%3Cpath d='M 0 0 C 22.137 0 40.109 -17.974 40.109 -40.111 C 40.109 -62.249 22.137 -80.222 0 -80.222 C -22.139 -80.222 -40.111 -62.249 -40.111 -40.111 C -40.111 -17.974 -22.139 0 0 0' fill='%232c2e35'%3E%3C/path%3E%3C/g%3E%3Cg transform='translate(125.7686 125.1182)'%3E%3Cpath d='M 0 0 C 0.929 0.648 2.159 1.176 3.663 1.539 C 5.128 1.895 6.727 2.061 8.362 2.066 C 9.969 2.072 11.626 1.92 13.244 1.635 C 14.848 1.35 16.429 0.93 17.904 0.387 C 19.381 -0.156 20.767 -0.826 21.977 -1.613 C 22.987 -2.27 23.807 -2.963 24.432 -3.668 C 25.066 -4.384 25.505 -5.117 25.74 -5.842 C 25.981 -6.578 26.015 -7.31 25.826 -8.006 C 25.637 -8.717 25.217 -9.393 24.557 -10 L 38.064 -19.173 L 45.971 -14.265 L 29.458 -3.729 L 33.512 -2.201 L 49.457 -12.101 L 55.294 -8.476 L 40.36 0.379 L 43.461 1.547 L 57.915 -6.849 L 62.772 -3.832 L 49.248 3.725 L 51.664 4.635 L 79.153 -10.484 C 79.188 -9.806 79.204 -9.123 79.204 -8.436 C 79.204 13.717 61.245 31.676 39.095 31.676 C 19.796 31.676 3.682 18.045 -0.149 -0.113 C -0.099 -0.076 -0.052 -0.037 0 0' fill='%23ff4a1b'%3E%3C/path%3E%3C/g%3E%3Cg transform='translate(203.7061 106.6416)'%3E%3Cpath d='M 0 0 C 0.469 1.82 0.811 3.688 1.021 5.598 L -10.502 12.038 L -15.007 8.716 Z' fill='%23ff4a1b'%3E%3C/path%3E%3C/g%3E%3Cg transform='translate(142.8164 121.9131)'%3E%3Cpath d='M 0 0 C -0.563 0.379 -1.22 0.699 -1.922 0.959 C -2.626 1.217 -3.381 1.414 -4.144 1.541 C -4.912 1.67 -5.691 1.729 -6.438 1.713 C -7.194 1.694 -7.919 1.598 -8.568 1.412 C -9.228 1.226 -9.749 0.965 -10.127 0.654 C -10.51 0.338 -10.745 -0.031 -10.824 -0.429 C -10.905 -0.832 -10.825 -1.265 -10.58 -1.703 C -10.333 -2.146 -9.915 -2.592 -9.323 -3.016 C -8.729 -3.439 -8.017 -3.801 -7.24 -4.086 C -6.465 -4.371 -5.628 -4.58 -4.785 -4.705 C -3.946 -4.83 -3.105 -4.869 -2.313 -4.82 C -1.529 -4.771 -0.797 -4.633 -0.167 -4.4 C 0.456 -4.172 0.92 -3.873 1.229 -3.531 C 1.534 -3.192 1.687 -2.811 1.692 -2.412 C 1.696 -2.016 1.556 -1.603 1.271 -1.191 C 0.989 -0.785 0.566 -0.381 0 0' fill='%23ff4a1b'%3E%3C/path%3E%3C/g%3E%3Cg transform='translate(186.2617 113.5596)'%3E%3Cpath d='M 0 0 L -5.442 -4.014 L 13.273 -15.633 L 10.867 -18.908 L -8.704 -6.419 L -20.708 -15.274 L -41.314 -0.731 C -42.723 -0.978 -44.256 -1.073 -45.845 -1.024 C -47.456 -0.974 -49.113 -0.774 -50.741 -0.432 C -52.379 -0.089 -53.975 0.396 -55.447 1.009 C -56.919 1.622 -58.255 2.357 -59.381 3.199 C -60.26 3.857 -60.946 4.536 -61.456 5.216 C -61.491 4.523 -61.51 3.824 -61.51 3.123 C -61.51 -19.029 -43.552 -36.987 -21.398 -36.987 C -3.778 -36.987 11.188 -25.624 16.574 -9.826 Z' fill='%23ff4a1b'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .16;
}

/* Eticheta. `px` (nu rem) ca în handoff: valorile sunt măsurate și placeholderul
   trebuie să arate identic la toate cele 7 plasamente. Familia se MOȘTENEȘTE
   (Inter, var(--font-body)) — nu fixăm stackul de sistem din handoff: Inter e
   deja pe pagină, iar `font-display: swap` dă oricum un fallback imediat, deci
   eticheta nu așteaptă fontul.

   ⚠ NU-i pune `z-index` ca să iasă „deasupra" emblemei. `::after` vine după ea
   în arbore, deci voalul de .16 acoperă ȘI glifele ȘI fundalul din spatele lor,
   în egală măsură — măsurat: 5.86:1 pe spălare curată, 4.91:1 peste inelul
   închis al emblemei, ambele peste AA (4.5:1). Ridicată deasupra voalului,
   eticheta rămâne curată pe un fundal ÎNTUNECAT de voal → 4.33:1, PICĂ AA.
   Ordinea actuală de pictare e cea corectă, nu o scăpare. */
.no-photo > span {
  position: absolute;
  left: 13px;
  top: 13px;
  max-width: 62%;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.35;
  color: var(--color-nophoto-label);
  letter-spacing: 0;
}

/* Miniaturi: eticheta n-are loc, emblema duce singură mesajul. */
@container (max-width: 132px) {
  .no-photo > span { display: none; }
  .no-photo::after { opacity: .19; }
}

/* Pagina de produs — cutia e mare, eticheta urcă o treaptă. */
.no-photo--pdp > span {
  left: 16px;
  top: 16px;
  font-size: 14px;
}

/* Badge-ul „−N %" ocupă ACELAȘI colț stânga-sus ca eticheta (handoff-ul n-avea
   cazul: acolo placeholderul era singur în cutie). Un produs în promoție ȘI fără
   poză e real — mărcile de casă au des amândouă — deci coborâm eticheta sub
   badge. Combinator de FRAȚI, nu `:has()`: badge-ul se randează ÎNAINTEA
   placeholderului în ambele șabloane, deci nu ne trebuie selector de părinte.
   Specificitatea (0,2,1) bate atât regula de bază cât și `--pdp` (0,1,1). */
.product-row__discount ~ .no-photo > span { top: 32px; }   /* badge ~20px de la 6px */
.discount-badge ~ .no-photo > span        { top: 60px; }   /* badge ~42px de la 12px */

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  transition: transform .25s ease;
}
.site-header.header--hidden { transform: translateY(-100%); }
/* A genuinely stuck+translated header can strand keyboard focus off-screen —
   revealing it on focus-within keeps tab order visible (WCAG 2.4.7). */
.site-header.header--hidden:focus-within { transform: none; }

/* Top line — slim white utility bar: USPs left, info/contact right */
.top-line { border-bottom: 1px solid var(--color-hairline); }
.top-line__in {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.top-usps { display: flex; align-items: center; gap: 26px; min-width: 0; }
.usp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.usp .icon { color: var(--color-primary); }
.usp b { color: var(--color-primary); font-weight: 700; }
.usp .stars { color: var(--color-reviews-orange); letter-spacing: 1px; }

.top-links { display: flex; align-items: center; gap: 22px; }
.top-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  background: none;
  border: 0;
  padding: 0;
  color: #000;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.top-link .menu-link__arrow { color: rgba(0, 0, 0, 0.45); display: inline-flex; }
@media (hover: hover) {
  .top-link:hover { color: var(--color-primary); }
}

/* Small hover dropdowns (Informatii / Contact) */
.menu-item { position: relative; display: inline-flex; }
.menu-drop {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  padding: 6px 0;
  display: none;
  z-index: 70;
}
.menu-drop--right { left: auto; right: 0; transform: none; }
.menu-item.is-open .menu-drop { display: block; }
@media (hover: hover) {
  .menu-item:hover .menu-drop { display: block; }
}
.menu-drop a {
  display: block;
  padding: 9px 16px;
  text-decoration: none;
  color: #000;
  font-weight: 600;
  font-size: 0.93rem;
  white-space: nowrap;
}
.menu-drop a + a { border-top: 1px solid var(--color-hairline); }
@media (hover: hover) {
  .menu-drop a:hover { color: var(--color-primary); background: var(--color-surface); }
}

/* Main bar — white, logo / search / vehicle chip + account + cart */
.main-bar {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--pad-header-main);
  display: flex;
  align-items: center;
  gap: 28px;
}
.logo { display: inline-flex; flex: none; text-decoration: none; }
.logo svg {
  width: var(--logo-max-width);
  height: auto;
  max-height: var(--logo-max-height);
  display: block;
}

.search { flex: 1; min-width: 0; position: relative; }
.search input {
  width: 100%;
  height: 48px;
  background: var(--color-surface);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0 60px 0 16px;
  font-size: 1rem;
  color: #000;
  outline: none;
  text-align: left;
}
.search input::placeholder { color: rgba(0, 0, 0, 0.45); }
.search input:focus {
  background: #fff;
  box-shadow: var(--shadow-search-focus);
}
.search button {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  width: 48px;
  border: 0;
  background: var(--color-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
@media (hover: hover) {
  .search button:hover { background: var(--color-primary-hover); }
}

/* Typeahead dropdown — white panel, "PRODUSE" label, rows = 44px thumb +
   bold name + green availability + right-aligned price. */
.search-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  z-index: 70;
}
.search-suggest__label {
  padding: 10px 14px 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
}
/* Antetul grupului al doilea (dropdown scopat pe mașină: „Alte rezultate")
   primește o linie de separare + spațiu față de piesele compatibile de sus. */
.search-suggest__label--sep {
  margin-top: 4px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 9px;
}
.search-suggest__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 14px;
  text-decoration: none;
  color: #000;
}
.search-suggest__row + .search-suggest__row { border-top: 1px solid var(--color-hairline); }
@media (hover: hover) {
  .search-suggest__row:hover { background: var(--color-surface); }
}
.search-suggest__row.is-active { background: var(--color-surface); }
.search-suggest__thumb {
  position: relative;               /* ancoră pentru `.no-photo` */
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  /* Fundal alb + hairline, ca .product-row__media / galeria paginii de produs
     (nu gri surface — acela e rezervat highlight-ului de rând la hover). */
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Fără poză → `.no-photo` (44px ⇒ sub pragul de 132px: doar emblema). */
}
.search-suggest__thumb img { width: 100%; height: 100%; object-fit: contain; }
.search-suggest__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.search-suggest__name {
  font-size: 0.93rem;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.search-suggest__avail { font-size: 0.8rem; color: rgba(0, 0, 0, 0.45); }
.search-suggest__avail.is-ok { color: var(--color-available); font-weight: 600; }
/* Rating compari pe rândul de typeahead — stele fracționale (.stars-x, aceeași
   componentă ca listările) la 12px + „{medie} ({număr})" muted. Randat de
   shop.js DOAR când payload-ul are `rating` (fără stele fake). */
.search-suggest__rating { display: flex; align-items: center; gap: 5px; }
.search-suggest__rating .stars-x { font-size: 12px; }
.search-suggest__rating-text { font-size: 0.78rem; color: rgba(0, 0, 0, 0.45); }
.search-suggest__price { flex: none; font-weight: 700; white-space: nowrap; }
.search-suggest__price::after { content: " ›"; color: rgba(0, 0, 0, 0.3); font-weight: 400; }
.search-suggest__all {
  display: block;
  padding: 11px 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.93rem;
  text-decoration: none;
  text-align: center;
}
@media (hover: hover) {
  .search-suggest__all:hover { text-decoration: underline; }
}

.header-actions { display: flex; align-items: center; gap: 28px; flex: none; }
/* Chipul „mașina mea" — hidratat de JS din cookie-ul `vehicul` (paginile sunt
   whole-page cached, deci nu se randează server-side). */
.header-vehicle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 240px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.header-vehicle[hidden] { display: none; }
.header-vehicle .icon { color: var(--color-primary); flex: none; }
.header-vehicle span { overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) {
  .header-vehicle:hover { border-color: var(--color-primary); color: var(--color-primary); }
}

/* ---- „Garajul meu" — meniu din header (buton + dropdown) ------------------
   Aceeași familie vizuală ca .header-vehicle (chipul de dinainte); dropdown-ul
   preia bordura roșie + raza chipului .chosen-vehicle. Butonul e MEREU vizibil.
   Hidratat 100% de shop.js (paginile sunt whole-page cached). */
.garage-menu { position: relative; flex: none; }
.garage-menu__btn {
  cursor: pointer;
  font-family: inherit;
  /* moștenește .header-vehicle: bordură, radius, padding, culori */
}
.garage-menu.has-vehicle .garage-menu__btn { color: #000; border-color: var(--color-border); }
.garage-menu__label { overflow: hidden; text-overflow: ellipsis; }
.garage-menu__arrow {
  display: inline-flex; flex: none; color: rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease;
}
.garage-menu.is-open .garage-menu__arrow { transform: rotate(180deg); }
@media (hover: hover) {
  .garage-menu__btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
}

.garage-menu__drop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  padding: 8px;
  /* Garaj lung (până la 20 de mașini) depășea viewportul, fără scroll — panoul
     ieșea sub fold și ultimele rânduri erau inaccesibile. Îl plafonăm și-l
     facem scrollabil pe verticală (house pattern, ca .catmenu). */
  max-height: calc(100vh - 160px);
  max-height: calc(100dvh - 160px);
  overflow-y: auto;
  overflow-x: hidden;
}
.garage-menu__drop[hidden] { display: none; }

.garage-menu__muted { color: #767676; font-size: 0.85rem; margin: 6px 8px 10px; line-height: 1.35; }

.garage-menu__car {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px;
  border: 1px solid var(--color-border);
  margin-bottom: 6px;
}
.garage-menu__car.is-active { border-color: var(--color-primary); background: rgba(253, 14, 15, 0.04); }
.garage-menu__car-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.garage-menu__car-label {
  font-weight: 700; font-size: 0.9rem; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.garage-menu__car-type { font-size: 0.78rem; color: #767676; }
.garage-menu__car-use,
.garage-menu__car-go {
  flex: none; font-size: 0.82rem; font-weight: 700; white-space: nowrap;
  border-radius: 6px; padding: 6px 10px; cursor: pointer; text-decoration: none;
}
.garage-menu__car-use {
  background: var(--color-primary); color: #fff; border: 0; font-family: inherit;
}
.garage-menu__car-use:disabled { opacity: 0.6; cursor: default; }
.garage-menu__car-go { color: var(--color-primary); border: 1px solid var(--color-primary); }
/* „Dezactivează" pe rândul activ — buton-text discret (fără chenar), lângă
   „Vezi piese"; underline la hover, ca linkurile din footerul meniului. */
.garage-menu__car-unuse {
  flex: none; font-size: 0.78rem; font-weight: 600; white-space: nowrap;
  background: none; border: 0; padding: 6px 4px; cursor: pointer;
  color: var(--color-primary); font-family: inherit;
}
.garage-menu__car-unuse:disabled { opacity: 0.6; cursor: default; }
@media (hover: hover) {
  .garage-menu__car-unuse:hover { text-decoration: underline; }
}

.garage-menu__cta {
  display: block; text-align: center; text-decoration: none;
  background: var(--color-primary); color: #fff; font-weight: 700;
  padding: 10px; border-radius: 6px; margin: 4px 0;
}
.garage-menu__foot {
  display: flex; gap: 8px; flex-wrap: wrap;
  border-top: 1px solid var(--color-hairline);
  margin-top: 6px; padding-top: 8px;
}
.garage-menu__foot-link {
  flex: 1 1 auto; text-align: center; text-decoration: none;
  color: var(--color-primary); font-weight: 700; font-size: 0.85rem;
  padding: 6px; border-radius: 6px; white-space: nowrap;
}
@media (hover: hover) {
  .garage-menu__foot-link:hover { background: rgba(253, 14, 15, 0.06); }
}

.header-action {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: #000;
}
.header-action .icon { color: var(--color-primary); }
.header-action__label { font-weight: 600; font-size: 0.93rem; line-height: 1.2; white-space: nowrap; }
.header-action--cart .header-action__label { color: var(--color-primary); font-weight: 700; }
.header-action--cart { position: relative; }
/* Bulina coșului — număr alb pe cerc roșu, colțul dreapta-sus al iconiței. Afișată
   DOAR pe mobil (vezi @media 599px); pe desktop chipul-text „X bucăți / Y" e suficient. */
.header-action__badge {
  display: none;
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  background: var(--color-primary);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
@media (hover: hover) {
  .header-action:hover .header-action__label { color: var(--color-primary); }
}

/* Nav band — the red command bar (brand signature, replaces the legacy gray
   utility bar) */
.nav-band { background: var(--color-primary); }
.nav-band__in {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
  height: var(--nav-band-height);
  display: flex;
  align-items: stretch;
  gap: 2px;
  position: relative;
}
.nav-cats {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 100%;
  padding: 0 16px;
  border: 0;
  background: rgba(0, 0, 0, 0.14);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  white-space: nowrap;
}
.nav-cats .menu-link__arrow { display: inline-flex; opacity: .8; }
@media (hover: hover) {
  .nav-cats:hover { background: rgba(0, 0, 0, 0.24); }
}
.nav-band__links { display: flex; align-items: stretch; }
.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
}
@media (hover: hover) {
  .nav-link:hover { background: rgba(0, 0, 0, 0.14); }
}
.nav-band__phone {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  opacity: .92;
  white-space: nowrap;
}
@media (hover: hover) {
  .nav-band__phone:hover { opacity: 1; text-decoration: underline; }
}

/* "Toate categoriile" dropdown panel — white, soft shadow (NO page blur) */
.catmenu-wrap { position: relative; display: inline-flex; }
.catmenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 340px;
  max-height: calc(100vh - 170px);
  max-height: calc(100dvh - 170px);
  overflow-y: auto;
  background: #fff;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-pop);
  display: none;
  z-index: 70;
}
.catmenu.is-open { display: block; }
.catmenu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  color: #000;
  font-weight: 600;
  text-decoration: none;
}
.catmenu a + a { border-top: 1px solid var(--color-hairline); }
@media (hover: hover) {
  .catmenu a:hover { background: var(--color-surface); color: var(--color-primary); }
}

/* Outline icon on a pale-red tint tile (replaces the legacy filled red
   squares) */
.icon-tile {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--color-tint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.icon-tile img { width: 16px; height: 16px; display: block; }
.icon-tile--28 { width: 28px; height: 28px; }
.icon-tile--28 img { width: 18px; height: 18px; }

/* Mobile scrim behind the open category panel — plain dim, desktop uses the
   dropdown shadow alone. */
.body-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(23, 19, 14, 0.45);
  display: none;
}
body.backdrop-on .body-backdrop { display: block; }
@media (min-width: 1200px) {
  .body-backdrop { display: none !important; }
}

/* Hamburger — trăiește în main-bar, apare sub breakpointul de nav (1200px);
   icon-only (deschide #catmenu). Pe fundal alb → culoare închisă. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  background: none;
  border: 0;
  padding: 4px;
  color: var(--color-text);
  cursor: pointer;
}
.nav-toggle .icon { color: var(--color-text); }

/* ------------------------------------------------------- garage hero */

/* „Garajul" — the vehicle-first hero: one dark ink panel on a light page.
   Dark styling is scoped under .garage; the shared picker partial stays
   light everywhere else (e.g. /cont/garaj). */
.garage {
  margin-top: 16px;
  background: var(--color-ink);
  border-radius: var(--radius);
  color: #fff;
  padding: 26px 28px 24px;
}
.garage__head { margin-bottom: 18px; }
.garage h1 { color: #fff; font-size: 1.8rem; }
.garage__sub { margin: 6px 0 0; color: rgba(255, 255, 255, 0.6); font-size: 1rem; }

.garage .vehicle-picker { margin-top: 0; }
.garage .vtype {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.6);
}
.garage .vtype.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.garage .vp-field { border-color: transparent; }
.garage .vp-error { color: #FF9A9A; }

/* #3 — chip „mașina ta" pe homepage (Option A, 2026-07-28): rând FIX ~96px,
   plăcuță TecDoc + title (2 linii) + meta (1 linie ellipsis) + CTA stivuite.
   Land Rover nu mai umflă cardul; fără poză → logo marcă → siluetă. */
.chosen-vehicle {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  height: 96px;
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  background: #fff;
  /* card alb — forțează text închis; altfel eticheta moștenea #fff din
     .garage (panoul întunecat) și ieșea alb-pe-alb. */
  color: var(--color-text);
}
.chosen-vehicle__plate {
  position: relative;
  width: 112px;
  height: 72px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--color-hairline);
  overflow: hidden;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chosen-vehicle__photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.chosen-vehicle__photo.is-brand {
  width: 70%;
  height: 70%;
  margin: auto;
}
.chosen-vehicle__silhouette {
  display: none;
  color: var(--color-primary);
}
.chosen-vehicle__plate.is-fallback .chosen-vehicle__silhouette { display: inline-flex; }
.chosen-vehicle__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.chosen-vehicle__eyebrow { font-size: .75rem; color: #767676; font-weight: 600; }
.chosen-vehicle__title {
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.25;
  color: #000;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chosen-vehicle__meta {
  font-size: .82rem;
  color: rgba(0, 0, 0, 0.55);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chosen-vehicle__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex: none;
}
.chosen-vehicle__go {
  margin: 0;
  height: 42px;
  padding: 0 14px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  font-size: .92rem;
  white-space: nowrap;
}
@media (hover: hover) {
  .chosen-vehicle__go:hover { background: var(--color-primary); color: #fff; filter: brightness(0.95); }
}
.chosen-vehicle__change {
  background: none; border: 0; padding: 0;
  color: var(--color-primary); font-weight: 700; cursor: pointer; text-decoration: underline;
  font-size: .92rem;
}
@media (max-width: 640px) {
  .chosen-vehicle {
    height: auto;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }
  .chosen-vehicle__plate { width: 88px; height: 56px; }
  .chosen-vehicle__actions {
    grid-column: 1 / -1;
    align-items: stretch;
  }
  .chosen-vehicle__go { width: 100%; text-align: center; justify-content: center; }
  .chosen-vehicle__change { align-self: center; }
}
.garage .chosen-vehicle { margin-top: 0; }

/* compat: vechiul __label / __glyph dacă mai apare undeva */
.chosen-vehicle__glyph { flex: none; color: var(--color-primary); display: inline-flex; }
.chosen-vehicle__label { font-weight: 700; font-size: 1.05rem; color: #000; }

/* Vehicle cascade — white cards (light context default) */
.vehicle-picker {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.vtype-toggles { display: flex; gap: 8px; flex: none; }
.vtype {
  width: 52px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  color: rgba(0, 0, 0, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.vtype.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.vp-field {
  flex: 1;
  min-width: 180px;
  background: #fff;
  border-radius: var(--radius);
  padding: 7px 12px 6px;
  border: 1px solid var(--color-border);
}
.vp-field:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.vp-field label {
  display: block;
  font-size: 0.86rem;
  color: rgba(0, 0, 0, 0.45);
  line-height: 1.2;
}
.vp-field select {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 2px 20px 2px 0;
  font-weight: 700;
  color: #000;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23232323' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}
.vp-field select.is-empty { color: var(--color-primary); font-style: italic; font-weight: 600; }
.vp-field select:disabled { color: var(--color-text-muted); font-style: italic; font-weight: 600; }
/* Dropdown LIST typography (owner spec): the red/italic placeholder styling
   above must not leak into the open popup — Chromium lets option/optgroup
   override color / font-style / font-weight. Optgroup headers black ≤600,
   options black regular, nothing italic, nothing red. */
.vp-field select optgroup { color: #000; font-style: normal; font-weight: 600; }
.vp-field select option { color: #000; font-style: normal; font-weight: 400; }

.vp-submit {
  flex: none;
  width: 54px;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
@media (hover: hover) {
  .vp-submit:hover { background: var(--color-primary-hover); }
}

/* ---------------------------------------------------------- sections */

.home-section { margin-top: 44px; }
.home-section > h2 { margin-bottom: 16px; }

/* Homepage desktop: mega-panel TOP — garage wins the fold; rail is quiet
   chrome; promos are secondary (desaturated / smaller type) until real art.
   Rail height drives the shell; wide promo row fills leftover space. */
.home-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
.home-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.home-main > .garage {
  margin: 0;
  flex: none;
  /* 2A — garage is the loud signal */
  padding: 28px 30px 26px;
}
.home-main > .garage h1 { font-size: clamp(1.55rem, 2.2vw, 1.95rem); }
.home-section--flush { margin-top: 24px; }
.home-promos {
  margin-top: 14px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* #4 — quiet rail: no heavy card, smaller icons, label header */
.home-rail {
  background: transparent;
  border: 0;
  border-radius: 0;
  align-self: start;
  padding: 0;
}
.home-rail__title {
  margin: 0 0 8px;
  padding: 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.home-rail__nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-hairline);
}
.home-rail__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.93rem;
  border-bottom: 1px solid var(--color-hairline);
}
.home-rail__link + .home-rail__link { border-top: 0; }
.home-rail__icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--color-tint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.home-rail__icon img { width: 16px; height: 16px; object-fit: contain; }
.home-rail__label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}
@media (hover: hover) {
  .home-rail__link:hover {
    color: var(--color-primary);
    background: transparent;
  }
  .home-rail__link:hover .home-rail__icon { background: rgba(253, 14, 15, 0.12); }
}
@media (min-width: 1200px) {
  body.is-home .nav-cats { display: none; }
}
@media (max-width: 1199px) {
  .home-shell { grid-template-columns: 1fr; }
  .home-rail { display: none; }
  .home-main { display: block; }
  .home-promos { display: block; }
  .home-promos .promo-grid {
    flex: none;
    grid-template-rows: none;
    grid-auto-rows: 190px;
  }
}

/* Homepage: stretch offer banners after the mega-panel. */
.home-page .banner-pair--stretch .banner {
  min-height: 360px;
  padding: 40px 36px;
}
.home-page .banner-pair--stretch .banner h3 {
  max-width: 520px;
  font-size: clamp(1.45rem, 2.1vw, 1.85rem);
}

.section-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
  margin-top: 12px;
}
@media (hover: hover) { .section-more:hover { text-decoration: underline; } }

/* Promo grid — 1 lead + 2 stacked + 1 wide. On homepage the wide row is 1fr
   so it grows to match the category rail (see .home-promos flex above). */
.promo-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-auto-rows: 205px;
  gap: 16px;
}
.home-promos .promo-grid {
  flex: 1 1 auto;
  /* 2A — shorter promo rows so garage keeps visual weight */
  grid-template-rows: 168px 168px minmax(140px, 1fr);
  grid-auto-rows: unset;
  min-height: 0;
  gap: 12px;
}
.promo-card {
  position: relative;
  border-radius: var(--radius);
  background: var(--brand, #000);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  display: flex;
}
/* #3 — quiet merch until real photography: ink wash + less saturation */
.home-promos .promo-card { filter: saturate(0.82); }
.home-promos .promo-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(23, 19, 14, 0.18);
  pointer-events: none;
}
.promo-card--lead { grid-row: span 2; }
.promo-card--wide { grid-column: 1 / -1; min-height: 0; }
.service-kit {
  grid-column: 1 / -1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.service-kit__head { min-width: 0; }
.service-kit__eyebrow {
  margin: 0 0 2px;
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.service-kit__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
}
.service-kit__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
}
.service-kit__card {
  display: flex;
  gap: 12px;
  align-items: stretch;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  min-width: 0;
  height: 100%;
}
.service-kit__media {
  position: relative;               /* ancoră pentru `.no-photo` */
  flex: none;
  align-self: flex-start;
  width: 80px;
  height: 80px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Paritate .product-gallery__main / .product-row__media (runda 4): fundal alb
     + hairline. JPG-urile TecDoc sunt deja albe — pe gri apare un pătrat alb. */
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
}
.service-kit__media img {
  max-width: 88%;
  max-height: 88%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Fără poză → `.no-photo` (80px ⇒ doar emblema). */
.service-kit__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
  align-self: stretch;
  /* Înălțime egală cu cardul (grid stretch) ca margin-top:auto pe Adaugă să alinieze. */
  min-height: 100%;
}
.service-kit__slot {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.service-kit__name {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.25;
  /* Rezervă 2 rânduri ca prețul + Adaugă să stea pe aceeași linie între carduri. */
  min-height: calc(1.25em * 2);
  color: var(--color-text);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (hover: hover) {
  .service-kit__name:hover { color: var(--color-primary); }
}
.service-kit__sku {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.service-kit__price {
  margin: 2px 0 0;
  font-weight: 700;
  font-size: 1.05rem;
  color: #000;
}
.service-kit__price small {
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
/* CTA jos, stânga — fără .btn--cart (flex:1 / 56px de pe pagina de produs). */
.service-kit__add,
.service-kit__body > .btn {
  margin-top: auto;
  padding-top: 8px;
  align-self: flex-start;
}
.service-kit__add {
  display: flex;
  justify-content: flex-start;
  width: auto;
}
.service-kit__add .btn,
.service-kit__body > .btn {
  flex: none;
  width: auto;
  height: 36px;
  font-size: 0.9rem;
  min-width: 0;
  padding: 0 14px;
}
@media (max-width: 899px) {
  .service-kit__grid { grid-template-columns: 1fr; }
}

.promo-card__panel {
  position: relative;
  z-index: 2;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
}
.home-promos .promo-card__panel { padding: 18px 20px; gap: 8px; }
.promo-card__mark {
  font-weight: 700;
  font-size: 0.93rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .85;
}
.home-promos .promo-card__mark { font-size: 0.8rem; opacity: .75; }
.promo-card__claim { font-weight: 700; font-size: 1.35rem; line-height: 1.2; max-width: 26ch; }
.promo-card--lead .promo-card__claim { font-size: 1.8rem; }
.home-promos .promo-card__claim { font-size: 1.15rem; max-width: 28ch; }
.home-promos .promo-card--lead .promo-card__claim { font-size: 1.4rem; }
.promo-card--wide .promo-card__claim { max-width: 40ch; }
.promo-card__cta { background: #fff; color: #000; height: 40px; font-size: 1rem; min-width: 140px; margin-top: 4px; }
.home-promos .promo-card__cta { height: 36px; font-size: 0.93rem; min-width: 120px; }
.promo-card__art {
  position: absolute;
  right: -12px;
  bottom: -36px;
  z-index: 1;
  font-size: 12rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  opacity: .13;
  user-select: none;
}
.home-promos .promo-card__art { opacity: .08; font-size: 9rem; z-index: 0; }
.promo-card--dark-text { color: #17130E; }
.promo-card--dark-text .promo-card__art { color: #000; }
@media (hover: hover) {
  .promo-card:hover .promo-card__cta { background: var(--color-primary); color: #fff; }
  /* #3 — home promo CTAs stay white; red reserved for site chrome */
  .home-promos .promo-card .btn.promo-card__cta:hover,
  .home-promos .promo-card:hover .btn.promo-card__cta {
    background: #f5f5f5;
    color: #000;
  }
}

/* Promo card cu media de fundal (video textless + poster).
   Posterul e background-image pe card → rămâne vizibil dacă video-ul e
   ascuns (prefers-reduced-motion) sau nu s-a încărcat. */
.promo-card--media {
  background-color: #0a0a0a;
  background-size: cover;
  background-position: 70% center;
}
/* Clipul e „real photography" → păstrează culoarea vie (anulează
   saturate(0.82) aplicat pe cardurile-literă). Specificitate .home-promos
   ca să bată regula generală. */
.home-promos .promo-card--media { filter: none; }
/* Logo Castrol sus-stânga, peste clip + scrim (z-index 2 ca panoul). */
.promo-card__logo {
  position: absolute;
  top: 18px;
  left: 20px;
  z-index: 2;
  height: 30px;
  width: auto;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .55));
  pointer-events: none;
}
/* Emblemă pătrată (ex. Meguiar's) — puțin mai mare decât un wordmark lat. */
.promo-card__logo--badge { height: 40px; }
/* Subtitlul de sub claim (livrare/disponibilitate). */
.promo-card--media .promo-card__sub {
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1.35;
  opacity: .9;
  max-width: 32ch;
  margin: -2px 0 2px;
}
/* Text-shadow pe textul peste clip — asigură lizibilitatea și acolo unde
   textul trece peste sticle (contrast slab din scrim). */
.promo-card--media .promo-card__claim,
.promo-card--media .promo-card__sub {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 0 14px rgba(0, 0, 0, .5);
}
/* Stripurile media mici (non-lead, ex. Motul): sticlele stau dreapta, deci
   textul trebuie ținut în jumătatea stângă întunecată. Scrim stânga puternic +
   claim îngustat ca să nu ajungă peste sticle. */
.promo-card--media:not(.promo-card--lead)::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.82) 40%, rgba(0,0,0,.4) 58%, rgba(0,0,0,0) 76%),
    linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 60%);
}
.promo-card--media:not(.promo-card--lead) .promo-card__claim { max-width: 17ch; }
/* Ravenol wide: sticlele stau dreapta (în afara scrim-ului) → rămân luminoase;
   tentă mult mai lejeră ca banner-ul să nu pară întunecat/murdar. Textul ocupă
   stânga lată. */
.promo-card--wide.promo-card--media::before { background: rgba(23, 19, 14, 0.05); }
.promo-card--wide.promo-card--media::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.46) 34%, rgba(0,0,0,0) 58%),
    linear-gradient(0deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 55%);
}
.promo-card--wide.promo-card--media { background-position: center; }
/* Banner-ul wide are mult spațiu pe stânga → titlu mai mare + subtitlu (ca la
   Castrol) ca să nu rămână gol negru. */
.promo-card--wide.promo-card--media .promo-card__claim { font-size: 1.4rem; max-width: 42ch; }
.promo-card--wide.promo-card--media .promo-card__sub { font-size: 1rem; max-width: 46ch; }
/* Logoul e în fluxul panoului aici (vezi blade) → niciodată peste titlu.
   container-type: size ca să putem adapta conținutul la înălțimea reală a
   rândului (minmax(140px,1fr) → variază cu înălțimea rail-ului). */
.promo-card--wide.promo-card--media { container-type: size; }
.promo-card--wide.promo-card--media .promo-card__logo {
  position: static;
  height: 30px;
  align-self: flex-start;
}
/* Card scund → renunțăm la subtitlu și strângem, ca să nu se înghesuie. */
@container (max-height: 182px) {
  .promo-card--wide.promo-card--media .promo-card__sub { display: none; }
  .promo-card--wide.promo-card--media .promo-card__logo { height: 26px; }
  .promo-card--wide.promo-card--media .promo-card__panel { padding: 14px 20px; gap: 6px; }
}
.promo-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  z-index: 0;
}
/* Scrim pentru lizibilitatea panoului text (stânga-jos) peste clip. */
.promo-card--media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.5) 32%, rgba(0,0,0,0) 62%),
    linear-gradient(0deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 45%);
}
/* Utilizatorii care preferă mișcare redusă văd doar posterul (background-image). */
@media (prefers-reduced-motion: reduce) {
  .promo-card__video { display: none; }
}

/* Brand grid — 12 cols × 2 rows of gray 1:1 tiles */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap-grid-nav);
}
.brand-tile {
  aspect-ratio: 1 / 1;
  background: var(--color-surface);
  border: 1px solid transparent;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  color: #000;
  text-align: center;
  padding: 8px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.brand-tile__initial {
  font-weight: 700;
  font-size: 1.65rem;
  color: rgba(0, 0, 0, 0.35);
  line-height: 1;
}
.brand-tile__name {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.brand-tile--all .brand-tile__name { color: var(--color-primary); }
.brand-tile--all .brand-tile__initial { color: var(--color-primary); }
@media (hover: hover) {
  .brand-tile:hover {
    background: #fff;
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
  }
  .brand-tile:hover .brand-tile__initial { color: var(--color-primary); }
}

/* Brand tiles pot fi <button> (landing-urile de secțiune: click → picker) —
   resetăm aspectul de buton, păstrând layout-ul flex-column al tile-ului. */
button.brand-tile {
  border: 1px solid var(--color-border);
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}
/* Grila cu logo-uri (landing): logo pe fundal alb (multe logo-uri sunt închise
   pe transparent), înălțime fixă, contain — logo lipsă → inițiala (fallback). */
.brand-grid--logos .brand-tile { background: #fff; }
.brand-tile__logo {
  display: flex; align-items: center; justify-content: center;
  height: 48px; width: 100%;
}
.brand-tile__logo img {
  max-height: 100%; max-width: 100%; width: auto; height: auto;
  object-fit: contain;
}
@media (hover: hover) {
  .brand-grid--logos button.brand-tile:hover { background: var(--color-primary); border-color: var(--color-primary); }
  /* Pe hover roșu, un logo întunecat s-ar pierde — îl albim discret. */
  .brand-grid--logos button.brand-tile:hover .brand-tile__logo img { filter: brightness(0) invert(1); }
}

/* Landing de secțiune — antet + picker centrat, ca homepage-ul. */
.section-landing { margin-top: 24px; }
.section-landing__title { margin-bottom: 6px; }
.section-landing__lead { color: #767676; margin-bottom: 18px; max-width: 60ch; }


/* Category grid — white cards, outline icon on tint tile, lift hover */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-grid-nav);
}
.category-tile {
  min-height: var(--block-tile-min-height);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  text-decoration: none;
  color: #000;
  font-weight: 600;
  font-size: 1rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cat-ic {
  width: var(--category-icon-size);
  height: var(--category-icon-size);
  border-radius: var(--radius);
  background: var(--color-tint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.cat-ic img { width: 22px; height: 22px; display: block; }
@media (hover: hover) {
  .category-tile:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
  }
}

/* Promo banner pair */
.banner-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.banner {
  border-radius: var(--radius);
  min-height: 290px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  text-decoration: none;
}
.banner__kicker { font-weight: 700; font-size: 0.93rem; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.banner h3 { max-width: 440px; font-size: var(--font-size-h2); }
.banner__cta { height: 48px; min-width: 170px; font-size: 1.1rem; margin-top: 10px; }

/* Bannere de jos cu artă de produs (ZviZZer / Foliatec) — poze REALE recuperate
   din bannerele kvik (self-hosted: CDN-ul kvik moare la cutover și nu se
   leechează). Arta stă dreapta cu object-fit:contain → produsele se văd
   INTEGRAL la orice rezoluție (fără crop), textul rămâne HTML pe stânga. */
.banner--media { position: relative; overflow: hidden; }
.banner__art {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: 86%;
  width: auto;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
}
.banner--media .banner__kicker,
.banner--media h3,
.banner--media .banner__cta { position: relative; z-index: 1; }
/* Specificitate egală cu `.home-page .banner-pair--stretch .banner` (care altfel
   resetează padding-ul și lățimea titlului) ca textul să NU intre peste artă. */
.home-page .banner-pair--stretch .banner.banner--media { padding-right: 52%; }
.home-page .banner-pair--stretch .banner.banner--media h3 { max-width: 100%; }
/* Pe telefoane înguste (≤599) bannerul are ~343px: arta ar fi aproape la fel de
   lată ca el și ar sta sub text (titlul strivit la ~130px). Acolo rămâne
   text-only, ca acum în producție; pe tabletă (bannerul e încă lat) arta rămâne. */
@media (max-width: 599px) {
  .banner__art { display: none; }
  .home-page .banner-pair--stretch .banner.banner--media { padding-right: 36px; }
}

/* News teasers — 2-col grid of gray cards, thumb left */
.news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-grid-nav);
}
.news-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 8px;
  display: flex;
  gap: 16px;
  text-decoration: none;
  color: inherit;
}
.news-card__thumb {
  flex: none;
  width: 190px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--color-hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 130px;
  overflow: hidden;
}
.news-card__thumb img {
  width: 100%;
  height: 100%;
  min-height: 130px;
  object-fit: cover;
  object-position: center;
  display: block;
}
.news-card__body { padding: 8px 8px 8px 0; min-width: 0; }
.news-card__title { display: block; font-weight: 700; font-size: var(--font-size-h4); line-height: 1.25; }
.news-card__date { display: block; color: rgba(0, 0, 0, 0.45); font-size: 0.86rem; margin: 4px 0 6px; }
.news-card__teaser {
  position: relative;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.65);
}
@media (hover: hover) {
  .news-card:hover .news-card__title { color: var(--color-primary); }
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  margin-top: 56px;
  background: var(--color-ink);
  color: rgba(255, 255, 255, 0.75);
  padding: 0 0 28px;
}

/* Support CTA band */
.footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
}
.footer-cta h3 { color: #fff; font-size: 1.35rem; }
.footer-cta p { margin: 4px 0 0; color: rgba(255, 255, 255, 0.55); }
.footer-cta__btn { height: 46px; min-width: 200px; }

/* Link columns */
.footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 32px;
  padding: 30px 0 34px;
}
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; font-size: 0.93rem; }
.footer-col h4 {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
}
.footer-col a { color: rgba(255, 255, 255, 0.75); text-decoration: none; }
@media (hover: hover) {
  .footer-col a:hover { color: #fff; text-decoration: underline; }
}
/* „Setări cookie" e un <button> (redeschide panoul de consimțământ) stilat
   identic cu linkurile coloanei — retragerea acordului la fel de ușoară ca darea. */
.footer-link-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.93rem;
  color: rgba(255, 255, 255, 0.75);
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) {
  .footer-link-btn:hover { color: #fff; text-decoration: underline; }
}
.footer-link-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Logo real în footer: pe fundal ink, literele închise (#17130E) devin albe;
   roșul rămâne roșu. CSS `fill` bate atributul de prezentare din SVG. */
.footer-logo { display: inline-block; line-height: 0; }
.footer-logo svg { width: 190px; height: auto; display: block; }
.footer-logo svg path[fill="#17130E"] { fill: #fff; }
.footer-col--brand p { margin: 2px 0 0; color: rgba(255, 255, 255, 0.55); max-width: 300px; }
.footer-social { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.72);
  transition: color .15s ease, transform .15s ease;
}
.footer-social a:hover,
.footer-social a:focus-visible { color: #fff; transform: translateY(-1px); }
.footer-social a .icon { display: inline-flex; }

/* Legal / badges / payment row */
.footer-base { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 24px; }
.footer-legal {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.86rem;
}
.footer-legal a { color: inherit; }
.footer-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
/* Plăcuța albă comună insignelor din footer. (`.pay-chip` — chip-urile TEXT
   Maestro/Apple Pay/Google Pay — a dispărut: mărcile sunt acum imagini reale
   în plăcuța .pay-logo, ca Visa/Mastercard/Netopia.) */
.authority-badge, .tecdoc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius);
  background: #fff;
  border: 0;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 0.86rem;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}
/* Insignele oficiale ANPC (SAL) și SOL — bannerele oficiale 404×100. Vin cu
   fundal alb și contur rotunjit PROPRIU, deci ancora renunță la plăcuță (altfel
   ar ieși două conturi concentrice): imaginea E plăcuța. 46px randat, lângă
   plăcuțele .pay-logo de 48px → rândul se citește la aceeași înălțime.
   max-width: 100% = niciodată scroll orizontal pe ecrane înguste. */
.authority-badge { background: transparent; padding: 0; }
.authority-badge img { display: block; height: 46px; width: auto; max-width: 100%; }
@media (hover: hover) {
  .authority-badge:hover img { opacity: 0.85; }
}
/* Official TecDoc Inside signet (contract 294698: rendered ≥100px wide). */
.tecdoc-badge { padding: 4px 10px; }
.tecdoc-badge img { display: block; width: 128px; height: auto; }
/* .6 alpha = ~6.9:1 pe #17130E — nota de copyright TecDoc e text contractual,
   trebuie să rămână lizibilă (AA). */
.footer-copy { margin-top: 18px; text-align: center; color: rgba(255, 255, 255, 0.6); font-size: 0.86rem; }

/* ------------------------------------------------------------ responsive */

/* Sub breakpointul de nav (1200px): hamburgerul (mutat în main-bar) preia
   meniul, iar banda roșie „Meniu" se COLAPSEAZĂ la 0 — headerul devine o
   singură bară compactă. #catmenu rămâne în nav-band dar e position:absolute
   (raportat la .site-header sticky) → se deschide corect deși banda are 0 px. */
@media (max-width: 1199px) {
  .nav-cats, .nav-band__links, .nav-band__phone { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-band { background: transparent; }
  .nav-band__in { height: 0; min-height: 0; padding: 0; }
  .catmenu-wrap { position: static; }
  .catmenu { left: 16px; right: 16px; width: auto; border-radius: var(--radius); }
  /* Sub 1200px căutarea trece pe rândul ei — altfel chip-ul de vehicul +
     acțiunile o strivesc la 900-1199px. */
  .main-bar { flex-wrap: wrap; gap: 12px; }
  .search { order: 3; flex: 1 1 100%; }
  .header-actions { margin-left: auto; }
  .brand-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .promo-grid { grid-auto-rows: 190px; }
}

@media (max-width: 899px) {
  .top-usps { display: none; }
  .top-line__in { justify-content: flex-end; }
  .catmenu { max-height: calc(100vh - 180px); max-height: calc(100dvh - 180px); }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .promo-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .promo-card--lead { grid-row: auto; }
  /* Cardul video Castrol rămâne hero pe mobil: 2 rânduri ca logoul (sus) și
     textul (jos) să nu se înghesuie/suprapună pe un singur rând scund. */
  .promo-card--media.promo-card--lead { grid-row: span 2; }
  /* Crop-ul aproape-pătrat pe mobil aduce sticlele mari peste zona de text →
     scrim de jos mai puternic (bandă întunecată sub tot textul), plus wash
     stânga pentru logo/sus. */
  .promo-card--media.promo-card--lead::after {
    background:
      linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.85) 30%, rgba(0,0,0,.68) 45%, rgba(0,0,0,.34) 60%, rgba(0,0,0,0) 80%),
      linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.3) 50%, rgba(0,0,0,0) 78%);
  }
  /* Stripul media mic (non-lead) e scund pe mobil → logo mai mic + spațiere
     strânsă ca logo + claim (2 rânduri) + CTA să încapă fără suprapunere. */
  /* Grila definește doar 3 track-uri de rând → pe mobil unele stripuri cad pe
     un rând auto care se prăbușește (~99px) și textul se suprapune. min-height
     ține stripurile media consecvente (nu afectează desktopul, unde rândul e
     168px > 140). */
  .promo-card--media:not(.promo-card--lead) { min-height: 140px; }
  /* Pe mobil slotul wide crop-ează la centru; sticlele fiind la dreapta,
     mutăm fereastra spre dreapta ca să se vadă. */
  .promo-card--wide.promo-card--media { background-position: 84% center; }
  /* Cardul wide e scund pe mobil → titlu compact, fără subtitlu. */
  .promo-card--wide.promo-card--media .promo-card__claim { font-size: .9rem; max-width: 20ch; }
  .promo-card--wide.promo-card--media .promo-card__sub { display: none; }
  .promo-card--media:not(.promo-card--lead) .promo-card__logo { height: 22px; top: 12px; }
  .promo-card--media:not(.promo-card--lead) .promo-card__logo--badge { height: 30px; }
  .promo-card--media:not(.promo-card--lead) .promo-card__panel { padding: 14px; gap: 6px; }
  .promo-card--media:not(.promo-card--lead) .promo-card__claim { font-size: .85rem; }
  .promo-card--media:not(.promo-card--lead) .promo-card__cta { height: 32px; }
  .news-grid { grid-template-columns: 1fr; }
  .banner-pair { grid-template-columns: 1fr; }
  .brand-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

/* Main mobile cut */
@media (max-width: 599px) {
  .top-line { display: none; }
  /* Header compact pe mobil = O bară (rând 1: ☰ + logo + cont + coș) +
     rând 2: căutarea. Banda roșie e colapsată (regula <1200). ~2 rânduri,
     ~100px total (înainte ~166px). */
  .main-bar { padding: 8px 14px; gap: 8px 10px; align-items: center; }
  /* Logo-ul cedează ultimul: dacă la lățimi extreme chiar nu mai încape, se
     micșorează câțiva px (min-width:0 + svg fluid) în loc să rupă ceva. */
  .logo { min-width: 0; }
  .logo svg { width: 128px; max-width: 100%; height: auto; }
  /* 2 clase → bate .header-action__label--account (o clasă) indiferent de
     ordinea în fișier, altfel numele contului rămânea vizibil pe mobil. */
  .main-bar .header-action__label { display: none; }
  /* Acțiunile mai mari + mai depărtate ca să umple spațiul liber dintre logo și
     margine (tap-uri mai ușoare). Aliniere: svg pe `display:block` scoate spațiul
     de baseline (cauza mașinii „mai sus"), iar `.icon` flex-center pune toate cele
     4 iconițe exact pe aceeași linie. */
  /* NU pe rând nou (bug OnePlus/Android cu display-size mai mare = viewport CSS mai
     îngust): `flex: 1` (flex-basis 0) ține acțiunile MEREU pe rândul logo-ului,
     oricât de îngust/scalat e ecranul. Grupate la dreapta (ca pe iPhone), cu gap
     care se STRÂNGE pe ecrane înguste (clamp) în loc să împacheteze. */
  /* min-width:0 e ESENȚIAL: flex items au implicit min-width:auto (nu se strâng sub
     lățimea conținutului), deci flex-basis:0 NU împiedica împachetarea până acum.
     Cu min-width:0, acțiunile chiar au bază 0 → NU trec niciodată pe rând nou. */
  .header-actions { flex: 1; min-width: 0; justify-content: flex-end; gap: clamp(10px, 4vw, 20px); margin-left: 10px; }
  .header-actions .icon { display: flex; align-items: center; }
  /* Dimensiune FLUIDĂ: iconițele scalează cu lățimea (nu pot fi „prea mari ca să
     încapă") — ~26px pe telefoane normale, se strâng spre 22px pe cele înguste.
     Nicio valoare fixă pe rezoluție → corect pe ORICE ecran, fără breakpoint-uri. */
  .header-action .icon svg,
  .garage-menu__btn .icon svg { width: clamp(22px, 7vw, 26px); height: clamp(22px, 7vw, 26px); display: block; }
  .header-action__badge:not([hidden]) { display: block; }
  .search input { height: 42px; }
  /* „Garajul meu" pe mobil = acțiune ICON-ONLY, aliniată cu surorile din header
     (contact / cont / coș): fără pastilă, bordură, fundal sau săgeată. Așa
     rândul logo + acțiuni încape pe o singură linie la 360–412px, iar toate
     iconițele stau pe aceeași linie de bază, la aceleași înălțimi/spații (S1).
     Comportamentul e neschimbat — tap-ul deschide același dropdown al garajului.
     Eticheta era deja ascunsă; ascundem și săgeata și scoatem chenarul, apoi
     mărim glyph-ul mașinii la 22px ca celelalte iconițe (.header-action svg). */
  .garage-menu__label,
  .garage-menu__arrow { display: none; }
  .garage-menu__btn { border: 0; background: none; padding: 0; gap: 0; }
  /* Dropdown-ul garajului: pe desktop e ancorat right:0 de buton; pe mobil
     butonul e prima acțiune (spre stânga) → panoul de 320px ieșea în afara
     ecranului pe stânga. Îl ancorăm de header (garage-menu static → absolute
     se raportează la .site-header sticky) și-l facem full-width. */
  .garage-menu { position: static; }
  .garage-menu__drop { left: 8px; right: 8px; width: auto; max-width: none; }
  .wrap { padding: 0 16px; }
  .catmenu { left: 8px; right: 8px; max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); }

  /* Header STABIL pe mobil: NU reacționează la scroll. Încercările anterioare
     (hide complet / colaps la bară slim) schimbau înălțimea headerului sticky
     în timpul scroll-ului → reflow + salt de conținut + pâlpâire full↔slim (un
     „fiasco" pe telefon). Pe desktop hide-ul e neted DOAR pentru că e transform
     (fără reflow). Pe mobil rămâne fix, compact, predictibil — zero mișcare.
     transform:none anulează translateY(-100%) pus de shop.js. */
  .site-header.header--hidden { transform: none; }

  .garage { padding: 18px 16px 16px; }
  .garage h1 { font-size: 1.35rem; }
  .garage__sub { font-size: 0.93rem; }
  .vehicle-picker { flex-direction: column; }
  .vtype-toggles { justify-content: stretch; }
  .vtype { flex: 1; height: 48px; }
  .vp-field { min-width: 0; }
  .vp-submit { width: 100%; height: 48px; }

  .promo-card__claim { font-size: 1.2rem; }
  .promo-card--lead .promo-card__claim { font-size: 1.35rem; }
  .promo-card__art { font-size: 8rem; }

  .brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .category-tile { font-size: 0.93rem; padding: 10px; gap: 10px; }
  .cat-ic { width: 34px; height: 34px; }
  .cat-ic img { width: 20px; height: 20px; }

  .news-card__thumb { width: 110px; min-height: 100px; }
  .news-card__thumb img { min-height: 100px; }

  .footer-cta { flex-direction: column; align-items: flex-start; padding: 22px 0; }
  .footer-cols { grid-template-columns: 1fr; gap: 24px; }
  /* Bannerele ANPC/SOL sunt LATE (4:1) — sub 600px coborâm la 38px ca cele
     două să încapă pe rânduri fără să strivească restul insignelor. */
  .authority-badge img { height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .brand-tile, .category-tile { transition: none; }
  /* Reduced-motion (frecvent pe mobil: economisire baterie / „Remove
     animations"): fără tranziție, hide-ul pe scroll ar TELEPORTA headerul de
     ~166px instant = dispariție bruscă. Îl lăsăm pe loc — zero mișcare. */
  .site-header.header--hidden { transform: none; }
}

/* --------------------------------------------- vehicle catalog pages */
/* /piese-auto/{make}/{model}/{engine}-{carId} — breadcrumb, header band,
   assembly-group tile grid, drill-down sidebar, spec table. Same identity
   rules: 7px radius, hairlines, #F3F3F3 zebra, red rings. */

.vehicle-page { padding-bottom: 48px; }
/* Pagina de căutare împrumută referința catalogului (vehicle): același offset
   sus + spațiere breadcrumb→h1. Fără regulă proprie breadcrumb-ul se lipea de
   header (înghesuit). */
.search-page { padding-bottom: 48px; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.93rem;
  min-width: 0;
}
.breadcrumb a { text-decoration: none; display: inline-flex; align-items: center; }
.breadcrumb__sep { color: rgba(0, 0, 0, 0.3); }
.breadcrumb__muted { color: rgba(0, 0, 0, 0.45); }
/* Pe mobil breadcrumb-ul se împacheta pe 2-3 rânduri (ocupa mult spațiu). Acum o
   SINGURĂ linie cu scroll orizontal + fade la margini (idiom kvik). Fade-urile
   apar doar în direcția în care mai există conținut ascuns — clasele bc-fade-*
   sunt puse de shop.js (initBreadcrumbScrollFade) după poziția de scroll. */
@media (max-width: 599px) {
  .breadcrumb {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .breadcrumb::-webkit-scrollbar { display: none; }
  .breadcrumb > * { flex: none; }
  .breadcrumb.bc-fade-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); }
  .breadcrumb.bc-fade-left { -webkit-mask-image: linear-gradient(to right, transparent, #000 22px); mask-image: linear-gradient(to right, transparent, #000 22px); }
  .breadcrumb.bc-fade-left.bc-fade-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent); }
}
@media (hover: hover) {
  .breadcrumb a:hover { color: var(--color-primary); }
}

.vehicle-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 20px;
}
.vehicle-head__text { min-width: 0; }
.vehicle-head__line {
  margin: 6px 0 0;
  color: var(--color-primary);
  font-weight: 700;
}
.vehicle-head__garage { margin: 12px 0 0; }
.vehicle-head__garage-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  padding: 7px 12px;
}
.vehicle-head__garage-btn .icon { display: inline-flex; }

/* Car photo, top-right; degrades to a muted silhouette when absent. */
.vehicle-head__photo {
  flex: none;
  width: 180px;
  max-width: 40vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vehicle-head__photo img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.vehicle-head__silhouette {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 96px;
  color: rgba(0, 0, 0, 0.22);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
}
@media (max-width: 599px) {
  .vehicle-head { flex-direction: column-reverse; align-items: stretch; }
  .vehicle-head__photo { width: 140px; max-width: none; align-self: flex-start; }
}

.vehicle-body--with-sidebar {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.group-sidebar ul { list-style: none; margin: 0; padding: 0; }
.group-sidebar a {
  display: block;
  padding: 8px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border-bottom: 1px solid var(--color-hairline);
  border-radius: var(--radius);
}
.group-sidebar a.is-active {
  box-shadow: 0 0 0 1px var(--color-primary);
  border-bottom-color: transparent;
}
/* Rândurile top-level poartă iconița grupei (partials/assembly-icon, cheiată pe
   nodeId). Icon + nume în flex; iconița moștenește culoarea linkului (currentColor)
   → urmează activ/hover (roșu) fără regulă proprie. Copiii (fără clasa __link)
   rămân block, fără iconiță. */
.group-sidebar__link { display: flex; align-items: center; gap: 10px; }
.group-sidebar__link .assembly-tile__icon { flex: none; color: inherit; }
.group-sidebar__link .assembly-tile__icon svg { width: 20px; height: 20px; }
.group-sidebar__name { min-width: 0; }
.group-sidebar__children { margin-left: 14px; }
.group-sidebar__children a { font-weight: 400; }
@media (hover: hover) {
  .group-sidebar a:hover { color: var(--color-primary); }
}

.assembly-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.assembly-grid--narrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.assembly-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--block-tile-min-height);
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  overflow-wrap: anywhere;
}
/* Iconița grupei de montaj (partials/assembly-icon): stroke=currentColor,
   gri discret în repaus, roșu la hover — ca .cat-tree / direcția de outline
   de-kvik. Doar cele 36 de grupe top-level au span; restul rămân text-only. */
.assembly-tile__icon {
  flex: none;
  display: inline-flex;
  color: rgba(0, 0, 0, 0.55);
}
.assembly-tile__icon svg { display: block; width: 22px; height: 22px; }
.assembly-tile__name { min-width: 0; }
@media (hover: hover) {
  .assembly-tile:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
  }
  .assembly-tile:hover .assembly-tile__icon { color: var(--color-primary); }
}

/* /cautare: TecDoc equivalents section under the Meili results. */
.search-equiv { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.search-equiv h2 { margin: 0 0 16px; font-size: var(--font-size-h3); }
.product-row__match { margin: 2px 0 0; font-size: 0.86rem; color: rgba(0, 0, 0, 0.45); }

/* /cautare: scoping pe vehiculul selectat (cookie `vehicul`). */
.search-vehicle { display: flex; align-items: center; gap: 10px; min-width: 0; }
.search-vehicle__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-vehicle__clear {
  border: 0;
  background: none;
  padding: 0 2px;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  flex: none;
}
.search-vehicle__change { flex: none; font-size: 0.9rem; font-weight: 600; color: var(--color-primary); }
.search-fit-head { margin: 18px 0 10px; font-size: var(--font-size-h3); }
.product-row__fit { margin: 2px 0 0; font-size: 0.86rem; font-weight: 600; color: var(--color-available); }

.group-empty { margin-top: 8px; padding: 28px; }
.group-empty h2 { margin-bottom: 8px; }
.group-empty p { margin: 0 0 8px; }
.group-empty a { color: var(--color-primary); font-weight: 600; }

.vehicle-main > .notice { margin-top: 24px; }

.vehicle-specs { margin-top: 40px; }
.vehicle-specs h2 { margin-bottom: 12px; }
.vehicle-specs__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
}
.vehicle-specs__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius);
}
.vehicle-specs__row:nth-child(4n + 1),
.vehicle-specs__row:nth-child(4n + 2) { background: var(--color-surface); }
.vehicle-specs__row span { color: rgba(0, 0, 0, 0.45); }

/* Picker degradation message ("momentan indisponibil, reîncearcă"). */
.vp-error {
  display: none;
  margin: 8px 0 0;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.93rem;
}
.vp-error.is-visible { display: block; }

@media (max-width: 899px) {
  .vehicle-body--with-sidebar { grid-template-columns: 1fr; }
  .group-sidebar { order: 2; }
  .assembly-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .assembly-grid--narrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .assembly-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assembly-grid--narrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vehicle-specs__grid { grid-template-columns: 1fr; }
  .vehicle-specs__row:nth-child(4n + 1),
  .vehicle-specs__row:nth-child(4n + 2) { background: none; }
  .vehicle-specs__row:nth-child(odd) { background: var(--color-surface); }
}

/* ----------------------------------------------- leaf product listing */
/* Reference: category listing template — sort tab row (active black,
   inactive muted), horizontal hairline-bordered product rows (image /
   name+availability / price+CTA), bordered pager. */

/* Facet rows (#10): type + brand chips above the sort tabs. Wrap by
   default; if a single row still overflows on narrow screens it scrolls
   INSIDE itself (never the page — no-horizontal-scroll house rule). */
.facet-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  max-width: 100%;
}
.facet-row__label {
  flex: none;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.55);
  font-size: 0.9rem;
}
.facet-chip {
  display: inline-block;
  padding: 4px 11px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.facet-chip.is-active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}
@media (hover: hover) {
  .facet-chip:hover { border-color: var(--color-primary); }
}

/* Marca facet — wrapping logo grid (vehicle leaf listings). No horizontal
   scroll: tiles wrap; shop.js clips to ~2 rows until „Încă N mărci". */
.facet-brands {
  margin: 0 0 14px;
  max-width: 100%;
}
.facet-brands__label {
  display: block;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.55);
  font-size: 0.9rem;
  margin: 0 0 8px;
}
.facet-brands__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-width: 100%;
}
@media (min-width: 640px) {
  .facet-brands__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .facet-brands__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
/* Index-clip (shop.js) hides overflow tiles via .facet-brand--clipped —
   grid auto-packs so collapsed view is always full rows, no white gaps. */
.facet-brand--clipped,
.facet-brand[hidden] {
  display: none !important;
}
.facet-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 64px;
  padding: 6px 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.75);
  text-align: center;
  box-sizing: border-box;
}
.facet-brand__logo {
  display: block;
  max-width: 72%;
  max-height: 28px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.facet-brand__text {
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}
/* Cu logo: numele e aria/title pe tile; textul vizual e mic sub logo. */
.facet-brand:has(.facet-brand__logo) .facet-brand__text {
  font-size: 0.62rem;
  color: rgba(0, 0, 0, 0.55);
  -webkit-line-clamp: 1;
}
.facet-brand--all .facet-brand__text {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primary);
  -webkit-line-clamp: 1;
}
.facet-brand.is-active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.facet-brand.is-active .facet-brand__text { color: var(--color-primary); }
@media (hover: hover) {
  .facet-brand:hover { border-color: var(--color-primary); }
}
.facet-brands__more {
  display: inline-block;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.facet-brands__more[hidden] { display: none; }

/* Pagina de categorie universală (path VERBATIM kvik): antet. Grila de chip-uri
   a subcategoriilor a fost ELIMINATĂ în faza 3 (redundantă cu arborele din
   sidebar) — navigarea spre copii trăiește integral în .cat-tree. */
.category-page { padding-bottom: 48px; }
.category-head { margin: 14px 0 16px; }
.category-head h1 { margin: 0; }

/* Sidebar stâng: arborele de categorii (pagini de categorie + pagini de produs
   cu category_path universal). Card alb cu rânduri hairline; nodul curent roșu
   (--color-primary); contoare mute; copiii indentați progresiv. Ascuns <1200px
   (ca .cat-sidebar) — pe mobil navigația de categorii vine din meniul hamburger. */
.cat-tree {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  align-self: start;
}
.cat-tree__list { list-style: none; margin: 0; padding: 0; }
.cat-tree__item + .cat-tree__item { border-top: 1px solid var(--color-hairline); }
.cat-tree__list .cat-tree__list { border-top: 1px solid var(--color-hairline); }
.cat-tree__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.92rem;
}
/* Numele crește (flex:1) ca să împingă countul la dreapta indiferent dacă
   rândul are sau nu iconiță în față (rândurile de nivel 1 au iconiță). */
.cat-tree__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* Iconița SVG a umbrelei (doar nivel 1) — ~20px, ca în header/sidebar. */
.cat-tree__icon {
  flex: none;
  display: inline-flex;
  width: 20px;
  height: 20px;
}
.cat-tree__icon img { width: 100%; height: 100%; object-fit: contain; }
.cat-tree__count {
  flex: none;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.4);
}
.cat-tree__link.is-current { color: var(--color-primary); font-weight: 800; }
.cat-tree__link.is-current .cat-tree__count { color: var(--color-primary); }
/* Indentare progresivă: fiecare .cat-tree__list ancestor suplimentar = un nivel. */
.cat-tree__list .cat-tree__list .cat-tree__link { padding-left: 24px; font-weight: 500; }
.cat-tree__list .cat-tree__list .cat-tree__list .cat-tree__link { padding-left: 36px; }
.cat-tree__list .cat-tree__list .cat-tree__list .cat-tree__list .cat-tree__link { padding-left: 48px; }
@media (hover: hover) {
  .cat-tree__link:not(.is-current):hover { color: var(--color-primary); }
}
@media (max-width: 1199px) {
  .cat-tree { display: none; }
}

/* #6 aggregate listing under a non-leaf's child tiles. */
.assembly-aggregate { margin-top: 28px; }
.assembly-aggregate__head {
  margin: 0 0 14px;
  font-size: var(--font-size-h3);
}

.sort-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.sort-tabs a {
  text-decoration: none;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}
.sort-tabs a.is-active { color: #000; font-weight: 700; }
@media (hover: hover) {
  .sort-tabs a:hover { color: var(--color-primary); }
}
.sort-tabs__count { margin-left: auto; color: rgba(0, 0, 0, 0.45); font-size: 0.93rem; white-space: nowrap; }

/* Contor „XXXX produse" doar pentru staff (SSO din CRM). Ascuns implicit pe
   AMBELE pagini (căutare uncached + catalog whole-page cached); shop.js pune
   body.is-staff din hidratarea /api/cos (staff:true) → funcționează egal pe
   pagini cache-uite și nu. Un singur mecanism, fără gating server-side. */
[data-staff-only] { display: none; }
body.is-staff [data-staff-only] { display: inline-block; }

/* ---- /cautare: bara de filtre (fațete Meili) ----------------------------
   Butoane per grup → popover ancorat (checkbox + count + căutare-în-listă),
   filtrele active ca chips-uri detașabile. Server-rendered; JS-ul face doar
   toggle-ul popover-ului și căutarea-în-listă (fără JS: „Aplică" submitează
   formularul GET oricum). Pe mobil popover-ul devine panou full-width. */
.search-filters { margin-bottom: 14px; }
.search-filters__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.sf-group { position: relative; }
.sf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 0.93rem;
  padding: 8px 13px;
  cursor: pointer;
}
.sf-btn.is-active { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-tint); }
.sf-group.is-open .sf-btn { border-color: var(--color-primary); color: var(--color-primary); }
.sf-btn__count {
  background: var(--color-primary);
  color: #fff;
  border-radius: 100px;
  font-size: 0.75rem;
  line-height: 1;
  padding: 3px 7px;
}
.sf-btn__chev { font-size: 0.7rem; opacity: 0.6; transition: transform 0.15s; }
.sf-group.is-open .sf-btn__chev { transform: rotate(180deg); }
@media (hover: hover) {
  .sf-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
}
/* Panoul: pe desktop popover ancorat sub buton, cu elevație REALĂ (altfel se
   pierde în pagina albă); pe mobil devine bottom-sheet fix cu backdrop —
   ancorarea absolută era imposibil de plasat corect în flux pe ecran mic. */
.sf-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  width: 340px;
  max-width: min(94vw, 380px);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2), 0 3px 10px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sf-pop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-hairline);
  font-weight: 700;
}
.sf-pop__close {
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  padding: 6px;
  margin: -6px;
}
@media (hover: hover) {
  .sf-pop__close:hover { color: var(--color-primary); }
}
.sf-pop__search {
  margin: 10px 14px 4px;
  height: 40px;
  background: var(--color-surface);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0 12px;
  font-size: 0.95rem;
  outline: none;
}
.sf-pop__search:focus { border-color: var(--color-primary); background: #fff; }
.sf-pop__search::placeholder { color: rgba(0, 0, 0, 0.45); }
.sf-pop__list {
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 8px;
}
.sf-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 8px;
  font-size: 0.95rem;
  cursor: pointer;
  border-radius: var(--radius);
}
.sf-opt input { flex: none; width: 18px; height: 18px; accent-color: var(--color-primary); }
.sf-opt__logo {
  flex: none;
  display: block;
  width: 36px;
  height: 20px;
  object-fit: contain;
}
.sf-opt__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-opt__count { flex: none; color: rgba(0, 0, 0, 0.45); font-size: 0.8rem; }
@media (hover: hover) {
  .sf-opt:hover { background: var(--color-surface); }
}
.sf-pop__actions {
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--color-hairline);
  padding: 10px 14px;
  background: #fff;
}
.sf-pop__apply { flex: 1; height: 40px; font-size: 0.95rem; }
.sf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-tint);
  color: var(--color-primary);
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 7px 10px;
  text-decoration: none;
  max-width: 260px;
}
.sf-chip__logo {
  flex: none;
  display: block;
  width: 28px;
  height: 16px;
  object-fit: contain;
}
.sf-chip__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-chip__x { flex: none; font-size: 0.75rem; }
@media (hover: hover) {
  .sf-chip:hover { background: var(--color-primary); color: #fff; }
}
.sf-clear { font-size: 0.85rem; color: rgba(0, 0, 0, 0.55); }
/* Backdrop-ul există în DOM mereu, dar e vizibil DOAR pe mobil (sheet). */
.sf-backdrop { display: none; }
@media (max-width: 640px) {
  .sf-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 75;
  }
  .sf-backdrop[hidden] { display: none; }
  .sf-pop {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    max-height: 74vh;
    border: 0;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.3);
    z-index: 80;
    animation: sf-sheet-in 0.18s ease-out;
  }
  .sf-pop__list { max-height: none; flex: 1; }
  .sf-pop__actions { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}
@keyframes sf-sheet-in {
  from { transform: translateY(24px); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}
/* Cât e deschis sheet-ul pe mobil, pagina de sub el nu scrollează. */
@media (max-width: 640px) {
  body.sf-lock { overflow: hidden; }
}

.product-list { display: flex; flex-direction: column; gap: 12px; }

.product-row {
  display: flex;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px;
  min-width: 0;
}
.product-row__media {
  flex: none;
  width: 150px;
  min-height: 130px;
  border-radius: var(--radius);
  /* Fundal alb + hairline, ca galeria paginii de produs (runda 4). */
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
}
.product-row__media img { max-width: 100%; max-height: 150px; object-fit: contain; }
/* Fără poză → `.no-photo` (vezi secțiunea „placeholder «fără fotografie»").
   Cutia e portret aici (150px lățime × înălțimea rândului) — de asta emblema
   se dimensionează pe lățime. */
.product-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.product-row__name {
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.25;
  color: #000;
  text-decoration: none;
  overflow-wrap: anywhere;
}
@media (hover: hover) {
  .product-row__name:hover { text-decoration: underline; }
}
.product-row__meta {
  margin: 0;
  font-size: 0.93rem;
  color: rgba(0, 0, 0, 0.65);
  display: flex;
  gap: 4px 14px;
  flex-wrap: wrap;
}
.product-row__meta b { color: #000; }
.product-row__avail { margin: 0; font-weight: 700; color: rgba(0, 0, 0, 0.45); }
.product-row__avail.is-ok { color: var(--color-available); }
.product-row__delivery { margin: 0; font-size: 0.93rem; color: rgba(0, 0, 0, 0.45); }

/* Logo de marcă (self-hosted sau URL LIVE getBrands pe digital-assets) sub
   numele+cod, deasupra disponibilității. Cheiat pe numele mărcii proprii.
   Înălțime mică; onerror șterge <span>-ul pentru mărcile fără logo. */
.product-row__brand { display: inline-flex; align-items: center; }
.product-row__brand img {
  height: 22px;
  width: auto;
  max-width: 140px;
  display: block;
  object-fit: contain;
}

/* Criteriile TecDoc (stil kvik) — coloana din mijloc, între nume și preț.
   Etichetă mută, valoare bold.

   REDESIGN 2026-07-26 (escaladare owner): O SINGURĂ coloană, UN criteriu pe
   rând, NICIODATĂ wrap. Valorile aceleiași etichete sunt deja comasate în
   blade (App\Support\RowCriteria::compact — TecDoc repetă „Specificație" de 8
   ori), deci lista e scurtă prin construcție; ce nu încape se taie cu ellipsis,
   iar `title` de pe rând poartă textul complet. Cele două coloane de dinainte
   (`repeat(2, auto)`) + `overflow-wrap: anywhere` rupeau etichetele la mijloc
   de cuvânt („Specificati/e") și valorile („5W-/30") — de asta au dispărut
   amândouă. Plafonul urcă la 30% (o coloană are nevoie de mai multă lățime
   decât două) și tot restul merge la nume (`.product-row__body` e `flex: 1`).
   Istoric: 2026-07-25 grila trecuse de la `flex: 1 1 220px` la strângere după
   conținut (creștea cu ~220px peste nume și-l rupea pe 2-4 rânduri) — partea
   aia de fix rămâne, prin `flex: 0 1 auto` + plafon. Sub 900px regula de mai
   jos (`@media (max-width: 899px)`) redă criteriilor rândul lor întreg. */
.product-row__specs {
  flex: 0 1 auto;
  max-width: 30%;
  min-width: 0;
  align-self: center;
  margin: 0;
  display: grid;             /* o coloană, un rând per criteriu */
  grid-template-columns: minmax(0, 1fr);
  gap: 3px 0;
  font-size: 0.82rem;
  line-height: 1.3;
}
.product-row__spec {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow: hidden;          /* plasă: nimic nu pictează peste celula vecină */
  white-space: nowrap;       /* niciodată wrap — ellipsis, title are textul complet */
}
/* dt FĂRĂ plafon procentual (măsurat pe banc 2026-07-26): cu `max-width: 60%`
   „Clasa de vascozitate conform SAE" se tăia cu ellipsis deși coloana avea loc
   sub plafonul de 30% — exact reclamația owner-ului („truncating attribute
   names"). `flex: 0 1 auto` + `min-width: 0` îl lasă întreg cât încape și îl
   strânge cu ellipsis DOAR când eticheta + valoarea chiar depășesc celula. */
.product-row__spec dt {
  color: rgba(0, 0, 0, 0.5);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-row__spec dd {
  margin: 0;
  font-weight: 700;
  color: #000;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-row__buy {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  min-width: 170px;
}
.product-row__oldprice {
  color: var(--color-price-old);
  text-decoration: line-through;
  font-weight: 600;
}
.product-row__price { font-weight: 700; font-size: 1.35rem; white-space: nowrap; }
.product-row__price small { font-weight: 600; font-size: 0.86rem; color: rgba(0, 0, 0, 0.45); }
/* No published price (null/0 — non-orderable): muted note in the price slot. */
.product-row__price--na { font-weight: 700; font-size: 0.93rem; color: rgba(0, 0, 0, 0.45); }
.product-row__buy .btn { margin-top: 8px; }
/* Formularul „Adaugă în coș" din rând: butonul ocupă lățimea coloanei de preț;
   variantă compactă a CTA-ului de pe pagina de produs (nu 56px). */
.product-row__add { margin-top: 8px; width: 100%; }
.product-row__add .btn--cart {
  flex: none;
  width: 100%;
  height: 42px;
  font-size: 1rem;
  gap: 8px;
}

.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 20px; }
.pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  font-weight: 600;
  text-decoration: none;
  color: #000;
  white-space: nowrap;
}
.pager__btn.is-current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pager__btn.is-disabled { color: var(--color-text-muted); }
.pager__gap { color: rgba(0, 0, 0, 0.3); padding: 0 2px; }
@media (hover: hover) {
  .pager__btn:not(.is-current):not(.is-disabled):hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
  }
}

@media (max-width: 899px) {
  .product-row { gap: 14px; flex-wrap: wrap; }
  .product-row__buy { min-width: 130px; }
  /* Sub 900px nu mai încape o coloană separată de criterii lângă preț:
     criteriile trec pe un rând propriu, sub media+corp. Rămân pe O coloană
     (ca pe desktop, după redesignul din 2026-07-26) — pe două coloane
     etichetele comasate s-ar tăia prea devreme cu ellipsis. Pe rândul lor
     întreg plafonul de 30% nu mai are sens → `none`. */
  .product-row__specs {
    flex: 1 1 100%;
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    order: 3;
    margin-top: 2px;
  }
}

/* ----------------------------------------------------- product page */
/* Reference: NOTES.md §6 — gallery left (~440px) on #F3F3F3 with black
   −N % badge + brand plate, buy panel right with zebra id rows and the
   price ritual (red strikethrough → "Prețul tău" pale-yellow wash with the
   price in a red pill → green savings), zebra spec tables below. */

.product-page { padding-bottom: 48px; }

/* Layout redesign — breadcrumb full-width sus, apoi sidebar de categorii
   (250px, stil kvik) + coloana principală care ocupă tot restul lățimii
   (elimină „lipirea la stânga cu gol la dreapta"). Colapsează la o coloană
   sub 1200px (categoriile sunt oricum în hamburger pe mobil). */
.product-body {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.product-main { min-width: 0; }

.cat-sidebar {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cat-sidebar ul { list-style: none; margin: 0; padding: 0; }
.cat-sidebar li + li { border-top: 1px solid var(--color-hairline); }
.cat-sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
}
.cat-sidebar__icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--color-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cat-sidebar__icon img { width: 24px; height: 24px; object-fit: contain; }
.cat-sidebar__label { overflow-wrap: anywhere; }
@media (hover: hover) {
  .cat-sidebar a:hover { color: var(--color-primary); }
}
@media (max-width: 1199px) {
  .product-body { grid-template-columns: 1fr; }
  .cat-sidebar { display: none; }
}

.product-head { margin: 18px 0 20px; }
.product-head__meta {
  margin: 8px 0 0;
  font-size: 1rem;
  color: rgba(0, 0, 0, 0.65);
  display: flex;
  gap: 4px 16px;
  flex-wrap: wrap;
}
.product-head__meta b { color: #000; }
/* „Linie de produse" lângă titlu (mutată din zebra, owner 2026-07-25) —
   pastilă discretă pe tenta de brand. */
.product-head__line {
  background: var(--color-tint);
  color: var(--color-primary-hover);
  border-radius: var(--radius);
  padding: 2px 8px;
  font-size: 0.86rem;
  font-weight: 600;
}

/* „Distribuie" — buton STATIC lângă titlu (pagina e whole-page cached: link-ul
   se citește la click în shop.js). Secundar, compact — nu concurează cu CTA-ul
   de cumpărare. */
.product-share {
  margin-top: 14px;
  height: 34px;
  padding: 0 12px;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
}

.product-hero {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.product-gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 440px;
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-gallery__main img {
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
}
/* Fără poză → `.no-photo.no-photo--pdp` (eticheta la 14px). */
/* Black square "−N %" badge, white bold — reference identity detail #7. */
.discount-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;                       /* peste `.no-photo` (strat 0) */
  background: #000;
  color: #fff;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  border-radius: var(--radius);
  padding: 12px 10px;
  white-space: nowrap;
}
/* Plăcuța de marcă devine LINK când marca are landing propriu (/marca/{slug}) —
   audit SEO: paginile de marcă erau orfane. Ancora e inline și statică, deci
   placa își păstrează `position: absolute` față de galerie, bit cu bit. */
.product-gallery__brandlink { color: inherit; text-decoration: none; }
.product-gallery__brandlink:hover .product-gallery__brand { border-color: var(--color-ink); }
.product-gallery__brand {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;                       /* peste `.no-photo` (strat 0) */
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-weight: 700;
  font-size: 0.86rem;
  text-transform: uppercase;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Varianta cu logo real de marcă (proxy TecDoc): placă albă strânsă în jurul
   imaginii, ~34px înălțime (mărită ~40% față de runda 3, cerere owner),
   lățime auto după raportul logo-ului. */
.product-gallery__brand--logo {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
}
.product-gallery__brand--logo img {
  height: 34px;
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
}

/* Thumb strip below the main image — reference: gray squares, red ring on
   the active one; buttons swap the main image (inline JS on the page). */
.product-gallery__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.product-gallery__thumb {
  width: 76px;
  height: 76px;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
}
.product-gallery__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.product-gallery__thumb.is-active { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
@media (hover: hover) {
  .product-gallery__thumb:hover { border-color: var(--color-primary); }
}
/* Imaginea principală se poate mări — cursor zoom-in (JS: initGallery). */
.product-gallery__main img { cursor: zoom-in; }

/* Lightbox — overlay full-size peste tot (deasupra header-ului z:60). */
body.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.82);
}
.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  background: #fff;
  border-radius: var(--radius);
}
.lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
@media (hover: hover) {
  .lightbox__close:hover { background: #fff; }
}

/* Zebra key/value rows — #F3F3F3 / white stripes, reference spec-table style. */
.zebra-rows { border-radius: var(--radius); overflow: hidden; }
.zebra-rows__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--radius);
}
.zebra-rows__row:nth-child(odd) { background: var(--color-surface); }
/* Buy-panel identity rows (Numărul piesei / Producător / Cod EAN) sunt scurte
   → eticheta nu se strânge (flex:none), rămâne pe o linie. Rândurile de
   Specificații (criterii TecDoc, uneori foarte lungi) se rescriu mai jos. */
.zebra-rows__row span { color: rgba(0, 0, 0, 0.45); flex: none; }
.zebra-rows__row strong { overflow-wrap: anywhere; text-align: right; }

.buy-panel {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.buy-panel__avail { margin: 0; font-weight: 700; color: rgba(0, 0, 0, 0.45); }
.buy-panel__avail.is-ok { color: var(--color-available); }
.buy-panel__delivery { margin: -10px 0 0; font-size: 0.93rem; color: rgba(0, 0, 0, 0.45); }

/* Blocul compact de livrare (layout owner 2026-07-25): linia „✓ · livrare",
   chip-urile cu sloturi fixe, countdown-ul mereu vizibil și expanderul
   <details>. Identitate: 4px sharp, outline icons, accent roșu. */
.delivery-block { display: flex; flex-direction: column; gap: 8px; margin: -6px 0 0; }
.delivery-block__avail { margin: 0; font-size: 0.95rem; }
.delivery-block__span { color: rgba(0, 0, 0, 0.6); }
.delivery-block__span strong { color: var(--color-text); }
.delivery-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
/* Chip-uri SLIM, pe UN rând (owner 2026-07-25): „Curier · 25 RON" în loc de
   etichetă peste tarif — jumătate din înălțime, aceleași 3 sloturi fixe. */
.delivery-chips__chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 5px 8px;
  min-width: 0;
  white-space: nowrap;
}
.delivery-chips__label {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.55);
  overflow: hidden;
  text-overflow: ellipsis;
}
.delivery-chips__label::after { content: " ·"; }
.delivery-chips__fee { font-size: 0.82rem; font-weight: 700; }
/* Iconița chip-ului (hibrid): accent roșu, nu se comprimă. */
.delivery-chips__chip .icon { flex: none; color: var(--color-primary); display: inline-flex; }
.delivery-chips__chip.is-off .icon { color: rgba(0, 0, 0, 0.35); }
.delivery-chips__chip.is-off {
  border-style: dashed;
  opacity: 0.55;
}
.delivery-chips__chip.is-off .delivery-chips__fee { font-weight: 400; color: rgba(0, 0, 0, 0.45); }
.delivery-block__cutoff {
  margin: 0;
  padding: 6px 10px;
  border-radius: var(--radius);
  /* De-galbenizat (owner 2026-07-25) — tenta roșie de brand, ca restul panoului. */
  background: var(--color-tint);
  color: var(--color-primary-hover);
  font-size: 0.84rem;
  font-weight: 600;
}
.delivery-details__summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-primary);
  user-select: none;
}
.delivery-details__summary::-webkit-details-marker { display: none; }
.delivery-details__summary::before { content: "▸ "; }
.delivery-details[open] .delivery-details__summary::before { content: "▾ "; }
.delivery-details[open] .delivery-details__summary { margin-bottom: 8px; }

/* Rândurile detaliate din expander (fostul „varianta A"). */
.delivery-options {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}
.delivery-options__row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 14px;
}
.delivery-options__row + .delivery-options__row { border-top: 1px solid var(--color-hairline); }
.delivery-options__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--color-primary);
}
.delivery-options__body { min-width: 0; }
.delivery-options__line { margin: 0; font-size: 0.93rem; }
.delivery-options__line strong { font-weight: 700; }
.delivery-options__meta { margin: 2px 0 0; font-size: 0.8rem; color: rgba(0, 0, 0, 0.5); }
/* Price slot when the engine hasn't priced the product (null/0): muted note. */
.buy-panel__noprice { margin: 0; font-weight: 700; color: rgba(0, 0, 0, 0.45); }

/* The price ritual — identity detail #7. */
.price-stack { display: flex; flex-direction: column; gap: 6px; }
.price-stack p { margin: 0; }
/* Prețul vechi — secundar, o linie, discret: etichetă gri mută + preț tăiat
   mai mic ca „Prețul tău" (clar sub prețul tău în ierarhie vizuală). */
/* Varianta „B" (owner 2026-07-25): blocul de preț FĂRĂ banda galbenă —
   hairline sus/jos, insigna de discount sudată de pastilă. */
.price-stack--clean {
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
/* Varianta B = FĂRĂ banda galbenă: anulează wash-ul istoric al rândului
   „Prețul tău" (regula de bază .price-stack__yours rămâne pentru intrările
   v50 din page cache, care încă poartă markupul vechi). */
.price-stack--clean .price-stack__yours { background: transparent; padding: 0; border-radius: 0; }

/* Mobil (owner 2026-07-25): pastila de preț nu mai stă mică în stânga —
   se ÎNTINDE pe toată lățimea rămasă până în dreapta, mare; „cu TVA" coboară
   sub ea (rândul „fără TVA"), plăcuțele de plată rămân pe un rând. */
@media (max-width: 600px) {
  .price-stack--clean .price-stack__yours { flex-wrap: nowrap; }
  .price-stack--clean .price-stack__yours small { display: none; }
  .price-stack--clean .price-stack__unit { flex: 1; }
  .price-stack--clean .price-stack__badge { font-size: 1.2rem; }
  .price-stack--clean .price-stack__pill {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .buy-panel__pay--fan .pay-logo { height: 40px; padding: 5px 8px; }
  .buy-panel__pay--fan .pay-logo svg { height: 24px; }
  /* Chip-urile slim rămân pe UN rând și la 375px: tipografie mai strânsă +
     iconițele ASCUNSE (hibrid — lățimea lor ar rupe rândul). */
  .delivery-chips { gap: 4px; }
  .delivery-chips__chip { gap: 3px; padding: 5px 4px; }
  .delivery-chips__chip .icon { display: none; }
  .delivery-chips__label { font-size: 0.72rem; }
  .delivery-chips__fee { font-size: 0.74rem; }
}
.price-stack__unit { display: inline-flex; align-items: stretch; }
.price-stack__badge {
  display: flex;
  align-items: center;
  background: #A30D0E;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  padding: 8px 10px;
  border-radius: var(--radius) 0 0 var(--radius);
}
.price-stack__pill--fused { border-radius: 0 var(--radius) var(--radius) 0; }
.price-stack__save-inline { color: var(--color-price-old); font-weight: 700; }

.price-stack__old {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 0.9rem;
  font-weight: 600;
}
.price-stack__old s { color: var(--color-price-old); font-weight: 600; font-size: 0.95rem; }
.price-stack__yours {
  background: var(--color-price-highlight);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.price-stack__label { font-weight: 700; }
.price-stack__pill {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 1;
  border-radius: var(--radius);
  padding: 8px 12px;
  white-space: nowrap;
}
.price-stack__yours small { color: rgba(0, 0, 0, 0.45); font-weight: 600; }
.price-stack__novat { color: rgba(0, 0, 0, 0.45); font-size: 0.93rem; }
.price-stack__save {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-available);
  font-weight: 700;
}
.price-stack__save-tag { font-size: 0.85em; line-height: 1; }

.buy-panel__cta { display: flex; gap: 10px; align-items: stretch; }
.qty {
  flex: none;
  display: flex;
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
}
.qty button {
  width: 40px;
  border: 0;
  background: none;
  font-size: 1.35rem;
  font-weight: 600;
  cursor: pointer;
}
.qty input {
  width: 40px;
  border: 0;
  background: none;
  text-align: center;
  font-weight: 700;
  outline: none;
}
.btn--cart { flex: 1; height: 56px; font-size: 1.25rem; }
/* Disabled shell (cart is a later build) — keeps the exact look, no hover flip. */
.qty button:disabled { cursor: not-allowed; color: rgba(0, 0, 0, 0.35); }
.btn--cart:disabled { cursor: not-allowed; opacity: .55; }
@media (hover: hover) {
  .btn--cart:disabled:hover { background: var(--color-primary); color: #fff; }
}

/* Nota regulii de cantitate (multiplu / minim de vânzare) — chip info discret
   sub stepper: pastilă rotunjită gri deschis, iconiță info, text mic. */
.buy-panel__qty-note {
  margin: -4px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: var(--color-surface);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.86rem;
  color: rgba(0, 0, 0, 0.6);
}
.buy-panel__qty-note .icon { color: rgba(0, 0, 0, 0.45); flex: none; }

/* Mărci de plată (pay-logos.blade.php) — SVG-uri inline, culoare completă.
   Plăcuțe albe consistente ~48px înălțime, spațiate, se rup pe rânduri pe
   ecrane înguste (folosite și în footer). */
.buy-panel__pay { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* „Evantai" (owner 2026-07-25, pagina de produs): cele 3 plăcuțe umplu toată
   lățimea de sub butonul roșu, în sloturi egale — UN rând și pe mobil. */
.buy-panel__pay--fan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.buy-panel__pay--fan .pay-logo { width: 100%; }
.pay-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 7px 12px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
/* Înălțime consistentă a MĂRCII (nu a plăcii) — logo-urile reale au rapoarte
   foarte diferite (Visa lat, Mastercard aproape pătrat), deci fixăm înălțimea
   marcajului ~30px și lăsăm lățimea auto după raportul fiecăruia. `img` = mărcile
   servite ca fișier SVG (Maestro/Apple Pay/Google Pay, în footer), nu inline. */
.pay-logo svg, .pay-logo img { height: 30px; width: auto; display: block; max-width: 100%; }

.buy-panel__usps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  font-weight: 600;
}
.buy-panel__usps li { display: flex; align-items: center; gap: 8px; }
.buy-panel__usps .icon { color: var(--color-primary); flex: none; }
.buy-panel__usps .stars { color: var(--color-reviews-orange); letter-spacing: 1px; }

.product-main > .notice { margin-top: 24px; }
.product-main > .notice--soft { margin-top: 32px; }

/* „Descriere" — text bogat din CRM (sanitizat CRM-side). Tipografie sobră,
   moștenește corpul paginii; lățime confortabilă pentru lectură. */
.product-desc-section { margin-top: 40px; }
.product-desc-section h2 { margin-bottom: 12px; }
.product-desc { max-width: 1100px; line-height: 1.6; color: #1a1a1a; }
.product-desc h2 { font-size: 1.2rem; margin: 1.2rem 0 .5rem; }
.product-desc h3 { font-size: 1.05rem; margin: 1rem 0 .4rem; }
.product-desc p { margin: 0 0 .8rem; }
.product-desc ul, .product-desc ol { margin: 0 0 .8rem; padding-left: 1.4rem; }
.product-desc li { margin: .2rem 0; }
.product-desc a { color: var(--color-primary); }
.product-desc img { max-width: 100%; height: auto; }

.product-specs, .fitment, .oem-numbers { margin-top: 40px; }
.product-specs h2, .fitment h2, .oem-numbers h2 { margin-bottom: 12px; }

/* „Siguranța produsului" — info de conformitate (GPSR/SVHC), nu de vânzare:
   compactă, discretă, sub restul secțiunilor. Titlu cu iconiță shield-check,
   text mai mic/muted, rânduri zebra (1-3 rânduri, o singură coloană). */
.product-safety { margin-top: 40px; }
.product-safety h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 1.15rem;
}
.product-safety h2 .icon { color: rgba(0, 0, 0, 0.55); flex: none; }
.product-safety__rows { max-width: 720px; font-size: 0.92rem; color: rgba(0, 0, 0, 0.7); }
.product-safety__rows .zebra-rows__row span { flex: 1 1 auto; min-width: 0; padding-right: 12px; overflow-wrap: anywhere; }
.product-safety__rows .zebra-rows__row strong { flex: 0 1 auto; overflow-wrap: anywhere; }
@media (max-width: 899px) {
  .product-safety__rows .zebra-rows__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .product-safety__rows .zebra-rows__row span { padding-right: 0; }
  .product-safety__rows .zebra-rows__row strong { text-align: left; }
}

/* Documente + Video — grilă de 2 coloane pe desktop (o coloană sub 900px), cu
   același ritm de 40px față de secțiunea OEM de deasupra (respirau prea aproape).
   Secțiunile din interior își resetează margin-top-ul propriu. */
.product-media-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.product-media-grid .product-docs,
.product-media-grid .product-videos { margin-top: 0; }
.product-media-grid h2 { margin-bottom: 12px; }
@media (max-width: 899px) {
  .product-media-grid { grid-template-columns: 1fr; }
}

/* Specificații — două coloane egale pe desktop (zebra reia striparea per
   coloană, ca în kvik); o singură coloană sub 900px. */
.product-specs__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  align-items: start;
}
/* Etichetele criteriilor TecDoc pot fi foarte lungi ("Eficiență înaltă
   versiunea cu cărbune activ (nr. art.)") — lăsăm eticheta să se strângă și să
   se rupă în loc de flex:none (care storcea valoarea într-o coloană îngustă și
   lăsa cutii albe uriașe). Doar în Specificații, nu în panoul de cumpărare. */
.product-specs__grid .zebra-rows__row span {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 12px;
  overflow-wrap: anywhere;
}
.product-specs__grid .zebra-rows__row strong { flex: 0 1 auto; }

/* "Numere OEM" — bold maker heading + celule OE full-width (reference kvik). */
.oem-numbers__group + .oem-numbers__group,
.fitment__more .oem-numbers__group { margin-top: 12px; }
.oem-numbers__group h3 { font-size: var(--font-size-h4); margin-bottom: 6px; }
.oem-numbers__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 4px 8px;
}
.oem-numbers__list li { overflow-wrap: anywhere; }
/* Fiecare număr = celulă albă cu bordură, link către căutare. */
.oem-numbers__list a {
  display: block;
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  overflow-wrap: anywhere;
}
@media (hover: hover) {
  .oem-numbers__list a:hover { border-color: var(--color-primary); color: var(--color-primary); }
}

.fitment__list { list-style: none; margin: 0; padding: 0; }
.fitment__list li {
  padding: 8px 12px;
  border-radius: var(--radius);
  font-weight: 600;
}
.fitment__list li:nth-child(odd) { background: var(--color-surface); }
.fitment__more summary {
  cursor: pointer;
  color: var(--color-primary);
  font-weight: 700;
  padding: 10px 12px;
  list-style: none;
}
.fitment__more summary::-webkit-details-marker { display: none; }
.fitment__more summary::before { content: '+ '; }
.fitment__more[open] summary::before { content: '− '; }
@media (hover: hover) {
  .fitment__more summary:hover { text-decoration: underline; }
}
/* Inside the expander the zebra continues from the visible list (4 rows
   visible → odd rows here paint white, even gray). */
.fitment__more .fitment__list li:nth-child(odd) { background: none; }
.fitment__more .fitment__list li:nth-child(even) { background: var(--color-surface); }
.fitment__rest { margin: 8px 12px 0; color: rgba(0, 0, 0, 0.45); }
.fitment__rest a { color: var(--color-primary); font-weight: 600; }

/* Bannerul „mașina ta" (hidratat client-side din cookie-ul `vehicul`):
   neutru = invitație discretă la picker; --ok = verde (piesa se potrivește);
   --miss = ambră (nu am găsit-o → trimite-l la piesele mașinii lui). */
.fitment__banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 600;
}
.fitment__banner-link { color: var(--color-primary); font-weight: 700; text-decoration: none; }
@media (hover: hover) {
  .fitment__banner-link:hover { text-decoration: underline; }
}
.fitment__banner--ok {
  border-color: var(--color-available);
  background: rgba(89, 199, 54, 0.08);
  color: #2c7a12;
}
.fitment__banner--miss {
  border-color: var(--color-tag-recommended);
  background: var(--color-price-highlight);
  color: #6b5310;
}

/* Drill-down: taburi de marcă → modele (acordeon) → motorizări (linkuri).
   Flex-wrap (nu grid auto-fit): fiecare tab își ia lățimea de care are nevoie
   și un nume lung de marcă trece pe rândul lui în loc să se rupă la mijloc de
   cuvânt (bug „SKOD A" din mobil). flex:1 1 auto → plăcile umplu lățimea. Pe
   ecrane foarte înguste containerul se poate scrolla intern (ultimă soluție),
   fără scroll orizontal pe pagină. */
.fitment-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
/* Skeleton afișat cât timp se încarcă arborele — aceeași formă ca rândul de
   taburi de marcă, ca să nu existe salt de layout sau pâlpâire a listei plate. */
.fitment-skeleton {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.fitment-skeleton__tab {
  flex: 1 1 auto;
  min-width: 180px;
  height: 68px;
  border-radius: var(--radius);
  background: linear-gradient(90deg,
    var(--color-surface) 25%, var(--color-hairline) 37%, var(--color-surface) 63%);
  background-size: 400% 100%;
  animation: fitment-shimmer 1.3s ease-in-out infinite;
}
@keyframes fitment-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fitment-skeleton__tab { animation: none; }
}
.fitment-tab {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
  cursor: pointer;
  min-width: 0;
}
.fitment-tab img { height: 38px; width: auto; max-width: 100%; display: block; flex: none; }
/* Numele mărcii NU se rupe niciodată la mijloc de cuvânt — un nume lung ia mai
   multă lățime / propriul rând. Anulăm overflow-wrap moștenit din strămoși. */
.fitment-tab span { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.fitment-tab.is-active { border-color: var(--color-primary); background: var(--color-tint); color: var(--color-primary); }
@media (hover: hover) {
  .fitment-tab:hover { border-color: var(--color-primary); }
}

.fitment-model + .fitment-model { border-top: 1px solid var(--color-hairline); }
.fitment-model__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius);
}
.fitment-model:nth-child(odd) .fitment-model__head { background: var(--color-surface); }
.fitment-model__name { color: var(--color-primary); font-weight: 600; }
.fitment-model__years { color: rgba(0, 0, 0, 0.45); font-size: 0.9rem; flex: none; }
@media (hover: hover) {
  .fitment-model__head:hover .fitment-model__name { text-decoration: underline; }
}

.fitment-engines { padding: 8px 0 12px; }
.fitment-engines__title { margin: 4px 12px 8px; font-weight: 700; }
.fitment-engine {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 8px 12px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text);
}
.fitment-engine__name { color: var(--color-primary); font-weight: 700; }
.fitment-engine__col { color: rgba(0, 0, 0, 0.55); }
@media (hover: hover) {
  .fitment-engine:hover { background: var(--color-tint); }
}

@media (max-width: 899px) {
  .product-hero { grid-template-columns: 1fr; }
  .product-gallery__main { max-width: 520px; margin: 0 auto; }
  .product-specs__grid { grid-template-columns: 1fr; gap: 0; }
  /* Rânduri de specificații stivuite pe mobil (etichetă peste valoare, ambele
     se rup) — rânduri compacte indiferent de lungimea label/value TecDoc. */
  .product-specs__grid .zebra-rows__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .product-specs__grid .zebra-rows__row span { padding-right: 0; }
  .product-specs__grid .zebra-rows__row strong { text-align: left; overflow-wrap: anywhere; }
  /* Taburile de marcă se rup pe mai multe rânduri pe mobil (flex-wrap). Dacă
     un singur nume lung nu încape, containerul se poate scrolla intern — fără
     scroll orizontal pe pagină (house rule). */
  .fitment-tabs { flex-wrap: wrap; max-width: 100%; overflow-x: auto; }
}
@media (max-width: 599px) {
  .product-gallery__main { max-width: none; }
  .discount-badge { font-size: 1rem; padding: 8px; }
  .price-stack__pill { font-size: 1.35rem; }
  .btn--cart { font-size: 1.1rem; height: 48px; }
  .buy-panel__cta { flex-wrap: wrap; }
}
@media (max-width: 399px) {
  /* USP-urile 2×2 se stivuiesc pe o coloană pe ecrane foarte înguste. */
  .buy-panel__usps { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .product-row { flex-wrap: wrap; }
  .product-row__media { width: 96px; min-height: 96px; }
  /* Override-ul mic al badge-ului trăiește în secțiunea „rânduri de listare",
     DUPĂ regula de bază — altfel cascada (specificitate egală) l-ar anula. */
  /* Placeholderul „fără fotografie" n-are nevoie de override pe mobil: la 96px
     lățime intră singur sub pragul de 132px (container query) → doar emblema. */
  .product-row__body { flex: 1 1 0; }
  /* Criteriile trec pe toată lățimea, un criteriu pe rând (o coloană + gap
     vin din regula de bază, după redesignul din 2026-07-26). */
  .product-row__specs {
    flex: 1 1 100%;
    margin-top: 4px;
  }
  .product-row__buy {
    flex: 1 1 100%;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 10px;
  }
  .product-row__buy .btn { margin-top: 0; }
  /* Butonul „Adaugă în coș" nu mai ocupă toată lățimea când e pe rând cu prețul. */
  .product-row__add { margin-top: 0; width: auto; flex: 0 1 auto; }
  .product-row__add .btn--cart { width: auto; padding: 0 16px; }
}

/* ------------------------------------------------ cart + checkout (MVP) */

/* 3-step progress bar — reference §8: red numbered disc on the active step,
   inactive steps 20% black, chevron separators. */
.steps {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 20px 0 16px;
  font-weight: 700;
}
.steps__item { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-muted); text-decoration: none; }
.steps__item.is-active { color: #000; }
.steps__item.is-done { color: rgba(0, 0, 0, 0.55); }
/* Pașii anteriori sunt link-uri (poți sări înapoi) — subliniere doar la hover. */
a.steps__item { cursor: pointer; }
@media (hover: hover) { a.steps__item:hover { color: var(--color-primary); } }
.steps__num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-surface);
  color: rgba(0, 0, 0, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.93rem;
  font-weight: 700;
  flex: none;
}
.steps__item.is-active .steps__num,
.steps__item.is-done .steps__num { background: var(--color-primary); color: #fff; }
.steps__sep { color: var(--color-text-muted); font-weight: 400; }

/* Flash notices */
.flash {
  margin: 12px 0 0;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 600;
}
.flash--ok { border-color: var(--color-available); color: #2c7a12; background: rgba(89, 199, 54, 0.08); }
.flash--err { border-color: var(--color-primary); color: #a30001; background: rgba(253, 14, 15, 0.05); }
.flash--warn { border-color: var(--color-tag-recommended); background: var(--color-price-highlight); color: #6b5310; }
.flash__list { margin: 6px 0 0; padding-left: 18px; font-weight: 600; }

/* Cart page */
.cart-page h1, .checkout-page h1 { margin-top: 4px; }
.cart-empty { margin-top: 16px; }
.cart-empty a { color: var(--color-primary); font-weight: 700; }

/* Îndemn de autentificare din coș (doar vizitatori nelogați). */
.cart-login-cta {
  margin: 14px 0 4px;
  padding: 12px 16px;
  background: var(--color-surface-2, #f3f3f3);
  border: 1px solid var(--color-hairline, #e6e6e6);
  border-radius: var(--radius);
  font-size: 14px;
}
.cart-login-cta a { color: var(--color-primary); font-weight: 700; }

.cart-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
  margin: 20px 0 48px;
}

.cart-lines { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cart-line {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 10px;
}
.cart-line.is-blocked { opacity: .75; border-color: var(--color-primary); }
.cart-line__media {
  position: relative;               /* ancoră pentru `.no-photo` */
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: var(--radius);
  /* Fundal alb + hairline, ca miniaturile din listări (runda 4). */
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
}
.cart-line__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Fără poză → `.no-photo` (84px ⇒ sub pragul de 132px: doar emblema). */
.cart-line__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cart-line__name { color: var(--color-primary); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
/* Logo de marcă sub nume (proxy TecDoc; onerror→remove pentru mărci fără logo). */
.cart-line__brand { display: inline-flex; align-items: center; }
.cart-line__brand img { height: 20px; width: auto; max-width: 120px; display: block; object-fit: contain; }
@media (hover: hover) { .cart-line__name:hover { text-decoration: underline; } }
.cart-line__sku { font-size: 0.86rem; color: rgba(0, 0, 0, 0.45); }
.cart-line__avail { font-size: 0.86rem; font-weight: 700; color: rgba(0, 0, 0, 0.45); }
.cart-line__avail.is-ok { color: var(--color-available); }
.cart-line__blocked { font-size: 0.86rem; font-weight: 700; color: var(--color-primary); }
.cart-line__buy { flex: none; display: flex; align-items: center; gap: 14px; }
.cart-line__qty { display: flex; align-items: center; gap: 8px; }
/* Nota discretă când linia a fost snap-uită la un multiplu de vânzare valid. */
.cart-line__qty-adjusted { font-size: 0.8rem; color: rgba(0, 0, 0, 0.5); }
.cart-line__unit { color: rgba(0, 0, 0, 0.45); white-space: nowrap; }
.cart-line__total { font-size: 1.1rem; white-space: nowrap; min-width: 92px; text-align: right; }
/* Bloc de preț (oldprice + unit + total). Pe desktop e un RÂND cu aceeași
   spațiere ca înainte (gap 14 == gap-ul lui .cart-line__buy) → layout identic;
   pe mobil devine coloană aliniată la dreapta (vezi media query) ca ✕ să nu fie
   împins în afara ecranului la prețuri mari. */
.cart-line__price { display: flex; align-items: center; gap: 14px; }
.cart-line__remove {
  border: 0;
  background: var(--color-surface);
  border-radius: var(--radius);
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.55);
}
@media (hover: hover) { .cart-line__remove:hover { background: var(--color-primary); color: #fff; } }

/* Totals box (cart + checkout summary) */
.cart-totals {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 160px;
}
.cart-totals__rows { display: flex; flex-direction: column; gap: 8px; }
.cart-totals__row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.cart-totals__row--muted { color: rgba(0, 0, 0, 0.45); font-size: 0.93rem; }
.cart-totals__row--grand {
  border-top: 1px solid var(--color-border);
  padding-top: 10px;
  margin-top: 4px;
  font-size: 1.1rem;
  font-weight: 700;
}
.cart-totals__row .is-free, .option-card__price.is-free { color: var(--color-available); }
.cart-totals__novat { margin: -4px 0 0; color: rgba(0, 0, 0, 0.45); font-size: 0.86rem; text-align: right; }
.btn--checkout { height: 48px; font-size: 1.1rem; width: 100%; }
.cart-totals__clear { text-align: center; }
.cart-totals__clear button {
  border: 0;
  background: none;
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

/* Checkout */
.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
  margin: 20px 0 48px;
}
.checkout-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.checkout-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.checkout-card h2 { font-size: var(--font-size-h3); }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field > span { font-size: 0.86rem; color: rgba(0, 0, 0, 0.55); font-weight: 600; }
.field input, .field textarea {
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 10px 12px;
  font-size: 1rem;
  outline: none;
  width: 100%;
  resize: vertical;
}
.field input:focus, .field textarea:focus {
  background: #fff;
  border-color: #000;
}

.checkbox-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-weight: 600; }
.checkbox-row input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--color-primary); }
.checkbox-row a { color: var(--color-primary); }

/* Option cards — radio rows in white bordered cards (reference §8) */
.option-cards { display: flex; flex-direction: column; gap: 10px; }
.option-card {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
}
.option-card:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
@media (hover: hover) { .option-card:not(.is-disabled):hover { border-color: var(--color-primary); } }
/* margin:0 — UA-ul dă radiourilor o margine implicită (Chrome 3px 3px 0 5px),
   deci spațierea rândului era dependentă de browser, iar indentarea mărcilor de
   card de pe mobil (padding-left: 70px) nu ar fi căzut niciodată exact sub text.
   Zero explicit → rândul începe fix la marginea de padding a cardului. */
.option-card input { accent-color: var(--color-primary); width: 18px; height: 18px; flex: none; margin: 0; }
.option-card__icon { color: var(--color-primary); display: inline-flex; flex: none; }
.option-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.option-card__body small { color: rgba(0, 0, 0, 0.45); }
.option-card__price { flex: none; font-weight: 700; white-space: nowrap; }
/* Mărcile de card acceptate pe rândul „Plata cu cardul online" — aceleași
   SVG-uri self-hosted din partials/pay-logos (varianta $compact), NU o imagine
   externă: CSP-ul nu permite hosturi terțe, iar hotlink-ul s-ar rupe tăcut.
   Aici sunt un semnal discret în slotul din dreapta (unde stau taxa de ramburs /
   „în curând"), deci fără plăcuța albă cu bordură de pe pagina de produs. */
.option-card__marks { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.option-card__marks .pay-logo {
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.option-card__marks .pay-logo svg { height: 20px; }
.option-card.is-disabled { opacity: .55; cursor: not-allowed; }
.option-card__soon {
  flex: none;
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 4px 10px;
  font-size: 0.86rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}
/* Peste 600px mărcile de card intră GRATIS în slotul din dreapta (măsurat:
   rândul rămâne la 67px, subtitlul pe un rând). Sub 600px nu mai încap lângă
   text — l-ar împinge de la 1 rând la 3-5. Acolo rândul se rupe și mărcile trec
   pe linia lor, indentate exact sub text (70px = radio 18 + gap 14 + iconiță 24
   + gap 14), deci rămân vizibile pe telefon fără să strivească nimic. */
@media (max-width: 599px) {
  .option-card { flex-wrap: wrap; }
  .option-card__marks { order: 9; flex-basis: 100%; padding-left: 70px; }
}

.checkout-summary { position: sticky; top: 160px; }
.summary-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.summary-lines li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-hairline);
  font-size: 0.93rem;
}
.summary-lines__qty { flex: none; font-weight: 700; color: var(--color-primary); }
.summary-lines__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.summary-lines li strong { flex: none; white-space: nowrap; }
.checkout-summary__note { margin: 0; text-align: center; color: rgba(0, 0, 0, 0.45); font-size: 0.86rem; }

/* Confirmation */
.confirm-page { display: flex; flex-direction: column; align-items: center; }
.confirm-page .steps { align-self: flex-start; }
.confirm-card {
  max-width: 640px;
  width: 100%;
  margin: 24px auto 60px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  align-items: center;
}
.confirm-card__check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-available);
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.confirm-card__code { margin: 0; font-size: 1.1rem; }
.confirm-card__code strong { color: var(--color-primary); }
.confirm-card__facts { width: 100%; max-width: 420px; text-align: left; }
.confirm-card__next { text-align: left; width: 100%; }
.confirm-card__next h2 { font-size: var(--font-size-h4); margin-bottom: 8px; }
.confirm-card__next ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.confirm-card__help { margin: 0; color: rgba(0, 0, 0, 0.55); }
.confirm-card__help a { color: var(--color-primary); font-weight: 700; }

/* Responsive: single column below tablet; option cards + lines compact. */
@media (max-width: 899px) {
  .cart-grid, .checkout-grid { grid-template-columns: 1fr; }
  .cart-totals, .checkout-summary { position: static; }
}
@media (max-width: 599px) {
  .cart-line { flex-wrap: wrap; }
  .cart-line__body { flex: 1 1 0; }
  .cart-line__buy { flex: 1 1 100%; justify-content: space-between; gap: 8px; }
  .cart-line__total { min-width: 0; }
  /* Prețul se stivuiește (oldprice/unit peste total), aliniat la dreapta și
     împins spre dreapta (margin-left:auto) → rândul devine [− 1 +] … [preț][✕],
     deci ✕ rămâne mereu în ecran, indiferent de mărimea prețului. */
  .cart-line__price { flex-direction: column; align-items: flex-end; gap: 1px; margin-left: auto; }
  .field-grid { grid-template-columns: 1fr; }
  /* Pașii se stivuiesc vertical pe mobil — etichetele („Coș de cumpărături",
     „Finalizare comandă") sunt prea lungi ca să încapă pe un rând, iar
     flex-wrap lăsa pasul 3 orfan pe al doilea rând. Listă curată, aliniată la
     stânga; chevron-ii au sens doar pe orizontală, deci îi ascundem. */
  .steps { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 0.93rem; }
  .steps__sep { display: none; }
  /* Rândurile de confirmare se stivuiesc (etichetă peste valoare), ca la
     specificațiile de produs — emailul primește tot rândul și nu se mai rupe
     la mijlocul cuvântului. */
  .confirm-card__facts .zebra-rows__row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .confirm-card__facts .zebra-rows__row strong { text-align: left; }
}
.option-card__warn { color: var(--color-primary); font-weight: 700; }
/* The hidden attribute must always win over display:flex/grid utility styles. */
[hidden] { display: none !important; }

/* ---- checkout upgrade 2026-07-03 ----------------------------------------
   Geo dropdowns (#6/#7), CIF finder (#5), saved pickers (#1/#4), separate
   shipping (#8), delivery estimate (#3), free-shipping counter (#11), VIN
   (#10). Same identity: Inter, #FD0E0F, 7px radius, #F3F3F3 surface,
   hairlines only. Nothing here introduces horizontal scroll. */

/* Selecturi în stilul câmpurilor (județ + selectoarele de adrese/firme). */
.field select {
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 10px 12px;
  font-size: 1rem;
  outline: none;
  width: 100%;
  max-width: 100%;
  cursor: pointer;
  font-family: inherit;
  color: var(--color-text);
}
.field select:focus { background: #fff; border-color: #000; }

/* Marcajul de câmp cu problemă — ACEEAȘI clasă ca la panoul de contact
   (.field--err pus pe wrapper), aici generalizată ca s-o poată folosi și
   validarea de checkout din shop.js: pe .field (input/select/textarea), pe
   grupurile de radiouri (.option-cards) și pe bifa de termeni (.checkbox-row).
   Stă DUPĂ regulile de :focus ca marcajul roșu să nu dispară exact pe câmpul
   pe care tocmai am pus focus-ul. Doar chenarul: textul erorii trăiește într-un
   singur loc, blocul „Verifică datele introduse:". */
.field--err input, .field--err textarea, .field--err select { border-color: var(--color-primary); }
.option-cards.field--err .option-card { border-color: var(--color-primary); }
.checkbox-row.field--err { color: #a30001; }

/* Câmpurile geo se așază în grila de 2 coloane a formularului (județ +
   localitate pe un rând, cod poștal pe rândul următor). display:contents ține
   containerul invizibil în layout, dar [hidden] pe fallback trebuie respectat. */
.geo-fields { display: contents; }

/* Selectorul de adresă/firmă salvată — ocupă tot rândul. */
#saved-address-field, #saved-company-field { margin-bottom: 4px; }

/* CIF finder (#5) — input + buton pe același rând, sub eticheta „CUI". */
.cif-lookup { display: flex; gap: 8px; align-items: stretch; }
.cif-lookup input { flex: 1; min-width: 0; }
.cif-lookup__btn {
  flex: none;
  white-space: nowrap;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-weight: 700;
  padding: 0 14px;
  height: auto;
}
@media (hover: hover) { .cif-lookup__btn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); background: #fff; } }
.cif-lookup__btn:disabled { opacity: .55; cursor: progress; }

.cif-msg { margin: 2px 0 0; font-weight: 700; font-size: 0.93rem; }
.cif-msg--ok { color: #2c7a12; }
/* Format CIF invalid (client-side, înainte de căutare) — roșul de eroare. */
.cif-msg--err { color: var(--color-primary); }
.cif-msg--unavailable { color: rgba(0, 0, 0, 0.55); font-weight: 600; }
.cif-warn {
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid var(--color-tag-recommended);
  background: var(--color-price-highlight);
  border-radius: var(--radius);
  color: #6b5310;
}
.cif-warn p { margin: 0 0 8px; font-weight: 600; }

/* Separate shipping (#8) — the second address block sits inside the delivery
   card; a hairline separator sets it apart. */
#ship-alt-fields { border-top: 1px solid var(--color-hairline); padding-top: 12px; margin-top: 4px; }

/* Delivery estimate (#3) — BIG BOLD, near the summary CTA. */
/* Estimarea din coș/checkout — variantă „pop" (owner 2026-07-24): banda
   roșie de brand, textul alb — cel mai zgomotos element din sidebar, coșul
   promite data celei mai LENTE linii. */
.delivery-estimate {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-primary);
}
.delivery-estimate__label { font-size: 0.86rem; color: rgba(255, 255, 255, 0.85); font-weight: 600; }
.delivery-estimate__value { font-size: 1.35rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; }

/* Varianta COMPACTĂ (coș, owner 2026-07-26) — banda roșie de mai sus a fost
   depășită de decizia „CTA deasupra foldului": în sidebar-ul coșului estimarea
   devine UN rând (etichetă discretă + valoare roșie bold), ca să nu mai fure
   înălțime butonului. Clasa de BAZĂ rămâne neatinsă — rezumatul de checkout
   păstrează banda. */
.delivery-estimate--line {
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}
.delivery-estimate--line .delivery-estimate__label { color: rgba(0, 0, 0, 0.45); font-weight: 600; font-size: 0.93rem; }
.delivery-estimate--line .delivery-estimate__value { color: var(--color-primary); font-size: 1rem; letter-spacing: 0; text-align: right; }

/* Insigna liniei care GATEAZĂ estimarea (cea mai lentă din coș). */
.cart-line__slowest {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 7px;
  border-radius: var(--radius);
  background: var(--color-tint);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 700;
}

/* Free-shipping counter (#11). */
.free-ship {
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--color-tag-recommended);
  background: var(--color-price-highlight);
  color: #6b5310;
  font-weight: 700;
  font-size: 0.93rem;
  text-align: center;
}
.free-ship strong { color: var(--color-primary); }
.free-ship.is-reached {
  border-color: var(--color-available);
  background: rgba(89, 199, 54, 0.1);
  color: #2c7a12;
}
.free-ship.is-reached strong { color: #2c7a12; }

/* Banda de livrare gratuită din COȘ (owner 2026-07-26) — contorul #11 a ieșit
   din sidebar (era unul dintre cele 8 blocuri care împingeau „Finalizează
   comanda" sub fold) și trăiește acum pe toată lățimea grilei, peste lista de
   produse. `.free-ship` de mai sus rămâne intact: checkout-ul și celelalte
   suprafețe îl folosesc mai departe. Bara reia limbajul vizual al mini-coșului
   (.cart-mini__bar: 7px, capete rotunde, umplere animată); umplerea vine gata
   calculată din blade, deci nu depinde de JS. Nimic de aici nu poate produce
   derulare orizontală (max-width 100%, bara se contractă). */
.free-ship-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 100%;
  margin: 14px 0 0;
  padding: 9px 14px;
  border: 1px solid var(--color-tag-recommended);
  border-radius: var(--radius);
  background: var(--color-price-highlight);
  color: #6b5310;
  font-weight: 700;
  font-size: 0.93rem;
}
.free-ship-banner__text { margin: 0; flex: 1 1 auto; min-width: 0; }
.free-ship-banner strong { color: var(--color-primary); }
.free-ship-banner__bar {
  flex: 0 1 240px;
  min-width: 0;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.08);
}
.free-ship-banner__bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--color-primary);
  transition: width .3s ease;
}
/* Prag atins → verde peste tot (aceeași semantică „gata" ca .free-ship). */
.free-ship-banner.is-reached {
  border-color: var(--color-available);
  background: rgba(89, 199, 54, 0.1);
  color: #2c7a12;
}
.free-ship-banner.is-reached strong { color: #2c7a12; }
.free-ship-banner.is-reached .free-ship-banner__bar { background: rgba(89, 199, 54, 0.18); }
.free-ship-banner.is-reached .free-ship-banner__bar-fill { background: var(--color-available); }

/* Sub tabletă (unde grila coșului devine o coloană) banda se stivuiește:
   textul pe un rând, bara pe toată lățimea dedesubt. */
@media (max-width: 599px) {
  .free-ship-banner { flex-direction: column; align-items: stretch; gap: 8px; text-align: center; }
  .free-ship-banner__bar { flex: none; width: 100%; }
}

/* VIN fields (cart + checkout summary). */
.checkout-vin, .cart-vin .field { margin-top: 4px; }
.cart-vin { margin: 0; }
.cart-vin input { text-transform: uppercase; }
#vin-visible { text-transform: uppercase; }

/* ============================================================ locker picker */
/* Checkout easybox picker: a native <dialog> holding a Leaflet map (left) +
   a synced, searchable locker list (right). Provider-neutral (Sameday today,
   GLS later — one marker style per provider). Identity: Inter, #FD0E0F, 7px
   radius, #F3F3F3 secondary surface, hairlines only (no drop shadows on the
   chrome — the dialog earns ONE soft lift so it reads as a layer above the
   page; the map's own tiles are the only large surface).
   z-index scale (semantic): backdrop 50 < header 60/70 < dialog(top layer). */

/* ---- the trigger row on the checkout delivery card ---------------------- */
.easybox-picker { display: flex; flex-direction: column; gap: 10px; }

/* The trigger button, the chosen chip and the list skeleton are toggled via the
   HTML [hidden] attribute (blade + JS .hidden). Each also has an authored
   `display` below, which overrides the UA `[hidden]{display:none}` — so a fresh
   checkout would show the button AND the chip at once, and the skeleton would
   never disappear after the list loads. Attribute+class out-specifies the base
   class rules and restores the hide. */
.easybox-picker__btn[hidden],
.easybox-chosen[hidden],
.locker-skel[hidden] { display: none; }

.easybox-picker__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 18px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}
.easybox-picker__btn .icon { color: var(--color-primary); }
@media (hover: hover) {
  .easybox-picker__btn:hover { background: var(--color-primary); color: #fff; }
  .easybox-picker__btn:hover .icon { color: #fff; }
}

/* Confirmed chip — "Easybox selectat: {name}", green tick + change/clear. */
.easybox-chosen {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-available);
  border-radius: var(--radius);
  background: rgba(89, 199, 54, 0.06);
}
.easybox-chosen__tick {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-available);
  color: #fff;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.easybox-chosen__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.easybox-chosen__label { font-size: 0.8rem; font-weight: 700; color: #2c7a12; text-transform: uppercase; letter-spacing: .04em; }
.easybox-chosen__name { font-weight: 700; overflow-wrap: anywhere; }
.easybox-chosen__addr { font-size: 0.86rem; color: rgba(0, 0, 0, 0.55); overflow-wrap: anywhere; }
.easybox-chosen__change {
  flex: none;
  border: 0; background: none;
  color: var(--color-primary);
  font-weight: 700; font-size: 0.93rem;
  cursor: pointer; text-decoration: underline;
  white-space: nowrap;
}
.easybox-picker__hint { margin: 0; font-size: 0.86rem; color: rgba(0, 0, 0, 0.5); }
.easybox-picker__hint.is-error { color: var(--color-primary); font-weight: 700; }

/* ---- the dialog shell --------------------------------------------------- */
.locker-dialog {
  width: min(1080px, calc(100vw - 32px));
  height: min(720px, calc(100vh - 48px));
  max-width: none; max-height: none;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  color: var(--color-text);
  /* one deliberate lift so the layer reads above the page (the rest of the
     site is shadow-free; a modal is the justified exception). */
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}
.locker-dialog::backdrop {
  background: rgba(23, 19, 14, 0.45);
}
.locker-dialog[open] { display: flex; flex-direction: column; }

/* entrance — subtle rise + fade, ease-out */
@keyframes locker-dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes locker-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.locker-dialog[open] { animation: locker-dialog-in .28s cubic-bezier(0.16, 1, 0.3, 1); }
.locker-dialog[open]::backdrop { animation: locker-backdrop-in .28s ease; }

/* ---- header (title / search / geolocate / close) ----------------------- */
.locker-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-hairline);
}
.locker-head__title { font-size: var(--font-size-h3); font-weight: 700; white-space: nowrap; }
.locker-head__title small { display: block; font-size: 0.8rem; font-weight: 600; color: rgba(0, 0, 0, 0.45); }
.locker-search { flex: 1; min-width: 0; position: relative; }
.locker-search input {
  width: 100%;
  height: 44px;
  background: var(--color-surface);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0 40px 0 40px;
  font-size: 1rem; color: #000; outline: none;
}
.locker-search input::placeholder { color: rgba(0, 0, 0, 0.45); }
.locker-search input:focus { background: #fff; box-shadow: var(--shadow-search-focus); }
.locker-search__icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: rgba(0, 0, 0, 0.4); pointer-events: none; display: inline-flex;
}
.locker-search__clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; background: none; cursor: pointer;
  color: rgba(0, 0, 0, 0.4); border-radius: var(--radius); font-size: 1.2rem; line-height: 1;
}
@media (hover: hover) { .locker-search__clear:hover { background: var(--color-surface); color: #000; } }
.locker-geo {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 14px;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: #fff; color: #000; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.locker-geo .icon { color: var(--color-primary); }
.locker-geo[aria-busy="true"] { opacity: .6; pointer-events: none; }
@media (hover: hover) {
  .locker-geo:hover { border-color: var(--color-primary); color: var(--color-primary); }
}
.locker-close {
  flex: none;
  width: 44px; height: 44px;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: #fff; color: #000; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
@media (hover: hover) {
  .locker-close:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
}

/* ---- body: list (left) + map (right) ------------------------------------ */
.locker-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 380px minmax(0, 1fr); }
.locker-listwrap {
  min-height: 0;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--color-hairline);
}
.locker-count { flex: none; padding: 10px 16px; font-size: 0.86rem; color: rgba(0, 0, 0, 0.55); font-weight: 600; border-bottom: 1px solid var(--color-hairline); }
.locker-count b { color: #000; }
.locker-list { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; }

.locker-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "dot name btn" "dot meta btn";
  align-items: center;
  column-gap: 12px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  scroll-margin: 10px;
}
.locker-card__dot {
  grid-area: dot;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-primary); align-self: start; margin-top: 4px;
}
.locker-card[data-provider="gls"] .locker-card__dot { background: var(--color-support-blue); }
.locker-card__name { grid-area: name; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.locker-card__meta { grid-area: meta; font-size: 0.86rem; color: rgba(0, 0, 0, 0.55); line-height: 1.35; overflow-wrap: anywhere; }
.locker-card__meta .locker-card__dist { color: var(--color-primary); font-weight: 700; }
.locker-card__btn {
  grid-area: btn;
  border: 0; border-radius: var(--radius);
  background: var(--color-surface); color: #000;
  font-weight: 700; font-size: 0.93rem;
  padding: 0 14px; height: 38px; cursor: pointer; white-space: nowrap;
}
@media (hover: hover) {
  .locker-card:hover { border-color: var(--color-primary); }
  .locker-card:hover .locker-card__btn,
  .locker-card__btn:hover { background: var(--color-primary); color: #fff; }
}
.locker-card.is-active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
  background: rgba(253, 14, 15, 0.03);
}

/* list skeleton */
.locker-skel { display: flex; flex-direction: column; gap: 10px; }
.locker-skel__row { height: 70px; border-radius: var(--radius); background: var(--color-surface); position: relative; overflow: hidden; }
.locker-skel__row::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: translateX(-100%); animation: locker-shimmer 1.2s infinite;
}
@keyframes locker-shimmer { to { transform: translateX(100%); } }

/* empty / error state */
.locker-empty { padding: 40px 24px; text-align: center; color: rgba(0, 0, 0, 0.55); }
.locker-empty__icon { color: rgba(0, 0, 0, 0.2); margin-bottom: 10px; }
.locker-empty b { display: block; color: #000; font-size: 1.1rem; margin-bottom: 4px; }
.locker-empty button { border: 0; background: none; color: var(--color-primary); font-weight: 700; cursor: pointer; text-decoration: underline; }

/* map pane */
.locker-map { min-height: 0; height: 100%; background: var(--color-surface); }
.locker-map .leaflet-container { width: 100%; height: 100%; font: inherit; background: #E7E9EC; }
/* keep Leaflet controls on-brand + shadow-free */
.locker-map .leaflet-bar { border: 1px solid var(--color-border); box-shadow: none; border-radius: var(--radius); overflow: hidden; }
.locker-map .leaflet-bar a { color: #000; font-weight: 700; }
.locker-map .leaflet-bar a:hover { background: var(--color-surface); }
.locker-map .leaflet-control-attribution { font-size: 10px; background: rgba(255, 255, 255, 0.85); }

/* ---- custom markers (provider-styled teardrop pins) --------------------- */
.locker-pin {
  width: 26px; height: 26px;
  /* teardrop: rounded square with one sharp corner, rotated */
  background: var(--color-primary);
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  display: flex; align-items: center; justify-content: center;
  transition: transform .18s cubic-bezier(0.16, 1, 0.3, 1);
}
.locker-pin::after { /* white centre dot, un-rotated */
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: rotate(45deg);
}
.locker-marker--gls .locker-pin { background: var(--color-support-blue); }
.locker-marker.is-bounce .locker-pin { animation: locker-bounce .5s ease; }
.locker-marker.is-selected .locker-pin { transform: rotate(-45deg) scale(1.25); z-index: 1000; }
@keyframes locker-bounce {
  0% { transform: rotate(-45deg) translateY(0); }
  40% { transform: rotate(-45deg) translateY(-10px); }
  70% { transform: rotate(-45deg) translateY(-4px); }
  100% { transform: rotate(-45deg) translateY(0); }
}

/* cluster bubbles — flat brand red, white text, hairline halo */
.locker-cluster {
  width: 40px; height: 40px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem;
  border: 2px solid #fff;
  box-shadow: 0 0 0 4px rgba(253, 14, 15, 0.22);
}

/* map popup — on-brand card */
.locker-map .leaflet-popup-content-wrapper { border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); }
.locker-map .leaflet-popup-content { margin: 12px 14px; font: inherit; }
.locker-popup__name { font-weight: 700; margin-bottom: 2px; }
.locker-popup__addr { font-size: 0.86rem; color: rgba(0, 0, 0, 0.6); margin-bottom: 8px; }
.locker-popup__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 38px; border: 0; border-radius: var(--radius);
  background: var(--color-primary); color: #fff; font-weight: 700; cursor: pointer; text-decoration: none;
}

/* mobile: map on top, list below, segmented toggle to flip between them */
.locker-tabs { display: none; }
@media (max-width: 640px) {
  .locker-dialog {
    width: 100vw; height: 100dvh;
    max-width: none; max-height: none;
    border-radius: 0; border: 0;
    margin: 0;
  }
  .locker-head { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .locker-head__title { flex: 1; font-size: var(--font-size-h4); }
  .locker-search { order: 3; flex: 1 1 100%; }
  .locker-tabs {
    order: 4; flex: 1 1 100%;
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    background: var(--color-surface); border-radius: var(--radius); padding: 4px;
  }
  .locker-tabs button {
    border: 0; background: none; border-radius: 5px;
    height: 34px; font-weight: 700; cursor: pointer; color: rgba(0, 0, 0, 0.55);
  }
  .locker-tabs button.is-active { background: #fff; color: #000; box-shadow: var(--shadow-edge); }
  .locker-geo { height: 40px; }
  .locker-body { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .locker-listwrap { border-right: 0; }
  /* one pane visible at a time on phones (toggled via [data-view]) */
  .locker-body[data-view="map"] .locker-listwrap { display: none; }
  .locker-body[data-view="list"] .locker-map { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .locker-dialog[open], .locker-dialog[open]::backdrop { animation: none; }
  .locker-pin, .locker-marker.is-bounce .locker-pin { transition: none; animation: none; }
  .locker-skel__row::after { animation: none; }
  .locker-list { scroll-behavior: auto; }
}

/* ------------------------------------------------------------ cont client
   Autentificare + zona /cont — identitatea checkout-ului (carduri albe,
   borduri hairline, accent roșu, radius 7px). Regula casei: NICIODATĂ
   scroll orizontal — totul e flex/grid care se împachetează. */

.auth-page { display: flex; justify-content: center; padding: 32px 0 56px; }
.auth-card {
  width: 100%;
  max-width: 480px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-card h1 { font-size: var(--font-size-h2); }
.auth-intro { margin: 0; color: rgba(0, 0, 0, 0.55); }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form--narrow { max-width: 420px; }
.auth-row { display: flex; justify-content: flex-end; font-size: 0.93rem; }
.auth-row a, .auth-alt a { color: var(--color-primary); font-weight: 700; }
.auth-alt { margin: 0; color: rgba(0, 0, 0, 0.55); text-align: center; }
.btn--block { width: 100%; }

/* mesajul cald „cont kvik adormit” — DOAR la dormant_kvik / kvik_exists */
.kvik-claim {
  border: 1px solid var(--color-available);
  background: rgba(89, 199, 54, 0.07);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.kvik-claim strong { font-size: 1.05rem; }
.kvik-claim p { margin: 0; }
.kvik-claim form { display: flex; flex-direction: column; gap: 10px; }

/* grila /cont: navigație stânga + conținut */
.account-page h1 { margin-bottom: 4px; }
.account-page > .flash { margin-top: 12px; }
.account-grid {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}
.account-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.account-nav {
  position: sticky;
  top: 160px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 8px;
  display: flex;
  flex-direction: column;
}
.account-nav nav { display: flex; flex-direction: column; gap: 2px; }
.account-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}
.account-nav a .icon { color: var(--color-primary); }
.account-nav a:hover { background: var(--color-surface); }
.account-nav a.is-active { background: var(--color-surface); color: var(--color-primary); }
.account-nav__logout { border-top: 1px solid var(--color-hairline); margin-top: 6px; padding-top: 6px; }
.account-nav__logout button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 0;
  background: none;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  text-align: left;
}
.account-nav__logout button .icon { color: rgba(0, 0, 0, 0.35); }
.account-nav__logout button:hover { background: var(--color-surface); color: var(--color-primary); }

/* cardurile rapide de pe sumar */
.account-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.account-quick {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-decoration: none;
  color: var(--color-text);
}
.account-quick:hover { border-color: var(--color-primary); }
.account-quick .icon { color: var(--color-primary); }
.account-quick small { color: rgba(0, 0, 0, 0.45); overflow-wrap: anywhere; }
.account-more { margin: 0; }
.account-more a { color: var(--color-primary); font-weight: 700; }
.account-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.account-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.account-card-head h2 { margin: 0; }

/* istoric comenzi — GRILĂ aliniată (cap de tabel pe desktop, stivuit pe mobil).
   Aceleași 5 coloane pe cap și pe rânduri → statusul stă mereu în coloana lui. */
.order-rows { display: flex; flex-direction: column; }
.order-rows-head,
.order-row {
  display: grid;
  /* DOAR coloana de cod e flexibilă (1fr); restul sunt LĂȚIMI FIXE, ca fiecare
     rând (grilă separată) să calculeze aceleași coloane → aliniere reală. Coloanele
     fr/auto se calculau per-rând după conținut → nealiniat (bug-ul de dinainte). */
  grid-template-columns: minmax(80px, 1fr) 104px 96px 150px 116px;
  align-items: center;
  column-gap: 14px;
}
.order-rows-head {
  padding: 4px 2px 8px;
  border-bottom: 1px solid var(--color-hairline);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(0, 0, 0, 0.4);
}
.order-rows-head__total { text-align: right; }
.order-row-wrap { border-top: 1px solid var(--color-hairline); }
.order-row-wrap:first-child { border-top: 0; }
.order-rows-head + .order-row-wrap { border-top: 0; }
.order-row {
  padding: 12px 2px;
  text-decoration: none;
  color: var(--color-text);
}
.order-row:hover .order-row__code { color: var(--color-primary); }
.order-row__code { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.order-row__date, .order-row__items { color: rgba(0, 0, 0, 0.45); font-size: 0.93rem; }
.order-row__status { min-width: 0; }
.order-row__total { text-align: right; white-space: nowrap; font-weight: 700; }
/* link de urmărire colet sub rândul de comandă (când AWB-ul e generat) */
.order-row__track {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -4px 2px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.order-row__track:hover { text-decoration: underline; }
/* Motivul „retur indisponibil" sub rândul de comandă (când formularul e activ
   dar comanda nu e eligibilă) — discret, ca să nu concureze cu link-urile. */
.order-row__return-reason { display: inline-block; margin: -4px 2px 12px; font-size: 0.88rem; color: rgba(0, 0, 0, 0.5); }
@media (max-width: 860px) {
  .order-rows-head { display: none; }
  .order-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "code status" "date total" "items total";
    row-gap: 2px;
    column-gap: 10px;
  }
  .order-row__code   { grid-area: code; }
  .order-row__status { grid-area: status; justify-self: end; }
  .order-row__date   { grid-area: date; }
  .order-row__items  { grid-area: items; }
  .order-row__total  { grid-area: total; align-self: center; }
}
/* valoarea AWB din detaliul comenzii: numărul + link-ul de urmărire */
.awb-value { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.awb-value .awb-number { font-variant-numeric: tabular-nums; }
.awb-value .track-link { color: var(--color-primary); font-weight: 600; text-decoration: none; white-space: nowrap; }
.awb-value .track-link:hover { text-decoration: underline; }
/* Header-ul /cont/comenzi/{code}: cod + stare + dată (stânga) vs. total +
   „Adaugă din nou în coș" (dreapta) — flex care se stivuiește pe ecrane
   înguste, niciodată înghesuit lângă titlu. */
.order-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 24px;
  margin: 16px 0 4px;
}
.order-detail-head__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.order-detail-head__info h1 { margin: 0; }
.order-detail-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.order-detail-head__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.order-detail-head__actions form { margin: 0; }
.order-detail-head__total { font-size: 1.3rem; font-weight: 800; white-space: nowrap; }
@media (max-width: 560px) {
  .order-detail-head__actions { align-items: stretch; width: 100%; }
  .order-detail-head__actions .btn { width: 100%; }
}

/* Grila Livrare / Facturare din detaliul comenzii — 1 coloană pe mobil. */
.order-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 700px) {
  .order-detail-grid { grid-template-columns: 1fr; }
}

/* Blocul de adresă (livrare/facturare): nume sau firmă, apoi liniile de adresă. */
.order-address { display: flex; flex-direction: column; gap: 4px; }
.order-address span { color: rgba(0, 0, 0, 0.55); overflow-wrap: anywhere; }

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--color-surface);
  color: rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}
.status-badge--ok { background: rgba(89, 199, 54, 0.12); color: #2c7a12; }
.status-badge--err { background: rgba(253, 14, 15, 0.07); color: #a30001; }
/* portocaliu „expiră curând" + albastru informativ „programat / doar în aplicație".
   (statusurile neutre — folosit / expirat / epuizat / indisponibil — folosesc
   badge-ul de bază, deja gri.) */
.status-badge--warn { background: rgba(245, 158, 11, 0.14); color: #a15c07; }
.status-badge--info { background: rgba(37, 99, 235, 0.1); color: #1d4ed8; }

/* liste adrese / firme */
.entity-rows { display: flex; flex-direction: column; }
.entity-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding: 12px 2px;
  border-top: 1px solid var(--color-hairline);
}
.entity-row:first-child { border-top: 0; }
.entity-row__body { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.entity-row__body strong { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.entity-row__body small { color: rgba(0, 0, 0, 0.45); overflow-wrap: anywhere; }
.entity-row__actions { display: flex; gap: 8px; margin-left: auto; }
.entity-row__actions .btn { height: 34px; padding: 0 12px; font-size: 0.86rem; }

/* „Cupoanele mele" (/cont/cupoane) — cardul de adăugare + rândurile de portofel.
   Reutilizează .checkout-card / .entity-row / .status-badge; aici doar codul
   monospațiat, valoarea și estomparea cupoanelor neaplicabile. */
.coupon-add { margin: 0; }
.coupon-add__field { margin: 0; }
.coupon-add__input { display: flex; gap: 8px; align-items: stretch; margin-top: 6px; }
.coupon-add__input input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 10px 12px;
  font-size: 1rem;
  outline: none;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.coupon-add__input input:focus { background: #fff; border-color: #000; }
.coupon-add__input .btn { flex: none; white-space: nowrap; }
.coupon-row__code { font-weight: 800; letter-spacing: 0.03em; }
.coupon-row__name { color: rgba(0, 0, 0, 0.55); }
.coupon-row__value { font-weight: 700; color: var(--color-primary); }
.coupon-row.is-inactive .coupon-row__code,
.coupon-row.is-inactive .coupon-row__value { color: rgba(0, 0, 0, 0.4); }
.coupon-row.is-inactive .coupon-row__meta { color: rgba(0, 0, 0, 0.4); }

/* butoane secundare (Editează / Șterge) */
.btn--ghost { background: #fff; border: 1px solid var(--color-border); color: var(--color-text); }
.btn--danger { background: #fff; border: 1px solid var(--color-border); color: #a30001; }

/* dialogul adaugă/editează adresă/firmă (modelul locker-picker-ului) */
.account-dialog {
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  width: min(560px, calc(100vw - 32px));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.account-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.account-dialog form { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.account-dialog h2 { font-size: var(--font-size-h3); }
.account-dialog__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* oferta de cont de pe confirmarea comenzii */
.confirm-account {
  width: 100%;
  max-width: 460px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.confirm-account__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.confirm-account__head h2 { font-size: var(--font-size-h4); margin: 0; }
.confirm-account__head button {
  border: 0;
  background: none;
  color: rgba(0, 0, 0, 0.45);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.confirm-account__head button:hover { color: var(--color-primary); }
.confirm-account p { margin: 0; }
.confirm-page .kvik-claim { width: 100%; max-width: 460px; }

/* numele clientului în header — trunchiat, nu lărgește bara */
.header-action__label--account {
  display: inline-block;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (hover: hover) {
  .btn--ghost:hover { background: #fff; border-color: var(--color-primary); color: var(--color-primary); }
  .btn--danger:hover { background: #fff; border-color: #a30001; color: #a30001; }
}

@media (max-width: 900px) {
  .account-grid { grid-template-columns: 1fr; }
  /* Navigația /cont pe subpagini, pe mobil: listă pe O SINGURĂ COLOANĂ (rând =
     icon + etichetă, cu țintă de atins confortabilă), moștenită din regula de
     desktop (.account-nav nav e deja pe coloană). Înainte o făceam grilă de
     pastile (flex-direction:row; flex-wrap:wrap) → rânduri orfane, „totul
     aiurea" (bug-ul raportat). Nu mai e sticky — nu-i coloană laterală pe mobil.
     Deconectarea rămâne jos, separată de o linie (border-top moștenit de pe
     desktop) + spațiu, cu aceeași țintă generoasă. */
  .account-nav { position: static; }
  .account-nav a { padding: 12px 14px; }
  .account-nav__logout { margin-top: 8px; padding-top: 8px; }
  .account-nav__logout button { padding: 12px 14px; }

  /* Sumar (/cont): cardurile-rezumat SUNT navigația → ascundem lista de linkuri
     duplicată (nu se mai citește „totul de două ori"). Păstrăm DOAR
     Deconectarea, mutată jos (order) ca buton full-width — nu o pierdem, dar
     nici nu plutește. Fără linia de despărțire de deasupra: e singurul element,
     are chenar propriu. Garajul rămâne accesibil din meniul din header; Schimbă
     parola din nav-ul subpaginilor (un tap prin orice card). */
  .account-grid--dashboard .account-nav {
    order: 2; border: 0; padding: 0; background: none; gap: 0;
  }
  .account-grid--dashboard .account-nav nav { display: none; }
  .account-grid--dashboard .account-nav__logout {
    border-top: 0; margin-top: 0; padding-top: 0;
  }
  .account-grid--dashboard .account-nav__logout button {
    width: 100%;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px;
  }
}

/* ------------------------------------------------- admin panel (staff) */
/* Clona panoului kvik „Supplies" de pe paginile de produs — vizibil DOAR
   pentru sesiuni de staff (SSO din CRM); hidratat de shop.js, niciodată în
   HTML-ul cache-uit. Design aliniat kvik pentru tranziția echipei. */

.admin-panel { margin: 40px 0 8px; }
.admin-panel__banner {
  background: #FCF4E3;
  border: 1px solid #F0E3C4;
  border-radius: var(--radius);
  color: #8a6d1d;
  padding: 12px 16px;
  margin: 0 0 18px;
  font-size: 0.93rem;
}
.admin-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.admin-panel__adminlink { color: var(--color-primary); font-weight: 700; text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .admin-panel__adminlink:hover { text-decoration: underline; } }
.admin-panel__minted {
  margin: -4px 0 12px;
  color: rgba(0,0,0,.55);
  font-size: 0.9rem;
}

.admin-supply {
  display: grid;
  grid-template-columns: 56px 1.4fr 1.6fr 1.2fr 64px;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
  font-size: 0.93rem;
}
.admin-supply--cols { border: 0; padding: 6px 14px 0; margin-bottom: 2px; }
.admin-supply__colhead {
  font-size: 0.72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(0,0,0,.45);
}
.admin-supply--cols .admin-supply__colhead:nth-child(4) { grid-column: 4 / 6; }
.admin-supply.is-primary { border-color: #59C736; background: #F4FBF1; }
/* Oprit (is_hidden) = nuanță de roșu, nu doar estompat — semnal clar „nu se
   vinde din supply-ul ăsta". */
.admin-supply.is-hidden-supply { border-color: #E7B6B6; background: #FCF3F3; }
.admin-supply__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-surface); font-weight: 700;
}
.admin-supply.is-primary .admin-supply__badge { background: #59C736; color: #fff; }
.admin-supply__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-supply__code { color: rgba(0,0,0,.55); }
.admin-supply__index { color: rgba(0,0,0,.72); font-size: .82em; font-variant-numeric: tabular-nums; }
.admin-supply__chip {
  align-self: flex-start;
  background: #59C736; color: #fff; border-radius: 3px;
  font-size: .72rem; font-weight: 700; padding: 1px 7px; text-transform: uppercase;
}
.admin-supply__chip--wh { background: var(--color-ink); }
/* Retur blocat de furnizor (IC BLOCKED_RETURN): chihlimbariu = atenție, parcat
   din vânzare până la override-ul „vinde totuși". */
.admin-supply__chip--blocked { background: #B00; }
.admin-supply__mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-supply__seen { color: rgba(0,0,0,.55); font-size: 0.86rem; }
.admin-supply__avail { color: var(--color-available); font-weight: 600; }
.admin-supply__pp { color: var(--color-primary); }
.admin-supply__reason { color: #B00; font-size: .86rem; }
.admin-supply__right { display: flex; flex-direction: column; gap: 2px; }
/* Prețul „activ" (supply care se vinde) = verde; oprit / nevandabil = roșu. */
.admin-supply__customer { font-size: 1rem; font-weight: 700; color: #2E9E1F; }
.admin-supply__customer--na { color: var(--color-price-old); font-weight: 700; font-style: italic; }
.admin-supply.is-hidden-supply .admin-supply__customer { color: var(--color-price-old); }

/* Switch-ul „Displayed to Customers" (kvik toggle verde) */
.admin-toggle { position: relative; display: inline-block; width: 46px; height: 26px; justify-self: end; cursor: pointer; }
.admin-toggle input { opacity: 0; width: 0; height: 0; }
.admin-toggle__slider {
  position: absolute; inset: 0; border-radius: 13px;
  background: rgba(0,0,0,.25); transition: background .15s ease;
}
.admin-toggle__slider::before {
  content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  left: 3px; top: 3px; background: #fff; transition: transform .15s ease;
}
.admin-toggle input:checked + .admin-toggle__slider { background: #59C736; }
.admin-toggle input:checked + .admin-toggle__slider::before { transform: translateX(20px); }
.admin-toggle input:disabled + .admin-toggle__slider { opacity: .5; }

.admin-panel__note { color: var(--color-available); font-weight: 600; min-height: 1.4em; margin: 4px 0 0; }

.admin-calc__title { margin: 26px 0 10px; }
.admin-calc { border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; font-size: 0.93rem; }
.admin-calc__row { display: grid; grid-template-columns: 260px 1fr; gap: 16px; padding: 9px 14px; }
.admin-calc__row + .admin-calc__row { border-top: 1px solid var(--color-hairline); }
.admin-calc__label { color: rgba(0,0,0,.55); }
.admin-calc__value.is-strong { font-weight: 700; }
.admin-calc__step {
  padding: 10px 14px; font-weight: 700; color: #1D3FBF;
  border-top: 1px solid var(--color-border); background: var(--color-surface);
}

@media (max-width: 899px) {
  .admin-supply { grid-template-columns: 40px 1fr 64px; }
  .admin-supply__mid, .admin-supply__right { grid-column: 2; }
  .admin-supply--cols { display: none; }
  .admin-calc__row { grid-template-columns: 1fr; gap: 2px; }
}

/* ── Pagina de marcă (/piese-auto/vw): antet + listă modele ──────────────── */
.make-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin: 8px 0 20px;
}
.make-head__title { margin: 0 0 4px; font-size: 1.7rem; line-height: 1.15; }
.make-head__lead { margin: 0; color: rgba(0, 0, 0, 0.55); }
.make-head__logo { flex: 0 0 auto; }
.make-head__logo img { display: block; width: auto; height: 56px; object-fit: contain; }
.make-empty { padding: 24px 0; color: rgba(0, 0, 0, 0.55); }

.model-list { display: flex; flex-direction: column; }
.model-group {
  display: grid; grid-template-columns: 200px 1fr; gap: 16px;
  padding: 16px 0; border-top: 1px solid var(--color-border);
}
.model-group:last-child { border-bottom: 1px solid var(--color-border); }
.model-group__family { font-weight: 700; color: var(--color-ink); padding-top: 6px; }
.model-group__models {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 24px; align-content: start;
}
.model-item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 7px 8px; border-radius: var(--radius); font: inherit; color: var(--color-primary);
  /* tile-ul e ACUM o ancoră (crawlable) — fără subliniere de link implicit. */
  text-decoration: none;
}
.model-item:hover { background: var(--color-surface); }
.model-item__name { font-weight: 600; }
.model-item__years { color: rgba(0, 0, 0, 0.45); font-size: 0.85rem; }

/* ── Modal motorizări ────────────────────────────────────────────────────── */
.eng-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-start; justify-content: center; }
.eng-modal[hidden] { display: none; }
.eng-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.eng-modal__panel {
  position: relative; z-index: 1; width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 64px); overflow-y: auto; margin: 48px 16px;
  background: var(--color-bg); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28); padding: 22px 24px 28px;
}
.eng-modal__close {
  position: absolute; top: 10px; right: 12px; background: none; border: 0;
  font-size: 1.6rem; line-height: 1; cursor: pointer; color: rgba(0, 0, 0, 0.5);
}
.eng-modal__close:hover { color: var(--color-ink); }
.eng-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-right: 24px; }
.eng-modal__title { margin: 0; font-size: 1.35rem; }
.eng-modal__sub { margin: 2px 0 0; color: rgba(0, 0, 0, 0.45); }
.eng-modal__pic img { display: block; width: auto; height: 64px; object-fit: contain; }
.eng-modal__lead { margin: 14px 0 10px; font-style: italic; color: rgba(0, 0, 0, 0.55); }
.eng-modal__loading, .eng-modal__none { padding: 16px 0; color: rgba(0, 0, 0, 0.55); }

.eng-group { margin-bottom: 18px; }
.eng-group__fuel { margin: 0 0 8px; font-size: 1.05rem; }
.eng-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.eng {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; padding: 8px; border-radius: var(--radius); font: inherit;
  /* pe pagina de model .eng e o ancoră (link direct spre vehicul) — fără subliniere. */
  text-decoration: none;
}
.eng:hover { background: var(--color-surface); }
.eng__head { font-weight: 600; color: var(--color-ink); }
.eng__meta { font-size: 0.85rem; color: rgba(0, 0, 0, 0.5); }

body.modal-open { overflow: hidden; }

@media (max-width: 720px) {
  .model-group { grid-template-columns: 1fr; gap: 6px; }
  .model-group__models { grid-template-columns: 1fr; }
  .eng-grid { grid-template-columns: 1fr; }
  .make-head__logo img { height: 44px; }
}

/* ---- cupoane 2026-07-09 --------------------------------------------------
   Cutia de cupon din coș (modelată pe form.cart-vin) + rândul de reducere din
   totaluri (coș + rezumatul de checkout) + confirmarea aplicării. Aceeași
   identitate: Inter, #FD0E0F promo, 7px radius, #F3F3F3 surface, hairlines. */

/* Rândul de reducere din .cart-totals__rows (coș + checkout). Suma scăzută în
   roșul promo, ca prețurile de listare. ✕-ul de eliminare stă inline lângă cod.
   Celula-etichetă e un <div> (formularul de eliminare nu e permis într-un <span>). */
.cart-totals__discount-label { display: inline-flex; align-items: baseline; gap: 6px; }
.cart-totals__row--discount strong { color: var(--color-primary); white-space: nowrap; }

/* Control „Elimină cuponul" (coș) — glif ✕ + etichetă, un buton CLAR (nu un
   simplu ✕), prezent pentru cuponul valid ȘI invalid, app + web. Discret ca
   stil, evident ca acțiune; se aprinde în roșul promo la hover. */
.cart-coupon__remove { display: inline-flex; margin: 0; }
.cart-coupon__remove-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 5px 10px;
  margin: 0;
  line-height: 1;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
}
.cart-coupon__remove-x { font-size: 0.9rem; line-height: 1; color: rgba(0, 0, 0, 0.5); }
@media (hover: hover) {
  .cart-coupon__remove-btn:hover { border-color: var(--color-primary); color: var(--color-primary); background: #fff; }
  .cart-coupon__remove-btn:hover .cart-coupon__remove-x { color: var(--color-primary); }
}

/* Stare „cod valid" — confirmarea verde + butonul de eliminare dedesubt. */
.cart-coupon--applied { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

/* Mini-formularul de cupon (stare „niciun cod") — input + buton pe același rând,
   sub eticheta din .field (ca VIN-ul, dar cu buton vizibil: cuponul cere apply
   explicit). */
.cart-coupon { margin: 0; }
.cart-coupon__input { display: flex; gap: 8px; align-items: stretch; }
.cart-coupon__input input {
  flex: 1;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 10px 12px;
  font-size: 1rem;
  outline: none;
  text-transform: uppercase;
}
.cart-coupon__input input:focus { background: #fff; border-color: #000; }
.cart-coupon__apply {
  flex: none;
  white-space: nowrap;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-weight: 700;
  padding: 0 16px;
  height: auto;
}
@media (hover: hover) { .cart-coupon__apply:hover { border-color: var(--color-primary); color: var(--color-primary); background: #fff; } }

/* Confirmarea aplicării (stare „cod valid") — linie verde discretă; rândul de
   reducere de deasupra poartă suma + ✕. */
.cart-coupon__applied {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.93rem;
  font-weight: 600;
  color: #2c7a12;
}
.cart-coupon__applied strong { color: inherit; }
.cart-coupon__check {
  flex: none;
  align-self: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-available);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Stare „cod stocat dar invalid" — codul + ✕ pe un rând, motivul (flash--warn)
   dedesubt. */
.cart-coupon--invalid { display: flex; flex-direction: column; gap: 8px; }
.cart-coupon__stored { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cart-coupon__reason { margin: 0; font-size: 0.86rem; }

/* „Cupoanele mele" în coș (portofelul contului) — listă compactă de rânduri
   tap-to-apply. Cele aplicabile au buton „Aplică" (POST pe același /cos/cupon);
   cele neaplicabile apar estompate, cu badge-ul lor; cel aplicat e marcat.
   Fiecare rând postează un mini-formular, deci flexbox nu <form> ca <span>. */
.wallet-coupons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-hairline);
}
.wallet-coupons__title { font-weight: 700; font-size: 0.9rem; }
.wallet-coupon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
}
.wallet-coupon__info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.wallet-coupon__info strong { font-weight: 800; letter-spacing: 0.03em; }
.wallet-coupon__value { font-weight: 700; color: var(--color-primary); font-size: 0.9rem; }
.wallet-coupon__name { color: rgba(0, 0, 0, 0.5); font-size: 0.86rem; overflow-wrap: anywhere; }
.wallet-coupon__apply {
  flex: none;
  white-space: nowrap;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-weight: 700;
  height: 32px;
  padding: 0 14px;
}
@media (hover: hover) { .wallet-coupon__apply:hover { border-color: var(--color-primary); color: var(--color-primary); background: #fff; } }
.wallet-coupon.is-inactive { background: var(--color-surface); }
.wallet-coupon.is-inactive .wallet-coupon__info strong,
.wallet-coupon.is-inactive .wallet-coupon__value { color: rgba(0, 0, 0, 0.4); }
.wallet-coupon.is-applied { border-color: rgba(89, 199, 54, 0.4); }
.wallet-coupons__all { align-self: flex-start; color: var(--color-primary); font-weight: 700; font-size: 0.9rem; }

/* ── Contact rapid din header (dropdown pe două coloane) ──────────────────
   Panoul refolosește .menu-drop (poziționare + shadow); aici doar lățimea,
   grila pe două coloane și stilul formularului compact. Randat DOAR pe desktop
   (top-line-ul dispare sub 600px → link simplu spre /contact în bara de acțiuni). */
.contact-panel { min-width: 520px; max-width: 92vw; padding: 16px; }
.contact-panel__cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
.contact-panel__form { display: flex; flex-direction: column; gap: 8px; }
.contact-panel__form .field span { font-size: 0.8rem; font-weight: 600; }
.contact-panel__form input,
.contact-panel__form textarea {
  width: 100%; border: 1px solid var(--color-hairline); border-radius: var(--radius);
  padding: 7px 9px; font: inherit; font-size: 0.9rem; background: #fff;
}
.contact-panel__form textarea { resize: vertical; }
.contact-panel__form .field--err input,
.contact-panel__form .field--err textarea { border-color: var(--color-primary); }
/* Honeypot: scos din flux vizual + accesibilitate, dar prezent în DOM. */
.contact-panel__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-panel__turnstile:empty { display: none; }
.contact-panel__submit { margin-top: 4px; align-self: flex-start; }
.contact-panel__result { border-radius: var(--radius); padding: 8px 10px; font-size: 0.86rem; }
.contact-panel__result--err { background: #fdecec; color: #a01414; border: 1px solid #f5c2c2; }
.contact-panel__ok { margin: 0; padding: 14px 4px; font-size: 0.95rem; font-weight: 600; color: #1a7a3a; }
.contact-panel__info { border-left: 1px solid var(--color-hairline); padding-left: 16px; display: flex; flex-direction: column; gap: 6px; }
.contact-panel__label { margin: 0; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #888; }
.contact-panel__info a { color: var(--color-primary); font-weight: 700; text-decoration: none; }
.contact-panel__info a:hover { text-decoration: underline; }
.contact-panel__hours { margin: 2px 0 0; font-size: 0.88rem; color: #333; }
.contact-panel__more { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 0.9rem; }

/* Link-ul de Contact din bara de acțiuni: ASCUNS pe desktop, apare pe mobil
   (unde top-line-ul cu panoul dispare). Pereche cu .top-line { display:none }. */
.header-action--contact { display: none; }
@media (max-width: 599px) {
  .header-action--contact { display: inline-flex; }
}

/* ------------------------------------------------------ error pages (404/410) */
/* Paginile prietenoase de eroare: hero cu titlu-glumă + blocuri de recuperare
   (contact / picker / mărci). Refolosesc componentele existente
   (.eyebrow, .btn, .brand-grid, .vehicle-picker); aici doar layout + ritm.
   Căutarea rămâne DOAR bara din header (typeahead-ul shop.js) — fără duplicat. */
.err-page { max-width: 980px; padding-top: 28px; padding-bottom: 8px; }

/* Hero — centrat, aerisit; o singură glumă în titlu. */
.err-hero { text-align: center; padding: 12px 0 8px; }
.err-hero h1 { margin: 6px 0 10px; font-size: var(--font-size-h1); }
.err-hero__sub {
  margin: 0 auto;
  max-width: 640px;
  color: rgba(0, 0, 0, 0.55);
  font-size: 1.02rem;
  line-height: 1.5;
}

/* Blocurile de recuperare — fiecare secțiune la un ritm constant. */
.err-blocks { margin-top: 8px; }
.err-section { margin-top: 40px; }
.err-section > h2 { margin: 2px 0 14px; font-size: var(--font-size-h3); }

/* Banda de contact — text stânga + acțiuni dreapta pe o placă surface. */
.err-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.err-contact__lead { margin: 0; font-weight: 700; font-size: 1.05rem; }
.err-contact__sub { margin: 4px 0 0; font-size: 0.92rem; color: rgba(0, 0, 0, 0.55); }
.err-contact__sub a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.err-contact__sub a:hover { text-decoration: underline; }
.err-contact__actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .err-contact { flex-direction: column; align-items: stretch; text-align: center; }
  .err-contact__actions { justify-content: center; }
  .err-contact__actions .btn { flex: 1 1 auto; }
}

/* ================================================ recenzii (redesign) ====
   Componenta de stele fracționale (.stars-x) + ratingul din header (.product-
   rating) + secțiunea de recenzii (.product-reviews*). Culori: orange
   compari.ro pentru umplere, gol la rgba(0,0,0,.18) — NICIODATĂ negru.
   Convenții de casă: 4px radius, hairlines, secțiune margin-top:40px, h2
   margin-bottom:12px. */

/* Stele fracționale — rândul gri e baza; overlay-ul orange ACOPERĂ identic
   (același glyph-run + ACELAȘI letter-spacing, altfel lățimile diferă) și e
   clipuit la width:{%} ca să redea fracția. */
.stars-x {
  position: relative;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 1px;
  vertical-align: middle;
}
.stars-x__base,
.stars-x__fill {
  letter-spacing: inherit; /* aceeași lățime pe ambele straturi */
}
.stars-x__base { color: rgba(0, 0, 0, 0.18); }
.stars-x__fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--color-reviews-orange);
}

/* Ratingul de sub titlu — rând propriu sub meta (brand/cod): stele + media
   bold + rest muted. Hover subliniază DOAR textul, nu stelele. */
.product-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  text-decoration: none;
  color: inherit;
}
.product-rating__text { color: rgba(0, 0, 0, 0.55); font-size: 0.95rem; }
.product-rating__text strong { color: var(--color-text); font-weight: 700; }
.product-rating:hover .product-rating__text { text-decoration: underline; }

/* Secțiunea de recenzii — 2 coloane pe desktop (sumar fix 280px + listă),
   stack pe mobil. Fără cutii grele: doar separatoare hairline între recenzii. */
.product-reviews { margin-top: 40px; }
.product-reviews h2 { margin-bottom: 12px; }
.product-reviews__grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: start;
  max-width: 760px;
}

/* Coloana de sumar */
.product-reviews__score { display: flex; align-items: baseline; gap: 6px; }
.product-reviews__avg { font-size: 2.6rem; font-weight: 700; line-height: 1; }
.product-reviews__outof { color: rgba(0, 0, 0, 0.45); }
.product-reviews__score-stars { display: block; margin-top: 8px; }
.product-reviews__count { margin: 8px 0 0; color: rgba(0, 0, 0, 0.55); font-size: 0.9rem; }
.product-reviews__source { color: rgba(0, 0, 0, 0.45); }

/* Distribuția pe stele — track hairline gri, fill orange, 8px / radius 4px. */
.product-reviews__dist {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.product-reviews__dist-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}
.product-reviews__dist-label { flex: none; width: 28px; color: rgba(0, 0, 0, 0.55); }
.product-reviews__dist-track {
  flex: 1;
  height: 8px;
  background: var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.product-reviews__dist-fill {
  display: block;
  height: 100%;
  background: var(--color-reviews-orange);
  border-radius: var(--radius);
}
.product-reviews__dist-count { flex: none; width: 32px; text-align: right; color: rgba(0, 0, 0, 0.45); }

/* Coloana cu lista — carduri compacte, separator hairline de la a doua. */
.product-reviews__list { list-style: none; margin: 0; padding: 0; }
.product-review { padding: 14px 0; }
.product-review[hidden] { display: none; }
.product-review + .product-review { border-top: 1px solid var(--color-hairline); }
.product-review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.product-review__date { flex: none; color: rgba(0, 0, 0, 0.4); font-size: 0.85rem; }
.product-review__pros,
.product-review__cons,
.product-review__aspect { margin: 6px 0 0; font-size: 0.92rem; line-height: 1.5; }
.product-review__pros b { color: var(--color-available); }
.product-review__cons b { color: var(--color-price-old); }
.product-review__aspect { color: rgba(0, 0, 0, 0.55); font-style: italic; }

/* Butonul „Arată toate…" — buton secundar de casă (hairline, 4px). */
.product-reviews__toggle {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 8px 14px;
  font: inherit;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
}
.product-reviews__toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }

@media (max-width: 640px) {
  /* Sumar + listă se stivuiesc pe o coloană. */
  .product-reviews__grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================ rânduri de listare (recenzii) ====
   Bloc 2 (writer B): ratingul agregat pe cardul de listare (.product-row__rating)
   + badge-ul de discount pe miniatură (.product-row__discount). Refolosește
   componenta .stars-x (Bloc 1) la 14px; nu redefinește stelele. Convenții de
   casă: 4px radius, orange compari.ro pentru stele, badge negru/alb ca
   .discount-badge de pe pagina de produs. Additiv — cascada suprascrie
   .product-row__media (poziționarea badge-ului) fără a atinge regula de bază. */

/* Miniatura devine ancoră de poziționare pentru badge (era flex static). */
.product-row__media { position: relative; }

/* Rândul de rating sub meta — stele 14px + „{medie} ({nr})" muted. Apare DOAR
   când slug-ul are stats reale (gardat în partial, fără rating fake). */
.product-row__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
}
.product-row__rating-text { color: rgba(0, 0, 0, 0.55); font-size: 0.86rem; }

/* Badge de discount — variantă mică a .discount-badge de pe pagina de produs
   (negru, alb, 4px), ancorat în colțul din stânga-sus al miniaturii. */
.product-row__discount {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;                       /* peste `.no-photo` (strat 0) */
  background: #000;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
  border-radius: var(--radius);
  padding: 4px 7px;
  white-space: nowrap;
}

/* Badge mai mic pe miniatura de 96px (mobil). Plasat DUPĂ regula de bază, în
   aceeași secțiune, ca override-ul să câștige pe cascadă (specificitate egală
   → decide ordinea în sursă). */
@media (max-width: 599px) {
  .product-row__discount { font-size: 0.75rem; padding: 3px 5px; top: 4px; left: 4px; }
}

/* Eticheta „Recomandat" — discretă, auriu (--color-tag-recommended, NU roșul de
   brand), pe cardul de listare deasupra numelui. Semnalul = recommended_rank
   (promovează produsul pe listări). Fundal auriu foarte spălat + text auriu +
   stea outline mică; sleek fără să concureze cu prețul/butonul roșu. */
.product-row__reco {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin: 0 0 5px;
  padding: 2px 8px;
  border-radius: var(--radius);
  background: rgba(188, 148, 70, 0.12);
  color: var(--color-tag-recommended);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.35;
}
.product-row__reco svg { flex: none; }

/* ============================================================ consimțământ cookie
   Banner (bară jos, non-blocantă) + panou de preferințe (<dialog> nativ). Markup
   copt în layout (whole-page cached); public/js/consent.js îl comută. Refuzul și
   acceptul sunt butoane egale (EDPB Cookie Banner Taskforce). Fixed → zero CLS. */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 85; /* peste header (60/70), sub lightbox (90) */
  background: #fff;
  border-top: 3px solid var(--color-primary);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.14);
}
.cookie-banner[hidden] { display: none; }

.cookie-banner__inner {
  display: flex;
  align-items: center;
  gap: 20px 28px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.cookie-banner__text { flex: 1 1 auto; min-width: 0; }
.cookie-banner__text strong {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-ink);
  margin-bottom: 2px;
}
.cookie-banner__text p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.62);
}
.cookie-banner__text a { color: var(--color-primary); font-weight: 600; }

.cookie-banner__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Butoanele de consimțământ: țintă de atingere ≥44px; „Acceptă/Respinge" au
   ACEEAȘI dimensiune (greutate vizuală egală). Text mărit ca roșul brandului să
   depășească pragul WCAG „large text" (3:1). */
.cookie-btn {
  min-height: 44px;
  font-size: 1.05rem;
  padding: 0 18px;
  white-space: nowrap;
}
.cookie-btn[data-consent="reject"],
.cookie-btn[data-consent="settings"],
.cookie-btn[data-consent="save"] {
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-border);
}
@media (hover: hover) {
  .cookie-btn[data-consent="reject"]:hover,
  .cookie-btn[data-consent="settings"]:hover,
  .cookie-btn[data-consent="save"]:hover { background: #e9e9e9; color: var(--color-ink); }
}
.cookie-btn:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 2px;
}

/* mobil: text peste acțiuni, butoane pe toată lățimea */
@media (max-width: 719px) {
  .cookie-banner__inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .cookie-banner__actions { flex-wrap: wrap; }
  .cookie-btn { flex: 1 1 auto; }
}

/* ---- panoul de preferințe (dialog nativ, idiomul locker-picker) ---- */
.cookie-dialog {
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}
.cookie-dialog::backdrop { background: rgba(23, 19, 14, 0.45); }
.cookie-dialog[open] { animation: cookie-dialog-in .24s cubic-bezier(0.16, 1, 0.3, 1); }
.cookie-dialog[open]::backdrop { animation: cookie-backdrop-in .24s ease; }
@keyframes cookie-dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes cookie-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

.cookie-dialog__box { padding: 22px 22px 18px; }
.cookie-dialog__title { font-size: 1.35rem; font-weight: 700; color: var(--color-ink); margin: 0 0 6px; }
.cookie-dialog__lead { font-size: 0.9rem; line-height: 1.5; color: rgba(0, 0, 0, 0.62); margin: 0 0 16px; }
.cookie-dialog__lead a { color: var(--color-primary); font-weight: 600; }

.cookie-cat {
  padding: 12px 0;
  border-top: 1px solid var(--color-hairline);
}
.cookie-cat__row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 700;
  color: var(--color-ink);
}
.cookie-cat__row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
  flex: none;
}
.cookie-cat__row input:disabled { cursor: not-allowed; opacity: 0.6; }
.cookie-cat__name em { font-weight: 500; font-style: normal; color: rgba(0, 0, 0, 0.5); font-size: 0.85rem; }
.cookie-cat__desc {
  margin: 6px 0 0 30px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.6);
}
.cookie-cat__desc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8em;
  background: var(--color-surface);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
}

.cookie-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.cookie-dialog__actions .cookie-btn { flex: 1 1 auto; }

@media (prefers-reduced-motion: reduce) {
  .cookie-dialog[open], .cookie-dialog[open]::backdrop { animation: none; }
}

/* ---------------------------------------------------- smart app banner
   Bară de jos dismissibilă (partials/app-banner.blade.php), randată doar cu
   config('mobile.banner_enabled') pornit și de-ascunsă client-side din shop.js
   (initAppBanner). Bandă roșie de brand, colțuri 4px pe CTA, umbră pop —
   aceleași variabile ca restul temei. `[hidden]` o ține invizibilă până când
   JS-ul decide (plafon 14 zile, niciodată în shell-ul app). */
#app-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-pop);
}
#app-banner[hidden] { display: none; }
.app-banner__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
}
.app-banner__text { display: flex; flex-direction: column; min-width: 0; }
.app-banner__title { font-weight: 700; font-size: 1rem; }
.app-banner__sub { font-size: 0.86rem; opacity: 0.85; }
.app-banner__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.app-banner__cta {
  background: #fff;
  color: #000;
  height: 40px;
  min-width: 130px;
}
.app-banner__dismiss {
  background: none;
  border: 0;
  color: #fff;
  padding: 6px 4px;
  cursor: pointer;
  text-decoration: underline;
  opacity: 0.9;
}
@media (hover: hover) {
  .app-banner__cta:hover { background: #f0f0f0; color: #000; }
  .app-banner__dismiss:hover { opacity: 1; }
}
@media (max-width: 600px) {
  .app-banner__sub { display: none; }
  .app-banner__cta { min-width: 96px; font-size: 1rem; }
}

/* ---------------------------------------------------- CTA push în aplicație
   Blocul „activează notificările" de pe confirmarea comenzii
   (partials/app-push-cta.blade.php), dezvăluit client-side din shop.js
   (initAppPushCta) DOAR în shell-ul aplicației. Aceeași carcasă bordată ca
   oferta de cont de deasupra, ca să se lege vizual în confirm-card.
   ⚠ [hidden] explicit: fiindcă dăm `display:flex` pe #app-push-cta și pe
   .__offer, atributul `hidden` (regula UA) ar fi învins de aceste reguli de
   autor → le re-ascundem manual (exact tiparul de la #app-banner). */
#app-push-cta {
  width: 100%;
  max-width: 460px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
#app-push-cta[hidden],
.app-push-cta__offer[hidden],
.app-push-cta__done[hidden] { display: none; }
.app-push-cta__offer { display: flex; flex-direction: column; gap: 10px; }
.app-push-cta__offer h2 { font-size: var(--font-size-h4); margin: 0; }
.app-push-cta__offer p { margin: 0; }
.app-push-cta__consent { display: flex; align-items: flex-start; gap: 8px; font-size: 0.92rem; cursor: pointer; }
.app-push-cta__consent input { margin-top: 3px; flex: none; }
.app-push-cta__done { margin: 0; font-weight: 700; color: var(--color-primary); }

/* „Activează notificările pe acest telefon" — butonul din starea goală de pe
   /cont/notificari (account/notifications.blade.php), dezvăluit client-side din
   shop.js (initAccountNotificationsActivate) DOAR în shell-ul aplicației. Ascuns
   implicit (web nu-l vede niciodată).
   ⚠ [hidden] explicit: fiindcă dăm `display:flex`, atributul `hidden` (regula UA)
   ar fi învins → îl re-ascundem manual (ca la #app-push-cta). */
.account-push-activate { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.account-push-activate[hidden] { display: none; }
.account-push-activate__denied { margin: 0; }

/* Promo de magazine pe starea goală /cont/notificari — DOAR web + APP_BANNER_ENABLED
   (blade), ascuns în aplicație din shop.js. Badge-uri text (dark, 4px sharp);
   badge-urile oficiale Apple/Google le poate pune Paul la materialele de lansare.
   ⚠ [hidden] explicit fiindcă dăm display:flex (regula UA ar fi învinsă). */
.store-promo { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.store-promo[hidden] { display: none; }
.store-badge {
  display: inline-flex; flex-direction: column; justify-content: center;
  padding: 8px 16px; border-radius: 4px; background: var(--color-ink); color: #fff;
  text-decoration: none; line-height: 1.15; min-width: 150px;
}
.store-badge small { font-size: 11px; opacity: .8; }
.store-badge strong { font-size: 17px; font-weight: 700; }
@media (hover: hover) { .store-badge:hover { background: #000; color: #fff; } }

/* Opt-in push „pe telefon" de la checkout (partials/app-push-optin), dezvăluit
   client-side din shop.js (initAppPushOptin) DOAR în shell-ul aplicației, lângă
   consimțămintele de comandă. Bifele refolosesc .checkbox-row (deja stilat).
   ⚠ [hidden] explicit: fiindcă dăm `display:flex` pe container, atributul
   `hidden` (regula UA) ar fi învins → îl re-ascundem manual (ca la #app-banner
   / #app-push-cta). Sub-bifa (oferte) e indentată sub cea principală. */
.app-push-optin { display: flex; flex-direction: column; gap: 10px; }
.app-push-optin[hidden] { display: none; }
.app-push-optin__sub { margin-left: 28px; }

/* Toast minimal — un nod temporar injectat de shop.js (ex. „Link copiat" la
   Distribuie, pe fallback-ul de desktop). Fără dependențe; se auto-elimină. */
.am-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  z-index: 1000;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border-radius: var(--radius);
  background: #1a1a1a;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.am-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ----------------------------------------------------- card cadou (/card-cadou)
   Pagina de vânzare a cardului cadou, în limbajul vizual al paginii de produs:
   STÂNGA = „produsul" (vizualul cardului + „Cum funcționează"), DREAPTA = ritualul
   de cumpărare (un frate .buy-panel: denominații, price-stack, CTA). Reutilizează
   token-urile din :root — nimic inventat aici. Colapsează la o coloană sub 900px
   (ca .checkout-grid), niciodată scroll orizontal. */
.voucher-page { padding-top: 20px; padding-bottom: 48px; }
.voucher-page > h1 { text-wrap: balance; }
.voucher-hero { margin: 6px 0 18px; color: var(--color-text); max-width: 64ch; }

.voucher-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 24px;
  align-items: start;
}

/* --- STÂNGA: coloana prezentațională (card + pași + notă) --- */
.voucher-aside { display: flex; flex-direction: column; gap: 1.75rem; min-width: 0; }

/* Vizualul cardului cadou — obiect fizic ink-black; AICI e permis un radius mai
   mare (8–10px) fiindcă e un card, nu un panou de UI. Fără glassmorphism, fără
   text în gradient, fără dungi laterale — un singur „sheen" discret (::after).
   Plafonat la 340px și CENTRAT (aer pe mobil, VOUCHER-SPEC-V2 §5); width 100%
   ca să NU depășească niciodată containerul îngust (fără scroll orizontal). */
.voucher-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  aspect-ratio: 1.6;
  border-radius: 10px;
  background: var(--color-ink);
  color: #fff;
  padding: 22px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lift);
}
.voucher-card__wordmark { flex: none; }
/* Wordmark responsiv — scalează cu cardul (viewBox intact, fără crop în px fix):
   evită tăierea de pe mobil semnalată de owner. */
.voucher-card__wordmark svg { display: block; width: min(140px, 44%); height: auto; }
.voucher-card__value {
  margin-top: auto;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.voucher-card__code {
  margin: 10px 0 0;
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.62);
}
.voucher-card__foot {
  margin: 14px 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Un singur reflex diagonal, foarte discret — NU glassmorphism. */
.voucher-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 42%);
  pointer-events: none;
}
/* Schimbarea valorii = fade/scale rapid DOAR pe text (registru discret). */
@keyframes voucher-bump { from { opacity: 0.35; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.voucher-card__value.is-bumped { animation: voucher-bump 160ms ease-out; }
/* Vizualul cardului stă deasupra sheen-ului. */
.voucher-card__wordmark, .voucher-card__value, .voucher-card__code, .voucher-card__foot { position: relative; z-index: 1; }

/* „Cum funcționează" — secvență reală de 3 pași (numere câștigate), rânduri
   compacte separate de hairline, NU carduri identice cu iconițe. */
.voucher-how h2 { font-size: var(--font-size-h4); margin: 0 0 8px; }
.voucher-steps { list-style: none; margin: 0; padding: 0; counter-reset: vstep; }
.voucher-steps li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--color-hairline);
}
.voucher-steps li:first-child { border-top: 0; }
.voucher-steps li::before {
  counter-increment: vstep;
  content: counter(vstep);
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-tint);
  color: var(--color-primary);
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}
.voucher-steps strong { font-weight: 700; }
.voucher-steps small { display: block; color: rgba(0, 0, 0, 0.55); font-weight: 500; margin-top: 1px; }

/* Nota onestă — rând discret cu separatoare · . */
.voucher-fineprint { margin: 0; font-size: 0.86rem; color: rgba(0, 0, 0, 0.55); }

/* --- DREAPTA: ritualul de cumpărare (frate .buy-panel) --- */
.voucher-buy { gap: 1.5rem; }
/* Bifa de acceptare a Termenilor — rând compact, tipografie discretă (house
   .checkbox-row); linkul în roșu primary. */
.voucher-terms { font-size: 0.9rem; }
/* Fieldset-uri pentru grupurile de radio (a11y) — resetate vizual, legenda
   preia rolul de h2. */
.voucher-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.voucher-fieldset > legend {
  padding: 0;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-heading);
  line-height: 1.2;
}

/* Denominații — grilă mobile-first (repeat(auto-fill, minmax(140px, 1fr))),
   colț sharp 4px, bordură hairline, selecție = bordură primary + fundal tint +
   bifă roșie. Fără scroll orizontal (minmax se restrânge). */
.voucher-denoms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 12px 0 0;
}
.voucher-denom {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px;
  cursor: pointer;
  background: #fff;
  transition: border-color 140ms ease-out, background-color 140ms ease-out;
}
@media (hover: hover) { .voucher-denom:hover { border-color: var(--color-primary); } }
/* Radio-ul vizual ascuns; inelul de focus urcă pe tile (focus-visible). */
.voucher-denom input { position: absolute; opacity: 0; pointer-events: none; }
.voucher-denom:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.voucher-denom:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-tint);
  box-shadow: 0 0 0 1px var(--color-primary) inset;
}
/* Bifa roșie — vizibilă doar pe tile-ul selectat. */
.voucher-denom__check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.72rem;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
}
.voucher-denom:has(input:checked) .voucher-denom__check { display: flex; }
.voucher-denom__face { font-size: 1.15rem; font-weight: 700; }
.voucher-denom__old { color: var(--color-price-old); font-size: 0.85rem; }
.voucher-denom__old s { color: var(--color-price-old); }
.voucher-denom__price { font-weight: 700; }
.voucher-denom--custom .voucher-denom__face { font-size: 1rem; }
.voucher-denom--custom .voucher-denom__price { color: rgba(0, 0, 0, 0.55); font-weight: 600; }
.voucher-custom-amount { margin: 12px 0 0; max-width: 280px; }

/* Blocul destinatarului (altcineva) + reveal-ul sumei custom — apariție subtilă
   (opacitate + translate scurt); reduced-motion = instant. */
@keyframes voucher-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.voucher-reveal { animation: voucher-reveal 200ms ease-out; }
#voucher-recipient-fields { margin-top: 4px; }
#voucher-recipient-fields .cf-turnstile { margin-top: 12px; }

/* Tranziția selecției pe „Pentru cine e cardul?" (border/background) — scoped
   ca să nu atingă option-card-urile de la checkout. */
.voucher-buy .option-card { transition: border-color 140ms ease-out, box-shadow 140ms ease-out; }

/* CTA + note + USP-uri (reutilizează .btn--checkout / .buy-panel__pay / .buy-panel__usps). */
.voucher-buy .buy-panel__usps { grid-template-columns: 1fr; }

@media (prefers-reduced-motion: reduce) {
  .voucher-card__value.is-bumped,
  .voucher-reveal { animation: none; }
  .voucher-denom,
  .voucher-buy .option-card { transition: none; }
}

/* --- Întrebări frecvente — acordeon nativ <details>/<summary>, house-styled
   (hairline sus, colț sharp, fără shadow-uri). Chevronul roșu se rotește la
   deschidere; niciun JS. Secțiune sub grila principală, cu aer. --- */
.voucher-faq {
  margin: 2.5rem 0 0;
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
}
.voucher-faq > h2 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-heading);
  margin: 0 0 8px;
}
.voucher-faq .faq-item { border-bottom: 1px solid var(--color-hairline); }
.voucher-faq .faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1rem 0;
  font-weight: 600;
  color: var(--color-ink);
}
.voucher-faq .faq-item > summary::-webkit-details-marker { display: none; }
/* Chevron roșu construit din bordură (fără asset), rotit la deschidere. */
.voucher-faq .faq-item > summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg);
  transition: transform 160ms ease-out;
}
.voucher-faq .faq-item[open] > summary::after { transform: rotate(-135deg); }
.voucher-faq .faq-item > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.voucher-faq .faq-item__body { padding: 0 0 1rem; }
.voucher-faq .faq-item__body p { margin: 0; color: rgba(0, 0, 0, 0.68); line-height: 1.6; }
.voucher-faq .faq-item__body a { color: var(--color-primary); text-decoration: none; }
.voucher-faq .faq-item__body a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .voucher-faq .faq-item > summary::after { transition: none; }
}

@media (max-width: 899px) {
  .voucher-layout { grid-template-columns: 1fr; }
}

/* Aer pe mobil (VOUCHER-SPEC-V2 §5): ritm de secțiune mai lejer, pași cu mai
   mult padding, valoarea cardului mai potolită, câmpurile pe o coloană
   (field-grid colapsează deja la 599px). NICIODATĂ scroll orizontal. */
@media (max-width: 599px) {
  .voucher-aside { gap: 2rem; }
  .voucher-buy { gap: 1.75rem; }
  .voucher-steps li { padding: 14px 0; }
  .voucher-card__value { font-size: 2.3rem; }
  .voucher-faq { margin-top: 2rem; }
}

/* ---------------------------------------------------------------- retururi
   Formularul de retur self-service (retragere din contract, OUG 34/2014 mod.
   OUG 18/2026). Paginile: entry (split cont/fără-cont + info + FAQ), ineligible
   / sent / invalid (notice centrat), success, wizard. On-brand: colț sharp 4px,
   roșu #FD0E0F, panouri ink, hairline. Aceste clase erau înainte doar în blocul
   scoped al wizardului (deci entry/ineligible rămâneau nestilizate) — mutate
   aici, o singură sursă pentru toate paginile de retur. */
.return-page { max-width: 820px; }
.return-page--wide { max-width: 1040px; }
.return-page--narrow { max-width: 560px; }

.return-lead { color: rgba(0, 0, 0, 0.55); margin: 6px 0 18px; max-width: 68ch; line-height: 1.5; }

/* Banner de garanție (produsele montate merg la garanție, nu la retur).
   Full-border ambru (fără side-stripe), colț sharp, contrast AA. */
.return-warranty {
  border: 1px solid #E7C34D;
  background: #FDF6E3;
  color: #6B531A;
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 20px;
  font-size: 0.95rem;
  line-height: 1.45;
}
.return-warranty strong { display: block; color: #4A3A12; }
.return-warranty a { color: inherit; font-weight: 700; text-decoration: underline; }

/* Split cont / fără-cont — o coloană pe mobil, două alăturate pe desktop. */
.return-entry-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .return-entry-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.return-entry-card h2 { font-size: var(--font-size-h3); }
.return-entry-card p { color: rgba(0, 0, 0, 0.6); line-height: 1.5; margin: 0; }

/* Lista de comenzi recente din cardul de cont (clientul autentificat) — vede
   pe loc care comandă e eligibilă (buton) și de ce NU (motiv), fără să caute. */
.return-orders { display: flex; flex-direction: column; gap: 8px; }
.return-order {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  border: 1px solid var(--color-border); border-radius: var(--radius); padding: 10px 12px;
}
.return-order__code { font-weight: 700; }
.return-order__date { color: rgba(0, 0, 0, 0.45); font-size: 0.9rem; }
.return-order__spacer { flex: 1 1 auto; }
.return-order__cta { font-weight: 700; color: var(--color-primary); text-decoration: none; white-space: nowrap; }
.return-order__cta:hover { text-decoration: underline; }
.return-order__reason { flex-basis: 100%; color: rgba(0, 0, 0, 0.6); font-size: 0.88rem; line-height: 1.4; }
.return-orders__all { align-self: flex-start; font-weight: 600; font-size: 0.93rem; color: var(--color-primary); text-decoration: none; }
.return-orders__all:hover { text-decoration: underline; }

.return-lookup-form { display: flex; flex-direction: column; gap: 12px; }
.return-help { font-size: 0.9rem; }
.return-help a { text-decoration: underline; }

/* Notice centrat (ineligible / sent / invalid) — card îngust, buton de lățime
   normală (nu întins pe tot cardul, cum ieșea din stretch-ul flex al cardului). */
.return-notice { text-align: center; align-items: center; gap: 12px; }
.return-notice__icon { font-size: 2.2rem; line-height: 1; }
.return-notice h1 { font-size: var(--font-size-h2); }
.return-notice p { color: rgba(0, 0, 0, 0.6); line-height: 1.5; margin: 0; max-width: 48ch; }
.return-notice .btn { align-self: center; min-width: 220px; }

/* Info: ce poți / ce NU poți returna — un singur panou, două liste titrate
   (fără carduri imbricate). */
.return-info { margin-top: 40px; border-top: 1px solid var(--color-border); padding-top: 24px; }
.return-info > h2 { font-size: var(--font-size-h3); margin: 0 0 14px; }
.return-info__cols { display: grid; grid-template-columns: 1fr; gap: 22px 32px; }
@media (min-width: 720px) { .return-info__cols { grid-template-columns: 1fr 1fr; } }
.return-info__col h3 { font-size: var(--font-size-h4); margin: 0 0 8px; }
.return-info__col ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.return-info__col li { line-height: 1.45; color: rgba(0, 0, 0, 0.65); }
.return-info__col li strong { color: var(--color-text); }

/* FAQ — același acordeon nativ ca la voucher (chevron din bordură, fără JS). */
.return-faq { margin-top: 32px; border-top: 1px solid var(--color-border); padding-top: 24px; }
.return-faq > h2 { font-size: var(--font-size-h3); margin: 0 0 8px; }
.return-faq .faq-item { border-bottom: 1px solid var(--color-hairline); }
.return-faq .faq-item > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: 1rem 0; font-weight: 600; color: var(--color-ink);
}
.return-faq .faq-item > summary::-webkit-details-marker { display: none; }
.return-faq .faq-item > summary::after {
  content: ""; flex: none; margin-left: auto; width: 9px; height: 9px;
  border-right: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg); transition: transform 160ms ease-out;
}
.return-faq .faq-item[open] > summary::after { transform: rotate(-135deg); }
.return-faq .faq-item > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.return-faq .faq-item__body { padding: 0 0 1rem; }
.return-faq .faq-item__body p { margin: 0 0 8px; color: rgba(0, 0, 0, 0.68); line-height: 1.6; }
.return-faq .faq-item__body p:last-child { margin-bottom: 0; }
.return-faq .faq-item__body a { color: var(--color-primary); }
@media (prefers-reduced-motion: reduce) {
  .return-faq .faq-item > summary::after { transition: none; }
}

/* Ecranul de succes (artefactul OUG e emailul; aici confirmarea + pașii). */
.return-success { text-align: center; align-items: center; gap: 14px; }
.return-success__icon {
  width: 48px; height: 48px; line-height: 48px; border-radius: 50%;
  background: var(--color-available); color: #fff; font-size: 1.5rem;
}
.return-success__number { background: var(--color-surface); border-radius: var(--radius); padding: 12px 22px; }
.return-success__label { display: block; font-size: 0.78rem; color: rgba(0, 0, 0, 0.5); text-transform: uppercase; letter-spacing: 0.04em; }
.return-success__number strong { font-size: 1.7rem; }
.return-success__next { text-align: left; width: 100%; }
.return-success__next h2 { font-size: var(--font-size-h4); margin: 0 0 6px; }
.return-success__addr {
  font-style: normal; line-height: 1.5; background: var(--color-surface);
  border-radius: var(--radius); padding: 12px 14px; display: inline-block; margin-top: 4px;
}

/* ============================================================================
   Modalul „Produsul a fost adăugat la coș" — confirmarea de add-to-cart care
   înlocuiește redirectul spre /cos. Shell gol în layout, umplut de shop.js.
   Idiomul <dialog> al cookie-dialog / locker-dialog (backdrop + animație).
   ========================================================================== */
.cart-added {
  width: min(620px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}
.cart-added::backdrop { background: rgba(23, 19, 14, 0.45); }
.cart-added[open] { animation: cart-added-in .24s cubic-bezier(0.16, 1, 0.3, 1); }
.cart-added[open]::backdrop { animation: cart-added-backdrop-in .24s ease; }
@keyframes cart-added-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes cart-added-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

.cart-added__box { padding: 20px 22px 18px; }

.cart-added__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
.cart-added__title {
  font-size: 1.3rem; font-weight: 700; color: var(--color-ink); margin: 0;
  letter-spacing: var(--letter-spacing);
}
.cart-added__close {
  flex: 0 0 auto; width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; line-height: 1;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: rgba(0, 0, 0, 0.45); cursor: pointer;
}
.cart-added__close:hover { background: var(--color-surface); color: var(--color-text); }

/* ---- rândul produsului adăugat ---- */
.cart-added__line {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 16px; border-bottom: 1px solid var(--color-hairline);
}
.cart-added__media {
  position: relative;               /* ancoră pentru `.no-photo` */
  flex: 0 0 auto; width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface); border-radius: var(--radius-sm); overflow: hidden;
}
.cart-added__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Fără poză → `.no-photo` (72px ⇒ doar emblema); JS îl arată/ascunde. */
.cart-added__info { flex: 1 1 auto; min-width: 0; }
.cart-added__name {
  display: block; font-weight: 600; line-height: 1.35;
  color: var(--color-primary); text-decoration: none;
}
.cart-added__name:hover { text-decoration: underline; }
.cart-added__avail {
  margin: 4px 0 0; font-size: 0.85rem; font-weight: 600;
  color: var(--color-text-muted);
}
.cart-added__avail.is-ok { color: var(--color-available); }
.cart-added__note {
  margin: 4px 0 0; font-size: 0.8rem; color: var(--color-text-muted);
}

.cart-added__qtywrap {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
}
.cart-added__unit { font-size: 0.95rem; color: rgba(0, 0, 0, 0.62); white-space: nowrap; }

/* ---- bani ---- */
.cart-added__core {
  margin: 12px 0 0; font-size: 0.85rem; color: var(--color-text-muted); text-align: right;
}
.cart-added__total {
  margin: 14px 0 0; text-align: right; font-size: 1rem; color: var(--color-ink);
}
.cart-added__total strong { font-weight: 700; }

/* ---- livrare: bara de prag + estimarea „de la" ---- */
.cart-added__ship { margin-top: 16px; }
.cart-added__bar {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(89, 199, 54, 0.18);
}
.cart-added__bar-fill {
  display: block; height: 100%; width: 0;
  background: var(--color-available); border-radius: 999px;
  transition: width .3s ease;
}
.cart-added__fs {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 0; font-size: 0.92rem; font-weight: 600; color: var(--color-available);
}
.cart-added__fs svg { flex: 0 0 auto; }
.cart-added__fee {
  margin: 8px 0 0; font-size: 0.88rem; color: rgba(0, 0, 0, 0.62);
}

.cart-added__error {
  margin: 14px 0 0; padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-tint); color: var(--color-primary);
  font-size: 0.92rem; font-weight: 600;
}

/* ---- acțiuni ---- */
.cart-added__cta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px;
}
.cart-added__continue { background: var(--color-surface); color: var(--color-text); border: 0; }
.cart-added__continue:hover { background: rgba(0, 0, 0, 0.08); }
.cart-added__go { display: flex; align-items: center; justify-content: center; text-align: center; }

@media (max-width: 599px) {
  .cart-added__box { padding: 16px 16px 14px; }
  .cart-added__title { font-size: 1.15rem; }
  /* Rândul se stivuiește: poza+nume sus, stepper-ul dedesubt (referința mobilă). */
  .cart-added__line { flex-wrap: wrap; }
  .cart-added__info { flex: 1 1 60%; }
  .cart-added__qtywrap { flex: 1 1 100%; justify-content: flex-start; }
  /* Butoane pe toată lățimea, primarul jos (degetul stă lângă acțiunea principală). */
  .cart-added__cta { grid-template-columns: 1fr; }
  .cart-added__continue { order: 1; }
  .cart-added__go { order: 2; }
}

/* ============================================================================
   Mini-coșul din header — panoul care se deschide la hover pe chipul coșului.
   Strat poziționat în [data-cart-dock] (NU un <dialog>: un dialog nativ e modal,
   greșit pentru hover). Aceleași componente de bani ca .cart-added.
   ========================================================================== */
.cart-dock { position: relative; }

.cart-mini {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: min(460px, calc(100vw - 24px));
  padding: 14px 16px 16px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  /* Animație de intrare; `hidden` face oricând display:none, deci nu prinde
     click-uri când e închis. */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease;
}
.cart-mini.is-open { opacity: 1; transform: none; }

/* Vârful care leagă panoul de chip. */
.cart-mini__arrow {
  position: absolute;
  top: -6px; right: 26px;
  width: 12px; height: 12px;
  background: #fff;
  border-left: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  transform: rotate(45deg);
}

.cart-mini__loading,
.cart-mini__empty {
  margin: 0; padding: 14px 0; text-align: center;
  font-size: 0.92rem; color: var(--color-text-muted);
}
.cart-mini__empty { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cart-mini__empty svg { color: rgba(0, 0, 0, 0.22); }
.cart-mini__empty p { margin: 0; }

/* ---- liniile ---- */
.cart-mini__lines {
  list-style: none; margin: 0 0 4px; padding: 0;
  /* Coșurile lungi derulează în panou, nu împing pagina. */
  max-height: 46vh; overflow-y: auto;
}
.cart-mini__line {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-hairline);
}
.cart-mini__line:last-child { border-bottom: 0; }
/* Feedback optimist la ștergere, până sosește răspunsul. */
.cart-mini__line.is-going { opacity: .45; }

.cart-mini__media {
  position: relative;               /* ancoră pentru `.no-photo` */
  flex: 0 0 auto; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface); border-radius: var(--radius-sm); overflow: hidden;
}
.cart-mini__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Fără poză → `.no-photo` (48px ⇒ doar emblema); JS îl arată/ascunde. */

.cart-mini__info { flex: 1 1 auto; min-width: 0; }
.cart-mini__name {
  display: block; font-size: 0.9rem; font-weight: 600; line-height: 1.3;
  color: var(--color-primary); text-decoration: none;
  /* Numele de piese sunt lungi — două rânduri, apoi ellipsis. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-mini__name:hover { text-decoration: underline; }
.cart-mini__avail { margin: 2px 0 0; font-size: 0.78rem; font-weight: 600; color: var(--color-text-muted); }
.cart-mini__avail.is-ok { color: var(--color-available); }

.cart-mini__qtywrap {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.cart-mini__qty { transform: scale(.88); transform-origin: right center; }
.cart-mini__unit { font-size: 0.82rem; color: rgba(0, 0, 0, 0.62); white-space: nowrap; }

.cart-mini__remove {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; line-height: 1;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: rgba(0, 0, 0, 0.35); cursor: pointer;
}
.cart-mini__remove:hover { background: var(--color-tint); color: var(--color-primary); }
.cart-mini__remove:disabled { opacity: .4; cursor: default; }

/* Refuz de la server pe stepper (422 — plafonul de cantitate). Aceeași pastilă
   ca .cart-added__error, la scara panoului. */
.cart-mini__error {
  margin: 8px 0 0; padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-tint); color: var(--color-primary);
  font-size: 0.85rem; font-weight: 600;
}

/* ---- bani (aceleași componente ca .cart-added) ---- */
.cart-mini__total {
  margin: 10px 0 0; padding-top: 10px;
  border-top: 1px solid var(--color-border);
  text-align: right; font-size: 0.95rem; color: var(--color-ink);
}
.cart-mini__ship { margin-top: 12px; }
.cart-mini__bar { height: 7px; border-radius: 999px; overflow: hidden; background: rgba(89, 199, 54, 0.18); }
.cart-mini__bar-fill {
  display: block; height: 100%; width: 0;
  background: var(--color-available); border-radius: 999px;
  transition: width .3s ease;
}
.cart-mini__fs {
  display: flex; align-items: center; gap: 6px;
  margin: 8px 0 0; font-size: 0.85rem; font-weight: 600; color: var(--color-available);
}
.cart-mini__fs svg { flex: 0 0 auto; }
.cart-mini__fee { margin: 6px 0 0; font-size: 0.82rem; color: rgba(0, 0, 0, 0.62); }

.cart-mini__cta { display: grid; gap: 8px; margin-top: 14px; }
.cart-mini__continue { background: var(--color-surface); color: var(--color-text); border: 0; }
.cart-mini__continue:hover { background: rgba(0, 0, 0, 0.08); }
.cart-mini__go { display: flex; align-items: center; justify-content: center; text-align: center; }

/* Pe ecrane mici panoul se aliniază la marginile viewportului, ca să nu iasă
   din pagină (regula casei: pagina nu derulează niciodată orizontal). */
@media (max-width: 599px) {
  .cart-mini { right: -8px; width: calc(100vw - 24px); }
  .cart-mini__lines { max-height: 40vh; }
}

/* ================================================================= brandl
   LANDING DE MARCĂ — /marca/{brand} (design „Paletar de culori", varianta A).

   TOATE clasele sunt prefixate `.brandl-` ca să nu existe nicio coliziune de
   cascadă cu restul foii (regula casei pentru componente noi mari). Se
   REFOLOSESC din shop.css: `.wrap`, `.btn` / `.btn--primary` / `.btn--cart`,
   `.eyebrow`, `.breadcrumb`, `.no-photo`, `.stars-x` — nu le redefinim.

   Pagina e explicit LIGHT (fundaluri declarate pe fiecare bandă), ca să arate
   identic și pentru vizitatorii cu dark-mode la nivel de sistem.
   Fără `overflow-x` pe containere: ar transforma pagina în scroll-port și ar
   rupe `position: sticky`. Benzile largi (navigația în pagină, banda de pași)
   au propriul `overflow-x: auto`, deci pagina NU derulează orizontal.

   RITMUL DE CONȚINUT — DOCTRINA v3 (owner, revizia a doua 2026-07-28).
   Revizia întâi introdusese DOUĂ lățimi CENTRATE (--brandl-inner 1240px pentru
   grile, --brandl-text 880px pentru text). Owner a respins-o net: „ai luat
   textul înghesuit din stânga și l-ai mutat în centru — acum arată ca o pată în
   mijloc; vreau curățenie, vreau SPAȚIU". Prin urmare AMBELE variabile și clasa
   `.brandl-sec--text` au DISPĂRUT:
     · un singur container = `.wrap`-ul shop-ului (1472px), aliniat la STÂNGA ca
       restul site-ului; landing-ul nu-și mai îngustează pagina;
     · fiecare secțiune se DESFĂȘOARĂ pe toată lățimea (hero pe două coloane,
       paletar + rail de panou, cei 5 pași pe un rând, clipuri late unul lângă
       altul, FAQ pe două coloane, text SEO pe două coloane CSS) — deci nu mai
       există nici coloană înghesuită la stânga, nici mijloc gol;
     · ritmul VERTICAL crește (spațiul e „curățenia" cerută), fără benzi goale.
   Sub 900px totul redevine O coloană: fan-out-ul e strict desktop.
   ================================================================= */

.brandl {
  --brandl-sticky: 160px;      /* înălțimea headerului sticky al site-ului */
  --brandl-nav-h: 46px;
  --brandl-edge: rgba(0, 0, 0, 0.18);
  --brandl-gut: 48px;          /* gutter-ul de desfășurare (hero, FAQ, text SEO) */
  background: var(--color-bg);
  color: var(--color-text);
}
.brandl h1, .brandl h2, .brandl h3 { color: var(--color-ink); margin: 0; }
.brandl p { margin: 0; }
.brandl ul { margin: 0; padding: 0; list-style: none; }
.brandl :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.brandl-label {
  margin: 0;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--color-text-muted);
}

/* --------------------------------------------------------------- hero
   BANDĂ SLIMĂ, DESFĂȘURATĂ. Fără eyebrow, fără insigne de încredere (`chips` —
   markup, CSS și config ȘTERSE la cererea owner-ului): H1 în stânga, propoziția
   + butoanele în coloana din dreapta, aliniate pe linia de bază a titlului.
   Așa banda umple lățimea FĂRĂ mijloc gol și rămâne joasă — paletarul de culori
   e adevăratul erou și trebuie să intre pe primul ecran la 1080p. */
.brandl-hero { border-bottom: 1px solid var(--color-border); background: #fff; }
.brandl-hero > .wrap { padding-top: 24px; padding-bottom: 26px; }
.brandl-hero__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.brandl-hero__lede { min-width: 0; }
/* Logo oficial al mărcii, lockup deasupra titlului. Înălțime fixă + lățime auto
   păstrează raportul; max-width ține wordmark-ul lat în frâu pe ecrane mici. */
.brandl-hero__logo { display: block; width: auto; height: 40px; max-width: min(240px, 60%); margin-bottom: 16px; }
.brandl-hero__h1 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.04; letter-spacing: -0.035em; font-weight: 800;
  text-wrap: balance;
}
.brandl-hero__sub {
  max-width: 62ch;
  font-size: 1.08rem; line-height: 1.55; color: var(--color-text);
}
.brandl-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

.brandl-btn-ghost { background: #fff; border: 1px solid var(--brandl-edge); color: var(--color-ink); }
.brandl-btn-off {
  background: var(--color-surface); color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
@media (hover: hover) {
  .brandl-btn-ghost:hover { background: #fff; border-color: var(--color-ink); color: var(--color-ink); }
  .brandl-btn-off:hover { background: var(--color-surface); color: var(--color-ink); }
}

/* `.brandl-chips` / `.brandl-chip` au fost ȘTERSE: owner 2026-07-28 —
   „scapă de Kit complet / Acoperă 4 etriere / Rezistent 300°C / Fără demontare".
   Faptele trăiesc acum în `hero_sub`, ca o singură propoziție. */

/* ----------------------------------------------- navigație în pagină
   STATICĂ (owner 2026-07-28): bara era `position: sticky` și plutea peste
   conținut la derulare. Fără sticky ⇒ fără `z-index`, fără `backdrop-filter`
   (fundalul poate fi opac) și fără evidențiere pe scroll — observatorul din JS
   a fost scos, iar regula `a[aria-current]` a rămas fără emitent. */
.brandl-nav {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}
.brandl-nav__in {
  display: flex; align-items: center; gap: 4px;
  height: var(--brandl-nav-h);
  /* Banda derulează în ea însăși pe ecrane înguste — pagina nu derulează. */
  overflow-x: auto; scrollbar-width: none;
}
.brandl-nav__in::-webkit-scrollbar { display: none; }
.brandl-nav a {
  padding: 7px 11px; border-radius: var(--radius);
  font-size: 0.9rem; font-weight: 700; color: var(--color-text);
  text-decoration: none; white-space: nowrap;
}
.brandl-nav a:hover { background: var(--color-surface); }
.brandl-nav a em { font-style: normal; color: rgba(0, 0, 0, 0.38); font-variant-numeric: tabular-nums; }
.brandl-nav__brand { font-weight: 800; letter-spacing: -0.03em; color: var(--color-ink); padding-left: 0; }
.brandl-nav__brand:hover { background: none; }
.brandl-nav__sep { flex: none; width: 1px; height: 18px; background: var(--color-border); margin: 0 8px; }

/* --------------------------------------------------------- secțiuni
   Ritm vertical GENEROS între benzi (owner: „am nevoie de spațiu, de
   curățenie") — dar fără benzi goale: spațiul stă în padding, nu în cutii
   vide. Capul de secțiune e ALINIAT LA STÂNGA, deasupra propriului conținut. */
.brandl-sec {
  padding: 56px 0;
  border-bottom: 1px solid var(--color-border);
  background: #fff;
  /* Doar headerul sticky al SITE-ului: bara de secțiuni nu mai e sticky, deci
     nu mai fură înălțime din ținta unui salt pe ancoră. */
  scroll-margin-top: calc(var(--brandl-sticky) + 8px);
}
.brandl-sec--alt { background: var(--color-surface); }
.brandl-sec__head { margin-bottom: 26px; }
.brandl-sec__head h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  line-height: 1.1; letter-spacing: -0.035em; font-weight: 800; text-wrap: balance;
}
.brandl-sec__intro {
  margin-top: 8px; max-width: 74ch;
  font-size: 0.95rem; line-height: 1.6; color: var(--color-text-muted);
}
.brandl-sec__intro--tight { margin: -6px 0 14px; }

/* ------------------------------------------------ motorul de swatch-uri
   Fiecare swatch primește culoarea prin `--brandl-c` (inline, din config) și,
   pentru NEON/Pastell, haloul `--brandl-cg` / inelul `--brandl-cr`.
   Finisajul e redat prin overlay-uri CSS, NU prin poze — deci zero cereri. */
.brandl-sw {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background: var(--brandl-c, #ccc);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.13);
  overflow: hidden;
}
.brandl-sw::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
/* lucios — luciu subțire pe muchia de sus */
.brandl-sw[data-brandl-f="lucios"]::after {
  background: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.14) 18%, rgba(255,255,255,0) 44%, rgba(0,0,0,.14) 100%);
}
/* mat — plat, fără highlight */
.brandl-sw[data-brandl-f="mat"]::after {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(0,0,0,.07) 100%);
}
/* metalizat — sclipire fină pe diagonală + micro-striere */
.brandl-sw[data-brandl-f="metalizat"]::after {
  background:
    linear-gradient(112deg, rgba(255,255,255,0) 14%, rgba(255,255,255,.46) 33%, rgba(255,255,255,.05) 47%, rgba(0,0,0,.05) 64%, rgba(0,0,0,.16) 100%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.03) 1px 3px);
}
/* neon — halou moale în culoarea proprie */
.brandl-sw[data-brandl-f="neon"] {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10), inset 0 0 26px rgba(255,255,255,.30), 0 0 18px 1px var(--brandl-cg, transparent);
}
.brandl-sw[data-brandl-f="neon"]::after {
  background: radial-gradient(120% 90% at 50% 118%, rgba(255,255,255,.42), rgba(255,255,255,0) 62%);
}
/* pastel — inel moale, ușor desaturat */
.brandl-sw[data-brandl-f="pastel"] {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.09), 0 0 0 5px var(--brandl-cr, transparent);
}
.brandl-sw[data-brandl-f="pastel"]::after {
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 55%, rgba(0,0,0,.05));
}
/* indisponibil — desaturat + barare diagonală (rămâne VIZIBIL, doar stins) */
.brandl-tile.is-oos .brandl-sw,
.brandl-offrow .brandl-sw {
  filter: saturate(.28) brightness(1.06);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.13);
}
.brandl-tile.is-oos .brandl-sw::after,
.brandl-offrow .brandl-sw::after {
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.62) 0 3px, rgba(255,255,255,0) 3px 9px);
}

/* --------------------------------------------------- paletarul de culori */
.brandl-wall-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.brandl-wall-main { min-width: 0; }

.brandl-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.brandl-pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px; border-radius: 100px;
  border: 1px solid var(--brandl-edge);
  background: #fff; color: var(--color-ink);
  font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer;
}
.brandl-pill:hover { border-color: var(--color-ink); }
.brandl-pill em { font-style: normal; font-size: 0.8rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.brandl-pill[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.brandl-pill[aria-pressed="true"] em { color: rgba(255, 255, 255, 0.6); }

/* Pastile mai MARI și gutter mai lat decât în revizia întâi (112px/14px):
   paletarul e eroul paginii, deci respiră. Pe lățimea desfășurată (~1050px de
   grilă lângă rail-ul de 340px) ies 7 coloane de ~140px. */
.brandl-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 20px 18px; }
/* ⚠ `.brandl-tile` e un <a href> (audit SEO: altfel produsele din paletar
   n-aveau niciun link crawlabil), deci trebuie dezbrăcat de stilul de link. */
.brandl-tile {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
  font: inherit; color: inherit; text-decoration: none;
  transition: transform .18s ease;
}
.brandl-tile .brandl-sw { transition: box-shadow .18s ease; }
.brandl-tile:hover { transform: translateY(-4px); }
.brandl-tile:hover .brandl-sw { box-shadow: inset 0 0 0 1px rgba(0,0,0,.13), 0 10px 22px -6px rgba(0,0,0,.34); }
.brandl-tile[data-brandl-f="neon"]:hover .brandl-sw {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10), inset 0 0 26px rgba(255,255,255,.30), 0 0 24px 2px var(--brandl-cg, transparent), 0 10px 22px -6px rgba(0,0,0,.3);
}
.brandl-tile[aria-current="true"] .brandl-sw {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.13), 0 0 0 2px #fff, 0 0 0 4px var(--color-ink);
}
.brandl-tile[aria-current="true"] .brandl-tile__name { color: var(--color-primary); }
.brandl-tile__fin { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(0, 0, 0, 0.38); }
.brandl-tile__name { font-size: 0.88rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; color: var(--color-ink); }
.brandl-tile__sub { font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); }
.brandl-tile.is-oos .brandl-tile__name,
.brandl-tile.is-oos .brandl-tile__sub { color: var(--color-text-muted); }

.brandl-split { display: flex; align-items: center; gap: 14px; margin: 30px 0 16px; }
.brandl-split span {
  flex: none; font-size: 0.75rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--color-text-muted); white-space: nowrap;
}
.brandl-split i { flex: 1; height: 1px; background: var(--color-border); }

/* ------------------------------------------------ panoul de cumpărare */
.brandl-panel {
  position: relative;
  border: 1px solid var(--brandl-edge);
  border-radius: var(--radius);
  background: #fff; padding: 18px;
}
.brandl-panel__close { display: none; }
.brandl-panel__photo {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 10; max-height: 190px; margin-bottom: 14px;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  overflow: hidden;
}
.brandl-panel__photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brandl-panel__photo [data-brandl-nophoto] { position: absolute; inset: 0; display: block; }
.brandl-panel__top { display: flex; gap: 14px; align-items: flex-start; }
.brandl-panel__sw { flex: none; width: 88px; }
.brandl-panel__ident { min-width: 0; }
.brandl-panel__ident h3 { font-size: 1.15rem; line-height: 1.2; letter-spacing: -0.03em; font-weight: 800; }
.brandl-panel__sku { margin-top: 6px; font-size: 0.82rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.brandl-panel__struck {
  margin-top: 12px; font-size: 0.95rem; color: var(--color-price-old);
  text-decoration: line-through; font-variant-numeric: tabular-nums;
}
.brandl-panel__price {
  margin-top: 10px; font-size: 1.85rem; font-weight: 800;
  letter-spacing: -0.03em; color: var(--color-ink); font-variant-numeric: tabular-nums;
}
.brandl-panel__price small { font-size: 0.78rem; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0; }
.brandl-panel__noprice { margin-top: 12px; font-size: 1rem; font-weight: 700; color: var(--color-text-muted); }
.brandl-panel__note { margin-top: 10px; font-size: 0.82rem; color: var(--color-text-muted); }
.brandl-panel__link {
  display: inline-block; margin-top: 14px;
  font-size: 0.88rem; font-weight: 700; color: var(--color-ink);
  text-decoration: none; border-bottom: 1px solid var(--brandl-edge);
  padding-bottom: 1px;
}
.brandl-panel__link:hover { color: var(--color-primary); border-color: var(--color-primary); }

.brandl-stockline {
  display: flex; align-items: center; gap: 7px; margin-top: 10px;
  font-size: 0.9rem; font-weight: 700; color: var(--color-ink);
}
.brandl-stockline.is-off { color: var(--color-text-muted); }
.brandl-dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-available); box-shadow: 0 0 0 3px rgba(89, 199, 54, 0.18);
}
.brandl-dot.is-off { background: rgba(0, 0, 0, 0.28); box-shadow: none; }
.brandl-lastfew { margin-top: 7px; font-size: 0.86rem; font-weight: 800; color: var(--color-primary); }

.brandl-buy { display: flex; gap: 9px; margin-top: 16px; }
.brandl-buy__submit { flex: 1; height: 40px; font-size: 1rem; }
.brandl-buy__off { width: 100%; margin-top: 16px; }
.brandl-stepper {
  display: flex; align-items: center; flex: none; height: 40px;
  border: 1px solid var(--brandl-edge); border-radius: var(--radius);
}
.brandl-stepper button {
  width: 34px; height: 100%; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 1.1rem; font-weight: 800; color: var(--color-ink);
}
.brandl-stepper button:hover { background: var(--color-surface); }
.brandl-stepper input {
  width: 38px; height: 100%; border: 0; background: none; padding: 0;
  text-align: center; font: inherit; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--color-ink);
}

/* ------------------------------------------------------- cross-sell */
.brandl-xsell { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.brandl-xsell .brandl-label { display: block; margin-bottom: 10px; }
.brandl-xrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.brandl-xrow + .brandl-xrow { border-top: 1px solid var(--color-border); }
.brandl-xthumb {
  position: relative; flex: none; width: 48px; height: 48px;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  overflow: hidden; display: block;
}
.brandl-xthumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brandl-xmeta { flex: 1; min-width: 0; }
.brandl-xmeta a {
  display: block; font-size: 0.85rem; font-weight: 700; line-height: 1.25;
  color: var(--color-ink); text-decoration: none;
}
.brandl-xmeta a:hover { color: var(--color-primary); }
.brandl-xmeta span { font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); }
.brandl-xrow form { margin: 0; flex: none; }
.brandl-xadd {
  height: 28px; padding: 0 10px; border-radius: var(--radius);
  border: 1px solid var(--color-primary); background: #fff; color: var(--color-primary);
  font: inherit; font-size: 0.82rem; font-weight: 800; cursor: pointer;
}
.brandl-xadd:hover { background: var(--color-primary); color: #fff; }

/* ------------------------------------------------- carduri de familie
   ⚠ `auto-FILL`, NU `auto-fit`. Bug raportat de owner: în secțiunea „Alte
   produse" cu UN singur produs comandabil, `auto-fit` colapsa pistele goale și
   întindea unicul card pe toată lățimea benzii → `.brandl-card__photo` cu
   `aspect-ratio: 16/10` devenea o poză de ~900px înălțime (poza Chrome Out cât
   ecranul). `auto-fill` păstrează pistele, deci un card singur rămâne de
   lățimea unei coloane. Plus plasa de siguranță: fiecare cutie de media are un
   plafon EXPLICIT de înălțime, ca nicio grilă viitoare să nu poată reproduce
   bug-ul. */
.brandl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.brandl-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 16px;
}
.brandl-card__media { display: flex; align-items: stretch; gap: 10px; margin-bottom: 14px; }
.brandl-card__photo {
  position: relative; flex: 1; min-width: 0; aspect-ratio: 16 / 10;
  max-height: 176px;   /* plafon explicit — vezi nota de la .brandl-cards */
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  overflow: hidden; display: block;
}
.brandl-card__photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Secțiunea AUTOMATĂ „Alte produse": coduri răzlețe, deci miniatură, nu poză
   „eroică" — plafon de 96px, în familia de dimensiuni a restului paginii. */
.brandl-cards--compact .brandl-card__photo { max-height: 96px; }
.brandl-card__chip { flex: none; width: 46px; border-radius: var(--radius); overflow: hidden; }
.brandl-card__chip .brandl-sw { width: 100%; height: 100%; aspect-ratio: auto; }
.brandl-card__body { flex: 1; }
.brandl-card__body h3 { font-size: 1rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 700; }
.brandl-card__body h3 a { color: inherit; text-decoration: none; }
.brandl-card__body h3 a:hover { color: var(--color-primary); }
.brandl-card__body .brandl-label { margin-top: 6px; }
.brandl-card__rating { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.brandl-card__rating span { font-size: 0.82rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.brandl-card__struck {
  margin-top: 10px; font-size: 0.9rem; color: var(--color-price-old);
  text-decoration: line-through; font-variant-numeric: tabular-nums;
}
.brandl-card__price {
  margin-top: 8px; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em;
  color: var(--color-ink); font-variant-numeric: tabular-nums;
}
.brandl-card__price small { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0; }
.brandl-card__cta { width: 100%; margin-top: 14px; }
.brandl-card form { margin: 0; }

/* -------------------------- rânduri compacte pentru produsele stinse */
.brandl-offrows {
  margin-top: 18px; background: #fff;
  border: 1px solid var(--color-border); border-radius: var(--radius);
}
.brandl-offrow { display: flex; align-items: center; gap: 12px; padding: 11px 14px; }
.brandl-offrow + .brandl-offrow { border-top: 1px solid var(--color-border); }
.brandl-offrow__sw { flex: none; width: 34px; height: 34px; aspect-ratio: auto; }
.brandl-offrow__photo {
  position: relative; flex: none; width: 40px; height: 40px;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  overflow: hidden; display: block;
}
.brandl-offrow__photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* PLASA DE SIGURANȚĂ pe TOATE căile de imagine ale paginii (auditate: panou,
   card de familie, rând stins, miniatură de cross-sell, miniatură video). Nicio
   poză nu poate depăși cutia care o găzduiește, chiar dacă o grilă viitoare
   întinde cutia — exact clasa de bug pe care o repară `auto-fill` mai sus. */
.brandl-panel__photo img,
.brandl-card__photo img,
.brandl-offrow__photo img,
.brandl-xthumb img,
.brandl-vid__btn img { max-width: 100%; max-height: 100%; }
.brandl-offrow__n { flex: 1; min-width: 0; font-size: 0.88rem; font-weight: 700; color: var(--color-text-muted); }
.brandl-offrow__n em {
  display: block; font-style: normal; font-size: 0.8rem; font-weight: 600;
  color: rgba(0, 0, 0, 0.38); font-variant-numeric: tabular-nums;
}
.brandl-offrow__tag {
  flex: none; font-size: 0.78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--color-text-muted);
}
.brandl-offrow__vp {
  flex: none; font-size: 0.85rem; font-weight: 700; color: var(--color-ink);
  text-decoration: none; border-bottom: 1px solid var(--brandl-edge);
}
.brandl-offrow__vp:hover { color: var(--color-primary); border-color: var(--color-primary); }
.brandl-returning { margin-top: 18px; font-size: 0.88rem; line-height: 1.7; color: var(--color-text-muted); }
.brandl-returning b { color: var(--color-text); font-weight: 800; }

/* ------------------------------------------------------------ how-to */
/* Banda derulează în ea însăși (pagina nu derulează niciodată orizontal).
   `grid-auto-flow: column` = numărul de coloane URMEAZĂ numărul de pași din
   config (FOLIATEC are 5, ZviZZer 4) — înainte era fixat pe 4, deci al cincilea
   pas ar fi căzut pe un al doilea rând. Fiecare pas are minim 210px, deci banda
   depășește containerul pe ecrane mici și derulează în `.brandl-steps-scroll`. */
.brandl-steps-scroll { overflow-x: auto; padding-bottom: 6px; }
.brandl-steps {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 1fr);
  gap: 20px;
}
.brandl-step { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; }
.brandl-step__top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.brandl-step__num {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-ink); color: #fff;
  font-size: 0.78rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.brandl-step__ico { flex: none; color: var(--color-primary); display: inline-flex; }
.brandl-step h3 { font-size: 1rem; letter-spacing: -0.02em; font-weight: 800; }
.brandl-step p { margin-top: 7px; font-size: 0.88rem; line-height: 1.55; color: var(--color-text-muted); }
.brandl-steps__note { margin-top: 14px; font-size: 0.86rem; font-weight: 700; color: var(--color-ink); }

/* „Bine de știut" — condițiile care strică lucrarea (temperatură, timp de lucru,
   aplicare cu pistolul). Un panou, nu încă un rând de carduri: pașii sunt
   procedura, ăsta e avertismentul de lângă ea. */
.brandl-tips {
  margin-top: 16px; padding: 14px 16px;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
}
/* Tipurile umplu banda largă pe orizontală (nu o coloană îngustă lipită la
   stânga sub o grilă de 1240px). */
.brandl-tips > ul {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 24px; margin-top: 10px;
}
.brandl-tips li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.9rem; line-height: 1.55; color: var(--color-text-muted);
}
.brandl-tips li .icon { flex: none; color: var(--color-primary); margin-top: 2px; }
.brandl-tips a { font-weight: 700; color: var(--color-ink); text-decoration: none; border-bottom: 1px solid var(--brandl-edge); }
.brandl-tips a:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* -------------------------------------- clipuri (facade click-to-load)
   Miniatura vine de pe domeniul NOSTRU (/video-thumb), player-ul apare doar la
   click: pe o pagină cache-uită și partajată nu cerem nimic de la Google pentru
   vizitatorii care nu apasă Play. */
/* DESFĂȘURATE: două clipuri LATE, unul lângă altul (doctrina v3). Înainte erau
   plafonate la coloana de text de 880px, deci ieșeau două miniaturi mici,
   stivuite într-o coloană îngustă. Plafonul de 1240px ține fiecare clip la
   ~600px — lat, dar nu absurd de mare pe un ecran de 2560px. */
.brandl-vids {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 16px 32px; margin-top: 28px; max-width: 1240px;
}
@media (min-width: 700px) {
  /* Două coloane fixe (lista e scurtă și verificată): `auto-fill` ar lăsa o
     pistă goală lângă un clip singur — aceeași capcană ca la carduri. */
  .brandl-vids { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.brandl-vid { margin: 0; min-width: 0; }
.brandl-vid__btn {
  position: relative; display: block; width: 100%; padding: 0;
  border: 0; border-radius: var(--radius); overflow: hidden;
  background: #000; aspect-ratio: 16 / 9; cursor: pointer;
}
.brandl-vid__btn img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.brandl-vid__btn:hover img { opacity: 1; }
.brandl-vid__play {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: #fff; text-indent: 2px;
}
.brandl-vid__play::before {
  content: ""; position: absolute; z-index: -1;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 2px #fff, 0 2px 10px rgba(0, 0, 0, .4);
}
.brandl-vid iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); display: block; }
.brandl-vid figcaption { margin-top: 8px; font-size: 0.85rem; line-height: 1.45; color: var(--color-text-muted); }

/* ------------------------------------------------------ social proof */
.brandl-proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.brandl-score { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; }
.brandl-score b {
  display: block; font-size: 2.4rem; font-weight: 800; line-height: 1;
  letter-spacing: -0.045em; color: var(--color-ink); font-variant-numeric: tabular-nums;
}
.brandl-score .stars-x { margin: 9px 0 8px; }
.brandl-score span { display: block; font-size: 0.82rem; line-height: 1.5; color: var(--color-text-muted); }
/* `claims` se randează DOAR alături de o notă REALĂ, în banda de recenzii.
   Banda de rezervă („Ce primești în cutie") a fost ȘTEARSĂ împreună cu
   modificatorul `.brandl-claims--wide` pe care o folosea: owner 2026-07-28 a
   citit lista bifată, fără recenzii lângă ea, ca recenzii false. */
.brandl-claims { display: grid; gap: 8px; }
.brandl-claims li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.92rem; line-height: 1.5; color: var(--color-text);
}
.brandl-claims li .icon { flex: none; color: var(--color-available); margin-top: 2px; }

/* --------------------------------------------------------- FAQ + SEO
   Ambele DESFĂȘURATE pe toată lățimea, aliniate la stânga (doctrina v3 —
   plafonul de 880px centrat a fost respins de owner).
   FAQ = două coloane REALE de <details> (blade-ul taie lista în două jumătăți
   egale, deci ordinea de citire rămâne pe verticală). NU `column-count`: un
   <details> deschis s-ar rupe între coloane la mijlocul răspunsului. */
.brandl-faq--2col {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--brandl-gut); align-items: start;
}
.brandl-faq__col { min-width: 0; }
.brandl-faq__item { border-bottom: 1px solid var(--color-border); background: transparent; }
.brandl-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 2px; font-size: 1rem; font-weight: 700; color: var(--color-ink);
  cursor: pointer; list-style: none;
}
.brandl-faq__item summary::-webkit-details-marker { display: none; }
.brandl-faq__item summary::after { content: "+"; font-size: 1.35rem; font-weight: 800; color: var(--color-primary); line-height: 1; }
.brandl-faq__item[open] summary::after { content: "−"; }
.brandl-faq__a { padding: 0 2px 16px; max-width: 74ch; font-size: 0.95rem; line-height: 1.65; color: var(--color-text-muted); }

/* Textul SEO: titlu peste, apoi paragrafele curgând în DOUĂ coloane CSS.
   Plafonul de 1240px există ca MĂSURA unei coloane să rămână citibilă (~70 de
   caractere pe rând la ~596px); fără el, pe 2560px un rând ar avea 150 de
   caractere — exact opusul „curățeniei" cerute. */
.brandl-seo { max-width: 1240px; }
.brandl-seo h2 { font-size: 1.4rem; letter-spacing: -0.03em; font-weight: 800; margin-bottom: 16px; }
.brandl-seo__cols { column-count: 2; column-gap: var(--brandl-gut); }
.brandl-seo p { font-size: 0.95rem; line-height: 1.75; color: var(--color-text-muted); margin: 0 0 14px; }
.brandl-seo p:last-child { margin-bottom: 0; }

/* ------------------------------------------------- catalog PARCAT (collapsed)
   Familiile fără sursă de aprovizionare (`collapsed` în config/brands.php, plus
   ZERO produse comandabile) se randează într-un <details> închis: produsele
   rămân TOATE în DOM, indexabile și cu link real — dar secțiunea nu mai ocupă
   un ecran de rafturi goale. Deschis, corpul e exact lista compactă de rânduri
   stinse (.brandl-offrows), fără chenarul ei propriu: <details> îl ține deja. */
.brandl-collapsed {
  background: #fff;
  border: 1px solid var(--color-border); border-radius: var(--radius);
}
.brandl-collapsed > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px;
  padding: 15px 16px; cursor: pointer; list-style: none;
}
.brandl-collapsed > summary::-webkit-details-marker { display: none; }
.brandl-collapsed > summary:hover { background: var(--color-surface); }
.brandl-collapsed > summary b {
  font-size: 1.02rem; font-weight: 800; letter-spacing: -0.025em; color: var(--color-ink);
}
.brandl-collapsed > summary span { font-size: 0.86rem; color: var(--color-text-muted); }
/* Semnul +/− stă la capătul rândului, ca la acordeonul de FAQ. */
.brandl-collapsed > summary::after {
  content: "+"; margin-left: auto; align-self: center;
  font-size: 1.35rem; font-weight: 800; color: var(--color-primary); line-height: 1;
}
.brandl-collapsed[open] > summary::after { content: "−"; }
.brandl-collapsed[open] > summary { border-bottom: 1px solid var(--color-border); }
.brandl-collapsed .brandl-offrows { margin-top: 0; border: 0; border-radius: 0; }
.brandl-collapsed .brandl-returning { margin: 0; padding: 4px 16px 15px; }
/* LEGENDA familiei parcate: stă între <summary> și rânduri (înainte cădea după
   73 de rânduri, unde n-o mai citea nimeni) și e despărțită de listă. */
.brandl-collapsed .brandl-returning--legend {
  padding: 13px 16px; border-bottom: 1px solid var(--color-border);
}

/* ------------------------------- scrim + scroll-lock (sheet de telefon)
   Voalul din spatele sheet-ului: tap oriunde în afara panoului îl închide.
   Există în DOM O SINGURĂ DATĂ pentru toată pagina și e `hidden` cât e închis
   (deci inert pentru mouse, tastatură și cititoare de ecran). NU-i declarăm
   `display`, ca atributul `hidden` să funcționeze; regula explicită de mai jos
   e plasa de siguranță. */
.brandl-scrim {
  position: fixed; inset: 0; z-index: 69;
  background: rgba(10, 10, 12, 0.55);
}
.brandl-scrim[hidden] { display: none; }
/* Panoul e rail pe desktop ⇒ voalul nu are ce să acopere niciodată. */
@media (min-width: 900px) {
  .brandl-scrim { display: none; }
}
/* Cât e sheet-ul deschis, pagina de dedesubt NU mai derulează (înainte îți
   fugea conținutul pe sub sheet). Clasa se pune pe <html> ȘI pe <body>: iOS
   Safari ignoră `overflow: hidden` pus doar pe unul dintre ele. */
html.brandl-lock,
body.brandl-lock { overflow: hidden; }

/* ------------------------------------------------------- breakpoints
   Convențiile shop-ului: 1199 / 899 / 599. Rail-ul sticky apare de la 900px;
   sub 900px panoul devine sheet de jos (deschis la click pe swatch).
   `--brandl-sticky` urmărește înălțimea headerului sticky pe fiecare treaptă
   (aceeași valoare de bază 160px ca .cart-totals / .account-nav). Bara de
   secțiuni NU mai e sticky, deci nu se mai adună în offsetul panoului.
   ⚠ Fan-out-ul (grile pe două coloane) e STRICT desktop: sub 900px totul
   redevine o singură coloană, exact ca înainte de revizie. */
@media (min-width: 900px) {
  .brandl-wall-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; }
  .brandl-panel-col { position: sticky; top: calc(var(--brandl-sticky) + 12px); }
  /* HERO desfășurat: titlul în stânga, propoziția + butoanele în dreapta, lipite
     de linia de bază a titlului (`align-items: end`) ⇒ banda rămâne joasă. */
  .brandl-hero__in {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--brandl-gut); align-items: end;
  }
}
/* Rail-ul de panou mai lat + gutter mai generos pe ecranele mari: paletarul are
   ~1050px, panoul 340px (doctrina v3). */
@media (min-width: 1200px) {
  .brandl-wall-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; }
}
@media (min-width: 820px) {
  .brandl-proof { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 899px) {
  /* O coloană: FAQ-ul și textul SEO nu se desfășoară pe telefon. */
  .brandl-faq--2col { grid-template-columns: minmax(0, 1fr); }
  .brandl-seo__cols { column-count: 1; }
}
@media (max-width: 1199px) {
  .brandl { --brandl-sticky: 120px; }
}
@media (max-width: 899px) {
  .brandl { --brandl-sticky: 56px; }
  .brandl-panel-col {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    transform: translateY(110%); visibility: hidden;
    transition: transform .24s ease, visibility 0s linear .24s;
  }
  .brandl-panel-col.is-open { transform: translateY(0); visibility: visible; transition-delay: 0s; }
  .brandl-panel {
    border-radius: 8px 8px 0 0; border-bottom: 0;
    max-height: 78vh; overflow-y: auto;
    /* Butonul de închidere e PRIMUL copil și `sticky`, deci stă pe propriul rând
       în capul sheet-ului: padding-ul de sus e mic, iar conținutul nu ajunge
       NICIODATĂ dedesubtul lui. */
    padding-top: 10px;
    box-shadow: 0 -14px 40px -12px rgba(0, 0, 0, 0.35);
  }
  /* ÎNCHIDEREA — BUG owner: X-ul era `position: absolute` peste POZA produsului
     (care stă chiar în capul panoului), 30px, fundal gri pe fundal deschis: în
     practică invizibil și greu de nimerit, iar altă cale de ieșire nu exista.
     Acum: sticky în capul sheet-ului (rămâne vizibil oricât derulezi), 40×40,
     cerc ALB cu contur și umbră, × în culoarea cernelii, peste poză (z-index).
     `margin-left: auto` pe un bloc de lățime fixă = lipit la dreapta. */
  .brandl-panel__close {
    display: flex; align-items: center; justify-content: center;
    position: sticky; top: 0; z-index: 5;
    width: 40px; height: 40px; margin: 0 0 8px auto;
    border: 1px solid var(--brandl-edge); border-radius: 50%;
    background: #fff; box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.35);
    font: inherit; font-size: 1.5rem; line-height: 1; font-weight: 700;
    color: var(--color-ink); cursor: pointer;
  }
  .brandl-panel__close span { display: block; margin-top: -3px; }
  .brandl-panel__sw { width: 72px; }
  .brandl-panel__photo { aspect-ratio: auto; height: 124px; max-height: none; }
}
@media (max-width: 599px) {
  .brandl-sec { padding: 30px 0; }
  .brandl-wall { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
  .brandl-hero > .wrap { padding-top: 18px; padding-bottom: 22px; }
  .brandl-hero__cta .btn { flex: 1; }
  .brandl-offrow__tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .brandl-tile,
  .brandl-tile .brandl-sw,
  .brandl-panel-col { transition: none; }
  .brandl-tile:hover { transform: none; }
}