/* ==========================================================================
   isoprofi24 . magazin.css
   ==========================================================================
   Tot ce transforma site-ul de informatii in magazin: cosul din header,
   grila de produse de pe landing, cardul de produs cu pret mare si buton,
   pagina de cos, toast-ul de confirmare si meniul de mobil care lipseste.

   Se incarca DUPA site.css. Doar tokeni, nicio valoare literala in afara
   de 1px pentru linii si procente structurale.
   ========================================================================== */

/* Butoanele NU mostenesc fontul din body. Fara asta, butoanele-icoana
   si stepperul cad pe Arial si strica orice glifa de text din ele. */
.cos-buton,
.meniu-buton,
.cos-rand__sterge,
.cant button { font: inherit; }

/* ==========================================================================
   1. BARA DE INCREDERE trece pe lumina + fix separator
   Primul pixel al site-ului nu mai e negru. Acelasi continut, pe kalk.
   Fixul de separator: gap-ul simetric sta pe UL, nu asimetric pe LI.
   (Cand se aplica in site.css, blocul vechi .bara-incredere se inlocuieste
   cu asta, nu se suprascrie din alt fisier.)
   ========================================================================== */

.bara-incredere {
  background: var(--surface-2);
  color: var(--ink-2);
  border-bottom: 1px solid var(--border);
}
.bara-incredere ul { gap: var(--sp-2) var(--sp-6); }
.bara-incredere li { gap: var(--sp-6); }
@media (min-width: 1000px) {
  .bara-incredere li + li::before { background: var(--border-strong); }
}

/* ==========================================================================
   2. HEADER DE MAGAZIN: cosul si meniul de mobil
   ========================================================================== */

/* Butonul de cos. Mereu vizibil, la toate latimile: un magazin fara cos
   in header nu e magazin. Tinta plina de 44px. */
.cos-buton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-standard);
}
.cos-buton:hover { background: var(--surface-2); }
.cos-buton svg { display: block; }

/* Badge-ul cu numarul de bucati. Apare doar cand cosul are ceva:
   [data-cant="0"] il ascunde. Terra, singurul accent din header. */
.cos-buton__badge {
  position: absolute;
  top: var(--sp-1);
  right: 0;
  min-width: 18px;
  height: 18px;
  padding-inline: var(--sp-1);
  display: grid;
  place-items: center;
  background: var(--cos-badge-bg);
  color: var(--cos-badge-text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  border-radius: var(--radius-plin);
  /* Inel de fundal, ca badge-ul sa se citeasca si peste iconita */
  box-shadow: 0 0 0 2px var(--bg);
}
.cos-buton[data-cant="0"] .cos-buton__badge { display: none; }

/* Micul puls cand intra ceva in cos. Confirmare fizica, nu decor. */
@keyframes cos-puls {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.cos-buton[data-puls] .cos-buton__badge {
  animation: cos-puls var(--dur-3) var(--ease-intrare);
}

/* ---- Meniul de mobil. Sub 1120px nav-ul dispare azi FARA inlocuitor;
        clientul de pe telefon nu poate ajunge la nicio categorie.
        Buton simplu + panou care cade de sub header. ------------------- */

.meniu-buton {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
}
.meniu-buton:hover { background: var(--surface-2); }
@media (max-width: 1120px) { .meniu-buton { display: inline-flex; } }

.meniu-mobil {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  z-index: var(--z-dropdown);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--umbra-lg);
  padding: var(--sp-2) var(--gutter) var(--sp-4);
}
.meniu-mobil[hidden] { display: none; }
.meniu-mobil ul { list-style: none; margin: 0; padding: 0; display: grid; }
.meniu-mobil a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--sp-2);
  color: var(--ink);
  text-decoration: none;
  font-weight: var(--fw-medium);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-xs);
}
.meniu-mobil li:last-child a { border-bottom: 0; }
.meniu-mobil a:hover { background: var(--surface-2); }

/* ==========================================================================
   3. ANCORA DE PRET din hero
   "ab 17,90 €/m²" lânga CTA: primul semnal de magazin, in primul ecran.
   Pe tema inchisa a hero-ului. Mono, ca orice cifra din site.
   ========================================================================== */

.ancora-pret {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--noapte-text-2);
}
/* Randul se poate rupe doar INTRE segmente, nu in interiorul pretului. */
.ancora-pret span,
.ancora-pret b { white-space: nowrap; }
.ancora-pret b {
  color: var(--noapte-text);
  font-weight: var(--fw-medium);
  font-size: var(--text-md);
}
/* liniuta scurta de dinainte, aceeasi semnatura ca la .eyebrow */
.ancora-pret::before {
  content: '';
  width: var(--sp-6);
  height: 1px;
  background: var(--terra-400);
}

