/* ==========================================================================
   Cromatica Finisaje — utilitare si componente globale
   Depinde de tokens.css (trebuie incarcat inainte).

   Regula centrala: efectele de hover sunt GLOBALE. Un card are un singur
   trigger de hover, pe tot cardul, care seteaza --atc:1; copiii citesc
   variabila. Nu se scriu hover-uri separate pe titlu, imagine si buton.

   Fara colturi rotunjite in afara a trei exceptii documentate:
   portret de persoana (50%), badge de cos (50%), morfingul de pe cardul
   de produs (50% -> 0).
   ========================================================================== */


/* ==========================================================================
   1. BAZA
   ========================================================================== */

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

html,
body {
  margin: 0;
  padding: 0;
  background: var(--c-surface-warm);
}

body {
  font-family: var(--f-corp);
  font-size: var(--fs-14);
  line-height: var(--lh-corp);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: var(--c-plum);
  text-decoration: none;
  transition: color var(--t-hover) var(--ease);
}

/* Fix (2026-08-08, hover-text-invisible bug): scoped to exclude .btn anchors --
   .cart-cta / .btn-primary / .btn-secondary etc are <a> tags whose OWN hover rules
   (background:var(--c-crimson) on .btn-primary) never set color, so this generic
   a:hover rule (element+pseudo-class specificity) was winning the color property and
   painting the text/icon the SAME crimson as the hover background -- invisible text.
   Plain text links (nav, footer, breadcrumb, link-arrow) are untouched, they carry
   no .btn class. */
a:not(.btn):hover {
  color: var(--c-crimson);
}

h1, h2, h3, h4 {
  font-family: var(--f-titlu);
  font-weight: var(--fw-titlu);
  color: var(--c-ink);
  margin: 0;
}

p {
  text-wrap: pretty;
}


/* ==========================================================================
   2. UTILITARE DE LAYOUT
   ========================================================================== */

/* Gutter de pagina: continut de 1216px, minim 24px pe margini. */
.gutter {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.sectiune {
  padding: var(--sp-sectiune) var(--gutter);
}

.sectiune--mediu { padding: var(--sp-sectiune-mediu) var(--gutter); }
.sectiune--mic   { padding: var(--sp-sectiune-mic) var(--gutter); }
.sectiune--banda { padding: var(--sp-sectiune-banda) var(--gutter); }
.sectiune--ultima {
  padding: var(--sp-sectiune-mediu) var(--gutter) var(--sp-sectiune-jos);
}

.sectiune--calda { background: var(--c-surface-warm); }
.sectiune--alba  { background: var(--c-surface); }
.sectiune--nisip { background: var(--c-surface-sand); }
.sectiune--inchisa {
  background: var(--c-plum-deep);
  color: var(--c-on-dark);
}

/* Kicker de sectiune. */
.kicker {
  font-size: var(--fs-11);
  letter-spacing: var(--ls-kicker);
  font-weight: var(--fw-semi);
  color: var(--c-amber);
  text-transform: uppercase;
}

.kicker--mic {
  font-size: var(--fs-10-5);
  letter-spacing: var(--ls-eticheta);
}

/* Eticheta de card / titlu de fisa. */
.eticheta-fisa {
  font-size: var(--fs-10-5);
  letter-spacing: var(--ls-fisa);
  font-weight: var(--fw-semi);
  color: var(--c-ink-40);
  text-transform: uppercase;
}

/* Paragraf lung. */
.proza {
  font-size: var(--fs-14-5);
  line-height: var(--lh-corp-larg);
  color: var(--c-ink-55);
  max-width: var(--masura);
  text-wrap: pretty;
}

/* ------------------------------------------------------------------
   Reteta de grila cu separator de 1px.
   Containerul poarta fundalul sectiunii si gap:1px; FIECARE celula
   poarta outline (NU border) plus acelasi fundal. Outline-ul nu ocupa
   spatiu si se suprapune in gap, deci liniile raman de 1px la orice
   numar de coloane si nu apar piste goale la wrap.
   ------------------------------------------------------------------ */
.grila-separator {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap-separator);
  background: var(--c-surface);
}

.grila-separator > * {
  background: var(--c-surface);
  outline: var(--bd-celula);
  padding: var(--sp-12) var(--sp-11);
}

/* Grila obisnuita de carduri. */
.grila-carduri {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap-grila);
}

/* Separator vertical intre coloane de tip USP. */
.separator-vertical {
  width: 1px;
  align-self: stretch;
  background: var(--c-line);
}


/* ==========================================================================
   3. FOCUS PENTRU TASTATURA
   Un singur inel in tot sistemul: contur portocaliu 2px, decalaj 2px.
   Apare doar la navigare cu tastatura; nu se dezactiveaza nicaieri.
   ========================================================================== */

:focus-visible {
  outline: var(--focus-latime) solid var(--focus-culoare);
  outline-offset: var(--focus-decalaj);
}

/* Pe fundal inchis inelul ramane portocaliu (acelasi token, explicit
   pentru cazul in care culoarea implicita se schimba vreodata). */
.pe-inchis :focus-visible {
  outline-color: var(--focus-culoare-inchis);
}

/* Salt la continut — vizibil doar la primul Tab. */
.salt-la-continut {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: calc(var(--z-lightbox) + 1);
  background: var(--c-plum);
  color: var(--c-on-dark);
  padding: var(--sp-5) var(--sp-9);
  font-size: var(--fs-11-5);
  letter-spacing: var(--ls-buton);
  font-weight: var(--fw-semi);
}

.salt-la-continut:focus {
  left: var(--sp-5);
  top: var(--sp-5);
  color: var(--c-on-dark);
}


/* ==========================================================================
   4. SISTEMUL DE HOVER PE CARD (--atc)
   Un singur trigger pe tot cardul. Trei efecte din aceeasi variabila:
   bara de progres de 3px, zoom pe imagine, umbra. Cardul de produs adauga
   varianta cu morfing de colt.
   ========================================================================== */

.card-efect {
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--t-umbra) var(--ease);
}

.card-efect:hover,
.card-efect:focus-within {
  --atc: 1;
  box-shadow: var(--umbra-card);
}

/* Card mic / tile de galerie: umbra mai stransa. */
.card-efect--mic:hover,
.card-efect--mic:focus-within {
  box-shadow: var(--umbra-card-mic);
}

/* Card ridicat (carusel de produse recomandate). */
.card-efect--ridicat:hover,
.card-efect--ridicat:focus-within {
  box-shadow: var(--umbra-card-ridicat);
}

/* Rand de lista: aceeasi bara, fara zoom si fara umbra. */
.rand-efect {
  position: relative;
  overflow: hidden;
}

.rand-efect:hover,
.rand-efect:focus-within {
  --atc: 1;
}

/* --- a. Bara de progres, 3px ------------------------------------------ */
.efect-bara {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--atc-bara);
  overflow: hidden;
  pointer-events: none;
}

.efect-bara > span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--atc-bara-culoare);
  transform: translateX(calc((var(--atc, 0) - 1) * 100%));
  transition: transform var(--t-bara) var(--ease);
}

/* Intrare din dreapta (folosita pe randurile de "vizualizate recent"). */
.efect-bara--dinspre-dreapta > span {
  transform: translateX(calc((1 - var(--atc, 0)) * 100%));
}

/* Bara pe latura de sus. */
.efect-bara--sus {
  top: 0;
  bottom: auto;
}

/* Bara verticala pe latura din dreapta (carduri de retea). */
.efect-bara--verticala {
  left: auto;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  height: auto;
}

.efect-bara--verticala > span {
  transform-origin: bottom center;
  transform: scaleY(var(--atc, 0));
  transition: transform var(--t-morf-card) var(--ease);
}

/* Culoarea se cicleaza pe randuri de carduri / liste.
   Ordinea reala din fisiere: plum -> chihlimbar -> magenta. */
.cicleaza-bara > :nth-child(3n + 1) { --atc-bara-culoare: var(--c-plum); }
.cicleaza-bara > :nth-child(3n + 2) { --atc-bara-culoare: var(--c-amber); }
.cicleaza-bara > :nth-child(3n + 3) { --atc-bara-culoare: var(--c-crimson); }

.bara-plum    { --atc-bara-culoare: var(--c-plum); }
.bara-amber   { --atc-bara-culoare: var(--c-amber); }
.bara-crimson { --atc-bara-culoare: var(--c-crimson); }

/* --- b. Zoom pe imagine ------------------------------------------------ */
.efect-media {
  position: relative;
  overflow: hidden;
  background: var(--c-surface-sand);
}

.efect-media > img,
.efect-media > span[role="img"],
.efect-media__strat {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  transform: scale(calc(1 + var(--atc, 0) * var(--atc-zoom-mare)));
  transition: transform var(--t-zoom) var(--ease);
}

/* Carduri mici si tile-uri de galerie: .07 si 620ms. */
.efect-media--mic > img,
.efect-media--mic > span[role="img"],
.efect-media--mic .efect-media__strat {
  transform: scale(calc(1 + var(--atc, 0) * var(--atc-zoom-mic)));
  transition: transform var(--t-bara) var(--ease);
}

/* Varianta cu ridicare (carduri de articol). */
.efect-media--ridica > img,
.efect-media--ridica > span[role="img"],
.efect-media--ridica .efect-media__strat {
  transform:
    scale(calc(1 + var(--atc, 0) * var(--atc-zoom-mare)))
    translateY(calc(var(--atc, 0) * -8px));
}

/* --- c. Morfing de colt (singurul loc cu colturi rotunjite animate) ---- */
.efect-media--morf {
  aspect-ratio: 1 / 1;
  background: var(--c-surface-sand);
  border-radius: calc((1 - var(--atc, 0)) * 50%);
  transition: border-radius var(--t-morf) var(--ease);
}

/* Elementele ancorate in coltul mediei se retrag spre margine odata cu
   morfingul, ca sa nu iasa din cercul initial. */
.efect-ancora-stanga-sus {
  position: absolute;
  left: calc((1 - var(--atc, 0)) * 17%);
  top: calc((1 - var(--atc, 0)) * 15%);
  transition:
    left var(--t-morf) var(--ease),
    top var(--t-morf) var(--ease);
}

.efect-ancora-dreapta-sus {
  position: absolute;
  right: calc((1 - var(--atc, 0)) * 17%);
  top: calc((1 - var(--atc, 0)) * 15%);
  transition:
    right var(--t-morf) var(--ease),
    top var(--t-morf) var(--ease);
}

/* Bara de actiune care urca din josul mediei la hover. */
.efect-actiune {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(calc((1 - var(--atc, 0)) * 100%));
  transition:
    transform var(--t-sertar-cta) var(--ease),
    background var(--t-stare) ease;
}

/* Morfingul de card de colectie: cerc -> dreptunghi pe toata latimea.
   Se comanda din JS prin data-activ, nu prin :hover, pentru ca starea e
   partajata cu vecinii din rand. */
.card-colectie__media {
  position: relative;
  overflow: hidden;
  height: 236px;
  width: 236px;
  margin: 0 auto;
  background: var(--c-surface-sand-2);
  border-radius: var(--raza-cerc);
  transition:
    border-radius var(--t-morf-card) var(--ease),
    width var(--t-morf-card) var(--ease);
}

.card-colectie[data-activ="true"] .card-colectie__media {
  border-radius: var(--raza-0);
  width: 100%;
}


/* ==========================================================================
   5. BUTOANE
   7 variante x 3 dimensiuni (38 / 46 / 52) + starea "in incarcare".
   Text 11.5px, letter-spacing .12em, weight 600, majuscule.
   ========================================================================== */

.buton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  height: var(--h-buton-m);
  padding: 0 var(--sp-10);
  border: 1px solid transparent;
  border-radius: var(--raza-0);
  background: none;
  font-family: var(--f-corp);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-buton);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background var(--t-hover) var(--ease),
    color var(--t-hover) var(--ease),
    border-color var(--t-hover) var(--ease);
}

/* --- dimensiuni -------------------------------------------------------- */
.buton--s {
  height: var(--h-buton-s);
  padding: 0 var(--sp-7);
  font-size: var(--fs-10-5);
}

.buton--m {
  height: var(--h-buton-m);
  padding: 0 var(--sp-9);
  font-size: var(--fs-11);
}

.buton--l {
  height: var(--h-buton-l);
  padding: 0 var(--sp-12);
  font-size: var(--fs-11-5);
}

/* Sub 600px actiunea principala ocupa toata latimea. */
.buton--bloc {
  width: 100%;
  height: var(--h-buton-bloc);
}

/* --- 1. primar --------------------------------------------------------- */
.buton--primar {
  background: var(--c-plum);
  border-color: var(--c-plum);
  color: var(--c-on-dark);
}

.buton--primar:hover {
  background: var(--c-crimson);
  border-color: var(--c-crimson);
  color: var(--c-on-dark);
}

