/* ZAza — Modern Hair Styling. Editorial cald, după mockup-ul aprobat. */

/* Subsetul „latin" nu contine ă/ș/ț (si Ă/Ș/Ț) — fara latin-ext, browserul lua
   diacriticele romanesti dintr-un font de sistem si ieseau mai mari/mai groase
   decat restul cuvantului („Programări"). Ambele subseturi self-hosted (cerinta DSGVO). */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/cormorant-garamond-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/cormorant-garamond-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --cream: #f2ece1;      /* fundal pagină */
  --panel: #efe7da;      /* panouri text produs / căsuțe */
  --ink: #211b15;        /* text principal */
  --umber: #5f5240;      /* text secundar */
  --gold: #a9783e;       /* linii accent (paleta noua 25.08) */
  --dark: #18130f;       /* secțiunea studio (paleta noua 25.08) */
  --footer: #18130f;     /* acelasi ton ca studio: sus si jos identic */
  --on-dark: #f3e8d8;    /* text principal pe fundal inchis */
  --on-dark-2: #cfc3b3;  /* text secundar pe fundal inchis */     /* footer */
  --line: rgba(33, 27, 21, 0.12);
  --pad: clamp(18px, 4vw, 56px);
  --maxw: 1140px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* fundalul si pe <html>, nu doar pe <body>: altfel browserul picteaza alb
     pana cand ajunge foaia de stil, iar pe telefon se vede ca un flash */
  background: var(--cream);
  color-scheme: light;
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ink); color: var(--cream); }

a { color: inherit; text-decoration: none; }
/* fara „lumina" (highlight-ul gri de tap al Android/iOS) cand se apasa un buton — cerut 24.08.
   Inelul de focus ramane doar pentru navigarea cu tastatura, prin :focus-visible. */
a, button, .zz-flag, summary {
  -webkit-tap-highlight-color: transparent;
}
/* «Detalii despre produs» e un <summary>: la apasare, browserul ii pune si un
   contur de focus care ramane aprins dupa ce ridici degetul. Il scoatem la
   apasare, dar il pastram pentru tastatura prin :focus-visible. */
.zz-prod-legal summary:focus { outline: none; }
.zz-prod-legal summary:focus-visible { outline: 2px solid #7a5229; outline-offset: 3px; }
.zz-prod-legal summary::-moz-focus-inner { border: 0; }

a:focus-visible, button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

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

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

/* ═══ Cratima in text scris cu MAJUSCULE ═══
   DOUA defecte, nu unul:
   1. Cratima din Cormorant Garamond e **INCLINATA cu 10,08 grade** (masurat pe glifa
      randata la 400px: capatul drept cu 15px mai sus). E o trasatura caligrafica a
      Garamond-urilor, mostenita din scrisul cu pana. La 31px iese o diferenta de 1,16px
      intre capete — intre doua majuscule verticale se vede clar ca „stramba".
   2. Sta si prea jos: e desenata pentru litere mici, la mijlocul inaltimii lor.
   Fonturile complete au functia OpenType „case" care rezolva pozitia, dar subseturile
   noastre nu o contin (verificat cu fontTools) — si oricum nu ar indrepta inclinarea.

   Solutia: litera ramane in text (se copiaza, o citesc cititoarele de ecran), dar
   desenul ei se ascunde si in loc apare o bara perfect orizontala, asezata la centrul
   optic al majusculelor. `-webkit-text-fill-color` ascunde doar umplutura literei;
   `color` ramane neatins, deci `currentColor` de pe bara ia culoarea textului si
   merge la fel pe fundal deschis si pe cel inchis. */
.zz-cratima {
  position: relative;
  -webkit-text-fill-color: transparent;
}
.zz-cratima::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0.27em;
  height: 0.052em;
  top: 0.592em;   /* calibrat pe randare: centrul barei cade fix pe centrul optic al majusculelor */
  background: currentColor;
  -webkit-text-fill-color: currentColor;
}
/* daca browserul nu stie `-webkit-text-fill-color`, litera ramane vizibila:
   atunci nu mai desenam bara peste ea, ci doar o ridicam, ca inainte */
@supports not (-webkit-text-fill-color: transparent) {
  .zz-cratima { top: -0.105em; }
  .zz-cratima::before { display: none; }
}

/* linia aurie de accent */
.zz-rule {
  display: block;
  width: 44px;
  /* subtire si in tonul cafeniu al fotografiei din hero (cerut 24.08, peste tot) */
  height: 1px;
  background: #7a5229;
  opacity: 0.75;
  margin-top: 18px;
}
/* la „Das Studio" liniuta ramane aurie (ca pe telefon), la aceeasi grosime de 1px */
.zz-studio__copy .zz-rule {
  background: var(--gold);
  opacity: 1;
}
.zz-rule--center { margin-left: auto; margin-right: auto; }

/* ---------- Sarit peste antet, si anunturile pentru cititoarele de ecran ----------
   Amandoua sunt in pagina pentru cine nu foloseste mouse-ul. `.zz-doar-citit` nu
   se vede NICIODATA, dar ramane in pagina: ascunsa cu `display:none` sau cu
   `visibility`, nu ar mai fi citita cu voce tare. De aceea e taiata la un pixel
   in loc sa fie ascunsa. */
.zz-skip {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--gold);
  border-radius: 4px;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(24, 19, 15, 0.18);
  transform: translateY(-150%);
  transition: transform 0.18s ease;
}
.zz-skip:focus { transform: translateY(0); }
.zz-doar-citit {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Header ---------- */
.zz-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 6px max(var(--pad), calc((100vw - var(--maxw)) / 2));
  background: var(--cream);
  transition: box-shadow 0.3s;
}
.zz-header.is-solid { box-shadow: 0 8px 30px rgba(33, 27, 21, 0.08); }
.zz-header__mark {
  grid-column: 2;
  display: grid;
  justify-items: center;
  text-align: center;
  line-height: 1;
  gap: 4px;
}
.zz-mark__name {
  font-family: "Cormorant Garamond", serif;
  /* marit de la 30px: logo-ul de pe peretele din fotografie masoara ~130px pe telefon,
     iar acesta doar 66px — diferenta de doua ori se citea ca greseala.
     Peste ~42px, steagurile si cosul nu mai incap confortabil. */
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.02;
}
.zz-mark__sub {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--umber);
}
.zz-header__left {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 4px;
}
/* steagurile de limbă — singurul element din stânga de cand meniul a fost scos (25.08) */
.zz-flags { display: flex; align-items: center; gap: 5px; }
.zz-flag {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  opacity: 0.38;
  transition: opacity 0.2s;
}
.zz-flag:hover { opacity: 0.75; }
.zz-flag svg {
  width: 21px;
  height: 14px;
  border-radius: 3px;
  display: block;
}
.zz-flag.on { opacity: 1; }
/* pe telefon totul se strânge, altfel grupul din stânga împinge logo-ul din centru */
@media (max-width: 600px) {
  .zz-header { gap: 8px; }
  .zz-header__left { gap: 3px; }
  /* dupa scoaterea hamburgerului a ramas loc: steagurile au crescut de la 16px la 19,5px latime (25.08).
     Raport 3:2 exact, ca viewBox-ul 60x40 sa nu lase margini albe.
     Grupul din stanga masoara 3x22 + 2x6 = 78px, sub bugetul coloanei la 360px. */
  .zz-flags { gap: 6px; }
  .zz-flag { width: 22px; height: 28px; }
  .zz-flag svg { width: 19.5px; height: 13px; }
  .zz-mark__sub { font-size: 7.5px; letter-spacing: 0.3em; }
}
.zz-header__icons {
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: 4px;
}
.zz-header__icons a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  transition: background 0.2s;
}
@media (hover: hover) {
  .zz-header__icons a:hover { background: rgba(33, 27, 21, 0.06); }
}
.zz-header__icons svg { width: 21px; height: 21px; }

/* Canvas centrat: aceeași compoziție pe orice rezoluție */
.zz-products {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}
/* (27.08) Das Studio, banda CTA si footerul NU mai sunt inchise in canvas:
   fundalurile lor merg FULL-BLEED, din margine in margine (cerut de user).
   Continutul ramane ordonat de la sine: .zz-footer__main si randul legal au
   max-width: var(--maxw), textul din studio e capat la 560px si centrat,
   iar continutul benzii e centrat. Pe telefon nimic nu se schimba
   (canvasul era oricum mai lat decat ecranul).
   ⚠ Lectie (27.08): la stergerea regulii vechi am lasat `.zz-products,` AGATAT —
   selectorul s-a lipit de `.zz-hero` si produsele au primit overflow:hidden +
   height:100svh → randul Sea Salt Spray DISPAREA pe ecrane reale. */

/* ---------- Hero ----------
   15.09 seara: SIGLA DIN POZE MICSORATA (nu bara marita): userul vrea bara ca inainte
   (40px / 10.08vw pe telefon) si sigla din poza egala cu ea. ChatGPT facuse sigla prea
   mare, asa ca am micsorat-o IN poze (unelte/micsoreaza2.py: doar tusele siglei sunt
   sterse cu inpaint din peretele vecin si cerneala pusa la loc scalata; niciun pixel
   schimbat in afara cutiei siglei). Litere ZAza acum: portret ~171px din 1024
   (x0,516), peisaj ~100px din 1536 (x0,362). Egalitate: telefon exact (bara 10.08vw
   si poza scaleaza amandoua cu latimea/inaltimea); desktop doar aproximativ, bara e
   fixa (40px) iar poza creste cu fereastra: egal la ~1536 de latime, -7% la 1440,
   +5% la 1920 (unde bara e 48px).
   15.09.2026: O SINGURA fotografie, 3:2 (1536x1024, marita 4x pana la 3072 pentru
   ecranele mari), pe TOATE ecranele. Repere in sursa (x/y din 1536x1024):
   sigla x 633-908 y 53-169 · brat scaun stanga x ~545 · borcan x 984-1146 y 706-849 ·
   spray x 1140-1215 y 646-872 · soclu de marmura x 942-1278, baza y ~1015.
   Continutul util ocupa aproape toata inaltimea, deci decupajul se face DOAR lateral:
   · desktop / peisaj: banda 5:3 (sursa y 45-967, exact banda de pe live pana azi),
     `cover` + object-position 50% 44% (44% = 45 / (1024 - 921,6));
   · in picioare (<=1024 portrait): cutie 4:5, `cover` + object-position 70% 50%
     -> se vede sursa x 500-1319: bratul scaunului, sigla, Zaza si ambele produse.
   Slotul din panou e unul singur (o poza 3:2), decupajul ramane al CSS-ului. */


.zz-hero {
  position: relative;
  overflow: hidden;
  width: 100%;           /* ⚠ OBLIGATORIU: fara latime explicita, Chrome ingusteaza
                            SECTIUNEA cand `aspect-ratio` se loveste de `max-height`
                            (masurat: 1678px in loc de 1920) si o lipeste la stanga,
                            lasand o fasie crem in dreapta. Cu latimea fixata,
                            raportul stabileste doar inaltimea. */
  aspect-ratio: 5 / 3;   /* banda taiata din fotografie (sursa y 45-967) */
  height: auto;    /* inaltimea vine din raportul cutiei, nu din ecran */
  min-height: 0;
  max-height: none;
  /* ⚠ 13.09, varianta ceruta de client: din margine in margine, fara nicio umplutura
     si fara limita de inaltime. Istoric, ca sa nu se reintroduca:
       · `max-height: calc(100svh - 73px)` + `cover`  -> taia baza cadrului (produsele);
       · aceeasi limita + `contain`                   -> doua margini estompate, respinse.
     Pretul: pe 16:9 maximizat hero-ul trece cu ~13% sub pliu. Nu exista decupaj care
     sa incapa si sigla (sus) si produsele (jos) intr-o banda de 2,05 dintr-o sursa 3:2. */
  /* LQIP (24x16, 192 octeti): miniatura fotografiei intregi, in cod, ca sa se vada
     ceva din prima clipa; e acoperita cand soseste fotografia mare. Aceeasi pozitie
     ca poza, ca tranzitia sa fie lina. */
  background: var(--dark) url("data:image/webp;base64,UklGRrQAAABXRUJQVlA4IKgAAABQBACdASoYABAAPu1iqU2ppaOiMAgBMB2JbACdMoR4GB4JxTY85yigkKs+AP7cdfS0h1NUPHER66FGN99eCOS3F47q1vHB7z8nOmC39Stbk6gk6Hm+kptOYdVT+vm1ypDvUEiHOJRP4MVQ8NCfcx3S0iEa2Cfgj3qVLnoxTAm1gRWHTsmtX5x9n4dEuAReRrrDn0MOQZRFzmYZjKc4kInaQCi/pwogAAA=") 50% 44% / cover no-repeat;
}
/* ⚠ 13.09 — de ce e absoluta: inaltimea hero-ului vine din `aspect-ratio`, fara nicio
   valoare fixa. Intr-un asemenea bloc, `height: 100%` pe <img> NU are la ce se raporta
   (inaltime nedefinita), se rezolva ca `auto` si poza se prabuseste la zero (ramane
   vizibila doar miniatura din fundal). Pozitionata absolut fata de sectiune, umple cadrul. */
.zz-hero__img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 44%;   /* banda 5:3 incepe la y=45 din 1024 */
}

/* ---------- In picioare (telefon si tableta in picioare) ----------
   15.09, seara: PORTRETUL propriu (zaza-mobile-1024x1536.png, 2:3, facut de user in
   ChatGPT), nu decupaj din poza lata. Cerintele userului: poza UMPLE ECRANUL de sub
   bara, sigla ZAza din poza EGALA cu ZAza din bara, nimic adaugat la poza.
   Conditia e pe ORIENTARE, nu doar pe latime, ca sa prinda si tabletele in picioare.

   Repere in sursa (1024x1536): litere ZAza x 340-672 (332px) y 73-170 · brat scaun
   stanga x ~235 · borcan x 690-840 y 1104-1299 · spray x 889-960 y 1010-1310 ·
   soclu x 600-1023 y 1250-1535 (prosopul iese pe marginea dreapta a pozei).
   · inaltimea cutiei = ecran minus bara (--hdr, scrisa de scriptul din index.html);
     `cover` scaleaza dupa INALTIME (s = (100svh - bara) / 1536), se vede o fereastra
     de ~800px din latimea sursei. object-position 85% -> fereastra x ~188-991: bratul
     scaunului, sigla, Zaza si AMBELE produse (spray cu 31px aer), prosopul taiat.
   · sigla din poza pe ecran = 332 x s. Bara: latime litere = 2,218 x font, inaltime
     bara = 1,033 x font + 22,7px (masurate). Egalitate:
     2,218 f = 332/1536 (100svh - 1,033 f - 22,7) -> f = 8,852svh - 2,01px.
     La 844 inaltime: font 72,7px, bara 98px, sigla poza = sigla bara = 161px.
   · subtitlul barei ramane 7,5px (128px = 39% din sigla; in poza textul are ~60%,
     dar marit ar depasi coloana din mijloc pe 360px).
   Pretul, spus din start: bara ~98px in loc de 64px pe telefon. Daca userul vrea bara
   normala, sigla din poza trebuie la ~jumatate (175px din 1024), nu se rezolva din CSS. */
@media (orientation: portrait) and (max-width: 600px) {
  .zz-hero {
    /* LQIP-ul portretului (16x24, 198 octeti), aceeasi asezare ca poza */
    background: #6b4a2a url("data:image/webp;base64,UklGRrwAAABXRUJQVlA4ILAAAABQBACdASoQABgAPu1iqU2ppaOiMAgBMB2JbACdMoRwABPS16gsQh9SLaS4AP6ohkkU7JW6fKFb1tdM/qQRUDI6RmtFD8+Qa+MucjDUKf6Lw17PYNkOMTBT+q67Sns7yJ5GpZ2033qDwVDdNM6Ku2kcmWL2pDdr+/QcwJWGkd3af/D39Fs92H56z6Xn7e3aE6PCt2g8Hjym4bfDbUyLyQp2r+YuMPovFKG6rwF3SgAAAA==") 85% 40% / cover no-repeat;
  }
  /* 40% pe verticala: pe un ecran putin mai lat decat 2:3 (pliabile, cutie ~0,72) apare
     un decupaj vertical mic; asa cade mai mult pe prosopul de jos decat pe sigla de sus */
  .zz-hero__img { object-position: 85% 40%; }
  /* 15.09, varianta 1 ceruta de user („textul e alb si nu se intelege"): voal mai DENS in
     spatele titlului si butonului. Doua straturi: unul de jos in sus (puternic la baza,
     unde e butonul, se stinge spre mijloc) si unul dinspre stanga (unde sta textul), ca
     produsele din dreapta sa ramana luminoase. Inainte: 0,74 -> 0,34 -> 0, pe 40%. */
  .zz-hero::after { height: 40%; }   /* voalul dens e la FINALUL fisierului (15.09) */
}
/* telefon: poza umple ecranul de sub bara, bara creste dupa formula de mai sus */
@media (orientation: portrait) and (max-width: 600px) {
  .zz-hero { aspect-ratio: auto; height: calc(100svh - var(--hdr, 98px)); }
  /* Bara la marimea de dinainte (39px la 390, 43px la 430), dar scrisa pe INALTIMEA
     ecranului, ca poza: sigla din poza = 171 x (100svh - bara)/1536, bara = 2,218 x font,
     bara = 1,033 x font + 22,7 -> font = 4,77svh - 1,08px. Pe 390x844 da 39,2px (ca
     10,08vw), iar pe ecranele scurte (iPhone SE 667: 30,7px) urmareste poza in loc sa
     ramana cu 20% mai mare. */
  .zz-mark__name { font-size: clamp(28px, calc(4.77svh - 1.08px), 54px); }
}
/* tableta in picioare (601-1024), cerut 15.09: „asa sa se vada pe orice telefon si tableta".
   Ecranul tabletei e mai LAT decat portretul 2:3 (768x890 = 0,86), deci portretul ar fi
   scalat dupa latime si ar taia sigla sus si soclul jos. Aici <picture> da POZA LATA
   (sursa 1536x1024): scalata dupa inaltime (s = (100svh - bara)/1024) se vede o fereastra
   de ~860-880px din latime, iar sigla (633-908) + scaunul (545-975) + produsele (942-1278)
   au nevoie de 733 -> incap. object-position 71% -> fereastra x ~480-1340.
   Bara: sigla din poza = 276 x s; egalitate 2,218 f = 276/1024 (100svh - 1,033 f - 22,7)
   -> f = 10,8svh - 2,45px (la 1024 inaltime: font 108px, bara 134px, sigla 240 = 240). */