/* ==========================================================================
   4. GRILA DE PRODUSE de pe landing ("Direkt bestellen")
   4 carduri pe desktop, 2 pe tableta si pe telefon. Sta pe --bg-cald,
   fundalul care codifica "aici se cumpara".
   ========================================================================== */

.sectiune--vanzare { background: var(--bg-cald); }

/* Sand e putin mai cald decat kalk, deci treapta ink-3 pica sub AA la
   text marunt. Pe fundalul de vanzare textele mici urca o treapta. */
.sectiune--vanzare .eyebrow,
.sectiune--vanzare .text-nota { color: var(--ink-2); }

.grila-produse {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}
@media (max-width: 1100px) { .grila-produse { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Sub 640 px o singura coloana: doua carduri pe rand taie butonul
   "In den Warenkorb", iar un CTA trunchiat nu se apasa. Fotografia
   devine banda scurta, ca lista sa nu se lungeasca inutil. */
@media (max-width: 640px)  {
  .grila-produse { grid-template-columns: 1fr; gap: var(--sp-3); }
  .card-produs__foto { aspect-ratio: 21 / 9; }
}

/* Randul de sub grila: linkul spre lista completa + nota de livrare. */
.grila-produse__jos {
  margin-top: var(--sp-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

/* ==========================================================================
   5. CARDUL DE PRODUS
   Ordinea vizuala: foto muchie, linia, numele, pretul MARE pe m²,
   pretul pe placa mic, stocul, butonul. Pretul e eroul, ca in piata.
   ========================================================================== */

.card-produs {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-cald);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard),
              transform var(--dur-2) var(--ease-standard);
}
.card-produs:hover {
  border-color: var(--border-strong);
  box-shadow: var(--umbra-md);
  transform: translateY(-2px);
}

/* Fotografia: muchia placii pe kalk, niciodata cutout pe alb pur.
   Raport fix ca grila sa nu salte cand pozele difera. */
.card-produs__foto {
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  overflow: hidden;
}
.card-produs__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-produs__corp {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--sp-5);
  gap: var(--sp-1);
}
@media (max-width: 700px) { .card-produs__corp { padding: var(--sp-4); } }

/* Linia de produs, deasupra numelui: X LITE, BASIC, WALL PLUS. */
.card-produs__linie {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}

.card-produs__nume {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  font-variation-settings: "wdth" 106;
  letter-spacing: var(--ls-titlu);
  color: var(--ink);
}

/* Un rand scurt care spune pentru cine e placa. Fara jargon. */
.card-produs__pentru {
  font-size: var(--text-sm);
  color: var(--ink-2);
  text-wrap: pretty;
  margin-bottom: var(--sp-3);
}

/* Pretul pe m² e cifra mare; pretul pe placa, randul mic de sub el. */
.card-produs__pret {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: var(--lh-compact);
}
.card-produs__pret small {
  font-size: var(--text-sm);
  font-weight: var(--fw-normal);
  color: var(--ink-3);
}
.card-produs__pret-sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  margin-bottom: var(--sp-3);
}

/* Stocul: punct plin + text. Rol --stoc, nu verdictul --succes. */
.card-produs__stoc {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--succes);
  margin-bottom: var(--sp-4);
}
.card-produs__stoc::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: var(--radius-plin);
  background: var(--stoc);
  flex: none;
}

.card-produs .btn { width: 100%; }

/* Varianta Musterbox: chenar terra discret, e oferta de intrare,
   singurul card cu voie sa iasa din rand. */
.card-produs--muster { border-color: var(--accent); }
.card-produs--muster .card-produs__linie { color: var(--accent-hover); }

/* ==========================================================================
   6. TOAST de confirmare "in cos"
   Jos in dreapta pe desktop, deasupra barei sticky pe mobil. Se duce
   singur dupa cateva secunde (JS pune si scoate [data-vizibil]).
   ========================================================================== */

.toast-cos {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--ink);
  color: var(--ink-invers);
  border-radius: var(--radius-md);
  box-shadow: var(--umbra-modal);
  font-size: var(--text-sm);
  transform: translateY(var(--sp-4));
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur-3) var(--ease-intrare),
              opacity var(--dur-3) var(--ease-standard),
              visibility 0s linear var(--dur-3);
}
.toast-cos[data-vizibil] {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.toast-cos a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--terra-300);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .toast-cos {
    left: var(--gutter);
    /* deasupra barei CTA sticky de jos */
    bottom: calc(var(--tap-min) + var(--sp-8) + env(safe-area-inset-bottom, 0px));
  }
}