.buton--primar:active {
  background: var(--c-plum-press);
  border-color: var(--c-plum-press);
}

/* --- 2. secundar (contur plum care se umple la hover) ------------------ */
.buton--secundar {
  background: none;
  border-color: var(--c-plum);
  color: var(--c-plum);
}

.buton--secundar:hover {
  background: var(--c-plum);
  color: var(--c-on-dark);
}

.buton--secundar:active {
  background: var(--c-plum-press);
  border-color: var(--c-plum-press);
  color: var(--c-on-dark);
}

/* Varianta neutra: contur gri, devine plum la hover.
   Folosita in banner-ul de cookie si in modalele de confirmare. */
.buton--secundar-neutru {
  background: none;
  border-color: var(--c-line-btn);
  color: var(--c-ink-70);
}

.buton--secundar-neutru:hover {
  border-color: var(--c-plum);
  color: var(--c-plum);
}

/* --- 3. ghost / text --------------------------------------------------- */
.buton--ghost {
  background: none;
  border-color: transparent;
  padding: 0 var(--sp-2);
  color: var(--c-plum);
}

.buton--ghost:hover {
  color: var(--c-crimson);
}

/* Sageata din butonul ghost ramane portocalie si pe hover. */
.buton__sageata {
  flex: 0 0 auto;
  stroke: var(--c-amber);
}

.buton--cu-sageata {
  gap: var(--sp-6);
}

/* --- 4. pe fundal inchis ----------------------------------------------- */
.buton--pe-inchis {
  background: var(--c-amber);
  border-color: var(--c-amber);
  color: var(--c-ink);
}

.buton--pe-inchis:hover {
  background: var(--c-surface);
  border-color: var(--c-surface);
  color: var(--c-ink);
}

/* --- 5. ghost pe fundal inchis ----------------------------------------- */
.buton--ghost-inchis {
  background: none;
  border-color: var(--c-line-on-dark);
  color: var(--c-on-dark);
}

.buton--ghost-inchis:hover {
  background: var(--c-surface);
  color: var(--c-ink);
}

/* --- 6. distructiv (contur magenta, se umple la hover) ----------------- */
.buton--distructiv {
  background: none;
  border-color: var(--c-crimson);
  color: var(--c-crimson);
}

.buton--distructiv:hover {
  background: var(--c-crimson);
  color: var(--c-on-dark);
}

/* --- 7. dezactivat ----------------------------------------------------- */
.buton--dezactivat,
.buton:disabled,
.buton[aria-disabled="true"] {
  background: var(--c-surface-off);
  border-color: var(--c-surface-off);
  color: var(--c-ink-40);
  cursor: not-allowed;
  pointer-events: none;
}

/* Nu se foloseste opacitate pe butonul primar dezactivat. */

/* --- buton cu icon (fara text) ----------------------------------------- */
.buton-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--h-icon-btn);
  height: var(--h-icon-btn);
  padding: 0;
  border: 1px solid var(--c-line-icon);
  border-radius: var(--raza-0);
  background: var(--c-surface);
  color: var(--c-plum);
  cursor: pointer;
  transition:
    background var(--t-stare) var(--ease),
    color var(--t-stare) var(--ease),
    border-color var(--t-stare) var(--ease);
}

.buton-icon:hover {
  background: var(--c-plum);
  border-color: var(--c-plum);
  color: var(--c-on-dark);
}

.buton-icon--plin {
  background: var(--c-plum);
  border-color: var(--c-plum);
  color: var(--c-on-dark);
}

.buton-icon--plin:hover {
  background: var(--c-crimson);
  border-color: var(--c-crimson);
}

/* Orice buton fara text are title si aria-label. Fara exceptii. */

/* --- starea "in incarcare" --------------------------------------------
   Pastreaza latimea butonului: textul ramane in DOM, dar devine invizibil
   si nu mai ocupa niciun pixel in plus. Spinner de 16px.
   ---------------------------------------------------------------------- */
.buton--incarca {
  position: relative;
  cursor: progress;
  pointer-events: none;
}

.buton--incarca .buton__text {
  visibility: hidden;
}

.buton--incarca::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid var(--c-on-dark-35);
  border-top-color: var(--c-amber);
  border-radius: var(--raza-cerc);
  animation: cromatica-spin var(--t-spinner) linear infinite;
}

/* Pe butoanele deschise la culoare, inelul spinnerului se inchide. */
.buton--incarca.buton--secundar::after,
.buton--incarca.buton--secundar-neutru::after,
.buton--incarca.buton--ghost::after {
  border-color: var(--c-line-control);
  border-top-color: var(--c-plum);
}

/* Varianta cu spinner vizibil langa text (folosita in inventar). */
.buton__spinner {
  display: block;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  border: 2px solid var(--c-on-dark-35);
  border-top-color: var(--c-amber);
  border-radius: var(--raza-cerc);
  animation: cromatica-spin var(--t-spinner) linear infinite;
}

@keyframes cromatica-spin {
  to { transform: rotate(360deg); }
}


/* ==========================================================================
   6. FORMULARE
   Etichetele stau DEASUPRA campului. Inaltime 46px (dens) sau 50px (principal).
   Cinci stari: normal, focus, eroare, succes, dezactivat.
   ========================================================================== */

.camp {
  display: block;
}

.camp__eticheta {
  display: block;
  margin-bottom: 7px;
  font-size: var(--fs-11);
  letter-spacing: var(--ls-camp);
  color: var(--c-ink-40);
}

.camp__control,
.camp input[type="text"],
.camp input[type="email"],
.camp input[type="password"],
.camp input[type="tel"],
.camp input[type="search"],
.camp input[type="number"],
.camp textarea,
.camp select {
  width: 100%;
  min-width: 0;
  height: var(--h-camp);
  padding: 0 var(--sp-6);
  border: var(--bd-input);
  border-radius: var(--raza-0);
  background: var(--c-surface);
  font-family: var(--f-corp);
  font-size: var(--fs-13-5);
  color: var(--c-ink);
  transition:
    border-color var(--t-stare) var(--ease),
    box-shadow var(--t-stare) var(--ease);
}

.camp textarea {
  height: auto;
  min-height: 120px;
  padding: var(--sp-5) var(--sp-6);
  line-height: var(--lh-corp);
  resize: vertical;
}

.camp--mare .camp__control,
.camp--mare input,
.camp--mare select {
  height: var(--h-camp-mare);
}

/* --- stare: focus (chenar plum + halou 3px la 14%) --------------------- */
.camp__control:focus,
.camp input:focus,
.camp textarea:focus,
.camp select:focus {
  outline: none;
  border-color: var(--c-plum);
  box-shadow: 0 0 0 3px var(--c-plum-glow);
}

/* Inelul de tastatura ramane peste halou cand se navigheaza cu Tab. */
.camp__control:focus-visible,
.camp input:focus-visible,
.camp textarea:focus-visible,
.camp select:focus-visible {
  outline: var(--focus-latime) solid var(--focus-culoare);
  outline-offset: var(--focus-decalaj);
}

.camp__control::placeholder,
.camp input::placeholder,
.camp textarea::placeholder {
  color: var(--c-ink-40);
}

/* --- stare: eroare ------------------------------------------------------ */
.camp--eroare .camp__control,
.camp--eroare input,
.camp--eroare textarea,
.camp--eroare select {
  border-color: var(--c-crimson);
}

/* Mesajul sta sub camp, niciodata ca tooltip, si spune ce sa corecteze. */
.camp__mesaj {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: 9px;
  font-size: var(--fs-12);
  line-height: 1.6;
  color: var(--c-crimson);
}

.camp__mesaj svg {
  flex: 0 0 14px;
  margin-top: 2px;
}

/* --- stare: succes ------------------------------------------------------ */
.camp--succes .camp__control,
.camp--succes input,
.camp--succes select {
  border-color: var(--c-green);
  padding-right: 42px;
}

.camp__bifa-succes {
  position: absolute;
  right: var(--sp-6);
  top: var(--sp-6);
  display: block;
  color: var(--c-green);
}

.camp__nota-succes {
  margin-top: 9px;
  font-size: var(--fs-12);
  line-height: 1.6;
  color: var(--c-green);
}

/* --- stare: dezactivat -------------------------------------------------- */
.camp--dezactivat .camp__eticheta {
  color: var(--c-ink-25);
}

.camp--dezactivat .camp__control,
.camp input:disabled,
.camp select:disabled,
.camp textarea:disabled {
  border-color: var(--c-line);
  background: var(--c-surface-sand);
  color: var(--c-ink-40);
  cursor: not-allowed;
}

/* --- invelis relativ pentru iconuri in interiorul campului -------------- */
.camp__invelis {
  position: relative;
  display: block;
}

/* --- select ------------------------------------------------------------- */
.camp select {
  padding-right: 40px;
  appearance: none;
  cursor: pointer;
}

.camp__chevron {
  position: absolute;
  right: 15px;
  top: 20px;
  pointer-events: none;
  stroke: var(--c-plum);
}

/* --- buton de ochi la parola -------------------------------------------- */
.camp--parola .camp__control,
.camp--parola input {
  padding-right: 46px;
}

.camp__ochi {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--h-camp);
  height: var(--h-camp);
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-ink-40);
  cursor: pointer;
  transition: color var(--t-stare) var(--ease);
}

.camp__ochi:hover {
  color: var(--c-plum);
}

/* title / aria-label: "Afiseaza parola" / "Ascunde parola" (cu diacritice) */

/* --- selector de cantitate ---------------------------------------------- */
.cantitate {
  display: flex;
  align-items: center;
  width: 120px;
  border: var(--bd-input);
}

.cantitate__buton {
  width: var(--h-buton-s);
  height: var(--h-camp);
  border: 0;
  background: none;
  color: var(--c-plum);
  font-family: var(--f-corp);
  font-size: 17px;
  cursor: pointer;
}

.cantitate__valoare {
  flex: 1;
  text-align: center;
  font-size: var(--fs-14);
  font-weight: var(--fw-semi);
  color: var(--c-ink);
}

/* --- bifa, radio, comutator ---------------------------------------------
   Toate patrate, inclusiv radio. Umplere de 8x8px, nu bifa desenata.
   Se construiesc pe un <input> real, ascuns vizual, ca sa ramana accesibile.
   ------------------------------------------------------------------------ */
.control {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  font-family: var(--f-corp);
}

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

.control__cutie {
  flex: 0 0 var(--sz-control);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sz-control);
  height: var(--sz-control);
  border: 1px solid var(--c-line-control);
  background: var(--c-surface);
  transition:
    background var(--t-stare) var(--ease),
    border-color var(--t-stare) var(--ease);
}

.control__cutie::after {
  content: "";
  display: block;
  width: var(--sz-control-fill);
  height: var(--sz-control-fill);
  background: var(--c-surface);
  opacity: 0;
  transition: opacity var(--t-stare) var(--ease);
}

.control__text {
  font-size: var(--fs-13);
  color: var(--c-ink-70);
}

/* bifa: cutia se umple cu plum, patratul interior e alb */
.control--bifa .control__intrare:checked + .control__cutie {
  border-color: var(--c-plum);
  background: var(--c-plum);
}

.control--bifa .control__intrare:checked + .control__cutie::after {
  opacity: 1;
}

/* radio: cutia ramane alba, patratul interior devine plum */
.control--radio .control__cutie::after {
  background: var(--c-plum);
}

.control--radio .control__intrare:checked + .control__cutie {
  border-color: var(--c-plum);
}

.control--radio .control__intrare:checked + .control__cutie::after {
  opacity: 1;
}

.control__intrare:focus-visible + .control__cutie {
  outline: var(--focus-latime) solid var(--focus-culoare);
  outline-offset: var(--focus-decalaj);
}

.control__intrare:disabled + .control__cutie {
  border-color: var(--c-line);
  background: var(--c-surface-sand);
}

/* comutator (switch) — patrat, 46x26, buton de 20x20 */
.comutator {
  flex: 0 0 var(--w-comutator);
  display: flex;
  justify-content: flex-start;
  width: var(--w-comutator);
  height: var(--h-comutator);
  padding: 2px;
  border: 1px solid var(--c-line-control);
  background: var(--c-surface);
  cursor: pointer;
  transition:
    background var(--t-stare) var(--ease),
    border-color var(--t-stare) var(--ease);
}

.comutator__buton {
  display: block;
  width: 20px;
  height: 20px;
  background: var(--c-ink-25);
  transition: background var(--t-stare) var(--ease);
}

.comutator[aria-checked="true"] {
  justify-content: flex-end;
  border-color: var(--c-plum);
  background: var(--c-plum);
}

.comutator[aria-checked="true"] .comutator__buton {
  background: var(--c-surface);
}

.comutator[aria-disabled="true"] {
  cursor: not-allowed;
}