@media (orientation: portrait) and (min-width: 601px) and (max-width: 1024px) {
  .zz-hero {
    aspect-ratio: auto;
    height: calc(100svh - var(--hdr, 134px));
    background-position: 71% 50%;
  }
  .zz-hero__img { object-position: 71% 50%; }
  .zz-hero::after { height: 40%; }   /* voalul dens e la FINALUL fisierului (15.09) */
  /* poza lata (sigla 100px din 1536) scalata dupa inaltime: font = 4,21svh - 0,96px
     (42px la 1024, 56px la 1366) */
  .zz-mark__name { font-size: clamp(28px, calc(4.21svh - 0.96px), 80px); }
}

/* voal pentru lizibilitatea textului live */
.zz-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 52%;
  background: linear-gradient(0deg, rgba(24, 16, 9, 0.74) 0%, rgba(24, 16, 9, 0.34) 52%, transparent 100%);
  pointer-events: none;
}
.zz-hero__copy {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: clamp(26px, 4.4vw, 56px);
  padding-left: max(var(--pad), env(safe-area-inset-left), calc((100% - var(--maxw)) / 2 + var(--pad)));
  padding-right: var(--pad);
}
.zz-hero__copy > * { max-width: min(58vw, 620px); }
.zz-hero__copy h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(34px, 5.2vw, 62px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 2px 20px rgba(24, 16, 9, 0.4);
  margin-bottom: clamp(16px, 2vw, 26px);
}
/* Buton „de sticla" peste fotografie: contur crem, fundal translucid cu fotografia
   estompata dedesubt. La apasare se umple complet.
   Varianta veche (crem -> auriu) avea contrast 2,64:1 la hover, sub minimul de 4,5:1. */
.zz-hero__cta {
  display: inline-block;
  background: rgba(242, 236, 225, 0.14);
  color: #fff;
  border: 1px solid rgba(242, 236, 225, 0.75);
  backdrop-filter: blur(9px) saturate(1.1);
  -webkit-backdrop-filter: blur(9px) saturate(1.1);
  padding: 14px 30px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(24, 16, 9, 0.45);
  /* butonul ramane IDENTIC in orice stare (cerut 24.08): fara hover, fara active.
     Inelul de focus pentru tastatura ramane, din regula globala :focus-visible. */
}
/* browserele fara backdrop-filter (Firefox mai vechi, unele Android):
   fundal mai opac, ca textul sa ramana lizibil pe fotografie */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .zz-hero__cta { background: rgba(24, 16, 9, 0.42); }
}

@media (max-width: 600px) {
  /* telefon: fotografia ÎNTREAGĂ, netăiată, lipită de marginile ecranului.
     Înălțimea vine din proporția pozei (1023x1537), deci nu rămâne spațiu nicăieri. */
  /* Telefon: poza NU mai stă într-o casetă cu decupaj — ea dă înălțimea secțiunii.
     Așa dispare fâșia de sub un pixel de fundal care apărea pe margine din rotunjirea
     înălțimii fracționare (563,41px) când imaginea era afișată cu object-fit: cover. */
  .zz-hero::after { height: 40%; }
}

/* scorul recenziilor sub butonul de programare (bandă bronz) */
.zz-band-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: fit-content;
  margin: 18px auto 0;
  padding: 9px 20px;
  border-radius: 999px;
  background: rgba(24, 16, 9, 0.3);
  border: 1px solid rgba(169, 120, 62, 0.55);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--cream);
  transition: background 0.25s;
}
.zz-band-rating:hover { background: rgba(24, 16, 9, 0.42); }
.zz-band-rating__stars {
  color: #f2c477;
  font-size: 14px;
  letter-spacing: 2.5px;
  text-shadow: 0 1px 6px rgba(24, 16, 9, 0.35);
}

/* ---------- Im Studio entwickelt ---------- */
.zz-intro {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(40px, 7vh, 84px) var(--pad);
}
.zz-intro__copy h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* height:auto e OBLIGATORIU: fara el, atributul height="..." din HTML ramane
   hint prezentational si fixeaza inaltimea → poza iese strivita (fill) */
.zz-intro__media img { width: 100%; height: auto; display: block; }

/* ---------- Produkte (rând: foto | panou | model) ---------- */
.zz-products {
  display: grid;
  gap: 2px;
}
.zz-prow {
  display: grid;
  /* minmax(0, …) e obligatoriu: fara el, o coloana `fr` nu poate cobori sub latimea
     continutului ei, iar titlul mai lung („SEA SALT SPRAY" fata de „MATT CREAM")
     largea coloana din mijloc si micsora fotografiile — randurile ieseau inegale. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2px;
}
.zz-prow__photo img,
.zz-prow__model img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zz-prow__photo { min-height: 100%; }
/* head = nume + descriere, body = scale, atribute, pret, buton.
   Pe desktop raman unul sub altul in coloana din mijloc (nicio schimbare vizuala);
   pe telefon panelul devine `display: contents` si cele doua ajung de o parte
   si de alta a fotografiei de produs. */
.zz-prow__head,
.zz-prow__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.zz-prow__specs { display: contents; }
.zz-scale__val { display: none; }

.zz-prow__panel {
  /* mai inchis decat crem-ul paginii, ca sa se distinga caseta produsului (cerut 24.08).
     Doar aici, nu pe --panel: variabila e folosita si la grila „Echte Kunden" si pe paginile legale. */
  background: #ebe2d2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(28px, 4vw, 48px) clamp(16px, 2.5vw, 32px);
}
.zz-prow__panel h3 {
  font-family: "Cormorant Garamond", serif;
  /* plafonul e 33px, nu 36: la 36 „SEA SALT SPRAY" nu incape pe un rand in coloana
     din mijloc si trecea pe doua, iar cele doua produse nu mai aratau la fel. */
  font-size: clamp(24px, 2.6vw, 33px);
  /* mai fin si mai spatiat: la brandurile premium greutatea vine din spatiu, nu din bold */
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.zz-prow__panel .zz-rule { margin-bottom: 22px; }
.zz-prow__panel p {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--umber);
  margin-bottom: 8px;
}
/* separator intre produse — pe TOATE latimile (27.08, cerut de user: „linia
   sa fie mai mare si sa desparta produsele si pe desktop"). Pe desktop liniile
   sunt mai lungi si separatorul primeste aer vertical generos. */
.zz-prow-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 var(--pad);
}
.zz-prow-sep__line {
  display: block;
  height: 1px;
  width: clamp(120px, 14vw, 260px);
  background: #7a5229;
  opacity: 0.55;
}
.zz-prow-sep__dot {
  display: block;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--gold);
}
@media (min-width: 821px) {
  /* caseta produsului VIZIBILA si pe desktop (cerut 27.08): fundalul nisipiu
     pe tot randul + rama in jurul fotografiilor → produsul se citeste ca un
     card, exact ca pe telefon */
  .zz-prow {
    background: #ebe2d2;
    padding: 18px;
  }
  .zz-products {
    row-gap: clamp(36px, 4vw, 64px);
    /* randurile de produs raman egale (1fr), dar separatorul dintre ele
       primeste doar inaltimea lui naturala — altfel grid-auto-rows: 1fr
       ii dadea un rand intreg de ~950px de gol */
    grid-template-rows: 1fr auto 1fr;
  }
}

/* al doilea rand de descriere: text normal, nu majuscule — se citeste mai usor
   si face contrast cu eticheta de deasupra */
.zz-prow__panel p.zz-prow__sub {
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--umber);
  margin-bottom: 0;
}

/* scale Halt / Glanz — limbajul standard din hair styling, se citeste dintr-o privire */
.zz-scale {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}
.zz-scale__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.zz-scale__label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--umber);
  opacity: 0.8;
  min-width: 68px;
  text-align: right;
}
.zz-scale__dots { display: flex; gap: 7px; }
.zz-scale__dots i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  /* tonul cafeniu al fotografiei din hero, acelasi ca pe butonul din banda bronz */
  border: 1px solid rgba(122, 82, 41, 0.45);
}
.zz-scale__dots i.on {
  background: #7a5229;
  border-color: #7a5229;
}

/* cantitate + pret pe acelasi rand, pretul de baza dedesubt (obligatoriu la cosmetice) */
/* banda de atribute: spune DOAR ce nu e pe scale (finisaj, tip de par, reziduuri),
   ca sa nu repete informatia de deasupra */
.zz-feat {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  margin-top: 26px;
}
.zz-feat li {
  display: flex;
  /* pictograma langa text, pe acelasi rand (cerut 24.08), nu una peste alta */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 8px;
  text-align: left;
}
.zz-feat li + li { border-left: 1px solid rgba(122, 82, 41, 0.22); }
.zz-feat svg {
  width: 24px;
  height: 24px;
  flex: none;
  color: #7a5229;
  opacity: 0.9;
}
.zz-feat span {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--umber);
  line-height: 1.5;
}

/* Pretul nu se striga: la brandurile premium e mic si de aceeasi greutate cu restul.
   Un pret mare si bold citeste "oferta", nu "calitate". Trei randuri centrate:
   cantitatea ca eticheta deasupra, pretul in mijloc, pretul de baza discret dedesubt. */
.zz-prow__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin-top: 30px;
}
.zz-prow__qty {
  /* FARA uppercase: unitatile de masura se scriu cu litera mica (113 g, nu 113 G) */
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--umber);
  opacity: 0.75;
}
.zz-prow__base {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--umber);
  opacity: 0.55;
  margin-top: 0;
}
/* mentiunea de TVA + livrare, direct sub pret (§ 6 PAngV cere ambele langa pret).
   Acelasi registru discret ca Grundpreis-ul — pretul ramane vedeta, mentiunea
   doar confirma. FARA uppercase: „MwSt." isi pierde forma consacrata in majuscule. */
.zz-prow__mwst {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--umber);
  opacity: 0.6;
}
.zz-prow__mwst a {
  border-bottom: 1px solid rgba(122, 82, 41, 0.35);
  transition: border-color 0.2s;
}
@media (hover: hover) {
  .zz-prow__mwst a:hover { border-color: #7a5229; }
}

/* pret + buton de cumparare (preturi de TEST pana le da userul) */
.zz-prow__price {
  font-family: "Cormorant Garamond", serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--ink);
  /* Cormorant foloseste implicit cifre de text (inaltimi diferite, 9 sub linie) —
     frumos intr-un paragraf, dezordonat la un pret. lining = toate cifrele la aceeasi
     inaltime, tabular = aceeasi latime, deci preturile se aliniaza intre produse. */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
/* contur subtire, nu bloc plin: semnatura magazinelor premium.
   Se umple abia la hover, deci actiunea ramane clara fara sa domine blocul. */
.zz-btn-buy {
  display: inline-block;
  margin-top: 28px;
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(33, 27, 21, 0.42);
  padding: 15px 38px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* sageata: spune ca urmeaza un pas, nu ca se adauga ceva in cos */
.zz-btn-buy { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.zz-btn-buy__arrow { flex: none; transition: transform 0.25s ease; }
/* raspuns la atingere: butonul se aduna o clipa si se intuneca, ca sa se vada
   ca apasarea a fost inregistrata (altfel omul apasa de doua ori) */
.zz-btn-buy:active { transform: scale(0.985); }
.zz-btn-buy:active .zz-btn-buy__arrow { transform: translateX(3px); }
/* buton PLIN, pe toata latimea panoului, in tonurile fotografiei hero
   (cafeniul podelei #2c190c, caramelul peretelui #c9925a ca fir de lumina).
   Ca pe telefon — varianta ghost cu contur a ramas doar ca plasa de siguranta. */
.zz-prow__body .zz-btn-buy {
  width: 100%;
  background: linear-gradient(180deg, #3a2413 0%, #24150a 100%);
  border-color: transparent;
  transition: filter 0.2s ease, transform 0.2s ease;
  color: var(--cream);
  box-shadow: inset 0 1px 0 rgba(201, 146, 90, 0.45),
              0 6px 18px rgba(44, 25, 12, 0.26);
  padding: 16px 20px;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  margin-top: 22px;
}
.zz-prow__body .zz-btn-buy:active {
  filter: brightness(1.35);
  transform: scale(0.985);
}
@media (hover: hover) {
  .zz-prow__body .zz-btn-buy:hover { filter: brightness(1.22); }
}

.zz-prow__model {
  position: relative;
  display: flex;
  flex-direction: column;
}
.zz-prow__model img { flex: 1; }
/* spatiu intre „Gestylt mit" si numele produsului */
.zz-cap__pre + .zz-cap__name { margin-left: 0.4em; }
/* eticheta sta PESTE fotografie, jos-stanga, pe un voal care urca de jos —
   ca pe telefon (era banda plina #2a2119 sub poza doar pe desktop) */
.zz-prow__model figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(24, 16, 9, 0.72), rgba(24, 16, 9, 0));
  color: rgba(242, 236, 225, 0.92);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  text-transform: uppercase;
  padding: 34px 12px 13px;
}
.zz-cap__pre {
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.85;
}
.zz-cap__name {
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Echte Kunden. Echte Cuts. ---------- */
.zz-cuts {
  text-align: center;
  padding: clamp(48px, 8vh, 96px) var(--pad) clamp(40px, 7vh, 80px);
}
.zz-cuts h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.zz-cuts .zz-rule--center { margin-bottom: clamp(28px, 5vh, 48px); }
.zz-cuts__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.5vw, 20px);
  max-width: var(--maxw);
  margin: 0 auto;
  align-items: stretch;
}
.zz-cuts__grid figure {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
}
.zz-cuts__grid figure > img {
  width: 100%;
  flex: 1;
  object-fit: cover;
  min-height: 0;
}
/* Ancorarea merge dupa `data-cad`, NU dupa numele fisierului: pozele se pot schimba
   din panou, iar atunci adresa devine /media/... si un selector pe nume n-ar mai
   prinde — fata ar fi taiata gresit.
   Coloanele grilei sunt mult mai inguste decat fotografiile, deci decupajul lateral
   taie din ele. La blond, profilul e in jumatatea dreapta si ajungea lipit de margine:
   mutam cadrul intr-acolo ca fata sa aiba aer. */
.zz-cuts__grid img[data-cad="blond"] { object-position: 66% 50%; }
/* In coloana din mijloc celulele sunt mult mai mici, deci decupajul taie si mai tare.
   Ancoram fiecare fotografie pe cap, nu pe centrul geometric. */
.zz-cuts__stack img[data-cad="fade-beard"] { object-position: 58% 30%; }
.zz-cuts__stack img[data-cad="beard-fade"] { object-position: 50% 26%; }
.zz-cuts__grid figcaption {
  padding: 11px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--umber);
}
.zz-cuts__stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: clamp(10px, 1.5vw, 20px);
}

/* ---------- Das Studio ----------
   Panou DESCHIS pe toate latimile (varianta B, aleasa de user 25.08;
   pana la 26.08 desktopul ramasese pe blocul inchis vechi). */
.zz-studio {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  background: #ede0cf;
  color: var(--ink);
}
.zz-studio__media {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
}
/* (27.08, iteratia 3 — „sa fie mici si la rezolutie mare, dar fara zoom"):
   inaltimea sectiunii e PLAFONATA, dar fotografia NU se decupeaza: coloana foto
   isi ia latimea din inaltime x proportia pozei (3/4), deci poza intra INTREAGA
   in caseta; restul latimii merge la panoul de text. Doar desktop (>=821);
   pe telefon layoutul propriu ramane neatins. */
@media (min-width: 821px) {
  .zz-studio { grid-template-columns: auto 1fr; }
  .zz-studio__media {
    height: clamp(460px, 36vw, 600px);
    width: calc(clamp(460px, 36vw, 600px) * 0.75);
  }
}
.zz-studio__media img {
  /* toate fotografiile in ACEEASI celula de grid: se suprapun fara position:absolute,
     deci containerul isi pastreaza inaltimea din cea mai inalta imagine */
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;   /* păstrează capetele și mașina de tuns în cadru */
  opacity: 0;
  /* trecere lunga si blanda intre fotografii (cerut: „mai relaxanta") */
  transition: opacity 2.2s ease-in-out;
}
/* prima are class="is-active" in HTML, deci fara JS ramane ea vizibila */
.zz-studio__media img.is-active { opacity: 1; }
.zz-studio__copy {
  align-self: center;
  padding: clamp(48px, 9vh, 96px) var(--pad);
  max-width: 560px;
}
.zz-studio__copy h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.zz-studio__copy .zz-rule { margin-bottom: 24px; }
.zz-studio__copy p {
  color: #463122;
  font-size: 15px;
  margin-bottom: 16px;
  max-width: 40ch;
}

/* ---------- CTA band ---------- */
.zz-cta-band {
  position: relative;
  overflow: hidden;
  /* Aceeasi fotografie ca pe telefon (varianta B): perete cald cu raze diagonale.
     Pe desktop caseta e lata si scunda, deci din poza portret se vede o fasie
     din mijloc — tot perete cu raze, se citeste la fel.
     Voal VERTICAL concentrat pe culoarul cu text, ca pe telefon; valorile exacte
     se verifica prin masurare pe fisierul real (contrast titlu prag 3:1 = text mare). */
  background: linear-gradient(to bottom,
    rgba(24, 19, 15, 0.14) 0%,
    rgba(24, 19, 15, 0.14) 18%,
    rgba(24, 19, 15, 0.58) 26%,
    rgba(24, 19, 15, 0.58) 80%,
    rgba(24, 19, 15, 0.20) 100%),
    #7a4f26 url("img/band-chat-1200.webp") 100% 100% / cover no-repeat;
  color: var(--on-dark);
  text-align: center;
  padding: clamp(48px, 9vh, 96px) var(--pad);
}
.zz-cta-band > * { position: relative; z-index: 2; }
.zz-cta-band h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 28px;
  text-shadow: 0 2px 24px rgba(33, 27, 21, 0.2);
}
/* Sticla mata, IDENTICA cu butonul din hero (cerut de user).
   Incercate si respinse pe drum: auriu plin, visiniu (mockup), verde inchis.
   Merge si pe peretele mai luminos al variantei B fiindca voalul benzii e la 58%
   exact sub buton: text alb da 6,75-6,84:1 in cel mai defavorabil pixel,
   masurat cu blur 9px aplicat pe fotografia reala ca sa imite backdrop-filter.
   Fara hover si fara :active, ca la hero. */
