/* Zen Auto · zen-product.css: pagina de produs în designul nou, A1 „Podeaua” cu efectul Pivot (aprobat de Vlad, 27.10.2026).
   Port din prototip/final: produs.css + produs-r6.css + produs-r9.css + produs-seo.css (clasele cu prefixul z-).
   Proprietar: agentul paginii de produs. Se încarcă doar în zona „product” când $zen.nou, după zen-base.css.

   Diferența față de prototip: geometria scenei (anvelopa, eticheta UE, perechea centrată pe telefon, cazurile fără poze)
   e calculată în CSS, cu unități de container (cqw/cqh pe .z-r6-st), din raportul conturului anvelopei (--r, pus de
   Smarty). Formulele sunt cele din produs-r6.js / produs-r9.js. Deci anvelopa și eticheta stau corect și fără JS, fără
   salt la încărcare; JS-ul (zen-product.js) pune doar watermark-ul mărcii și interacțiunile.
   Atenție la multiply (JPG-ul anvelopei): fără z-index, transform, opacity < 1 sau filter pe .z-r6-st, .z-r9-duo, .z-r6-anv. */

body.z-p-product { background: var(--l); }
.z-produs { position: relative; overflow-x: clip; }
.z-produs [hidden] { display: none !important; }

/* ===================================================================== erou */
.z-pr { position: relative; overflow: hidden; }
.z-m-r9 .z-r6-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(420px, .78fr); gap: clamp(24px, 3.5vw, 88px); height: calc(100svh - var(--hd)); min-height: 660px; max-height: 1000px; align-items: center; }
/* scena: containerul de mărime pentru toată geometria (cqw = lățimea scenei, cqh = înălțimea ei) */
.z-r6-st { position: relative; min-width: 0; height: 100%; max-height: max(660px, calc(100svh - var(--hd))); align-self: start; container-type: size; --r: .7744; }