/* ==========================================================================
   7. BADGE-URI SI ETICHETE
   10-11px, letter-spacing .1em, weight 700, padding 7px 12px, fara colturi
   rotunjite. Maximum UN badge pe card: daca produsul e si nou, si redus,
   castiga reducerea. Pozitionare: coltul stanga-sus al imaginii, lipit de
   margine, fara spatiu.
   ========================================================================== */

.badge {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: var(--raza-0);
  font-family: var(--f-corp);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-badge);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--reducere-procent {           /* -10% */
  background: var(--c-amber);
  color: var(--c-ink);
  letter-spacing: var(--ls-camp);
}

.badge--nou,
.badge--popular {
  background: var(--c-plum);
  color: var(--c-on-dark);
}

.badge--reducere {                   /* REDUCERE */
  background: var(--c-crimson);
  color: var(--c-on-dark);
}

.badge--stoc-epuizat {
  background: var(--c-ink);
  color: var(--c-on-dark);
}

.badge--recomandat {
  padding: 6px 12px;
  background: var(--c-surface);
  border-color: var(--c-plum);
  color: var(--c-plum);
}

.badge--paletar {
  background: var(--c-surface-lilac);
  color: var(--c-plum);
}

.badge--ultimele {
  padding: 6px 12px;
  background: var(--c-surface);
  border-color: var(--c-line-icon);
  color: var(--c-ink-55);
  font-weight: var(--fw-semi);
}

.badge--in-stoc {
  background: var(--c-green);
  color: var(--c-on-dark);
}

.badge--gratuit {
  background: none;
  padding: 0;
  color: var(--c-green);
}

.badge--plata {                      /* CARD / TRANSFER / RAMBURS */
  padding: 9px 12px;
  background: var(--c-surface);
  color: var(--c-ink);
}

/* Badge ancorat in coltul imaginii. */
.badge--pe-card {
  position: absolute;
  top: 0;
  left: 0;
  padding: 6px 10px;
  z-index: 2;
}

/* Badge de cos — singura exceptie rotunda in afara portretelor. */
.badge-cos {
  position: absolute;
  top: 2px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--raza-cerc);
  background: var(--c-amber);
  color: var(--c-on-dark);
  font-size: var(--fs-9-5);
  font-weight: var(--fw-bold);
}

/* Card cu stoc epuizat: imaginea trece in tonuri de gri la 55% opacitate. */
.card-epuizat .efect-media > img,
.card-epuizat .efect-media__strat {
  filter: grayscale(1);
  opacity: .55;
}


/* ==========================================================================
   8. BREADCRUMB
   Prima linie de continut, sub header. Nu apare pe homepage, cos, checkout
   si 404. Ultimul element e textul curent, fara link.
   ========================================================================== */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-11-5);
  color: var(--c-ink-40);
}

.breadcrumb a {
  color: var(--c-ink-40);
}

.breadcrumb a:hover {
  color: var(--c-crimson);
}

.breadcrumb__separator {
  color: var(--c-ink-40);
}

.breadcrumb__curent {
  color: var(--c-ink-70);
}

/* Elipsa de trunchiere — ascunsa pe ecrane late. */
.breadcrumb__elipsa {
  display: none;
}

/* Sub 768px raman doar ultimele doua niveluri, precedate de "…". */
@media (max-width: 767px) {
  .breadcrumb__elipsa {
    display: inline;
  }

  .breadcrumb__nivel:not(.breadcrumb__nivel--primul):not(.breadcrumb__nivel--ultim),
  .breadcrumb__separator--ascuns {
    display: none;
  }
}


/* ==========================================================================
   9. PAGINARE
   Butoane patrate de 38px cu bordura rgba(0,0,0,.14). Pagina curenta are
   fundal plum si text alb. Sagetile de la capete sunt dezactivate la prima
   si la ultima pagina si au nume accesibile.

   Regula de generare (se aplica in PHP):
   - pana la 7 pagini: toate numerele;
   - peste: primele 2 … curenta +/-1 … ultimele 2.
   ========================================================================== */

.paginare {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.paginare__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--h-pag);
  height: var(--h-pag);
  padding: 0 10px;
  border: 1px solid var(--c-line-icon);
  border-radius: var(--raza-0);
  background: var(--c-surface);
  color: var(--c-ink-70);
  font-family: var(--f-corp);
  font-size: var(--fs-12-5);
  font-weight: var(--fw-semi);
  cursor: pointer;
  transition:
    background var(--t-stare) var(--ease),
    color var(--t-stare) var(--ease),
    border-color var(--t-stare) var(--ease);
}

.paginare__item:hover {
  border-color: var(--c-plum);
  color: var(--c-plum);
}

.paginare__item--curent,
.paginare__item[aria-current="page"] {
  background: var(--c-plum);
  border-color: var(--c-plum);
  color: var(--c-on-dark);
  cursor: default;
}

.paginare__item--curent:hover {
  color: var(--c-on-dark);
}

.paginare__sageata {
  width: var(--h-pag);
  min-width: var(--h-pag);
  padding: 0;
  color: var(--c-plum);
}

.paginare__sageata[aria-disabled="true"],
.paginare__sageata:disabled {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}

.paginare__elipsa {
  border-color: transparent;
  background: none;
  color: var(--c-ink-25);
  cursor: default;
  pointer-events: none;
}

/* Contorul de langa paginare / butonul "Incarca inca 24". */
.paginare__info {
  font-size: var(--fs-12-5);
  color: var(--c-ink-55);
}


/* ==========================================================================
   10. SKELETON DE INCARCARE
   Scheletul are exact geometria continutului real, ca sa nu sara pagina.
   Fara spinner pe grile — spinnerul e doar in butoane.
   ========================================================================== */

.skeleton-card {
  padding: var(--sp-5);
  border: var(--bd-rand);
  background: var(--c-surface);
}

.skeleton-bloc {
  background:
    linear-gradient(90deg, #F1ECE7 0%, #F8F5F1 50%, #F1ECE7 100%);
  background-size: 460px 100%;
  animation: cromatica-shimmer var(--t-shimmer) linear infinite;
}

.skeleton-bloc--imagine { aspect-ratio: 1 / 1; }
.skeleton-bloc--kicker  { height: 10px; width: 42%; margin-top: var(--sp-6); }
.skeleton-bloc--titlu   { height: 13px; width: 86%; margin-top: var(--sp-4); }
.skeleton-bloc--pret    { height: 13px; width: 34%; margin-top: var(--sp-5); }

@keyframes cromatica-shimmer {
  from { background-position: -460px 0; }
  to   { background-position: 460px 0; }
}


/* ==========================================================================
   11. ACORDEON (FAQ)
   Trei miscari simultane: bara de hover, plus -> minus, deschidere.
   Un singur item deschis la un moment dat (se controleaza din JS).
   ========================================================================== */

.acordeon {
  border-top: var(--bd-celula);
}

.acordeon__item {
  border-bottom: var(--bd-celula);
}

.acordeon__buton {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-11);
  width: 100%;
  padding: var(--sp-11) 0;
  border: 0;
  background: none;
  font-family: var(--f-corp);
  color: var(--c-ink);
  text-align: left;
  cursor: pointer;
  transition: color var(--t-lent) var(--ease);
}

.acordeon__buton:hover {
  color: var(--c-plum);
}

.acordeon__intrebare {
  font-size: var(--fs-16);
  font-weight: var(--fw-semi);
  line-height: var(--lh-nume);
}

/* 1. bara de hover — 3px, chihlimbar, scaleX(0 -> 1) in 480ms */
.acordeon__bara {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--atc-bara);
  background: var(--c-amber);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--t-bara-faq) var(--ease);
}

.acordeon__buton:hover .acordeon__bara,
.acordeon__buton:focus-visible .acordeon__bara {
  transform: scaleX(1);
}

/* 2. plus -> minus — doua linii de 22x1.4px in cruce */
.acordeon__semn {
  position: relative;
  flex: 0 0 22px;
  display: block;
  width: 22px;
  height: 22px;
}

.acordeon__semn::before,
.acordeon__semn::after {
  content: "";
  position: absolute;
  display: block;
  background: var(--c-plum);
}

.acordeon__semn::before {
  left: 0;
  top: 10.5px;
  width: 22px;
  height: 1.4px;
}

.acordeon__semn::after {
  left: 10.5px;
  top: 0;
  width: 1.4px;
  height: 22px;
  transform: scaleY(1);
  transition: transform var(--t-icon) var(--ease);
}

.acordeon__buton[aria-expanded="true"] .acordeon__semn::after {
  transform: scaleY(0);
}

/* 3. deschidere — max-height 0 -> 260px in 380ms, opacitate in 300ms */
.acordeon__raspuns {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height var(--t-acordeon) var(--ease),
    opacity var(--t-icon) ease;
}

.acordeon__item--deschis .acordeon__raspuns {
  max-height: 260px;
  opacity: 1;
}

.acordeon__raspuns p {
  margin: 0 0 var(--sp-12);
  max-width: var(--masura-faq);
  font-size: var(--fs-14-5);
  line-height: var(--lh-corp-larg);
  color: var(--c-ink-55);
}


/* ==========================================================================
   12. CARCASA: MODAL GENERIC
   Voal + caseta alba centrata. Se inchide cu Esc si cu click pe voal.
   Focusul ramane captiv cat e deschis si se intoarce pe declansator.
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-11);
}

/* FIX DE CLASĂ (D.3, găsit la construcția modalului paletar — primul modal RANDAT STATIC în
   pagină cu `hidden`, nu construit programatic din JS ca dialogurile de confirmare D.2):
   `.modal{ display:flex }` (specificitate 0-1-0, autor) câștigă cascada peste `[hidden]`
   (UA stylesheet, aceeași specificitate 0-1-0, dar originea „autor” bate „user-agent” la
   egalitate) — un `.modal` randat cu atributul HTML `hidden` tot apărea vizibil. Regulă
   lipsă, nu doar pe modalul paletar — orice viitor modal randat static (nu construit din JS)
   ar lovi aceeași breșă. */
.modal[hidden] {
  display: none;
}

.modal__voal {
  position: absolute;
  inset: 0;
  background: var(--c-veil-modal);
}

.modal__caseta {
  position: relative;
  width: var(--w-modal);
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  background: var(--c-surface);
  box-shadow: var(--umbra-modal);
  animation: cromatica-intra var(--t-fade) ease both;
}

.modal__caseta--larg {
  width: var(--w-modal-larg);
}

.modal__antet {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-9);
  padding: var(--sp-13) var(--sp-14) var(--sp-9);
  border-bottom: var(--bd-rand);
}

.modal__antet--fara-linie {
  border-bottom: 0;
  padding-bottom: 0;
}

.modal__titlu {
  font-family: var(--f-titlu);
  font-weight: var(--fw-titlu);
  font-size: var(--fs-h3);
  line-height: var(--lh-titlu-card);
  color: var(--c-ink);
}

.modal__corp {
  padding: var(--sp-8) var(--sp-14) var(--sp-12);
}

.modal__corp p {
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-13-5);
  line-height: var(--lh-corp-mediu);
  color: var(--c-ink-55);
}

.modal__actiuni {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--gap-chips);
  padding: 0 var(--sp-14) var(--sp-13);
}

.modal__inchide {
  flex: 0 0 auto;
  display: flex;
  padding: var(--sp-1);
  border: 0;
  background: none;
  color: var(--c-ink-40);
  cursor: pointer;
  transition: color var(--t-stare) var(--ease);
}

.modal__inchide:hover {
  color: var(--c-ink);
}


/* ==========================================================================
   13. CARCASA: TOAST
   Stanga-jos, deasupra pastilei de asistent. Dispare automat dupa 4200ms.
   Pozitia de repaus e fixa (bottom:100px); ridicarea peste banner-ul de
   cookie se face EXCLUSIV prin transform: translateY(), niciodata prin bottom.
   ========================================================================== */

.toast {
  position: fixed;
  left: 28px;
  bottom: 100px;
  z-index: var(--z-toast);
  max-width: calc(100vw - 56px);
  transform: translateY(0);
  transition: transform var(--t-lent) var(--ease);
  /* FIX 2 (2026-07-27): acest element NU mai ruleaza nicio animatie — transformul
     lui e proprietatea EXCLUSIVA a .se-ridica (translateY(var(--ridicare)), scrisa
     de assets/js/cookie-consent.js). Inainte, `animation: cromatica-intra ... both`
     era declarata chiar aici si, cu fill-mode "both", fixa PERMANENT transform:none
     dupa ce animatia se termina — o animatie activa/terminata-cu-fill-mode castiga
     in cascada peste orice regula normala de autor, deci suprascria .se-ridica si
     tinea toast-ul lipit de bottom:100px, sub bannerul de cookie (bug gasit la
     verificare: toast-ul nu se ridica niciodata deasupra bannerului). Cardul vizual
     (padding/border/fundal/umbra) + animatia de intrare traiesc acum pe .toast__intra
     (copil unic, vezi mai jos) — element separat, fara niciun rol in pozitionare sau
     ridicare, deci nu mai concureaza cu .se-ridica pe aceeasi proprietate transform. */
}

