/* ============================================================
   Farmacist pe bune - Direcția A „Cabinetul luminos"
   Paletă „Apă și cer": mentă pal + teal + turcoaz. TREI culori.
   Fonturi: Fraunces (heading) + Mulish (body), Google Fonts.
   Static, un singur sistem de design, mobile-first responsive.

   Croială refăcută 17 iul 2026 (research/DESIGN-PROFI-2026-07-17.md).
   Se schimbă FORMA: spațiu, ierarhie, densitatea cardului, plăcuța,
   fotografia ca suprafață. NU se schimbă paleta, fonturile, copy-ul
   sau prețurile. Singura excepție cerută de raport: a IEȘIT `--ocean`
   (#0369A1), a patra culoare, care nu era în paleta aleasă de Petru.
   ============================================================ */

:root {
  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Paletă „Apă și cer" --- */
  --mint:      #F0FDFA;   /* fundal principal, ~80% din ecran = aer/lumină */
  --mint-2:    #E2F7F1;   /* secțiune alternantă, mentă puțin mai adâncă */
  --alb:       #FFFFFF;   /* suprafață card */

  --teal:      #0F766E;   /* primar / acțiune: butoane, linkuri, preț */
  --teal-700:  #0B5A54;   /* hover, accente închise */
  --teal-900:  #07403B;   /* banda de încredere; tot teal, doar mai adânc */
  --teal-050:  #DCF1EE;   /* fill blând pentru etichete/pastile */

  --turcoaz:   #14B8A6;   /* accent viu (rar): tag „aleasă de Claudia" */
  --turcoaz-050:#D6F5EF;

  /* A patra culoare (--ocean #0369A1) a fost SCOASĂ pe 17 iul: nu era în paleta
     aleasă de Petru și sărea în ochi pe pastila de pe mobil. Tot ce era ocean e
     acum teal, primarul. Dacă vezi „ocean" undeva, e cod mort: șterge-l. */

  --text:      #1C1917;   /* aproape-negru cald */
  --text-soft: #52504B;   /* muted, trece AA */
  --linie:     #CDE9E4;   /* borduri subtile teal */

  --umbra-s: 0 2px 12px rgba(6, 78, 71, 0.06);
  --umbra-m: 0 14px 34px rgba(6, 78, 71, 0.10);
  --umbra-l: 0 24px 52px rgba(6, 78, 71, 0.15);
  --raza: 16px;

  --z-sticky: 100;
  --z-banda: 90;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--text);
  /* Alb, nu mentă (17 iul, raport §5.6). Menta era vopsea pe toți pereții și tot ce
     e peste tot nu se mai vede. Acum e accent: plăcuțele cardurilor, hero-ul,
     secțiunile alternante. Culoarea vine din conținut, nu din fundal. */
  background: var(--alb);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
}

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-700); text-decoration: underline; }

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

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* Eyebrow editorial (înlocuiește scrisul de mână din Direcția B) */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

/* Semnătură caldă, Fraunces italic */
.semnatura {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--teal-700);
  display: inline-block;
}

/* ---------------- Banda de sus (valoare / încredere) ---------------- */
.banda-sus {
  background: var(--teal);
  color: #EAFBF7;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 9px 16px;
  letter-spacing: 0.01em;
  position: relative;
  z-index: var(--z-banda);
}

/* ---------------- Header ---------------- */
header.site {
  background: rgba(240, 253, 250, 0.86);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--linie);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 15px;
  padding-bottom: 15px;
  flex-wrap: wrap;
  gap: 10px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--teal);
  letter-spacing: -0.015em;
}
.logo:hover { text-decoration: none; color: var(--teal); }
.logo span { color: var(--teal); font-style: italic; }
/* Semnul de brand langa wordmark. Inaltimea e in `em`, deci urmeaza marimea
   textului la fiecare breakpoint si nu trebuie reglata separat de trei ori. */
.logo .semn { width: auto; height: 1.9em; flex: 0 0 auto; }
nav.main a {
  margin-left: 26px;
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
nav.main a:hover { color: var(--teal); text-decoration: none; }
nav.main a.activ { color: var(--teal); border-bottom-color: var(--teal); }

/* ---------------- Butoane ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.18s ease, background 0.15s ease, color 0.15s ease;
}
.btn-primar { background: var(--teal); color: #fff; box-shadow: var(--umbra-s); }
.btn-primar:hover { background: var(--teal-700); color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: var(--umbra-m); }
.btn-contur { background: rgba(255,255,255,0.6); color: var(--teal); border-color: var(--teal); }
.btn-contur:hover { background: var(--teal); color: #fff; text-decoration: none; transform: translateY(-2px); }

/* ---------------- Prima fereastră: hero + banda, exact un ecran ----------------
   Înălțimea hero-ului era dictată NUMAI de conținut: 738px, identici la 1396px și
   la 1876px lățime. Deci marginea de jos a primului ecran cădea unde nimerea, pe
   fiecare laptop altundeva. Măsurat live pe 11 aug: pe o fereastră de 949px banda
   de încredere era TĂIATĂ pe la jumătate; pe una de ~1010px rămânea o fâșie albă
   sub ea. Nici tăierea, nici fâșia nu erau o decizie de design — erau accidentul
   aceluiași layout văzut prin două ferestre diferite.
   Acum primul ecran e o coloană flex înaltă cât fereastra minus bara de sus +
   header (114px peste 780px lățime), iar hero-ul ia tot spațiul rămas. Banda de
   încredere închide fold-ul fix pe margine — exact ce cerea modelul ei: autoritatea
   așezată înainte ca omul să ajungă la raft.
   De ce NU `.hero { height: 100vh }`: banda ar fi fost împinsă sub fold și fâșia
   albă s-ar fi mutat, nu ar fi dispărut. Și de ce nu wrapper peste header: e
   `position: sticky`, iar un container mai scurt decât pagina i-ar tăia lipirea.
   Sub 780px regula e inertă din construcție — hero-ul stivuit e deja mai înalt
   decât ecranul (1151px măsurat), deci min-height nu are ce să întindă. */
.prima-fereastra {
  --sus: 114px;
  min-height: calc(100vh - var(--sus));
  min-height: calc(100svh - var(--sus));
  display: flex;
  flex-direction: column;
}
.prima-fereastra .hero { flex: 1 0 auto; display: flex; }
.prima-fereastra .hero > .wrap { flex: 1; align-content: center; }

/* ── CONTRAST: turcoazul NU e culoare de text pe fundal deschis (11 aug 2026) ──────
   `--turcoaz` (#14B8A6) e definit in paleta ca „accent viu (RAR): tag «aleasa de
   Claudia»" — adica umplutura, nu text. Scapase in text mic pe fundal deschis, unde
   masoara 2,39:1 pe menta si 2,49:1 pe alb, la un prag WCAG AA de 4,5:1. Sub jumatate
   din minim, pe numele brandului din header, pe fiecare pagina din site.
   Inlocuit cu `--teal` (#0F766E): 5,25:1 pe menta, 5,47:1 pe alb. Ramane tot un teal,
   deci logoul in doua tonuri se citeste la fel — doar ca se si vede.
   ATENTIE, verificat inainte de a schimba: pe footerul inchis (#0A3B37) turcoazul
   TRECE cu 4,98:1, iar teal-ul ar PICA cu 2,27:1. Deci footerul ramane turcoaz.
   Aceeasi culoare, doua verdicte opuse, dupa ce e in spatele ei. */

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  overflow: hidden;
  background-image: url("img/hero-apa-si-cer-01.png");
  background-size: cover;
  background-position: 60% center;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(240,253,250,0.94) 0%,
    rgba(240,253,250,0.82) 38%,
    rgba(240,253,250,0.30) 72%,
    rgba(240,253,250,0.10) 100%);
}
.hero .wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
  padding-top: clamp(48px, 7vw, 84px);
  padding-bottom: clamp(48px, 7vw, 84px);
}
.hero-text { max-width: 600px; }
.hero h1 {
  font-size: clamp(2.3rem, 5.2vw, 3.6rem);
  color: var(--text);
  margin-top: 14px;
  text-wrap: balance;
}
.hero h1 em { color: var(--teal); font-style: italic; }
.hero p.sub {
  margin-top: 20px;
  font-size: 1.18rem;
  color: var(--text-soft);
  max-width: 32em;
}
.hero .cta-rand { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero .trust-linie {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--teal-700);
}
.hero .trust-linie svg { width: 18px; height: 18px; flex: none; }

/* Banda B2B din hero. Pagina „pentru branduri" era ingropata in meniu, desi e
   singura de pe site care aduce bani de la o firma, nu de la un cumparator. O
   linie, sub promisiunea pentru cumparator, ca sa nu-i fure ei atentia. */
.hero .banda-b2b { margin-top: 18px; font-size: 0.94rem; }
.hero .banda-b2b a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--mint);
  color: var(--teal-700);
  font-weight: 600;
}
.hero .banda-b2b a:hover { border-color: var(--turcoaz); text-decoration: none; }

/* Portret Claudia — fotografia ca SUPRAFAȚĂ, nu ca bibelou (raport §5.5).
   Era un selfie într-un card alb, cu umbră mare și colțuri rotunde: o ramă în jurul
   unei poze o face să pară un obiect pus pe masă. Typology și Susanne Kaufmann o
   lasă să fie suprafață. Deci: fără card alb, fără umbră, filet subțire sub ea în
   loc de ramă, și mai mare. Aceeași poză, alt site. */
.portret-foto {
  position: relative;
  justify-self: center;
  max-width: 420px;
  width: 100%;
}
.portret-foto img {
  border-radius: 4px;
  width: 100%;
  height: auto; /* anulează hint-ul height="" din HTML; fără el aspect-ratio nu se aplică */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
}
/* Semnătura fotografiei: filet subțire, ca la o fotografie de revistă. Înlocuiește
   pastila „verificat de farmacist" care plutea peste colțul pozei: faptul ăla îl
   spune acum banda de sub hero, o dată, pentru tot magazinul, în loc de o pastilă
   colorată pe fiecare suprafață. */
.portret-foto .cap {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--linie);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-soft);
}
.portret-foto .cap span { font-weight: 500; color: var(--text-soft); text-align: right; }

/* ---------------- Banda de încredere (sub hero) ----------------
   Modelul Skin Rocks: bandă închisă sub hero, care așază autoritatea înainte ca omul
   să ajungă la raft. DAR cu fapte adevărate: zero recenzii inventate, zero cifre
   fabricate, zero stele. Toate cele 4 sunt lucruri pe care site-ul le spunea deja
   (banda de sus, promisiunile, semnătura pozei); banda le adună într-un loc.
   Ce NU scrie aici: nicio promisiune de telefon. */
.banda-incredere { background: var(--teal-900); color: #fff; }
.banda-incredere .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-top: 26px;
  padding-bottom: 26px;
}
/* `> div`, NU `div`: `.wrap` e el însuși un div, deci un selector descendent îl
   prindea pe EL și îi rescria padding-ul lateral. Efectul, măsurat live pe 4 aug:
   pe mobil (regula din @media de mai jos, `padding: 0` shorthand) textul benzii
   ajungea la x=0 și fix pe marginea dreaptă — lipit de pereți pe fundal închis,
   unde marginea e dură și se vede. Pe desktop, `:first-child` îi dădea wrap-ului
   `padding-left: 0`, aceeași greșeală, vizibilă doar sub ~1140px. */
.banda-incredere .wrap > div {
  padding: 0 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.banda-incredere .wrap > div:first-child { border-left: 0; padding-left: 0; }
.banda-incredere b {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.banda-incredere span {
  display: block;
  font-size: 0.8rem;
  line-height: 1.45;
  opacity: 0.72;
}
@media (max-width: 860px) {
  .banda-incredere .wrap { grid-template-columns: 1fr 1fr; gap: 22px; }
  .banda-incredere .wrap > div { border-left: 0; padding: 0; }
}

/* ---------------- Secțiuni ---------------- */
section.bloc { padding: clamp(52px, 7vw, 88px) 0; }
/* Menta ca ACCENT, nu ca vopsea: secțiunea alternantă e mentă pal, iar grila de
   produse a rămas albă, ca plăcuțele mentă ale cardurilor să se vadă pe ea. */
section.bloc.mint-2 { background: var(--mint); }

.sectiune-cap { max-width: 660px; }
.sectiune-cap.centrat { margin: 0 auto; text-align: center; }
h2.titlu-sectiune {
  font-size: clamp(1.75rem, 3.8vw, 2.5rem);
  color: var(--text);
  margin-top: 8px;
  text-wrap: balance;
}
h2.titlu-sectiune em { color: var(--teal); font-style: italic; }
p.sub-sectiune { color: var(--text-soft); margin-top: 12px; font-size: 1.1rem; text-wrap: pretty; }

/* ---------------- De ce un farmacist (3 promisiuni) ---------------- */
.promisiuni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(20px, 3vw, 36px);
  margin-top: 40px;
}
.promisiune {
  background: var(--alb);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
  padding: 26px 26px 28px;
  box-shadow: var(--umbra-s);
}
.promisiune .ico {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--teal-050);
  display: grid; place-items: center;
  margin-bottom: 14px;
}
.promisiune .ico svg { width: 24px; height: 24px; }
.promisiune h3 { font-size: 1.2rem; color: var(--teal-700); margin-bottom: 6px; }
.promisiune p { color: var(--text-soft); font-size: 0.98rem; }

/* Cele trei promisiuni se aliniaza pe randuri comune. Masurat de scanerul propriu pe
   11 aug: paragrafele celor trei carduri porneau la cote diferite, cu 22px decalaj,
   fiindca titlurile au unul sau doua randuri. Acelasi defect ca la cardurile de produs
   si la cele de pret, a treia grila din site care il avea. Subgrid, trei benzi:
   pictograma, titlu, text. */
@media (min-width: 641px) {
  @supports (grid-template-rows: subgrid) {
    .promisiuni { grid-auto-rows: min-content; }
    .promisiuni > .promisiune {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 3;
      row-gap: 0;
    }
    .promisiune .ico { grid-row: 1; align-self: start; }
    .promisiune h3   { grid-row: 2; align-self: start; }
    .promisiune p    { grid-row: 3; align-self: start; }
  }
}