/* ==========================================================================
   7. PAGINA DE COS (warenkorb.html)
   Stanga lista, dreapta sumarul lipit. Pe mobil sumarul coboara sub lista.
   ========================================================================== */

.cos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: var(--sp-10);
  align-items: start;
}
@media (max-width: 1000px) { .cos { grid-template-columns: 1fr; gap: var(--sp-6); } }

.cos-lista { display: grid; }

/* Un rand de cos: foto mica, nume + SKU, cantitate, pret de rand, sterge. */
.cos-rand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 700px) {
  .cos-rand {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "foto nume sterge"
      "foto cant pret";
    row-gap: var(--sp-3);
  }
  .cos-rand__foto   { grid-area: foto; }
  .cos-rand__nume   { grid-area: nume; }
  .cos-rand .cant   { grid-area: cant; justify-self: start; }
  .cos-rand__pret   { grid-area: pret; }
  .cos-rand__sterge { grid-area: sterge; }
}

.cos-rand__foto {
  width: var(--sp-20);
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
}
.cos-rand__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cos-rand__nume b {
  display: block;
  font-weight: var(--fw-semibold);
  font-variation-settings: "wdth" 104;
}
.cos-rand__nume small {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-3);
}

.cos-rand__pret {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.cos-rand__pret small { display: block; font-size: var(--text-xs); color: var(--ink-3); }

.cos-rand__sterge {
  display: grid;
  place-items: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  border: 0;
  background: none;
  color: var(--ink-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.cos-rand__sterge:hover { color: var(--eroare); background: var(--eroare-tint); }

/* Treapta de cantitate: minus, cifra, plus. Butoane de 44px, cifra mono. */
.cant {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.cant button {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  border: 0;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-lg);
  cursor: pointer;
}
.cant button:hover { background: var(--surface-2); }
.cant button:disabled { color: var(--ink-3); cursor: default; background: var(--surface); }
.cant input {
  width: var(--sp-12);
  border: 0;
  border-inline: 1px solid var(--border);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--surface);
}

/* ---- Sumarul, lipit pe desktop ---------------------------------------- */

.cos-sumar {
  position: sticky;
  top: calc(var(--sp-12) + var(--sp-12));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
}
@media (max-width: 1000px) { .cos-sumar { position: static; } }

.cos-sumar dl { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-5); }
.cos-sumar dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.cos-sumar dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.cos-sumar dl > .cos-sumar__total {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-strong);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.cos-sumar__total dd { font-size: var(--text-xl); }
.cos-sumar__mwst { font-size: var(--text-xs); color: var(--ink-3); margin-bottom: var(--sp-5); }

/* Pragul de livrare gratuita: bara care se umple. Motivul numarul 1 de
   marire a cosului la materiale: "mai pune un sac si nu mai platesti
   transportul". Verde abia cand chiar e atins, altfel neutru. */
.cos-prag { margin-bottom: var(--sp-5); }
.cos-prag p { font-size: var(--text-xs); color: var(--ink-2); margin-bottom: var(--sp-2); }
.cos-prag p b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cos-prag__bara {
  height: var(--sp-1);
  background: var(--surface-3);
  border-radius: var(--radius-plin);
  overflow: hidden;
}
.cos-prag__bara span {
  display: block;
  height: 100%;
  width: var(--p, 0%);
  background: var(--ink-3);
  border-radius: inherit;
  transition: width var(--dur-4) var(--ease-standard),
              background var(--dur-4) var(--ease-standard);
}
.cos-prag[data-atins] .cos-prag__bara span { background: var(--stoc); }
.cos-prag[data-atins] p { color: var(--succes); }

/* ---- Cosul gol: stare desenata, nu un rand trist de text --------------- */

.cos-gol {
  text-align: center;
  padding-block: var(--sp-16);
  max-width: var(--container-text);
  margin-inline: auto;
}
.cos-gol h2 { margin-bottom: var(--sp-3); }
.cos-gol p { color: var(--ink-2); margin-bottom: var(--sp-6); }

/* ==========================================================================
   COMPLETARI, 31 august 2026
   ==========================================================================
   Peste foaia de mai sus vin piesele de care are nevoie cosul functional:
   campul de cantitate, plusul si minusul din cos, semnele de incredere.

   Decizia de culoare, 31 august 2026: fondatorul a cerut portocaliu de
   bricolaj si textura de caramida, a vazut ambele variante una langa alta,
   si a ales varianta lui Fable. Portocaliul si caramida sunt SCOASE.
   Argumentul care a cantarit: ce lipsea era comertul, nu culoarea.
   ========================================================================== */

/* ---- 1. Cosul din antet, starea plina ---------------------------------- */

.cos-buton.is-plin { border-color: var(--accent); color: var(--accent); }
.cos-buton__nr { background: var(--cos-badge-bg); color: var(--cos-badge-text); }

/* ---- 2. Cantitatea pe cardul de produs ---------------------------------- */

.card-produs__actiune {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.card-produs__actiune .btn { flex: 1; }

.cant-camp {
  width: 3.75rem;
  min-height: var(--tap-min);
  padding-inline: var(--sp-2);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.cant-camp:focus-visible { outline: var(--focus-ring); }

/* ---- 3. Cantitatea in cos, cu plus si minus ----------------------------- */

.cos-rand__cant {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cos-rand__cant button {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  font-size: var(--text-lg);
  color: var(--ink-2);
  background: var(--surface);
  border: 0;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-standard);
}
.cos-rand__cant button:hover { background: var(--surface-2); color: var(--ink); }
.cos-rand__cant input {
  width: 3rem;
  min-height: var(--tap-min);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--surface);
  border: 0;
  border-inline: 1px solid var(--border);
}

.cos-rand__sku,
.cos-rand__sub,
.cos-rand__unit,
.cos-rand__m2,
.cos-rand__supra {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.cos-rand__unit { margin-top: var(--sp-1); color: var(--ink-2); }
.cos-rand__m2 { margin-left: var(--sp-2); }

.cos-rand__total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-1);
  min-width: 6rem;
}
.cos-rand__total strong {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
}
.cos-rand__scoate {
  min-height: var(--tap-min);
  padding: 0;
  font-size: var(--text-xs);
  color: var(--ink-3);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.cos-rand__scoate:hover { color: var(--eroare); }

/* ---- 4. Semnele de incredere de sub sumar ------------------------------- */

.cos-sumar__semne {
  margin-top: var(--sp-5);
  display: grid;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--ink-2);
  list-style: none;
  padding: 0;
}
.cos-sumar__semne li { display: flex; gap: var(--sp-2); }
.cos-sumar__semne li::before {
  content: "";
  flex: none;
  width: var(--sp-3);
  height: var(--sp-3);
  margin-top: 0.25em;
  border-radius: var(--radius-plin);
  background: var(--stoc);
}

.cos-sumar__prag-text {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  font-size: var(--text-xs);
  color: var(--ink-2);
  background: var(--surface);
  border-radius: var(--radius-sm);
}

/* ---- 5. Butoanele de pe cardul de linie din lista de placi -------------- */

.linie-card__butoane { display: flex; gap: var(--sp-2); }
.linie-card__butoane .btn { white-space: nowrap; }

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

/* ---- 6. Corecturi vazute pe ecran, 31 august 2026 ----------------------- */

/* Titlul sumarului mostenea marimea de h2 din pagina si striga mai tare
   decat totalul, care e singura cifra care conteaza acolo. */
.cos-sumar h2 {
  font-size: var(--text-md);
  line-height: var(--lh-titlu);
  letter-spacing: var(--ls-normal);
  font-weight: var(--fw-semibold);
  color: var(--ink-2);
  margin-bottom: var(--sp-5);
}

/* Numele si masurile din randul de cos: masurile nu se mai rup peste doua
   randuri cu un "mm" singur jos. */
.cos-rand__nume small {
  display: block;
  margin-top: var(--sp-1);
  text-wrap: pretty;
}
.cos-rand__nume b { display: block; }

/* Cardul de produs are nevoie de aer intre pret si buton: pe tema inchisa
   se lipeau optic, pentru ca nu mai exista umbra care sa le desparta. */
.card-produs__corp > .btn { margin-top: var(--sp-4); }

/* ---- 7. Pagina de comanda ---------------------------------------------- */

.kasse-form { display: grid; gap: var(--sp-8); }

.kasse-bloc {
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.kasse-bloc legend {
  padding-inline: var(--sp-2);
  margin-left: calc(var(--sp-2) * -1);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}

.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 40rem) { .form-grid--2 { grid-template-columns: 1fr; } }

.kasse-nota {
  font-size: var(--text-sm);
  color: var(--ink-2);
  text-wrap: pretty;
}
.kasse-nota--mica { margin-top: var(--sp-3); font-size: var(--text-xs); color: var(--ink-3); }
.kasse-nota--asteapta {
  padding: var(--sp-4);
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--ink-3);
}