.toast__intra {
  display: flex;
  align-items: center;
  gap: var(--sp-7);
  padding: var(--sp-7) var(--sp-8);
  border: var(--bd-celula);
  border-left: 3px solid var(--toast-accent, var(--c-green));
  background: var(--c-surface);
  box-shadow: var(--umbra-toast);
  animation: cromatica-intra var(--t-toast) ease both;
}

.toast--succes    { --toast-accent: var(--c-green); }
.toast--informare { --toast-accent: var(--c-plum); }
.toast--eroare    { --toast-accent: var(--c-crimson); }

.toast__icon {
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--toast-accent);
  color: var(--c-on-dark);
}

.toast__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.toast__titlu {
  font-size: var(--fs-13-5);
  font-weight: var(--fw-semi);
  color: var(--c-ink);
}

.toast__detaliu {
  font-size: var(--fs-12-5);
  color: var(--c-ink-55);
}

.toast__actiune {
  flex: 0 0 auto;
  margin-left: var(--sp-4);
  font-size: var(--fs-10-5);
  letter-spacing: var(--ls-buton);
  font-weight: var(--fw-semi);
  color: var(--c-plum);
}

/* Ridicarea peste banner-ul de cookie. N se calculeaza in JS din inaltimea
   masurata a banner-ului (getBoundingClientRect), nu dintr-o constanta:
   element.style.setProperty('--ridicare', '-' + (bannerH - 4) + 'px'). */
.se-ridica {
  transform: translateY(var(--ridicare, 0));
  transition: transform var(--t-lent) var(--ease);
}


/* ==========================================================================
   14. CARCASA: SERTAR (drawer)
   Aluneca din dreapta. Se inchide cu Esc si cu click pe voal.
   ========================================================================== */

.sertar {
  position: fixed;
  inset: 0;
  z-index: var(--z-sertar);
  display: flex;
  justify-content: flex-end;
}

/* FIX DE CLASA (aceeasi bresa ca .modal[hidden], D.3 mai sus): .sertar{ display:flex }
   (specificitate autor 0-1-0) bate [hidden] (UA stylesheet, aceeasi specificitate dar
   origine mai slaba) — sertarul (cos SI favorite, aceeasi carcasa comuna) randat static
   in pagina cu atributul HTML hidden tot ramanea display:flex, iar .sertar__voal (opacity:0
   dar fara pointer-events:none) intercepta clickurile pe toata pagina cat timp sertarul era
   'inchis'. Gasit 2026-07-28, QA neprevazuta S13 (site-wide, blocheaza Adauga in cos). */
.sertar[hidden] {
  display: none;
}

.sertar__voal {
  position: absolute;
  inset: 0;
  background: var(--c-veil-sertar);
  opacity: 0;
  transition: opacity var(--t-intrare) var(--ease);
}

.sertar[data-deschis="true"] .sertar__voal {
  opacity: 1;
}

.sertar__panou {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--w-sertar);
  max-width: 88vw;
  height: 100%;
  background: var(--c-surface);
  box-shadow: var(--umbra-sertar);
  transform: translateX(100%);
  transition: transform var(--t-intrare) var(--ease);
}

.sertar[data-deschis="true"] .sertar__panou {
  transform: translateX(0);
}

/* Meniul mobil aluneca din stanga. */
.sertar--stanga {
  justify-content: flex-start;
}

.sertar--stanga .sertar__panou {
  width: 320px;
  box-shadow: 20px 0 60px rgba(0, 0, 0, .14);
  transform: translateX(-100%);
}

.sertar--stanga[data-deschis="true"] .sertar__panou {
  transform: translateX(0);
}

.sertar__antet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-13) var(--sp-13) var(--sp-9);
  border-bottom: 1px solid var(--c-line-softer);
}

.sertar__titlu {
  font-family: var(--f-titlu);
  font-weight: var(--fw-titlu);
  font-size: var(--fs-h4);
  color: var(--c-ink);
}

.sertar__corp {
  flex: 1;
  overflow: auto;
  padding: var(--sp-11) var(--sp-13);
}

.sertar__rand {
  display: flex;
  gap: var(--sp-7);
  padding: var(--sp-7) 0;
  border-bottom: 1px solid var(--c-line-faint);
}

.sertar__miniatura {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  overflow: hidden;
  background: var(--c-surface-sand-3);
}

/* Subsolul lipicios al sertarului. */
.sertar__subsol {
  padding: var(--sp-11) var(--sp-13) var(--sp-14);
  border-top: 1px solid var(--c-line-softer);
  background: var(--c-surface);
}


/* ==========================================================================
   15. ANIMATIA DE INTRARE COMUNA
   ========================================================================== */

@keyframes cromatica-intra {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}


/* ==========================================================================
   16. MISCARE REDUSA
   Nu se pierde nicio informatie: efectele care poarta sens (bara de hover,
   deschiderea de acordeon) raman, dar devin instantanee.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .skeleton-bloc {
    animation: none;
    background: var(--c-surface-sand);
  }

  .efect-media > img,
  .efect-media > span[role="img"],
  .efect-media__strat {
    transform: none;
  }
}

/* ==========================================================================
   FAZA D.1 — fereastra 2a: header / footer / share-bar / cookie (2026-07-26)
   Reguli NOI peste selectoarele EXISTENTE ale temei (.site-header, .tmd-mm__*,
   .header-actions, .icon-btn, .cart-count, .share-bar, .site-footer, .footer-*).
   Acest fisier se incarca la prioritate 40 (dupa toate bundle-urile de sablon),
   deci bate cele 8 blocuri :root duplicate + regulile vechi din base.css.
   Nu se creeaza markup dublat — se re-stilizeaza componenta reala existenta.
   ========================================================================== */

/* --- Logotip tipografic (header pe fundal deschis + footer pe fundal inchis) --- */
.cr-logo{ display:inline-flex; flex-direction:column; text-decoration:none; line-height:1; }
.cr-logo__word{ font-family:var(--font-display); font-weight:500; font-size:29px;
  letter-spacing:.22em; color:var(--color-primary); line-height:1; }