/* ---------------- Grilă produse ---------------- */
.grila-produse {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: clamp(22px, 3vw, 32px);
  margin-top: 44px;
}
/* Cardul: filet, nu umbră. Umbra pe fiecare card dintr-o grilă de 45 = 45 de obiecte
   care se ridică de pe pagină și se ceartă între ele. Colțurile rămân rotunjite
   (16px): mockup-ul le avea aproape drepte, dar legea Claudiei e JOVIAL, iar restul
   sistemului (butoane, pastile) e rotund. Croiala nu trebuie să vină la pachet cu
   răceala; ce face diferența e densitatea și ierarhia, nu unghiul colțului. */
.card-produs {
  background: var(--alb);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
  padding: 14px 14px 18px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s cubic-bezier(0.2,0.8,0.2,1), border-color 0.2s ease;
}
.card-produs:hover { transform: translateY(-4px); border-color: var(--teal); }

/* ---------------- PLĂCUȚA (răspunsul la „n-avem poze de produs") ----------------
   Panoul de dinainte (mentă-albăstruie + numele produsului + o frunză) se citea
   „lipsește poza", și era albastru-liliachiu, în afara paletei (raport §5.2).
   Aici: o plăcuță TIPOGRAFICĂ, ca eticheta de pe borcanul din farmacie. Poartă
   MARCA substanței (Mg, D3, SPF 50), nu numele: numele îl poartă titlul, o dată.

   De ce e onestă: nu desenăm flacoane false și nu generăm etichete cu AI (eticheta
   inventată = minciună pe brandul „farmacistul care nu te minte"). Plăcuța nu
   pretinde că e produsul. E consecventă pe toate cele 45, deci n-are boala Narje
   (poze reale dar inconsecvente = tot ieftin).

   Chenar 1:1: când vine poza reală de la distribuitor, shop.js o pune PESTE, în
   exact același chenar, iar plăcuța dispare singură (.are-foto). Un UPDATE în DB,
   zero reproiectare. */
.poza {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  padding: 18px;
  background: var(--mint);
}
/* Textura fină de hârtie: dă „laborator", nu plastic. Suplimentele și cosmeticele
   au ACEEAȘI plăcuță: consecvența e ce citește premium, nu varietatea. */
.poza::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(15, 118, 110, 0.13) 1px, transparent 0);
  background-size: 14px 14px;
  opacity: 0.5;
}
.simbol-poza {
  position: relative;
  z-index: 1;
  font-family: var(--font-head);
  font-weight: 600;
  font-variation-settings: "opsz" 144; /* optical size mare = tăietură de titlu */
  line-height: 0.92;
  color: var(--teal);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
/* Trei trepte, alese în build-produse.py după lungimea mărcii, ca „Mg" și
   „Multivitamine" să încapă în același chenar fără ca una să fie pitică.
   Corpul e mare deliberat: marca TREBUIE să umple plăcuța, altfel pătratul arată
   gol și ne-am întors de unde am plecat, la senzația de „lipsește ceva". */
.simbol-poza.mare  { font-size: clamp(4.6rem, 11vw, 6.6rem); }
.simbol-poza.mediu { font-size: clamp(2.6rem, 6vw, 3.9rem); }
.simbol-poza.mic   { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.simbol-poza sub {
  font-size: 0.46em;
  font-weight: 500;
  vertical-align: baseline;
  letter-spacing: 0;
}
/* Plusul din „D3+K2" / „Ca+Mg+D3": Mulish, nu Fraunces. Fraunces la opsz 144 îl
   desenează cu linii de păr, iar la corpul ăsta dispărea complet: se citea „D3 K2",
   ca și cum ar lipsi un glif. Verificat cu ochii pe captură, nu presupus. */
.simbol-poza .plus {
  font-family: var(--font-body);
  font-size: 0.4em;
  font-weight: 700;
  margin: 0 0.1em;
  vertical-align: 0.18em;
}
.doza-poza {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-700);
  opacity: 0.8;
}

/* Poza reală de produs (shop.js o injectează doar dacă products.image_url există).
   Stă PESTE panoul desenat, nu în locul lui: la eroare shop.js scoate imaginea
   din DOM și panoul e deja dedesubt, neatins. .are-foto se pune abia la `load`, deci fără
   poză (starea de azi, 18/18) cardul e pixel cu pixel cel dinainte.
   object-fit: contain, nu cover — pozele de la distribuitor sunt packshot-uri pe
   fundal alb; `cover` ar tăia din cutie, iar o cutie tăiată ascunde exact
   eticheta pe care o vindem ca fiind citibilă. Alb dedesubt ca să curgă în
   fundalul lor alb; ramele mentă rămân pentru cardurile fără poză. */
.poza img.poza-foto {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: var(--alb);
}
.poza.are-foto { background: var(--alb); }
/* Când poza reală sosește, plăcuța iese ÎNTREAGĂ: marca, doza și textura de hârtie.
   Tag-ul „alegerea mea" rămâne, e adevărat și cu poză. Regula asta e contractul cu
   aplicaPoze() din shop.js: dacă adaugi un element în .poza, ascunde-l și aici,
   altfel îți rămâne peste fotografie. */
.poza.are-foto .simbol-poza,
.poza.are-foto .doza-poza { display: none; }
.poza.are-foto::after { display: none; }
/* Onestitate (decizie Petru, 17 iul): pozele sunt mockup-uri de prezentare, nu
   produsul real (conturi distribuitor neînchise, aceeași poză se repetă pe mai
   multe produse). Badge vizibil DOAR pe cardurile cu poză, ca nimeni să nu creadă
   că vede exact flaconul primit. Se scoate când sosesc pozele reale. */
.poza.are-foto::before {
  content: "imagine ilustrativă";
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 2;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--teal-700);
  background: rgba(255, 255, 255, 0.85);
  padding: 3px 9px;
  border-radius: 999px;
  pointer-events: none;
}
/* Tag „aleasă de Claudia" — doar pe produsele-semnătură */
.tag-aleasa {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--turcoaz);
  color: #06342F;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: var(--umbra-s);
}
.tag-aleasa svg { width: 13px; height: 13px; }

.card-continut { display: flex; flex-direction: column; flex: 1; padding: 16px 6px 0; }
/* Categoria: text-eyebrow, nu pastilă. Era una din cele trei insigne care se băteau
   între ele; ca text își face treaba (orientare) fără să ceară atenție. */
.eticheta-cat {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.card-produs h3 {
  font-size: 1.24rem;
  margin-top: 6px;
  color: var(--text);
  line-height: 1.22;
  text-wrap: balance;
}
/* Vocea Claudiei: NU mai e cutie în cutie (etichetă + panou + semnătură, înăuntrul
   card-continut, înăuntrul card-produs). E un citat cu filet, ca în editorial.
   Rămâne ÎNTREG: e singurul lucru pe care banii nu-l cumpără repede, și singura
   proză de pe card. Eticheta „Sfatul farmacistului" a ieșit: citatul semnat de
   Claudia, lângă un produs, se explică singur. */
.sfat {
  margin-top: 14px;
  border-left: 2px solid var(--turcoaz);
  padding-left: 14px;
}
.sfat p {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 400;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--text);
  text-wrap: pretty;
}
.sfat cite {
  display: block;
  margin-top: 7px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
/* Subsolul legal: mențiunea EFSA + „supliment alimentar", integral, corp mic, sub
   linia cardului. Obligația e de PREZENȚĂ, nu de font mare; înainte erau două
   texte legale în mijlocul cardului, care mâncau ierarhia (raport §5.1). */
.card-produs .subsol {
  margin-top: 14px;
  padding: 12px 6px 0;
  border-top: 1px solid var(--linie);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-soft);
  text-wrap: pretty;
}

/* Rating COMPACT pe card (o linie, sub titlu) — o singură linie ca să nu facă
   cardurile inegale (reproș Petru 22 iul). Stelele = teal, în paletă (decizia lui). */
.produs-rating { display: flex; align-items: center; gap: 7px; margin: 2px 0 10px; }
.stele-bar { position: relative; display: inline-block; color: #D6D3CE; letter-spacing: 2px; font-size: 0.95rem; line-height: 1; white-space: nowrap; }
.stele-fill { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--teal); white-space: nowrap; }
.produs-rating strong { font-family: var(--font-head); font-weight: 600; color: var(--text); font-size: 0.98rem; }
.produs-rating-nr { color: var(--text-soft); font-size: 0.82rem; }

.card-jos { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pret { font-family: var(--font-head); font-weight: 600; font-size: 1.55rem; color: var(--teal); line-height: 1; }
.pret .lei { font-size: 0.86rem; font-weight: 700; margin-left: 3px; font-family: var(--font-body); }
.btn-card {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-weight: 800;
  font-size: 0.86rem;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn-card:hover { background: var(--teal-700); color: #fff; text-decoration: none; transform: translateY(-1px); }

/* ---------- Aliniere pe rânduri COMUNE între carduri (desktop) ----------
   Din 22 iul cardurile aveau înălțime egală, dar interiorul plutea. Cauza: .card-jos
   e ancorat jos în .card-continut, iar .subsol (mențiunea EFSA) are 3-5 rânduri în
   funcție de produs, deci fundul lui .card-continut cădea altundeva la fiecare card.
   Măsurat live pe 11 aug, aceeași grilă: prețul la 796 / 813 / 813 px pe primul rând
   și 33px diferență pe al doilea. Trei carduri alăturate în care nimic nu se aliniază
   pe orizontală = semnalul #1 de „neterminat" (reproșul lui Petru, cu captură).

   Fix: cardul devine SUBGRID al grilei. Fiecare bandă (plăcuță, categorie, titlu,
   citat, preț, butoane, mențiune legală) primește un rând al ei, comun tuturor
   cardurilor de pe același rând; înălțimea rândului o dă cel mai înalt conținut, deci
   textele de lungimi diferite nu se mai împing între ele.

   Învelișurile (.card-continut, .card-jos) trec pe `display: contents` ca să-și dea
   copiii direct grilei — același truc dovedit deja pe mobil. ZERO schimbare de HTML:
   markup-ul cardurilor e GENERAT din DB de build-produse.py, o modificare acolo s-ar
   pierde la următoarea rulare. Rândurile sunt atribuite EXPLICIT, nu prin plasare
   automată, ca un card cu rating (rândul 4, azi gol) să nu decaleze restul.
   Subgrid: Chrome 117+, Safari 16+, Firefox 71+. Sub el, @supports readuce flex-ul. */
@media (min-width: 641px) {
  @supports (grid-template-rows: subgrid) {
    .grila-produse > .card-produs {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 8;
      row-gap: 0;
    }
    .grila-produse > .card-produs .card-continut,
    .grila-produse > .card-produs .card-jos.comanda { display: contents; }

    /* padding-ul orizontal trăia pe .card-continut; cu display:contents dispare,
       deci se mută pe fiecare bandă, ca margine (padding-ul ar strica retragerea
       citatului, care are filet pe stânga) */
    .grila-produse > .card-produs .eticheta-cat,
    .grila-produse > .card-produs h3,
    .grila-produse > .card-produs .produs-rating,
    .grila-produse > .card-produs .sfat,
    .grila-produse > .card-produs .pret-info,
    .grila-produse > .card-produs .card-actiuni { margin-inline: 6px; }

    .grila-produse > .card-produs .poza         { grid-row: 1; align-self: start; }
    .grila-produse > .card-produs .eticheta-cat { grid-row: 2; margin-top: 16px; }
    .grila-produse > .card-produs h3            { grid-row: 3; }
    .grila-produse > .card-produs .produs-rating{ grid-row: 4; }
    .grila-produse > .card-produs .sfat         { grid-row: 5; }
    .grila-produse > .card-produs .pret-info    { grid-row: 6; margin-top: 16px; align-self: end; }
    .grila-produse > .card-produs .card-actiuni { grid-row: 7; margin-top: 10px; }
    /* start, nu end: .subsol are un filet vizibil deasupra (border-top). Aliniat la
       bază, filetele celor trei carduri ar cădea la înălțimi diferite — exact
       raggedness-ul pe care îl reparăm. Aliniat la vârf, liniile se suprapun. */
    .grila-produse > .card-produs .subsol       { grid-row: 8; align-self: start; }

    /* Cele două acțiuni una lângă alta, cum sunt deja pe telefon (unde economia
       măsurată a fost 96px → 46px pe card). Pe desktop rămăseseră suprapuse pe toată
       lățimea: 45 de carduri × două pastile pline = 90 de butoane grele, care furau
       ierarhia de la preț. Ordinea de importanță rămâne: coșul ia mai mult spațiu. */
    .grila-produse > .card-produs .card-actiuni {
      display: grid;
      grid-template-columns: 1.35fr 1fr;
      gap: 8px;
    }
    .grila-produse > .card-produs .card-actiuni .btn-card {
      width: 100%;
      padding-inline: 8px;
      font-size: 0.82rem;
      white-space: normal;
    }
  }
}

/* ---------- Pagina de produs (/produs/<slug>.html, din 11 aug) ----------
   Până azi cele 45 de produse existau DOAR ca 45 de carduri pe pagina de start.
   Costul nu era estetic, era comercial: n-aveai unde trimite un om, n-aveai unde pune
   poza mare a cutiei, n-aveai pagină pentru „magneziu bisglicinat" în căutare.

   Pagina refolosește DELIBERAT `article.card-produs` cu aceleași clase înăuntru, ca
   shop.js (preț + poză din DB) și cart.js (butoane) să meargă fără o linie de JS nouă.
   Aici doar dezbrăcăm cardul de haina de card și îl întindem pe două coloane. */
.produs-pagina {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  border: 0;                 /* nu mai e un obiect dintr-o listă, e pagina */
  padding: 0;
  background: transparent;
  max-width: 980px;
  margin: 22px auto 0;
}
.produs-pagina:hover { transform: none; }      /* ridicarea la hover e limbaj de card */
.produs-pagina .poza { border-radius: 16px; }
.produs-pagina .card-continut { padding: 0; }
.produs-pagina h1 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  line-height: 1.12;
  margin: 8px 0 0;
  text-wrap: balance;
}
/* Citatul Claudiei e ARGUMENTUL paginii, nu o notă pe margine: corp mai mare decât
   pe card, unde trebuia să încapă în 45 de exemplare. */
/* Filetul rămâne 2px, ca pe card: e un filet de citat editorial, nu un accent lateral
   de casetă. Îngroșat la 3px chiar începe să citească a card generat automat (semnalat
   de hook-ul impeccable la scriere, avea dreptate). Citatul crește din corp și din
   retragere, nu din grosimea liniei. */
.produs-pagina .sfat { margin-top: 18px; padding-left: 18px; }
.produs-pagina .sfat p { font-size: 1.12rem; line-height: 1.55; }
.produs-pagina .pret-info.are-pret { font-size: 2rem; text-align: left; }
.produs-pagina .card-jos.comanda { padding-top: 20px; gap: 14px; align-items: flex-start; }
.produs-pagina .card-actiuni { flex-direction: row; gap: 10px; width: 100%; }
.produs-pagina .card-actiuni .btn-card { padding: 13px 22px; font-size: 0.92rem; }
.produs-forma { margin-top: 16px; font-size: 0.9rem; color: var(--text-soft); }
/* Când ajunge și ce se întâmplă dacă te răzgândești, lângă butonul de cumpărare, nu în
   FAQ. Filet sus în loc de card: e informație de sprijin pentru decizie, nu o secțiune
   nouă care să concureze cu prețul. */
.produs-livrare {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--linie);
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.6;
}
.produs-livrare strong { color: var(--text); }
.produs-pagina .subsol {
  grid-column: 1 / -1;       /* mențiunea legală trece sub ambele coloane, întreagă */
  margin-top: 4px;
}
/* Firimiturile: unde ești, în trei pași. Un magazin fără ele te lasă în aer când ai
   intrat direct din Google pe pagina de produs, adică exact cazul pentru care există. */
.firimituri { font-size: 0.86rem; color: var(--text-soft); }
.firimituri a { color: var(--text-soft); text-decoration: none; border-bottom: 1px solid var(--linie); }
.firimituri a:hover { color: var(--teal); }
.firimituri span { margin: 0 6px; }
.inapoi-raft { max-width: 980px; margin: 30px auto 0; color: var(--text-soft); font-size: 0.96rem; }
@media (max-width: 780px) {
  .produs-pagina { grid-template-columns: 1fr; margin-top: 16px; }
  .produs-pagina .card-actiuni { flex-direction: column; }
}

/* Plăcuța devine link către pagina produsului. Strat peste ea, nu în jurul ei: dacă ar
   fi înfășurat `.poza`, linkul ar fi devenit el celula de grilă și ar fi rupt
   `grid-row: 1`. z-index peste poza injectată de shop.js, care e și ea absolută. */
.poza-link { position: absolute; inset: 0; z-index: 4; }
.card-produs h3 a { color: inherit; text-decoration: none; }
.card-produs h3 a:hover { color: var(--teal); }

/* Grupuri de produse (Suplimente / Cosmetice bio) */
.grup-produse { margin-top: clamp(40px, 6vw, 60px); }
.grup-cap {
  display: flex;
  align-items: baseline;
  gap: 8px 20px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--linie);
}
.grup-cap .grup-titlu {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  color: var(--teal-700);
  line-height: 1.1;
}
.grup-cap p { color: var(--text-soft); font-size: 0.98rem; flex: 1; min-width: 240px; text-wrap: pretty; }
.grup-produse .grila-produse { margin-top: 28px; }