.zz-btn-cta {
  display: inline-block;
  background: rgba(242, 236, 225, 0.14);
  color: #fff;
  border: 1px solid rgba(242, 236, 225, 0.75);
  backdrop-filter: blur(9px) saturate(1.1);
  -webkit-backdrop-filter: blur(9px) saturate(1.1);
  padding: 15px 34px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(24, 16, 9, 0.45);
}
/* browserele fara backdrop-filter: fundal mai opac, ca textul sa ramana lizibil */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .zz-btn-cta { background: rgba(24, 16, 9, 0.42); }
}

/* ═══ Efect de buton APASAT, pe amandoua butoanele de sticla (cerut 25.08) ═══
   Anuleaza decizia din 24.08 („butonul ramane identic in orice stare").
   Trei lucruri deodata, ca sa se simta ca o apasare reala si nu ca o schimbare de culoare:
   sticla se indeseste (0,14 -> 0,26), butonul coboara si se strange usor, iar o umbra
   interioara de sus il face sa para infundat. Intrarea e scurta (90ms) si iesirea mai
   lunga (200ms) — asa apasarea se simte instantanee, iar revenirea moale.
   HOVER NU se adauga: userul l-a refuzat explicit, aici e doar starea de apasat. */
.zz-hero__cta,
.zz-btn-cta {
  transition: transform 0.2s ease, background-color 0.2s ease,
              border-color 0.2s ease, box-shadow 0.2s ease;
}
.zz-hero__cta:active,
.zz-btn-cta:active {
  transform: scale(0.972) translateY(1px);
  background-color: rgba(242, 236, 225, 0.26);
  border-color: rgba(242, 236, 225, 0.92);
  box-shadow: inset 0 2px 7px rgba(24, 16, 9, 0.38);
  transition-duration: 0.09s;
}
/* cine are animatiile oprite in telefon primeste doar schimbarea de densitate */
@media (prefers-reduced-motion: reduce) {
  .zz-hero__cta:active,
  .zz-btn-cta:active { transform: none; }
}

/* ═══ Pagina de contact ═══ */
.zz-kontakt {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(28px, 7vw, 64px) var(--pad) clamp(40px, 9vw, 80px);
  text-align: center;
}
.zz-kontakt h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(30px, 8vw, 46px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
/* titlul isi pastra marginea implicita de jos, iar liniuta nu avea nimic sub ea:
   asa ajungea lipita de textul de dedesubt si parea coborata. Marginile se muta. */
.zz-kontakt h1 { margin: 0; }
.zz-kontakt .zz-rule { margin-top: 13px; }
.zz-kontakt__intro {
  color: var(--umber);
  font-size: 14px;
  line-height: 1.6;
  margin: 20px auto clamp(24px, 6vw, 38px);
  max-width: 42ch;
}
/* sugestia de corectare a adresei */
.zz-email-sugestie {
  margin: 7px 0 0;
  font-size: 12.5px;
  color: var(--umber);
}
.zz-email-sugestie button {
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--gold);
  padding: 0;
  cursor: pointer;
}
.zz-kontakt form { text-align: left; }

/* doua campuri pe rand acolo unde incape, unul sub altul pe ecrane inguste */
.zz-f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 430px) { .zz-f-row { grid-template-columns: 1fr; } }

.zz-f { display: block; margin-bottom: 16px; }
.zz-f > span {
  display: block;
  margin-bottom: 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.zz-f > span em { font-style: normal; font-weight: 500; opacity: 0.5; letter-spacing: 0.1em; }
.zz-f input,
.zz-f select,
.zz-f textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 16px;              /* 16px e PRAGUL: sub el, iPhone mareste singur pagina la focus */
  color: var(--ink);
  background: #faf6ee;
  border: 1px solid rgba(33, 27, 21, 0.18);
  border-radius: 0;             /* colturi ascutite, ca butoanele site-ului */
  padding: 13px 14px;
  transition: border-color 0.2s, background 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.zz-f textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.zz-f select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23211b15' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 38px;
}
.zz-f input:focus,
.zz-f select:focus,
.zz-f textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: #fffdf8;
}
/* camp obligatoriu lasat gol */
.zz-f.is-gol input,
.zz-f.is-gol select,
.zz-f.is-gol textarea { border-color: #9d3b30; background: #fdf4f1; }

.zz-f--check { margin-top: 22px; }

/* capcana pentru roboti: scoasa din vedere, dar nu prin display:none — unele
   programe automate completeaza doar campurile ascunse in felul acela */
.zz-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.zz-kontakt__legal {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--umber);
  margin: 18px 0 22px;
}
.zz-kontakt__legal a { border-bottom: 1px solid var(--line); }

.zz-btn-form {
  display: block;
  width: 100%;
  font-family: inherit;
  background: var(--ink);
  color: var(--cream);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 16px 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.zz-btn-form:active {
  transform: scale(0.985) translateY(1px);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.28);
  transition-duration: 0.09s;
}
.zz-btn-form[disabled] { opacity: 0.55; cursor: default; }
@media (prefers-reduced-motion: reduce) { .zz-btn-form:active { transform: none; } }

.zz-form-msg {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.6;
  min-height: 1.6em;
}
.zz-form-msg.is-bine { color: #2f6b43; }
.zz-form-msg.is-rau { color: #9d3b30; }
.zz-form-msg.is-asteapta { color: var(--umber); }

/* ---------- Footer ----------
   Fotografia inchisa a variantei B pe toate latimile (era doar pe telefon).
   Poza e destul de inchisa singura, nu are nevoie de voal. */
.zz-footer {
  background: #211910 url("img/footer-dark.webp") 50% 50% / cover no-repeat;
  color: var(--on-dark-2);
}
/* (27.08) Pe desktop, fundalurile full-bleed primesc fisierele mari, upscalate
   Real-ESRGAN (900px intins pe 1920+ = moale). Telefonul ramane pe cele mici. */
@media (min-width: 821px) {
  .zz-footer {
    background: #211910 url("img/footer-dark-2400.webp") 50% 50% / cover no-repeat;
  }
  .zz-cta-band {
    /* ACEEASI fotografie ca pe telefon (band-wall2, cerut de user 27.08 —
       varianta cu fasia din panorama a fost respinsa), doar in versiunea
       upscalata Real-ESRGAN ca sa ramana clara pe monitoare late */
    background: linear-gradient(to bottom,
      rgba(24, 19, 15, 0.14) 0%,
      rgba(24, 19, 15, 0.14) 18%,
      rgba(24, 19, 15, 0.58) 26%,
      rgba(24, 19, 15, 0.58) 80%,
      rgba(24, 19, 15, 0.20) 100%),
      #7a4f26 url("img/band-chat-2880.webp") 50% 50% / cover no-repeat;
  }
}
.zz-footer__main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 26px var(--pad);
}
.zz-footer__mark {
  display: grid;
  line-height: 1;
  gap: 4px;
}
.zz-footer__mark .zz-mark__name { color: var(--on-dark); font-size: 26px; }
/* subtitlul auriu din mockupul B. Auriul paletei (#a9783e) da doar 3,44:1 pe
   fundalul asta, sub pragul de 4,5:1 pentru text mic -> ton mai deschis, 5,37:1 */
.zz-footer__mark .zz-mark__sub { color: #cb9d58; }
.zz-footer__nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(16px, 3vw, 38px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.zz-footer__nav a { transition: opacity 0.2s; }
.zz-footer__nav a:hover { opacity: 1; }
/* punct auriu intre intrarile de meniu. Pseudo-element gol (fara text), deci
   nu ajunge in numele accesibil al linkului; asezat in golul dintre elemente. */
.zz-footer__nav a + a { position: relative; }
.zz-footer__nav a + a::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(16px, 3vw, 38px) / 2 - 2px);
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--gold);
}
/* Butoane social „de culoarea fundalului", usor lucioase (varianta B):
   niciun fundal propriu, doar un strat translucid peste fotografia footerului.
   Relieful vine din lumina de sus, umbra de jos si o umbra scurta care le ridica.
   Patrate cu colturi ascutite, ca butoanele mari ale site-ului. */
.zz-footer__social { display: flex; gap: 14px; }
.zz-footer__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 0;
  background: linear-gradient(155deg,
    rgba(255, 246, 232, 0.15) 0%,
    rgba(255, 246, 232, 0.05) 42%,
    rgba(0, 0, 0, 0.14) 100%);
  border: 1px solid rgba(243, 232, 216, 0.13);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 240, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 3px 7px rgba(0, 0, 0, 0.34);
  transition: filter 0.2s;
}
/* doar unde exista mouse: pe touch, un :hover ramane „lipit" dupa atingere.
   Si nu inlocuim fundalul, ci il luminam, ca luciul butonului sa nu dispara. */
@media (hover: hover) {
  .zz-footer__social a:hover { filter: brightness(1.28); }
}
.zz-footer__social svg { width: 18px; height: 18px; }
/* Pictograme social: crem in repaus, culorile de brand la atingere/hover.
   Culorile sunt cele DESCHISE, nu originalele: pe fundalul inchis al butonului,
   movul Instagram original dadea 1,37:1, sub pragul de 3:1 pentru grafica. */
/* ⚠️ 24.09 (cerere bro): culorile sunt PORNITE din start, nu doar la atingere.
   Butonul a ramas exact cum era — fundal de sticla inchis, patrat, aceleasi
   umbre. S-a schimbat DOAR pictograma dinauntru.

   ⚠️ Si de ce tonurile astea si nu cele originale de brand: pe fundalul inchis
   al butonului, movul Instagram original (#833AB4) da 1,37:1, iar albastrul
   Facebook oficial (#1877F2) 2,1:1 — amandoua sub pragul de 3:1 pentru grafica,
   adica pictograma s-ar topi in buton. Tonurile de aici sunt aceleasi culori,
   ridicate in luminozitate cat sa se vada. Culorile chiar originale ar cere fond
   deschis; s-a incercat pe 23.09 si userul a cerut inapoi butonul inchis. */