.cr-logo__sub{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.cr-logo__rule{ height:1px; width:24px; background:var(--color-accent); display:block; }
.cr-logo__label{ font-family:var(--font-body); font-size:9px; letter-spacing:.44em;
  font-weight:500; color:#8A7B84; }
/* Varianta pe fundal inchis (footer): logo alb, eticheta translucida, o singura liniuta. */
.cr-logo--footer .cr-logo__word{ font-size:24px; color:#FFFFFF; }
.cr-logo--footer .cr-logo__label{ color:rgba(255,255,255,.6); }
.cr-logo--footer .cr-logo__rule:last-child{ display:none; }
.cr-logo--footer.cr-logo--lean .cr-logo__word{ font-size:20px; }
/* Varianta compacta sub 1180px — fara ea, "CROMATICA" la 29px/.22em (~250px, un singur
   cuvant, nu se poate rupe pe linii) forta header-ul sa depaseasca orizontal viewportul
   pe telefon (bug gasit la render-verify 390-460px, corectat inainte de raport). */
@media (max-width:1179px){
  .cr-logo__word{ font-size:19px; letter-spacing:.12em; }
  .cr-logo__sub{ gap:5px; margin-top:3px; }
  .cr-logo__rule{ width:13px; }
  .cr-logo__label{ font-size:7px; letter-spacing:.3em; }
}

/* --- Bara de anunt (NOU) — dispare sub 1180px odata cu navigatia de categorii --- */
.tmd-announce{ background:#F1EDE7; color:#6E666A; font-size:12px; letter-spacing:.01em;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  height:44px; padding:0 max(24px,calc((100% - 1216px)/2)); overflow:hidden; }
.tmd-announce__links{ display:flex; gap:28px; }
.tmd-announce a{ color:#6E666A; text-decoration:none; transition:color 220ms ease; white-space:nowrap; }
.tmd-announce a:hover,
.tmd-announce a:focus-visible{ color:var(--color-primary); }
@media (max-width:1179px){ .tmd-announce{ display:none; } }

/* --- Header: fundal deschis (era inchis in H1/H2) + hairline la >8px scroll --- */
.site-header{ background:#FFFFFF; border-bottom:0; position:sticky; }
.header-inner{ position:relative; }
.site-header::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:rgba(0,0,0,.08); opacity:0; transition:opacity 250ms ease; pointer-events:none; }
.site-header.is-scrolled::after{ opacity:1; }

/* Text/iconite ale barei de nav pe fundalul acum DESCHIS (rescrie inversiunea H2 din base.css) */
.site-header .tmd-mm__logo .logo-mark,
.site-header .tmd-mm__logo .logo-mark b{ color:var(--color-primary); }
.site-header .tmd-mm__navlink,
.site-header .tmd-mm__trigger{ color:#231F20; }
.site-header .tmd-mm__navlink:hover,
.site-header .tmd-mm__trigger:hover,
.site-header .tmd-mm__navlink.is-current{ color:var(--color-primary); }
.site-header .tmd-mm__trigger::after,
.site-header .tmd-mm__trigger-underline{ background:var(--color-primary); }
.site-header .tmd-mm__indicator{ color:#231F20; }
.site-header .tmd-mm__navlink:focus-visible,
.site-header .tmd-mm__trigger:focus-visible,
.site-header .tmd-mm__toggle:focus-visible{ outline-color:var(--color-primary); }
.site-header .tmd-mm__toggle{ color:var(--color-primary); }

/* Utilitare (cautare + cont/favorite/cos) pe fundalul acum DESCHIS al barei — rescrie
   inversiunea H2 din base.css (care presupunea header inchis peste tot: text alb pe
   alb = invizibil, gasit la render-verify 390/800px, corectat inainte de raport). */
.site-header .icon-btn{ color:#231F20; }
.site-header .icon-btn:hover,
.site-header .icon-btn:focus-visible{ color:var(--color-primary); background:var(--color-tint,rgba(0,0,0,.06)); }
.site-header .header-search .icon{ color:#6E666A; }
.site-header .header-search input{ background:#FFFFFF; border-color:rgba(0,0,0,.16); color:#231F20; }
.site-header .header-search input::placeholder{ color:#9A9095; }
.site-header .header-search input:focus{ outline-color:var(--color-primary); border-color:var(--color-primary);
  background:#FFFFFF; }

/* Clusterul de actiuni (cont + favorite + cos) — bloc plum, cf. design (L74-88 din
   Cromatica Home.dc.html). Cautarea ramane un input real functional (suggest dropdown
   pe header-search.js), alaturata clusterului dar NU in interiorul aceleiasi cutii —
   compromis disclosed: pastreaza cautarea utilizabila fara sa rupa header-search.js.
   SCOPAT la >=1180px: sub acel prag, .header-actions e deja pozitionat absolut si
   dimensionat milimetric pentru 360-412px (base.css, comentariul "FIX mobil"), fara
   fundal propriu — icoanele raman inchise pe alb (regula de mai sus). Un fundal +
   padding suplimentar aici l-ar impinge in afara ecranului. */
@media (min-width:1180px){
  .site-header .header-actions{ background:var(--color-primary); border-radius:0;
    padding:8px 12px; gap:2px; }
  .site-header .header-actions .icon-btn{ color:#FFFFFF; border-radius:0; }
  .site-header .header-actions .icon-btn:hover,
  .site-header .header-actions .icon-btn:focus-visible{ color:var(--color-accent); background:transparent; }
}
.site-header .header-actions .cart-count{ background:var(--color-accent); color:#FFFFFF; }

/* --- Badge de cos: cerc 16px, cifra 9.5px/700 (exceptie permisa la regula "fara colturi rotunjite") --- */
.cart-count{ position:absolute; top:2px; right:0; min-width:16px; width:16px; height:16px; padding:0;
  background:var(--color-accent); color:#FFFFFF; border-radius:50%; font-size:9.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-body); line-height:1; }

/* --- Mega-panou: link-list + card promo separat (nu grila de carduri foto) ---
   Re-stilizare a panoului real .tmd-mm__panel (nu markup nou/fork) — vezi header.php:
   bucla foreach randeaza acum <a class="tmd-mm__linklist-item"> in loc de .tmd-mm__card. */
.tmd-mm__panel-inner--links{ display:grid; grid-template-columns:200px 1fr 260px; gap:var(--space-7); align-items:start; }
.tmd-mm__linklist{ list-style:none; margin:0; padding:0; column-count:2; column-gap:var(--space-6); }
.tmd-mm__linklist li{ break-inside:avoid; margin-bottom:var(--space-2); }
.tmd-mm__linklist-item{ display:inline-block; font-family:var(--font-body); font-size:14px;
  color:#231F20; transform-origin:left center; transition:transform 220ms cubic-bezier(.2,.7,.3,1), color 220ms ease; }
.tmd-mm__linklist-item:hover{ color:var(--color-primary-hover); font-weight:700; transform:scale(1.05); }
.tmd-mm__panel--links .tmd-mm__feature{ grid-column:3; }
@media (max-width:1179px){
  .tmd-mm__panel-inner--links{ grid-template-columns:1fr; gap:var(--space-4); }
  .tmd-mm__linklist{ column-count:1; }
  .tmd-mm__panel--links .tmd-mm__feature{ grid-column:auto; }
}

/* --- Footer: identitate + coloana de plata (grid-ul de 5 coloane exista deja in base.css) --- */
.footer-lean-inner{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4) var(--space-6);
  padding:var(--space-6) 0; }
.footer-lean-org{ font-size:var(--fs-small); color:#C6CBBC; }
.footer-lean-legal{ display:flex; flex-wrap:wrap; gap:var(--space-4); margin-left:auto; }
.footer-lean-legal a{ font-size:var(--fs-small); color:#D6DACF; text-decoration:none; }
.footer-lean-legal a:hover{ color:#fff; text-decoration:underline; }
.site-footer--lean .footer-compliance,
.site-footer--lean .footer-credit{ display:none; }

/* .footer-pay a ajuns acum ca a 5-a coloana de nav (footer-pay-col), copil al
   .footer-nav (display:contents) — bate regula generica ".footer-cols ul{flex-direction:column}"
   prin specificitate mai mare + incarcare ulterioara. */
.footer-cols .footer-pay{ flex-direction:row; flex-wrap:wrap; }
.footer-pay-col .pay-card{ width:auto; height:auto; padding:9px 12px; border-radius:0;
  box-shadow:none; text-transform:uppercase; letter-spacing:.1em; font-size:11px; font-weight:700; }
.footer-pay-note{ font-size:.72rem; line-height:1.7; color:#9DA294; margin:var(--space-3) 0 0; }

/* ==========================================================================
   FAZA D — REPARATIE QA D1 (2026-07-26): banda de navigatie a header-ului
   se rupea pe 2 randuri la 1440, iar "Contact" era desenat IN AFARA
   header-ului, peste imaginea de sub el.

   Masuratori pe randare reala, inainte de reparatie (1440px, /):
     .header-inner  = 1360px lat · .tmd-mm__nav = 619.5px disponibili
     randul 1 al nav-ului (6 iteme) = 581.3px · "Contact" ar fi cerut inca 93.8px
     -> total necesar 675.1px > 619.5px  => deficit 55.6px  => wrap pe randul 2
     .tmd-mm__bar-inner are inaltime FIXA (56px), deci randul 2 (top 90 -> bottom 134)
     iesea sub `header-inner` (care se termina la 120px) si se desena peste pagina.

   Cauza-radacina (fisierul de design, `Cromatica Home.dc.html`):
     - banda 1 (bara de anunt, 44px, #F1EDE7, L27-37) = linkurile UTILITARE:
       Cum comand · Despre noi · Servicii · Blog · Contact
     - banda 2 (header 120px, L40-92) = logotip + navigatie de CATALOG + cluster plum
     Implementarea comasase in banda 2 exact linkurile pe care designul le tine in banda 1
     (bara de anunt a fost adaugata in D.1, dar nav-ul vechi a ramas neschimbat) -> 7 iteme
     intr-o banda proiectata pentru navigatie de catalog.

   Aritmetica de control (masurata cu canvas, font-ul real incarcat, 14px):
     - designul insusi, la 1440: continut 1216px = logotip 229.2 + nav 745.6 (5 iteme,
       gap 38, weight 500, fara tracking) + cluster plum ~198  => 1172.8 din 1216.
       Banda e plina prin proiectare; nu are loc pentru iteme in plus.
     - cele 7 iteme ale noastre, CU valorile designului (weight 500, fara tracking, gap 38)
       = 650.2px > 619.5px disponibili. Deci nici la valorile corecte din design nu incap:
       problema e apartenenta itemelor la banda, nu spatierea.

   Reparatia (fara stergere de continut, fara prag nou):
     1. cele 5 dubluri se ascund DOAR >=1180px (unde bara de anunt le arata deja);
        sub 1180px bara de anunt dispare (regula designului) si acest <nav> devine
        panoul mobil — acolo raman TOATE, nu se pierde nimic.
     2. banda 2 primeste valorile reale din fisierul de design (gap 38px, weight 500,
        fara letter-spacing, fara padding pe link, o singura linie).
     3. plasa de siguranta: bara nu mai poate desena in afara header-ului.
   ========================================================================== */
@media (min-width:1180px){
  /* 1. De-duplicare banda 1 / banda 2 — vezi comentariul din header.php */
  .site-header .tmd-mm__nav .tmd-mm__navlink--utility{ display:none; }

  /* 2. Valorile benzii de navigatie, extrase din `Cromatica Home.dc.html:57-70`:
        nav {display:flex;align-items:center;gap:38px;font-size:14px;font-weight:500;color:#231F20}
        (linkurile NU au letter-spacing si NU au padding propriu — spatierea vine din gap).

        NOTA (curatenie 2026-07-26, la inchiderea pachetului D.1x): aici exista si
        `.site-header .tmd-mm__nav{ flex-wrap:nowrap; gap:38px; }`. Regula a fost STEARSA,
        fara schimbare de comportament: blocul "2.2 Distributia pe orizontala" de mai jos
        (acelasi `@media (min-width:1180px)`, acelasi selector, aceeasi specificitate, dar
        declarat MAI TARZIU in fisier => el castiga cascada) redeclara ambele proprietati —
        `flex-wrap:nowrap` identic, iar `gap` ca `clamp(18px, calc(18px + (100vw - 1180px) *
        0.2381), 38px)`, care da exact 38px de la 1264px in sus si coboara liniar la 18px la
        1180px. Declaratia de aici era deja moarta prin cascada; o pastram doar ca nota, ca sa
        nu para ca banda are doua valori de `gap` concurente. */
  .site-header .tmd-mm__navlink,
  .site-header .tmd-mm__trigger{ font-size:14px; font-weight:500; letter-spacing:normal; }
  .site-header .tmd-mm__navlink{ padding:0; }

  /* 3. Plasa de siguranta: `--mm-bar-h` era aplicat ca `height` FIX, deci orice continut
        mai inalt decat banda se desena in afara header-ului (exact defectul D1). Cu
        min-height, un eventual surplus creste header-ul — vizibil, dar niciodata peste
        continutul paginii. */
  .site-header .tmd-mm__bar-inner{ height:auto; min-height:var(--mm-bar-h); }
}

/* ==========================================================================
   FAZA D — REPARATIE QA D2 (2026-07-26): proportia benzii promo pe telefon.

   Partea 1 a defectului (invizibilitatea) era o SETARE de slider, nu CSS:
   Smart Slider 3, slider id=3, `mobileportrait=0` -> SS3 emitea
     @media (orientation:portrait) and (max-width:700px){
       .n2-section-smartslider[data-ssid="3"]{display:none} }
   deci banda avea inaltime 0 sub 700px. Rezolvat in DB (device-ul reactivat).

   Partea 2 — dupa reactivare, banda devine 1243px inalta la 390px, pentru ca SS3
   NU scaleaza textul stratului: titlul ramane la 72px/108px si se rupe in mijlocul
   cuvintelor ("PROGRAM/EAZA"). Este EXACT acelasi bug ca la hero, reparat deja in
   `assets/home.css:1330-1350` (Wave 3, C-M1/G-M1, 2026-07-17) prin clamp() sub 768px
   — banda promo nu primise tratamentul pentru ca era ascunsa pe telefon, deci nimeni
   nu o vazuse vreodata la latime de mobil.

   Aici se aplica acelasi tipar (clamp scopat sub 768px), NU o solutie noua.
   Referinta de marime: pachetul de design NU contine niciun ecran de mobil (toate
   cele 39 de capturi sunt 1880px latime) — s-a folosit REGULA din `docs/05-responsive.md`
   ("titlurile peste 40px devin greu de citit sub 480px; coboara-le cu ~25%", exemplu
   dat: H1 hero 78px -> 34px). 72px -> 32px la 390px se incadreaza in aceeasi scara.
   Peste 768px nimic nu se schimba (regula e in interiorul media query-ului).

   NOTA de intretinere: restul stilurilor `.promo-slider` stau in `assets/home.css`
   (1360-1415). Blocul asta e aici pentru ca `components.css` se incarca la prioritate
   40, DUPA home.css, si pentru ca reparatia a fost facuta in fereastra QA, fara sa
   fie nevoie de atins bundle-ul de 104 KB.
   ========================================================================== */
@media screen and (max-width:768px){
  /* Titlu (h2) — tintit si prin hash-ul de font SS3, si prin id-ul stabil de strat
     (n-uc-…), ca sa supravietuiasca regenerarii hash-ului. */
  .promo-slider .n2-font-4ed73be764c1521f63be393fcb05dc29-hover,
  .promo-slider .n-uc-v54iOrp7a2DN .n2-ss-text{
    font-size:clamp(26px, 8.2vw, 40px) !important;
    line-height:1.12 !important;
    overflow-wrap:break-word;
    word-break:normal;
  }
  /* Paragraf de sub titlu (187.5% = 30px in slide). */
  .promo-slider .n2-font-7869d3dcc0c84e48a058608b0d0bca6c-paragraph,
  .promo-slider .n-uc-URotpX3kkCGO .n2-ss-text{
    font-size:clamp(15px, 4.2vw, 18px) !important;
    line-height:1.55 !important;
  }
  /* CTA (168.75% = 27px in slide) — ramane peste 44px zona de atingere. */
  .promo-slider .n2-font-f394376486c7c86d7140f4e5fc31d746-link a,
  .promo-slider .n-uc-Uoqd9LTb2Tl6 .n2-ss-button-container a{
    font-size:clamp(14px, 3.8vw, 18px) !important;
    padding:12px 22px !important;
  }
  /* Straturile nu pot depasi latimea telefonului. */
  .promo-slider .n-uc-v54iOrp7a2DN,
  .promo-slider .n-uc-URotpX3kkCGO{ max-width:calc(100vw - 32px) !important; }
}

/* ==========================================================================
   FAZA D — REPARATIE DE FIDELITATE A HEADER-ULUI (2026-07-26)
   Doua abateri fata de `referinte/predare/design/Cromatica Home.dc.html`:

   ABATEREA 1 — inaltimea benzii 2.
     Design (L41): <div style="height:120px; display:flex; align-items:center;
       justify-content:space-between;
       padding-left:max(24px,calc((100% - 1216px)/2));
       padding-right:max(24px,calc((100% - 1216px)/2))">
     Implementare: `--header-h:72px` -> randat 76px (72 min-height + 2×4px
     padding din `.header-inner`). Valoarea 120px este IDENTICA in toate cele
     10 fisiere de design (verificat: `grep -c 'height:120px'` = 4 ocurente in
     fiecare fisier, aceeasi bara). Designul NU defineste alta inaltime sub
     1180px: ramura compacta (`sc-if isCompact`, L52) inlocuieste navigatia cu
     hamburgerul IN INTERIORUL aceluiasi rand de 120px — dar niciuna dintre
     cele 39 de capturi ale pachetului nu e la latime de telefon (toate la
     1880px), deci designul pur si simplu NU se pronunta despre mobil.
     DECIZIE PM (2026-07-26): 120px raman pe desktop, sub pragul compact
     (1180px) banda coboara. Vezi sectiunea 5.0 de mai jos pentru valoarea
     aleasa si masuratorile pe care se sprijina.

   ABATEREA 2 — navigatia de catalog.
     Design (L57-70): 5 intrari — [Tehnici decorative ▾] [Vopsele lavabile ▾]
     [Tencuieli decorative] [Accesorii & Ustensile] [Branduri]; primele doua cu
     mega-panou. Implementare: un singur declansator "Produse" + "Branduri".
     Markup-ul nou e in `header.php`; aici e stratul de stil.

   VALORI EXTRASE DIN DESIGN (toate din `Cromatica Home.dc.html`):
     banda 2         : height 120px, background #FFFFFF, position sticky, top 0
     gutter          : max(24px, calc((100% - 1216px)/2))  (identic cu banda 1)
     nav             : display:flex; align-items:center; gap:38px;
                       font-size:14px; font-weight:500; color:#231F20
     declansator     : display:flex; gap:7px; height:120px; hover color #5B2A55
     chevron         : svg 10×6, stroke-width 1.2
     cluster plum    : background #5B2A55; padding 8px 12px; gap 6px
     buton de icon   : padding 9px; icon 21×21; alb; hover #E88352
     badge cos       : 16×16, 50%, #E88352, 9.5px/700, top 2px right 0
     hairline        : height 1px; rgba(0,0,0,.08); opacity 0->1 in 250ms
     mega-panou      : position absolute; left/right 0; top 100%; #FFFFFF;
                       border-top 1px rgba(0,0,0,.06);
                       box-shadow 0 24px 48px rgba(0,0,0,.07)
     panou interior  : display:flex; gap:64px; padding:48px <gutter>
     coloana         : flex 0 0 240px; eyebrow 11px/.16em/#E88352/600, mb 20px;
                       linkuri 14px #231F20, gap 12px, hover #B01E4B + 700 +
                       scale(1.07), transform-origin left center,
                       transition transform 220ms cubic-bezier(.2,.7,.3,1)
     card promo      : 240px lat; media 240×150 pe #EFE9E3; img hover scale(1.06)
                       in 900ms; titlu 13.5px/500 mt 12px; subtitlu 12px #6E666A mt 4px
     zona de promo   : flex 1; display:flex; gap:24px; justify-content:flex-end

   ARITMETICA DE INCADRARE (masurata in browser real, font incarcat, 14px/500,
   re-masurata 2026-07-26 dupa decizia PM de a folosi eticheta scurta):
     latime de continut  = min(100vw - 48px, 1216px)
     logotip             = 229.2px  (identic cu designul)
     cluster plum        = 198px    (12+4×39+3×6+12, exact ca designul)
     -> disponibil pentru nav = 1216 - 229.2 - 198 = 788.8px la >=1264px
                              = 1132 - 229.2 - 198 = 704.8px la 1180px
     etichete AFISATE (cele din design; numele Woo al categoriei ramane neatins
     in baza de date — se schimba doar textul linkului, vezi header.php):
       Tehnici decorative 121.8 · Vopsele lavabile 108.3 · Tencuieli decorative
       133.7 · Accesorii & Ustensile 139.3 · Branduri 56.5 = 559.6
       + 2 chevroane (7px gap + 10px glif) = 593.6
     (eticheta lunga "Accesorii, scule si ustensile" masoara 179.7 => trecerea la
      eticheta din design elibereaza exact 40.4px)
     cu gap 38px (designul) -> 593.6 + 4×38 = 745.6
       la >=1264px : 788.8 - 745.6 = 43.2 libere => 21.6px de fiecare parte,
                     EXACT proportia designului. Deci 38px e reproductibil 1:1.
       la 1180px   : 704.8 - 745.6 = -40.8 => NU incape (depasire de 40.8px).
     Pragul aritmetic pentru gap 38 fix: 745.6 + 229.2 + 198 + 48 = 1220.8px.
     Intre 1180 si ~1221 designul nu are raspuns (nu are breakpoint acolo), deci
     gap-ul ramane `clamp(...)`, dar cu PLAFONUL la valoarea exacta a designului,
     38px, atins la 1264px (unde containerul se plafoneaza la 1216) si cu podea
     18px la 1180px. Golurile laterale rezultate raman 19.5-21.6px pe tot
     intervalul 1180 -> 1264, adica proportia designului se pastreaza si in
     banda in care designul tace. 1440 si 1280 sunt ambele >=1264 => gap 38 exact.

   CE NU S-A ATINS: `single-product.php`, `functions.php`, `assets/pdp.css`
   (lucreaza alt agent in paralel). `--header-h` e citit de 12 reguli din 9
   fisiere CSS; toate consuma variabila, deci se recalculeaza singure — vezi
   inventarul din raport.
   ========================================================================== */

/* --- 1. Tokenul de inaltime -----------------------------------------------
   `--header-h` e declarat 72px in 10 blocuri `:root` (base.css + cele 8
   bundle-uri de sablon + plugin-ul mort tmd-mega-navigation). components.css
   se incarca ULTIMUL (prioritate 40, dependenta `cromatica-bridge`), deci la
   specificitate identica declaratia de aici castiga pe toate rutele.
   Consumatorii care se recalculeaza automat: `.header-inner{min-height}`,
   `--mm-bar-h`, `.s1-side`/`.portrait-ad` (pdp), `.summary` (cart/checkout),
   `.faq-nav`+`.faq-group`, `.legal-aside`+`.legal-section`, `.toc` (blog),
   `.calc-page .result-col`. Niciun consumator in JS (verificat). */
:root{ --header-h:120px; }

/* `--mm-bar-h` era `calc(var(--header-h) - 16px)` = 104px: bara interioara
   ramanea mai scurta decat banda, iar sub 1180px `.header-actions` (absolut,
   `height:var(--mm-bar-h)`) s-ar fi centrat pe 104px in loc de 120px.
   Declarat aici pe acelasi selector `.tmd-mm`, dar mai tarziu in cascada. */
.tmd-mm{ --mm-bar-h:var(--header-h); }

/* Banda 2 = exact 120px, fara padding vertical (base.css punea 2×var(--space-2)
   peste min-height, de unde cei 76px randati in loc de 72px). */
.site-header .header-inner{ min-height:var(--header-h); padding-top:0; padding-bottom:0; }
.site-header .tmd-mm__bar-inner{ min-height:var(--header-h); }

/* --- 2. Desktop (>=1180px) — banda de catalog cf. design ------------------ */
@media (min-width:1180px){

  /* 2.1 Gutterul designului, identic cu al barei de anunt de deasupra: fara el
     banda 1 se aliniaza la 1216px iar banda 2 la 1360px (`.wrap`), deci
     marginea din dreapta a linkurilor utilitare si cea a clusterului plum
     erau decalate cu 72px la 1440. Sub 1180px ramane `.wrap`, ca headerul sa
     stea aliniat cu restul continutului paginii pe telefon. */
  .site-header .header-inner{ width:100%; max-width:none; margin:0;
    padding-left:max(24px,calc((100% - 1216px)/2));
    padding-right:max(24px,calc((100% - 1216px)/2));
    gap:0; align-items:center; }

  /* 2.2 Distributia pe orizontala. Designul are `justify-content:space-between`
     pe trei copii (logotip / nav / cluster). La noi logotipul si nav-ul sunt
     ambele in `.tmd-mm`, deci space-between ar da un singur gol. Marginile
     `auto` pe nav impart spatiul liber EXACT in doua, ca in design. */
  .site-header .tmd-mm{ flex:1 1 auto; min-width:0; }
  .site-header .tmd-mm__bar,
  .site-header .tmd-mm__bar-inner{ width:100%; }
  .site-header .tmd-mm__bar-inner{ gap:0; height:auto; align-items:center; }
  /* gap 38px = valoarea EXACTA din design (`Cromatica Home.dc.html`, L58),
     atinsa de la 1264px in sus (unde containerul se plafoneaza la 1216 si
     golurile laterale ies 21.6px, ca in design). Sub 1264 latimea de continut
     scade cu viewportul, iar la 1180 gap 38 ar depasi cu 40.8px — asa ca
     valoarea coboara liniar pana la 18px la 1180 (panta 20/84 = 0.2381).
     Vezi ARITMETICA DE INCADRARE in antetul blocului. */
  .site-header .tmd-mm__nav{ flex:0 0 auto; margin-left:auto; margin-right:auto;
    flex-wrap:nowrap; white-space:nowrap;
    gap:clamp(18px, calc(18px + (100vw - 1180px) * 0.2381), 38px); }

  /* 2.3 Tipografia benzii (design: 14px / 500 / fara tracking / fara padding). */
  .site-header .tmd-mm__navlink,
  .site-header .tmd-mm__trigger{ font-family:var(--font-body); font-size:14px; font-weight:500;
    letter-spacing:normal; color:#231F20; padding:0; white-space:nowrap; }
  .site-header .tmd-mm__navlink:hover,
  .site-header .tmd-mm__trigger:hover{ color:var(--color-primary); }
  .site-header .tmd-mm__navlink.is-current,
  .site-header .tmd-mm__trigger.is-current{ color:var(--color-primary); }

  /* 2.4 Declansatorul ocupa toata inaltimea benzii (design: `height:120px` pe
     div-ul cu onMouseEnter) — asa cursorul nu pierde panoul cand coboara. */
  .site-header .tmd-mm__triggerwrap{ position:static; order:0; display:flex; align-items:center; }
  .site-header .tmd-mm__trigger{ gap:7px; height:var(--header-h); min-height:0; align-items:center; }
  .site-header .tmd-mm__indicator .icon{ width:10px; height:10px; }

  /* Chevronul: `is-open` sta pe RADACINA (`.tmd-mm`), deci regulile din
     base.css:394-396 inversau chevronul pe AMBELE intrari cand JS-ul deschidea
     una singura (defect vazut la verificarea vizuala, captura
     `mega-tehnici-1440.png`, prima iteratie). Il decuplam de radacina si il
     legam de invelisul declansatorului efectiv parcurs cu mausul/tastatura. */
  .site-header .tmd-mm.is-open .tmd-mm__indicator-closed{ display:inline-flex; }
  .site-header .tmd-mm.is-open .tmd-mm__indicator-open{ display:none; }
  .site-header .tmd-mm__triggerwrap--cat:hover .tmd-mm__indicator-closed,
  .site-header .tmd-mm__triggerwrap--cat:focus-within .tmd-mm__indicator-closed{ display:none; }
  .site-header .tmd-mm__triggerwrap--cat:hover .tmd-mm__indicator-open,
  .site-header .tmd-mm__triggerwrap--cat:focus-within .tmd-mm__indicator-open{ display:inline-flex; }

  /* 2.5 Linkurile utilitare (Cum comand / Despre noi / Servicii / Blog /
     Contact) apar EXCLUSIV in banda 1; in banda 2 raman in DOM pentru panoul
     mobil de sub 1180px. (Regula exista din reparatia QA D1; reafirmata aici
     ca sa stea langa restul benzii.) */
  .site-header .tmd-mm__nav .tmd-mm__navlink--utility{ display:none; }

  /* 2.6 Cautarea: designul nu are camp in banda 2, ci o lupa in cutia plum care
     deschide un overlay (pachetul D.2). Campul ramane in DOM si complet
     functional sub 1180px NU — acolo base.css:701 il ascundea deja. Practic
     campul era desktop-only; aici devine icoana, iar cautarea devine accesibila
     si pe telefon (icoana din cluster).
     !! SINGURA SCHIMBARE DE COMPORTAMENT DIN ACEST PACHET. Revenire = stergerea
     acestei reguli (o linie) — dar atunci cele 5 intrari de catalog nu mai
     incap in banda (campul ocupa 295-360px din cei 788.8 disponibili). */
  .site-header .header-search{ display:none; }

  /* 2.7 Clusterul plum, exact ca in design: 4 butoane de 39px (21px glif +
     2×9px padding), gap 6px, padding 8px 12px => 198px lat, 55px inalt.
     Sub 1180px se pastreaza 44px zona de atingere (regula de mai jos). */
  .site-header .header-actions{ background:var(--color-primary); border-radius:0;
    padding:8px 12px; gap:6px; margin-left:0; flex:0 0 auto; }
  .site-header .header-actions .icon-btn{ width:39px; height:39px; min-height:0;
    padding:9px; border-radius:0; color:#FFFFFF; }
  .site-header .header-actions .icon-btn .icon{ width:21px; height:21px; }
  .site-header .header-actions .icon-btn:hover,
  .site-header .header-actions .icon-btn:focus-visible{ color:var(--color-accent); background:transparent; }
  .site-header .header-actions .icon-btn:focus-visible{ outline:2px solid var(--color-accent); outline-offset:-2px; }

  /* --- 3. Mega-panourile (doua, ambele pe hover/focus) --------------------
     JS-ul temei (`[data-mm]` in base.js/home.js/plp.js/... — 8 copii) suporta
     UN singur trigger + UN singur panou pe radacina si comuta clasa `is-open`
     pe RADACINA. Cu doua panouri, `is-open` le-ar deschide pe amandoua
     simultan. Solutia care NU cere atingerea celor 8 fisiere JS: pe desktop
     panourile sunt conduse din CSS (`:hover` / `:focus-within` pe invelisul
     declansatorului — exact mecanismul designului, `onMouseEnter`/`onMouseLeave`),
     iar efectul vizual al lui `is-open` este neutralizat. JS-ul ramane
     neschimbat si continua sa deserveasca hamburgerul si panoul mobil. */
  .site-header .tmd-mm.is-open .tmd-mm__panel{ opacity:0; visibility:hidden;
    transform:translateY(-8px); }
  .site-header .tmd-mm__triggerwrap--cat:hover > .tmd-mm__panel,
  .site-header .tmd-mm__triggerwrap--cat:focus-within > .tmd-mm__panel{ opacity:1; visibility:visible;
    transform:translateY(0); transition:opacity var(--mm-dur,240ms) var(--mm-ease,cubic-bezier(.4,0,.2,1)),
      transform var(--mm-dur,240ms) var(--mm-ease,cubic-bezier(.4,0,.2,1)); }

  .site-header .tmd-mm__panel--cat{ background:#FFFFFF; border-top:1px solid rgba(0,0,0,.06);
    border-bottom:0; box-shadow:0 24px 48px rgba(0,0,0,.07); }
  /* Specificitate (0,2,0), declarata mai tarziu decat
     `.tmd-mm--images .tmd-mm__panel-inner{display:grid}` (base.css:422, tot
     (0,2,0)) — altfel panoul ar ramane grila de 2 coloane a vechiului layout. */
  .site-header .tmd-mm__panel-inner--cat{ display:flex; gap:64px; align-items:flex-start;
    max-width:none; width:100%; margin:0;
    padding:48px max(24px,calc((100% - 1216px)/2)); }
}

/* Designul NU are nici punct de accent, nici subliniere sub declansator — nici
   pe desktop, nici in meniul mobil (unde randurile au doar o linie fina jos).
   Regula e in AFARA oricarui media query: pe mobil ambele se vedeau ca o linie
   plum groasa + un punct rosu la capatul randului (vazut la randare, 390px). */
.site-header .tmd-mm__trigger::after,
.site-header .tmd-mm__trigger-underline{ display:none; }

/* --- 4. Continutul panourilor (comun desktop + acordeon mobil) ------------- */
.tmd-mm__col{ flex:0 0 240px; min-width:0; }
.tmd-mm__panel--cat .tmd-mm__eyebrow{ font-family:var(--font-body); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--color-accent); margin-bottom:20px; }
.tmd-mm__collist{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.tmd-mm__collink{ display:inline-block; font-family:var(--font-body); font-size:14px;
  font-weight:400; color:#231F20; text-decoration:none; transform-origin:left center;
  transition:transform 220ms cubic-bezier(.2,.7,.3,1), color 220ms ease; }
.tmd-mm__collink:hover,
.tmd-mm__collink:focus-visible{ color:var(--color-primary-hover); font-weight:700; transform:scale(1.07); }
.tmd-mm__collink:focus-visible{ outline:2px solid var(--color-accent); outline-offset:3px; }

.tmd-mm__promos{ flex:1 1 auto; display:flex; gap:24px; justify-content:flex-end; min-width:0; }
.tmd-mm__promo{ display:block; width:240px; text-decoration:none; }
.tmd-mm__promo-media{ display:block; width:240px; height:150px; overflow:hidden;
  background:var(--c-surface-sand-2,#EFE9E3); }
.tmd-mm__promo-media img{ width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1); transition:transform 900ms ease; }
.tmd-mm__promo:hover .tmd-mm__promo-media img,
.tmd-mm__promo:focus-visible .tmd-mm__promo-media img{ transform:scale(1.06); }
.tmd-mm__promo-title{ display:block; font-family:var(--font-body); font-size:13.5px;
  font-weight:500; color:#231F20; margin-top:12px; }
.tmd-mm__promo-sub{ display:block; font-family:var(--font-body); font-size:12px;
  color:var(--c-ink-55,#6E666A); margin-top:4px; }
.tmd-mm__promo:focus-visible{ outline:2px solid var(--color-accent); outline-offset:3px; }
/* Card de INSTRUMENT (calculator, paletar): nu are fotografie proprie, deci
   media devine o placa plum cu glif alb, in loc de o poza fara legatura. */
.tmd-mm__promo--tool .tmd-mm__promo-media{ background:var(--color-primary);
  display:flex; align-items:center; justify-content:center; }
.tmd-mm__promo--tool .tmd-mm__promo-media .icon{ width:42px; height:42px; color:#FFFFFF;
  transition:color 220ms ease, transform 400ms ease; }
.tmd-mm__promo--tool:hover .tmd-mm__promo-media .icon,
.tmd-mm__promo--tool:focus-visible .tmd-mm__promo-media .icon{ color:var(--color-accent); transform:scale(1.08); }
@media (prefers-reduced-motion: reduce){
  .tmd-mm__promo--tool:hover .tmd-mm__promo-media .icon{ transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .tmd-mm__collink:hover,
  .tmd-mm__collink:focus-visible{ transform:none; }
  .tmd-mm__promo:hover .tmd-mm__promo-media img{ transform:none; }
  .tmd-mm__promo-media img{ transition:none; }
}

/* --- 5. Sub 1180px — banda compacta + panoul mobil ------------------------ */
@media (max-width:1179px){

  /* 5.0 INALTIMEA BENZII PE TELEFON / TABLETA (decizie PM, 2026-07-26).
     Cei 120px ai designului sunt corecti pe desktop, unde banda tine un cluster
     plum de 55px si o navigatie pe toata latimea. Sub pragul compact banda tine
     DOAR logotip + hamburger + 4 icoane, iar 120px lasa 38px de gol
     deasupra si dedesubtul controalelor — pe un ecran de 844px inaltime asta
     inseamna 14% din viewport cheltuit pe nimic.

     VALOAREA E MASURATA, nu aleasa din ochi (Chrome CDP, pagina reala, font
     incarcat, cache de browser dezactivat):
       logotip <a>       = 29px   (1024/768px)  ·  26.5px (<=430px, comprimat)
       hamburger         = 44px   (= --touch-min, zona de atingere)
       icoana din cluster= 44px   (= --touch-min, zona de atingere)
       -> continutul cel mai INALT al benzii compacte = 44px, si e un prag de
          accesibilitate care NU se negociaza.
     76px = 44px (controale) + 2 × 16px, unde 16px este exact `--space-4` din
     scara de spatiere a temei — deci respiratia e exprimata in unitatea
     sistemului, nu intr-un numar inventat. 72px ar da 14px (valoare care nu
     exista in scara, intre --space-3=12 si --space-4=16) si ar aduce bulina
     portocalie a cosului la 16px de muchia benzii; 80px ar da 18px (iar in
     afara scarii) si 5% inaltime in plus fara castig vizibil.
     Toti consumatorii lui `--header-h` (`.header-inner`, `--mm-bar-h`,
     `.header-actions`, `.faq-nav`/`.faq-group`, `.legal-aside`/`.legal-section`,
     `.s1-side`/`.portrait-ad`, `.summary` cos/checkout, cuprins blog,
     `.calc-page .result-col`) citesc variabila, deci se recalculeaza singuri;
     zero consumatori in JS (verificat prin grep pe assets/*.js). */
  :root{ --header-h:76px; }

  /* 5.0.bis Zona de atingere a logotipului. Verificarea de zone de atingere pe
     banda compacta a gasit un singur element sub 44px: linkul `.cr-logo`, inalt
     de 29px (26.5px sub 430px), pentru ca inaltimea lui e INTRINSECA (doua
     randuri de text), nu legata de `--header-h`. Nu e o regresie a coborarii
     benzii — era la fel si la 120px — dar e linkul catre pagina principala pe
     telefon, deci il aducem la prag. Cutia creste la 44px, cerneala ramane
     centrata si vizual identica (`justify-content:center` pe coloana). */
  .site-header .cr-logo{ min-height:var(--touch-min); justify-content:center; }

  /* 5.1 Rezervarea de spatiu pentru clusterul (absolut) sus-dreapta.
     base.css:733 o punea ca `padding-right` pe `.tmd-mm__bar-inner`. Nu mai
     merge: panourile mega sunt acum in interiorul lui `.tmd-mm__nav` (copii ai
     invelisului de declansator), deci acel padding le strangea si pe ELE — la
     390px panoul ajungea lat de 186px in loc de ~354px (masurat la verificarea
     vizuala). Mutam rezervarea pe hamburger, ca `margin-right`: tine spatiul
     doar pe PRIMUL rand (logotip + hamburger), iar randul 2 (nav + panouri)
     ramane pe toata latimea. */
  .tmd-mm__bar-inner{ padding-right:0; }
  .tmd-mm__toggle{ margin-right:calc(4 * 40px + var(--space-2)); }

  /* base.css:720/727 scrie `.header-actions{ height:var(--mm-bar-h) }`, dar
     `--mm-bar-h` e declarat pe `.tmd-mm`, iar `.header-actions` e FRATELE lui,
     nu descendent — variabila nu e in domeniu, `height` cade pe `auto` (44px)
     si clusterul se lipeste de marginea de SUS a benzii. Cu banda la 76px
     decalajul trecea neobservat; la 120px sare in ochi (vazut la randare, 390px
     si 1024px). Folosim direct `--header-h`, care e pe `:root`. */
  .site-header .header-actions{ height:var(--header-h); }
  /* Zona de atingere ramane 44px pe verticala (latime 40px = control secundar
     dens, cf. design-system §6.bis.1), asa cum era deja pentru cele 3 icoane. */
  .site-header .header-actions .icon-btn{ width:40px; height:var(--touch-min); }

  /* Panourile sunt acum copii ai invelisului de declansator (nu frati ai barei),
     deci in acordeon curg imediat sub intrarea careia ii apartin. */
  .tmd-mm.is-open .tmd-mm__nav .tmd-mm__triggerwrap{ width:100%; display:block; }
  .tmd-mm.is-open .tmd-mm__nav .tmd-mm__triggerwrap .tmd-mm__trigger{ width:100%;
    justify-content:space-between; }
  /* Aceeasi nota de specificitate ca la desktop: (0,2,0) ca sa bata
     `.tmd-mm--images .tmd-mm__panel-inner`. */
  /* `align-items:stretch` e OBLIGATORIU aici: base.css:422
     (`.tmd-mm--images .tmd-mm__panel-inner`) declara `align-items:start`, care
     supravietuia si pe mobil si stramta coloanele la latimea continutului —
     `.tmd-mm__col` iesea de 89px la 390px, textul debordand din cutie si
     liniile de separare oprindu-se la jumatate de rand (verificat: computed
     `align-items=start`, `col w=89`). */
  .site-header .tmd-mm__panel-inner--cat{ display:flex; flex-direction:column; gap:var(--space-5);
    align-items:stretch; max-width:100%; width:100%; margin:0;
    padding:var(--space-4) 0 var(--space-5); }
  .tmd-mm__col{ flex:1 1 auto; }
  .tmd-mm__panel--cat .tmd-mm__eyebrow{ margin-bottom:12px; }
  /* `align-items:stretch`: fara el, `.tmd-mm__collist{align-items:flex-start}`
     (regula de desktop) stramta randurile la latimea textului, iar liniile de
     separare se opreau la jumatate de rand (vazut la randare, 390px). */
  .tmd-mm__collist{ gap:2px; align-items:stretch; }
  .tmd-mm__collink{ min-height:var(--touch-min); display:flex; align-items:center; width:100%; }
  /* 5.2 Cardurile promo devin randuri de text in panoul mobil.
     Motiv masurat: cu media de 132-150px, panoul mobil deschis ajungea la
     2193px inaltime la 390px latime (verificat la randare). Meniul mobil al
     designului (`Cromatica Home.dc.html:92-104`) nu contine deloc carduri
     promo — doar linkuri. Ascundem media, NU linkul: „Vezi toate ..." ramane
     singura cale catre pagina de categorie din meniul mobil (eticheta din bara
     e un buton care deschide panoul, nu un link — la fel ca in design). */
  .tmd-mm__promos{ flex-direction:column; justify-content:flex-start; gap:2px; min-width:0; }
  .tmd-mm__promo{ width:100%; max-width:none; min-height:var(--touch-min);
    display:flex; flex-direction:column; justify-content:center; align-self:stretch; }
  /* (0,2,0) — trebuie sa bata `.tmd-mm__promo--tool .tmd-mm__promo-media`
     (placa plum a cardului de instrument), care e tot (0,2,0). O regula
     `.tmd-mm__promo-media{display:none}` simpla, (0,1,0), PIERDE — placa plum
     ramanea vizibila in meniul mobil (vazut la randare, 390px). */
  .tmd-mm__promo .tmd-mm__promo-media,
  .tmd-mm__promo--tool .tmd-mm__promo-media{ display:none; }
  .tmd-mm__promo-title{ margin-top:0; font-size:14px; }
  .tmd-mm__promo-sub{ margin-top:2px; }

  /* 5.2.bis Randurile meniului mobil, cf. `Cromatica Home.dc.html:92-104`:
     16px/500, `padding:14px 0`, linie fina jos `rgba(0,0,0,.05)`, hover crimson.
     (Designul nu are padding orizontal pe randuri — base.css punea var(--space-3).) */
  .site-header .tmd-mm__nav .tmd-mm__navlink,
  .site-header .tmd-mm__nav .tmd-mm__trigger{ font-size:16px; font-weight:500; color:#231F20;
    letter-spacing:normal; padding:14px 0; min-height:var(--touch-min);
    border-bottom:1px solid rgba(0,0,0,.05); }
  .site-header .tmd-mm__nav .tmd-mm__navlink:hover,
  .site-header .tmd-mm__nav .tmd-mm__trigger:hover{ color:var(--color-primary-hover); }
  .tmd-mm__collink{ border-bottom:1px solid rgba(0,0,0,.05); }
  .tmd-mm__promo{ border-bottom:1px solid rgba(0,0,0,.05); }
}

/* 5.3 Telefoane inguste: cu a patra icoana, randul de sus (logotip 133px +
   hamburger 44px + rezervarea de 168px) depasea latimea utila sub ~385px si
   hamburgerul cadea pe randul doi, sub logotip (verificat la 390px). Sub 430px
   comprimam icoanele si logotipul cat sa incapa tot pe un rand. */
@media (max-width:430px){
  .site-header .header-actions{ gap:0; }
  .site-header .header-actions .icon-btn{ width:36px; }
  .tmd-mm__toggle{ margin-right:calc(4 * 36px + var(--space-2)); }
  .cr-logo__word{ font-size:17px; letter-spacing:.10em; }
  .cr-logo__rule{ width:11px; }
  .cr-logo__label{ font-size:6.5px; letter-spacing:.26em; }
}

/* ==========================================================================
   FAZA D.2 — sertar coș / sertar favorite: conținutul rândului, starea goală,
   nota de transport gratuit. Carcasa (.sertar / .sertar__panou / __antet /
   __corp / __rand / __miniatura / __subsol) e deja scrisă mai sus (secțiunea
   14, D.1) — aici adaug DOAR ce lipsea ca să fie randabil cu conținut real
   (nimeni nu verificase vizual §14 până acum — D.1 nu deschidea niciun sertar).
   ========================================================================== */

.sertar__antet-titlu-grup { display: flex; align-items: baseline; gap: var(--sp-4); }

.sertar__numar {
  font-size: var(--fs-12-5);
  color: var(--c-ink-40);
}

.sertar__rand-corp {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.sertar__rand-nume {
  font-size: var(--fs-13-5);
  font-weight: var(--fw-semi);
  color: var(--c-ink);
  line-height: var(--lh-nume);
}

.sertar__rand-meta { font-size: var(--fs-12); color: var(--c-ink-55); }

.sertar__rand-pret {
  flex: 0 0 auto;
  font-size: var(--fs-13-5);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  align-self: flex-start;
}

.sertar__rand-actiune-cta {
  flex: 0 0 auto;
  align-self: flex-start;
  height: var(--h-buton-s);
  padding: 0 var(--sp-6);
  background: none;
  border: 1px solid var(--c-plum);
  color: var(--c-plum);
  cursor: pointer;
  font-family: var(--f-corp);
  font-size: var(--fs-10-5);
  letter-spacing: var(--ls-buton);
  font-weight: var(--fw-semi);
  transition: background var(--t-stare) var(--ease), color var(--t-stare) var(--ease);
}

.sertar__rand-actiune-cta:hover { background: var(--c-plum); color: var(--c-on-dark); }

/* Buton de ștergere per rând — NU e in fisierul de design (randul din
   Cromatica Home.dc.html:1107-1118 nu are niciun control), dar docs/03-
   componente.md il cere explicit ("buton de stergere") si un sertar de cos
   fara nicio cale sa scoti un produs e un gol functional real pe un magazin
   care chiar proceseaza comenzi. Decizie tehnica proprie (WORKING-MODEL.md
   §1 — nu scop/directie, ci implementare), semnalata in raport. */
.sertar__rand-sterge {
  flex: 0 0 auto;
  align-self: flex-start;
  background: none;
  border: 0;
  padding: var(--sp-1);
  color: var(--c-ink-40);
  cursor: pointer;
  transition: color var(--t-stare) var(--ease);
}

.sertar__rand-sterge:hover { color: var(--c-crimson); }

/* Sub 480px (prag din tokens.css §15) sertarul insusi e ~88vw ingust (≈343px la
   390px viewport) — thumb 64px + pret cu latime fixa ("de la 23,00 lei/kg") nu
   mai lasa loc numelui produsului, care se rupe literă-cu-literă (gasit la
   render-verify, 390px). Pretul coboara pe randul lui, sub nume/meta/CTA. */
@media (max-width: 480px) {
  .sertar__rand {
    flex-wrap: wrap;
  }

  .sertar__rand-pret {
    flex: 1 0 100%;
    order: 3;
    margin-top: var(--sp-2);
  }

  .sertar__rand-sterge {
    order: 2;
  }
}

/* --- stare goală ---------------------------------------------------------- */
.sertar__gol {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-8);
  padding: var(--sp-20) var(--sp-11);
}

.sertar__gol-ilustratie { color: var(--c-line-icon); }

.sertar__gol-text {
  font-family: var(--f-titlu);
  font-size: var(--fs-h4);
  color: var(--c-ink-70);
}

/* --- nota de transport gratuit --------------------------------------------
   Prag 500 lei — text din designul aprobat (Cromatica Home.dc.html /
   docs/03-componente.md), calculat dinamic din subtotalul REAL al coșului. */
.sertar__transport {
  padding: var(--sp-7) var(--sp-13) 0;
  font-size: var(--fs-12-5);
  color: var(--c-ink-70);
}

.sertar__transport strong { color: var(--c-green); }

.sertar__transport-bara {
  margin-top: var(--sp-3);
  height: 3px;
  background: var(--c-line-faint);
  overflow: hidden;
}

.sertar__transport-bara > span {
  display: block;
  height: 100%;
  background: var(--c-green);
  transition: width var(--t-lent) var(--ease);
}

.sertar__subtotal-rand {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-14);
  font-weight: var(--fw-semi);
  color: var(--c-ink);
}

.sertar__stare-incarcare {
  padding: var(--sp-11) 0;
  font-size: var(--fs-13);
  color: var(--c-ink-55);
  text-align: center;
}

/* ==========================================================================
   FAZA D.2 — reskin CSS pentru widgetul REAL de asistent AI
   (`tmd-woo-asistent-ai`, deja activ și configurat — "Iris"). Design-ul
   Cromatica cere o pastilă 58px stânga-jos + panou 376px; pluginul are deja
   exact acest slot funcțional (widget_position=bottom-left, widget_launcher_
   style=pill, widget_launcher_size=m/56px), deci NU se construiește un widget
   nou — se re-tematizează cel existent.

   Razele de colț (regula „fără colțuri rotunjite" a proiectului) NU se
   suprascriu de aici cu CSS: pluginul are deja o a doua formă nativă,
   `widget_shape=square`, care pune border-radius:0 direct pe panou/input/
   bule de mesaj (assets/css/frontend.css:674-696) — schimbată din propriile
   opțiuni ale pluginului (owner WORDPRESS), nu prin suprascriere CSS aici.
   O singură mică abatere acceptată, semnalată în raport: pastila (FAB) rămâne
   4px pe „square" (comentariul pluginului: „Not 0 — keeps some usability"),
   nu 0 exact — diferența e imperceptibilă pe un buton de 58px înalt.

   Ce pluginul NU expune și rămâne CSS aici: lățimea panoului (376px, nu
   360px — vezi --tmd-ai-width mai jos; frontend.js suprascrie --tmd-ai-
   width-desktop DOAR dacă operatorul a setat un chatWidthPx propriu, ceea ce
   nu e cazul acum, deci --tmd-ai-width câștigă) și ridicarea peste bannerul
   de cookie (--ridicare, consumat, NICIODATĂ rescris — proprietate unică a
   assets/js/cookie-consent.js).
   ========================================================================== */

:root {
  --tmd-ai-width: 376px;
}

.tmd-woo-ai-widget {
  transform: translateY(var(--ridicare, 0px));
  transition: transform var(--t-lent) var(--ease);
}

/* Ascunde DOAR pastila (launcher), niciodata un panou de chat deja deschis —
   o conversatie reala nu trebuie intrerupta pentru ca vizitatorul a mai
   deschis si cautarea/un sertar. Vezi stivuirea elementelor flotante mai jos. */
body.tmd-floating-suppress .tmd-woo-ai-widget:not(:has(.tmd-woo-ai-panel:not([hidden]))) {
  visibility: hidden;
  pointer-events: none;
}

/* ==========================================================================
   FAZA D.2 — stivuirea elementelor flotante (regula de coexistenta)
   Un singur trigger JS (assets/js/floating-coordinator.js) adauga/scoate
   aceasta clasa pe <body> cat timp overlay-ul de cautare SAU un sertar e
   deschis. Ascunde widgetul de asistent (regula de mai sus) si butonul
   "Sus" (mai jos) - exact comportamentul din Cromatica Home.dc.html, unde
   assistOpen depinde de "!search && drawer === null".
   ========================================================================== */
body.tmd-floating-suppress .to-top {
  visibility: hidden;
  pointer-events: none;
}

/* ==========================================================================
   FAZA D.2 — CORECȚIE: al DOILEA sistem de z-index, mai vechi, necoordonat
   ==========================================================================
   Descoperit la verificarea vizuală a overlay-ului de căutare (render-verify,
   2026-07-27): base.css (stratul VECHI, păstrat neatins conform deciziei din
   plan-pachete.md) are propriul lui sistem, separat de cele 9 straturi
   documentate in tokens.css §12:
     --z-sticky:200 (.site-header)  ·  --z-mega:250 (panourile mega-meniului)
     --z-overlay:300  ·  --z-totop:400
   NICIUNUL dintre aceste patru nu a fost vreodata reconciliat cu scara noua
   Cromatica (care se opreste la 200, la --z-lightbox). In D.1 asta nu s-a vazut
   NICIODATA la verificarea vizuala: bannerul de cookie (z-cookie:80) sta JOS,
   header-ul (z-sticky:200) sta SUS — nu se suprapun niciodata spatial, deci
   ordinea gresita dintre ele a ramas invizibila. Un overlay de cautare
   FULLSCREEN si sertare pe toata inaltimea CHIAR se suprapun peste header —
   aici defectul a devenit vizibil (confirmat: header-ul (200) acoperea complet
   overlay-ul (120) la randare reala, campul de cautare aparea sub navigatie).

   Solutie minimal-invaziva: ridic DOAR straturile D.2 deasupra plafonului
   VECHI (400), pastrand ordinea relativa dintre ele identica cu cea
   documentata in tokens.css. NU ating --z-sticky/--z-mega/--z-overlay/
   --z-totop (ar insemna sa ating header-ul si mega-meniul deja confirmate
   [VISUAL-CONFIRMED] in D.1, in afara pachetului D.2) si nici valorile
   INITIALE din tokens.css (raman corecte ca document de referinta pentru
   ordinea relativa — doar "translatate" aici, intr-un singur loc, cu acelasi
   offset, ca sa castige peste plafonul vechi). --z-lightbox NU are nevoie de
   corectie: <dialog>.showModal() se randeaza in "top layer"-ul nativ al
   browserului, deasupra oricarui z-index normal, indiferent de valoare.
   ========================================================================== */
:root {
  --z-sertar: 490;
  --z-cautare: 510;
  --z-flotant: 520;
  --z-asistent: 525;
  --z-toast: 530;
  --z-modal: 540;
}


/* ==========================================================================
   FAZA D.12 — CORECȚIE: colțuri rotunjite reziduale din al DOILEA sistem
   ("Var & salvie" / D2, vezi corecția de z-index de mai sus în același fișier)
   ==========================================================================
   Verificare 1:1 (08-verificare-1-la-1.md, secțiunea A) a găsit, prin
   getComputedStyle() pe pagini randate real (despre-noi, PLP tehnici-decorative):
   mega-meniul din header (.tmd-mm__navlink, .tmd-mm__card), butoanele de
   căutare din header (.header-search__submit, .tmd-search-clear), butonul
   flotant "Sus" (.to-top), badge-ul de favorite (.wl-count) și conținutul
   paginilor fără bundle „-cromatica" propriu (hero media, galerii, geo-card,
   review-card, .btn-primary/secundar, chip-uri, pastile de căutare) randau
   cu colțuri rotunjite reale (10px/18px/999px), deși tokens.css/components.css
   se încarcă ULTIMELE (prioritate 40) — pentru că acel strat definește DOAR
   --raza-0/--raza-cerc (numele Cromatica), niciodată nu redeclară --radius-sm/
   -md/-lg/-pill/-swatch (numele vechi din blocul `:root` „Var & salvie",
   duplicat în cele 8 bundle-uri de șablon) — deci acele 5 variabile vechi nu
   erau niciodată suprascrise pe nicio rută.

   Soluție minimal-invazivă (același tipar ca la z-index mai sus): redeclar
   AICI, ULTIMELE pe orice rută, DOAR cele 5 variabile vechi de rază, la 0 —
   se propagă automat la --mm-radius/--mm-radius-card (definite ca var() peste
   --radius-lg/--radius-md) și la orice consumator din cele 8 bundle-uri.
   NU ating --raza-0/--raza-cerc (deja corecte) și nici geometria specifică
   (dimensiuni, padding, culori) — doar raza.

   Excepții păstrate explicit rotunde (portret de persoană, cf. regulii de
   proiect): .review-avatar și .teaser-avatar (page-despre-noi.php) foloseau
   --radius-pill pentru o fotografie de persoană — rămân rotunde prin
   suprascriere directă mai jos, ca să nu depindă de variabila zerorizată. */
:root {
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-pill: 0;
  --radius-swatch: 0;
}

.review-avatar,
.teaser-avatar {
  border-radius: var(--raza-cerc);
}