/* ---------- marca: watermark ton pe ton (zen-product.js îi pune mărimea și poziția după desenul literelor) ---------- */
.z-r9-wm { position: absolute; left: 0; top: 0; white-space: nowrap; font-weight: 800; font-stretch: 62.5%; font-variation-settings: normal; letter-spacing: 0; line-height: 1; color: #e4e9e9; user-select: none; pointer-events: none; visibility: hidden; font-size: 100px; }
.z-r9-wm.z-gata { visibility: visible; }
.z-r9-wm i { display: inline-block; width: 0; height: 0; vertical-align: baseline; }

/* ---------- podeaua: anvelopa și eticheta UE ----------
   --dh  înălțimea podelei; --kw  lățimea maximă a anvelopei (fracție din scenă)
   --th / --tw  înălțimea / lățimea anvelopei: umple podeaua, dar cel mult --kw din lățimea scenei (produs-r6.js, deseneaza)
   --lh / --lw  eticheta: 88% din înălțimea anvelopei (97% pe telefon), centrată pe ea; plafonul: eticheta ieșită în față
                nu trece de scenă (produs-r9.js, aseaza)
   --ov  cât intră eticheta sub banda de rulare (5% din lățimea ei); --dx  cât iese în față la hover / atingere */
.z-r9-duo { position: absolute; left: 0; right: 0; bottom: 12%; height: 63%;
  --dh: 63cqh; --kw: .5; --K: .88; --gol: 40px;
  --umax: calc(var(--u, 99999) * 2px);
  --thn: min(var(--dh), calc(var(--kw) * 100cqw / var(--r)));
  --th: min(var(--thn), var(--umax));
  --s: calc(var(--thn) - var(--th));
  --tw: calc(var(--th) * var(--r));
  --lh: max(80px, min(calc(var(--th) * var(--K)), calc((100cqw - var(--gol) - var(--tw)) / (.6821 * 1.07))));
  --lw: calc(var(--lh) * .6821);
  --ov: calc(var(--lw) * .05);
  /* compoziția rămâne aceeași oricât de mică e poza sursă (Vlad, runda 6): când plafonul de mărire ține anvelopa sub mărimea
     ei din scenă (--s > 0), perechea anvelopă + etichetă se centrează în scenă (pe orizontală și pe verticală, deci față de
     coloana din dreapta), nu rămâne lipită jos-stânga; fără plafon (--s = 0) totul e ca în prototip */
  --pw: calc(var(--tw) - var(--ov) + var(--lw));
  --x0: max(0px, min(calc((100cqw - var(--pw)) / 2), calc(var(--s) * 3)));
  --y0: max(0px, min(calc((100cqh - var(--th)) / 2 - 12cqh), calc(var(--s) * 3)));
  --dx: calc(var(--ov) + max(14px, var(--lw) * .1)); }

.z-r6-anv { position: absolute; left: var(--x0); bottom: var(--y0); width: var(--tw); height: var(--th); }
.z-r6-anv .z-anv { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }   /* decupajul are margini transparente, JPG-ul are masca: nimic tăiat */
.z-r6-anv .z-umbra { position: absolute; left: 50%; bottom: -1.2%; width: 94%; height: 5.5%; margin-left: -47%; background: radial-gradient(closest-side, rgba(10, 16, 16, .36), rgba(10, 16, 16, .12) 55%, transparent); filter: blur(3px); pointer-events: none; }
.z-r6-anv.z-zoom { cursor: zoom-in; border-radius: 8px; }
.z-r6-anv.z-zoom:focus-visible { outline: 2px solid var(--o); outline-offset: 6px; }

/* eticheta oficială: hârtia albă, muchie fină, umbră moale; clic = mărită */
.z-r9-eti { position: absolute; margin: 0; left: calc(var(--x0) + var(--tw) - var(--ov)); bottom: calc(var(--y0) + (var(--th) - var(--lh)) / 2); height: var(--lh); width: var(--lw); }
.z-r6-eti { position: relative; display: block; width: 100%; height: 100%; padding: 0; border-radius: 3px; background: #fff; cursor: zoom-in;
  box-shadow: 0 0 0 1px rgba(10, 16, 16, .08), 0 1px 2px rgba(10, 16, 16, .06), 0 18px 36px -18px rgba(10, 16, 16, .28); }
.z-r6-eti img { width: 100%; height: 100%; object-fit: contain; border-radius: 3px; }
/* legenda de sub etichetă: spune ce e și că se mărește (clicul pe ea deschide tot eticheta) */
.z-r9-eti-c { position: absolute; left: calc(var(--ov) + 2px); top: calc(100% + 14px); display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; line-height: 1; color: var(--m); white-space: nowrap; cursor: zoom-in; }
.z-r9-eti-c svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.z-r9-eti:hover .z-r9-eti-c { color: var(--ink); }

/* poza nu se mărește peste 2 × pixelii ei reali (--u, înălțimea reală a anvelopei în sursă; test client, punctul 22,
   apoi lărgit de la 1,15 × ca perechea să-și păstreze locul în scenă); pe ecranele dense socotim DPR 1,5, ca în prototip */
@media (min-resolution: 1.5dppx) { .z-r9-duo { --umax: calc(var(--u, 99999) * 2px / 1.5); } }

/* ---------- efectul Pivot (runda 11): în repaus eticheta e rotită 14° pe axa verticală, cu muchia din stânga sub anvelopă;
   la hover pe scenă / focus / atingere se rotește spre client, iese de sub anvelopă cu --dx și vine puțin în față;
   anvelopa se retrage cu 3,5% spre podea (transformarea pozei, nu a părinților: multiply rămâne) ---------- */
.z-m-a1 { --fx: .28s cubic-bezier(.22, .7, .25, 1); }
.z-m-a1 .z-r9-eti { transition: translate var(--fx); }
.z-m-a1 .z-r9-eti .z-r6-eti { transition: transform var(--fx), box-shadow var(--fx); will-change: transform; }
.z-m-a1 .z-r9-eti .z-r6-eti::after { content: ""; position: absolute; inset: 0; border-radius: 3px; pointer-events: none; transition: opacity var(--fx);
  background: radial-gradient(42% 62% at 0% 50%, rgba(10, 16, 16, .26), rgba(10, 16, 16, .08) 55%, rgba(10, 16, 16, 0) 100%); }
.z-m-a1 .z-r9-eti::before { content: ""; position: absolute; left: 8%; right: 2%; bottom: -6px; height: 12px; background: radial-gradient(closest-side, rgba(10, 16, 16, .2), transparent); pointer-events: none; transition: opacity var(--fx), transform var(--fx); }
.z-m-a1 .z-r6-anv .z-anv img { transition: transform var(--fx); }
.z-m-a1 .z-r6-anv .z-umbra { transition: transform var(--fx), opacity var(--fx); }
.z-fx-pivot .z-r9-eti .z-r6-eti { transform-origin: 0% 50%; transform: perspective(1100px) rotateY(-14deg) scale(.985);
  box-shadow: 0 0 0 1px rgba(10, 16, 16, .08), 0 1px 2px rgba(10, 16, 16, .06), 10px 16px 30px -18px rgba(10, 16, 16, .3); }
.z-m-a1.z-sep .z-r9-eti, .z-m-a1 .z-r9-eti:has(.z-r6-eti:focus-visible) { translate: var(--dx) 0; }
.z-fx-pivot.z-sep .z-r9-eti .z-r6-eti, .z-fx-pivot .z-r9-eti .z-r6-eti:focus-visible { transform: perspective(1100px) rotateY(0deg) scale(1.02); }
.z-m-a1.z-sep .z-r9-eti .z-r6-eti, .z-m-a1 .z-r9-eti .z-r6-eti:focus-visible { box-shadow: 0 0 0 1px rgba(10, 16, 16, .1), 0 2px 4px rgba(10, 16, 16, .06), 0 30px 54px -22px rgba(10, 16, 16, .38); }
.z-m-a1.z-sep .z-r9-eti .z-r6-eti::after, .z-m-a1 .z-r9-eti .z-r6-eti:focus-visible::after { opacity: 0; }
.z-m-a1.z-sep .z-r9-eti::before { opacity: .6; transform: scaleX(.92); }
.z-m-a1.z-sep .z-r6-anv .z-anv img, .z-m-a1:has(.z-r6-eti:focus-visible) .z-r6-anv .z-anv img { transform: scale(.965); }
.z-m-a1.z-sep .z-r6-anv .z-umbra, .z-m-a1:has(.z-r6-eti:focus-visible) .z-r6-anv .z-umbra { transform: scale(.95); opacity: .85; }
@media (hover: hover) and (pointer: fine) {
  .z-m-a1 .z-r6-st:hover .z-r9-eti { translate: var(--dx) 0; }
  .z-fx-pivot .z-r6-st:hover .z-r9-eti .z-r6-eti { transform: perspective(1100px) rotateY(0deg) scale(1.02); }
  .z-m-a1 .z-r6-st:hover .z-r9-eti .z-r6-eti { box-shadow: 0 0 0 1px rgba(10, 16, 16, .1), 0 2px 4px rgba(10, 16, 16, .06), 0 30px 54px -22px rgba(10, 16, 16, .38); }
  .z-m-a1 .z-r6-st:hover .z-r9-eti .z-r6-eti::after { opacity: 0; }
  .z-m-a1 .z-r6-st:hover .z-r9-eti::before { opacity: .6; transform: scaleX(.92); }
  .z-m-a1 .z-r6-st:hover .z-r6-anv .z-anv img { transform: scale(.965); }
  .z-m-a1 .z-r6-st:hover .z-r6-anv .z-umbra { transform: scale(.95); opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .z-m-a1 .z-r9-eti, .z-m-a1 .z-r9-eti .z-r6-eti, .z-m-a1 .z-r9-eti .z-r6-eti::after, .z-m-a1 .z-r9-eti::before, .z-m-a1 .z-r6-anv .z-anv img, .z-m-a1 .z-r6-anv .z-umbra { transition: none; }
}

/* ---------- (a) fără etichetă: anvelopa singură, centrată, cu fișa EPREL dedesubt ---------- */
.z-fara-eti .z-r9-duo { --x0: calc((100cqw - var(--tw)) / 2); }
.z-r9-eprel { position: absolute; left: 50%; top: calc(100% + 18px); translate: -50% 0; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; line-height: 1; white-space: nowrap; --z-lc: var(--m); --z-hc: var(--ink); }
.z-r9-eprel svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.z-r9-eprel:hover { text-decoration: underline !important; text-underline-offset: 4px; }
/* ---------- (b) fără poza anvelopei: eticheta e obiectul scenei, dreaptă, pe podea, centrată ---------- */
.z-fara-anv .z-r9-duo { --lh: max(80px, min(var(--dh), calc((100cqw - 2 * var(--gol)) / .6821))); }
.z-fara-anv .z-r9-eti { left: calc((100cqw - var(--lw)) / 2); bottom: 0; }
.z-m-a1.z-fara-anv .z-r9-eti .z-r6-eti, .z-m-a1.z-fara-anv.z-sep .z-r9-eti .z-r6-eti { transform: none; }
.z-m-a1.z-fara-anv .z-r9-eti .z-r6-eti::after { display: none; }
.z-m-a1.z-fara-anv .z-r9-eti { translate: none !important; }
.z-m-a1.z-fara-anv .z-r9-eti::before { left: 4%; right: 4%; }
.z-fara-anv .z-r9-eti-c { left: 0; }
@media (hover: hover) and (pointer: fine) {
  .z-m-a1.z-fara-anv .z-r6-st:hover .z-r9-eti .z-r6-eti { transform: translateY(-3px); }
}
/* ---------- (c) nicio poză: dimensiunea, mare, pe podea, în limbajul cifrelor de pe homepage ---------- */
.z-fara-tot .z-r9-duo { bottom: 32%; height: 40%; }
.z-r9-dim { position: absolute; left: 0; bottom: 0; margin: 0; white-space: nowrap; font-family: "Archivo Cifre", var(--f); font-weight: 640; font-variation-settings: "wdth" 112; letter-spacing: -.035em; line-height: .8; color: var(--ink); user-select: none; font-size: min(19cqh, 15cqw); }
.z-r9-dim span { color: var(--m); }
.z-fara-tot .z-r9-eprel { left: 0; translate: none; }

/* ===================================================================== coloana din dreapta */
.z-pr-info { min-width: 0; padding-bottom: 2vh; }
.z-pr-fir { margin: 0 0 18px; }
.z-pr-fir .z-fir li:last-child { min-width: 0; }
.z-pr-fir .z-fir [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-pr-t { margin: 0; font-size: clamp(34px, 3.1vw, 58px); line-height: 1.02; font-weight: 400; letter-spacing: -.03em; font-variation-settings: "wdth" 104; overflow-wrap: anywhere; text-wrap: balance; color: var(--ink); }
.z-pr-t b { font-weight: 720; }
.z-pr-sp { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 18px 0 0; font-size: 17px; color: var(--m); }
.z-pr-sp > span, .z-pr-sp > a { white-space: nowrap; }
.z-pr-dim { font-weight: 600; text-decoration: underline !important; text-decoration-color: var(--l3) !important; text-underline-offset: 5px; text-decoration-thickness: 1px !important; padding: 10px 0; --z-lc: var(--ink); --z-hc: var(--ink); color: var(--ink); }
.z-pr-dim:hover { text-decoration-color: var(--ink) !important; }
.z-pr-rf { color: var(--ink); font-weight: 600; }

/* ---------- eticheta UE mare, citibilă fără clic (ZEN.euMare din prototip): clasele ca săgețile etichetei, indicii traduși ---------- */
.z-eum { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.28fr) minmax(0, 1.08fr) minmax(0, .8fr) minmax(0, .86fr); margin-top: clamp(18px, 3vh, 30px); border-top: 1px solid var(--l2); border-bottom: 1px solid var(--l2); color: var(--ink); }
.z-eum-i { position: relative; display: grid; grid-template-rows: 30px 34px auto; align-items: center; justify-items: start; gap: 6px; padding: 14px 10px 12px 0; min-width: 0; }
.z-eum-i + .z-eum-i { padding-left: 14px; border-left: 1px solid var(--l2); }
.z-eum-p .z-pict { width: 25.5px; height: 30px; display: block; }
.z-eum-k { display: grid; place-items: center start; width: 50px; height: 34px; padding-left: 11px; clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%); font-size: 23px; font-weight: 800; line-height: 1; color: var(--ink); }
.z-eum-k.z-f.z-A { background: var(--fA); } .z-eum-k.z-f.z-B { background: var(--fB); } .z-eum-k.z-f.z-C { background: var(--fC); } .z-eum-k.z-f.z-D { background: var(--fD); } .z-eum-k.z-f.z-E { background: var(--fE); }
.z-eum-k.z-u.z-A { background: var(--uA); color: #fff; } .z-eum-k.z-u.z-B { background: var(--uB); color: #fff; } .z-eum-k.z-u.z-C { background: var(--uC); } .z-eum-k.z-u.z-D { background: var(--uD); } .z-eum-k.z-u.z-E { background: var(--uE); }
.z-eum-db { font-size: 27px; font-weight: 760; letter-spacing: -.02em; line-height: 1; font-variation-settings: "wdth" 104; }
.z-eum-db small { font-size: 14px; font-weight: 600; margin-left: 3px; letter-spacing: 0; }
.z-eum-n { font-size: 30px; font-weight: 640; letter-spacing: -.03em; line-height: 1; font-variation-settings: "wdth" 112; }
.z-eum-x { grid-template-rows: 70px auto; }
.z-eum-x .z-eum-n { align-self: end; padding-bottom: 2px; }
.z-eum-t { font-size: 13.5px; line-height: 1.25; color: var(--m); max-width: 100%; }
.z-eum-pl { display: none; }
.z-eum-abc { display: inline-flex; gap: 1px; margin-left: 4px; font-weight: 600; }
.z-eum-abc i { font-style: normal; color: var(--m2); font-size: 12px; }
.z-eum-abc i.z-on { color: var(--ink); font-weight: 800; font-size: 13.5px; }

/* ---------- prețul, cantitatea, butonul ---------- */
.z-pr-cump { margin-top: clamp(18px, 3vh, 30px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 28px; }
.z-pr-cump > .z-pr-set, .z-pr-cump > .z-pr-form, .z-pr-cump > .z-pr-liv, .z-pr-cump > .z-cons { flex: 1 1 100%; }
.z-pr-pc { display: flex; align-items: center; gap: 18px; min-width: 0; }
.z-pr-p { font-size: clamp(46px, 3.8vw, 64px); color: var(--ink); }
.z-pr-p small { font-size: 16px; }
.z-pr-q { display: flex; flex: 1 1 100%; margin-left: 0; }
.z-pr-set { margin: -6px 0 0; font-size: 14.5px; color: var(--m); text-align: left; }
.z-pr-set a { font-weight: 600; text-decoration: underline !important; text-decoration-color: var(--l3) !important; text-underline-offset: 4px; white-space: nowrap; --z-lc: var(--ink); --z-hc: var(--ink); }
/* „Comandă 1 · 2 · 4 [− n +]”: alegerile rapide subliniate portocaliu (ca selectorul din rezultate), stepperul la dreapta,
   pe aceeași muchie cu butonul de coș (structura și comportamentul: ZEN.Cant din zen-base.js) */
.z-pr .z-cant, .z-produs .z-cant { display: flex; flex-wrap: nowrap; align-items: center; gap: 0; width: 100%; min-width: 0; }
.z-produs .z-cant-l { margin-right: 8px; font-size: 15px; color: var(--m); white-space: nowrap; }
.z-produs .z-cant-rr { display: flex; gap: 0; }
.z-produs .z-cant-r { position: relative; height: 44px; min-width: 44px; padding: 0 8px; border: 0; border-radius: 0; background: none; font-size: 17px; font-weight: 700; color: var(--m2); font-variant-numeric: tabular-nums; transition: color .15s; }
.z-produs .z-cant-r:hover, .z-produs .z-cant-r[aria-pressed="true"] { color: var(--ink); background: none; }
.z-produs .z-cant-r[aria-pressed="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 3px; border-radius: 3px; background: var(--o); }
.z-produs .z-cant .z-cant-s { margin-left: auto; }
/* butonul spune totalul: „Adaugă 4 în coș · 1.849,24 lei”; grafit, text alb, iconița și totalul portocalii (bv2) */
.z-pr-form { margin: 0; }
.z-pr-btn { width: 100%; }
.z-pr-btn svg { width: 22px; height: 22px; }
.z-pr-btn-t { font-weight: 800; font-variation-settings: "wdth" 106; font-variant-numeric: tabular-nums; color: var(--o); }
.z-pr-btn-t::before { content: "·"; margin: 0 12px 0 2px; font-weight: 400; opacity: .55; color: #fff; }
.z-pr-btn.z-ok .z-pr-btn-t { display: none; }
.z-pr-liv { margin: -4px 0 0; font-size: 15px; color: var(--m); text-align: center; }
.z-pr-ieftin { flex: 1 1 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: -10px 0 0; font-size: 15.5px; font-weight: 600; text-decoration: underline !important; text-decoration-color: var(--l3) !important; text-underline-offset: 5px; --z-lc: var(--ink); --z-hc: var(--ink); }
.z-pr-ieftin:hover { text-decoration-color: var(--ink) !important; }
.z-pr-ieftin svg { width: 17px; height: 17px; }

/* ===================================================================== sub erou */
.z-det-t { margin: 0 0 26px; font-size: clamp(26px, 2.2vw, 36px); font-weight: 650; letter-spacing: -.025em; line-height: 1.1; color: var(--ink); }

/* ---------- alternativele ---------- */
.z-alt { border-top: 1px solid var(--l2); }
.z-alt .z-wrap { padding-top: clamp(36px, 6vh, 64px); padding-bottom: clamp(36px, 6vh, 64px); }
.z-alt-t { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 22px; font-size: clamp(26px, 2.2vw, 36px); font-weight: 650; letter-spacing: -.025em; line-height: 1.1; color: var(--ink); }
.z-alt-tot { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 0 2px; font-size: 16px; font-weight: 600; letter-spacing: 0; --z-lc: var(--ink); --z-hc: var(--ink); }
.z-alt-tot svg { width: 18px; height: 18px; transition: transform .15s; }
.z-alt-tot:hover svg { transform: translateX(3px); }
.z-alt-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.z-alt-g[data-n="1"] { grid-template-columns: minmax(0, 460px); justify-content: center; }
.z-alt-g[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 460px)); justify-content: center; }
.z-ac { display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; transition: box-shadow .18s; --z-lc: var(--ink); --z-hc: var(--ink); color: var(--ink); }
.z-ac:hover { box-shadow: 0 18px 44px rgba(10, 16, 16, .1); }
.z-ac:hover .z-ac-m { text-decoration: underline; text-underline-offset: 3px; }
.z-ac-st { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 216px; padding-bottom: 22px; background: #fff; }
.z-ac-st .z-anv { position: relative; z-index: 1; overflow: visible; height: min(172px, calc(220px / var(--r))); aspect-ratio: var(--r); }
.z-ac-st .z-umbra { position: absolute; bottom: 14px; left: 50%; width: 130px; margin-left: -65px; height: 16px; background: radial-gradient(ellipse at center, rgba(10, 16, 16, .22), rgba(10, 16, 16, 0) 70%); }
.z-anv-lipsa { display: grid; place-items: center; width: 120px; height: 150px; border-radius: 12px; background: var(--l); color: var(--m2); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.z-ac-b { display: flex; flex-direction: column; gap: 10px; padding: 14px 20px 20px; flex: 1; }
.z-ac-de { font-size: 14.5px; color: var(--m); }
.z-ac-de b { display: block; font-size: 17px; color: var(--ink); font-weight: 700; letter-spacing: -.01em; margin-bottom: 1px; }
.z-ac-m { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.z-ac-m b { font-weight: 700; }
.z-ac-p { margin-top: auto; padding-top: 4px; font-size: 26px; }

/* ---------- „Ce are în plus” ---------- */
.z-det { border-top: 1px solid var(--l2); }
.z-det-in { padding-top: clamp(48px, 7vh, 90px); padding-bottom: clamp(36px, 5vh, 64px); max-width: var(--max); }
.z-det-x { display: grid; gap: 0; max-width: 920px; align-content: start; }
.z-ex { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--l2); }
.z-ex:last-child { border-bottom: 1px solid var(--l2); }
.z-ex .z-tg { justify-self: start; height: 32px; font-size: 14px; padding: 0 11px; border-color: var(--l3); color: var(--ink); }
.z-tg-c { font-style: normal; font-weight: 800; margin-left: 2px; }
.z-ex p { margin: 0; font-size: 15.5px; color: var(--m); }

/* ---------- blocul SEO ---------- */
.z-seo { border-top: 1px solid var(--l2); }
.z-seo-in { padding-top: clamp(56px, 9vh, 110px); padding-bottom: clamp(48px, 7vh, 90px); }
.z-seo-t { max-width: 26ch; text-wrap: balance; }
.z-seo-cmp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 56px); }
.z-seo-c { padding: 22px 0 6px; border-top: 1px solid var(--l2); color: var(--ink); }
.z-seo-ch { display: flex; align-items: center; gap: 12px; }
.z-seo-ch h3 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
.z-seo-ch > b { margin-left: auto; }
.z-sc-i { display: grid; place-items: center; width: 48px; height: 40px; border-radius: 10px; background: #fff; }
.z-sc-i .z-pict { width: 19px; height: 22px; }
.z-seo-c p { margin: 14px 0 0; font-size: 16px; line-height: 1.5; max-width: 46ch; }
.z-seo-c a, .z-seo-q a { font-weight: 650; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px; white-space: nowrap; --z-lc: var(--ink); --z-hc: var(--ink); }
.z-seo-c a:hover, .z-seo-q a:hover { text-decoration-color: var(--o) !important; text-decoration-thickness: 2px !important; }
.z-seo-k { display: grid; place-items: center start; width: 46px; height: 30px; padding-left: 10px; clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%); font-size: 20px; font-weight: 800; line-height: 1; color: var(--ink); }
.z-seo-k.z-f.z-A { background: var(--fA); } .z-seo-k.z-f.z-B { background: var(--fB); } .z-seo-k.z-f.z-C { background: var(--fC); } .z-seo-k.z-f.z-D { background: var(--fD); } .z-seo-k.z-f.z-E { background: var(--fE); }
.z-seo-k.z-u.z-A { background: var(--uA); color: #fff; } .z-seo-k.z-u.z-B { background: var(--uB); color: #fff; } .z-seo-k.z-u.z-C { background: var(--uC); } .z-seo-k.z-u.z-D { background: var(--uD); } .z-seo-k.z-u.z-E { background: var(--uE); }
.z-seo-db { font-size: 22px; font-weight: 800; font-variation-settings: "wdth" 108; letter-spacing: -.02em; }
.z-seo-db small { font-size: 14px; font-weight: 650; color: var(--m); }
.z-seo-lk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 56px); margin-top: clamp(40px, 6vh, 64px); }
.z-seo-l { padding-top: 20px; border-top: 1px solid var(--l2); }
.z-seo-l h3 { margin: 0 0 6px; font-size: 15px; font-weight: 650; color: var(--m); letter-spacing: 0; }
.z-seo-l li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.z-seo-l a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; text-decoration: underline !important; text-decoration-color: var(--l3) !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px; --z-lc: var(--ink); --z-hc: var(--ink); }
.z-seo-l a:hover { text-decoration-color: var(--o) !important; }
.z-seo-m { flex: none; font-size: 14px; color: var(--m); }
.z-seo-n { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--m); max-width: 44ch; }
.z-seo-faq { margin-top: clamp(56px, 8vh, 96px); }
.z-seo-qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1180px; gap: 0 clamp(24px, 3vw, 56px); }
.z-seo-q { padding: 20px 0 8px; border-top: 1px solid var(--l2); color: var(--ink); }
.z-seo-q h3 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.z-seo-q p { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--m); max-width: 52ch; }
.z-seo-q a { white-space: normal; }