.kasse-express { margin-bottom: var(--sp-5); }
.kasse-express__butoane { margin-top: var(--sp-3); display: grid; gap: var(--sp-3); }

.kasse-bifa {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-2) 0;
  font-size: var(--text-sm);
  color: var(--ink-2);
  cursor: pointer;
}
.kasse-bifa input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15em;
  accent-color: var(--accent);
}
.kasse-bifa a { color: var(--link); }

.kasse-lista {
  display: grid;
  gap: var(--sp-3);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.kasse-rand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-3);
  font-size: var(--text-sm);
}
.kasse-rand__cant { font-family: var(--font-mono); color: var(--ink-3); }
.kasse-rand__nume { color: var(--ink-2); }
.kasse-rand__pret { font-family: var(--font-mono); color: var(--ink); }

.kasse-inapoi { margin-top: var(--sp-4); text-align: center; font-size: var(--text-sm); }
.kasse-inapoi a { color: var(--ink-3); }
.kasse-inapoi a:hover { color: var(--ink); }

.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---- 8. Culoare pe cifrele care conteaza ------------------------------- */

/* Pretul e singura cifra pentru care omul a venit pe pagina. Pe fundal
   inchis primeste culoare, nu doar marime. */
.card-produs__pret { color: var(--pret-culoare); }
.card-produs__pret small { color: var(--ink-3); }
.cos-rand__pret { color: var(--pret-culoare); }
.cos-sumar__total strong { color: var(--pret-culoare); }
.linie-card__pret { color: var(--pret-culoare); }

