/* Gastro Lena, în gramatica paginilor de produs Apple. Valorile vin din măsurători pe apple.com (vezi DESIGN.md).
   Trei mărimi, ca la Apple: mare (≥1069 px), mediu (735–1068 px), mic (≤734 px).
   Marca rămâne în siglă, în maroul butoanelor și în fotografii. */
:root {
  --text: #1d1d1f;
  --gri: #6e6e73;
  --gri-2: #86868b;
  --gri-3: #424245;
  --fond-gri: #f5f5f7;
  --alb: #ffffff;
  --linie: #d2d2d7;
  --maro: #634536;
  --maro-hover: #4f3629;
  --link: #6b4630;
  --prov: #b35c00;
  --eroare: #d70015;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;

  --vc: min(1260px, 87.5vw);
  --vc-text: min(980px, 87.5vw);
  --margine: calc((100vw - var(--vc)) / 2);
  --spatiu: 160px;
  --r: 28px;
  --r-mic: 18px;
  --usor: cubic-bezier(.28, .11, .32, 1);
}
@media (max-width: 1068px) { :root { --spatiu: 120px; } }
@media (max-width: 734px) { :root { --spatiu: 80px; --r: 18px; } }

/* ---------- Bază ---------- */
* { box-sizing: border-box; }
html { scroll-padding-top: 52px; -webkit-text-size-adjust: 100%; }
html.fisa-deschisa { overflow: hidden; }
body { margin: 0; overflow-x: clip; background: var(--alb); color: var(--text); font: 400 17px/1.47059 var(--font); letter-spacing: -.022em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }
button, input, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; border-radius: 4px; }
/* secțiunile primesc focus doar ca țintă a legăturilor din pagină; nu au nevoie de contur */
section[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
::selection { background: rgb(99 69 54 / .2); }

/* text doar pentru cititoarele de ecran */
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vc { width: var(--vc); margin-inline: auto; }
.vc-text { width: var(--vc-text); margin-inline: auto; }
.centrat { text-align: center; }
.nb { white-space: nowrap; }
.sectiune { padding-block: var(--spatiu); }
.sectiune-fara-sus { padding-top: 0; scroll-margin-top: 44px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.fara-jos { padding-bottom: 0; }
.fond-gri { background: var(--fond-gri); }

/* ---------- Tipografie (valorile Apple) ---------- */
.t-titlu { font-size: 56px; line-height: 1.07143; letter-spacing: -.005em; }
.t-mare { font-size: 64px; line-height: 1.0625; letter-spacing: -.009em; font-weight: 600; }
.t-manifest { font-size: 28px; line-height: 1.14286; letter-spacing: .007em; font-weight: 600; text-wrap: pretty; }
.t-intro { font-size: 21px; line-height: 1.19048; letter-spacing: .011em; font-weight: 600; color: var(--gri); text-wrap: balance; }
.t-intro strong { color: var(--text); font-weight: 600; }
/* legăturile din mijlocul textului sunt subliniate, nu doar colorate */
.t-intro a, .raspuns a, .talpa-note a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.t-pret { font-size: 24px; line-height: 1.16667; letter-spacing: .009em; font-weight: 600; color: var(--gri); }
.t-legenda { font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; font-weight: 600; color: var(--gri); }
.t-legenda strong { color: var(--text); font-weight: 600; }
.t-eticheta { font-size: 14px; line-height: 1.28577; letter-spacing: -.016em; font-weight: 600; color: var(--text); padding: 0; }
.t-eticheta em { font-style: normal; font-weight: 400; color: var(--gri); }
/* capitol, ca pe pagina AirPods Pro: eticheta de 28/32 deasupra, la 6 px, titlul de 96/100, apoi textul de 24/32 la 38 px */
.t-sus { font-size: 28px; line-height: 1.14286; letter-spacing: .007em; font-weight: 600; color: var(--text); }
.t-capitol { margin-top: 6px; font-size: 96px; line-height: 1.04167; letter-spacing: -.015em; font-weight: 600; }
.capitol .t-intro { margin: 38px auto 0; max-width: 780px; font-size: 24px; line-height: 1.33341; letter-spacing: .009em; }
.nota { font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; color: var(--gri); }
@media (max-width: 1068px) {
  .t-titlu { font-size: 48px; line-height: 1.08349; letter-spacing: -.003em; }
  .t-mare { font-size: 48px; line-height: 1.08349; letter-spacing: -.003em; }
  .t-manifest { font-size: 24px; line-height: 1.16667; letter-spacing: .009em; }
  .t-sus { font-size: 24px; line-height: 1.16667; letter-spacing: .009em; }
  .t-capitol { font-size: 80px; line-height: 1.05; letter-spacing: -.015em; }
  .capitol .t-intro { margin-top: 30px; max-width: 640px; font-size: 21px; line-height: 1.381; letter-spacing: .011em; }
}
@media (max-width: 734px) {
  .t-titlu { font-size: 32px; line-height: 1.125; letter-spacing: .004em; }
  .t-mare { font-size: clamp(32px, 9.2vw, 40px); line-height: 1.1; letter-spacing: 0; }
  .t-manifest { font-size: 21px; line-height: 1.19048; letter-spacing: .011em; }
  .t-intro { font-size: 19px; line-height: 1.21053; letter-spacing: .012em; }
  .t-pret { font-size: 21px; line-height: 1.19048; letter-spacing: .011em; }
  .t-sus { font-size: 21px; line-height: 1.19048; letter-spacing: .011em; }
  .t-capitol { font-size: clamp(32px, 9vw, 48px); line-height: 1.08349; letter-spacing: -.003em; }
  .capitol .t-intro { margin-top: 24px; font-size: 19px; line-height: 1.42; letter-spacing: .012em; }
}

/* zone de atingere de cel puțin 44 px pentru butoanele și legăturile mici, fără să se schimbe ce se vede */
.buton-bara, .buton-mic, .link, .buton-cerc.mic, .acordeon-toate, .talpa-dir a, .talpa-dir button, .talpa-leg a, .talpa-mai a { position: relative; }
/* butoanele rotunde din colțul cardurilor rămân așezate în colț (regula de mai sus nu are voie să le scoată de acolo) */
.buton-cerc.motiv-buton { position: absolute; }
.buton-bara::after, .buton-mic::after, .link::after, .buton-cerc.mic::after, .acordeon-toate::after, .talpa-dir a::after, .talpa-dir button::after, .talpa-leg a::after, .talpa-mai a::after { content: ""; position: absolute; inset: -13px -8px; }
.buton-bara::after { inset: -10px -6px; }
.buton-mic::after { inset: -5px -4px; }
.buton-cerc.mic::after { inset: -4px; border-radius: 50%; }
.talpa-dir a::after, .talpa-dir button::after, .talpa-leg a::after, .talpa-mai a::after { inset: -5px -4px; }

/* Marcajele de „provizoriu” sunt ascunse; apar cu ?prov în adresă */
.doar-prov { display: none; }
.arata-prov .prov { text-decoration: underline dotted var(--prov); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.arata-prov .doar-prov { display: revert; }

.sari { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--text); color: #fff; transition: top .2s; }
.sari:focus { top: 8px; text-decoration: none; }

/* Elementele apar ușor când intră pe ecran; fără JavaScript sau cu mișcare redusă, sunt vizibile de la început */
.js [data-apare] { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--usor), transform 1s var(--usor); }
.js [data-apare].vazut { opacity: 1; transform: none; }
/* titlurile mari, centrate, intră din neclar în clar */
.js [data-apare].blur { filter: blur(14px); transition: opacity 1.1s var(--usor), transform 1.1s var(--usor), filter 1.1s var(--usor); }
/* titlurile secțiunilor urcă din spatele unei linii (o mască), ca pe paginile Apple, odată cu apariția blocului lor */
@media (prefers-reduced-motion: no-preference) {
  .js [data-apare] :is(h2.t-titlu, h2.t-mare) { clip-path: inset(0 0 100% 0); translate: 0 .4em; transition: clip-path 1.1s var(--usor) .05s, translate 1.1s var(--usor) .05s; }
  .js [data-apare].vazut :is(h2.t-titlu, h2.t-mare) { clip-path: inset(-.3em -.2em -.35em -.2em); translate: 0 0; }
  .js [data-apare].imediat :is(h2.t-titlu, h2.t-mare) { transition: none; }
  /* în blocurile de titlu, ce vine după titlu (textul, legăturile, butoanele) urcă pe rând, puțin după el */
  .js :is(.cap-sectiune, .vc-text)[data-apare] > :not(h2) { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--usor), transform .9s var(--usor); }
  .js :is(.cap-sectiune, .vc-text)[data-apare].vazut > :not(h2) { opacity: 1; transform: none; }
  .js :is(.cap-sectiune, .vc-text)[data-apare].vazut > :nth-child(2) { transition-delay: .14s; }
  .js :is(.cap-sectiune, .vc-text)[data-apare].vazut > :nth-child(3) { transition-delay: .26s; }
  .js :is(.cap-sectiune, .vc-text)[data-apare].vazut > :nth-child(n + 4) { transition-delay: .36s; }
  .js :is(.cap-sectiune, .vc-text)[data-apare].imediat > * { transition: none; }
}
.js [data-apare].blur.vazut { filter: blur(0); }
/* când tastatura sau o ancoră din adresă ajunge pe un element încă ascuns, el apare pe loc (și titlurile neclare) */
.js [data-apare].imediat, .js [data-apare].blur.imediat { transition: none; }

/* ---------- Butoane și legături ---------- */
.buton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 28px; padding: 11px 21px; border: 0; border-radius: 980px; background: var(--maro); color: #fff; font-size: 17px; line-height: 1.17648; letter-spacing: -.022em; white-space: nowrap; cursor: pointer; transition: background-color .2s ease, scale .15s ease; }
.buton:hover { background: var(--maro-hover); text-decoration: none; }
/* apăsarea se simte: butonul se strânge puțin, ca pe iPhone */
.buton:active { scale: .97; }
.buton-mic { padding: 8px 15px; font-size: 14px; line-height: 1.28577; letter-spacing: -.016em; }
.buton-bara { padding: 4px 11px; font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; }
.buton-lat { width: 100%; }
.ic { width: 20px; height: 20px; flex: none; }
.link { display: inline-flex; align-items: center; color: var(--link); font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; }
.link svg { width: 17px; height: 17px; margin-left: 1px; }
.buton-cerc { width: 56px; height: 56px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgb(210 210 215 / .64); color: rgb(0 0 0 / .56); cursor: pointer; transition: background-color .2s ease, color .2s ease; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.buton-cerc:hover { background: rgb(223 223 227 / .7); color: rgb(0 0 0 / .64); }
.buton-cerc svg { width: 24px; height: 24px; }
.buton-cerc.mic { width: 36px; height: 36px; }
.buton-cerc.mic svg { width: 20px; height: 20px; }
.buton-cerc:disabled { color: rgb(0 0 0 / .2); background: rgb(210 210 215 / .4); cursor: default; }

/* ---------- Bara produsului ---------- */
.bara { position: sticky; top: 0; z-index: 50; height: 52px; background: rgb(251 251 253 / .8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.bara::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgb(0 0 0 / .16); opacity: 0; transition: opacity .3s ease; }
.bara.lipita::after { opacity: 1; }
.bara { transition: background-color .5s ease; }
.bara-marca img { display: block; }
.bara-rand { width: min(980px, 100% - 44px); height: 100%; margin-inline: auto; display: flex; align-items: center; }
.bara-marca { position: relative; display: block; border-radius: 4px; }
.bara-marca::after { content: ""; position: absolute; inset: -8px -6px; }
.bara-marca img { height: 36px; width: auto; }
.bara-legaturi { display: flex; gap: 24px; margin-left: auto; margin-right: 24px; }
.bara-meniu { display: none; }
.bara-legaturi a { position: relative; font-size: 12px; line-height: 1; letter-spacing: -.01em; color: rgb(0 0 0 / .8); padding: 8px 0; }
.bara-legaturi a[aria-current="true"] { color: var(--text); }
.bara-legaturi a[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 1px; background: var(--text); }
.bara-legaturi a:hover { color: var(--link); text-decoration: none; }
@media (max-width: 734px) {
  .bara { height: 48px; }
  .bara-rand { width: calc(100% - 32px); }
  /* lista secțiunilor se deschide sub bară, din săgeată, ca la bara de produs de la Apple */
  .bara-meniu { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 4px 0 auto; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer; }
  .bara-meniu svg { width: 18px; height: 18px; transition: transform .35s var(--usor); }
  .bara.deschisa .bara-meniu svg { transform: rotate(180deg); }
  .bara-legaturi { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; margin: 0; padding: 0 var(--margine) 12px; background: #fbfbfd; box-shadow: 0 14px 24px -12px rgb(0 0 0 / .18); visibility: hidden; opacity: 0; translate: 0 -10px; transition: opacity .2s ease, translate .3s var(--usor), visibility 0s linear .3s; }
  .bara.deschisa .bara-legaturi { visibility: visible; opacity: 1; translate: 0 0; transition: opacity .2s ease, translate .3s var(--usor); }
  .bara-legaturi a { padding: 13px 0; border-bottom: 1px solid var(--linie); font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; color: var(--text); }
  .bara-legaturi a:last-child { border-bottom: 0; }
  .bara-legaturi a[aria-current="true"]::after { display: none; }
  .bara-marca img { height: 32px; }
}

/* ---------- Primul ecran, ca paginile de produs Apple: numele, titlul, prețul și butoanele centrate sus; dedesubt, mare,
   platoul Paul văzut din lateral (fotografia reală din „Dă-i ocol”). Când derulezi, platoul se întoarce de la o fotografie la
   următoarea (stă pe fiecare fotografie cea mai mare parte a drumului) și urcă puțin, iar textul se stinge. Fotografia de
   pornire e în HTML (se vede și fără JavaScript); întoarcerea se încarcă după pagină. Cadrul de 1800 × 1062 al fotografiei
   e lățimea --cw: cât încape sub text, cel mult 1320 px; pe telefon, mai lat decât ecranul (marginile lui sunt goale). ---------- */
.erou { --f: 80px; --t: 372px; --he: max(620px, min(calc(100svh - 52px - var(--panglica, 0px)), 940px)); --cw: min(1320px, 118vw, calc((100svh - 52px - var(--panglica, 0px) - var(--t)) * 2.3)); position: relative; display: flow-root; overflow-x: clip; height: var(--he); background: linear-gradient(#f5f5f7, #fff 62%); }
.erou-text { position: relative; z-index: 3; padding: clamp(28px, 6.5vh, 64px) var(--margine) 0; text-align: center; }
.rand-titlu { display: inline-block; }
.erou-nume { font-size: 32px; line-height: 1.125; letter-spacing: .004em; }
.erou-titlu { margin-top: 6px; font-size: var(--f); line-height: 1.05; letter-spacing: -.015em; font-weight: 600; text-wrap: balance; }
.erou-pret { margin-top: 18px; font-size: 21px; line-height: 1.19048; letter-spacing: .011em; color: var(--gri); }
.erou-actiuni { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; margin-top: 20px; }
/* scena trece cu o treime sub primul ecran: când aparatul se apropie, platoul crește peste începutul secțiunii următoare, nu se taie */
.erou-ocol { position: absolute; inset: 0 0 auto; z-index: 1; height: calc(var(--he) * 1.34); pointer-events: none; cursor: auto; }
.erou-ocol .ocol-cadre { inset: auto; left: calc(50% - var(--cw) / 2); top: calc(var(--he) - var(--cw) / 1.6949 * .88 - 4px); width: var(--cw); height: calc(var(--cw) / 1.6949); }
.erou-ocol .ocol-cadre picture { display: contents; }
.erou-ocol .ocol-cadre img.erou-foto { opacity: 1; }
/* intrarea: textul urcă imediat, din neclar în clar; platoul apare când fotografia s-a încărcat, ca o punere la punct a obiectivului */
@media (prefers-reduced-motion: no-preference) {
  /* fotografia apare singură, de îndată ce s-a încărcat (onload, fără să aștepte scripturile) */
  .js .erou-ocol .ocol-cadre { opacity: 0; scale: 1.05; filter: blur(12px); transition: opacity 1.4s cubic-bezier(.16, 1, .3, 1), scale 1.4s cubic-bezier(.16, 1, .3, 1), filter 1.4s cubic-bezier(.16, 1, .3, 1); }
  .js .erou-ocol .ocol-cadre.incarcat { opacity: 1; scale: 1; filter: none; }
  .erou-nume, .rand-titlu, .erou-pret, .erou-actiuni { animation: erou-intra 1.3s cubic-bezier(.16, 1, .3, 1) both; }
  .erou-nume { animation-delay: .12s; }
  .rand-titlu:nth-of-type(1) { animation-delay: .25s; }
  .rand-titlu:nth-of-type(2) { animation-delay: .38s; }
  .erou-pret { animation-delay: .5s; }
  .erou-actiuni { animation-delay: .6s; }
}
@keyframes erou-intra { from { opacity: 0; translate: 0 26px; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@media (max-width: 1068px) {
  .erou { --f: 64px; --t: 340px; }
  .erou-nume { font-size: 28px; line-height: 1.14286; letter-spacing: .007em; }
  .erou-titlu { line-height: 1.0625; letter-spacing: -.009em; }
}
@media (max-width: 734px) {
  /* pe telefon, platoul nu poate fi mai lat decât ecranul, deci primul ecran e cât textul plus platoul, nu cât tot ecranul */
  .erou { --f: 40px; --cw: 122vw; height: auto; min-height: 0; max-height: none; }
  .erou-ocol { position: relative; inset: auto; height: calc(var(--cw) / 1.6949 * .8 + 34vw); margin: 6px 0 -34vw; }
  .erou-ocol .ocol-cadre { top: calc(var(--cw) / 1.6949 * -.12); }
  .erou-nume { font-size: 21px; line-height: 1.19048; letter-spacing: .011em; }
  .erou-titlu { line-height: 1.1; letter-spacing: 0; }
  .erou-pret { margin-top: 12px; font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; }
  .erou-actiuni { margin-top: 16px; }
}
@media (max-width: 380px) { .erou { --f: min(34px, 10vw); } .erou-nume { font-size: 19px; } }
/* telefon ținut orizontal sau ecran foarte scund: textul în stânga, platoul în dreapta */
@media (max-height: 520px) and (orientation: landscape) {
  .erou { --f: clamp(30px, 5vw, 42px); --cw: min(70vw, calc((100svh - 48px) * 1.9)); height: calc(100svh - 48px - var(--panglica, 0px)); min-height: 0; }
  .erou-text { position: absolute; top: 50%; left: 0; width: 46%; padding: 0 0 0 var(--margine); translate: 0 -50%; text-align: left; }
  .erou-actiuni { justify-content: flex-start; }
  .erou-ocol { height: 100%; }
  .erou-ocol .ocol-cadre { left: auto; right: calc(var(--cw) * -.08); top: calc(50% - var(--cw) / 1.6949 * .48); }
}

/* ---------- Manifest ---------- */
.manifest { padding-top: clamp(64px, 9vw, 112px); }
.manifest .vc-text { width: min(720px, 87.5vw); }
.manifest .t-pret { margin-top: 28px; }
.manifest .buton { margin-top: 18px; }
@media (max-width: 734px) { .manifest .vc-text { text-align: left; } }

/* ---------- Capul unei secțiuni: titlul în stânga, legătura în dreapta ---------- */
.cap-sectiune { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 52px; }
.cap-sectiune .link { flex: none; }
.cap-legaturi { flex: none; display: flex; flex-wrap: wrap; gap: 8px 28px; }
@media (min-width: 735px) and (max-width: 1068px) { .cap-legaturi { flex-direction: column; align-items: flex-end; } }
.catalog-gata { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; color: var(--gri); }
html:not(.js) .catalog-gata { display: none; }
.catalog-gata svg { flex: none; width: 22px; height: 22px; color: var(--text); }
.cap-sectiune button.link { padding: 0; border: 0; background: none; cursor: pointer; }
@media (max-width: 734px) { .cap-sectiune { flex-direction: column; gap: 10px; margin-bottom: 32px; } }

/* ---------- Gustul se vede: galeria ---------- */
.galerie { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--margine); scroll-padding-inline: var(--margine); }
/* focusul de la tastatură: inelul stă pe fotografia curentă, nu în jurul întregii benzi */
.galerie:focus-visible { outline: none; }
.galerie:focus-visible .dala.curenta { outline: 2px solid #0071e3; outline-offset: -2px; }
.galerie::-webkit-scrollbar { display: none; }
.galerie:focus-visible { outline-offset: -2px; }
/* fundalul plăcii e exact culoarea la care am adus fundalul fotografiilor largi */
.dala { position: relative; flex: none; width: var(--vc); aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); background: rgb(241 241 243); scroll-snap-align: start; }
.dala picture { display: contents; }
.dala img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.dala figcaption { position: absolute; z-index: 1; left: 0; right: 0; top: 0; padding: 52px 12% 0; text-align: center; font-size: 28px; line-height: 1.14286; letter-spacing: .007em; font-weight: 600; color: rgb(0 0 0 / .88); text-wrap: balance; }
/* prim-planurile au textul alb, peste o umbră discretă care coboară din partea de sus */
.dala.inchisa img { object-position: 50% 50%; }
/* fiecare fotografie se poate deschide mare: cursor de mărire și lupa în colț, pe sticlă, ca butoanele de pe cardurile Apple */
.dala img { cursor: zoom-in; }
.dala .dala-mareste { position: absolute; z-index: 2; right: 20px; bottom: 20px; background: rgb(255 255 255 / .78); -webkit-backdrop-filter: saturate(1.8) blur(14px); backdrop-filter: saturate(1.8) blur(14px); opacity: 0; transition: opacity .3s ease, background-color .2s ease; }
.dala.curenta .dala-mareste, .dala-mareste:focus-visible { opacity: 1; }
.dala-mareste:hover { background: rgb(255 255 255 / .94); }
.dala-mareste.fara-contur:focus-visible { outline: none; }
.dala.inchisa::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: 48%; background: linear-gradient(rgb(0 0 0 / .52), rgb(0 0 0 / .18) 60%, rgb(0 0 0 / 0)); pointer-events: none; }
.dala.inchisa figcaption { z-index: 2; color: #fff; }
.galerie-control { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 36px; }
.puncte { display: flex; align-items: center; height: 56px; padding: 0 20px; border-radius: 999px; background: rgb(210 210 215 / .64); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
/* fiecare punct are o zonă de apăsare de 24 px; cel activ se lungește în bara de progres */
.punct { position: relative; width: 24px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; }
.punct::before { content: ""; position: absolute; left: 8px; top: 24px; width: calc(100% - 16px); height: 8px; border-radius: 999px; background: rgb(0 0 0 / .42); transition: background-color .3s ease; }
.punct:hover::before { background: rgb(0 0 0 / .6); }
/* lățimea punctului activ o animă main.js, lin, de la 24 la 64 px */
.punct.activ::before { background: rgb(0 0 0 / .2); }
.punct span { position: absolute; left: 8px; top: 24px; width: calc(100% - 16px); height: 8px; border-radius: 999px; overflow: hidden; }
.punct span i { position: absolute; inset: 0; border-radius: 999px; background: rgb(0 0 0 / .56); transform: translateX(-100%); }
.punct:not(.activ) span { display: none; }
#pauza .ic-porneste, #pauza.oprit .ic-pauza { display: none; }
#pauza.oprit .ic-porneste { display: block; }
@media (max-width: 1068px) { .dala { aspect-ratio: 4 / 3; } .dala figcaption { font-size: 24px; line-height: 1.16667; padding-top: 40px; } }
@media (max-width: 734px) {
  .dala { aspect-ratio: 4 / 5; }
  .dala img { object-position: 50% 100%; }
  .dala figcaption { font-size: 21px; line-height: 1.19048; letter-spacing: .011em; padding: 32px 9% 0; }
  .galerie { gap: 12px; }
}

/* ---------- Privește mai de aproape: o bandă pe toată lățimea; platoul iese din cadru în dreapta ---------- */
.aproape-panou { position: relative; height: 760px; overflow: hidden; background: var(--fond-gri); }
.aproape-scena { position: absolute; inset: 0; }
/* pe ecran lat, platoul apropiat se topește în gri sus și jos (nu e tăiat drept de banda albă) și se stinge
   înainte de coloana pilulelor, ca la AirPods Pro, unde produsul rămâne în dreapta coloanei */
@media (min-width: 1069px) {
  .aproape-scena {
    -webkit-mask-image: linear-gradient(transparent, #000 64px, #000 calc(100% - 64px), transparent), linear-gradient(to right, transparent calc(var(--margine) + 392px), #000 calc(var(--margine) + 472px));
    mask-image: linear-gradient(transparent, #000 64px, #000 calc(100% - 64px), transparent), linear-gradient(to right, transparent calc(var(--margine) + 392px), #000 calc(var(--margine) + 472px));
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
}
.aproape-inel { position: absolute; z-index: 4; left: 0; top: 0; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; box-shadow: 0 0 0 2px rgb(255 255 255 / .95), 0 0 0 7px rgb(255 255 255 / .22), 0 6px 20px rgb(0 0 0 / .22); opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 734px) { .aproape-inel { width: 76px; height: 76px; margin: -38px 0 0 -38px; } }
.aproape-platou { --d: min(940px, 64vw, 690px); position: absolute; left: max(calc(var(--margine) + 420px), calc(100% - var(--d) * .86)); top: calc(50% - var(--d) / 2); width: var(--d); aspect-ratio: 1; }
.aproape-umbra { position: absolute; left: 6%; top: 6%; width: 88%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .18), rgb(0 0 0 / .06) 70%, rgb(0 0 0 / 0)); translate: 0 24px; filter: blur(16px); }
.aproape-platou img { position: relative; width: 100%; height: 100%; object-fit: contain; }
.aproape-ui { position: absolute; inset: 0; width: var(--vc); margin-inline: auto; pointer-events: none; }
/* pilulele pornesc de la aceeași înălțime: când una se deschide, celelalte nu sar */
.pastile { position: absolute; left: 0; top: calc(50% - 154px); width: 380px; display: grid; justify-items: start; gap: 12px; pointer-events: auto; }
.pastila { display: inline-grid; grid-template-columns: 24px auto; align-items: start; column-gap: 10px; max-width: 100%; padding: 14px 20px 14px 14px; border: 0; border-radius: 28px; background: rgb(232 232 237 / .82); text-align: left; cursor: pointer; font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; font-weight: 600; color: var(--text); transition: background-color .3s ease, color .3s ease, border-radius .5s cubic-bezier(.65, 0, .35, 1); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.pastila:hover { background: rgb(232 232 237 / 1); }
.pastila-ic { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; transition: transform .4s var(--usor); }
.pastila-ic svg { width: 16px; height: 16px; }
.pastila-corp { padding-top: 2px; }
.pastila-text { display: none; font-weight: 400; }
.pastila[aria-expanded="true"] { grid-template-columns: 24px 1fr; padding: 14px 22px 16px 14px; border-radius: 20px; background: rgb(255 255 255 / .94); }
.pastila[aria-expanded="true"] .pastila-text { animation: pastila-text .5s ease both; }
@keyframes pastila-text { from { opacity: 0; } to { opacity: 1; } }
.pastila[aria-expanded="true"] .pastila-ic { transform: rotate(45deg); }
.pastila[aria-expanded="true"] .pastila-text { display: inline; }
/* când una e deschisă, celelalte se sting, ca la Apple */
.pastile:has([aria-expanded="true"]) .pastila:not([aria-expanded="true"]) { color: rgb(0 0 0 / .48); }
.pastila-desc { display: none; }
@media (max-width: 1068px) {
  .aproape-panou { height: auto; display: flex; flex-direction: column; }
  .aproape-scena { position: relative; inset: auto; height: min(680px, 92vw, 60svh); overflow: hidden; }
  .aproape-platou { --d: min(560px, 76vw, 54svh); left: calc(50% - var(--d) / 2); }
  .aproape-ui { position: relative; inset: auto; width: auto; margin: 0; pointer-events: auto; }
  .pastile { position: static; width: auto; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 20px var(--margine); scroll-padding-inline: var(--margine); }
  .pastile::-webkit-scrollbar { display: none; }
  .pastile li { flex: none; }
  .pastila, .pastila[aria-expanded="true"] { grid-template-columns: 24px auto; padding: 12px 18px 12px 12px; border-radius: 28px; white-space: nowrap; }
  .pastila[aria-expanded="true"] .pastila-text { display: none; }
  .pastila-desc { display: block; min-height: 4.2em; padding: 0 var(--margine) 32px; font-size: 17px; line-height: 1.4; color: var(--gri-3); }
  .pastila-desc strong { color: var(--text); font-weight: 600; }
  .pastila-desc:empty::before { content: "Atinge un ingredient ca să-l vezi de aproape."; color: var(--gri); }
}
@media (max-width: 734px) { .aproape-scena { height: min(104vw, 60svh); } .aproape-platou { --d: min(86vw, 54svh); } }

/* ---------- Alege-ți platoul: platourile din unghi, așezate jos în placă, ca produsele în rândul de la Apple ---------- */
.pista { position: relative; display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--margine) 8px; scroll-padding-inline: var(--margine); }
.pista::-webkit-scrollbar { display: none; }
/* rândurile care se derulează lateral nu se derulează și în sus: altfel, pe telefon, degetul care derulează pagina rămânea prins în ele */
.pista, .galerie, .pastile, .filtre-rand { overflow-y: hidden; overscroll-behavior-x: contain; }
.platou { flex: none; width: 300px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; text-align: center; }
.platou-poza { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: var(--r); background: var(--alb); }
/* platoul e văzut de sus, ca în primul ecran: umbra e un halou moale, puțin sub el */
.platou-poza::before { content: ""; position: absolute; left: 13%; top: 13%; width: 74%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .3), rgb(0 0 0 / .1) 68%, rgb(0 0 0 / 0)); translate: 0 5%; filter: blur(10px); }
.platou-poza img { position: relative; width: 82%; height: auto; transform: rotate(calc(var(--rulare, 0deg) + var(--mana, 0deg))); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) { .platou:hover .platou-poza img { transform: rotate(calc(var(--rulare, 0deg) + var(--mana, 0deg))) scale(1.02); } }
/* la intrare, platourile cad de sus pe masă, unul după altul: pornesc mai aproape de privitor (mai mari, rotite), cu umbra
   largă și ștearsă, apoi se așază, iar umbra se strânge sub ele; o singură dată */
.js .platou .platou-poza img { opacity: 0; scale: 1.18; rotate: -14deg; translate: 0 -12px; transition: opacity .45s ease calc(var(--intarziere, 0ms) + .1s), scale 1.1s cubic-bezier(.2, .9, .25, 1) calc(var(--intarziere, 0ms) + .1s), rotate 1.4s cubic-bezier(.2, .9, .25, 1) calc(var(--intarziere, 0ms) + .1s), translate 1.1s cubic-bezier(.2, .9, .25, 1) calc(var(--intarziere, 0ms) + .1s), transform .6s cubic-bezier(0, 0, .5, 1); }
.js .platou.vazut .platou-poza img { opacity: 1; scale: 1; rotate: 0deg; translate: 0 0; }
.js .platou .platou-poza::before { opacity: 0; scale: 1.35; transition: opacity 1.1s var(--usor) calc(var(--intarziere, 0ms) + .25s), scale 1.1s var(--usor) calc(var(--intarziere, 0ms) + .25s); }
.js .platou.vazut .platou-poza::before { opacity: 1; scale: 1; }
.platou-nume { margin-top: 30px; font-size: 28px; line-height: 1.14286; letter-spacing: .007em; }
.platou-descriere { margin-top: 10px; max-width: 26ch; font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; font-weight: 600; }
.platou-pret { margin-top: 16px; font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; color: var(--text); }
.platou-actiuni { margin-top: 24px; display: flex; align-items: center; gap: 24px; }
.platou-actiuni .link { font-size: 14px; line-height: 1.28577; letter-spacing: -.016em; }
.platou-actiuni .link svg { width: 14px; height: 14px; }
.platou-actiuni button.link { padding: 0; border: 0; background: none; cursor: pointer; }
button.link:hover, .acordeon-toate:hover { text-decoration: underline; }
.oferta-fara-js { margin-top: 48px; }
.fara-js { padding: 32px; border-radius: var(--r-mic); background: var(--alb); font-size: 17px; }
.pista-jos { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 40px; }
.sageti { display: flex; gap: 18px; margin-left: auto; }
@media (max-width: 734px) { .platou { width: 76vw; } .sageti { display: none; } }
/* „Fără …”: pastile ca filtrele din magazinul Apple; la apăsare, pictograma e tăiată de o linie care se desenează */
.catalog .cap-sectiune { margin-bottom: 30px; }
.filtre { margin-bottom: 40px; }
.filtre-rand { display: flex; flex-wrap: wrap; gap: 10px; }
.filtru { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px 0 12px; border: 0; border-radius: 980px; background: var(--alb); color: var(--text); font: inherit; font-size: 14px; line-height: 1; letter-spacing: -.016em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: box-shadow .2s ease, color .2s ease, scale .15s ease; }
.filtru:hover { box-shadow: inset 0 0 0 1px var(--gri-2); }
.filtru:active { scale: .97; }
.filtru:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }
.filtru[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--maro); color: var(--maro); }
.filtru-ic { position: relative; display: grid; place-items: center; width: 20px; height: 20px; }
.filtru-ic svg { width: 20px; height: 20px; }
.filtru-ic::after { content: ""; position: absolute; left: -1px; right: -1px; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: currentColor; box-shadow: 0 0 0 1.5px var(--alb); rotate: -45deg; scale: 0 1; transition: scale .35s var(--usor); }
.filtru[aria-pressed="true"] .filtru-ic::after { scale: 1 1; }
.filtre-stare { min-height: 20px; margin-top: 14px; font-size: 14px; line-height: 1.42859; letter-spacing: -.016em; color: var(--gri); }
.filtre-stare .link { padding: 0; border: 0; background: none; font-size: 14px; cursor: pointer; }
.platou-gol { justify-content: center; gap: 20px; aspect-ratio: 1; padding: 32px; border-radius: var(--r); background: var(--alb); }
.platou-gol-text { max-width: 22ch; font-size: 21px; line-height: 1.19; font-weight: 600; text-wrap: balance; }
@media (max-width: 734px) {
  .filtre { margin-bottom: 28px; }
  .filtre-rand { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--margine) * -1); padding: 2px var(--margine); scrollbar-width: none; }
  .filtre-rand::-webkit-scrollbar { display: none; }
  .filtru { flex: none; }
}
@media (hover: none) { .filtru { min-height: 44px; } }

/* ---------- Dă-i ocol: fotografiile din jurul platoului, una peste alta, la aceeași mărime; cercul din colț e platoul văzut
   de sus, care se rotește odată cu fotografiile, cu un punct pentru fiecare poză și triunghiul de dedesubt pentru tine ---------- */
.studio .t-intro { margin: 20px auto 0; max-width: 34em; }
.studio-cadru { position: relative; margin-top: 48px; }
.studio-scena { position: relative; aspect-ratio: 16 / 9; max-height: 640px; border-radius: var(--r); background: radial-gradient(120% 90% at 50% 40%, #fff 0%, #f5f5f7 70%); overflow: hidden; }
.ocol { touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: grab; -webkit-tap-highlight-color: transparent; }
.ocol.se-trage { cursor: grabbing; }
.ocol:focus-visible { outline: 2px solid #0071e3; outline-offset: -2px; }
.ocol-cadre { position: absolute; inset: 5% 6% 7%; transition: opacity .45s ease; }
.ocol-cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; }
/* pânza WebGL acoperă toată scena, ca platoul să nu fie tăiat când se întoarce; apare abia când a desenat fotografia de pornire */
.ocol-gl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.ocol.cu-gl .ocol-gl { opacity: 1; }
.ocol.cu-gl .ocol-cadre { visibility: hidden; transition: visibility 0s linear .3s; }
.ocol-busola { position: absolute; right: 28px; bottom: 22px; display: grid; justify-items: center; gap: 3px; pointer-events: none; transition: opacity .45s ease; }
.ocol-disc { pointer-events: auto; cursor: pointer; }
.ocol-disc { position: relative; width: 92px; height: 92px; border-radius: 50%; background: rgb(255 255 255 / .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 2px 10px rgb(0 0 0 / .06), inset 0 0 0 1px rgb(0 0 0 / .05); }
.ocol-disc img { position: absolute; inset: 15%; width: 70%; height: 70%; object-fit: contain; }
.ocol-puncte { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ocol-puncte circle { fill: rgb(0 0 0 / .2); transition: fill .3s ease; }
.ocol-puncte circle.activ { fill: var(--maro); }
.ocol-ochi { width: 12px; height: 8px; fill: var(--maro); }
.studio-scena:not(.gata) .ocol-busola, .studio-scena.schimba .ocol-cadre, .studio-scena.schimba .ocol-gl, .studio-scena.schimba .ocol-busola { opacity: 0; transition-duration: .2s; }
@media (min-width: 735px) and (max-width: 1068px) {
  .studio-scena .ocol-busola { top: 18px; bottom: auto; right: 20px; }
  .studio-scena .ocol-disc { width: 76px; height: 76px; }
}
/* reperele: un punct de sticlă pe fiecare ingredient marcat, cu numele alături la trecerea mouse-ului sau la focus; apăsat,
   platoul se întoarce spre el, iar eticheta spune și ce e. Când ingredientul e ascuns după altceva, punctul dispare. */
.studio-repere { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity .2s ease; }
.studio-repere[hidden] { display: none; }
.studio-cadru:has(.studio-scena.schimba) .studio-repere, .studio-cadru:has(.studio-scena:not(.gata)) .studio-repere { opacity: 0; }
.reper { position: absolute; left: 0; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0; border: 0; background: none; font: inherit; color: var(--text); cursor: pointer; pointer-events: auto; transition: opacity .25s ease; -webkit-tap-highlight-color: transparent; }
.reper::after { content: ""; position: absolute; inset: -9px; }
.reper.ascuns { opacity: 0; pointer-events: none; }
.reper-punct { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: rgb(255 255 255 / .84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 2px 8px rgb(0 0 0 / .16), inset 0 0 0 1px rgb(0 0 0 / .06); transition: background .3s ease, color .3s ease, scale .3s var(--usor); }
.reper-punct svg { width: 12px; height: 12px; transition: rotate .3s var(--usor); }
.reper:hover .reper-punct { scale: 1.1; }
.reper[aria-pressed="true"] .reper-punct { background: var(--text); color: #fff; }
.reper[aria-pressed="true"] .reper-punct svg { rotate: 45deg; }
.reper:focus-visible { outline: none; }
.reper:focus-visible .reper-punct { outline: 2px solid #0071e3; outline-offset: 2px; }
.reper-eticheta { position: absolute; top: 50%; left: 36px; display: grid; gap: 2px; width: max-content; max-width: 230px; padding: 7px 13px 8px; border-radius: 16px; background: rgb(255 255 255 / .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 4px 16px rgb(0 0 0 / .12); text-align: left; translate: -4px -50%; opacity: 0; pointer-events: none; transition: opacity .25s ease, translate .3s var(--usor); }
.reper-eticheta strong { font-size: 14px; line-height: 1.28577; letter-spacing: -.016em; font-weight: 600; white-space: nowrap; }
.reper-eticheta small { display: none; font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; color: var(--gri-3); }
.reper.stanga .reper-eticheta { left: auto; right: 36px; translate: 4px -50%; }
.reper:hover .reper-eticheta, .reper:focus-visible .reper-eticheta, .reper[aria-pressed="true"] .reper-eticheta { opacity: 1; translate: 0 -50%; }
.reper[aria-pressed="true"] .reper-eticheta small { display: block; }
.reper[aria-pressed="true"] { z-index: 1; }
.reper.jos .reper-eticheta { top: 36px; left: 50%; translate: -50% -4px; }
.reper.jos:hover .reper-eticheta, .reper.jos:focus-visible .reper-eticheta, .reper.jos[aria-pressed="true"] .reper-eticheta { translate: -50% 0; }
@media (max-width: 734px) {
  .reper { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
  .reper::after { inset: -10px; }
  .reper-punct svg { width: 10px; height: 10px; }
  .reper-eticheta { max-width: 190px; left: 32px; }
  .reper.stanga .reper-eticheta { right: 32px; }
}
.indiciu-ocol { position: absolute; top: 16px; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 6px; width: fit-content; max-width: calc(100% - 32px); margin: 0 auto; white-space: nowrap; padding: 7px 12px; border-radius: 980px; background: rgb(255 255 255 / .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 2px 10px rgb(0 0 0 / .08); font-size: 12px; line-height: 1.33; letter-spacing: -.01em; color: var(--gri-3); pointer-events: none; animation: indiciu-intra .5s var(--usor) both; transition: opacity .4s ease, translate .4s ease; }
.indiciu-ocol svg { width: 14px; height: 14px; }
.indiciu-ocol.pleaca { opacity: 0; translate: 0 -6px; }
@keyframes indiciu-intra { from { opacity: 0; translate: 0 -6px; } }
.studio-jos { display: grid; justify-items: center; gap: 18px; margin-top: 28px; }
.studio-alege { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
.studio-platou { display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--gri); font: inherit; font-size: 12px; line-height: 1.33; letter-spacing: -.01em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.studio-platou img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; padding: 3px; background: var(--alb); box-shadow: inset 0 0 0 1px var(--linie); transition: box-shadow .25s ease, scale .2s ease; }
.studio-platou:hover img { scale: 1.06; }
.studio-platou[aria-checked="true"] { color: var(--text); font-weight: 600; }
.studio-platou[aria-checked="true"] img { box-shadow: inset 0 0 0 2px var(--maro); }
.studio-platou:focus-visible { outline: none; }
.studio-platou:focus-visible img { outline: 2px solid #0071e3; outline-offset: 2px; }
.studio-detalii { font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; color: var(--gri); }
.studio-detalii strong { color: var(--text); font-weight: 600; }
.studio-actiuni { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.studio-actiuni { align-items: center; }
@media (max-width: 734px) {
  .studio-cadru { margin-top: 32px; }
  .studio-scena { aspect-ratio: 1 / .88; }
  .studio-scena .ocol-cadre { inset: 3% 2% 25%; }
  .studio-scena .ocol-busola { right: 50%; translate: 50% 0; bottom: 10px; }
  .studio-scena .ocol-disc { width: 62px; height: 62px; }
  .studio-alege { gap: 8px 10px; }
  .studio-platou img { width: 44px; height: 44px; }
}
@media (max-width: 380px) {
  .studio-alege { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .studio-platou { min-width: 0; font-size: 11px; }
  .studio-platou img { width: min(42px, 100%); height: auto; aspect-ratio: 1; }
}
/* ---------- În cifre: plăci închise pe negru, cu numere mari, ca evidențierile de pe paginile Apple. Pe ecran lat, trei plăci
   sus și două mai late jos; pe tabletă, câte două; pe telefon, una sub alta, cu numărul și unitatea pe același rând. ---------- */
.cifre { background: #000; color: #f5f5f7; }
.cifre .t-titlu { color: #f5f5f7; }
.cifre-grila { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin-top: 8px; padding: 0; list-style: none; }
.cifra { grid-column: span 2; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 236px; padding: 36px 36px 32px; border-radius: 28px; background: #161617; }
.cifra:nth-child(n + 4) { grid-column: span 3; }
.cifra-v { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0 8px; font-size: clamp(56px, 5.6vw, 84px); line-height: 1; letter-spacing: -.015em; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cifra-n { color: #f5f5f7; }
.cifra-pre, .cifra-unit { font-size: .36em; letter-spacing: 0; color: #86868b; font-weight: 600; }
.cifra-sub { max-width: 22ch; font-size: 19px; line-height: 1.21053; letter-spacing: .012em; font-weight: 600; color: #a1a1a6; }
.cifre .prov { text-decoration-color: rgb(255 255 255 / .4); }
/* contorul: fiecare cifră e o fereastră de 1em prin care trece banda 0–9 (de două ori); plăcile pornesc pe rând, iar cifrele
   din dreapta se opresc puțin mai târziu, ca la un contor mecanic */
.cifra-n { display: inline-flex; }
/* cifra ascunsă (.od-v) dă lățimea și linia de bază, ca „de la” și „lei” să stea pe aceeași linie cu cifrele; banda trece peste ea */
.od { position: relative; display: inline-block; clip-path: inset(0 -.1em); }
.od-v { visibility: hidden; }
.od-r { position: absolute; top: 0; left: 0; right: 0; display: block; transform: translateY(0); }
.od-r::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; white-space: pre; line-height: 1; }
.cifre-grila.ruleaza .od-r { transform: translateY(calc(var(--d) * -1em)); transition: transform calc(1.5s + var(--k) * .12s) cubic-bezier(.2, .75, .15, 1) calc(var(--i) * .09s + .15s); }
.cifre-grila.fara-miscare .od-r { transition: none; }
@media (max-width: 1068px) { .cifre-grila { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cifra, .cifra:nth-child(n + 4) { grid-column: auto; } .cifra:last-child { grid-column: 1 / -1; } .cifra { min-height: 0; gap: 28px; padding: 30px 30px 28px; } }
@media (max-width: 734px) {
  .cifre-grila { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cifra:last-child { grid-column: auto; }
  .cifra { min-height: 0; gap: 14px; padding: 26px 24px 24px; border-radius: 22px; }
  .cifra-v { font-size: clamp(48px, 15vw, 64px); }
  .cifra-sub { font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; }
}

/* ---------- Comanzi în trei pași: un telefon urcă din fiecare placă ---------- */
.cum .cap-sectiune { margin-bottom: 18px; }
.cum-intro { max-width: 34em; margin-bottom: 48px; text-wrap: pretty; }
@media (max-width: 734px) { .cum-intro { margin-bottom: 32px; } }
.pasi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pas:nth-child(2) { transition-delay: .1s; }
.pas:nth-child(3) { transition-delay: .2s; }
.pas-dala { position: relative; aspect-ratio: 1 / .9; container-type: size; overflow: hidden; border-radius: var(--r); background: var(--alb) center / cover no-repeat; }
/* fundaluri generate cu Higgsfield, în culorile mâncării: caramel, spanac, salam */
.f-caramel { background-color: #d9a273; background-image: url(foto/fundal-caramel.webp); }
.f-spanac { background-color: #8fb38a; background-image: url(foto/fundal-spanac.webp); }
.f-rosu { background-color: #e48a6e; background-image: url(foto/fundal-rosu.webp); }
.ecran { position: absolute; z-index: 1; left: 50%; top: 30px; bottom: -56px; width: 72%; translate: -50% 0; scale: 1.1; transform-origin: 50% 0; display: flex; flex-direction: column; padding-top: 36px; border-radius: 40px; overflow: hidden; background: #f2f2f4; box-shadow: 0 0 0 7px #1d1d1f, 0 0 0 8.5px #55555a, 0 28px 50px -12px rgb(0 0 0 / .28); font-size: 13px; line-height: 1.35; letter-spacing: -.01em; }
.ecran::before { content: ""; position: absolute; top: 11px; left: 50%; width: 72px; height: 21px; margin-left: -36px; border-radius: 12px; background: #1d1d1f; }
.ecran-stare { position: absolute; left: 22px; top: 13px; font-size: 12px; line-height: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.ecran-produs { align-items: center; justify-content: flex-start; gap: 3px; padding-top: 36px; background: var(--alb); text-align: center; }
.ecran-produs img { width: 84%; height: auto; margin-bottom: 8px; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .1)) drop-shadow(0 10px 14px rgb(0 0 0 / .08)); }
.ecran-produs strong { font-size: 15px; }
.ecran-produs > span:not(.buton, .ecran-stare) { font-size: 11px; color: var(--gri); }
.ecran-produs .buton { margin-top: 10px; padding: 6px 13px; font-size: 12px; }
/* ---- conversația, ca în WhatsApp (culorile măsurate pe machetele de pe whatsapp.com): fundal bej, bara de sus albă,
   mesajul trimis verde-deschis, cel primit alb, ora mică în colțul bulei, bifele gri sau albastre, butonul de trimis verde ---- */
.ecran-wa { --wa-fond: #f5f2ec; --wa-verde: #d9fdd3; --wa-text: #111b21; --wa-gri: #667781; --wa-buton: #1daa61; --wa-bife: #53bdeb; background: var(--wa-fond); color: var(--wa-text); }
.ecran-wa { padding-top: 0; }
/* ceasul și decupajul ecranului stau deasupra barei albe a conversației */
.ecran::before, .ecran-stare { z-index: 2; }
.wa-cap { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; padding: 40px 12px 8px 6px; background: #fff; box-shadow: 0 1px 0 rgb(0 0 0 / .07); font-size: 13px; }
.wa-inapoi { flex: none; width: 18px; height: 18px; color: var(--wa-text); }
.wa-avatar { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #f0f2f5; }
.wa-avatar img { width: 20px; height: 20px; }
.wa-cap strong { flex: 1; min-width: 0; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-ic { flex: none; display: flex; gap: 14px; color: var(--wa-text); }
.wa-ic svg { width: 18px; height: 18px; }
.chat-fir { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 10px 14px 0; }
.chat-zi { align-self: center; margin-bottom: 4px; padding: 3px 8px; border-radius: 6px; background: #fff; box-shadow: 0 1px .5px rgb(11 20 26 / .13); font-size: 10px; font-weight: 500; color: #54656f; }
.bula { position: relative; max-width: 86%; padding: 6px 8px 7px 9px; border-radius: 8px; box-shadow: 0 1px .5px rgb(11 20 26 / .13); color: var(--wa-text, #111b21); }
/* coada bulei, în colțul de sus, ca în WhatsApp */
.bula::after { content: ""; position: absolute; top: 0; width: 8px; height: 11px; background: inherit; }
.bula-eu { align-self: flex-end; background: var(--wa-verde, #d9fdd3); border-top-right-radius: 0; }
.bula-eu::after { right: -7px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.bula-ei { align-self: flex-start; background: #fff; border-top-left-radius: 0; }
.bula-ei::after { left: -7px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
/* ora stă în colțul din dreapta-jos al bulei, pe ultimul rând dacă încape */
.wa-ora { float: right; display: inline-flex; align-items: center; gap: 2px; margin: 5px 0 -3px 10px; font-size: 10px; line-height: 1; color: var(--wa-gri, #667781); white-space: nowrap; }
.bife { display: inline-block; width: 16px; height: 11px; color: var(--wa-gri, #667781); }
/* mesajul a fost citit: bifele sunt albastre */
.bife.citit { color: var(--wa-bife, #53bdeb); }
/* pasul 2: WhatsApp se deschide cu mesajul gata scris în câmpul de jos; câmpul stă la marginea vizibilă a plăcii */
/* bara de scris din WhatsApp, cu mesajul gata pus în câmp: pe toată lățimea, ca să nu pară un mesaj primit */
.chat-compune { position: absolute; left: 0; right: 0; bottom: calc(100cqh + 26px - (100cqh - 30px) / 1.1); display: flex; align-items: flex-end; gap: 6px; padding: 7px 8px 18px; background: #f6f5f3; border-top: 1px solid rgb(0 0 0 / .06); }
.chat-plus { flex: none; display: grid; place-items: center; width: 26px; height: 34px; color: var(--wa-text); }
.chat-plus svg { width: 20px; height: 20px; }
.chat-camp::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -.18em; background: var(--wa-buton); }
.chat-camp { flex: 1; padding: 8px 12px; border-radius: 20px; background: #fff; box-shadow: 0 1px .5px rgb(11 20 26 / .13); color: var(--wa-text); }
.chat-trimite { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--wa-buton); color: #fff; }
.chat-trimite svg { width: 15px; height: 15px; margin-left: 2px; }
.pas .t-legenda { margin-top: 20px; padding-right: 8%; }
.pasi-jos { display: none; }
/* sub 1069 px, pașii devin un rând lateral, ca rândurile de pe paginile Apple; pe telefon, pasul următor se vede pe margine */
@media (max-width: 1068px) {
  .pasi { display: flex; gap: 20px; width: auto; margin: 0; padding: 0 var(--margine) 8px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margine); scrollbar-width: none; }
  .pasi::-webkit-scrollbar { display: none; }
  .pas { flex: none; width: min(420px, 54vw); scroll-snap-align: start; }
  .pasi-jos { display: flex; }
}
@media (max-width: 734px) { .pasi { gap: 14px; } .pas { width: 80vw; } .pas-dala { aspect-ratio: 1 / 1.08; } .ecran { width: 74%; } .chat-zi { display: none; } .pas .t-legenda { padding-right: 0; } }

/* ---------- Evenimente: masa văzută de sus, pe toată lățimea; platourile ies din cadru ---------- */
.evenimente .t-intro { text-wrap: balance; }
/* masa: raport fix, ca locurile platourilor (în procente) să rămână aceleași pe orice ecran; platourile nu se ating.
   Fața de masă se încarcă abia când masa se apropie de ecran (clasa .cu-fond, pusă de main.js). */
.masa { position: relative; aspect-ratio: 1440 / 662; margin-top: 56px; overflow: hidden; background: #f3efe9; clip-path: inset(0 calc(var(--inset, 0) * 1px) round calc(var(--raza, 0) * 1px)); }
.masa-plan { position: absolute; inset: 0; background: center / cover no-repeat; }
.masa.cu-fond .masa-plan { background-image: url(foto/fata-de-masa.webp); }
/* fiecare platou stă pe un suport care ține umbra caldă, cu lumina din stânga sus; doar imaginea din el e rotită */
.m { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); translate: -50% -50%; filter: drop-shadow(1px 2px 2px rgb(50 34 18 / .3)) drop-shadow(10px 18px 24px rgb(50 34 18 / .18)); }
.m img { display: block; width: 100%; height: auto; rotate: var(--r); }
.m1 { --x: 20.1; --y: 37.8; --w: 26; --r: -16deg; }
.m2 { --x: 79.9; --y: 40; --w: 25; --r: 18deg; }
.m3 { --x: 50; --y: 52.1; --w: 31; --r: 0deg; }
.m4 { --x: 6.6; --y: 90.6; --w: 24; --r: 9deg; }
.m5 { --x: 93.4; --y: 92.1; --w: 23; --r: -11deg; }
.oferta { position: relative; z-index: 1; width: min(692px, 87.5vw); margin: 64px auto 0; padding: 40px; display: grid; gap: 32px; border-radius: var(--r); background: var(--fond-gri); }
.optiuni { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.optiuni legend { margin-bottom: 14px; }
.optiuni label { position: relative; }
.optiuni input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
/* conturul ales e desenat în interior, ca opțiunea să nu-și schimbe mărimea */
.optiuni svg { width: 24px; height: 24px; }
.optiuni span { display: grid; place-items: center; align-content: center; gap: 4px; min-height: 84px; padding: 10px; border-radius: 12px; background: var(--alb); box-shadow: inset 0 0 0 1px var(--gri-2); font-size: 17px; letter-spacing: -.022em; text-align: center; transition: box-shadow .2s ease; }
.optiuni label:hover span { box-shadow: inset 0 0 0 1px var(--text); }
.optiuni input:checked + span { box-shadow: inset 0 0 0 2px var(--maro); }
.optiuni input:focus-visible + span { outline: 2px solid #0071e3; outline-offset: 2px; }
.invitati { display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: 8px; }
.invitati output { font-size: 28px; line-height: 1; font-weight: 600; letter-spacing: .007em; font-variant-numeric: tabular-nums; }
.invitati input, .estimare { grid-column: 1 / -1; }
.estimare { font-size: 14px; color: var(--gri); letter-spacing: -.016em; }
.estimare strong { color: var(--text); }
/* sala: podeaua gri, mesele rotunde cu fața de masă, farfuriile albe pe margine și platourile în mijloc, toate la scară */
.sala { grid-column: 1 / -1; align-self: start; position: relative; aspect-ratio: 16 / 9; margin-top: 8px; overflow: hidden; border-radius: 16px; background: radial-gradient(120% 100% at 50% 40%, #fff, #ececef); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .04); }
.sala-plan { position: absolute; inset: 0; }
.sala-masa { position: absolute; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: #f3efe9 url(foto/fata-de-masa-m.webp) center / cover; box-shadow: 0 1px 2px rgb(50 34 18 / .16), 0 6px 14px rgb(50 34 18 / .12); }
.sala-loc { position: absolute; width: 15%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #fff 0 54%, #f2efea 55% 63%, #fff 64% 100%); box-shadow: 0 .5px 1.5px rgb(50 34 18 / .22); }
.sala-platou { position: absolute; left: 50%; top: 50%; width: 21%; translate: -50% -50%; filter: drop-shadow(0 1px 1.5px rgb(50 34 18 / .3)); }
.sala-platou img { display: block; width: 100%; height: auto; }
.sala .mt-rigla { left: 12px; bottom: 9px; }
.sala-nota { grid-column: 1 / -1; align-self: start; font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; color: var(--gri); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 36px; margin: 0; background: none; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--maro) var(--umplut, 16%), var(--linie) var(--umplut, 16%)); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--linie); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--maro); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -12px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 .5px 4px rgb(0 0 0 / .12), 0 6px 13px rgb(0 0 0 / .12), 0 0 0 .5px rgb(0 0 0 / .04); }
input[type=range]::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 .5px 4px rgb(0 0 0 / .12), 0 6px 13px rgb(0 0 0 / .12); }
.oferta .buton { justify-self: center; }
@media (max-width: 734px) {
  .masa { aspect-ratio: 390 / 500; margin-top: 40px; }
  .masa.cu-fond .masa-plan { background-image: url(foto/fata-de-masa-m.webp); }
  .m1 { --x: 10.3; --y: 12; --w: 51; }
  .m2 { --x: 91; --y: 12.4; --w: 50; }
  .m3 { --x: 50; --y: 50; --w: 64; }
  .m4 { --x: 11.5; --y: 88; --w: 49; }
  .m5 { --x: 89.7; --y: 89; --w: 49; }
  .oferta { margin-top: 32px; padding: 28px 22px; gap: 28px; }
  .optiuni { grid-template-columns: 1fr 1fr; }
}

/* ---------- De ce să comanzi de la noi: cardurile albe care se derulează lateral, ca „Why Apple is the best place to shop”
   (măsurat pe apple.com/iphone: carduri 372×516, colțuri de 28 px, 20 px între ele; eticheta 17/21, titlul 28/32, textul 17/21;
   pe telefon 260×392, 14/18 și 21/25). Ilustrația stă jos în card; mișcarea ei se joacă o dată, când cardul intră pe ecran. ---------- */
.motive-pista { gap: 20px; padding-top: 4px; }
/* pe proprietatea scale, separată de transform-ul folosit la apariție, ca cele două să nu se încurce */
@media (hover: hover) {
  .platou-poza { transition: scale .3s cubic-bezier(0, 0, .5, 1); }
  .js .motiv[data-apare] { transition: opacity 1s var(--usor), transform 1s var(--usor), scale .3s cubic-bezier(0, 0, .5, 1); }
  .motiv:hover, .platou:hover .platou-poza { scale: 1.016; }
}
.motiv { position: relative; flex: none; width: 372px; height: 516px; display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background: var(--alb); scroll-snap-align: start; }
.motiv-text { padding: 32px 32px 0; }
.motiv-eticheta { font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; }
.motiv-titlu { margin-top: 8px; font-size: 28px; line-height: 1.14286; letter-spacing: .007em; font-weight: 600; text-wrap: balance; }
.motiv-corp { margin-top: 12px; font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; }
.motiv-vizual { position: relative; flex: 1; min-height: 0; }
.motiv-buton { position: absolute; right: 20px; bottom: 20px; z-index: 2; }
/* pe cardurile cu fotografie până jos, butonul stă pe o pastilă de sticlă, ca să se vadă la fel de clar ca pe alb */
.v-nota ~ .motiv-buton:hover, .v-rece ~ .motiv-buton:hover { background: rgb(255 255 255 / .94); }
.v-nota ~ .motiv-buton, .v-rece ~ .motiv-buton { background: rgb(255 255 255 / .78); -webkit-backdrop-filter: saturate(1.8) blur(14px); backdrop-filter: saturate(1.8) blur(14px); }
.motiv-buton:hover { text-decoration: none; }

/* mesajul care se scrie singur: rândurile apar unul după altul, apoi bifele */
/* primul card: un ecran de blocare de iPhone, într-o placă cu colțuri rotunjite: fața de masă (suprafața generată) ca fundal,
   platoul comandat jos, ora mare sus și notificarea de confirmare, cu încă două în teanc sub ea, ca în iOS.
   Butonul din colțul cardului rămâne pe alb, sub placă. */
.v-blocare { position: relative; }
.blocare { position: absolute; left: 32px; right: 32px; top: 4px; bottom: 76px; overflow: hidden; border-radius: 22px; background: #efe9e1; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .06); }
.blocare-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blocare-platou { position: absolute; left: 50%; top: 50%; width: 118%; max-width: none; height: auto; translate: -50% 0; filter: drop-shadow(2px 4px 4px rgb(50 34 18 / .25)) drop-shadow(10px 18px 24px rgb(50 34 18 / .16)); }
.blocare-ora { position: absolute; left: 0; right: 0; top: 12px; text-align: center; font-size: 56px; line-height: 1; font-weight: 300; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: rgb(29 29 31 / .86); }
.notif-grup { position: absolute; left: 12px; right: 12px; top: 84px; }
.notif, .notif-strat { border-radius: 20px; background: rgb(250 250 251 / .9); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); box-shadow: 0 0 0 .5px rgb(0 0 0 / .05), 0 8px 24px -10px rgb(50 34 18 / .35); }
.notif { position: relative; z-index: 3; display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px 12px 11px; }
.notif-strat { position: absolute; left: 10px; right: 10px; bottom: 0; height: 40px; z-index: 2; background: rgb(244 244 246 / .82); }
.notif-strat + .notif-strat { left: 20px; right: 20px; z-index: 1; background: rgb(238 238 240 / .74); }
.notif-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: linear-gradient(#5be07c, #1daa61); color: #fff; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .08); }
.notif-ic svg { width: 22px; height: 22px; }
.notif-text { min-width: 0; flex: 1; }
.notif-sus { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 15px; line-height: 1.25; letter-spacing: -.016em; }
.notif-sus strong { font-weight: 600; }
.notif-sus span { flex: none; font-size: 13px; color: rgb(60 60 67 / .6); }
.notif-corp { margin-top: 1px; font-size: 15px; line-height: 1.27; letter-spacing: -.016em; color: var(--text); }

/* alergenii: pastile în culorile mâncării, așezate ușor strâmb, care cad la locul lor */
.v-alergeni { display: flex; flex-wrap: wrap; align-content: flex-end; justify-content: center; gap: 10px 8px; padding: 0 30px 80px; }
.v-alergeni li { padding: 9px 16px; border-radius: 980px; font-size: 17px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
.v-alergeni li:nth-child(3n+1) { background: #f6e9df; color: #84441b; rotate: -4deg; }
.v-alergeni li:nth-child(3n+2) { background: #e6efe3; color: #2c5a28; rotate: 3deg; }
.v-alergeni li:nth-child(3n) { background: #f7e3de; color: #9e2f1d; rotate: -2deg; }
.v-alergeni li:nth-child(4) { rotate: 5deg; } .v-alergeni li:nth-child(7) { rotate: -6deg; }

/* observațiile: platoul din unghi, cu nota scrisă peste el */
.v-nota img { position: absolute; left: 50%; bottom: -2%; width: 118%; max-width: none; translate: -50% 0; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .12)) drop-shadow(0 14px 20px rgb(0 0 0 / .1)); }
.nota-camp { position: absolute; z-index: 1; left: 32px; top: 22%; display: grid; gap: 2px; padding: 11px 16px 12px; border-radius: 14px; background: rgb(255 255 255 / .9); box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 10px 24px -8px rgb(0 0 0 / .22); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); font-size: 17px; line-height: 1.25; }
.nota-camp span:first-child { font-size: 12px; line-height: 1.3; color: var(--gri); }
.nota-scris { justify-self: start; }

/* păstrarea: fotografia de aproape până la marginile cardului, cu temperatura pe sticlă */
.v-rece { margin-top: 28px; overflow: hidden; }
.v-rece img { position: absolute; left: 0; bottom: 0; width: 100%; height: 150%; object-fit: cover; object-position: 78% 100%; }
.rece-eticheta { position: absolute; left: 24px; bottom: 24px; padding: 10px 18px; border-radius: 18px; background: rgb(255 255 255 / .72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); font-size: 32px; line-height: 1.125; font-weight: 600; letter-spacing: .004em; font-variant-numeric: tabular-nums; }

/* telefonul: numărul mare și butonul de apel */
.v-tel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding-bottom: 20px; color: var(--text); }
.v-tel:hover { text-decoration: none; }
.tel-cerc { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--maro); color: #fff; transition: background-color .2s ease; }
.tel-cerc svg { width: 34px; height: 34px; }
.tel-cerc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--maro); opacity: 0; }
.v-tel:hover .tel-cerc { background: var(--maro-hover); }
.tel-nr { font-size: 32px; line-height: 1.125; font-weight: 600; letter-spacing: .004em; font-variant-numeric: tabular-nums; }
.v-tel:hover .tel-nr { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* mișcarea, o singură dată; fără JavaScript sau cu mișcare redusă, ilustrațiile stau direct în starea finală */
/* notificarea coboară o dată din marginea de sus a ecranului și frânează lin; teancul se desface 200 ms mai târziu; platoul se așază */
.js .v-blocare .notif { opacity: 0; translate: 0 -34px; transition: opacity .4s ease .35s, translate .7s cubic-bezier(.16, 1, .3, 1) .35s; }
.js .v-blocare .notif-strat { opacity: 0; translate: 0 0; transition: opacity .4s ease .55s, translate .6s cubic-bezier(.16, 1, .3, 1) .55s; }
.js .v-blocare .blocare-platou { scale: 1.06; transition: scale 1.6s cubic-bezier(.16, 1, .3, 1); }
.motiv.joaca .v-blocare .notif { opacity: 1; translate: 0 0; }
.motiv.joaca .v-blocare .notif-strat { opacity: 1; translate: 0 10px; }
.motiv.joaca .v-blocare .notif-strat + .notif-strat { translate: 0 20px; transition-delay: .6s; }
.motiv.joaca .v-blocare .blocare-platou { scale: 1; }
/* alergenii cad de mai sus, drepți, și frânează lin la locul lor, rotindu-se fiecare spre unghiul lui */
.js .v-alergeni li { opacity: 0; translate: 0 -64px; transition: opacity .35s ease, translate .95s cubic-bezier(.16, 1, .3, 1), rotate 1.1s cubic-bezier(.16, 1, .3, 1); }
.js .motiv:not(.joaca) .v-alergeni li { rotate: 0deg; }
.js .nota-camp { opacity: 0; translate: 0 12px; transition: opacity .6s var(--usor), translate .8s var(--usor); }
.js .nota-scris { clip-path: inset(0 100% 0 0); }
.js .rece-eticheta { opacity: 0; translate: 0 10px; transition: opacity .6s var(--usor) .2s, translate .8s var(--usor) .2s; }
.js .v-rece img { scale: 1.08; transition: scale 1.6s var(--usor); }
.motiv.joaca .v-alergeni li, .motiv.joaca .nota-camp, .motiv.joaca .rece-eticheta { opacity: 1; scale: 1; translate: 0 0; }
.motiv.joaca .v-rece img { scale: 1; }
.motiv.joaca .v-alergeni li { transition-delay: calc(var(--k, 0) * 70ms); }
.v-alergeni li:nth-child(2) { --k: 1; } .v-alergeni li:nth-child(3) { --k: 2; } .v-alergeni li:nth-child(4) { --k: 3; } .v-alergeni li:nth-child(5) { --k: 4; } .v-alergeni li:nth-child(6) { --k: 5; } .v-alergeni li:nth-child(7) { --k: 6; } .v-alergeni li:nth-child(8) { --k: 7; }
.motiv.joaca .nota-scris { clip-path: inset(0 0 0 0); animation: scrie 1.1s steps(21, end) .5s both; }
.motiv.joaca .tel-cerc::after { animation: unda-tel 1.6s var(--usor) .3s both; }
@keyframes scrie { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes unda-tel { 0% { opacity: .6; scale: 1; } 100% { opacity: 0; scale: 1.9; } }

@media (max-width: 1068px) {
  .motiv { width: 320px; height: 470px; }
  .v-alergeni { gap: 8px 6px; padding: 0 20px 68px; }
  .v-alergeni li { padding: 7px 13px; font-size: 15px; }
  .motiv-titlu { font-size: 24px; line-height: 1.16667; letter-spacing: .009em; }
}
@media (max-width: 734px) {
  .motiv { width: min(280px, 74vw); height: 420px; border-radius: 24px; }
  .motiv-text { padding: 24px 24px 0; }
  .motiv-eticheta { font-size: 14px; line-height: 1.28577; letter-spacing: -.016em; }
  .motiv-titlu { font-size: 21px; line-height: 1.19048; letter-spacing: .011em; }
  .motiv-corp { font-size: 14px; line-height: 1.28577; letter-spacing: -.016em; }
  .motiv-buton { right: 16px; bottom: 16px; }
  .blocare { left: 24px; right: 24px; bottom: 64px; border-radius: 18px; }
  .blocare-ora { top: 8px; font-size: 40px; }
  .notif-grup { left: 8px; right: 8px; top: 58px; }
  .notif { gap: 8px; padding: 8px 10px 9px 8px; border-radius: 16px; }
  .notif-strat { border-radius: 16px; }
  .notif-ic { width: 28px; height: 28px; border-radius: 7px; } .notif-ic svg { width: 18px; height: 18px; }
  .notif-sus, .notif-corp { font-size: 12px; } .notif-sus span { font-size: 11px; }
  .v-alergeni { gap: 8px 6px; padding: 0 16px 64px; }
  .v-alergeni li { padding: 7px 13px; font-size: 15px; }
  .nota-camp { left: 20px; top: 20%; font-size: 15px; }
  .v-rece { margin-top: 20px; }
  .rece-eticheta { left: 16px; bottom: 16px; font-size: 24px; padding: 8px 14px; border-radius: 14px; }
  .tel-cerc { width: 64px; height: 64px; } .tel-cerc svg { width: 28px; height: 28px; }
  .tel-nr { font-size: 24px; }
}

/* ---------- Întrebări frecvente ---------- */
/* după modulul „Questions? Answers.” de pe apple.com/apple-pay (măsurat): întrebările de 28/32, 28 px sus și jos,
   linie doar între rânduri, săgeata gri; deasupra listei, în dreapta, „Deschide tot” */
.acordeon-sus { display: none; justify-content: flex-end; margin-top: 52px; }
.js .acordeon-sus { display: flex; }
.acordeon-toate { padding: 0; border: 0; background: none; font-size: 14px; line-height: 1.28577; letter-spacing: -.016em; cursor: pointer; }
.acordeon-toate svg { width: 14px; height: 14px; transition: transform .4s var(--usor); }
.acordeon-toate[aria-pressed="true"] svg { transform: rotate(180deg); }
.acordeon { margin-top: 12px; }
.acordeon details { border-bottom: 1px solid var(--linie); }
.acordeon summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px 0; font-size: 28px; line-height: 1.14286; letter-spacing: .007em; font-weight: 600; text-wrap: balance; cursor: pointer; border-radius: 4px; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary svg { width: 26px; height: 26px; flex: none; color: var(--gri-3); transition: transform .4s var(--usor); }
.acordeon details[open] summary svg { transform: rotate(180deg); }
.raspuns { overflow: hidden; }
.raspuns p { max-width: 40em; padding-bottom: 30px; font-size: 17px; color: var(--gri-3); }
@media (max-width: 1068px) { .acordeon summary { font-size: 24px; line-height: 1.16667; letter-spacing: .009em; padding: 26px 0; } }
@media (max-width: 734px) { .acordeon-sus { margin-top: 36px; } .acordeon summary { font-size: 21px; line-height: 1.19048; letter-spacing: .011em; padding: 21px 0; } .acordeon summary svg { width: 22px; height: 22px; } }

/* ---------- Final: replica mărcii, butonul și toate platourile, într-un rând care alunecă spre stânga și se întoarce puțin pe
   măsură ce derulezi (fără suprapuneri, cu loc dedesubt pentru umbre). Cu mișcare redusă, rândul stă, centrat. ---------- */
.final { overflow: hidden; padding-bottom: clamp(48px, 7vw, 104px); }
.final-actiuni { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; }
.rand-final { margin-top: clamp(56px, 7vw, 96px); padding-bottom: 40px; }
.rf-pista { display: flex; align-items: center; gap: clamp(28px, 3.4vw, 56px); width: max-content; padding-inline: 6vw; }
.rf { flex: none; width: clamp(240px, 25vw, 360px); aspect-ratio: 1; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .1)) drop-shadow(0 18px 26px rgb(0 0 0 / .09)); }
.rf img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 734px) {
  .final .t-capitol { font-size: clamp(32px, 9.4vw, 40px); }
  .final-actiuni { flex-direction: column; gap: 18px; margin-top: 28px; }
  .rand-final { margin-top: 48px; padding-bottom: 28px; }
  .rf { width: 64vw; }
  .rf-pista { gap: 22px; }
}

/* ---------- Subsolul ---------- */
.talpa { background: var(--fond-gri); padding: 24px 0 calc(24px + env(safe-area-inset-bottom)); font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; color: var(--gri); }
.talpa-note { display: grid; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--linie); }
.talpa-dir { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 28px 0 20px; }
.talpa-dir li, .talpa-mai, .talpa-legal p { overflow-wrap: break-word; }
.talpa .program { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; color: var(--gri-3); }
.talpa .program-punct { width: 7px; height: 7px; margin-top: 4px; }
.talpa-autor { width: 100%; color: var(--gri); }
.talpa-autor a { color: var(--gri-3); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.talpa-autor a:hover { color: var(--text); }
.talpa-dir h3 { font-size: 12px; line-height: 1.33337; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.talpa-dir li { margin-bottom: 8px; color: var(--gri-3); }
.talpa-dir a { color: var(--gri-3); }
.talpa-dir a:hover, .talpa-dir button:hover { color: var(--text); text-decoration: underline; }
.talpa-dir button { padding: 0; border: 0; background: none; color: var(--gri-3); font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; cursor: pointer; text-align: left; }
/* ca „More ways to shop” de la Apple, chiar deasupra rândului legal */
.talpa-mai { padding: 4px 0 10px; color: var(--gri); }
.talpa-mai a { color: var(--maro); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.talpa-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 16px; border-top: 1px solid var(--linie); }
.talpa-leg { display: flex; flex-wrap: wrap; row-gap: 6px; }
.talpa-leg > * { color: var(--gri-3); padding: 0 10px; border-left: 1px solid var(--linie); }
.talpa-leg > :last-child { padding-right: 0; }
.talpa-leg > :first-child, .talpa-leg > .doar-prov + :not(.doar-prov) { padding-left: 0; border-left: 0; }
.arata-prov .talpa-leg > .doar-prov + :not(.doar-prov) { padding-left: 10px; border-left: 1px solid var(--linie); }
@media (max-width: 734px) { .talpa-dir { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } .talpa-legal { flex-direction: column; } }

/* ---------- Fișa platoului ---------- */
.fisa { width: min(1000px, calc(100% - 40px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: var(--r); background: var(--alb); color: var(--text); box-shadow: 0 30px 80px rgb(0 0 0 / .25); overflow: hidden; }
.fisa::backdrop { background: rgb(0 0 0 / .48); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.fisa[open] { display: flex; flex-direction: column; animation: intra .5s var(--usor); }
@keyframes intra { from { opacity: 0; transform: translateY(30px); } }
.inchide { position: absolute; top: 16px; right: 16px; z-index: 5; width: 36px; height: 36px; background: #333336; color: #fff; }
.inchide:hover { background: #4a4a4d; color: #fff; }
.inchide svg { width: 18px; height: 18px; }
.fisa-corp { overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 48px; padding: 0 48px 48px; }
/* bara de sus a fișei, pe toate ecranele, ca la foile din iOS: Înapoi, titlul, ✕; transparentă la început, mată după derulare */
.fisa-cap { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; align-items: center; position: sticky; top: 0; z-index: 4; height: 60px; margin: 0 -48px -12px; padding: 0 12px; background: rgb(255 255 255 / 0); transition: background-color .25s ease, box-shadow .25s ease; }
.fisa-cap.plin { background: rgb(255 255 255 / .94); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); box-shadow: 0 1px 0 rgb(0 0 0 / .08); }
.fisa-cap-titlu { grid-column: 2; justify-self: center; max-width: 100%; font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; translate: 0 6px; transition: opacity .25s ease, translate .25s ease; }
.fisa-cap.cu-titlu .fisa-cap-titlu { opacity: 1; translate: 0 0; }
.fisa-cap .inchide { position: static; grid-column: 3; justify-self: end; }
.fisa-inapoi { grid-column: 1; }
/* cele două vederi */
.fisa[data-vedere="produs"] .comanda, .fisa[data-vedere="comanda"] .fisa-sus { display: none; }
.fisa-sus { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 48px; align-items: start; }
.fisa-poza { position: sticky; top: 0; align-self: start; aspect-ratio: 1; border-radius: var(--r-mic); background: var(--fond-gri); display: grid; place-items: center; }
/* fotografia din fișă se deschide în vizor: tot cadrul e buton, cu lupa în colț, ca butoanele „+” de pe plăcile Apple */
.fisa-mareste { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: none; cursor: zoom-in; }
.fisa-mareste:focus-visible { outline: 2px solid #0071e3; outline-offset: -2px; }
.fisa-mareste.fara-contur:focus-visible { outline: none; }
.fisa-mareste .fisa-lupa { position: absolute; right: 16px; bottom: 16px; transition: background-color .2s ease, color .2s ease, scale .2s ease; }
.fisa-mareste:hover .fisa-lupa { background: rgb(223 223 227 / .7); color: rgb(0 0 0 / .64); scale: 1.06; }
#fisa-img { width: 84%; height: auto; opacity: 0; transition: opacity .35s ease; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .1)) drop-shadow(0 14px 20px rgb(0 0 0 / .08)); }
#fisa-img.gata { opacity: 1; }
/* „Din lateral”: butonul din stânga jos, ca lupa din dreapta; fotografiile din jurul platoului stau peste cea de sus */
.fisa-unghi { position: absolute; left: 16px; bottom: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px 0 10px; border: 0; border-radius: 980px; background: rgb(210 210 215 / .64); color: rgb(0 0 0 / .72); font: inherit; font-size: 14px; line-height: 1; letter-spacing: -.016em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s ease, color .2s ease, scale .15s ease; }
.fisa-unghi svg { width: 20px; height: 20px; }
.fisa-unghi:hover { background: rgb(223 223 227 / .7); color: rgb(0 0 0 / .8); }
.fisa-unghi:active { scale: .97; }
.fisa-unghi:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }
.fisa-unghi[aria-busy="true"] { opacity: .6; cursor: progress; }
.fisa-unghi[aria-pressed="true"] { background: var(--text); color: #fff; }
.fisa-ocol { position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: inherit; background: var(--fond-gri); opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.fisa-poza.din-lateral .fisa-ocol { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.fisa-ocol .ocol-cadre { inset: 10% 3% 21%; }
.fisa-ocol .ocol-busola { right: 16px; bottom: 14px; }
.fisa-ocol .ocol-disc { width: 64px; height: 64px; }
.fisa-poza .fisa-lupa { z-index: 3; }
.fisa-poza.din-lateral .fisa-lupa { opacity: 0; transition: opacity .2s ease; }
.fisa-info { display: grid; gap: 6px; align-content: start; }
#fisa-titlu:focus { outline: none; }
.fisa-info h2 { padding-right: 40px; font-size: 40px; line-height: 1.1; letter-spacing: 0; }
.fisa-meta { color: var(--gri); }
.fisa-actiuni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 18px; }
.fisa-gata { margin-top: 4px; font-size: 14px; line-height: 1.28577; letter-spacing: -.016em; color: var(--gri); }
.fisa-cumpara .ic { display: none; }
.fisa-cumpara.adaugat .ic { display: block; }
.fisa-vezi { justify-self: start; margin-top: 14px; padding: 0; border: 0; background: none; cursor: pointer; }
/* „Trimite cuiva”: foaia de partajare a telefonului; unde nu există, linkul se copiază și eticheta spune asta 2 s */
.fisa-trimite { gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; }
.fisa-trimite svg { width: 20px; height: 20px; margin-top: -3px; }
.fisa-trimite span { transition: opacity .2s ease; }
.fisa-pret { margin-top: 6px; font-size: 21px; font-weight: 600; letter-spacing: .011em; }
.fisa-info h3 { margin-top: 22px; font-size: 17px; }
.fisa-pastrare { color: var(--gri-3); }
/* ingredientele grupate, ca specificațiile tehnice de la Apple: eticheta sus, conținutul dedesubt, linii fine între grupe */
.specificatii { margin: 6px 0 0; }
/* rețetarul: fiecare grupă cu pictograma ei în stânga; ingredientele sunt pastile care se ating („fără …”) */
.specificatii > div { position: relative; padding: 14px 0 14px 40px; border-top: 1px solid var(--linie); }
.spec-ic { position: absolute; left: 0; top: 13px; width: 28px; height: 28px; color: var(--text); }
.specificatii > div:last-child { border-bottom: 1px solid var(--linie); }
.specificatii dt { font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; font-weight: 600; color: var(--gri); }
.specificatii dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.fisa-fara-ajutor { margin-top: 2px; font-size: 14px; line-height: 1.42859; letter-spacing: -.016em; color: var(--gri); }
.ingr { min-height: 32px; padding: 0 12px; border: 0; border-radius: 980px; background: var(--fond-gri); color: var(--text); font-size: 15px; line-height: 1; letter-spacing: -.01em; cursor: pointer; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.ingr:hover { box-shadow: inset 0 0 0 1px var(--gri-2); }
.ingr[aria-pressed="true"] { background: var(--alb); color: var(--gri); text-decoration: line-through; text-decoration-color: var(--maro); text-decoration-thickness: 1.5px; box-shadow: inset 0 0 0 1px var(--linie); }
@media (hover: none) { .ingr { min-height: 40px; padding: 0 14px; } }
.fisa-fara { margin-top: 12px; font-size: 14px; line-height: 1.42859; letter-spacing: -.016em; font-weight: 600; color: var(--maro); }
.fisa-fara[hidden] { display: none; }
.cos-fara { color: var(--maro) !important; }
/* alergenii, ca rândurile „Quick Look” de la Apple (măsurat: pictograma deasupra, numele dedesubt, 600) */
.fisa-alergeni { margin-top: 16px; padding: 16px 16px 14px; border-radius: 12px; background: var(--fond-gri); }
.alergeni-titlu { font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; font-weight: 600; color: var(--gri); }
.alergeni { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 16px 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.alergeni li { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; font-weight: 600; }
.alergeni svg { width: 30px; height: 30px; }
.alergeni-nota { margin-top: 14px; font-size: 12px; line-height: 1.33337; color: var(--gri); }
/* păstrarea: trei plăci, tot ca „Quick Look” */
.pastrare { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.pastrare li { display: grid; justify-items: center; align-content: start; gap: 2px; padding: 16px 10px; border-radius: 12px; background: var(--fond-gri); text-align: center; }
.pastrare svg { width: 32px; height: 32px; margin-bottom: 8px; }
.pastrare strong { font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; font-weight: 600; }
.pastrare span { font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; color: var(--gri); }
/* comanda: o singură coloană albă, cu linii fine între rânduri, ca sacoșa de la Apple */
.comanda { grid-column: 1 / -1; justify-self: center; width: min(100%, 600px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 4px 0 8px; }
.comanda-titlu { font-size: 40px; line-height: 1.1; letter-spacing: 0; font-weight: 600; }
.comanda-titlu:focus { outline: none; }
.comanda-trimisa { display: grid; justify-items: start; gap: 6px; margin-top: -8px; padding: 14px 16px; border-radius: 12px; background: var(--fond-gri); font-size: 14px; line-height: 1.42859; letter-spacing: -.016em; }
.comanda-trimisa[hidden] { display: none; }
.comanda-trimisa .link, .trimis-actiuni .link { padding: 0; border: 0; background: none; font-size: 14px; cursor: pointer; }
.comanda .buton, .comanda .nota, .camp-lat, .comanda-total { grid-column: 1 / -1; }
fieldset.camp > legend { margin-bottom: 8px; padding: 0; }
.camp { display: grid; gap: 8px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
/* în Safari pe iPhone, câmpul de dată are o lățime proprie și textul centrat; îl aduc la rând cu celelalte */
input[type=date] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; text-align: left; }
input[type=date]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.data-camp { position: relative; }
/* zilele următoare: plăci de 60×70, pe un rând care se derulează; conturul maro alunecă la ziua aleasă */
.zile { position: relative; display: flex; gap: 8px; margin: 0 -4px; padding: 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
.zile::-webkit-scrollbar { display: none; }
.zi { position: relative; flex: none; display: grid; justify-items: center; align-content: center; gap: 2px; width: 60px; height: 70px; padding: 0; border: 0; border-radius: 14px; background: var(--fond-gri); color: var(--text); font: inherit; cursor: pointer; scroll-snap-align: start; font-variant-numeric: tabular-nums; transition: background-color .2s ease; }
.zi:hover { background: #ebebf0; }
/* pe iPhone, fără pata gri de la atingere: plăcile și pastilele au starea lor de apăsare */
.zi, .extra-chip, .ingr, .m, .zi-sarb-corp, .alege-opt, .segment label, .optiuni label { -webkit-tap-highlight-color: transparent; }
.zi:active { scale: .97; }
.zi:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }
.zi-sapt, .zi-luna { font-size: 11px; line-height: 1.2; letter-spacing: .01em; color: var(--gri); }
.zi-nr { font-size: 22px; line-height: 1.1; letter-spacing: -.01em; font-weight: 600; }
.zi[aria-checked="true"] .zi-sapt, .zi[aria-checked="true"] .zi-luna { color: var(--maro); }
.zi-alta svg { width: 22px; height: 22px; margin-bottom: 2px; }
.zi.sarb::after { content: ""; position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--maro); }
.zile-ales { position: absolute; top: 4px; left: 0; z-index: 1; height: 70px; border-radius: 14px; box-shadow: inset 0 0 0 2px var(--maro); pointer-events: none; opacity: 0; visibility: hidden; }
.data-alta { margin-top: 2px; }
.data-alta[hidden] { display: none; }
.comanda-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 18px; border-top: 1px solid var(--linie); font-variant-numeric: tabular-nums; }
.comanda-total[hidden] { display: none; }
#total-eticheta { font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; color: var(--gri); }
#total-suma { font-size: 24px; line-height: 1.16667; letter-spacing: .009em; font-weight: 600; white-space: nowrap; }
.trimite-zona { display: grid; gap: 12px; }
.trimite-zona[hidden], .trimis[hidden] { display: none; }
/* comanda prin e-mail: datele de contact se deschid sub alegerea „WhatsApp / E-mail” */
.trimite-cale { margin-bottom: 4px; }
.date-client { display: grid; gap: 18px; overflow: hidden; }
.date-client[hidden], .date-firma[hidden] { display: none; }
.date-client-intro { font-size: 14px; line-height: 1.42859; letter-spacing: -.016em; color: var(--gri); }
.campuri-dublu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
.date-firma { display: grid; gap: 18px; overflow: hidden; padding: 18px; border-radius: 16px; background: var(--fond-gri); }
.date-firma input { background: var(--alb); }
.camp em, .t-eticheta em { font-style: normal; font-weight: 400; color: var(--gri); }
.capcana { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* comutatorul, ca în Setările de pe iPhone */
.comutator { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.comutator input { position: absolute; opacity: 0; width: 51px; height: 31px; margin: 0; cursor: pointer; }
.comutator-buton { position: relative; flex: none; width: 51px; height: 31px; border-radius: 16px; background: rgb(120 120 128 / .16); transition: background-color .25s ease; }
.comutator-buton::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgb(0 0 0 / .15), 0 3px 1px rgb(0 0 0 / .06); transition: translate .3s cubic-bezier(.3, .7, .2, 1); }
.comutator input:checked + .comutator-buton { background: var(--maro); }
.comutator input:checked + .comutator-buton::after { translate: 20px 0; }
.comutator input:focus-visible + .comutator-buton { outline: 2px solid #0071e3; outline-offset: 2px; }
.comutator-text { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.33; letter-spacing: -.016em; }
.comutator-text svg { width: 20px; height: 20px; }
/* trimiterea pe e-mail: butonul arată că lucrează (un cerc care se învârte, în locul pictogramei) */
.buton[aria-busy="true"] { cursor: progress; }
.buton[aria-busy="true"] .ic { visibility: hidden; }
.buton[aria-busy="true"]::before { content: ""; position: absolute; width: 18px; height: 18px; margin-left: -2px; border: 2px solid rgb(255 255 255 / .35); border-top-color: #fff; border-radius: 50%; animation: se-trimite .8s linear infinite; }
#buton-trimite { position: relative; }
@keyframes se-trimite { to { rotate: 360deg; } }
@media (max-width: 480px) { .campuri-dublu { grid-template-columns: minmax(0, 1fr); } }
/* după trimitere: bifa se desenează o dată, apoi ce urmează */
.trimis { display: grid; justify-items: center; gap: 6px; padding: 8px 0; text-align: center; }
.trimis:focus { outline: none; }
.trimis-bifa { width: 44px; height: 44px; margin-bottom: 10px; fill: none; stroke: var(--maro); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.trimis-titlu { font-size: 24px; line-height: 1.16667; letter-spacing: .009em; font-weight: 600; }
.trimis-text { max-width: 30em; font-size: 17px; line-height: 1.47059; letter-spacing: -.022em; color: var(--gri); }
.trimis-actiuni { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 24px; margin-top: 14px; }
.trimis-tel { margin-top: 6px; font-size: 14px; }
.buton.secundar { background: #e8e8ed; color: var(--text); }
.buton.secundar:hover { background: #dedee3; color: var(--text); }
.oferta-data { display: grid; gap: 10px; }
.data-gol { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--gri); pointer-events: none; display: none; }
.data-camp.gol .data-gol { display: block; }
.data-camp.gol input { color: transparent; }
.data-camp.gol input:focus { color: var(--text); }
.data-camp.gol input:focus + .data-gol { display: none; }
input[type=date], input[type=text], input[type=tel], input[type=email], textarea { width: 100%; min-height: 52px; padding: 14px 16px; border: 1px solid var(--gri-2); border-radius: 12px; background: var(--alb); color: var(--text); font-size: 17px; transition: border-color .2s ease, box-shadow .2s ease; }
input[type=date]:focus, input[type=text]:focus, input[type=tel]:focus, input[type=email]:focus, textarea:focus { outline: none; border-color: #0071e3; box-shadow: 0 0 0 3px rgb(0 113 227 / .2); }
input[aria-invalid="true"] { border-color: var(--eroare); background: #fff2f4; }
textarea { resize: vertical; min-height: 84px; }
.ajutor { font-size: 12px; color: var(--gri); }
.eroare { font-size: 12px; font-weight: 600; color: var(--eroare); }
.eroare:empty { display: none; }
.pas-cant { display: flex; align-items: center; width: max-content; border: 1px solid var(--gri-2); border-radius: 12px; background: var(--alb); }
.pas-cant button { width: 52px; height: 50px; display: grid; place-items: center; border: 0; border-radius: 12px; background: none; cursor: pointer; }
.pas-cant button svg { width: 20px; height: 20px; }
.pas-cant button:disabled { color: rgb(0 0 0 / .2); cursor: default; }
.pas-cant output { min-width: 40px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.segment { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; border-radius: 10px; background: rgb(118 118 128 / .12); }
.segment label { position: relative; }
.segment input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segment svg { width: 18px; height: 18px; flex: none; }
.segment span { display: flex; justify-content: center; align-items: center; gap: 6px; min-height: 40px; border-radius: 8px; font-size: 15px; transition: background-color .2s ease, box-shadow .2s ease; }
.segment input:checked + span { background: var(--alb); font-weight: 600; box-shadow: 0 3px 8px rgb(0 0 0 / .12), 0 3px 1px rgb(0 0 0 / .04); }
.segment input:focus-visible + span { outline: 2px solid #0071e3; outline-offset: 2px; }
.sari-bara { display: none; }
@media (max-width: 734px) {
  /* bara de sus a fișei, ca la foile din iOS: transparentă peste fotografie, mată și cu numele platoului după ce derulezi */
  /* peste fotografie, bara nu oprește atingerile; doar butoanele ei */
  .fisa-cap { height: 56px; margin: 0 -20px -80px; padding: 0 12px 0 4px; pointer-events: none; }
  .fisa-cap button { pointer-events: auto; }
  .fisa[data-vedere="comanda"] .fisa-cap { margin-bottom: 0; }
  .fisa { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  /* sub bara Safari se vede fundalul din spatele fișei: îl fac alb, ca fișa să pară întreagă */
  .fisa::backdrop { background: var(--alb); }
  .fisa-corp { grid-template-columns: 1fr; gap: 24px; padding: 0 20px calc(24px + env(safe-area-inset-bottom)); }
  .fisa-sus { grid-template-columns: 1fr; gap: 24px; }
  .fisa-poza { position: relative; margin: 0 -20px; border-radius: 0; }
  .fisa-cumpara { display: none; }
  .fisa-actiuni { margin-top: 10px; }
  .fisa-info h2 { font-size: 32px; }
  .comanda { padding: 0 0 8px; gap: 24px; }
  .comanda-titlu { font-size: 32px; line-height: 1.125; }
  /* bara de jos, ca bara de cumpărare de pe telefon la Apple: translucidă, peste text, cu butonul pe toată lățimea */
  .sari-bara { display: block; position: sticky; bottom: calc(-24px - env(safe-area-inset-bottom)); z-index: 3; margin: 0 -20px calc(-24px - env(safe-area-inset-bottom)); padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: rgb(255 255 255 / .82); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 -1px 0 rgb(0 0 0 / .08); transition: opacity .25s ease, transform .25s ease; }
  .sari-bara .buton { width: 100%; }
  .sari-bara .ic { display: none; }
  .fisa[data-vedere="comanda"] .sari-bara .ic { display: block; }
  .sari-bara.ascuns { opacity: 0; transform: translateY(100%); pointer-events: none; }
}

/* ---------- Ajută-mă să aleg: după „Help Me Choose” de pe apple.com/mac/best-mac (măsurat) ----------
   Panou gri, bara de progres sus, întrebarea 32/36 (28/32 pe telefon), răspunsurile pe rânduri albe de 65 px cu colțuri de 12 px,
   cel ales cu contur de 2 px; jos, butonul-pilulă, gri cât timp nu ai ales nimic. */
.alege { width: min(760px, calc(100% - 40px)); height: min(840px, calc(100dvh - 48px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: var(--r); background: var(--fond-gri); color: var(--text); box-shadow: 0 30px 80px rgb(0 0 0 / .25); overflow: hidden; }
.alege::backdrop { background: rgb(0 0 0 / .48); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.alege[open] { display: flex; flex-direction: column; animation: intra .5s var(--usor); }
.alege-cap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 16px 10px; }
.alege-inapoi { justify-self: start; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 14px 0 8px; border: 0; border-radius: 980px; background: none; color: var(--text); font-size: 14px; letter-spacing: -.016em; cursor: pointer; transition: opacity .3s ease, background-color .2s ease; }
.alege-inapoi svg { width: 18px; height: 18px; }
.alege-inapoi:hover { background: rgb(0 0 0 / .05); }
.alege-inapoi.ascuns { visibility: hidden; opacity: 0; }
.alege-nume:focus { outline: none; }
.alege-nume { font-size: 14px; line-height: 1.42859; letter-spacing: -.016em; font-weight: 600; }
.alege-inchide { justify-self: end; }
.alege-bara { height: 4px; margin: 6px 40px 0; border-radius: 2px; background: rgb(0 0 0 / .08); overflow: hidden; }
.alege-bara i { display: block; height: 100%; border-radius: 2px; background: var(--maro); transform-origin: 0 50%; transform: scaleX(var(--progres, .25)); transition: transform .6s var(--usor); }
.alege-corp { flex: 1; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 36px 40px 0; }
.alege-pas { min-width: 0; margin: 0; padding: 0; border: 0; }
.alege-intrebare { padding: 0; font-size: 32px; line-height: 1.125; letter-spacing: .004em; font-weight: 600; }
.alege-ajutor { margin-top: 10px; font-size: 14px; line-height: 1.42859; color: var(--gri); }
.alege-optiuni { display: grid; gap: 12px; margin-top: 28px; }
.alege-opt { position: relative; display: grid; align-content: center; gap: 2px; min-height: 65px; padding: 12px 20px; border-radius: 12px; background: var(--alb); cursor: pointer; transition: box-shadow .2s ease, scale .15s ease; }
.alege-opt:hover { box-shadow: inset 0 0 0 1px var(--gri-2); }
.alege-opt:active { scale: .99; }
.alege-opt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--maro); }
.alege-opt:has(input:focus-visible) { outline: 2px solid #0071e3; outline-offset: 2px; }
.alege-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
/* pictograma opțiunii, în stânga titlului și a explicației */
.alege-opt:has(.opt-ic) { grid-template-columns: 28px minmax(0, 1fr); column-gap: 16px; }
.alege-opt:has(.opt-ic) .opt-titlu, .alege-opt:has(.opt-ic) .opt-sub { grid-column: 2; }
.opt-ic { grid-row: 1 / span 2; align-self: center; width: 28px; height: 28px; color: var(--text); }
.opt-titlu { font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; font-weight: 600; }
.opt-sub { font-size: 14px; line-height: 1.28577; letter-spacing: -.016em; color: var(--gri); }
.alege-jos[hidden] { display: none; }
.alege-jos { position: sticky; bottom: 0; display: flex; justify-content: center; margin: auto -40px 0; padding: 28px 40px 32px; background: linear-gradient(rgb(245 245 247 / 0), var(--fond-gri) 40%); }
.alege-urmator { min-width: 224px; min-height: 56px; }
.alege-urmator:disabled { background: rgb(232 232 237); color: var(--gri); cursor: default; scale: 1; }
/* rezultatul: platoul cade pe masă ca în rândul de platouri, apoi numele, prețul și butoanele */
.alege-rezultat { text-align: center; padding-bottom: 8px; }
/* ---------- Compară: ca pagina de comparat modele de pe apple.com; coloane aliniate pe rânduri, numele lipite sus ---------- */
.compara { width: min(1040px, calc(100% - 40px)); height: min(960px, calc(100dvh - 48px)); background: var(--alb); }
.compara-corp { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px 48px 56px; }
.compara-sus { display: grid; justify-items: center; gap: 18px; margin-bottom: 36px; text-align: center; }
.compara-intrebare { font-size: 40px; line-height: 1.1; letter-spacing: 0; font-weight: 600; }
.compara-comut { width: min(380px, 100%); }
.compara-comut span { min-height: 36px; font-size: 14px; letter-spacing: -.016em; }
.compara-legenda { font-size: 14px; line-height: 1.42859; letter-spacing: -.016em; color: var(--gri); }
.compara-grila { --coloane: 3; display: grid; grid-template-columns: repeat(var(--coloane), minmax(0, 1fr)); column-gap: 40px; text-align: center; }
.cmp-sel { position: sticky; top: -12px; z-index: 2; display: flex; justify-content: center; padding: 18px 0 14px; background: var(--alb); }
.cmp-sel select { -webkit-appearance: none; appearance: none; max-width: 100%; padding: 4px 28px 8px 6px; border: 0; border-bottom: 1px solid var(--gri-2); border-radius: 0; background: none; color: var(--text); font: inherit; font-size: 24px; line-height: 1.16667; letter-spacing: .009em; font-weight: 600; cursor: pointer; }
.cmp-sel select:focus-visible { outline: 2px solid #0071e3; outline-offset: 4px; border-radius: 4px; }
.cmp-sel svg { position: relative; width: 20px; height: 20px; margin: 8px 0 0 -26px; pointer-events: none; }
.cmp-poza { display: grid; place-items: center; padding-top: 18px; }
.cmp-poza img { width: min(240px, 82%); height: auto; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .1)) drop-shadow(0 14px 20px rgb(0 0 0 / .08)); }
.cmp-desc { margin-top: 24px; }
.cmp-fraza { font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; font-weight: 600; text-wrap: balance; }
.cmp-pret { margin-top: 8px; font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; }
.cmp-actiuni { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 22px; }
.cmp-actiuni .link { padding: 0; border: 0; background: none; font-size: 14px; cursor: pointer; }
.cmp-actiuni .link svg { width: 14px; height: 14px; }
.cmp-rand { margin-top: 36px; }
.cmp-rand.primul { margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--linie); }
.cmp-v { font-size: 32px; line-height: 1.125; letter-spacing: .004em; font-weight: 600; font-variant-numeric: tabular-nums; }
.cmp-v.mic { font-size: 19px; line-height: 1.21; }
.cmp-e { margin-top: 6px; font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; color: var(--gri); }
.cmp-g { display: grid; justify-items: center; gap: 8px; margin-bottom: 14px; font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; color: var(--gri); }
.cmp-g svg { width: 32px; height: 32px; color: var(--text); }
.cmp-ingr { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.35; letter-spacing: -.016em; }
.cmp-ingr li::first-letter { text-transform: uppercase; }
.cmp-ingr .comun, .cmp-alergeni .comun { color: var(--gri-2); }
.cmp-alergeni { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; margin: 0; padding: 0; list-style: none; }
.cmp-alergeni li { display: grid; justify-items: center; gap: 4px; width: 64px; font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; }
.cmp-alergeni svg { width: 24px; height: 24px; }
.cmp-nimic { font-size: 15px; line-height: 1.35; color: var(--gri-2); }
.compara-nota { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--linie); font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; color: var(--gri); text-align: center; }
/* pe ecranul telefonului: o placă mică sub confirmare, cu sigla ca pictogramă de aplicație */
.ecran-acasa { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 28px; padding: 16px; border-radius: 16px; background: var(--fond-gri); text-align: left; }
.ecran-acasa > img { width: 52px; height: 52px; border-radius: 12px; box-shadow: 0 0 0 1px rgb(0 0 0 / .06); }
.ecran-titlu { font-size: 15px; line-height: 1.33; letter-spacing: -.016em; font-weight: 600; }
.ecran-text { margin-top: 2px; font-size: 14px; line-height: 1.42859; letter-spacing: -.016em; color: var(--gri); }
.ecran-text .ecran-ic { display: inline-block; width: 16px; height: 16px; margin: 0 2px; vertical-align: -3px; color: #0071e3; }
.ecran-actiuni { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 10px; }
.ecran-actiuni .link { padding: 0; border: 0; background: none; font-size: 14px; cursor: pointer; }
.fisa-compara { justify-self: start; margin-top: 18px; padding: 0; border: 0; background: none; font-size: 14px; cursor: pointer; }
.fisa-compara svg { width: 14px; height: 14px; }
.rez-sus { font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; font-weight: 600; color: var(--gri); }
.rez-poza { position: relative; width: min(300px, 70%); margin: 20px auto 0; }
.rez-poza::before { content: ""; position: absolute; left: 6%; top: 6%; width: 88%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgb(50 34 18 / .3), rgb(50 34 18 / .1) 70%, rgb(50 34 18 / 0)); translate: 8px 16px; filter: blur(12px); }
.rez-poza img { position: relative; display: block; width: 100%; height: auto; }
.rez-nume { margin-top: 22px; font-size: 40px; line-height: 1.1; letter-spacing: 0; font-weight: 600; }
.rez-desc { margin-top: 6px; font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; font-weight: 600; }
/* motivele, ca o listă bifată: o coloană îngustă, centrată, cu textul aliniat la stânga */
.rez-motive { display: grid; gap: 8px; width: fit-content; max-width: 360px; margin: 18px auto 0; padding: 0; list-style: none; text-align: left; }
.rez-motive li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 17px; line-height: 1.47059; letter-spacing: -.022em; color: var(--text); }
.rez-motive svg { width: 20px; height: 20px; margin-top: 3px; color: var(--maro); }
.rez-pret { margin-top: 18px; font-size: 21px; line-height: 1.19048; letter-spacing: .011em; font-weight: 600; font-variant-numeric: tabular-nums; }
.rez-actiuni .link { padding: 0; border: 0; background: none; cursor: pointer; }
.rez-actiuni { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 24px; }
.rez-alte { margin-top: 26px; padding-top: 20px; padding-bottom: 32px; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; font-size: 14px; color: var(--gri); }
.rez-alte button { min-height: 36px; padding: 0 16px; border: 0; border-radius: 980px; background: var(--alb); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; transition: box-shadow .2s ease; }
.rez-alte button:hover { box-shadow: inset 0 0 0 1px var(--gri-2); }
.rez-gol { margin-top: 18px; font-size: 17px; line-height: 1.4; }
.pista-ajutor { font-size: 14px; line-height: 1.28577; letter-spacing: -.016em; color: var(--gri); }
.pista-ajutor .link { font-size: 14px; padding: 0; border: 0; background: none; cursor: pointer; }
.pista-ajutor .link svg { width: 14px; height: 14px; }
@media (max-width: 734px) {
  .alege { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .alege::backdrop { background: var(--fond-gri); }
  .alege-bara { margin: 4px 20px 0; }
  .alege-corp { padding: 28px 20px 0; }
  .alege-intrebare { font-size: 28px; line-height: 1.14286; letter-spacing: .007em; }
  .alege-jos { margin: auto -20px 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); }
  .alege-urmator { width: 100%; }
  .compara-corp { padding: 8px 20px calc(40px + env(safe-area-inset-bottom)); }
  .compara-intrebare { font-size: 28px; line-height: 1.14286; letter-spacing: .007em; }
  .compara-grila { column-gap: 16px; }
  .cmp-sel { top: -8px; }
  .cmp-sel select { font-size: 19px; padding-right: 24px; }
  .cmp-sel svg { width: 18px; height: 18px; margin-left: -22px; }
  .cmp-fraza { font-size: 15px; }
  .cmp-actiuni { flex-direction: column; gap: 12px; }
  .cmp-v { font-size: 24px; line-height: 1.16667; }
  .cmp-ingr { font-size: 14px; }
  .cmp-alergeni { gap: 12px 6px; }
  .cmp-alergeni li { width: 60px; }
  .rez-nume { font-size: 32px; }
  .pista-ajutor { flex-basis: 100%; }
}

/* comanda ca o listă, ca sacoșa de la Apple: un rând pe platou, cu poza, prețul și câte; restul platourilor se adaugă din pastile */
/* „Masa ta, la scară”: o masă văzută de sus, pe un fundal gri, cu fața de masă de la Evenimente, farfurii albe de 27 cm la fiecare
   loc și platourile din comandă la mărimea lor; o riglă de 50 cm în colț. Deasupra, câte locuri are masa, ca un control segmentat. */
.masa-ta-bloc[hidden] { display: none; }
.masa-ta-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.masa-ta-cap .t-eticheta { margin: 0; }
.masa-locuri { display: flex; gap: 2px; padding: 3px; border-radius: 980px; background: var(--fond-gri); }
.masa-locuri-et { align-self: center; padding: 0 6px 0 10px; font-size: 12px; color: var(--gri); }
.masa-locuri button { min-width: 36px; height: 30px; padding: 0 9px; border: 0; border-radius: 980px; background: none; font: inherit; font-size: 13px; line-height: 1; font-weight: 600; letter-spacing: -.01em; color: var(--gri-3); cursor: pointer; font-variant-numeric: tabular-nums; transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
.masa-locuri button[aria-checked="true"] { background: var(--alb); color: var(--text); box-shadow: 0 1px 4px rgb(0 0 0 / .14); }
.masa-locuri button:focus-visible { outline: 2px solid #0071e3; outline-offset: 1px; }
.masa-ta { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: var(--fond-gri); }
.mt-masa { position: absolute; border-radius: 10px; background: #f3efe9 url(foto/fata-de-masa-m.webp) center / cover; box-shadow: 0 1px 3px rgb(50 34 18 / .14), 0 16px 34px rgb(50 34 18 / .16); }
.mt-farfurie { position: absolute; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #fff 0 54%, #f2efea 55% 63%, #fff 64% 100%); box-shadow: 0 1px 2px rgb(50 34 18 / .2), 0 4px 10px rgb(50 34 18 / .1); }
.mt { position: absolute; z-index: 1; translate: -50% -50%; filter: drop-shadow(1px 2px 2px rgb(50 34 18 / .3)) drop-shadow(8px 14px 18px rgb(50 34 18 / .18)); }
.mt img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mt-rigla { position: absolute; left: 14px; bottom: 10px; display: grid; gap: 3px; width: var(--rigla, 20%); font-size: 11px; line-height: 1; letter-spacing: 0; color: var(--gri-3); }
.mt-rigla i { height: 5px; border: 1.5px solid currentColor; border-top: 0; }
.mt-rigla span { white-space: nowrap; }
.masa-ta-nota { margin-top: 10px; font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; color: var(--gri); }
.masa-ta-nota #masa-ta-loc { color: var(--text); font-weight: 600; }
/* mesajul tău: o bulă ca în aplicațiile de mesaje, cu rândurile exact cum pleacă; un rând schimbat se aprinde o clipă */
.mesaj-viu { margin: 0 0 22px; }
.mesaj-viu[hidden] { display: none; }
.mesaj-bula { position: relative; display: grid; gap: 1px; width: fit-content; max-width: min(100%, 420px); margin: 8px 0 0 auto; padding: 10px 14px 12px; border-radius: 18px 18px 6px 18px; background: #e7f5e3; color: #102a12; font-size: 15px; line-height: 1.33; letter-spacing: -.01em; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgb(0 0 0 / .06); }
.mesaj-bula .mr { border-radius: 4px; transition: background-color 1.2s ease; }
.mesaj-bula .mr.nou { background: rgb(52 199 89 / .28); transition: none; }
.mesaj-bula .mr.lipsa { color: #5b6e5c; font-style: italic; }
.mesaj-cui { margin-top: 6px; text-align: right; font-size: 12px; line-height: 1.33337; color: var(--gri); }
.cos { gap: 0; }
.cos-lista { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.cos-rand { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 72px; padding: 12px 0; }
.cos-rand + .cos-rand::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; border-top: 1px solid var(--linie); }
.ultima { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 10px; padding: 14px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--linie); }
.ultima[hidden] { display: none; }
.ultima-poze { display: flex; }
.ultima-poze img { width: 40px; height: 40px; object-fit: contain; border-radius: 50%; background: var(--alb); box-shadow: 0 0 0 2px var(--alb), 0 2px 6px rgb(0 0 0 / .12); }
.ultima-poze img + img { margin-left: -14px; }
.ultima-text { display: grid; gap: 2px; min-width: 0; font-size: 14px; line-height: 1.28577; letter-spacing: -.016em; }
.ultima-text span { color: var(--gri); }
.comanda .ultima .buton { grid-column: auto; }
@media (max-width: 734px) { .ultima { grid-template-columns: auto minmax(0, 1fr); } .comanda .ultima .buton { grid-column: 1 / -1; } }
.cos-invitati { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; line-height: 1.28577; letter-spacing: -.016em; color: var(--gri); }
.cos-invitati[hidden] { display: none; }
.cos-invitati svg { flex: none; width: 20px; height: 20px; color: var(--text); }
.cos-subtotal { color: var(--text); font-weight: 600; }
.cos-gol { padding: 22px 16px; border-radius: 12px; background: var(--fond-gri); color: var(--gri); text-align: center; }
.cos .eroare:not(:empty) { margin-top: 10px; }
.cos-rand img { width: 48px; height: 48px; object-fit: contain; }
.cos-nume { display: grid; gap: 2px; min-width: 0; }
.cos-nume > span { font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cos-nume small { font-size: 14px; line-height: 1.28577; letter-spacing: -.016em; color: var(--gri); font-variant-numeric: tabular-nums; }
.pas-cant.mic { border: 0; border-radius: 980px; background: var(--fond-gri); }
.pas-cant.mic button { width: 44px; height: 44px; border-radius: 50%; }
.pas-cant.mic button svg { width: 18px; height: 18px; }
.pas-cant.mic output { min-width: 26px; font-size: 17px; }
.extra-adauga { display: grid; gap: 10px; margin-top: 20px; }
/* comutatorul de livrare stă lângă câmpul de dată: aceeași înălțime, 52px */
.comanda .segment span { min-height: 48px; }
@media (max-width: 734px) {
  .cos-rand { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 10px 0; }
  .cos-rand img { width: 40px; height: 40px; }
  .cos-rand + .cos-rand::before { left: 52px; }
  .cos-nume > span { white-space: normal; }
  .pas-cant.mic button { width: 40px; }
}
.extra-adauga[hidden] { display: none; }
.extra-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.extra-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 16px 0 10px; border: 0; border-radius: 980px; background: var(--fond-gri); color: var(--text); font-size: 14px; line-height: 1; font-weight: 600; cursor: pointer; transition: box-shadow .2s ease, scale .15s ease; }
.extra-chip svg { width: 16px; height: 16px; color: var(--maro); }
.extra-chip:hover { box-shadow: inset 0 0 0 1px var(--gri-2); }
@media (hover: none) { .extra-chip { min-height: 44px; } }
/* orele, ca zilele de sărbătoare: pastile care se apasă și rămân apăsate */
.ore { display: flex; flex-wrap: wrap; gap: 8px; }
.ora { padding: 0 14px; font-weight: 400; font-variant-numeric: tabular-nums; }
.ora[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--maro); font-weight: 600; }
/* numărul de platouri din comanda salvată, ca insigna sacoșei din bara Apple */
.bara-numar { display: inline-grid; place-items: center; min-width: 16px; height: 16px; margin: 0 -5px 0 -2px; padding: 0 4px; border-radius: 8px; background: var(--alb); color: var(--maro); font-size: 11px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; vertical-align: 1px; }
.extra-chip:active { scale: .97; }
/* ---------- Vizorul fotografiei ---------- */
.vizor { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: #fff; color: var(--text); overflow: hidden; }
.vizor[open] { display: grid; grid-template-rows: 1fr auto; }
.vizor::backdrop { background: transparent; }
.vizor-scena { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; touch-action: none; cursor: zoom-in; user-select: none; -webkit-user-select: none; }
.vizor-scena:focus-visible { outline: 2px solid #0071e3; outline-offset: -4px; }
.vizor-scena.fara-contur:focus-visible { outline: none; }
.vizor.marit .vizor-scena { cursor: zoom-out; }
.vizor-scena img { max-width: none; height: auto; will-change: transform; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .1)) drop-shadow(0 14px 20px rgb(0 0 0 / .08)); -webkit-touch-callout: none; }
.vizor .inchide { position: absolute; top: 20px; right: 20px; }
.vizor-jos { display: grid; justify-items: center; gap: 4px; padding: 16px 20px calc(28px + env(safe-area-inset-bottom)); text-align: center; }
.vizor-nume { font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; font-weight: 600; }
/* fotografiile din galerie: pe negru, ca în Poze; platourile rămân pe alb */
.vizor.foto { background: #000; color: #f5f5f7; }
.vizor.foto .vizor-scena img { filter: none; border-radius: 6px; }
.vizor.foto .vizor-ajutor { color: #a1a1a6; }
.vizor.foto .vizor-nume { max-width: 40em; font-weight: 600; }
.vizor.foto .inchide { background: rgb(255 255 255 / .16); }
.vizor.foto .inchide:hover { background: rgb(255 255 255 / .26); }
.vizor-ajutor { font-size: 14px; line-height: 1.28577; letter-spacing: -.016em; color: var(--gri); transition: opacity .3s ease; }
@media (max-width: 734px) {
  .fisa-mareste .fisa-lupa { right: 20px; bottom: 20px; }
  .fisa-unghi { left: 20px; bottom: 20px; }
  .fisa-ocol .ocol-busola { right: 20px; bottom: 18px; }
  .vizor .inchide { top: calc(10px + env(safe-area-inset-top)); right: 12px; }
}

/* ---------- Zbor: platoul trece din card (sau de pe masă) în fișă și înapoi, ca o carte deschisă din App Store ---------- */
.zbor { display: none; position: fixed; z-index: 10; margin: 0; pointer-events: none; transform-origin: 50% 50%; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .1)) drop-shadow(0 14px 20px rgb(0 0 0 / .08)); }
.zbor.activ { display: block; }
/* când platoul zboară, fișa nu urcă (ținta stă pe loc): îi apar doar fundalul și conținutul, clona rămâne plină */
.fisa.din-card[open] { animation: apare-fond .35s ease both; }
.fisa.din-card[open] > .fisa-corp { animation: apare .35s ease both; }
@keyframes apare { from { opacity: 0; } }
@keyframes apare-fond { from { background-color: rgb(255 255 255 / 0); box-shadow: none; } }
.fisa { transition: background-color .3s ease, box-shadow .3s ease; }
.fisa > .fisa-corp { transition: opacity .3s ease; }
.fisa::backdrop { transition: background-color .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease; }
.fisa.iese { background-color: rgb(255 255 255 / 0); box-shadow: none; }
.fisa.iese > .fisa-corp { opacity: 0; }
.fisa.iese::backdrop { background: rgb(0 0 0 / 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
/* masa de la evenimente: fiecare platou e buton; numele apare la trecerea mouse-ului, ca punctele de pe imaginile Apple */
.m { padding: 0; border: 0; background: none; cursor: pointer; }
.m img { transition: scale .5s cubic-bezier(.16, 1, .3, 1); }
.m-nume { position: absolute; left: 50%; bottom: 8%; display: inline-flex; align-items: center; gap: 2px; padding: 7px 10px 7px 14px; border-radius: 980px; background: rgb(255 255 255 / .9); -webkit-backdrop-filter: saturate(1.8) blur(12px); backdrop-filter: saturate(1.8) blur(12px); box-shadow: 0 6px 18px rgb(50 34 18 / .18); color: var(--text); font-size: 14px; line-height: 1; letter-spacing: -.016em; font-weight: 600; white-space: nowrap; opacity: 0; translate: -50% 8px; scale: .96; transition: opacity .25s ease, translate .35s cubic-bezier(.16, 1, .3, 1), scale .35s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.m-nume svg { width: 14px; height: 14px; }
@media (hover: hover) {
  .m:hover img { scale: 1.03; }
  .m:hover .m-nume { opacity: 1; translate: -50% 0; scale: 1; }
}
.m:focus-visible { outline: none; }
.m:focus-visible .m-nume { opacity: 1; translate: -50% 0; scale: 1; outline: 2px solid #0071e3; outline-offset: 2px; }
.masa-ajutor { margin-top: 14px; font-size: 14px; line-height: 1.28577; letter-spacing: -.016em; color: var(--gri); text-align: center; }
@media (hover: hover) { .masa-ajutor { display: none; } }
/* comanda: titlul cu „Trimite cuiva” alături; comanda primită de la altcineva */
.comanda-cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.comanda-trimite { gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; }
.comanda-trimite[hidden] { display: none; }
.comanda-trimite svg { width: 20px; height: 20px; margin-top: -3px; }
/* lista primită: de unde vine, ce e în ea și (dacă ai deja o comandă) ce e în a ta, apoi cele trei alegeri */
.comanda-primita { display: grid; gap: 14px; padding: 18px; border-radius: 14px; background: #f3ece8; font-size: 15px; line-height: 1.4; }
.comanda-primita[hidden] { display: none; }
.primita-titlu { font-weight: 600; }
.primita-liste { display: grid; gap: 8px; margin: 0; }
.primita-liste > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 12px; border-radius: 10px; background: rgb(255 255 255 / .7); }
.primita-liste dt { font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; color: var(--gri); }
.primita-liste dd { display: flex; align-items: center; gap: 10px; margin: 0; }
.primita-poze { display: flex; flex: none; }
.primita-poze img { width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.primita-poze img + img { margin-left: -8px; }
.primita-actiuni { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.primita-actiuni[hidden] { display: none; }
.primita-actiuni .link { padding: 0; border: 0; background: none; font-size: 14px; cursor: pointer; }
#trimis-calendar { gap: 6px; }
#trimis-calendar svg { width: 18px; height: 18px; margin-top: -2px; }

/* programul, ca la magazinele Apple: punct verde când e deschis, gri când e închis */
.program { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.28577; letter-spacing: -.016em; color: var(--gri); }
.program[hidden] { display: none; }
.program-punct { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #c7c7cc; }
.program.deschis .program-punct { background: #34c759; box-shadow: 0 0 0 3px rgb(52 199 89 / .18); }
.final .program { margin-top: 18px; }
/* confirmarea ofertei, ca cea a comenzii */
.oferta .trimis { grid-column: 1 / -1; }
.oferta-trimite[hidden] { display: none; }
.oferta .trimis-actiuni .link { padding: 0; border: 0; background: none; font-size: 14px; cursor: pointer; }

/* ---------- Sărbătorile ---------- */
/* panglica, după apple.com/mac (măsurată): 16px sus și jos, text 14/20 centrat; cade de sus în .8 s, apoi, după 1,8 s, trece în 1 s din culoarea mărcii în gri */
.panglica { overflow: hidden; }
.panglica-corp { padding: 16px var(--margine); background: var(--fond-gri); color: var(--text); text-align: center; }
.panglica-corp p { max-width: 1000px; margin: 0 auto; font-size: 14px; line-height: 1.42859; letter-spacing: -.016em; }
.panglica .link { font-size: 14px; line-height: 1.42859; letter-spacing: -.016em; margin-left: 3px; }
.panglica .link svg { width: 14px; height: 14px; }
.panglica.intra .panglica-corp { animation: panglica-cade .8s ease-in-out both, panglica-gri 1s ease-in-out 1.8s both; }
.panglica.intra .link { animation: panglica-link 1s ease-in-out 1.8s both; }
@keyframes panglica-cade { from { transform: translateY(-100%); } }
@keyframes panglica-gri { from { background-color: var(--maro); color: #f5f5f7; } }
@keyframes panglica-link { from { color: #f5f5f7; } }
/* numărătoarea: cifra de ieri urcă și lasă locul celei de azi, o singură dată, după ce panglica a căzut */
.numara { font-variant-numeric: tabular-nums; font-weight: 600; }
.numara-rola { display: inline-flex; flex-direction: column; height: 1lh; overflow: hidden; vertical-align: bottom; }
.numara-rola > span { flex: none; height: 1lh; transform: translateY(-100%); }
@media (prefers-reduced-motion: no-preference) {
  .panglica.intra .numara-rola > span { animation: numara-rola .7s cubic-bezier(.32, .72, 0, 1) .95s both; }
}
@keyframes numara-rola { from { transform: translateY(0); } to { transform: translateY(-100%); } }
/* placa de sub platouri: albă pe secțiunea gri, ca plăcile de la Apple; la dreapta, foile de calendar */
.sarbatori { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px 64px; margin-top: 56px; padding: 48px 56px; border-radius: var(--r); background: var(--alb); scroll-margin-top: 72px; }
.sarbatori:focus { outline: none; }
.sarbatori-sus { font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; font-weight: 600; color: var(--maro); }
.sarbatori-titlu { margin-top: 8px; font-size: 32px; line-height: 1.125; letter-spacing: .004em; font-weight: 600; text-wrap: balance; }
.sarbatori-desc { margin-top: 12px; max-width: 440px; font-size: 17px; line-height: 1.47059; letter-spacing: -.022em; color: var(--gri); }
.sarbatori-text .link { margin-top: 16px; }
.sarbatori-zile { display: grid; grid-template-columns: repeat(2, 200px); gap: 32px; margin: 0; padding: 0; list-style: none; }
.zi-sarb { display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; perspective: 600px; }
/* foaia de calendar: banda maro cu luna, ziua mare dedesubt */
.calendar { display: grid; grid-template-rows: auto 1fr; width: 112px; height: 112px; margin-bottom: 14px; overflow: hidden; border-radius: 22px; background: var(--alb); box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 10px 24px rgb(0 0 0 / .08), 0 2px 4px rgb(0 0 0 / .05); }
.cal-luna { padding: 7px 0 6px; background: var(--maro); color: #fff; font-size: 12px; line-height: 1; letter-spacing: .06em; font-weight: 600; text-transform: uppercase; }
.cal-zi { display: grid; place-items: center; font-size: 56px; line-height: 1; letter-spacing: -.02em; font-weight: 300; font-variant-numeric: tabular-nums; color: var(--text); }
.zi-nume { font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; font-weight: 600; }
.zi-termen { font-size: 14px; line-height: 1.28577; letter-spacing: -.016em; color: var(--gri); }
.zi-rest { white-space: nowrap; margin-top: 6px; padding: 4px 10px; border-radius: 980px; background: #f3ece8; color: var(--maro); font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; font-weight: 600; }
.zi-sarb.trecuta .calendar { opacity: .45; filter: grayscale(1); }
/* foaia e buton: se apropie puțin la trecerea mouse-ului, ca plăcile Apple (1,016 în .3 s) */
.zi-sarb-corp { display: grid; justify-items: center; gap: 4px; padding: 8px 8px 12px; border: 0; border-radius: 22px; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; }
div.zi-sarb-corp { cursor: default; }
.zi-sarb-corp .calendar { transition: scale .3s ease; }
@media (hover: hover) { button.zi-sarb-corp:hover .calendar { scale: 1.016; } }
button.zi-sarb-corp:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }
.sarbatori-text button.link { padding: 0; border: 0; background: none; cursor: pointer; }
/* zilele de sărbătoare în formular, sub câmpul de dată */
.data-rapide { display: flex; flex-wrap: wrap; gap: 8px; }
.data-rapide[hidden] { display: none; }
.data-rapida { padding: 0 14px; font-weight: 400; }
.data-rapida[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--maro); font-weight: 600; }
@media (max-width: 1068px) {
  .sarbatori { grid-template-columns: 1fr; padding: 40px; }
  .sarbatori-zile { justify-content: start; }
}
@media (max-width: 734px) {
  .sarbatori { margin-top: 40px; padding: 32px 24px; border-radius: var(--r-mic); }
  .sarbatori-titlu { font-size: 28px; line-height: 1.14286; }
  .sarbatori-zile { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 8px; }
  .calendar { width: 96px; height: 96px; border-radius: 20px; }
  .cal-zi { font-size: 48px; }
}
@media (max-width: 380px) {
  .sarbatori { padding: 28px 18px; }
  .zi-sarb-corp { padding: 6px 2px 10px; }
  .zi-rest { padding: 4px 8px; font-size: 11px; }
}

/* ---------- Mișcare redusă ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js [data-apare] { opacity: 1; transform: none; filter: none; }
}