/* ---------- specificațiile: tabel compact, pe coloane pe ecrane mari ---------- */
.z-spec { border-top: 1px solid var(--l2); }
.z-spec .z-wrap { padding-top: clamp(40px, 6vh, 72px); padding-bottom: clamp(56px, 9vh, 110px); }
.z-spec-d > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; list-style: none; cursor: pointer; }
.z-spec-d > summary::-webkit-details-marker { display: none; }
.z-spec-d > summary .z-det-t { margin: 0; }
.z-spec-ch { display: none; }
.z-spec-t { width: 100%; margin-top: 22px; border-collapse: collapse; font-size: 15.5px; color: var(--ink); }
.z-spec-t tbody { display: block; columns: 2; column-gap: clamp(32px, 5vw, 110px); }
.z-spec-t tr { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 11px 0; border-top: 1px solid var(--l2); break-inside: avoid; }
.z-spec-t th { font-weight: 400; color: var(--m); text-align: left; }
.z-spec-t td { font-weight: 600; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.z-spec-t a { text-decoration: underline !important; text-decoration-color: var(--l3) !important; text-underline-offset: 4px; display: inline-flex; gap: 4px; --z-lc: var(--ink); --z-hc: var(--ink); }
.z-ext { display: inline-block; margin-left: 6px; font-size: .9em; text-decoration: none; }
@media (min-width: 761px) { .z-spec-d > summary { pointer-events: none; cursor: default; } }
@media (min-width: 1700px) { .z-spec-t tbody { columns: 3; } }

/* ---------- produsul indisponibil ---------- */
.z-lipsa-in { padding-top: clamp(40px, 8vh, 96px); padding-bottom: clamp(48px, 9vh, 110px); color: var(--ink); }
.z-lipsa-in h1 { margin: 0; max-width: 14em; font-size: clamp(38px, 4.4vw, 76px); line-height: 1.02; font-weight: 600; letter-spacing: -.035em; font-variation-settings: "wdth" 104; }
.z-lipsa-in p { margin: 20px 0 0; font-size: 19px; color: var(--m); }
.z-lipsa-b { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.z-lipsa-b svg { color: var(--o); }

.z-pr-hooks { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }

/* ===================================================================== pozele mărite (galeria: anvelopa și eticheta UE) */
.z-eti { padding: 0; border: 0; border-radius: 18px; background: #fff; color: var(--ink); color-scheme: light; max-width: calc(100vw - 24px); max-height: calc(100svh - 24px); overflow: hidden; box-shadow: 0 30px 90px rgba(0, 0, 0, .35); }
.z-eti::backdrop { background: rgba(10, 16, 16, .74); }
.z-eti-in { --h: min(calc(100svh - 150px), 780px); --px: 30px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px var(--px) 10px; }
.z-eti.z-g-multe .z-eti-in { --px: 78px; }
.z-eti-sc { position: relative; height: var(--h); width: min(calc(var(--h) * var(--r, .682)), calc(100vw - 24px - 2 * var(--px))); overflow: hidden; touch-action: none; cursor: zoom-in; user-select: none; -webkit-user-select: none; }
.z-eti-sc.z-marit { cursor: grab; }
.z-eti-sc.z-marit:active { cursor: grabbing; }
.z-eti-im { position: absolute; inset: 8px; margin: auto; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; -webkit-user-drag: none; will-change: transform; }
/* indiciul că poza se mărește (test client, punctul 21): discret, peste colțul de jos al pozei, dispare după prima mărire */
.z-eti-zi { position: absolute; z-index: 1; left: 50%; bottom: 12px; translate: -50% 0; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 1px var(--l2), 0 4px 14px -6px rgba(10, 16, 16, .25); font-size: 13px; font-weight: 600; color: var(--m); white-space: nowrap; pointer-events: none; transition: opacity .2s; }
.z-eti-zi svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.z-eti-zi-m { display: none; }
@media (hover: none), (pointer: coarse) { .z-eti-zi-d { display: none; } .z-eti-zi-m { display: inline; } }
.z-eti-sc.z-marit .z-eti-zi, .z-eti.z-zi-vazut .z-eti-zi { opacity: 0; }
.z-eti-x { position: absolute; z-index: 2; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--l); color: var(--ink); }
.z-eti-x:hover { background: var(--l2); }
.z-eti-j { display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; width: 100%; min-height: 44px; }
.z-eti:not(.z-g-multe) .z-eti-j { justify-content: center; }
.z-eti:not(.z-g-multe) .z-eti-f, .z-eti:not(.z-g-multe) .z-eti-n { display: none; }
.z-eti-f { display: flex; gap: 2px; }
.z-eti-f button { position: relative; height: 44px; padding: 0 12px; font-size: 15px; font-weight: 600; color: var(--m); white-space: nowrap; }
.z-eti-f button:hover, .z-eti-f button[aria-pressed="true"] { color: var(--ink); }
.z-eti-f button[aria-pressed="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px; border-radius: 3px; background: var(--o); }
.z-eti-a { display: inline-block; line-height: 44px; min-height: 44px; font-size: 16px; font-weight: 600; text-decoration: underline !important; text-decoration-color: var(--l3) !important; text-underline-offset: 5px; text-decoration-thickness: 1px !important; --z-lc: var(--ink); --z-hc: var(--ink); }
.z-eti-a.z-stins { visibility: hidden; }
.z-eti-n { position: absolute; z-index: 2; top: calc(30px + var(--h) / 2 - 24px); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--l); color: var(--ink); transition: background .15s; }
.z-eti-n:hover { background: var(--l2); }
.z-eti-ant { left: 16px; }
.z-eti-urm { right: 16px; }
.z-eti-n svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ===================================================================== bara de jos (telefon) */
.z-pr-bara { display: none; }

/* ===================================================================== produsele care nu sunt anvelope */
.z-ps-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr); gap: clamp(24px, 4vw, 96px); align-items: center; padding-top: clamp(24px, 4vh, 48px); padding-bottom: clamp(40px, 6vh, 72px); }
.z-ps-poza { display: grid; place-items: center; min-height: 360px; }
.z-ps-poza img { width: auto; height: auto; max-width: 100%; max-height: min(70svh, 640px); object-fit: contain; mix-blend-mode: multiply; }
.z-ps-sc { margin-top: 14px; font-size: 16px; color: var(--m); }
.z-ps-nu { margin-top: 20px; font-size: 17px; color: var(--m); }
.z-ps-nu a, .z-simplu .z-pr-liv a { font-weight: 650; --z-lc: var(--ink); --z-hc: var(--ink); }
.z-ps-q { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 15px; color: var(--m); }
.z-ps-q input { width: 72px; height: 44px; border: 1px solid var(--l3); border-radius: 12px; padding: 0 10px; font-size: 17px; }