/* Eticheta „Sfatul farmacistului" în nota Claudiei */
.sfat-eticheta {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 7px;
}

/* Buton CTA de card pe lățime plină */
.btn-card.plin { width: 100%; text-align: center; padding: 12px 18px; }

/* ---------------- Sfatul Farmacistului (teaser) ---------------- */
.blog-teaser {
  position: relative;
  background-image: linear-gradient(90deg, rgba(240,253,250,0.5) 0%, rgba(240,253,250,0.82) 60%, rgba(240,253,250,0.95) 100%), url("img/section-botanic-02.png");
  background-size: cover;
  background-position: left center;
}
.teaser-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.teaser-card {
  background: var(--alb);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
  padding: clamp(26px, 4vw, 38px);
  box-shadow: var(--umbra-m);
}
.teaser-card .meta { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal); }
.teaser-card h3 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin-top: 10px; color: var(--text); line-height: 1.22; }
.teaser-card p { color: var(--text-soft); margin-top: 14px; text-wrap: pretty; }
.teaser-card .citeste { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-weight: 800; color: var(--teal); }
.teaser-card .citeste:hover { text-decoration: none; color: var(--teal-700); gap: 10px; transition: gap 0.15s ease; }

/* ---------------- Cine alege (Claudia) ---------------- */
.cine-alege {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.cine-alege .foto-mare {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--umbra-l);
  border: 8px solid var(--alb);
}
.cine-alege .foto-mare img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; object-position: center 22%; /* 18 iul: poza noua e portret 3:4, subiectul e centrat, deci nu mai trag cadrul spre dreapta ca la landscape-ul de dojo */ }
.cine-alege .text h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); color: var(--text); margin-top: 8px; }
.cine-alege .credential {
  display: inline-block;
  color: var(--teal);
  font-weight: 800;
  font-size: 0.86rem;
  margin: 14px 0;
  background: var(--teal-050);
  padding: 6px 15px;
  border-radius: 999px;
}
.cine-alege .text p { color: var(--text-soft); margin-top: 10px; max-width: 48em; text-wrap: pretty; }
.cine-alege .semnatura { margin-top: 20px; }

/* „Nu vorbesti cu un robot" = argumentul de vanzare, nu o nota de subsol.
   Reia tiparul dovedit al site-ului (.nota-claudia: fundal mentă, colturi rotunjite,
   zero bara laterala) - bara colorata pe o latura e semnatura vizuala a UI-urilor
   generate de AI, adica exact ce contrazice blocul asta. */
.cine-alege .fara-bot {
  margin-top: 18px;
  padding: 14px 18px 15px;
  background: var(--teal-050);
  border-radius: 12px;
  color: var(--text);
  max-width: 48em;
}
.cine-alege .fara-bot strong { color: var(--teal-700); }
.cine-alege .text .btn-card { margin-top: 18px; display: inline-block; }