.zz-footer__social .zz-ig { stroke: url(#zzIg); }
.zz-footer__social .zz-ig-dot { fill: url(#zzIg); }
.zz-footer__social .zz-fb { fill: #5299f5; }
/* ═══ Raza care trece peste logo-ul din footer ═══
   Lumina e decupata IN litere (background-clip: text). `background-position`
   mai MIC muta banda spre DREAPTA, deci animatia merge de la 100% la 0%.
   Plasa de siguranta: fara @supports, un degrade invalid ar face textul
   sa DISPARA complet (text-fill transparent fara fundal decupat). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .zz-footer__mark .zz-mark__name {
    background-image: linear-gradient(100deg,
      #e0d3bd 0%,
      #e0d3bd 43%,
      #fffdf5 48%,
      #fffdf5 52%,
      #e0d3bd 57%,
      #e0d3bd 100%);
    background-size: 300% 100%;
    background-position: 0% 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: zz-raza 3s ease-in-out infinite;
  }
}
@keyframes zz-raza {
  0%   { background-position: 100% 0; }
  83%  { background-position: 0% 0; }
  100% { background-position: 0% 0; }
}
.zz-footer__legal {
  /* linia de deasupra randului legal: aurie, ca in mockupul B */
  border-top: 1px solid rgba(169, 120, 62, 0.55);
  display: flex;
  flex-wrap: wrap;
  /* a ramas doar meniul legal (mentiunea de copyright a fost scoasa 26.08),
     deci se centreaza; cu space-between s-ar lipi de marginea stanga */
  justify-content: center;
  gap: 10px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px var(--pad) 22px;
  font-size: 11.5px;
  color: #c6baa9;
}
.zz-footer__legal nav { display: flex; flex-wrap: wrap; gap: 14px; }
/* bare verticale intre linkurile legale (varianta B) */
.zz-footer__legal nav a { position: relative; }
.zz-footer__legal nav a + a::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  width: 1px;
  height: 11px;
  margin-top: -5.5px;
  background: rgba(198, 186, 169, 0.42);
}
.zz-footer__legal a:hover { color: var(--cream); }

/* ---------- Scroll reveal ---------- */
.zz-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.zz-reveal.in { opacity: 1; transform: none; }

/* ---------- Pagini legale ---------- */
.zz-legal {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(48px, 9vh, 100px) var(--pad) 90px;
}
.zz-legal h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(32px, 5vw, 50px);
  font-weight: 600;
  margin-bottom: 34px;
}
.zz-legal h2 {
  font-size: 16.5px;
  font-weight: 700;
  margin: 32px 0 10px;
  letter-spacing: 0.03em;
}
.zz-legal p, .zz-legal li { color: var(--umber); margin-bottom: 12px; }
.zz-legal ul { padding-left: 20px; }
.zz-legal a { border-bottom: 1px solid var(--line); }
.zz-legal .todo {
  border: 1px dashed var(--gold);
  padding: 14px 18px;
  color: var(--ink);
  font-size: 14px;
  margin: 10px 0 20px;
  background: var(--panel);
}
/* footer-ul simplu de pe paginile legale */
body > footer.zz-footer > span,
body > footer.zz-footer > nav {
  display: block;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 8px var(--pad);
  font-size: 12px;
}
body > footer.zz-footer > span { padding-top: 22px; color: #c6baa9; }
body > footer.zz-footer > nav { padding-bottom: 22px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  /* ═══ VARIANTA B — dupa mockupul din 25.08 seara ═══
     Din 26.08 stilul B (Das Studio deschis, fotografiile pe banda si footer,
     accentele aurii, butoanele social lucioase, raza pe logo) traieste in BAZA
     foii de stil, deci se aplica pe toate latimile — aici raman doar regulile
     de ASEZARE specifice telefonului. */

  /* SILUETA DE PIRAMIDA in footer: fiecare rand trebuie sa fie mai lat decat cel
     de deasupra. Cu TREI butoane de 38px, latimea randului = 114 + 2 x spatiu si
     trebuie sa cada intre logo (128) si meniu (238). La spatiu 30px iese 174px:
     128 -> 174 -> 238 -> 324. Baza are gap 14 (desktopul nu are piramida). */
  .zz-footer__social { gap: 30px; }

  .zz-header {
    padding-left: max(var(--pad), env(safe-area-inset-left));
    padding-right: max(var(--pad), env(safe-area-inset-right));
  }

  /* mobil: text mai mic, restul decupajului vine din blocul de sub 600px */
  .zz-hero::after { height: 40%; }
  .zz-hero__copy { bottom: clamp(20px, 5vw, 34px); }
  .zz-hero__copy > * { max-width: none; }        /* anulează limita de 58vw de pe desktop */
  .zz-hero__copy h1 { max-width: 64%; }          /* doar titlul se strânge, ca să nu intre peste borcan */
  .zz-hero__copy h1 { font-size: clamp(30px, 8.6vw, 46px); }
  .zz-hero__cta { padding: 13px 24px; font-size: 11px; letter-spacing: 0.2em; }

  /* pe telefon: TEXTUL in stanga, poza cu foarfecele in dreapta si mai lata
     (cerut de user 24.08; inainte era invers, cu order:-1 pe media) */
  .zz-intro {
    /* poza = aceeasi latime ca inainte (47% din rand), dar in DREAPTA:
       coloanele s-au inversat, nu s-au redimensionat (era 1fr poza | 1.12fr text) */
    /* poza putin mai lata si mai aproape de marginea dreapta (cerut 24.08),
       dar fara s-o atinga — varianta lipita de margine a fost respinsa */
    grid-template-columns: 1.08fr 1fr;
    gap: 16px;
    padding-right: 10px;
    /* inaltimea randului o da TEXTUL; poza se incadreaza exact intre marginea de sus
       a titlului si liniuta aurie de sub el — nu urca mai sus, nu coboara mai jos */
    align-items: stretch;
    padding-top: clamp(30px, 6vw, 48px);
    padding-bottom: clamp(30px, 6vw, 48px);
  }
  .zz-intro__media { position: relative; }
  .zz-intro__media { order: 0; }
  /* absolut => imaginea nu mai contribuie la inaltimea randului, doar o umple */
  .zz-intro__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 50% 50%;
  }
  .zz-intro__copy h2 { font-size: clamp(17px, 4.7vw, 26px); line-height: 1.2; }
  .zz-intro__copy h2 br { display: none; }
  .zz-intro__copy .zz-rule { margin-top: 14px; }

  /* produse pe mobil: numele sus ca bandă, cele două poze alături
     (înainte erau 3 pătrate pline unul sub altul = ~1200px de derulat per produs) */
  /* spatiu + bara aurie intre cele doua produse (cerut de user: „sa se distinga mai usor") */
  .zz-products { gap: clamp(26px, 6.5vw, 38px); }
  .zz-prow-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 var(--pad);
  }
  .zz-prow-sep__line {
    display: block;
    height: 1px;
    width: clamp(54px, 19vw, 104px);
    /* acelasi cafeniu ca liniutele subtiri de sub titluri */
    background: #7a5229;
    opacity: 0.55;
  }
  .zz-prow-sep__dot {
    display: block;
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    background: #7a5229;
    opacity: 0.85;
  }

  /* ===== TEST 24.08: produsul pe o singura coloana, dupa mockup-ul userului =====
     titlu + descriere -> fotografia produsului mare -> specificatii pe 2 coloane
     -> pret -> buton pe toata latimea -> fotografia cu modelul, text peste ea. */
  .zz-prow {
    /* titlu pe toata latimea -> cele doua fotografii ALATURI -> specificatii si pret */
    grid-template-columns: 1fr 1fr;
    row-gap: 0;
    column-gap: 2px;
    background: #ebe2d2;
  }
  .zz-prow__panel { display: contents; }
  .zz-prow__head {
    order: 1;
    grid-column: 1 / -1;
    padding: clamp(30px, 8vw, 40px) 18px clamp(22px, 5.5vw, 28px);
    /* trecere lina de la cremul paginii la nisipiul casetei, in loc de muchie taiata */
    background: linear-gradient(to bottom, #f2ece1 0%, #ebe2d2 58px);
  }
  .zz-prow__photo { order: 2; grid-column: 1; }
  .zz-prow__model { order: 3; grid-column: 2; }
  .zz-prow__body {
    order: 4;
    grid-column: 1 / -1;
    padding: clamp(22px, 6vw, 30px) 18px clamp(30px, 8vw, 40px);
    /* iesirea din caseta, simetrica cu intrarea: nisipiul se topeste inapoi in crem */
    background: linear-gradient(to bottom, #ebe2d2 calc(100% - 58px), #f2ece1 100%);
  }

  .zz-prow__head h3 { font-size: clamp(28px, 8.4vw, 38px); }

  /* fotografia produsului: patrat, pe toata latimea */
  .zz-prow__photo { display: block; height: auto; }
  .zz-prow__photo img {
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }
  .zz-prow:nth-child(3) .zz-prow__photo img { object-position: 50% 50%; }

  /* specificatii: scale in stanga, atribute in dreapta, cu linie intre ele */
  .zz-prow__specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
    align-items: center;
  }
  .zz-prow__specs .zz-scale { margin-top: 0; gap: 12px; }
  .zz-scale__row { justify-content: flex-start; gap: 8px; }
  .zz-scale__label { min-width: 0; text-align: left; font-size: 8.5px; }
  .zz-scale__val {
    display: block;
    font-size: 9px;
    letter-spacing: 0.06em;
    color: var(--umber);
    opacity: 0.7;
  }
  .zz-prow__specs .zz-feat {
    grid-template-columns: 1fr;
    margin-top: 0;
    gap: 11px;
    border-left: 1px solid rgba(122, 82, 41, 0.22);
    padding-left: 14px;
  }
  .zz-prow__specs .zz-feat li { justify-content: flex-start; padding: 0; }
  .zz-prow__specs .zz-feat li + li { border-left: 0; }

  /* pret, despartit de specificatii printr-o linie fina */
  .zz-prow__body .zz-prow__meta {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(122, 82, 41, 0.18);
    width: 100%;
  }
  /* butonul de cumparare plin e acum in baza (identic pe toate latimile) */

  /* fotografia cu modelul: eticheta de peste imagine e acum in baza;
     aici raman doar proportia si incadrarea de telefon */
  .zz-prow__model img { aspect-ratio: 4 / 5; object-position: 50% 18%; }
  .zz-prow__panel h3 { font-size: clamp(22px, 6.6vw, 30px); }
  .zz-prow__panel .zz-rule { margin-bottom: 0; }
  .zz-prow__panel p { font-size: 11px; letter-spacing: 0.18em; margin-bottom: 6px; }
  .zz-prow__price { font-size: 22px; }
  .zz-prow__panel p.zz-prow__sub { font-size: 11.5px; }
  .zz-scale { margin-top: 20px; gap: 7px; }
  .zz-scale__label { font-size: 8.5px; letter-spacing: 0.24em; min-width: 60px; }
  .zz-scale__dots i { width: 6px; height: 6px; }
  .zz-feat { margin-top: 22px; }
  .zz-feat li { gap: 7px; padding: 0 4px; }
  .zz-feat svg { width: 20px; height: 20px; }
  .zz-feat span { font-size: 8px; letter-spacing: 0.08em; line-height: 1.5; }
  .zz-prow__meta { margin-top: 24px; gap: 6px; }
  .zz-prow__qty { font-size: 10px; letter-spacing: 0.22em; }
  .zz-prow__base { font-size: 9.5px; }
    .zz-btn-buy { margin-top: 22px; padding: 13px 30px; font-size: 9.5px; letter-spacing: 0.26em; }
  /* modelul dă înălțimea rândului (poză 4/5 + banda „Gestylt mit"),
     fotografia produsului se întinde la aceeași înălțime — fără decalaj între coloane */


  /* aceeași compoziție ca pe desktop: 4 coloane (înaltă · înaltă · stivă de 2 · înaltă),
     doar cu marginile și eticheta strânse ca să încapă pe telefon */
  .zz-cuts { padding-left: 10px; padding-right: 10px; }
  .zz-cuts__grid { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .zz-cuts__stack { gap: 5px; }
  .zz-cuts__grid figcaption {
    font-size: 8px;
    letter-spacing: 0.05em;
    padding: 6px 2px;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.25;
  }

  /* pe telefon: poza în stânga, textul în dreapta, pe același rând */
  /* Inaltimea randului o da COLOANA DE TEXT, iar fotografia se intinde pe toata
     inaltimea ei, lipita de marginea de sus si de cea de jos a sectiunii.
     Inainte: align-items center + aspect-ratio 3/4 lasau 4,2px goi sus si jos,
     deci poza nu atingea banda de dedesubt.
     Pozele sunt absolute (nu grid-area) ca sa NU mai contribuie la inaltimea randului;
     se suprapun in continuare, deci slideshow-ul cu opacitate merge neschimbat. */
  .zz-studio { grid-template-columns: 0.84fr 1.16fr; align-items: stretch; }
  .zz-studio__media { position: relative; }
  .zz-studio__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 50% 50%;
  }
  .zz-studio__copy {
    padding: clamp(22px, 5vw, 34px) clamp(14px, 4vw, 24px);
    max-width: none;
  }
  .zz-studio__copy h2 { font-size: clamp(18px, 4.8vw, 26px); }
  .zz-studio__copy .zz-rule { margin-bottom: 14px; }
  .zz-studio__copy p { font-size: 12.5px; line-height: 1.6; margin-bottom: 10px; max-width: none; }

  .zz-footer__main { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  /* pe telefon, butoanele de social urca DEASUPRA meniului (cerut 25.08).
     Se face cu `order`, nu prin mutare in HTML: pe desktop randul e „logo | meniu | social"
     pe trei coloane, iar o mutare in HTML ar schimba si desktopul. */
  .zz-footer__social { order: 2; }
  .zz-footer__nav { order: 3; }
  .zz-footer__legal {
    justify-content: center;
    text-align: center;
    padding-bottom: max(22px, env(safe-area-inset-bottom));
    /* toate cele 6 linkuri legale pe UN singur rand (la 11,5px „Rückgabe" cadea
       pe randul 2 si ramanea aninat in stanga — raportat de user pe S23 Ultra).
       La 10px + gap 9, randul masoara ~300px si incape si la 360. */
    font-size: 10px;
  }
  .zz-footer__legal nav { gap: 9px; }
  /* barele verticale, recalibrate pentru gap-ul mai mic (stateau la -8px in gap de 14) */
  .zz-footer__legal nav a + a::before { left: -5px; height: 9px; margin-top: -4.5px; }
}

@media (prefers-reduced-motion: reduce) {
  /* fotografiile din „Das Studio" se schimba in continuare, dar trecerea e scurta */
  .zz-studio__media img { transition-duration: 0.45s; }
  html { scroll-behavior: auto; }
  .zz-footer__mark .zz-mark__name { animation: none; }
  .zz-reveal { opacity: 1; transform: none; transition: none; }
  .zz-btn-cta { transition: none; }
}

/* ── Bloc legal pe fiecare produs ──────────────────────────────────────────
   INCI, avertismente, producator, PAO si EAN. Cerut de Regulamentul (CE)
   1223/2009 la vanzarea online si de GPSR (trasabilitate + date producator).
   Ascuns intr-un acordeon ca sa nu incarce blocul de produs. */
.zz-prod-legal {
  width: 100%;
  margin-top: 18px;
  border-top: 1px solid rgba(122, 82, 41, 0.22);
  text-align: left;
}
.zz-prod-legal summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 0 11px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a5229;
  font-weight: 600;
}
.zz-prod-legal summary::-webkit-details-marker { display: none; }
.zz-prod-legal summary::after {
  content: "";
  width: 5px; height: 5px;
  margin-left: auto; margin-top: -2px;
  border-right: 1.1px solid currentColor;
  border-bottom: 1.1px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.22s ease;
}
.zz-prod-legal[open] summary::after { transform: rotate(-135deg); margin-top: 1px; }
.zz-prod-legal__in { padding-bottom: 16px; font-size: 13px; line-height: 1.68; }
.zz-prod-legal h4 {
  margin: 14px 0 4px;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a5229;
  font-weight: 600;
}
.zz-prod-legal__in p { margin: 0; }
/* lista INCI e lunga si fara spatii utile — o lasam sa se rupa oriunde */
.zz-inci { font-size: 12px; opacity: 0.82; word-break: break-word; }
.zz-prod-legal__meta { margin-top: 14px !important; font-size: 11.5px; opacity: 0.72; }
/* „17,90 EUR / inkl. MwSt." — mentiunea sta pe acelasi rand cu pretul, despartita
   de o bara subtire. Pretul e Cormorant, mentiunea revine la sans, ca sa nu concureze. */
.zz-prow__vat {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
  white-space: nowrap;
}
.zz-prow__vat::before { content: "/"; margin: 0 7px; opacity: 0.5; }
/* costurile de livrare: obligatoriu de mentionat (PAngV), dar discret */
.zz-prow__ship {
  display: block;
  margin-top: 6px;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  opacity: 0.55;
}
.zz-prow__ship a { color: inherit; }
@media (max-width: 820px) {
  .zz-prod-legal summary { font-size: 9.5px; letter-spacing: 0.2em; }
  .zz-prow__vat { font-size: 10px; }
}

/* formularul-model de retragere, in caseta, ca sa se distinga de textul legal */
.zz-formular {
  border: 1px solid rgba(122, 82, 41, 0.3);
  padding: 18px 20px;
  margin-top: 14px;
  background: rgba(122, 82, 41, 0.04);
  font-size: 14px;
}
.zz-formular p { margin: 0 0 10px; }
.zz-stand { margin-top: 26px; font-size: 13px; opacity: 0.65; }

/* datele produsului: fiecare pe UN SINGUR rand, "Eticheta: valoare" */
.zz-prod-facts {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(122, 82, 41, 0.16);
}
.zz-prod-facts > div { padding: 4px 0; line-height: 1.5; }
.zz-prod-facts dt {
  display: inline;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7a5229;
  opacity: 0.9;
}
.zz-prod-facts dt::after { content: ":"; }
.zz-prod-facts dd { display: inline; margin: 0 0 0 6px; font-size: 13px; }

/* ── COS: notificarea de adaugare ──────────────────────────────────────────
   Apare jos, deasupra continutului, si dispare singura dupa 6 secunde. */
.zz-toast {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 60;
  background: var(--cream);
  border: 1px solid rgba(122, 82, 41, 0.35);
  box-shadow: 0 10px 30px rgba(24, 19, 15, 0.22);
  padding: 16px 16px 14px;
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.26s ease, opacity 0.26s ease;
}
.zz-toast.on { transform: translateY(0); opacity: 1; }
.zz-toast__t {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a5229;
  font-weight: 600;
}
.zz-toast__row { display: flex; gap: 10px; }
.zz-toast__ghost, .zz-toast__cta {
  flex: 1;
  font-family: inherit;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 13px 10px;
  border: 1px solid var(--ink);
  cursor: pointer;
}
.zz-toast__ghost { background: transparent; color: var(--ink); }
.zz-toast__cta { background: var(--ink); color: var(--cream); }

/* ── COS: panoul ───────────────────────────────────────────────────────────
   Foaie care urca de jos pe telefon — gestul natural pe mobil. */
.zz-cart { position: fixed; inset: 0; z-index: 70; }
.zz-cart__scrim {
  position: absolute; inset: 0;
  background: rgba(24, 19, 15, 0.5);
  opacity: 0; transition: opacity 0.28s ease;
}
.zz-cart.on .zz-cart__scrim { opacity: 1; }
.zz-cart__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--cream);
  border-top: 1px solid rgba(122, 82, 41, 0.35);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.zz-cart.on .zz-cart__panel { transform: translateY(0); }
.zz-cart__head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px var(--pad) 14px;
  border-bottom: 1px solid rgba(122, 82, 41, 0.2);
}
.zz-cart__head h2 {
  margin: 0; flex: 1;
  font-family: "Cormorant Garamond", serif;
  font-size: 24px; font-weight: 500; letter-spacing: 0.04em;
}
.zz-cart__x {
  background: none; border: 0; cursor: pointer;
  font-size: 30px; line-height: 1; color: var(--ink); opacity: 0.6;
  padding: 0 4px; font-family: inherit;
}
.zz-cart__body { overflow-y: auto; padding: 4px var(--pad) calc(18px + env(safe-area-inset-bottom)); }
.zz-cart__gol { padding: 34px 0; text-align: center; opacity: 0.6; font-size: 14px; }