/* ===================================================================== ecrane medii și joase */
@media (max-width: 1240px) {
  .z-m-r9 .z-r6-in { grid-template-columns: minmax(0, 1fr) minmax(400px, 1fr); }
}
@media (max-width: 1100px) {
  .z-seo-cmp, .z-seo-qs { grid-template-columns: minmax(0, 1fr); }
  .z-seo-lk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .z-seo-c p, .z-seo-q p { max-width: 64ch; }
}
/* tabletă în picioare: eroul ia înălțimea coloanei din dreapta (critica runda 10) */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .z-m-r9 .z-r6-in { height: auto; min-height: 0; max-height: none; padding-top: 40px; padding-bottom: 48px; align-items: stretch; }
  .z-m-r9 .z-r6-st { height: auto; max-height: none; min-height: 520px; align-self: stretch; }
  .z-m-a1 .z-r9-duo { bottom: 8%; }
}
/* ecrane joase (1366 × 768): coloana din dreapta încape în primul ecran, cu „Variante mai ieftine” cu tot */
@media (min-width: 761px) and (max-height: 860px) {
  .z-m-r9 .z-pr-t { font-size: clamp(32px, 2.8vw, 40px); }
  .z-m-r9 .z-pr-sp { margin-top: 10px; }
  .z-m-r9 .z-eum { margin-top: 12px; }
  .z-m-r9 .z-eum-i { padding-top: 10px; padding-bottom: 9px; gap: 5px; }
  .z-m-r9 .z-pr-cump { margin-top: 16px; row-gap: 12px; }
  .z-m-r9 .z-pr-liv { margin-top: -4px; }
  .z-m-r9 .z-pr-ieftin { margin-top: -10px; }
  .z-pr-fir { margin-bottom: 12px; }
}
@media (max-width: 960px) {
  .z-alt-g, .z-alt-g[data-n] { grid-template-columns: 1fr; gap: 10px; }
  .z-ac { flex-direction: row; }
  .z-ac-st { flex: none; width: 132px; height: auto; min-height: 160px; padding: 14px 0 18px; align-items: center; }
  .z-ac-st .z-anv { height: min(124px, calc(96px / var(--r))); }
  .z-ac-st .z-umbra { display: none; }
  .z-anv-lipsa { width: 96px; height: 124px; font-size: 11px; }
  .z-ac-b { padding: 16px 16px 16px 4px; gap: 8px; }
  .z-ac-p { font-size: 22px; }
  .z-ps-in { grid-template-columns: 1fr; }
  .z-ps-poza { min-height: 0; }
  .z-ps-poza img { max-height: 46svh; }
}