/* ---------------- Newsletter ---------------- */
.newsletter-mini {
  background: var(--teal-050);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
  padding: clamp(22px, 3vw, 32px) clamp(24px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 40px;
}
.newsletter-mini .nm-text { flex: 1; min-width: 240px; }
.newsletter-mini h3 { font-size: 1.35rem; color: var(--teal-700); }
.newsletter-mini p { color: var(--text-soft); margin-top: 4px; font-size: 0.96rem; }

.newsletter-mare {
  position: relative;
  overflow: hidden;
  background: var(--teal);
  color: #E9FBF7;
  border-radius: 24px;
  padding: clamp(34px, 5vw, 60px);
  box-shadow: var(--umbra-m);
}
.newsletter-mare::after {
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(20,184,166,0.5), transparent 70%);
  pointer-events: none;
}
.newsletter-mare > * { position: relative; z-index: 1; }
.newsletter-mare .eyebrow { color: #C8F5EC; }   /* era #99EFD8 = 4,09:1 pe teal; acum 4,62 */
.newsletter-mare h2 { color: #fff; font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin-top: 6px; }
.newsletter-mare p.intro { color: #C9F3EC; margin-top: 12px; max-width: 34em; }

form.captura { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; max-width: 540px; }
form.captura input[type="email"] {
  flex: 1;
  min-width: 220px;
  padding: 14px 18px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  background: #fff;
  color: var(--text);
}
form.captura input[type="email"]::placeholder { color: #7c8a88; }
form.captura input[type="email"]:focus { outline: none; border-color: var(--teal); }
form.captura button {
  padding: 14px 26px;
  border-radius: 999px;
  border: none;
  background: #fff;
  color: var(--teal-700);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
form.captura button:hover { background: var(--teal-050); transform: translateY(-2px); }
.newsletter-mare .nota { font-size: 0.85rem; color: #D6F7F0; margin-top: 14px; }   /* era #B7ECE3 = 4,20:1; acum 4,80 */
.newsletter-mare .nota a { color: #fff; text-decoration: underline; }

/* newsletter-mini refolosește input teal + buton teal */
.newsletter-mini form.captura input[type="email"] { border-color: var(--linie); }
.newsletter-mini form.captura button { background: var(--teal); color: #fff; }
.newsletter-mini form.captura button:hover { background: var(--teal-700); }

/* ---------------- Blog ---------------- */
.lista-articole { margin-top: 40px; display: grid; gap: 22px; }
.card-articol {
  background: var(--alb);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--umbra-s);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card-articol:hover { transform: translateY(-3px); box-shadow: var(--umbra-m); }
.card-articol .meta { font-size: 0.8rem; color: var(--teal); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.card-articol h3 { margin-top: 10px; font-size: 1.5rem; line-height: 1.24; }
.card-articol h3 a { color: var(--text); }
.card-articol h3 a:hover { color: var(--teal); text-decoration: none; }
.card-articol p { color: var(--text-soft); margin-top: 12px; text-wrap: pretty; }
.card-articol .citeste { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 800; color: var(--teal); }
.card-articol .citeste:hover { text-decoration: none; color: var(--teal-700); gap: 10px; transition: gap 0.15s ease; }

/* ---------------- Articol ---------------- */
article.articol {
  background: var(--alb);
  border: 1px solid var(--linie);
  border-radius: 20px;
  padding: clamp(28px, 5vw, 60px);
  margin: 44px auto;
  max-width: 760px;
  box-shadow: var(--umbra-s);
}
article.articol h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--text); line-height: 1.16; text-wrap: balance; }
article.articol .byline { color: var(--teal-700); font-weight: 700; font-size: 0.94rem; margin-top: 16px; }
article.articol .meta-articol { color: var(--text-soft); font-size: 0.85rem; margin-top: 4px; }
article.articol > p, article.articol > ul { max-width: 68ch; }
article.articol h2 { font-size: 1.5rem; color: var(--teal-700); margin: 36px 0 12px; }
article.articol p { margin-top: 15px; text-wrap: pretty; }
article.articol strong { color: var(--text); }
article.articol ul { margin: 15px 0 0 22px; }
article.articol li { margin-top: 9px; }
article.articol li::marker { color: var(--turcoaz); }
/* Raspunsul scurt de sub fiecare H2 din articole (forma de citare AEO): omul
   primeste raspunsul in 40-60 de cuvinte, inainte de proza care il desface. */
article.articol .capsula-raspuns {
  margin-top: 14px;
  font-size: 1.1rem;
  line-height: 1.6;
  font-weight: 500;
  color: var(--text);
}

/* Nota pentru branduri, la piciorul articolului: cititorul de blog e uneori chiar
   omul care are un brand de suplimente. Discreta, nu bannerul care rupe articolul. */
article.articol .nota-branduri {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--linie);
  font-size: 0.92rem;
  color: var(--text-soft);
}

.caseta-sfat {
  background: var(--teal-050);
  border: 1px solid var(--linie);
  border-radius: 16px;
  padding: 24px 28px;
  margin-top: 32px;
  font-size: 1.02rem;
}
.caseta-sfat strong { color: var(--teal-700); font-family: var(--font-head); font-weight: 600; }
.disclaimer-articol {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--linie);
  font-size: 0.85rem;
  color: var(--text-soft);
  font-style: italic;
}
.inapoi-blog { display: inline-flex; align-items: center; gap: 6px; margin: 34px 0 0; font-weight: 700; }

/* ---------------- Despre ---------------- */
.despre-hero { padding-top: clamp(44px, 6vw, 70px); }
.despre-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
.despre-foto {
  position: sticky;
  top: 96px;
  border-radius: 20px;
  overflow: hidden;
  border: 8px solid var(--alb);
  box-shadow: var(--umbra-l);
}
.despre-foto img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; object-position: center 28%; }
.despre-continut { max-width: 66ch; }
.despre-continut > p { margin-top: 16px; color: var(--text-soft); text-wrap: pretty; }
.despre-continut h2 { font-size: 1.5rem; color: var(--teal-700); margin-top: 38px; }
.despre-continut h2.titlu-sectiune { color: var(--text); font-size: clamp(1.75rem, 3.8vw, 2.4rem); margin-top: 8px; }
.despre-continut .semnatura { margin-top: 28px; font-size: 1.8rem; }

/* ---------------- Footer ---------------- */
footer.site {
  background: #0A3B37;
  color: #BFE3DD;
  padding: clamp(46px, 6vw, 62px) 0 34px;
  font-size: 0.92rem;
}
footer.site .coloane {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr 1fr 1.15fr;
  gap: 32px;
}
/* Titlurile de coloană din footer erau `h4` după un `h2` din conținutul paginii, adică
   un salt de două niveluri în structura documentului — un cititor de ecran care sare din
   titlu în titlu pierde un nivel și nu știe dacă a intrat într-o subsecțiune. Erau pe
   toate cele 54 de pagini. Acum sunt `h2`, adică surori cu secțiunile paginii, ceea ce
   și sunt: „Navigare", „Legal", „Contact" nu sunt subcapitole ale ultimei secțiuni de
   deasupra lor. Mărimea vizuală rămâne exact aceeași; s-a schimbat doar structura. */
footer.site h2.titlu-footer { color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; margin-bottom: 10px; }
footer.site .logo-foot { font-family: var(--font-head); font-size: 1.35rem; font-weight: 600; color: #fff; }
footer.site .logo-foot span { color: var(--turcoaz); font-style: italic; }
footer.site p { color: #A6D3CC; margin-top: 6px; }
footer.site a { color: #DDF2EE; }
footer.site a:hover { color: #fff; }
footer.site .disclaimer {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.6;
  color: #90BEB7;
}
footer.site .legal { margin-top: 14px; font-size: 0.78rem; color: #6F9A93; }

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero::before { background: linear-gradient(180deg, rgba(240,253,250,0.86) 0%, rgba(240,253,250,0.78) 100%); }
  .hero-text { max-width: 620px; }
  /* OFERTA ÎNAINTEA SELFIE-ULUI (raport §5.4). Era `order: -1`: pe 390px primul ecran
     era poza Claudiei într-un parc, iar H1-ul („Aleg pentru tine doar ce aș folosi
     și eu") cădea sub fold. Argumentul de vânzare intra al doilea, exact pe ecranul
     unde e publicul. Acum textul e primul, poza îl urmează. */
  .portret-foto { order: 2; max-width: 340px; margin-top: 26px; }
  .teaser-grid { grid-template-columns: 1fr; }
  .cine-alege { grid-template-columns: 1fr; }
  .cine-alege .foto-mare { max-width: 360px; }
  .despre-grid { grid-template-columns: 1fr; }
  .despre-foto { position: static; max-width: 320px; }
  footer.site .coloane { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  nav.main a { margin-left: 16px; font-size: 0.9rem; }
  .newsletter-mini { flex-direction: column; align-items: flex-start; }
  footer.site .coloane { grid-template-columns: 1fr; gap: 24px; }
  .card-jos { flex-direction: column; align-items: stretch; }
  .btn-card { width: 100%; }
  .btn { width: 100%; }
  .hero .cta-rand { flex-direction: column; }
}

/* ============================================================
   Magazin deschis: preț pe card, modal comandă, stări formular,
   cookie banner, footer legal, pagini legale, formular retragere
   ============================================================ */

/* Preț pe card (dinamic din DB; fallback onest fără preț) */
.card-jos.comanda { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 16px; }
.pret-info {
  font-size: 0.8rem;
  color: var(--text-soft);
  font-style: italic;
  text-align: center;
  min-height: 1.2em;
}
.pret-info.are-pret {
  font-style: normal;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.45rem;
  color: var(--teal);
  line-height: 1.1;
}

/* Stări inline pentru formulare (newsletter, comandă, retragere) */
.form-status {
  margin-top: 12px;
  font-size: 0.92rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 10px 14px;
  width: 100%;
}
.form-status[hidden] { display: none; }
.form-status.ok { background: var(--teal-050); color: var(--teal-700); }
.form-status.eroare { background: #FDECEA; color: #B3261E; }
.form-status.lucru { background: var(--teal-050); color: var(--teal); }
.newsletter-mare .form-status.ok { background: rgba(255, 255, 255, 0.16); color: #fff; }
.newsletter-mare .form-status.eroare { background: rgba(0, 0, 0, 0.28); color: #FFD8D2; }
.newsletter-mare .form-status.lucru { background: rgba(255, 255, 255, 0.12); color: #DFF7F1; }

/* Modal comandă */
.modal-fundal {
  position: fixed;
  inset: 0;
  background: rgba(10, 59, 55, 0.55);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 16px 24px;
  overflow-y: auto;
  z-index: 200;
}
.modal-fundal.deschis { display: flex; }
.modal-comanda {
  position: relative;
  background: var(--alb);
  border-radius: 20px;
  box-shadow: var(--umbra-l);
  max-width: 520px;
  width: 100%;
  padding: clamp(24px, 4vw, 36px);
  margin: 0 auto;
}
.modal-comanda h3 { font-size: 1.45rem; color: var(--text); padding-right: 44px; line-height: 1.2; }
.modal-comanda .produs-ales {
  margin-top: 8px;
  color: var(--teal-700);
  font-weight: 800;
  background: var(--teal-050);
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.92rem;
}
.modal-comanda .inchide {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--teal-050);
  color: var(--teal-700);
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
}
.modal-comanda .inchide:hover { background: var(--linie); }
.modal-comanda label,
.formular-retragere label,
#form-checkout label,
.formular-testimonial label {
  display: block;
  margin-top: 15px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
}
.modal-comanda input,
.modal-comanda select,
.modal-comanda textarea,
.formular-retragere input,
.formular-retragere textarea,
#form-checkout input[type="text"],
#form-checkout input[type="email"],
#form-checkout input[type="tel"],
#form-checkout textarea,
.formular-testimonial input[type="text"],
.formular-testimonial textarea {
  width: 100%;
  margin-top: 6px;
  padding: 11px 14px;
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  background: #fff;
}
.modal-comanda input:focus,
.modal-comanda select:focus,
.modal-comanda textarea:focus,
.formular-retragere input:focus,
.formular-retragere textarea:focus,
#form-checkout input:focus,
#form-checkout textarea:focus,
.formular-testimonial input[type="text"]:focus,
.formular-testimonial textarea:focus { outline: none; border-color: var(--teal); }
.modal-comanda textarea,
.formular-retragere textarea,
#form-checkout textarea,
.formular-testimonial textarea { min-height: 74px; resize: vertical; }

/* Select produs (review pe produs) — aceeași formă ca inputurile. */
.formular-testimonial select {
  width: 100%; margin-top: 6px; padding: 11px 14px;
  border: 1.5px solid var(--linie); border-radius: 12px;
  font-family: var(--font-body); font-size: 1rem; color: var(--text); background: #fff;
}
.formular-testimonial select:focus { outline: none; border-color: var(--teal); }

/* Notă cu stele — apare doar la review pe produs. Radio-uri ascunse, umplere pe
   hover/checked; row-reverse ca hover-ul să umple de la stânga (stea 1) în dreapta. */
.ts-rating { margin-top: 16px; }
.ts-rating-eticheta { display: block; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.stele-input { display: inline-flex; flex-direction: row-reverse; }
.stele-input input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.stele-input label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;   /* țintă de atins pe mobil */
  font-size: 1.9rem; line-height: 1; color: #D6D3CE; cursor: pointer;
  transition: color .12s ease-out;
}
.stele-input label:hover,
.stele-input label:hover ~ label,
.stele-input input:checked ~ label { color: var(--teal); }
.stele-input input:focus-visible + label { outline: 2px solid var(--turcoaz); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .stele-input label { transition: none; } }
.modal-comanda .nota-plata {
  margin-top: 16px;
  font-size: 0.86rem;
  color: var(--text-soft);
  background: var(--mint);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 10px 14px;
}
.modal-comanda button[type="submit"] { margin-top: 18px; width: 100%; }
.modal-comanda .mc-succes h3 { padding-right: 44px; color: var(--teal-700); }
.modal-comanda .mc-succes p { margin-top: 14px; color: var(--text-soft); text-wrap: pretty; }
.modal-comanda .mc-succes .numar-comanda {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--teal);
  background: var(--teal-050);
  padding: 2px 10px;
  border-radius: 8px;
  white-space: nowrap;
}
.modal-comanda .mc-succes .semnatura { margin-top: 18px; }

/* Cookie banner (GDPR minimal) */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 300;
  max-width: 700px;
  margin: 0 auto;
  background: var(--alb);
  border: 1px solid var(--linie);
  border-radius: 16px;
  box-shadow: var(--umbra-l);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cookie-banner p { flex: 1; min-width: 230px; margin: 0; font-size: 0.9rem; color: var(--text-soft); }
.cookie-banner .butoane { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-banner button {
  border-radius: 999px;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
  border: 2px solid var(--teal);
  transition: background 0.15s ease, color 0.15s ease;
}
.cookie-banner .cookie-accept { background: var(--teal); color: #fff; }
.cookie-banner .cookie-accept:hover { background: var(--teal-700); border-color: var(--teal-700); }
.cookie-banner .cookie-refuz { background: #fff; color: var(--teal); }
.cookie-banner .cookie-refuz:hover { background: var(--teal-050); }

/* Footer: linkuri legale + ANPC */
footer.site .anpc {
  margin-top: 14px;
  font-size: 0.8rem;
  color: #90BEB7;
}
footer.site .anpc a { text-decoration: underline; }

/* Pagini legale (termeni / retur / confidențialitate) */
article.articol .actualizat { color: var(--text-soft); font-size: 0.85rem; margin-top: 6px; }

/* Formular de retragere din contract (OUG 34/2014, vizibil permanent) */
.formular-retragere {
  background: var(--teal-050);
  border: 1px solid var(--linie);
  border-radius: 16px;
  padding: 24px 28px 28px;
  margin-top: 28px;
}
.formular-retragere h2 { margin-top: 0 !important; }
.formular-retragere .btn { margin-top: 18px; }

/* ---------------- Testimoniale: "Ce spun oamenii" (index) ---------------- */
/* Secțiunea e hidden by default și se arată din shop.js DOAR dacă există
   testimoniale aprobate. Regula [hidden] e backstop explicit. */
section.bloc.testimoniale[hidden] { display: none; }

.grila-testimoniale {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}
.card-testimonial {
  margin: 0;
  background: var(--alb);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
  padding: 26px 24px 24px;
  box-shadow: var(--umbra-s);
  display: flex;
  flex-direction: column;
}
.card-testimonial::before {
  content: "\201E\201D"; /* ghilimele românești „” ca accent grafic */
  font-family: var(--font-head);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--turcoaz);
  letter-spacing: 2px;
}
.card-testimonial blockquote {
  margin: 10px 0 0;
  color: var(--text);
  font-size: 0.98rem;
  text-wrap: pretty;
}
.card-testimonial figcaption { margin-top: auto; padding-top: 16px; }
.card-testimonial figcaption strong {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--teal-700);
}
.card-testimonial figcaption span {
  display: block;
  margin-top: 2px;
  color: var(--text-soft);
  font-size: 0.86rem;
}
.testimoniale-cta { text-align: center; margin-top: 30px; color: var(--text-soft); }

/* ---------------- Pagina testimonial.html (formular părere) ---------------- */
.testimonial-pagina { max-width: 640px; margin: 0 auto; }
.formular-testimonial {
  background: var(--alb);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
  padding: 26px 28px 30px;
  margin-top: 26px;
  box-shadow: var(--umbra-s);
}
.formular-testimonial .consimtamant {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 18px;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--text);
}
.formular-testimonial .consimtamant input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--teal);
}
.formular-testimonial .nota-moderare {
  margin-top: 16px;
  font-size: 0.86rem;
  color: var(--text-soft);
  background: var(--mint);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 10px 14px;
}
.formular-testimonial button[type="submit"] { margin-top: 18px; }
.testimonial-succes {
  background: var(--alb);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
  padding: 30px 28px;
  margin-top: 26px;
  box-shadow: var(--umbra-s);
}
.testimonial-succes h2 { color: var(--teal-700); }
.testimonial-succes p { margin-top: 12px; color: var(--text-soft); text-wrap: pretty; }
.testimonial-succes .semnatura { margin-top: 18px; }

@media (max-width: 960px) {
  .grila-testimoniale { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .grila-testimoniale { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .modal-fundal { padding: 12px 10px 16px; }
  .cookie-banner { left: 10px; right: 10px; bottom: 10px; }
  .formular-testimonial { padding: 22px 18px 24px; }
}

/* ---------------- Motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* ---------------- Anti-bot: câmp momeală ----------------
   Invizibil și inaccesibil pentru om (inclusiv cititor de ecran și tastatură),
   dar prezent în DOM: boții care completează tot ce găsesc îl umplu, iar
   shop.js aruncă tăcut submitul. Nu folosi display:none — unii boți îl ignoră. */
.hp-camp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ═══════════════ Coșul ═══════════════
   Butonul din header + sertarul lateral. Markup-ul e injectat de cart.js, deci
   clasele de aici sunt singurul contract dintre CSS și JS. */

/* Două acțiuni pe card: coș (primar) și comandă directă (secundar).
   .btn-card e deja plin cu teal, deci secundarul are nevoie de o variantă proprie:
   contur, nu umplere. Altfel două butoane teal ar concura pe același card. */
.card-actiuni { display: flex; flex-direction: column; gap: 8px; }
.btn-card.subtire {
  background: transparent;
  color: var(--teal);
  border: 1.5px solid var(--linie);
  font-weight: 700;
}
.btn-card.subtire:hover { background: var(--teal-050); color: var(--teal-700); border-color: var(--teal); }
.btn-cos.adaugat { background: var(--turcoaz); }

/* Butonul de coș din header */
.buton-cos {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1.5px solid var(--linie);
  background: var(--alb);
  color: var(--teal);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.buton-cos:hover { background: var(--teal-050); border-color: var(--teal); }
.buton-cos svg { width: 21px; height: 21px; }
.cos-nr {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--turcoaz);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}

/* Sertarul */
.cos-fundal {
  position: fixed;
  inset: 0;
  background: rgba(10, 59, 55, 0.55);
  display: none;
  justify-content: flex-end;
  z-index: 300; /* peste modalul de comandă (200): coșul se deschide și peste el */
}
.cos-fundal.deschis { display: flex; }
.cos-panou {
  background: var(--mint);
  width: min(420px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--umbra-l);
  animation: cos-intra 0.22s ease-out;
}
@keyframes cos-intra { from { transform: translateX(100%); } to { transform: translateX(0); } }
/* Cine a cerut mai puțină mișcare nu primește sertarul care zboară. */
@media (prefers-reduced-motion: reduce) { .cos-panou { animation: none; } }

.cos-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--linie);
  background: var(--alb);
}
.cos-cap h2 { font-family: var(--font-head); font-size: 1.3rem; color: var(--text); font-weight: 600; }
.cos-cap .inchide {
  width: 34px; height: 34px;
  border: none; border-radius: 999px;
  background: transparent; color: var(--text-soft);
  font-size: 1rem; cursor: pointer;
}
.cos-cap .inchide:hover { background: var(--linie); }

.cos-corp { flex: 1; overflow-y: auto; padding: 8px 22px; }
.cos-gol { padding: 40px 0; text-align: center; color: var(--text-soft); font-style: italic; }

.cos-rand {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--linie);
}
.cos-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cos-nume { font-weight: 700; color: var(--text); font-size: 0.94rem; line-height: 1.3; }
.cos-buc { font-size: 0.8rem; color: var(--text-soft); }
.cos-cant { display: flex; align-items: center; gap: 2px; }
.cos-cant button {
  width: 30px; height: 30px;
  border: 1.5px solid var(--linie); border-radius: 8px;
  background: var(--alb); color: var(--teal);
  font-size: 1rem; font-weight: 800; cursor: pointer; line-height: 1;
}
.cos-cant button:hover:not(:disabled) { background: var(--teal-050); border-color: var(--teal); }
.cos-cant button:disabled { opacity: 0.4; cursor: default; }
.cos-qty { min-width: 26px; text-align: center; font-weight: 700; font-size: 0.9rem; }
.cos-sterge {
  grid-column: 1 / -1;
  justify-self: start;
  border: none; background: none; padding: 0;
  color: var(--text-soft); font-size: 0.78rem;
  text-decoration: underline; cursor: pointer;
}
.cos-sterge:hover { color: var(--text); }

.cos-jos { padding: 18px 22px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linie); background: var(--alb); }
.cos-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.cos-total span { font-weight: 700; color: var(--text); }
.cos-suma { font-family: var(--font-head); font-size: 1.5rem; font-weight: 600; color: var(--teal); }
/* "Nu tin depozit": modelul explicat omului, inainte de grila de produse.
   Fundal menta pal (tiparul .nota-claudia, dovedit pe site), fara bara laterala
   colorata - aia e semnatura vizuala a UI-urilor generate de AI. */
.cum-ajunge {
  background: var(--teal-050);
  border-radius: 16px;
  padding: 26px 28px;
  margin-bottom: 40px;
  max-width: 62em;
}
.cum-ajunge h3 {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--teal-700);
  margin-bottom: 10px;
}
.cum-ajunge-intro { color: var(--text); line-height: 1.6; margin-bottom: 16px; }
.cum-ajunge-pasi {
  list-style: none;
  counter-reset: pas;
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
}
/* Pozitionare absoluta, NU grid pe <li>: intr-un container grid fiecare bucata de
   text devine item separat, deci textul de dupa <strong> cadea in coloana de 26px
   si curgea cate un cuvant pe rand. Vazut pe captura, nu in cod. */
.cum-ajunge-pasi li {
  counter-increment: pas;
  position: relative;
  padding-left: 38px;
  min-height: 26px;
  line-height: 1.55;
  font-size: 0.94rem;
}
.cum-ajunge-pasi li::before {
  content: counter(pas);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cum-ajunge-pasi strong { color: var(--teal-700); }
.cum-ajunge-nota { font-size: 0.9rem; color: var(--text-soft); line-height: 1.55; }
.cum-ajunge-nota a { color: var(--teal-700); font-weight: 700; }

@media (max-width: 640px) {
  .cum-ajunge { padding: 20px 18px; border-radius: 14px; }
  .cum-ajunge h3 { font-size: 1.15rem; }
}

/* Verificarea de farmacist: se distinge de restul formularului fiindca E oferta, nu un
   camp administrativ. Fundal menta (tiparul .nota-claudia, dovedit pe site), fara bara
   laterala colorata - aia e semnatura vizuala AI, interzisa prin regula proprie. */
.verificare-bloc {
  background: var(--teal-050);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 18px 0 22px;
}
.verificare-bloc .acord { margin: 0; }
.verificare-bloc .acord strong { color: var(--teal-700); }
#verificare-detalii { margin-top: 14px; }
#verificare-detalii label { margin-top: 0; }
#verificare-detalii textarea { min-height: 88px; }

/* Transportul se vede din sertarul cosului, nu abia la checkout. */
.cos-transport {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--teal-700);
  background: var(--teal-050);
  border-radius: 10px;
  padding: 8px 11px;
  margin-bottom: 10px;
  line-height: 1.4;
}
.cos-nota { font-size: 0.76rem; color: var(--text-soft); margin-bottom: 12px; line-height: 1.4; }
.cos-finalizeaza { display: block; text-decoration: none; }

/* ═══════════════ Checkout + confirmare ═══════════════ */

.wrap.ingust { max-width: 900px; }

.checkout-grila {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
  margin-top: 28px;
}
/* Pe telefon rezumatul stă PRIMUL: omul vede ce comandă înainte să scrie date. */
@media (max-width: 780px) {
  .checkout-grila { grid-template-columns: 1fr; }
}

.checkout-rezumat {
  background: var(--alb);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
  padding: 22px;
  box-shadow: var(--umbra-s);
  position: sticky;
  top: 90px; /* sub headerul sticky */
}
@media (max-width: 780px) { .checkout-rezumat { position: static; } }
.checkout-rezumat h2 { font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; margin-bottom: 12px; }

.rezumat-rand {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--linie);
  font-size: 0.9rem;
}
.rezumat-nume { font-weight: 700; color: var(--text); line-height: 1.3; }
.rezumat-buc { color: var(--text-soft); font-size: 0.84rem; white-space: nowrap; }
.rezumat-pret { font-weight: 700; color: var(--text); white-space: nowrap; }
/* Subtotalul si transportul: aceleasi randuri, dar 2 coloane (n-au bucati) si
   greutate mai mica decat produsele - sunt context pentru total, nu produse. */
.rezumat-subtotal, .rezumat-transport { grid-template-columns: 1fr auto; }
.rezumat-subtotal .rezumat-nume,
.rezumat-transport .rezumat-nume { font-weight: 500; color: var(--text-soft); }
.rezumat-transport { border-bottom: none; }
.rezumat-transport .rezumat-pret.e-gratuit { color: var(--teal-700); }

.rezumat-total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--linie); }
.rezumat-total span { font-weight: 700; }
.rezumat-total strong { font-family: var(--font-head); font-size: 1.4rem; font-weight: 600; color: var(--teal); }

/* Pragul de transport gratuit: informatie reala, pe fundalul mentat al site-ului
   (.nota-claudia), nu o bara colorata laterala - aia e semnatura vizuala AI. */
.rezumat-prag {
  margin-top: 10px;
  padding: 9px 12px;
  background: var(--teal-050);
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--teal-700);
  line-height: 1.4;
}

.rezumat-nota { font-size: 0.76rem; color: var(--text-soft); line-height: 1.45; margin-top: 8px; }
.rezumat-inapoi { display: inline-block; margin-top: 12px; font-size: 0.84rem; color: var(--teal); }

.checkout-form-bloc {
  background: var(--alb);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
  padding: clamp(20px, 3vw, 30px);
  box-shadow: var(--umbra-s);
}
.checkout-form-bloc h2 {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 600;
  margin-top: 22px;
}
.checkout-form-bloc h2:first-child { margin-top: 0; }
.camp-ajutor { font-size: 0.78rem; color: var(--text-soft); margin-top: 5px; }

/* Plata: opțiuni mari, greu de ratat cu degetul */
.plata-optiuni { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.plata-op {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.plata-op:hover:not(.indisponibil) { border-color: var(--teal); background: var(--mint); }
.plata-op:has(input:checked) { border-color: var(--teal); background: var(--teal-050); }
.plata-op input { margin-top: 3px; accent-color: var(--teal); flex: none; }
.plata-text { display: flex; flex-direction: column; gap: 3px; }
.plata-text strong { font-size: 0.94rem; color: var(--text); }
.plata-text span { font-size: 0.8rem; color: var(--text-soft); line-height: 1.4; }
/* Cardul nu e încă pornit: se vede că există, se vede că nu merge azi. */
.plata-op.indisponibil { opacity: 0.55; cursor: not-allowed; }
.plata-curand {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--teal);
  background: var(--teal-050);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
}

/* Acordul de marketing: NEbifat din construcție, separat de T&C. */
.acord {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--mint);
  border: 1px solid var(--linie);
  border-radius: 12px;
  font-size: 0.84rem;
  color: var(--text-soft);
  line-height: 1.5;
  cursor: pointer;
}
.acord input { margin-top: 2px; accent-color: var(--teal); flex: none; }
.acord-legal { font-size: 0.78rem; color: var(--text-soft); line-height: 1.5; margin: 14px 0 16px; }

.checkout-gol { text-align: center; padding: 40px 0; }
.checkout-gol p { color: var(--text-soft); font-style: italic; margin-bottom: 18px; }
.checkout-gol .btn-card { display: inline-block; width: auto; text-decoration: none; }

/* Confirmarea */
.comanda-primita { text-align: center; max-width: 620px; margin: 0 auto; padding: 20px 0; }
.bifa-mare {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px; height: 68px;
  border-radius: 999px;
  background: var(--teal-050);
  color: var(--teal);
  margin-bottom: 18px;
}
.bifa-mare svg { width: 34px; height: 34px; }
.comanda-primita h1 { font-family: var(--font-head); font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 600; color: var(--text); }
.numar-mare { font-family: var(--font-head); font-size: 1.1rem; color: var(--teal); margin-top: 8px; }
.comanda-primita .text-mare { font-size: 1.02rem; color: var(--text-soft); line-height: 1.65; margin-top: 16px; }
.ce-urmeaza {
  text-align: left;
  background: var(--alb);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
  padding: 22px;
  margin: 26px 0;
  box-shadow: var(--umbra-s);
}
.ce-urmeaza h2 { font-family: var(--font-head); font-size: 1.1rem; font-weight: 600; margin-bottom: 12px; }
.ce-urmeaza ol { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.ce-urmeaza li { font-size: 0.92rem; color: var(--text-soft); line-height: 1.55; }
.ce-urmeaza li strong { color: var(--text); }
.comanda-primita .text-mic { font-size: 0.82rem; color: var(--text-soft); line-height: 1.55; margin-bottom: 22px; }
.comanda-primita .btn-card { display: inline-block; width: auto; text-decoration: none; }

/* Ținte de atingere pe ecrane tactile.
   Măsurat live pe 500px lățime, înainte de fix: butonul „Adaugă în coș" avea 39px
   înălțime, +/- din coș 30x30, „scoate" 37x14. Minimul rezonabil e 44px (Apple HIG;
   Material cere 48dp). Sub el, degetul ratează exact butonul care aduce banii.
   `pointer: coarse` = se aplică DOAR unde se apasă cu degetul: designul pe desktop,
   unde ai mouse și precizie, rămâne neatins. */
@media (pointer: coarse) {
  .card-actiuni .btn-card { min-height: 44px; }
  .cos-cant button { width: 40px; height: 40px; }
  .cos-sterge { padding: 8px 0; min-height: 32px; }
  .buton-cos { width: 46px; height: 46px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Pentru branduri (B2B) — pentru-branduri.html
   ───────────────────────────────────────────────────────────────────────────
   Pagina refolosește tot ce exista deja: .hero, .banda-incredere, .bloc,
   .sectiune-cap, .promisiuni, .card-articol, .btn. Clasele de aici sunt DOAR
   ce n-avea corespondent: serviciul cu preț, citatul din lege, formularul.
   Zero culori noi (paleta rămâne de trei), zero bară colorată pe latura
   cardului. Prefix .b2b- ca să nu atingă nicio pagină existentă.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------------- Serviciile cu preț ---------------- */
/* Patru servicii = patru coloane pe desktop, ca prețurile să se compare dintr-o
   privire. La 272px min cădeau 3+1, iar cardul orfan de pe rândul doi arăta a
   greșeală, nu a ofertă. 240px min => 4 pe lat în wrap-ul de 1140, apoi 2, apoi 1. */
.b2b-servicii {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(18px, 2vw, 24px);
  margin-top: 44px;
}
.b2b-serviciu {
  background: var(--alb);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
  padding: 28px 26px;
  box-shadow: var(--umbra-s);
  display: flex;
  flex-direction: column;
}
.b2b-serviciu h3 { font-size: 1.22rem; color: var(--teal-700); }
.b2b-pret {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.62rem;
  color: var(--teal);
  line-height: 1.1;
  margin-top: 12px;
}
.b2b-pret span {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: 6px;
}
.b2b-serviciu p { color: var(--text-soft); font-size: 0.97rem; margin-top: 14px; flex: 1; text-wrap: pretty; }
.b2b-serviciu .btn-card { margin-top: 22px; }
.b2b-nota-pret {
  margin-top: 28px;
  font-size: 0.88rem;
  color: var(--text-soft);
  text-wrap: pretty;
  max-width: 720px;
}

/* ---------------- Cadrul legal ----------------
   Citatul stă într-o casetă mentă, NU cu filet colorat pe o latură. */
.b2b-lege { display: grid; gap: 18px; margin-top: 40px; }
.b2b-articol {
  background: var(--alb);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
  padding: clamp(22px, 3vw, 28px);
  box-shadow: var(--umbra-s);
}
.b2b-temei {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.71rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
}
.b2b-articol h3 { font-size: 1.16rem; margin-top: 7px; color: var(--text); }
.b2b-articol blockquote {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--teal-900);
  background: var(--mint);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 15px 18px;
  margin-top: 13px;
  text-wrap: pretty;
}
.b2b-traducere { color: var(--text-soft); font-size: 0.96rem; margin-top: 13px; text-wrap: pretty; }
.b2b-traducere strong { color: var(--teal-700); font-weight: 800; }

/* ---------------- Mostra gratuită ---------------- */
.b2b-mostra {
  background: var(--alb);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
  box-shadow: var(--umbra-m);
  padding: clamp(28px, 4vw, 44px);
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.b2b-mostra h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-top: 8px; text-wrap: balance; }
.b2b-mostra h2 em { color: var(--teal); font-style: italic; }
.b2b-mostra p { color: var(--text-soft); margin-top: 14px; font-size: 1.06rem; text-wrap: pretty; }
.b2b-mostra .btn { margin-top: 24px; }

/* ---------------- Portofoliu (articolele ei live) ---------------- */
.b2b-portofoliu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 3vw, 28px);
  margin-top: 40px;
}

/* ---------------- Formular ---------------- */
.b2b-form-bloc {
  background: var(--alb);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
  box-shadow: var(--umbra-s);
  padding: clamp(26px, 4vw, 38px);
  max-width: 660px;
  margin: 38px auto 0;
}
.b2b-form-bloc label { display: block; font-weight: 700; font-size: 0.95rem; margin-top: 20px; }
.b2b-form-bloc label.b2b-primul { margin-top: 0; }
.b2b-form-bloc input[type="text"],
.b2b-form-bloc input[type="email"],
.b2b-form-bloc textarea {
  width: 100%;
  margin-top: 6px;
  padding: 11px 14px;
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  background: #fff;
}
.b2b-form-bloc input:focus,
.b2b-form-bloc textarea:focus { outline: none; border-color: var(--teal); }
.b2b-form-bloc textarea { min-height: 130px; resize: vertical; }
.b2b-form-bloc button[type="submit"] { margin-top: 24px; width: 100%; }
.b2b-form-nota { margin-top: 16px; font-size: 0.84rem; color: var(--text-soft); text-wrap: pretty; }
.b2b-succes {
  background: var(--mint);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
  padding: clamp(28px, 4vw, 40px);
  max-width: 660px;
  margin: 38px auto 0;
  text-align: center;
}
.b2b-succes h3 { font-size: 1.5rem; color: var(--teal-700); }
.b2b-succes p { color: var(--text-soft); margin-top: 12px; text-wrap: pretty; }
.b2b-succes .semnatura { margin-top: 18px; }

/* Titlurile serviciilor au 1 sau 2 rânduri. Fără înălțime rezervată, prețurile
   stau la cote diferite și rândul de carduri arată zimțat. Doar pe lat: la o
   coloană titlul e mereu pe un rând, iar rezervarea ar lăsa o gaură.
   Rămâne ca PLASĂ pentru browserele fără subgrid; unde subgrid merge, regula de
   mai jos o anulează, fiindcă rezervarea fixă e o aproximare, nu o aliniere. */
@media (min-width: 641px) {
  .b2b-serviciu h3 { min-height: 2.28em; }
}

/* Cardurile de serviciu se aliniază pe rânduri COMUNE (subgrid) ─────────────────
   Același defect pe care l-am reparat deja la cardurile de produs (vezi § grila de
   produse), rămas nereparat aici: fiecare card era o coloană flex independentă, deci
   titlul, prețul, descrierea și butonul cădeau la cote diferite de la un card la
   altul. Cu patru servicii ale căror descrieri au între 24 și 61 de cuvinte, rândul
   arăta zimțat pe orizontală — reproșul lui Petru, cu captură: „nu are spațiere, nu
   sunt încadrate corect".
   `min-height` pe titlu rezerva doar rândul titlului și doar cu o valoare ghicită;
   descrierea rămânea nealiniată, iar butonul era împins de `flex: 1` pe paragraf,
   ceea ce aliniază JOSUL, nu și restul.
   Fix: cardul devine subgrid al grilei, cu un rând per bandă (titlu, preț, descriere,
   buton). Înălțimea fiecărui rând o dă cel mai înalt conținut de pe rândul acela, deci
   textele de lungimi diferite nu se mai împing între ele. Rândurile sunt atribuite
   explicit, ca un card fără vreo bandă să nu decaleze restul.
   `align-content: start` pe descriere ține textul sus în rândul lui, altfel un
   paragraf scurt plutea în mijlocul unui rând înalt — exact gaura din captură.
   Subgrid: Chrome 117+, Safari 16+, Firefox 71+. Sub el, flex-ul de mai sus rămâne. */
@media (min-width: 641px) {
  @supports (grid-template-rows: subgrid) {
    .b2b-servicii { grid-auto-rows: min-content; }
    .b2b-servicii > .b2b-serviciu {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 4;
      row-gap: 0;
    }
    .b2b-serviciu h3      { grid-row: 1; min-height: 0; align-self: start; }
    .b2b-serviciu .b2b-pret { grid-row: 2; align-self: start; }
    .b2b-serviciu > p:not(.b2b-pret) { grid-row: 3; align-self: start; flex: none; }
    .b2b-serviciu .btn-card { grid-row: 4; align-self: end; }
  }
}

@media (max-width: 640px) {
  .b2b-servicii { grid-template-columns: 1fr; }
  .b2b-portofoliu { grid-template-columns: 1fr; }
  .b2b-mostra { text-align: left; }
  .b2b-form-bloc button[type="submit"] { min-height: 48px; }
}


/* Varianta fara poza a blocului „cine alege" (pagina B2B): o singura coloana.
   Vezi comentariul din pentru-branduri.html - poza in kimono contrazice mesajul acolo. */
.cine-alege.fara-foto { grid-template-columns: 1fr; }

/* Pictograma SAL (Ordinul ANPC 449/2022 art. 2(2), modif. 270/2026): elementul are
   exact 250x50 cum cere ordinul, iar imaginea oficiala (500x124, raport 4:1) sta in el
   cu object-fit: contain. Alternativa ar fi fost s-o intindem la 5:1 = deformarea unui
   insemn oficial ca sa iasa cifra. Aia nu e conformitate. */
/* Pictograma SAL la proportiile ei reale.
   Ordinul ANPC 270/2026, art. 2 alin. (2) cere 250 (L) x 50 (H) px, dar fisierul
   OFICIAL publicat de ANPC in Anexa 2 e 500x124, adica 4:1, nu 5:1 — contradictia
   e in publicatia lor, nu la noi (verificat 16 aug 2026: fisierul din img/ e un
   downscale pixel-perfect al oficialului, diferenta medie 0,00/255).
   Pana azi elementul era fortat la 250x50 cu object-fit: contain, deci insemnul se
   incadra si se randa la ~202x50: NEdeformat, dar mai INGUST decat cere ordinul.
   Acum se randeaza la proportia lui, 250x62: nicio dimensiune nu mai e sub cea
   ceruta si insemnul nu e deformat. A-l intinde la 5:1 ca sa iasa cifra ar
   deforma un insemn oficial, adica opusul conformarii. */
.pictograma-anpc {
  width: 250px;
  height: auto;
  display: block;
  margin-top: 6px;
}

/* ── Tinta de atins pe mobil ──────────────────────────────────────────────────
   Butoanele de actiune aveau 39px inaltime (padding 10px + font 0.86rem). Sub
   pragul de 44x44 din WCAG 2.5.5 / Apple HIG — pe degetul mediu, la scroll, rateaza.
   Verificat 17 iul pe viewport 390px: `.btn-card.plin` = 285x39.
   Se ridica DOAR sub 640px: pe desktop mouse-ul e precis si butonul de 39px arata
   mai bine in grila de carduri. `min-height` in loc de `height`: textul lung (ex.
   „Comanda cu obligatie de plata") trebuie sa poata trece pe doua randuri fara sa fie
   taiat.
   Bifele si radio-urile NU au nevoie de fix: sunt invelite in <label>, deci zona reala
   de atins e toata eticheta (verificat: 249x181, 285x117). Input-ul de 13x13 e un fals
   pozitiv daca te uiti doar la el.
   Inputurile de text sunt deja >=16px, deci iOS nu face zoom la focus. */
@media (max-width: 640px) {
  .btn-card,
  .btn,
  button[type="submit"] {
    min-height: 44px;
  }
  .card-produs .btn-card {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBIL — 18 iul 2026
   ───────────────────────────────────────────────────────────────────────────────
   Cerut de Petru: „mobilul este cel mai important, fluidizează și fă mobilul mult
   mai plăcut". Măsurat înainte (tools/claudia/scripts/audit-mobil.py, 9 pagini ×
   3 telefoane, dovezi în evidence/audit-mobil/inainte/):

     · pagina de acasă = 48.163px pe iPhone 14 Pro  → ~57 ecrane de derulat
     · un card de produs = 790px                    → 1 card ≈ 1 ecran
     · bandă 190px + header LIPIT 188px = 378px     → 44% din ecran, header-ul
       permanent, la fiecare derulare
     · meniul rupt pe 2 rânduri, ținte de 23px      → sub jumătate din pragul de 44
     · textarea de adresă la checkout = 13,3px      → iOS dă zoom la focus, pe
       calea banilor (comentariul din cod zicea că totul e ≥16px: fals, măsurat)

   Tot ce urmează e ADITIV și trăiește sub praguri de mobil sau `pointer: coarse`.
   Desktopul nu se atinge: pe mouse, precizia există și densitatea arată mai bine.
   Paleta, fonturile, prețurile și copy-ul rămân neschimbate — alea sunt deciziile
   lui Petru. Se schimbă doar FORMA, care e partea mea (regula lui, 12 iul).
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Zona sigură: telefoanele cu ecran până în margine ──────────────────────
   `viewport-fit=cover` (pus în <head>) lasă pagina să folosească tot ecranul, dar
   atunci conținutul poate ajunge sub crestătură sau sub bara de gesturi. `env()`
   pune înapoi exact cât trebuie, zero pe telefoanele fără crestătură. */
header.site .wrap,
.banda-sus {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* ── 2. Focus vizibil, global ──────────────────────────────────────────────────
   Nu exista niciunul (WCAG 2.4.7). Hover-ul avea `translateY(-2px)`, focusul
   n-avea nimic: cine navighează cu tastatura sau cu tehnologie asistivă nu vedea
   unde e. `:focus-visible`, nu `:focus`, ca să nu apară inelul la click de mouse. */
:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 6px;
}
.btn:focus-visible,
.btn-card:focus-visible,
.buton-cos:focus-visible { outline-offset: 3px; }

/* ── 3. Header compact + se dă la o parte când derulezi ────────────────────────
   Era: logo pe un rând, meniul rupt pe două, coșul singur pe al treilea = 188px
   LIPIȚI, adică 22% din ecran pierduți permanent (25% pe 360×740).
   Acum: un rând (logo + coș) + o bandă de meniu care se derulează pe orizontală.
   ~104px, iar la derulare în jos dispare de tot (vezi mobil.js): în timp ce omul
   se uită la produse are ecranul întreg, iar la prima derulare în sus meniul e
   înapoi. Asta e „fluid": nu-i iei nimic și nu-l pui să caute. */
@media (max-width: 780px) {
  header.site {
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
  }
  header.site.header-ascuns { transform: translateY(-100%); }

  header.site .wrap {
    padding-top: 9px;
    padding-bottom: 0;
    row-gap: 0;
    align-items: center;
  }
  .logo { font-size: 1.16rem; }

  /* Coșul: lângă logo, în dreapta, nu pe rândul lui. */
  .buton-cos { order: 2; margin-left: auto; }

  /* Meniul: o bandă care se derulează, nu un bloc care se rupe. Toate cele 5
     linkuri rămân VIZIBILE. NN/g a măsurat că navigația ascunsă în hamburger e
     folosită în 57% din cazuri față de 86% când linkurile se văd (n=179), și că
     pe mobil crește timpul de căutare cu 15%. Deci nu ascundem, derulăm. */
  nav.main {
    order: 3;
    width: 100%;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: calc(-1 * max(16px, env(safe-area-inset-left)));
    margin-right: calc(-1 * max(16px, env(safe-area-inset-right)));
    padding: 6px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
    /* Estompare la marginea dreaptă = semnalul că mai e conținut dincolo de ea. */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
  }
  nav.main::-webkit-scrollbar { display: none; }

  nav.main a {
    margin-left: 0;
    flex: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    min-height: 44px;          /* era 23px: sub jumătate din pragul Apple HIG */
    padding: 0 15px;
    border-radius: 999px;
    border-bottom: 0;
    font-size: 0.92rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--linie);
  }
  nav.main a.activ {
    background: var(--teal-050);
    border-color: var(--teal);
    color: var(--teal);
  }
}

/* ── 4. Banda de sus: două rânduri, nu trei ────────────────────────────────────
   Textul rămâne întreg (e promisiunea comercială, nu-l tai eu). Se strânge
   tipografic. Ea derulează odată cu pagina, deci costă o dată, nu la fiecare
   ecran — de-asta o las, spre deosebire de header. */
@media (max-width: 640px) {
  .banda-sus {
    font-size: 0.79rem;
    line-height: 1.4;
    padding: 8px 16px;
    text-wrap: balance;
  }
}

/* ── 5. Cardul de produs: din 790px în ~390px ──────────────────────────────────
   Era o coloană verticală: plăcuță 315×315, apoi categorie, titlu, nota Claudiei,
   preț, DOUĂ butoane pe toată lățimea, apoi subsolul legal. Un card ≈ un ecran,
   deci nu puteai compara două produse fără să derulezi.

   Acum, pe telefon, aceeași bucată de HTML se rearanjează în grilă: plăcuța 108px
   în stânga, iar categoria + titlul + prețul urcă lângă ea. Nota Claudiei rămâne
   ÎNTREAGĂ pe toată lățimea — e singurul lucru pe care concurența nu-l are, nu se
   taie ca să încapă. Butoanele trec unul lângă altul.

   `display: contents` pe învelișuri: copiii lor devin celule în grila cardului,
   fără să schimb o virgulă de HTML. Contează, fiindcă HTML-ul e GENERAT din DB de
   build-produse.py — o schimbare de markup s-ar fi pierdut la următoarea rulare.

   Subsolul legal (EFSA + „supliment alimentar") NU se ascunde și NU se scurtează:
   obligația e de prezență. Se ridică doar de la 11,5px la 12,3px, ca să se poată
   citi, și se strânge pe verticală. */
@media (max-width: 640px) {
  .grila-produse { gap: 16px; }

  .card-produs {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    grid-template-areas:
      "poza  cat"
      "poza  titlu"
      "poza  rating"
      "poza  pret"
      "sfat  sfat"
      "jos   jos"
      "subsol subsol";
    align-content: start;
    column-gap: 14px;
    row-gap: 0;
    padding: 14px;
  }
  .card-produs .poza {
    grid-area: poza;
    width: 108px;
    height: 108px;
    aspect-ratio: 1;
    align-self: start;
  }
  .card-continut { display: contents; }
  .card-produs .eticheta-cat { grid-area: cat; margin: 0 0 3px; }
  .card-produs h3 { grid-area: titlu; font-size: 1.14rem; }
  .card-jos.comanda { display: contents; }
  .card-produs .pret-info { grid-area: pret; text-align: left; margin-top: 6px; }
  .card-produs .pret-info.are-pret { font-size: 1.3rem; }

  /* Nota Claudiei: lățime plină, sub plăcuță. Fără filet colorat pe latură pe
     telefon — la 345px lățime, filetul + retragerea mâncau ~14px din rând. */
  .card-produs .sfat {
    grid-area: sfat;
    margin-top: 14px;
    padding-left: 0;
    border-left: 0;
  }
  .card-produs .sfat p { font-size: 0.97rem; }

  /* Două acțiuni, una lângă alta, cu ierarhie clară: „Adaugă în coș" ia mai mult
     spațiu fiindcă e acțiunea magazinului; „Comandă direct" rămâne pentru cine
     vrea un singur produs. Economie: 96px → 46px pe fiecare card. */
  .card-produs .card-actiuni {
    grid-area: jos;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 8px;
    margin-top: 14px;
  }
  .card-produs .card-actiuni .btn-card {
    width: 100%;
    min-height: 46px;
    padding: 8px 10px;
    font-size: 0.88rem;
    line-height: 1.2;
  }

  .card-produs .subsol {
    grid-area: subsol;
    font-size: 0.77rem;   /* 12,3px: era 11,5px, sub pragul de citit */
    line-height: 1.45;
    margin-top: 12px;
    padding-top: 10px;
  }

  .card-produs .produs-rating { grid-area: rating; margin: 0 0 4px; }

  /* Insigna „alegerea mea" trebuie să încapă în plăcuța de 108px. */
  .card-produs .tag-aleasa {
    font-size: 0.6rem;
    padding: 3px 7px;
    top: 6px;
    left: 6px;
  }
  .card-produs .simbol-poza.mare { font-size: 2.1rem; }
  .card-produs .simbol-poza.mediu { font-size: 1.5rem; }
  .card-produs .simbol-poza.mic { font-size: 1.15rem; }
  .card-produs .doza-poza { font-size: 0.58rem; bottom: 5px; right: 6px; }
}

/* ── 6. Bara de căutare în raft ────────────────────────────────────────────────
   45 de produse într-o listă plată = 45 de ecrane. Filtrul se construiește din
   mobil.js peste HTML-ul existent, deci fără JS raftul rămâne întreg (nimic nu
   dispare pentru un crawler sau pentru cine are JS oprit).
   Lipită sub header ca să rămână la îndemână în timp ce derulezi raftul. */
.cauta-raft {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--alb);
  padding: 12px 0 10px;
  margin-bottom: 4px;
}
.cauta-raft-camp { position: relative; display: block; }
.cauta-raft input {
  width: 100%;
  min-height: 48px;
  padding: 12px 44px 12px 44px;
  font-family: var(--font-body);
  font-size: 16px;              /* sub 16px, iOS dă zoom la focus */
  color: var(--text);
  background: var(--mint);
  border: 1.5px solid var(--linie);
  border-radius: 999px;
  -webkit-appearance: none;
}
.cauta-raft input::placeholder { color: #6B6862; }
.cauta-raft input:focus { outline: none; border-color: var(--teal); background: #fff; }
.cauta-raft .lupa {
  position: absolute;
  left: 15px; top: 50%;
  transform: translateY(-50%);
  width: 19px; height: 19px;
  color: var(--teal);
  pointer-events: none;
}
.cauta-raft .sterge {
  position: absolute;
  right: 5px; top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 0; background: none; cursor: pointer;
  color: var(--text-soft);
  font-size: 1.1rem;
  border-radius: 999px;
}
.cauta-raft.are-text .sterge { display: inline-flex; }
.cauta-raft .numar {
  display: block;
  margin-top: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--teal-700);
  min-height: 1.2em;
}
.grup-produse[hidden], .card-produs[hidden] { display: none !important; }
.raft-gol {
  padding: 26px 4px;
  color: var(--text-soft);
  text-wrap: pretty;
}
.raft-gol strong { color: var(--text); }

@media (min-width: 781px) {
  /* Pe desktop raftul se vede oricum aproape întreg: căutarea rămâne, dar nu se
     lipește de ecran, ca să nu fure spațiu unde nu e nevoie. */
  .cauta-raft { position: static; }
}

/* ── 7. Bara lipită de jos: coșul, în zona degetului ───────────────────────────
   Apare DOAR când ai ceva în coș. Măsurat pe un test A/B publicat (Growth Rock,
   3000+ evenimente pe variantă, 98% semnificație): varianta „drawer" de jos pe
   mobil = +5,2% comenzi, +11,8% clicuri pe adaugă-în-coș. Varianta care doar te
   derulează înapoi sus la buton = zero efect. Deci bara duce direct la finalizare.
   Conține strict preț + un buton, nimic altceva. */
.bara-jos {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px max(16px, env(safe-area-inset-right))
           max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.3) blur(12px);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  border-top: 1px solid var(--linie);
  box-shadow: 0 -8px 26px rgba(6, 78, 71, 0.09);
  transform: translateY(110%);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bara-jos.pornita { display: flex; }
.bara-jos.vizibila { transform: translateY(0); }
.bara-jos .rezumat { flex: 1; min-width: 0; line-height: 1.25; }
.bara-jos .rezumat b {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.16rem;
  color: var(--teal);
}
.bara-jos .rezumat span {
  display: block;
  font-size: 0.79rem;
  color: var(--text-soft);
}
.bara-jos .btn-card {
  flex: none;
  min-height: 48px;
  padding: 10px 20px;
  width: auto;
}
@media (min-width: 781px) { .bara-jos { display: none !important; } }

/* Bara stă peste conținut: pagina primește loc dedesubt ca să nu acopere
   subsolul legal (ANPC/SAL trebuie să rămână atins, nu doar prezent). */
body.are-bara-jos { padding-bottom: 78px; }

/* ── 8. Ținte de atins: restul linkurilor ─────────────────────────────────────
   Blocul `pointer: coarse` de mai sus acoperea butoanele de card și coșul.
   Măsurat: 30 de ținte distincte sub 44px rămâneau — linkurile din subsol, cele
   legale (retur, confidențialitate, ANPC), „Citește articolul". Sunt exact cele
   pe care legea cere să le poți atinge. */
@media (pointer: coarse) {
  footer.site a,
  .legal a,
  .disclaimer a,
  a.citeste,
  a.inapoi-blog {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  footer.site nav a, footer.site li a { min-height: 44px; }
  .cos-sterge { min-height: 44px; }
}

/* ── 9. Formulare: fără zoom la focus pe iOS ──────────────────────────────────
   Safari pe iOS mărește pagina automat la focus dacă fontul câmpului e sub 16px,
   și aruncă layoutul. Măsurat: `textarea` de adresă la checkout = 13,3px, plus
   câmpurile din modalul de comandă. E pe calea banilor. */
input, select, textarea { font-size: max(16px, 1rem); }
@media (max-width: 640px) {
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="search"], select, textarea {
    font-size: 16px;
    min-height: 48px;
    border-radius: 12px;
  }
  textarea { min-height: 96px; }
  .modal-comanda { border-radius: 20px 20px 0 0; }
  .modal-fundal { padding: 0; align-items: flex-end; }
  .modal-comanda { max-width: 100%; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}

/* ── 10. Mai puțin drum de degete la checkout ─────────────────────────────────
   Rezumatul comenzii stătea sub formular pe telefon: completai tot, apoi derulai
   ca să vezi ce plătești. Acum stă primul: vezi totalul cu transport ÎNAINTE să
   începi să scrii. 39% dintre abandonurile de coș vin din costuri neașteptate
   (Baymard, meta-analiză pe 50 de studii), iar în RO afișarea prețului total,
   transport inclus, e cerință OUG 34/2014. */
@media (max-width: 780px) {
  .checkout-grila { display: flex; flex-direction: column; }
  .checkout-rezumat { order: -1; }
}

/* ── 11. Mișcarea, pentru cine o vrea redusă ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  header.site, .bara-jos { transition: none; }
  header.site.header-ascuns { transform: none; }
}

/* ── 12. Reparații găsite la auditul advers (18 iul) ───────────────────────────

   a) Grila depășea pe ecrane de 320px: `minmax(290px, 1fr)` forțează un track de
      290px într-un container de 272px utili. `min(290px, 100%)` lasă track-ul să
      coboare sub 290 când nu are loc. Peste 320px nu se schimbă nimic.
   b) Legalul din subsol era #6F9A93 pe #0A3B37 = 3,97:1, sub pragul AA de 4,5:1,
      la 12,5px. Sunt exact rândurile pe care legea cere să le poți citi (firmă,
      CUI, ANPC). #A6D3CC = 7,56:1, aceeași familie de culoare.
   c) Etichetă doar pentru cititoarele de ecran (căutarea în raft are o lupă
      desenată, nu un cuvânt). */
.grila-produse { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }
footer.site .legal { color: #A6D3CC; }
footer.site .disclaimer { color: #A6D3CC; }
.sr-doar {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── 13. Imaginile: webp, și mai mici pe telefon ──────────────────────────────
   Cele două fundaluri erau PNG de 455KB și 254KB, deși stau sub un strat alb de
   78-95% opacitate: nimeni nu le vede la rezoluția aia. În webp: 19KB și 21KB
   (-96%), iar pe telefon o variantă de 900px lățime, de 13-15KB.
   `image-set` alege singur; declarația `url()` de deasupra rămâne pentru
   browserele care nu o cunosc, deci nimeni nu rămâne fără fundal. */
.hero {
  background-image: url("img/hero-apa-si-cer-01.png");
  background-image: image-set(
    url("img/hero-apa-si-cer-01.webp") type("image/webp"),
    url("img/hero-apa-si-cer-01.png") type("image/png"));
}
.blog-teaser {
  background-image:
    linear-gradient(90deg, rgba(240,253,250,0.5) 0%, rgba(240,253,250,0.82) 60%, rgba(240,253,250,0.95) 100%),
    url("img/section-botanic-02.png");
  background-image:
    linear-gradient(90deg, rgba(240,253,250,0.5) 0%, rgba(240,253,250,0.82) 60%, rgba(240,253,250,0.95) 100%),
    image-set(url("img/section-botanic-02.webp") type("image/webp"),
              url("img/section-botanic-02.png") type("image/png"));
}
@media (max-width: 780px) {
  .hero {
    background-image: image-set(
      url("img/hero-apa-si-cer-01-900.webp") type("image/webp"),
      url("img/hero-apa-si-cer-01.png") type("image/png"));
  }
  .blog-teaser {
    background-image:
      linear-gradient(180deg, rgba(240,253,250,0.62) 0%, rgba(240,253,250,0.93) 100%),
      image-set(url("img/section-botanic-02-900.webp") type("image/webp"),
                url("img/section-botanic-02.png") type("image/png"));
  }
}

/* ── 14. Ultimele ținte, după re-măsurare ─────────────────────────────────────
   Logo-ul e primul link din pagină și duce acasă: 31px era sub prag. Linkurile
   rămase sub 44px sunt cele din mijlocul frazelor (termeni, confidențialitate) —
   alea sunt exceptate explicit de WCAG 2.5.8 („inline: ținta e într-o propoziție,
   mărimea îi e dată de înălțimea rândului"). Nu le umflu: aș rupe paragraful. */
@media (max-width: 780px), (pointer: coarse) {
  .logo { display: inline-flex; align-items: center; min-height: 44px; }
  footer.site a,
  footer.site li a,
  .legal a,
  a.citeste,
  a.inapoi-blog,
  .rezumat-inapoi { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── 15. Plăcuța produsului la scara telefonului (după eye-verify) ────────────
   La 108px, cele trei însemne de pe plăcuță („alegerea mea", „imagine
   ilustrativă", forma) se călcau unele pe altele și acopereau produsul.
   Plăcuța urcă la 118px, însemnele se micșorează, iar forma („capsule") se
   retrage DOAR pe cardurile cu fotografie, unde spațiul e deja luat de eticheta
   de onestitate. Pe plăcuțele tipografice (fără poză) rămâne: acolo e informație,
   nu decor. Eticheta „imagine ilustrativă" NU dispare niciodată: e promisiunea
   că nu pretindem că vezi exact flaconul primit. */
@media (max-width: 640px) {
  .card-produs { grid-template-columns: 118px minmax(0, 1fr); }
  .card-produs .poza { width: 118px; height: 118px; }
  .card-produs .tag-aleasa {
    top: 6px; left: 6px;
    gap: 3px;
    font-size: 0.55rem;
    padding: 3px 7px;
    box-shadow: none;
  }
  .card-produs .tag-aleasa svg { width: 10px; height: 10px; }
  .card-produs .poza.are-foto::before {
    font-size: 0.5rem;
    padding: 2px 6px;
    bottom: 5px; right: 5px;
  }
  .card-produs .poza.are-foto .doza-poza { display: none; }
  .grup-cap { padding-bottom: 12px; }
  .grup-produse { margin-top: 26px; }
  .grup-produse .grila-produse { margin-top: 18px; }
}

/* ── 16. Trei corecții după ce m-am uitat la randare ──────────────────────────

   a) LOGO. `display: inline-flex` pentru ținta de 44px a înghițit spațiul dintre
      „Farmacist" și „pe bune" (în flex, spațiul dintre un nod de text și un
      <span> se pierde). Se citea „Farmacistpe bune" — numele brandului, stricat.
      `gap` îl pune la loc, fără să ating HTML-ul.

   b) CĂUTAREA LIPITĂ. Stă la `top: 0`, dar header-ul revine peste ea la derulare
      în sus. `--sus-lipit` e ținut la zi din mobil.js: 0 cât timp header-ul e
      ascuns, înălțimea lui când e la vedere. Așa cele două nu se calcă.

   c) BARA DE JOS. Rândul „încă 62 lei până la transport gratuit" trecea pe două
      rânduri și umfla bara peste locul rezervat. */
.logo { gap: 0.28em; }

.cauta-raft {
  top: var(--sus-lipit, 0px);
  transition: top 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) { .cauta-raft { transition: none; } }

.bara-jos .rezumat span { font-size: 0.74rem; line-height: 1.3; }
.bara-jos .rezumat b { font-size: 1.1rem; }
body.are-bara-jos { padding-bottom: 92px; }

/* Câmpul de căutare afișa DOUĂ „✕": al meu și cel nativ al lui `type="search"`
   (WebKit îl desenează singur). Al meu rămâne, fiindcă are 40x40 de atins și
   readuce focusul în câmp; al browserului iese. Văzut pe randarea live. */
.cauta-raft input::-webkit-search-cancel-button,
.cauta-raft input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* ── 17. „Actualizat" pe paginile principale ──────────────────────────────────
   Exista doar pe blog (`article.articol .actualizat`). Paginile care conteaza
   pentru cautare (acasa, despre, pentru branduri, aleg eu pentru tine) n-aveau
   niciun semnal de prospetime, nici vizibil, nici in JSON-LD. Pentru motoarele
   de raspuns, „cand a fost scris ultima data" e unul dintre semnalele pe care
   le folosesc ca sa aleaga ce citeaza. Discret, in subsolul continutului. */
.actualizat-pagina {
  margin-top: 30px;
  padding-top: 14px;
  border-top: 1px solid var(--linie);
  color: var(--text-soft);
  font-size: 0.84rem;
}

/* ── 18. Semnătura de sub poza din hero, pe telefon ───────────────────────────
   Raportat de Petru, 18 iul: „sub prima mea poză e niște text, nu e centrat, iese
   din ecran prin stânga". Măsurat la 17 lățimi (320 → 1440): NU iese, zero
   depășire nicăieri. Dar are dreptate că arată rupt, si sonda mea n-avea cum s-o
   prindă, fiindca masoara depasirea, nu urâtul.

   Ce era: `justify-content: space-between` pe un rând de 340px. Numele lipit de
   marginea stângă a pozei, titulatura lungă lipită de dreapta, între ele o gaură.
   Pe desktop, la 420px, e o semnătură de revistă și funcționează. Pe telefon e
   doar un rând înghesuit care pare aliniat greșit.

   Ce e acum: pe telefon se așază pe două rânduri, centrat sub poză. Aceleași
   cuvinte, doar că respiră. */
@media (max-width: 640px) {
  .portret-foto .cap {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    padding-top: 12px;
  }
  .portret-foto .cap span { text-align: center; }
}

/* ── 19. Meniul: vizibil întreg, fără derulare (18 iul, după research) ─────────
   MĂSURAT pe site-ul live, cu banda derulantă pe care o pusesem tot azi:
     393px: 48% din nav în afara ecranului. „Pentru branduri" 0% vizibil, „Despre" 0%.
     360px: 53% în afara ecranului. Aceleași două complet ascunse.
   Premisa mea („toate cele 5 rămân vizibile, se trage cu degetul") era FALSĂ.
   Banda era un hamburger cu afordanță mai slabă, plus 190px de chrome deasupra.

   NN/g, citat exact pe tiparul ăsta: „out of sight is out of mind [...] if the
   categories are widely different [...] users won't think to scroll". Cele 5 ale
   noastre erau fix asta: magazin, chestionar, blog, B2B, despre. Iar studiul lor
   compară pe mobil ascuns vs COMBO, nu ascuns vs complet vizibil, deci nu era
   dovadă pentru ce construisem.

   Lățimi măsurate la fontul real, spațiu disponibil pe 360px = 328px:
     Produse 90 · Sfaturi 81 · Despre 81  = 264px  ÎNCAPE
     orice combinație cu „Aleg eu pentru tine" (167px) = peste 350px  NU ÎNCAPE
   De-asta fluxul asistat a urcat în butonul din hero: un buton bate un link de
   meniu, iar acolo nu concurează pe pixeli.

   „Pentru branduri" a ieșit din meniu fiindcă e o pagină B2B într-un magazin de
   consumatori (Baymard: când linkurile corporate stau la același nivel cu
   categoriile, omul abandonează navigația). Rămâne în subsol, unde era deja.
   „Acasă" a ieșit fiindcă logo-ul duce acasă. */
@media (max-width: 780px) {
  nav.main {
    overflow-x: visible;
    -webkit-mask-image: none;
    mask-image: none;
    justify-content: flex-start;
    gap: 6px;
  }
  nav.main a { padding: 0 12px; font-size: 0.9rem; }
  .et-lung { display: none; }
}
@media (min-width: 781px) { .et-scurt { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Înainte / după (pentru-branduri.html) — adăugat 18 iul 2026
   ───────────────────────────────────────────────────────────────────────────
   Pagina vindea rescrierea fără să arate niciuna. Perechea „înainte / după"
   n-avea corespondent în CSS-ul existent, deci DOUĂ clase noi, atât:
     .b2b-inainte-dupa = grila celor două coloane
     .b2b-eticheta     = eticheta de deasupra fiecărei coloane
   Restul refolosește .b2b-articol / blockquote / .b2b-traducere din „cadrul
   legal", ca cele două secțiuni să arate ca aceeași mână.
   ZERO culori noi: „După" își ia accentul din --teal, care e deja peste toată
   pagina; „Înainte" rămâne pe --text-soft. Diferența se citește din etichetă,
   nu dintr-o culoare de avertizare (roșul ar fi și culoare nouă, și ton de
   frică, iar pagina vinde colaborare, nu frică). Fără bară colorată pe latură.
   Pe mobil cele două coloane cad una sub alta, în ordinea firească.
   ═══════════════════════════════════════════════════════════════════════════ */
.b2b-inainte-dupa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.b2b-eticheta {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.71rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.b2b-inainte-dupa > div:last-child .b2b-eticheta { color: var(--teal); }
/* Blockquote-ul din cadrul legal are margin-top 13px, calculat sub un titlu.
   Aici stă sub o etichetă mică, deci strânge spațiul. */
.b2b-inainte-dupa blockquote { margin-top: 8px; }

/* Oferta de mostră stă acum în aceeași secțiune cu exemplele, sub ele.
   .b2b-mostra are margin 0 auto, deci fără asta s-ar lipi de ultimul card. */
.b2b-lege + .b2b-mostra { margin-top: clamp(32px, 4vw, 48px); }

/* ── 20. O SINGURĂ AXĂ pe telefon (4 aug 2026, după reclamația „nu e totul pe mijloc")
   Petru a zis că arată ciudat și că nu știe să explice de ce. Măsurat pe live, la
   390px, alinierea titlului fiecărei secțiuni, de sus în jos:

     hero                          stânga
     „Nu un raft întreg"           CENTRU
     „Ce pun pe raft"              stânga
     „Ce ți-aș spune peste tejghea" stânga
     „Păreri pe bune"              CENTRU
     „O persoană, nu un algoritm"  stânga
     „Ce vrei să știi" (FAQ)       CENTRU
     newsletter                    stânga

   Trei comutări între axe pe un ecran de 390px lățime. Nu se citește ca o decizie,
   se citește ca o scăpare: ochiul caută marginea din stânga, o găsește de cinci ori
   și o pierde de trei. De-asta „nu e pe mijloc" — nimic NU e pe mijloc, fiindcă
   jumătate din pagină e pe stânga.

   De ce stânga și nu centru: (a) 5 din 8 secțiuni erau deja pe stânga, deci e
   schimbarea mai mică; (b) un titlu centrat pe două rânduri inegale („Nu un raft
   întreg. O" peste „selecție, cu un om în spate") arată accidental, iar la lățime de
   telefon aproape orice titlu se rupe inegal; (c) reperele din research-ul de design
   (The Ordinary, Typology, Susanne Kaufmann — DESIGN-PROFI-2026-07-17.md §3) sunt
   toate editoriale, cu tipografia pe stânga.

   DESKTOPUL NU SE ATINGE: acolo măsura e largă, titlurile centrate stau peste grile
   late și arată bine, iar forma aia a fost deja aprobată. Regula e aditivă și trăiește
   sub 780px, ca tot ce e în secțiunea asta. */
@media (max-width: 780px) {
  .sectiune-cap.centrat { text-align: left; margin-left: 0; margin-right: 0; }

  /* Butonul stătea pe jumătate de rând, sub un câmp de email de lățime întreagă:
     formularul e flex cu wrap, iar la 390px input(min 220) + buton nu încap pe un
     rând, deci butonul cădea dedesubt la lățimea lui naturală. Arăta a element rămas
     pe dinafară, nu a acțiune. Pe telefon coloana e regula, nu excepția. */
  form.captura { flex-wrap: nowrap; flex-direction: column; align-items: stretch; }
  form.captura button { width: 100%; }
}

/* ── Ask-ul de la finalul articolului (11 aug 2026) ───────────────────────────────
   Articolele erau fundături: singura ieșire era „înapoi la Sfatul Farmacistului".
   Articolul de magneziu spune omului să caute bisglicinat, iar magazinul VINDE
   magneziu bisglicinat — linkul lipsea. Lecția din vault, măsurată pe alt proiect:
   conținut cu reach bun dar fără ask de conversie integrat nu produce pipeline,
   indiferent de volum. 178 de articole și zero puncte de captare = trafic, nu clienți.
   UN ask per articol, potrivit cu articolul, nu trei ask-uri care se concurează.
   Formularea e descriptivă („din selecția mea, forma asta"), niciodată „farmacistul
   recomandă X pentru <beneficiu>": aia ar lipi endorsementul personal de o mențiune de
   sănătate, construcția interzisă de Reg. (CE) 1924/2006 art. 12(c). */
.ask-articol {
  margin-top: 34px;
  padding: 24px 26px;
  background: var(--mint);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
}
.ask-articol + .ask-articol { margin-top: 18px; }
.ask-articol p { margin: 0 0 10px; }
.ask-articol p:last-child { margin-bottom: 0; }
.ask-titlu {
  font-family: var(--font-head);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--teal-700);
}
.ask-produs-nume { font-size: 1.02rem; }
.ask-alt { font-size: 0.92rem; color: var(--text-soft); }
.ask-articol form.captura { margin-top: 14px; }
/* Newsletterul de pe articolele care au deja un ask de produs: un rând, nu o a doua casetă.
   Două cereri de aceeași greutate pe același ecran nu dublează conversia, își împart atenția. */
.ask-newsletter { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie); font-size: 0.93rem; color: var(--text-soft); }

/* ── „Ce scrie pe eticheta" pe pagina de produs (11 aug 2026) ─────────────────────
   Reg. (UE) 1169/2011 art. 14(1)(a): la vanzare la distanta, mentiunile obligatorii
   trebuie sa fie disponibile INAINTE de cumparare, pe pagina. Lista completa e la
   art. 9(1); singura scutita e data expirarii, care difera de la lot la lot.
   Forma e de FISA, nu de card: perechi termen/valoare, fara umbra, fara chenar
   colorat. Informatia asta se citeste cand omul o cauta, nu se vinde. */
.eticheta { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linie); }
.eticheta h2 {
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--teal-700);
  margin: 0 0 12px;
}
.eticheta dl { margin: 0; display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 6px 18px; }
.eticheta dt { font-weight: 700; font-size: 0.87rem; color: var(--text); }
.eticheta dd { margin: 0; font-size: 0.87rem; color: var(--text-soft); line-height: 1.6; }
.eticheta-avertisment {
  margin-top: 14px;
  font-size: 0.83rem;
  color: var(--text-soft);
  font-style: italic;
}
@media (max-width: 560px) {
  .eticheta dl { grid-template-columns: 1fr; gap: 2px 0; }
  .eticheta dd { margin-bottom: 10px; }
}
/* Varianta „eticheta vine pe email": aceeasi fisa, dar cu proza in loc de perechi.
   Nu e un card de vanzare, e o informare — deci fara accent, fara buton. */
.eticheta-pe-email p { font-size: 0.9rem; color: var(--text-soft); line-height: 1.65; margin: 0 0 10px; }
.eticheta-pe-email strong { color: var(--text); }

/* ── Headerul nu se mai mișcă de la o pagină la alta (11 aug 2026) ────────────────
   Reproșul lui Petru, cu captură: „headerul se mișcă în funcție de pagina unde ești".
   Măsurat: meniul pornea de la x=575 pe prima pagină și de la x=813 pe toate celelalte,
   la aceeași lățime de fereastră. 238px de salt, la fiecare navigare.

   Cauza nu era în CSS, era în CE ÎNCARCĂ pagina. Butonul de coș nu există în HTML: îl
   injectează `cart.js`, care e inclus doar pe paginile de magazin (prima pagină + cele
   45 de produse). Deci headerul avea TREI copii acolo și DOI pe despre / pentru-branduri
   / blog / contact / paginile legale, iar `justify-content: space-between` reașază tot
   ce e înăuntru după câți copii are. Un layout care depinde de ce a apucat JS-ul să
   injecteze se schimbă la fiecare pagină, și niciun `padding` nu repară asta.

   Fix: grilă cu trei coloane, a treia REZERVATĂ pentru coș. Coloana există și când
   butonul nu, deci meniul cade în același loc pe orice pagină, cu sau fără JS. Doar
   peste 780px: sub prag headerul e altă construcție (un rând + bandă de meniu
   derulabilă, cu `order`), care funcționează și n-o atingem. */
@media (min-width: 781px) {
  header.site .wrap {
    display: grid;
    grid-template-columns: auto 1fr 42px;
    column-gap: 18px;
    align-items: center;
  }
  header.site .wrap nav.main { justify-self: end; }
  header.site .wrap .buton-cos { justify-self: end; }
}

/* ── Caseta de pachet se aliniază la grila de servicii (11 aug 2026) ──────────────
   Reproșul lui Petru, cu captură: „nu prea sunt spații, vezi pe containere".
   Măsurat pe secțiunea de servicii, patru copii ai aceluiași `.wrap`, patru lățimi și
   trei alinieri diferite: titlul centrat pe 660, grila de carduri pe 1092, caseta de
   pachet centrată pe 760, notele legale la stânga pe 720. Ochiul n-are unde să prindă
   o coloană, și exact asta se simte ca „nu e aranjat", fără să poți numi ce anume.

   Caseta de pachet era `max-width: 760px; margin: 0 auto`. Comentariul din HTML zicea
   că e centrată „ca să nu orfaneze grila auto-fit de 4 carduri" — dar ea nu e ÎN grilă,
   e sora ei, deci n-avea cum s-o orfaneze. Rezultatul era o casetă care plutea, cu
   ambele margini nepotrivite cu nimic de deasupra.

   Acum se întinde exact cât grila, imediat sub ea, la distanța gap-ului. Textul
   dinăuntru rămâne la o măsură lizibilă (~620px) și centrat: alinierea se rezolvă la
   nivel de cutie, nu întinzând rândurile la 1092px, unde n-ar mai fi de citit. */
.b2b-mostra {
  max-width: none;
  margin: clamp(18px, 2vw, 24px) 0 0;
}
.b2b-mostra > * {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}