.zz-cart__linie {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px 14px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(122, 82, 41, 0.16);
}
/* poza produsului, in stanga, pe ambele randuri ale liniei */
.zz-cart__poza {
  grid-column: 1; grid-row: 1 / span 2;
  width: 60px; height: 75px;
  object-fit: cover;
  background: var(--panel);
}
.zz-cart__info { grid-column: 2; }
.zz-cart__nume { margin: 0; font-size: 15px; font-weight: 600; }
.zz-cart__desc { margin: 3px 0 0; font-size: 12px; opacity: 0.6; }
.zz-cart__qty {
  grid-column: 2; grid-row: 2;
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid rgba(122, 82, 41, 0.35);
  width: max-content;
}
.zz-cart__qty button {
  width: 34px; height: 32px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 16px; color: var(--ink);
}
.zz-cart__qty span { min-width: 26px; text-align: center; font-size: 14px; font-weight: 600; }
.zz-cart__pret {
  grid-column: 3; grid-row: 1 / span 2;
  margin: 0; align-self: center;
  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.zz-cart__totaluri { padding-top: 16px; }
.zz-cart__sum { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; }

/* ---------- Cate bucati mai sunt ----------
   Discret: e o informatie, nu o reclama. Sta lipit de buton, ca sa se citeasca
   impreuna cu el, nu ca un rand ratacit deasupra. */
/* „Stoc epuizat": scris rosu, nu auriu ca numarul de bucati, fiindca e o
   veste proasta, nu o informatie oarecare. Butonul de cumparare ramane la locul
   lui, dar stins si fara cursor de mana. */
.zz-stoc--epuizat { color: #e0736b; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; }
.zz-btn-buy--epuizat { opacity: 0.42; cursor: not-allowed; filter: grayscale(1); }
.zz-btn-buy--epuizat:hover { transform: none; box-shadow: none; }

.zz-stoc {
  margin: 0 0 8px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--gold);
}

/* ---------- Cupon in cos ----------
   Inchis la inceput: cine n-are cod nu trebuie sa vada o casuta goala si sa se
   intrebe daca a ratat ceva. Sageata se roteste, ca sa se vada ca se desface. */
.zz-cupon { border-top: 1px solid rgba(122, 82, 41, 0.16); margin-top: 10px; }
.zz-cupon__cap {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 13px 0; border: 0; background: none;
  font: inherit; color: var(--ink); cursor: pointer; text-align: left;
}
.zz-cupon__et {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.zz-cupon__cap.are .zz-cupon__et { color: var(--gold); }
.zz-cupon__sageata { margin-left: auto; font-size: 11px; transition: transform 0.2s ease; }
.zz-cupon__cap[aria-expanded="true"] .zz-cupon__sageata { transform: rotate(180deg); }
.zz-cupon__corp { padding-bottom: 12px; }
.zz-cupon__rand { display: flex; gap: 8px; }
.zz-cupon__rand input {
  flex: 1; min-width: 0; padding: 11px 12px;
  border: 1px solid rgba(122, 82, 41, 0.3); background: #fff; color: var(--ink);
  font: inherit; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
}
.zz-cupon__rand input::placeholder { letter-spacing: 0; text-transform: none; }
.zz-cupon__rand input:focus { outline: 0; border-color: var(--gold); }
.zz-cupon__aplica {
  flex: none; padding: 11px 16px; border: 1px solid var(--ink); background: var(--ink);
  color: var(--cream); font: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.zz-cupon__aplica:disabled { opacity: 0.5; cursor: default; }
.zz-cupon__pus { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.zz-cupon__pus b { letter-spacing: 0.06em; }
.zz-cupon__scoate {
  margin-left: auto; border: 0; background: none; color: var(--ink);
  font: inherit; font-size: 12.5px; text-decoration: underline; cursor: pointer;
}
.zz-cupon__rez { margin: 8px 0 0; font-size: 13px; line-height: 1.5; }
.zz-cupon__rez.rau { color: #9a3b2c; }
/* randul de reducere din totaluri: verde, ca sa se vada ca e in favoarea lui */
.zz-cart__redus { color: #2f7a52; }
.zz-cart__sum.mare {
  margin-top: 8px; padding-top: 12px;
  border-top: 1px solid rgba(122, 82, 41, 0.3);
  font-size: 18px; font-weight: 600;
}
.zz-cart__tva { margin: 4px 0 0; text-align: right; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; }
.zz-cart__nota { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; opacity: 0.6; }
.zz-cart__cta {
  width: 100%; margin-top: 16px;
  font-family: inherit;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 17px 20px;
  color: var(--cream);
  background: linear-gradient(180deg, #3a2413, #24150a);
  border: 0;
  box-shadow: inset 0 1px 0 rgba(201, 146, 90, 0.45), 0 6px 18px rgba(44, 25, 12, 0.26);
  cursor: pointer;
}
.zz-cart__cta:disabled { opacity: 0.6; cursor: default; }

/* bulina cu numarul de produse, pe cosul din antet */
.zz-header__icons a { position: relative; }
.zz-header__icons a.has::after {
  content: attr(data-n);
  position: absolute; top: -4px; right: -6px;
  min-width: 15px; height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: #7a5229; color: var(--cream);
  font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
}
/* butonul de cumparare e acum <button>, nu <a> */
button.zz-btn-buy { font-family: inherit; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .zz-toast, .zz-cart__panel, .zz-cart__scrim { transition: none; }
}

/* ── Pagina de retur ─────────────────────────────────────────────────────── */
.zz-retur-box {
  margin: 22px 0 18px;
  padding: 16px 18px;
  border: 1px solid rgba(122, 82, 41, 0.3);
  background: rgba(122, 82, 41, 0.05);
  font-size: 14.5px;
  line-height: 1.7;
}
.zz-retur-info {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(122, 82, 41, 0.22);
}
.zz-retur-info h2 {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a5229;
  margin: 0 0 12px;
}
.zz-retur-info p { font-size: 13.5px; line-height: 1.65; margin: 0 0 12px; opacity: 0.85; }
.zz-form-msg.ok { color: #276749; }
.zz-form-msg.err { color: #c0392b; }

/* butonul catre portalul de retur, pe pagina de retragere */
/* butonul catre portalul de retur, la finalul paginii */
.zz-retur-cta { margin: 30px 0 6px; }
.zz-retur-cta .zz-btn-form { text-decoration: none; text-align: center; }
/* formularul-model: ramane pe pagina (e cerut de lege) dar pliat */
.zz-formular-acc { border-top: 1px solid rgba(122, 82, 41, 0.22); margin-top: 26px; }
.zz-formular-acc summary { color: #7a5229; }

/* ── Zona 601–820px: tablete si telefoane mari in orizontal ────────────────
   Aici se aplica inca aranjamentul de telefon. Fara limita de latime, pozele
   se umflau la 380px si butonul de cumparare se intindea pe 730px, ceea ce
   arata a pagina de telefon trasa cu forta. Solutia obisnuita: pastram
   aranjamentul, dar il tinem la o latime de citit si il centram. */
@media (min-width: 601px) and (max-width: 820px) {
  .zz-intro,
  .zz-products,
  .zz-cuts,
  .zz-studio {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  .zz-cta-band > *,
  .zz-footer__main,
  .zz-footer__legal {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Doar desktop (>820px): parcele ramase diferite fata de telefon ───────── */
@media (min-width: 821px) {
  /* fotografia LATA 16:9 (generata 26.08 din aceeasi scena) umple fereastra
     complet, fara laterale. Ancorare 57%: la ferestrele foarte late (2.1:1+)
     decupajul vertical se imparte asa incat logo-ul de sus SI produsele de jos
     raman amandoua in cadru (marginile libere ale pozei: ~110px deasupra
     logo-ului, ~100px sub produse, la scara 1920). */
  /* regulile hero au trecut in baza (poza lata pe tot 601+) — aici nu mai e nimic de hero */

  /* cele doua randuri de produs aveau inaltimi diferite (pozele au proportii
     diferite, iar panoul cremei e mai inalt — 3 scale vs 2). Randurile 1fr ale
     unui grid cu inaltime automata se egalizeaza la cel mai inalt continut. */
  .zz-products { grid-auto-rows: 1fr; }

  /* eticheta de peste fotografia modelului, la marimea coloanei de desktop */
  .zz-cap__pre { font-size: 9px; }
  .zz-cap__name { font-size: 19px; }
  .zz-prow__model figcaption { padding: 44px 16px 15px; }

  /* cosul-foaie si notificarea nu se intind pe toata latimea unui monitor:
     raman foi care urca de jos, dar centrate, la latime de telefon */
  .zz-cart__panel {
    max-width: 560px;
    margin: 0 auto;
    border-left: 1px solid rgba(122, 82, 41, 0.35);
    border-right: 1px solid rgba(122, 82, 41, 0.35);
  }
  .zz-toast {
    max-width: 480px;
    margin: 0 auto;
  }
}

/* ── SCALARE FLUIDA pe monitoare mari (27.08, varianta CSS pur) ──────────────
   NU `zoom` (incercat si RETRAS: rupea sectiunile full-bleed — banda si footerul
   nu mai atingeau marginile). In schimb: canvasul --maxw devine fluid + textele
   de mai jos cresc cu formule pe vw. Fundalurile full-bleed raman neatinse.
   Factor: 1 la 1600px -> 1.35 la ~2160px (plafon). Sub 1600 nimic nu se schimba.
   Formula per marime: font-size: min(X*1.35 px, X/16 vw). */
@media (min-width: 1600px) {
  :root { --maxw: min(71.25vw, 1539px); }

  /* antet */
  .zz-mark__name { font-size: min(54px, 2.5vw); }
  .zz-mark__sub { font-size: min(10.8px, 0.5vw); }
  /* steagurile si cosul cresc cu aceeasi formula (cerut 27.08) */
  .zz-flag svg { width: min(28.35px, 1.3125vw); height: min(18.9px, 0.875vw); }
  .zz-flags { gap: min(6.75px, 0.3125vw); }
  .zz-header__icons a { width: min(56.7px, 2.625vw); height: min(56.7px, 2.625vw); }
  .zz-header__icons svg { width: min(28.35px, 1.3125vw); height: min(28.35px, 1.3125vw); }
  .zz-header__icons a.has::after {
    min-width: min(20.25px, 0.9375vw);
    height: min(20.25px, 0.9375vw);
    line-height: min(20.25px, 0.9375vw);
    font-size: min(12.8px, 0.59375vw);
  }

  /* hero (27.08, decizia finala a userului): titlul pe DOUA randuri (unul sub
     altul, ca la baza), ancorat de MARGINEA STANGA a ecranului (nu de canvasul
     centrat), butonul dedesubt; totul creste fluid. Varianta pe un singur rand
     a fost incercata si RESPINSA („nu imi place cum se vede"). */
  .zz-hero__copy {
    /* CONTINUU cu formula canvasului (care da ~286px la 1600) si deriveaza lin
       spre stanga pe masura ce ecranul se lateste; podea la 140px. Asa nu mai
       exista saltul brusc de pozitie la granita de 1600 (reclamat de user),
       iar la rezolutii mari textul sta „putin inspre dreapta", nu lipit de margine. */
    padding-left: max(140px, calc(286px - (100vw - 1600px) * 0.12), env(safe-area-inset-left));
  }
  .zz-hero__copy h1 { font-size: min(83.7px, 3.875vw); margin-bottom: min(35.1px, 1.625vw); }
  .zz-hero__copy > * { max-width: min(58vw, 840px); }
  .zz-hero__cta {
    font-size: min(16.2px, 0.75vw);
    padding: min(18.9px, 0.875vw) min(40.5px, 1.875vw);
  }

  /* intro + titluri de sectiune (ridic plafoanele clamp-urilor existente) */
  .zz-intro__copy h2 { font-size: min(59.4px, 2.75vw); }
  .zz-cuts h2 { font-size: min(56.7px, 2.625vw); }
  .zz-studio__copy h2 { font-size: min(54px, 2.5vw); }
  .zz-cta-band h2 { font-size: min(64.8px, 3vw); }

  /* blocul de produs */
  .zz-prow__panel h3 { font-size: min(44.55px, 2.0625vw); }
  .zz-prow__panel p { font-size: min(15.5px, 0.71875vw); }
  .zz-prow__panel p.zz-prow__sub { font-size: min(18.2px, 0.84375vw); }
  .zz-scale__label, .zz-feat span { font-size: min(12.15px, 0.5625vw); }
  .zz-prow__qty { font-size: min(14.85px, 0.6875vw); }
  .zz-prow__base, .zz-prow__mwst, .zz-prow__vat, .zz-prod-facts dt { font-size: min(13.5px, 0.625vw); }
  .zz-prow__price { font-size: min(32.4px, 1.5vw); }
  .zz-btn-buy, .zz-prow__body .zz-btn-buy, .zz-prod-legal summary, .zz-prow__ship { font-size: min(14.2px, 0.65625vw); }
  .zz-cap__pre { font-size: min(10.1px, 0.46875vw); }
  .zz-cap__name { font-size: min(21.6px, 1vw); }
  .zz-prod-legal__in, .zz-prod-facts dd { font-size: min(17.55px, 0.8125vw); }
  .zz-prod-legal h4 { font-size: min(13.5px, 0.625vw); }
  .zz-inci { font-size: min(16.2px, 0.75vw); }
  .zz-prod-legal__meta { font-size: min(15.5px, 0.71875vw); }

  /* tunsori + studio */
  .zz-cuts__grid figcaption { font-size: min(14.2px, 0.65625vw); }
  .zz-studio__copy p { font-size: min(20.25px, 0.9375vw); }

  /* banda CTA */
  .zz-btn-cta { font-size: min(16.2px, 0.75vw); }
  .zz-band-rating { font-size: min(16.875px, 0.78125vw); }
  .zz-band-rating__stars { font-size: min(18.9px, 0.875vw); }

  /* footer */
  .zz-footer__mark .zz-mark__name { font-size: min(35.1px, 1.625vw); }
  .zz-footer__nav { font-size: min(14.85px, 0.6875vw); }
  .zz-footer__legal { font-size: min(15.5px, 0.71875vw); }

  /* banda Termin, mai COMPACTA la rezolutii mari (cerut 27.08: „sa nu fie
     atat de mari"): paddinguri verticale reduse + titlul fara crestere fluida */
  .zz-cta-band { padding: clamp(38px, 5vh, 58px) var(--pad); }
  .zz-cta-band h2 { font-size: 48px; margin-bottom: 22px; }
}

/* ── PANOU PRODUS dupa mockupul userului (27.08, forma finala) ───────────────
   Doua coloane alaturate: scalele cu notele „5/5" in stanga, atributele in
   dreapta (separator vertical doar cand e loc, >=1100); sub ele o linie fina
   si blocul de pret centrat. Flex cu wrap: pe panouri inguste coloanele cad
   una sub alta in loc sa se taie. */
@media (min-width: 821px) {
  .zz-prow__specs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 24px;
    row-gap: 24px;
    margin-top: 26px;
    /* coloanele au nevoie de ~404px; imprumutam putin din paddingul panoului */
    margin-inline: -14px;
  }
  .zz-scale {
    margin: 0;
    grid-template-columns: max-content max-content max-content;
    column-gap: 14px;
    row-gap: 12px;
    align-items: center;
    align-content: center;
  }
  .zz-scale__row { display: contents; }
  .zz-scale__label { justify-self: start; text-align: left; min-width: 0; }
  .zz-scale__val {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--umber);
    opacity: 0.85;
  }
  .zz-feat {
    width: auto;
    margin: 0;
    grid-template-columns: max-content;
    row-gap: 13px;
    align-content: center;
  }
  .zz-feat li { justify-content: flex-start; padding: 0; }
  .zz-feat li + li { border-left: 0; }
  .zz-feat span { white-space: nowrap; letter-spacing: 0.07em; }
  /* linia fina dintre specificatii si pret, ca in mockup */
  .zz-prow__meta {
    border-top: 1px solid rgba(122, 82, 41, 0.22);
    padding-top: 26px;
  }
}
/* separatorul vertical doar cand coloanele chiar stau alaturi (sub ~1900 se
   impaturesc una sub alta si o bara verticala ar ramane aninata aiurea) */
@media (min-width: 1900px) {
  .zz-feat { border-left: 1px solid rgba(122, 82, 41, 0.22); padding-left: 24px; }
}



/* ═══ POZE ÎNTREGI în rândul de produs (28.08, cerut de user: „au zoom pe ele") ═══
   Măsurat înainte, la 1440: caseta era 366,7 x 654,4 = raport 0,56, iar pozele sunt
   0,73–0,80 → `cover` tăia 23,7% din lățimea cremei, 30,0% la spray, ~25% la modele.
   Înălțimea de 654px NU vine de la poze, ci de la panoul din mijloc (titlul
   „SEA SALT SPRAY" se rupe pe două rânduri și îl face cel mai înalt).

   Nicio sursă din `zaza-poze` nu e mai înaltă de 0,80, deci un decupaj nou n-ar
   rezolva — ar tăia altfel. Singura cale ca poza să se vadă exact cum e:
   caseta ia forma pozei, iar poza se centrează pe verticală în rând.

   Se aplică DOAR de la 821px în sus. Pe telefon rămâne cum e: acolo rama e 4/5,
   iar pozele sunt 0,73–0,80, deci se taie între 0% și 8% — invizibil.
   Blocul stă la FINALUL fișierului, ca override-urile să nu cadă în fața
   regulilor de bază (capcana de ordine din 27.08). */
@media (min-width: 821px) {
  /* nu mai întind casetele pe toată înălțimea rândului */
  .zz-prow__photo,
  .zz-prow__model { align-self: center; }

  /* `min-height: 100%` din bază forța caseta la înălțimea rândului */
  .zz-prow__photo { min-height: 0; }

  .zz-prow__photo img,
  .zz-prow__model img {
    height: auto;          /* înălțimea vine din proporția reală a pozei */
    object-fit: contain;   /* plasă de siguranță: chiar dacă ceva o strânge, nu taie */
  }

  /* în `.zz-prow__model` (flex pe coloană) imaginea avea `flex: 1` și se întindea */
  .zz-prow__model img { flex: none; }
}

/* ═══ Fereastra produselor urmeaza rezolutia (28.08, cerut de user) ═══
   Pana acum `.zz-products` era inchisa in canvasul centrat (--maxw = 1140px, iar
   de la 1600 in sus min(71.25vw, 1539px)) → pe un monitor de 1867px cardul avea
   1342px si ramaneau ~270px de crem gol de fiecare parte.
   Acum sectiunea merge din margine in margine, exact ca hero-ul de deasupra si ca
   Das Studio / banda / subsolul de dedesubt, care sunt full-bleed de pe 27.08.
   Consecinta CAUTATA: coloanele se latesc, deci si pozele cresc cu rezolutia —
   la 1920 fotografia produsului trece de 850px inaltime, fata de 499px inainte. */
@media (min-width: 821px) {
  .zz-products {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Consecinta laterala a full-bleed-ului: pe monitoare foarte late panoul din mijloc
   se intinde odata cu cardul, iar butonul „Kaufen" si liniile ajungeau la ~775px la
   2560. Continutul panoului se capeaza si se centreaza; titlul, pozele si cardul
   raman fluide. Sub 1600 nu se schimba nimic (acolo panoul e oricum sub plafon). */
@media (min-width: 1600px) {
  .zz-prow__body {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ═══ 601–820px: sectiunile umplu latimea (28.08, cerut de user) ═══
   Pe 26.08 pusesem aici `max-width: 600px` pe sectiuni, ca sa opresc pozele sa se
   umfle si butonul „Kaufen" sa se intinda pe 730px. Efectul secundar, reclamat acum:
   pe o fereastra de ~818px raman ~110px de crem gol de fiecare parte, iar Das Studio
   arata rupt fata de banda de sub el, care e full-bleed.

   Solutia nu e sa scot plafonul de tot, ci sa-l mut de pe SECTIUNE pe TEXT:
   fundalurile si fotografiile merg din margine in margine, iar coloanele de text
   raman la ~600px, centrate — obtinut din padding, nu din max-width, ca fundalul
   sa nu se ingusteze odata cu textul.
   Banda CTA si subsolul raman cum erau: continutul lor capat la 600 arata bine. */
@media (min-width: 601px) and (max-width: 820px) {
  .zz-intro,
  .zz-products,
  .zz-cuts,
  .zz-studio {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  /* titlul produsului si blocul de sub poze: fundalul ramane lat, textul se strange */
  .zz-prow__head,
  .zz-prow__body {
    padding-left: max(18px, calc((100% - 600px) / 2));
    padding-right: max(18px, calc((100% - 600px) / 2));
  }
}

/* ═══ Muchia cardului de produs se topeste in crem si pe desktop (28.08, cerut de user) ═══
   Pe telefon exista deja: `.zz-prow__head` intra din crem in nisipiu pe 58px si
   `.zz-prow__body` iese inapoi tot pe 58px. Pe desktop cardul avea fundal PLAT
   (`background: #ebe2d2`), deci taia sec — o linie orizontala vizibila sus si jos.

   Aceeasi reteta, adaptata: gradientul e pe `.zz-prow` (pe desktop nu exista o banda
   de text deasupra pozelor care sa-l poarte). Ca sa aiba pe ce sa se stinga, paddingul
   pe VERTICALA creste de la 18px la 46px — atat cat sa se vada trecerea; pe orizontala
   ramane 18px, deci pozele stau exact unde stateau fata de marginile ecranului. */
@media (min-width: 821px) {
  .zz-prow {
    padding: 46px 18px;
    background: linear-gradient(
      to bottom,
      #f2ece1 0,
      #ebe2d2 46px,
      #ebe2d2 calc(100% - 46px),
      #f2ece1 100%
    );
  }
}

/* ═══ Das Studio pe TELEFON SI TABLETA (<=820px) — forma pozei nu mai depinde de text ═══
   Masurat pe 10 latimi inainte de fix: inaltimea casetei venea INTOTDEAUNA din coloana
   de text (228–266px, aproape constanta), in timp ce latimea crestea 128→246px. Deci
   raportul casetei se plimba de la 0,482 (portret ingust) la 1,047 (PEISAJ), iar
   `object-fit: cover` decupa altfel la fiecare pixel de latime:
     320px raport 0,482 → 72% vizibil   ·   412px 0,671 → 99%
     540px 0,965 → 69%                  ·   600px 1,047 → 64%
   Asta e „zoom-ul" pe care userul il vedea cand tragea de fereastra.

   Fix: caseta primeste PROPRIA forma, 3/4 — exact proportia a trei din cele patru poze
   (studio-cutting/clipper/beard sunt 1200x1600). Raportul devine constant la orice
   latime, deci decupajul nu se mai schimba la redimensionare.
   `align-self` e OBLIGATORIU: `align-items: stretch` (pus pe `.zz-studio` in blocul de
   telefon) suprascrie `aspect-ratio` pe elementele de grid — comportament din spec,
   nu bug de browser.

   ⭐ 29.08: `end` in loc de `center`, cerut de user („poza de la Das Studio sa fie
   lipita de banda cu Termin, exact cum era inainte"). Sub ~480px textul e mai inalt
   decat poza; cu `center` diferenta se imparte egal si ramanea un gol INTRE poza si
   banda (43px la 320, 22 la 360, 14 la 390, 9 la 412). Cu `end` tot golul urca
   deasupra pozei, iar marginea de jos atinge banda la ORICE latime.
   ⚠️ NU se revine la `stretch` fara `aspect-ratio`: aia era starea de dinainte de
   28.08, unde caseta isi schimba forma cu latimea si decupajul „facea zoom"
   (72% vizibil la 320, 64% la 600). Masurat 29.08, dupa schimbare: raport 0,750
   constant si acelasi procent vizibil ca inainte, la toate cele 14 latimi. */
@media (max-width: 820px) {
  .zz-studio__media {
    align-self: end;
    aspect-ratio: 3 / 4;
  }
}

/* ═══ Caseta mai INALTA pe telefon, ca sa umple randul (29.08, cerut cu sageti) ══
   Userul vrea poza la latimea ei de acum, dar sa atinga si sus, si jos.
   Latimea coloanei e data de grila (0,84fr) si nu se schimba; singura parghie ramasa
   e FORMA casetei. La 3/4 caseta e mai scunda decat randul de text, deci raman goluri.
   La **0,65** inaltimea creste exact cat trebuie: masurat, gol 0,0 de la 384px in sus
   (fix latimea lui S23 Ultra), 3,5px la 375, 13,2 la 360.

   ⚠️ COSTUL, spus pe fata: caseta fiind mai ingusta fata de inaltime, `cover` taie mai
   mult lateral. Cele trei poze de 3/4 se vad **87% pe latime** in loc de 100%; in schimb
   `studio-chair` (0,666 nativ) urca de la 89% la **98%**, fiindca 0,65 e aproape forma lui.
   Raportul ramane CONSTANT, deci decupajul tot nu se schimba la redimensionare —
   fixul din 28.08 e intact. */
@media (min-width: 360px) and (max-width: 479px) {
  .zz-studio__media { aspect-ratio: 0.65; }
}

/* ═══ Das Studio: poza atinge SI marginea de sus (29.08, cerut de user) ═══════
   Cu `align-self: end` poza atingea doar banda de jos; deasupra ramanea un gol
   (31,5px pe S23 Ultra, 27 pe iPhone 15). Golul apare fiindca sub ~480px coloana
   de text e mai INALTA decat poza.

   Trei cai incercate si MASURATE:
   1. raport mai inalt (2/3 sau 0,65) — lipeste, dar taie din poza: cele trei poze
      de 3/4 scad de la 100% vizibil la 89%, respectiv 87%. **Respinsa**: userul
      se plansese exact de poze taiate.
   2. coloana `auto` + `align-self: stretch` — layout circular, poza IESE peste
      banda cu 20-60px si caseta sare haotic cu latimea. **Respinsa.**
   3. ⭐ coloana foto mai LATA. Raportul ramane 3/4, deci poza creste si in
      inaltime si umple randul, FARA sa taie nimic in plus.

   Aleasa a treia: coloana foto mai lata in loc de 0,84fr. Raport 0,750 constant,
   aceleasi procente vizibile (scaun 89%, celelalte trei 100%).

   ⚠️ 29.08, a doua reglare — user: „poza de la das studio e prea lata".
   1,1fr dadea 211px latime pe S23 Ultra si gol 0, dar arata prea masiva.
   Coborata la **1fr 1fr** = 192px: cu 9% mai ingusta, iar golul de sus ramane
   **10px la 384, 5px la 393, 0 de la 412 in sus** — practic invizibil.
   Cu cat coloana e mai ingusta, cu atat golul de sus creste: asta e compromisul,
   nu exista latime care sa dea si poza mica, si lipit peste tot.

   ⚠️ Pragul de 360px e intentionat: sub el coloana de text ar deveni atat de
   ingusta incat textul se inalta si golul ar creste la 120px (fata de 86,6 azi).
   Sub 360 ramane exact layoutul de pana acum.
   ⚠️ Plafonul de 479px e la fel de intentionat: de la 480 in sus golul era DEJA 0
   cu proportiile vechi, deci regula n-ar aduce nimic acolo — ar schimba doar cat de
   lata e poza, degeaba. Intervalul atins e EXACT cel care avea gol: 360-479. */
/* ⚠️ Latirea coloanei (1,1fr, apoi 1fr) a fost INCERCATA si scoasa: userul a spus
   „poza e prea lata" si apoi, cu sageti pe captura, „vreau sa ramana asa cum e, doar
   sa acopere spatiul de sus si de jos". Deci latimea NU se atinge; se schimba doar
   INALTIMEA casetei, mai jos. */

/* ═══ Das Studio: pozele erau mai INALTE decat caseta si se taiau (28.08) ═══
   Simptom: user vedea ~80% din fotografie. Masurat cu getComputedStyle, nu din ochi:
     .zz-studio__media  345x460, overflow:hidden
     grid-template-rows 518,359px   ← randul, mai inalt decat caseta
     fiecare <img>      345x518,4   ← imaginea, mai inalta decat caseta
   518,4 = 345 / 0,6656 = proportia lui `studio-chair` (1200x1803). Cele patru poze
   stau in ACEEASI celula de grid (`grid-area: 1/1`), randul se auto-dimensioneaza
   dupa cea mai inalta, deci chair-ul intindea randul pentru toate. Consecinta dubla:
   caseta taia 58px de jos, iar `cover` mai taia si ~11% lateral, fiindca celelalte
   trei poze (0,75) primeau o caseta de 0,665. Total vizibil: 90% x 88% = 79%.

   Fix: randul primeste inaltimea casetei, nu a continutului. Caseta are inaltime
   definita (`clamp(460px, 36vw, 600px)`), deci `1fr` = exact atat.
   ⚠️ Lectie de masurare: proportia se compara cu dreptunghiul IMAGINII
   (`img.getBoundingClientRect()`), nu cu al containerului — containerul poate
   ascunde, prin overflow, o imagine mai mare decat el. */
@media (min-width: 821px) {
  /* `1fr` SINGUR nu ajunge: un rand `fr` are minim automat `min-content`, iar
     min-content-ul randului e chiar inaltimea intrinseca a celei mai inalte poze
     (518px) — deci randul refuza sa coboare la 460. `minmax(0, …)` scoate acel
     minim. Acelasi idiom e deja folosit la `.zz-prow`, din acelasi motiv.
     `min-height: 0` pe imagini scoate si minimul automat al elementului de grid. */
  .zz-studio__media { grid-template-rows: minmax(0, 1fr); }
  .zz-studio__media img { min-height: 0; min-width: 0; }
}

/* Butonul de comanda poarta acum formularea ceruta de § 312j Abs. 3 BGB
   („Zahlungspflichtig bestellen"), care e mult mai lunga decat „Zur Kasse".
   Masurat: de la 390px in sus incap toate trei limbile pe un rand; sub, se rupeau
   pe doua (romana are cel mai lung text, 257px fata de 243 la germana).
   Nu e defect — dar butonul urca de la 46 la 60px. Stramtam doar tipografia,
   textul ramane cel legal, neschimbat. */
@media (max-width: 389px) {
  .zz-cart__cta {
    font-size: 10px;
    letter-spacing: 0.1em;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Punctul dintre intrarile de meniu statea PE STANGA fiecarui link (`a + a::before`).
   Cat timp meniul incapea pe un rand, se vedea corect. De cand am adaugat a patra
   intrare („Vertrag widerrufen", ceruta de § 356a), pe telefon meniul se rupe pe doua
   randuri — iar punctul de dinaintea intrarii care coboara ramanea ATARNAT la inceputul
   randului doi. Mutat pe DREAPTA fiecarei intrari in afara de ultima: la rupere, punctul
   ramane la capatul randului de sus, unde se citeste natural ca o continuare. */
.zz-footer__nav a + a::before { content: none; }
.zz-footer__nav a:not(:last-child) { position: relative; }
.zz-footer__nav a:not(:last-child)::after {
  content: "";
  position: absolute;
  right: calc(-1 * clamp(16px, 3vw, 38px) / 2 - 2px);
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: #b98a4a;
}

/* ── Pagina de multumire (28.08) ─────────────────────────────────────────────
   Butonul are clasa PROPRIE, nu `.zz-btn-buy`, din doua motive:
   1. zz-pixel.js numara ORICE click pe `.zz-btn-buy` drept „adaugare in cos".
      Aici omul tocmai a platit, deci fiecare intoarcere la studio ar fi umflat
      palnia cu evenimente false — statistica ar fi minti.
   2. `.zz-legal a` pune border-bottom pe toate legaturile din paginile de text;
      de-aia tot blocul e scos sub `.zz-danke` (0,2,0), ca sa bata acel (0,1,1).
   Aspectul e cel al butonului principal de pe pagina produsului: plin, in
   cafeniul podelei din fotografia hero, cu firul de caramel deasupra. */
.zz-danke__actiune { margin-top: 38px; margin-bottom: 0; }
.zz-danke .zz-btn-inapoi {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 16px 34px;
  background: linear-gradient(180deg, #3a2413 0%, #24150a 100%);
  color: var(--cream);
  border: 0;
  border-bottom: 0;
  box-shadow: inset 0 1px 0 rgba(201, 146, 90, 0.45),
              0 6px 18px rgba(44, 25, 12, 0.26);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.2s ease;
}
/* sageata arata spre STANGA: textul zice „inapoi", deci si miscarea merge inapoi */
.zz-danke .zz-btn-inapoi__arrow { flex: none; transition: transform 0.25s ease; }
.zz-danke .zz-btn-inapoi:active { filter: brightness(1.35); transform: scale(0.985); }
.zz-danke .zz-btn-inapoi:active .zz-btn-inapoi__arrow { transform: translateX(-3px); }
@media (hover: hover) {
  .zz-danke .zz-btn-inapoi:hover { filter: brightness(1.22); }
  .zz-danke .zz-btn-inapoi:hover .zz-btn-inapoi__arrow { transform: translateX(-3px); }
}
/* pe telefon butonul ia toata latimea coloanei: tinta de atins e mai sigura */
@media (max-width: 520px) {
  .zz-danke .zz-btn-inapoi { width: 100%; justify-content: center; padding-left: 20px; padding-right: 20px; }
}

/* ══ Nota § 5b Abs. 3 UWG, sub scorul de recenzii (29.08.2026) ═══════════════
   Cand afisezi recenzii trebuie sa spui daca si cum verifici ca vin de la
   clienti reali. Randul e SUB pilula de scor, deci nu poate misca butonul de
   programare, titlul benzii sau bulina.
   ⚠️ Culoare PLINA, nu `opacity` si nu `rgba` pe text: banda are fotografie
   in fundal, iar textul transparent se topeste in ea (lectia din 25.08).
   Ca sa fie scos: e ultimul bloc din fisier, se sterge de aici pana la final. */
.zz-band-note {
  margin: 10px auto 0;
  max-width: 44ch;
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--on-dark-2);
  text-shadow: 0 1px 6px rgba(24, 16, 9, 0.45);
  /* fara asta, pe telefon ramanea un singur cuvant pe randul doi. `balance` alege
     puncte de rupere egale in interiorul aceleiasi latimi maxime, deci nu poate
     largi cutia. Browserele vechi il ignora si randul arata ca inainte. */
  text-wrap: balance;
}
@media (min-width: 1600px) {
  .zz-band-note { font-size: min(15.5px, 0.71875vw); max-width: 56ch; }
}

/* ═══ Subsol pe telefon — asezare dupa mockupul din 30.08 ════════════════════
   Ordinea ceruta, de sus in jos:
     ZAza + subtitlu
     Shop   Das Studio   Kontakt      (pe UN rand, fara puncte)
     pictogramele social
     ──────── linie aurie ────────
     Vertrag widerrufen
     ──────── linie aurie ────────
     randul juridic

   ⚠️ „Vertrag widerrufen" trebuie sa apara SUB pictograme, desi in marcaj sta
   in acelasi `<nav>` cu celelalte trei. Nu se poate muta un copil in afara
   parintelui lui din CSS — de aceea `.zz-footer__nav` primeste
   `display: contents`: navul dispare ca AsEZARE, iar cele patru linkuri devin
   direct elemente ale subsolului, deci pot fi ordonate individual cu `order`.
   Asa NU se atinge `index.html`. Costul: pe telefon dispare reperul de
   navigare „Footer" din structura paginii (linkurile raman toate accesibile).
   Pe desktop navul ramane neatins, cu tot cu reper.

   Pe desktop, de la 530px in sus, NIMIC din blocul asta nu se aplica. */
@media all {
  /* Coloanele: `1fr auto 1fr`, nu `repeat(3, auto)`.
     Cu trei coloane `auto`, spatiul liber se imparte intre ele si fiecare intrare
     se centreaza in coloana EI. Cum „Kontakt" e cu 28px mai lat decat „Shop",
     intrarea din mijloc ajungea cu 14px in stanga axei paginii — adica nu mai
     statea sub „ZAza" si sub pictograme, desi golurile erau egale (masurat la
     489px: mijlocul lui „Das Studio" 231, mijlocul ecranului 245).
     Cu `1fr auto 1fr` coloana din mijloc e exact pe ax, iar cele doua laterale
     sunt egale. Intrarile de pe margini se lipesc de gol (`justify-self` end si
     start), deci golul dintre ele si mijloc e chiar `column-gap`, acelasi in
     stanga si in dreapta. Asa iese si mijlocul pe ax, SI golurile egale.

     ⚠️ NU se pot avea toate trei deodata — mijloc pe ax, goluri egale, margini
     egale — cat timp „Kontakt" e cu 28px mai lat decat „Shop". S-au incercat pe
     rand, cu userul, in 01.09: rand stramt (gol 7vw, prea ingust) si rand lipit
     de liniile aurii (`justify-self: start/end`, margini egale dar goluri
     inegale, „nu imi place, adu shop si kontakt mai aproape"). A ramas asta:
     goluri egale, mijloc pe ax, latime pe la mijlocul drumului.

     Golul creste LINIAR cu ecranul, pornind de la 320px, nu ca procent din
     latime: `22px + (latime - 320px) x 0,32`. Motivul e ca la 320 textul singur
     masoara ~206px intr-o caseta de 284, deci un gol procentual (12vw = 38px)
     umple tot spatiul, coloanele `1fr` se strang la zero si mijlocul iese din
     ax. Cu rampa de aici randul masoara 246px la 320 si 358px la 489.
     ⚠️ Pornirea e 22px, nu 26: la 26 randul atingea exact marginea casetei in
     germana si in engleza, iar mijlocul aluneca 1-2px din ax. Cele 4px de joc
     costa nimic la ecranele mari (golul acolo e dat de rampa, nu de pornire). */
  .zz-footer__main {
    grid-template-columns: 1fr auto 1fr;
    justify-items: center;
    column-gap: 0;
    row-gap: 22px;
  }
  .zz-footer__nav { display: contents; }

  .zz-footer__mark   { grid-column: 1 / -1; order: 1; }
  .zz-footer__nav a:nth-child(1) { order: 2; grid-column: 1; }
  /* Spatiul dintre cuvinte sta pe elementul din MIJLOC, nu pe grila.
     ⚠️ Nu pune `column-gap` pe grila daca ai coloane de umplutura: cu cinci
     coloane ies PATRU goluri, doua se vad si doua se ascund in margini, iar
     randul creste peste latimea ecranului (masurat, cand am incercat: depasire
     de 39px la 529 si meniul rupt pe doua randuri). Cu marginile pe elementul
     din mijloc raman exact DOUA goluri.

     Coloanele sunt `1fr auto 1fr`, iar cele trei intrari sunt CENTRATE fiecare
     in coloana ei (cerut de user, 01.09: „studioul la mijlocul butoanelor de
     jos si in acelasi timp shop si contact aliniate"). Rezultatul, masurat:
     „Das Studio" cade exact pe axa paginii, adica pe aceeasi verticala cu
     pictogramele si cu romburile, iar SHOP si KONTAKT au CENTRELE la aceeasi
     distanta de el (105/105 la 320, 174/173 la 489).
     ⚠️ Ce ramane inegal, si nu are cum altfel: marginile pana la marginea
     ecranului difera cu ~14px, fiindca „Kontakt" e mai lat decat „Shop".
     Varianta care pastreaza golurile egale in schimb (`justify-self: end/start`
     pe intrarile de pe margini, exact ca in mockup) a fost incercata si pusa
     alaturi: acolo diferenta de margini era 28px. */
  .zz-footer__nav a:nth-child(2) {
    order: 3;
    grid-column: 2;
    margin-inline: clamp(22px, calc(22px + (100vw - 320px) * 0.32), 96px);
  }
  .zz-footer__nav a:nth-child(3) { order: 4; grid-column: 3; }
  .zz-footer__social { grid-column: 1 / -1; order: 5; }

  /* niciun punct auriu intre intrari: mockupul nu are */
  .zz-footer__nav a:not(:last-child)::after,
  .zz-footer__nav a:not(:last-child)::before,
  .zz-footer__nav a + a::before { content: none; }

  /* „Vertrag widerrufen": singur, pe toata latimea, intre doua linii aurii */
  .zz-footer__nav a:nth-child(4) {
    grid-column: 1 / -1;
    order: 6;
    justify-self: stretch;
    text-align: center;
    font-size: 9px;
    letter-spacing: .18em;
    padding: 14px 0;
    border-top: 1px solid rgba(169, 120, 62, 0.55);
    border-bottom: 1px solid rgba(169, 120, 62, 0.55);
  }
  /* randul juridic vine imediat sub linia de jos, deci nu-i mai trebuie a lui */
  .zz-footer__legal { border-top: 0; }
}

/* ═══ Subsol „bijuterie" — dupa mockupul trimis de user (01.09) ══════════════
   Sase schimbari fata de ce era: bare verticale intre intrarile de meniu ·
   linie aurie cu romb intre meniu si pictograme · pictograme cu chenar auriu
   in loc de sticla · „Vertrag widerrufen" ca CASETA cu chenar, nu text intre
   doua linii · inca o linie cu romb deasupra randului juridic · separatoarele
   juridice aurii.
   ⚠️ Linia scurta de sub „ZAza" din mockup NU se pune — userul a cerut explicit
   sa lipseasca.
   Blocul asta vine DUPA cel de sus dinadins: cateva reguli au aceeasi
   specificitate cu ale lui (`a:not(:last-child)::after` vs `a:nth-child(2)::after`,
   amandoua 0-2-2) si atunci decide ordinea din fisier. Daca se muta mai sus,
   barele dispar. Se scoate stergand tot blocul. */
@media all {
  .zz-footer__main { --zz-gol: clamp(22px, calc(22px + (100vw - 320px) * 0.32), 96px); }

  /* 1. bare verticale intre intrarile de meniu, fix la mijlocul golului */
  .zz-footer__nav a:nth-child(2) { position: relative; }
  .zz-footer__nav a:nth-child(2)::before,
  .zz-footer__nav a:nth-child(2)::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 1px;
    height: 19px;
    margin-top: -9.5px;
    background: rgba(169, 120, 62, 0.62);
  }
  .zz-footer__nav a:nth-child(2)::before { left: calc(var(--zz-gol) / -2); }
  .zz-footer__nav a:nth-child(2)::after  { right: calc(var(--zz-gol) / -2); }

  /* 2. pictogramele: doar ASEZAREA se schimba aici.
     ⚠️ Mockupul le arata cu chenar auriu si fara luciu; s-a incercat, iar userul
     a cerut inapoi cum erau („butoanele vreau sa arate cum aratau inainte").
     Deci NU se atinge nici fundalul de sticla, nici chenarul crem, nici umbrele
     — raman din regula de baza. Aici se pune doar ce tine de stiva: latimea pe
     tot randul (ca sa aiba pe ce se sprijini linia aurie), centrarea si aerul. */
  .zz-footer__social {
    gap: 30px;
    justify-self: stretch;
    justify-content: center;
    position: relative;
    margin-top: 10px;
    padding-top: 34px;
  }

  /* 3. cele doua linii aurii cu romb la mijloc.
     Linia e un DEGRADE cu gol in mijloc, nu doua elemente: asa rombul sta intr-o
     pauza curata, fara sa se vada linia prin el. Se stinge si spre capete, ca in
     mockup. Rombul e un patrat rotit, doar cu chenar. */
  .zz-footer__social::before,
  .zz-footer__legal::before {
    content: "";
    position: absolute;
    top: 0;
    height: 1px;
    background: linear-gradient(to right,
      rgba(169, 120, 62, 0) 0%,
      rgba(169, 120, 62, 0.55) 7%,
      rgba(169, 120, 62, 0.55) calc(50% - 14px),
      rgba(169, 120, 62, 0) calc(50% - 14px),
      rgba(169, 120, 62, 0) calc(50% + 14px),
      rgba(169, 120, 62, 0.55) calc(50% + 14px),
      rgba(169, 120, 62, 0.55) 93%,
      rgba(169, 120, 62, 0) 100%);
  }
  .zz-footer__social::after,
  .zz-footer__legal::after {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    margin-left: -4px;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    border: 1px solid rgba(169, 120, 62, 0.8);
  }
  /* pictogramele sunt deja in caseta de continut a grilei, deci linia lor merge
     din margine in margine; randul juridic isi are propriul `padding`, asa ca
     linia lui se trage inauntru cu `--pad`, altfel ar fi mai lata decat cealalta */
  .zz-footer__social::before { left: 0; right: 0; }
  .zz-footer__legal::before  { left: var(--pad); right: var(--pad); }

  /* 4. „Vertrag widerrufen" = caseta cu chenar, stransa pe text */
  .zz-footer__nav a:nth-child(4) {
    justify-self: center;
    border: 1px solid rgba(169, 120, 62, 0.6);
    padding: 13px 30px;
    margin-top: 6px;
    font-size: 9.5px;
    letter-spacing: 0.2em;
  }

  /* 5. randul juridic: linia lui proprie si bare aurii intre linkuri */
  /* distantele pe verticala, egalizate: masurate 35 / 30 / 46 px intre linie,
     pictograme, caseta si linia de jos. Ultima era vizibil mai mare. */
  .zz-footer__legal {
    position: relative;
    margin-top: 12px;
    padding-top: 24px;
  }
  .zz-footer__legal nav a + a::before { background: rgba(169, 120, 62, 0.6); }
}

/* ═══ Subsol: meniul se rupea si pe DESKTOP, intre 821 si 940px ══════════════
   Gasit cand am masurat piramida in toate cele trei limbi. **NU e introdus de
   piramida — e pe live de dinainte.** De la 821px subsolul trece pe trei coloane
   (logo | meniu | social), iar coloana meniului ramane ingusta: 421px la o
   fereastra de 830px. Cele patru intrari nu incap, se rup pe doua randuri, si
   reapare punctul auriu ATARNAT la capatul primului rand.
   Masurat, latimile la care se rupea: DE 840-860 · RO 840-900 · EN 840-920.

   Strangerea golului NU ajunge: in engleza, la 830px, textul singur are 425px
   intr-o coloana de 421 — deci nici cu gol zero n-ar incapea.
   Solutia: rupem NOI randul, mereu in acelasi loc (ultima intrare coboara), si
   stingem punctul de dupa a treia intrare, care altfel ar ramane atarnat.
   Asa iese acelasi 3 + 1 in toate limbile, fara punct orfan.
   SE SCOATE stergand acest bloc. */
/* Blocul 821-940 de mai sus a fost SCOS pe 01.09: repara ruperea meniului cand
   subsolul era un rand flex de patru intrari. De cand subsolul e stiva din
   mockup la ORICE latime (`display: contents` + grila), meniul are trei intrari
   pe un rand si nu se mai poate rupe, iar regulile lui de flex nu mai insemnau
   nimic. */

/* ═══ Subsolul-stiva pe ecrane mari ══════════════════════════════════════════
   Asezarea vine din cele doua blocuri `@media all` de mai sus, care erau facute
   pentru telefon. Aici se scaleaza doar MARIMILE, ca sa nu ramana totul cat pe
   un ecran de 390px: pe un monitor de 1440 „ZAza" la 26px si meniul la 11px
   pareau pierdute in mijloc.
   Toate valorile sunt fluide (`clamp`), deci nu apare nicio treapta la 530.
   ⚠️ Trebuie sa stea la FINALUL fisierului: bate regula de la >=1600 care fixa
   `.zz-footer__nav` pe `min(14.85px, 0.6875vw)`. */
@media (min-width: 530px) {
  /* fara asta, „ZAza" ramane lipit de stanga peste subtitlu: caseta logo-ului e
     lata cat subtitlul, iar textul se aliniaza implicit la stanga */
  .zz-footer__main { text-align: center; row-gap: clamp(22px, 2.2vw, 38px); }
  .zz-footer__mark .zz-mark__name { font-size: clamp(28px, 2.6vw, 46px); }
  .zz-footer__mark .zz-mark__sub  { font-size: clamp(9.5px, 0.86vw, 14px); }
  .zz-footer__nav { font-size: clamp(11px, 1vw, 15px); }

  .zz-footer__nav a:nth-child(2)::before,
  .zz-footer__nav a:nth-child(2)::after {
    height: clamp(19px, 1.7vw, 28px);
    margin-top: calc(clamp(19px, 1.7vw, 28px) / -2);
  }

  /* pictogramele cresc cu ecranul, dar pornesc de la marimea VECHE (38px buton,
     18px semn, gol 30px), ca la 530 sa nu se vada nicio treapta fata de telefon */
  .zz-footer__social { gap: clamp(30px, 2.4vw, 42px); padding-top: clamp(34px, 3.2vw, 56px); }
  .zz-footer__social a { width: clamp(38px, 3.3vw, 56px); height: clamp(38px, 3.3vw, 56px); }
  .zz-footer__social svg { width: clamp(18px, 1.5vw, 26px); height: clamp(18px, 1.5vw, 26px); }

  .zz-footer__nav a:nth-child(4) {
    font-size: clamp(9.5px, 0.82vw, 13px);
    padding: clamp(13px, 1.15vw, 19px) clamp(30px, 2.6vw, 46px);
  }

  .zz-footer__social::after,
  .zz-footer__legal::after {
    width: clamp(8px, 0.72vw, 12px);
    height: clamp(8px, 0.72vw, 12px);
    top: calc(clamp(8px, 0.72vw, 12px) / -2);
    margin-left: calc(clamp(8px, 0.72vw, 12px) / -2);
  }

  .zz-footer__legal { padding-top: clamp(24px, 2.4vw, 40px); font-size: clamp(11.5px, 0.9vw, 14px); }
  .zz-footer__legal nav { gap: clamp(14px, 1.3vw, 22px); }
  .zz-footer__legal nav a + a::before { left: calc(-1 * clamp(14px, 1.3vw, 22px) / 2); }
}

/* ---------- 15.09: in peisaj / pe calculator bara urmeaza usor latimea ----------
   Poza lata se scaleaza cu latimea ferestrei (sigla = 100/1536 x 100vw = 6,51vw), bara
   nu poate fi si fixa, si egala. Compromis: bara = max(40px, 2,935vw) -> 40px pana la
   1365, 42px la 1440, 56px la 1920, 75px la 2560 (inainte: 40 / 48 / 54). Diferenta
   sigla-bara: 0 de la 1365 in sus, -7% la 1280. NU se mai pune 8,1vw (respins: bara uriasa). */
@media (orientation: landscape), (min-width: 1025px) {
  .zz-header .zz-mark__name { font-size: max(40px, 2.935vw); }
}

/* ---------- 15.09, varianta 1: VOAL MAI DENS sub titlu si buton, in picioare ----------
   Userul: „textul de pe poza e alb si nu se intelege". CAUZA REALA: `.zz-hero__img` are
   z-index: 1, iar ::after n-avea z-index -> voalul era pictat SUB poza, deci nu conta
   deloc (de cand imaginea e absoluta, 13.09). Aici primeste z-index: 1 (vine dupa poza
   in ordine, deci deasupra ei; textul are 2).
   Forma: o pata dinspre coltul stanga-jos (unde stau titlul si butonul: x 0-62%,
   y 70-97% din hero pe telefon), care se stinge inainte de produse (x 58-100%, jos
   dreapta), plus o banda subtire la baza. Voalul e cat tot hero-ul, ca procentele
   elipsei sa fie fata de poza intreaga. Sta la FINALUL fisierului fiindca blocurile
   de telefon (max-width: 600px) pun height: 40% si ar bate ce e scris inaintea lor.
   Desktopul/peisajul raman cum erau (voalul vechi, tot sub poza = invizibil). */
@media (orientation: portrait) and (max-width: 1024px) {
  .zz-hero::after {
    z-index: 1;
    inset: 0;
    height: 100%;
    background:
      radial-gradient(62% 46% at 16% 92%, rgba(24, 16, 9, 0.84) 0%, rgba(24, 16, 9, 0.62) 42%, rgba(24, 16, 9, 0) 100%),
      linear-gradient(0deg, rgba(24, 16, 9, 0.42) 0%, rgba(24, 16, 9, 0) 20%);
  }
  /* umbra literelor mai hotarata: un halo apropiat + unul larg */
  .zz-hero__copy h1 { text-shadow: 0 1px 3px rgba(24, 16, 9, 0.55), 0 4px 28px rgba(24, 16, 9, 0.75); }
}

/* ===================================================================
   15.09, seara — cerut de user, DOUA lucruri, nimic altceva:
   „steagurile mai mari" si „cosul din dreapta sus sa se alinieze cum trebe".

   Alinierea: masurat pe 1920, steagurile incep la x=276, adica exact la marginea
   continutului. Cosul insa e un desen de 25px asezat la mijlocul unui buton de 50px,
   iar butonul e cel aliniat la marginea din dreapta (1644). Rezultat: desenul cosului
   se termina la 1631, deci cu 13px mai inauntru decat steagurile. De aici senzatia
   de nealiniat, desi pe verticala totul e centrat corect la 42.
   Solutia: pastram butonul (are nevoie de suprafata de click si de fundalul la hover),
   dar il tragem in afara exact cu jumatatea diferentei, ca DESENUL sa cada pe margine.
   Acelasi lucru in stanga, pentru steaguri.
   Blocul sta la finalul fisierului fiindca peste 1600px exista reguli care altfel
   ar castiga.
   =================================================================== */
@media (min-width: 1025px) {
  /* steaguri mai mari: butonul 25 -> 36px, desenul 25x17 -> 30x20 */
  .zz-header__left .zz-flag { width: 36px; height: 36px; }
  .zz-header__left .zz-flag svg { width: 30px; height: 20px; }
  .zz-header__left .zz-flags { gap: 8px; }
  /* desenul steagului e cu 3px mai ingust decat butonul de fiecare parte */
  .zz-header__left { margin-left: -3px; }

  /* cosul: buton 44px, desen 24px -> diferenta pe o parte = 10px */
  .zz-header__icons a { width: 44px; height: 44px; }
  .zz-header__icons svg { width: 24px; height: 24px; }
  .zz-header__icons { margin-right: -10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BANDA DE CONSIMTAMANT (zz-cookie.js) — 23.09.2026, refacuta dupa FENRIR
   Stă la FINALUL fisierului intentionat: blocurile `max-width` de mai sus bat
   ce e scris inaintea lor, deci orice regula noua pusa la mijloc ar fi anulata
   pe telefon fara niciun mesaj de eroare.

   Forma e cea de pe fenrircables.com: bara pe toata latimea, jos, sticla mata,
   urca de jos, iar setarile se DESFASOARA in ea. Culorile sunt ale lui ZAza.

   ⚠️ Regula butoanelor: „Akzeptieren" e plin, „Ablehnen" e conturat — tiparul
   obisnuit in Germania. Ce NU se schimba: au aceeasi inaltime, aceeasi latime
   minima, stau unul langa altul si refuzul ramane ALB pe fundal inchis, adica
   perfect lizibil. Un refuz palit sau micsorat transforma tiparul asta intr-un
   tipar intunecat si atunci chiar se dau amenzi.
   ═══════════════════════════════════════════════════════════════════════════ */
.zz-ck {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 200;                      /* antetul e 100, cosul 70 */
  background: rgba(24, 19, 15, 0.90);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  border-top: 1px solid rgba(169, 120, 62, 0.42);
  color: var(--on-dark);
  box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.42);
  transform: translateY(110%);
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}
.zz-ck--activ { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .zz-ck { transition: none; }
}

.zz-ck__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px var(--pad) 20px;
  /* ⚠️ PLAFON DE INALTIME, cu derulare inauntru.
     Fara el, pe telefon CULCAT (ecran ~390px inaltime) setarile desfasurate
     ajung la 113-151% din ecran: partea de sus a benzii, cu „Ablehnen" si
     „Akzeptieren", iese peste marginea de sus si NU se mai poate apasa — banda
     e `position: fixed`, deci pagina nu se deruleaza pana la ea, iar omul
     ramane blocat. Masurat pe 12 dispozitive in ambele pozitii
     (`proba_banda_pe_dispozitive.mjs`), nu banuit.
     `svh` = inaltimea ecranului cu barele browserului AFISATE, adica cea mai
     mica; `vh` ramane ca rezerva pentru browserele vechi. */
  max-height: 86vh;
  max-height: 86svh;
  display: flex;
  flex-direction: column;
}

/* ── randul de sus: text in stanga, butoane in dreapta ── */
.zz-ck__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  flex: none;              /* titlul si butoanele raman mereu la vedere */
}
.zz-ck__text { flex: 1 1 320px; min-width: 0; }

/* Titlul in stanga, „Setari" in dreapta, pe acelasi rand (macheta bro, 23.09). */
.zz-ck__titlu-rand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}
.zz-ck__t {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--on-dark);
}
.zz-ck__p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--on-dark-2);
}
.zz-ck__dsgv {
  display: inline-block;
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.zz-ck__dsgv:hover { color: var(--on-dark); }

/* ── butoanele ── */
.zz-ck__actiuni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
}
.zz-ck__b {
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  min-width: 132px;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.zz-ck__b:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.zz-ck__b--accept {
  background: var(--gold);
  border-color: var(--gold);
  color: #18130f;
}
.zz-ck__b--accept:hover { background: #bd8a48; border-color: #bd8a48; }

/* Conturat, dar ALB pe inchis: contrastul textului ramane peste 12:1, iar
   conturul e vizibil. Asta e granita dintre „stil" si „tipar intunecat". */
.zz-ck__b--refuz {
  background: rgba(243, 232, 216, 0.06);
  border-color: rgba(243, 232, 216, 0.42);
  color: var(--on-dark);
}
.zz-ck__b--refuz:hover {
  background: rgba(243, 232, 216, 0.14);
  border-color: rgba(243, 232, 216, 0.75);
}

.zz-ck__link {
  font: inherit;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 44px;              /* tinta de atingere, desi e doar text */
  padding: 10px 2px;
  background: none;
  border: 0;
  color: var(--gold);
  cursor: pointer;
  white-space: nowrap;
}
.zz-ck__link span {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.zz-ck__link:hover { color: var(--on-dark); }
.zz-ck__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ── setarile: se desfasoara IN banda, nu pe alt ecran ── */
.zz-ck__setari {
  display: grid;
  grid-template-rows: 0fr;
  min-height: 0;
  opacity: 0;
  transition: grid-template-rows 0.34s ease, opacity 0.24s ease, margin-top 0.34s ease;
  margin-top: 0;
}
/* ⚠️ Invelisul e OBLIGATORIU si trebuie sa fie SINGURUL copil: `0fr` se aplica
   doar primului rand al grilei. Cu mai multi copii, restul primesc randuri
   implicite `auto` si setarile raman la vedere cand banda e „stransa". */
.zz-ck__setari-in {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ⚠️ DOAR randurile se deruleaza. Butonul „Auswahl speichern" sta in afara lor,
   deci ramane la vedere si pe telefon culcat, unde altfel ar fi trebuit cautat
   prin derulare inauntrul benzii. Masurat pe 12 dispozitive, in ambele pozitii. */
.zz-ck__randuri {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;   /* derularea nu scapa in pagina din spate */
}
.zz-ck--desfasurat .zz-ck__setari {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 16px;
  flex: 1 1 auto;          /* primeste ce a ramas din plafonul de inaltime */
}
@media (prefers-reduced-motion: reduce) {
  .zz-ck__setari { transition: none; }
}

.zz-ck__rand {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 16px;
  padding: 13px 0;
  border-top: 1px solid rgba(243, 232, 216, 0.14);
}
.zz-ck__randT {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--on-dark);
}
.zz-ck__rand label.zz-ck__randT { cursor: pointer; }
.zz-ck__randD {
  grid-column: 1;
  font-size: 13px;
  line-height: 1.55;
  color: var(--on-dark-2);
}
.zz-ck__blocat {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

/* Comutatorul: bifa reala ramane in pagina (o vad cititoarele de ecran si
   tastatura), doar infatisarea e a noastra. VERDE cand e pornit, nu auriu —
   auriul e culoarea butoanelor peste tot pe site, deci n-ar spune nimic despre
   stare. Verdele e inchis (#2f7d4f) ca sa ramana in tonul cald al paletei. */
.zz-ck__bifa {
  grid-row: 1 / span 2;
  grid-column: 2;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  flex: none;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: rgba(243, 232, 216, 0.18);
  border: 1px solid rgba(243, 232, 216, 0.28);
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.zz-ck__bifa::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--on-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.zz-ck__bifa:checked { background: #2f7d4f; border-color: #2f7d4f; }
.zz-ck__bifa:checked::after { transform: translateX(20px); }
.zz-ck__bifa:hover { border-color: rgba(243, 232, 216, 0.55); }
.zz-ck__bifa:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .zz-ck__bifa, .zz-ck__bifa::after { transition: none; }
}

.zz-ck__salveaza-rand {
  display: flex;
  justify-content: flex-end;
  padding-top: 14px;
  border-top: 1px solid rgba(243, 232, 216, 0.14);
  flex: none;              /* nu se deruleaza: ramane mereu la vedere */
}

/* Pe ecran ingust: textul sus, butoanele pe cate un rand intreg. Nu micsoram
   nimic — o tinta sub 44px e si problema de accesibilitate, si motiv de apasat
   din greseala pe „Akzeptieren". */
/* ⚠️ TELEFONUL, si de ce arata asa.
   Cu butoanele stivuite, banda ocupa 51% din ecran pe un iPhone SE si 43% pe un
   Galaxy S20 — masurat, nu banuit (`proba_cat_ocupa_banda.mjs`). Google scuteste
   benzile de consimtamant de penalizarea pentru ferestre intruzive, dar numai cat
   timp folosesc „o cantitate rezonabila de spatiu". Jumatate de ecran nu e.
   Deci: cele doua butoane care conteaza stau UNUL LANGA ALTUL pe un rand, iar
   „Einstellungen" coboara dedesubt ca link. Tintele raman peste 44px. */
@media (max-width: 720px) {
  .zz-ck__inner { padding: 12px var(--pad) 13px; }
  .zz-ck__main { gap: 11px; }
  .zz-ck__t { font-size: 19px; margin-bottom: 3px; }
  .zz-ck__p { font-size: 13.5px; line-height: 1.5; }

  .zz-ck__actiuni {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;   /* doar Refuz si Accept; „Setari" e sus */
    gap: 10px;
  }
  .zz-ck__b { width: 100%; min-width: 0; padding: 11px 10px; min-height: 48px; }

  .zz-ck__rand { padding: 11px 0; }
  .zz-ck__salveaza-rand { justify-content: stretch; padding-top: 12px; }
  .zz-ck__salveaza-rand .zz-ck__b { width: 100%; }
}

/* linkul de retragere din subsol: arata ca celelalte documente legale */
.zz-ck-link { cursor: pointer; }


/* ═══════════════════════════════════════════════════════════════════════════
   SUBSOLUL, refacut 24.09.2026 dupa macheta lui bro
   ───────────────────────────────────────────────────────────────────────────
   Ce a ramas neatins, fiindca asa a cerut: fundalul (`.zz-footer`, fotografia
   intunecata) si sigla ZAza cu raza ei de lumina (`.zz-footer__mark`).
   Tot ce e de la „Noutati din studio" in jos e nou.

   ⚠️ Clasele se cheama `zz-fx__*`, NU `zz-footer__*`, si asta e intentionat.
   Subsolul vechi avea ~90 de reguli in 12 blocuri de media query, plus unul mare
   care construia o grila de trei coloane cu `nth-child` si `display: contents`.
   Cu numele vechi, fiecare regula noua s-ar fi batut cu cinci vechi. Cu nume noi
   pornim curat. Regulile vechi au ramas in fisier dar nu mai prind niciun
   element — de curatat cand se linisteste designul, NU acum: sterse pe graba,
   ar lua cu ele si ce tine de sigla.

   Blocul sta la FINALUL fisierului: media query-urile de mai sus bat ce e scris
   inaintea lor, deci orice regula pusa la mijloc ar fi anulata pe telefon fara
   niciun mesaj de eroare. (Aceeasi lectie ca la banda de cookie.)
   ═══════════════════════════════════════════════════════════════════════════ */
.zz-fx {
  max-width: 560px;             /* macheta e un telefon; pe lat nu se intinde */
  margin: 0 auto;
  padding: clamp(34px, 5vw, 58px) var(--pad) clamp(26px, 3vw, 36px);
  text-align: center;           /* doar sigla; restul se aliniaza la stanga */
}

/* linia aurie de sub sigla */
.zz-fx__linie {
  width: min(330px, 72%);
  height: 1px;
  margin: clamp(16px, 2.6vw, 26px) auto clamp(26px, 4vw, 38px);
  background: linear-gradient(to right,
    rgba(169, 120, 62, 0) 0%,
    rgba(169, 120, 62, 0.75) 18%,
    rgba(169, 120, 62, 0.75) 82%,
    rgba(169, 120, 62, 0) 100%);
}

/* ─────────────────────────── newsletterul ─────────────────────────── */
.zz-nl { text-align: left; }

.zz-nl__ochi {
  margin: 0 0 6px;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #cb9d58;               /* auriul paletei da 3,44:1 pe fundalul asta,
                                   sub prag pentru text mic; tonul asta da 5,37:1 */
}
.zz-nl__t {
  margin: 0 0 22px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(30px, 8.2vw, 44px);
  line-height: 1.06;
  letter-spacing: 0.005em;
  color: var(--on-dark);
}
.zz-nl__eticheta {
  display: block;
  margin-bottom: 8px;
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-dark-2);
}
.zz-nl__camp {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 14px 16px;
  min-height: 52px;
  color: var(--on-dark);
  background: rgba(243, 232, 216, 0.05);
  border: 1px solid rgba(169, 120, 62, 0.45);
  border-radius: 7px;
}
.zz-nl__camp::placeholder { color: rgba(207, 195, 179, 0.55); }
/* Casuta cu prenumele, care se desfasoara sub adresa de e-mail.
   max-height, nu height:auto: inaltimea automata nu se poate anima. 180px e cu
   mult peste cat ocupa o eticheta plus un camp de 52px, deci nu taie nimic nici
   daca textul se rupe pe doua randuri in germana. */
.zz-nl__extra {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height .34s ease, opacity .26s ease, margin-top .34s ease;
}
.zz-nl__extra.deschis {
  max-height: 180px;
  opacity: 1;
  margin-top: 14px;
}
/* Strangerea lunga, de dupa o abonare reusita. Curba e ease-out: porneste
   hotarat si se aseaza incet la final, asa cum se misca lucrurile grele.
   Plus o ridicare de 12px, ca sa se vada ca URCA, nu doar ca se micsoreaza. */
.zz-nl__extra.lin {
  transition: max-height .78s cubic-bezier(.22, .61, .36, 1),
              opacity .5s cubic-bezier(.22, .61, .36, 1),
              margin-top .78s cubic-bezier(.22, .61, .36, 1),
              transform .78s cubic-bezier(.22, .61, .36, 1);
}
.zz-nl__extra.lin:not(.deschis) { transform: translateY(-12px); }

/* Dupa ce s-a desfasurat, taierea nu mai e necesara si devine daunatoare:
   inelul auriu de focalizare se deseneaza in afara campului si era retezat.
   `max-height: none` ca sa nu ramana o limita artificiala daca textul se rupe
   pe mai multe randuri intr-o limba sau alta. */
.zz-nl__extra.intreg {
  overflow: visible;
  max-height: none;
}
@media (prefers-reduced-motion: reduce) {
  .zz-nl__extra { transition: none; }
}
.zz-nl__camp:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-color: var(--gold);
}

/* Butonul, cu sageata impinsa in dreapta (ca in macheta). */
.zz-nl__b {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  width: 100%;
  margin-top: 10px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  min-height: 54px;
  padding: 14px 20px;
  color: #18130f;
  /* ⚠️ Butonul a fost incercat pe 24.09 in doua feluri (aur metalic, apoi lumina
     calda cu halou). Bro le-a respins pe amandoua: „e prea vizibil". S-a intors
     exact la varianta plata de dinainte. Daca cineva vrea iar degrade aici,
     raspunsul a fost deja dat o data. */
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.zz-nl__sageata {
  position: absolute;
  right: 18px;
  width: 20px;
  height: 20px;
  transition: transform 0.18s ease;
}
.zz-nl__b:hover { background: #bd8a48; border-color: #bd8a48; }
@media (hover: hover) {
  .zz-nl__b:hover .zz-nl__sageata { transform: translateX(3px); }
}
.zz-nl__b:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 3px; }
.zz-nl__b:disabled { opacity: 0.55; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .zz-nl__sageata { transition: none; }
}

/* Randul „iti trimitem intai un email de confirmare" NU e un amanunt de design:
   § 7 UWG cere ca omul sa stie la ce se aboneaza INAINTE sa apese. Daca cineva
   vrea sa-l scoata ca „incarca vizual", raspunsul e nu. */
.zz-nl__mic {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--on-dark-2);
  opacity: 0.82;
}
.zz-nl__rez {
  margin: 8px 0 0;
  min-height: 1.1em;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--on-dark-2);
}
.zz-nl__rez.e-bun { color: #7fc79b; font-weight: 600; }
.zz-nl__rez.e-rau { color: #e59b90; font-weight: 600; }

/* ─────────────────── cele doua coloane: meniu si retele ─────────────────── */
.zz-fx__coloane {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: clamp(14px, 4vw, 30px);
  margin-top: clamp(26px, 4vw, 34px);
  padding-top: clamp(26px, 4vw, 34px);
  border-top: 1px solid rgba(169, 120, 62, 0.42);
  text-align: left;
}
/* linia verticala dintre coloane e un element de grila, nu un `border`:
   asa se poate stinge la capete, ca toate liniile aurii de pe site */
.zz-fx__coloane::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  width: 1px;
  background: linear-gradient(to bottom,
    rgba(169, 120, 62, 0) 0%,
    rgba(169, 120, 62, 0.5) 14%,
    rgba(169, 120, 62, 0.5) 86%,
    rgba(169, 120, 62, 0) 100%);
}
.zz-fx__col { display: flex; flex-direction: column; gap: 4px; }
.zz-fx__col:first-child { grid-column: 1; }
.zz-fx__soc { grid-column: 3; }

.zz-fx__cap {
  margin: 0 0 10px;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #cb9d58;
}
.zz-fx__col a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;             /* tinta de atingere, fara sa se departeze randurile */
  font-size: 17px;
  color: var(--on-dark);
  text-decoration: none;
  transition: color 0.18s ease;
}
@media (hover: hover) {
  .zz-fx__col a:hover { color: var(--gold); }
}
.zz-fx__col a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.zz-fx__soc svg { width: 25px; height: 25px; flex: none; }

/* ⚠️ Culorile pictogramelor raman cele cerute pe 24.09 („doar iconul din
   interior colorat"). Macheta le arata aurii; daca se trece pe auriu, aici se
   schimba, si atunci dispare si nevoia de tonuri ridicate. */
.zz-fx__soc .zz-ig { stroke: url(#zzIg); }
.zz-fx__soc .zz-ig-dot { fill: url(#zzIg); }
.zz-fx__soc .zz-fb { fill: #5299f5; }

/* ─────────────────────── butonul de retragere ─────────────────────── */
.zz-fx__retur {
  display: block;
  margin-top: clamp(24px, 4vw, 32px);
  padding: 15px 20px;
  font-size: 15.5px;
  text-align: center;
  color: var(--on-dark);
  text-decoration: none;
  border: 1px solid rgba(169, 120, 62, 0.65);
  border-radius: 7px;
  transition: background 0.18s ease, border-color 0.18s ease;
}
@media (hover: hover) {
  .zz-fx__retur:hover { background: rgba(169, 120, 62, 0.12); border-color: var(--gold); }
}
.zz-fx__retur:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ─────────────────────── randul juridic + copyright ─────────────────────── */
.zz-footer__legal {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 28px) var(--pad) clamp(26px, 4vw, 34px);
  border-top: 1px solid rgba(169, 120, 62, 0.42);
  text-align: center;
}
/* rombul si linia vechi erau desenate cu ::before/::after pe elementul asta si
   pozitionate fata de vechiul rand de pictograme, care nu mai exista */
.zz-footer__legal::before,
.zz-footer__legal::after { content: none; }
.zz-footer__legal nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;
  font-size: 14px;
}
.zz-footer__legal nav a {
  color: var(--on-dark-2);
  text-decoration: none;
  padding: 4px 0;
}
@media (hover: hover) {
  .zz-footer__legal nav a:hover { color: var(--on-dark); }
}
/* Separatorul „|" dintre linkuri, ca in macheta. Doua capcane, amandoua vazute
   in captura si reparate aici:

   1. ⚠️ Regula veche `.zz-footer__legal nav a + a::before` are specificitate mai
      MARE decat `... nav a::before`, deci un `content: none` scris cu selector
      mai scurt n-o opreste — ieseau pipe-uri duble. Se stinge cu acelasi selector.
   2. ⚠️ La randul care se rupe in doua, un separator ateriza la marginea randului,
      orfan. Solutia nu e cosmetica: asezam linkurile pe randuri FIXE de cate trei
      (ca in macheta), si atunci separatorul se pune doar intre coloanele 1-2 si
      2-3. Nu mai are unde sa cada la margine, in nicio limba. */
.zz-footer__legal nav a + a::before { content: none; }

@media (max-width: 620px) {
  .zz-footer__legal nav {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    gap: 8px 0;
  }
  .zz-footer__legal nav a:not(:nth-child(3n)):not(:last-child)::after {
    content: "|";
    position: static;
    margin: 0 11px;
    color: rgba(169, 120, 62, 0.55);
    background: none;
    width: auto;
    height: auto;
  }
}
@media (min-width: 621px) {
  /* incap toate pe un rand, deci separator intre toate, mai putin ultimul */
  .zz-footer__legal nav a:not(:last-child)::after {
    content: "|";
    position: static;
    margin-left: 14px;
    color: rgba(169, 120, 62, 0.55);
    background: none;
    width: auto;
    height: auto;
  }
}
@media (max-width: 359px) {
  .zz-footer__legal nav { font-size: 12.5px; }
}
.zz-fx__copy {
  margin: clamp(16px, 2.4vw, 22px) 0 0;
  font-size: 13.5px;
  color: #cb9d58;
}

/* Pe ecran ingust coloanele raman doua — asa e in macheta si incap: la 320px
   fiecare are 130px, iar „Instagram" la 17px masoara 78px. */
@media (max-width: 359px) {
  .zz-fx__coloane { gap: 10px; }
  .zz-fx__col a { font-size: 15.5px; }
  .zz-fx__soc svg { width: 21px; height: 21px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUBSOLUL PE TABLETA SI DESKTOP (24.09.2026)

   Telefonul ramane EXACT cum era — bro l-a aprobat asa. Tot ce urmeaza sta in
   `@media (min-width: 760px)`, deci sub pragul asta nu se schimba niciun pixel.

   De la 760px in sus, coloana de 560px se desface in doua: newsletterul in
   stanga, meniul si retelele in dreapta. Latimea creste fluid cu `clamp`, nu in
   trepte, ca sa nu existe o rezolutie la care sa arate „intre".

   ⚠️ Pragul e 760, nu 821 (cat foloseste restul site-ului): iPad-urile in
   picioare au 744-834px CSS, iar la 821 ar fi ramas pe forma de telefon, adica
   o banda ingusta in mijlocul unui ecran lat. Aici conteaza latimea disponibila
   pentru DOUA coloane de text, nu clasificarea telefon/desktop.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 760px) {
  .zz-fx {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    column-gap: clamp(38px, 6vw, 104px);
    align-items: start;
    max-width: min(1140px, 100%);
    padding-top: clamp(46px, 5vw, 76px);
    padding-bottom: clamp(30px, 3vw, 44px);
  }

  /* Sigla si linia ei tin tot randul, centrate ca pe telefon.
     ⚠️ `order: 0` si randuri EXPLICITE, obligatoriu. Vechiul bloc de subsol pune
     `order: 1` pe `.zz-footer__mark`, iar intr-o grila `order` schimba ordinea in
     care se aseaza elementele — sigla ajungea plasata ULTIMA si cadea peste
     coloana din dreapta, cu linia aurie deasupra ei. Se vedea doar pe desktop:
     pe telefon `.zz-fx` nu e grila, deci `order` n-avea ce face. */
  .zz-footer__mark { grid-column: 1 / -1; grid-row: 1; order: 0; }
  .zz-fx__linie    { grid-column: 1 / -1; grid-row: 2; width: min(330px, 46%); }

  /* stanga: newsletterul */
  .zz-nl { grid-column: 1; grid-row: 3; }
  .zz-nl__t { font-size: clamp(32px, 3.1vw, 46px); }

  /* dreapta: meniul si retelele, aliniate sus cu „RAMANEM IN LEGATURA".
     Linia orizontala de deasupra lor dispare — aici nu mai desparte nimic,
     fiindca nu mai stau unul sub altul. */
  .zz-fx__coloane {
    grid-column: 2;
    grid-row: 3;
    margin-top: 0;
    padding-top: 4px;
    border-top: 0;
    gap: clamp(18px, 3vw, 40px);
  }
  .zz-fx__col a { font-size: clamp(16px, 1.15vw, 18px); }

  /* butonul de retragere nu se intinde pe toata latimea: la 1140px ar fi un
     dreptunghi gol de un metru. Ramane la marimea textului, centrat. */
  .zz-fx__retur {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: center;
    min-width: min(360px, 100%);
    margin-top: clamp(34px, 4vw, 52px);
    padding-inline: clamp(28px, 4vw, 52px);
  }

  .zz-footer__legal {
    max-width: min(1140px, 100%);
    padding-top: clamp(22px, 2.2vw, 32px);
    padding-bottom: clamp(28px, 3vw, 40px);
  }
  .zz-footer__legal nav { font-size: clamp(14px, 1vw, 15.5px); }
}

/* Peste 1300px oprim cresterea textului mic si lasam aerul sa creasca in locul
   lui: un subsol cu litere de 20px arata a prezentare, nu a subsol. */
@media (min-width: 1300px) {
  .zz-fx { column-gap: clamp(90px, 8vw, 150px); }
  .zz-fx__coloane { gap: clamp(40px, 4vw, 70px); }
}