/* ===================================================================== telefon: numele, scena, clasele, prețul, cantitatea, butonul */
@media (max-width: 760px) {
  .z-m-r9 .z-r6-in { display: flex; flex-direction: column; align-items: stretch; height: auto; min-height: 0; max-height: none; gap: 0; padding-top: 8px; padding-bottom: 26px; }
  .z-r6 .z-pr-info { display: contents; }
  .z-r6 .z-pr-fir { order: 0; margin: 0 0 4px; }
  .z-pr-fir .z-fir li:last-child { display: none; }
  .z-r6 .z-pr-t { order: 1; font-size: 29px; line-height: 1.06; }
  .z-r6 .z-pr-sp { order: 2; margin-top: 2px; font-size: 15px; gap: 0 11px; }
  .z-pr-dim { padding: 11px 0; }
  .z-r6 .z-r6-st { order: 4; align-self: stretch; max-height: none; }
  .z-r6 .z-eum { order: 5; margin-top: 12px; }
  .z-r6 .z-pr-cump { order: 6; margin-top: 14px; gap: 4px 12px; row-gap: 10px; }

  .z-m-a1 .z-r6-st { height: 262px; margin-top: 0; }
  /* pe telefon eticheta are aproape înălțimea anvelopei (97%), centrată pe ea; perechea e centrată pe ecran */
  .z-m-a1 .z-r9-duo { bottom: 30px; height: 192px; --dh: 192px; --K: .97; --gol: 16px;
    --x0: max(0px, calc((100cqw - var(--tw) + var(--ov) - var(--lw)) / 2)); }
  .z-m-a1.z-fara-eti .z-r9-duo { --x0: calc((100cqw - var(--tw)) / 2); }
  .z-r9-eti-c { top: calc(100% + 9px); font-size: 12.5px; gap: 6px; }
  .z-r9-eti-c svg { width: 13px; height: 13px; }
  .z-r9-eprel { top: calc(100% + 12px); font-size: 12.5px; }
  /* (c) nicio poză: scena se strânge cât dimensiunea și marca de deasupra ei */
  .z-m-a1.z-fara-tot .z-r6-st { height: 176px; }
  .z-m-a1.z-fara-tot .z-r9-duo { bottom: 36px; height: 72px; --dh: 72px; }
  .z-r9-dim { font-size: min(72px, 17cqw); }

  /* eticheta mare: pictograma deasupra clasei, cinci coloane strânse */
  .z-eum { grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, .82fr) minmax(0, .86fr); }
  .z-eum-i { grid-template-rows: 22px 28px auto; gap: 4px; padding: 10px 4px 8px 0; }
  .z-eum-i + .z-eum-i { padding-left: 8px; }
  .z-eum-p .z-pict { width: 19px; height: 22px; }
  .z-eum-k { width: 40px; height: 28px; font-size: 19px; padding-left: 8px; }
  .z-eum-db { font-size: 21px; } .z-eum-db small { font-size: 12px; margin-left: 2px; }
  .z-eum-n { font-size: 24px; }
  .z-eum-x { grid-template-rows: 54px auto; }
  .z-eum-t { font-size: 11.5px; white-space: normal; }
  .z-eum-abc { display: none; }

  .z-pr-pc { gap: 12px; }
  .z-pr-p { font-size: 38px; }
  .z-pr-p small { font-size: 14px; margin-left: 4px; }
  .z-pr-set { margin-top: -2px; font-size: 13.5px; }
  .z-produs .z-cant-l { margin-right: 2px; font-size: 14.5px; }
  .z-produs .z-cant-r { padding: 0 6px; }
  .z-produs .z-cant-r[aria-pressed="true"]::after { left: 11px; right: 11px; }
  .z-produs .z-cant-i { width: 36px; }
  .z-pr-btn { height: 56px; font-size: 16.5px; gap: 10px; padding: 0 18px; margin-top: 8px; }
  .z-pr-btn-t::before { margin: 0 8px 0 0; }
  .z-pr-liv { margin-top: 2px; font-size: 14px; }
  .z-pr-ieftin { margin: -4px 0 0; font-size: 15px; }

  .z-det-in { padding-top: 44px; padding-bottom: 32px; }
  .z-det-t { margin-bottom: 14px; }
  .z-ex { grid-template-columns: 1fr; gap: 8px; }
  .z-ex p { font-size: 14.5px; }
  .z-alt .z-wrap { padding-bottom: 40px; }
  .z-alt-t { font-size: 24px; }
  .z-alt-tot { font-size: 15px; }
  .z-seo-in { padding-top: 44px; padding-bottom: 40px; }
  .z-seo-lk { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 32px; }
  .z-seo-l + .z-seo-l { margin-top: 18px; }
  .z-seo-c { padding-top: 18px; }
  .z-seo-c p, .z-seo-q p { font-size: 15.5px; }
  .z-seo-faq { margin-top: 44px; }
  .z-spec .z-wrap { padding-top: 12px; padding-bottom: 40px; }
  .z-spec-ch { display: block; width: 12px; height: 12px; margin-right: 6px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-3px) rotate(45deg); transition: transform .15s; }
  .z-spec-d[open] .z-spec-ch { transform: translateY(3px) rotate(-135deg); }
  .z-spec-t { margin-top: 8px; font-size: 14.5px; }
  .z-spec-t tbody { columns: 1; }
  .z-lipsa-in p { font-size: 17px; }
  .z-lipsa-b .z-btn { width: 100%; }

  /* galeria pe telefon: poza pe toată lățimea, săgețile jos, lângă file */
  .z-eti-in, .z-eti.z-g-multe .z-eti-in { --px: 12px; --h: min(calc(100svh - 196px), calc((100vw - 48px) / var(--r, .682))); padding: 52px 12px 6px; }
  .z-eti-j { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; justify-items: center; row-gap: 0; }
  .z-eti:not(.z-g-multe) .z-eti-j { display: flex; }
  .z-eti-n { position: static; }
  .z-eti-a { grid-column: 1 / -1; font-size: 15px; }
  .z-eti-f button { padding: 0 10px; font-size: 14.5px; }
  .z-eti-f button[aria-pressed="true"]::after { left: 10px; right: 10px; }

  /* bara de jos: apare cât timp butonul mare nu se vede; spațiul ei e la capătul subsolului */
  .z-pr-bara { display: flex; position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(10, 16, 16, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--linie); color: var(--t); transform: translateY(100%); transition: transform .2s var(--ease); }
  .z-pr-bara.z-on { transform: none; }
  .z-pr-bara-p { font-size: 22px; color: var(--t); }
  .z-pr-bara-p .z-pi { font-size: 22px; }
  .z-pr-bara-p small { display: block; margin: 3px 0 0; font-size: 12.5px; color: var(--t2); }
  .z-pr-bara-btn { height: 50px; padding: 0 20px; font-size: 16px; background: #fff; color: var(--ink); }
  .z-pr-bara-btn svg { width: 20px; height: 20px; color: #c94716; }
  .z-pr-bara-btn.z-ok { background: #fff; border-color: #fff; color: var(--ink); }
  body.z-p-product .z-subsol { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}