/* Supratitlurile de sectiune: erau gri pe gri si dispareau. */
.eyebrow { color: var(--eyebrow-culoare); }

/* Cosul din antet, cand are ceva in el, e singurul loc din antet cu voie
   sa strige. */
.cos-buton.is-plin { border-color: var(--accent); color: var(--accent); }
.cos-buton__badge,
.cos-buton__nr { background: var(--accent); color: var(--on-accent); }

/* ---- 9. Cautarea ------------------------------------------------------- */

.cauta {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding-left: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-2) var(--ease-standard);
}
.cauta:focus-within { border-color: var(--accent); }
.cauta input {
  width: 8.5rem;
  min-height: var(--tap-min);
  border: 0;
  background: none;
  color: var(--ink);
  font-size: var(--text-sm);
}
.cauta input::placeholder { color: var(--ink-3); }
.cauta input:focus-visible { outline: none; }
.cauta button {
  display: grid;
  place-items: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  color: var(--ink-3);
  background: none;
  border: 0;
  cursor: pointer;
}
.cauta button:hover { color: var(--accent); }
@media (max-width: 1300px) { .cauta input { width: 6.5rem; } }
@media (max-width: 1120px) { .cauta { display: none; } }

.suche-form { margin-top: var(--sp-8); }
.suche-form input {
  width: 100%;
  min-height: 3.5rem;
  padding-inline: var(--sp-5);
  font-size: var(--text-lg);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
}
.suche-form input:focus-visible { outline: var(--focus-ring); border-color: var(--accent); }

.suche-filtre { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.suche-chip {
  min-height: var(--tap-min);
  padding-inline: var(--sp-4);
  font-size: var(--text-sm);
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-plin);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-standard),
              color var(--dur-2) var(--ease-standard);
}
.suche-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.suche-chip.is-activ {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

.suche-nr {
  margin: var(--sp-6) 0 var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}
.suche-gol { margin-top: var(--sp-8); color: var(--ink-2); }
.suche-gol a { color: var(--link); }

/* ---- 10. Grosimea, scrisa peste poza ----------------------------------- */

/* La un raft de placi care arata toate la fel, singurul lucru care le
   deosebeste din lista e grosimea. Deci grosimea sta pe poza, nu sub ea. */
.card-produs__foto { position: relative; }
.card-produs__mm {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 1;
  padding: var(--sp-1) var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-sm);
}

/* ---- 11. Pretul concurentei, taiat ------------------------------------- */

/* Gri, niciodata rosu: suntem mai ieftini, nu suntem outlet. Cifra vine din
   fisele clientului, deci se poate sustine daca intreaba cineva. */
.pret-vechi {
  display: block;
  flex-basis: 100%;
  margin-top: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.pret-vechi s { text-decoration-thickness: 1px; }
.pret-vechi b {
  margin-left: var(--sp-2);
  padding: 0.1em var(--sp-2);
  font-weight: var(--fw-semibold);
  color: var(--accent-hover);
  background: var(--accent-tint);
  border-radius: var(--radius-xs);
}