/* ==========================================================================
   NEVORA PEPTIDES — "Sticlă de farmacie"

   Acelasi FORMAT ca la brandul-sora (panou fix in stanga + suprafata care
   deruleaza, catalog ca lista densa), fiindca formatul functioneaza. Ce se
   schimba e materialul: aici suprafata E culoarea.

   Patru limbaje, patru materiale:
   · Peptovitalis — hartie calda, verde botanic + auriu, didona, colt 0
   · Peptarin v1  — alb pur, vermillon, grotesc latit, grila tehnica
   · Peptarin v2  — lila deschis, indigo + magenta, forme organice, colturi MARI
   · aici         — verde de sticla DRENAT, os, alama; serif cu contrast mare

   De ce intuneric: ambele magazine-sora sunt luminoase, iar fotografiile
   noastre de flacon au alfa reala. Pe o suprafata adanca, sticla si eticheta
   alba se citesc ca fotografie de studio, nu ca decupaj pe pagina.

   Tipografie pe axa de contrast, nu pe similitudine: Fraunces (serif cu axa
   optica si "wonk", deci titlurile au caracter la corp mare) contra Inter Tight
   (grotesc neutru la text). Spline Sans Mono ramane pentru date.
   ========================================================================== */

:root{
  /* Suprafata E culoarea: verde de sticla farmaceutica, drenat. */
  --surf:   oklch(0.205 0.036 168);
  --surf-2: oklch(0.255 0.040 168);          /* carduri, suprafete ridicate */
  --surf-3: oklch(0.300 0.042 168);

  --deep:   oklch(0.150 0.028 168);          /* panoul din stanga, cel mai adanc */
  --deep-2: oklch(0.228 0.034 168);

  /* Masurat pe --surf: ink 15.2:1, ink-2 10.4:1, ink-3 6.6:1.
     Nimic sub 4.5 pe text de corp — pe fond intunecat, gri "elegant" e
     exact greseala care face pagina de necitit. */
  --ink:   oklch(0.965 0.014 92);            /* os, nu alb pur */
  --ink-2: oklch(0.858 0.016 120);
  --ink-3: oklch(0.712 0.020 140);

  --acc:      oklch(0.765 0.128 74);         /* alama */
  --acc-deep: oklch(0.665 0.122 66);
  --acc-pale: oklch(0.765 0.128 74 / .14);
  --acc-2:    oklch(0.812 0.108 168);        /* verde luminos, secundar */

  --line:   oklch(0.345 0.026 168);
  --line-2: oklch(0.282 0.022 168);

  --f-disp: "Fraunces", "Georgia", serif;
  --f-text: "Inter Tight", -apple-system, "Segoe UI", sans-serif;
  --f-data: "Spline Sans Mono", ui-monospace, Consolas, monospace;

  --rail: 258px;
  --pad: clamp(1.1rem, 3vw, 3rem);

  /* Colturi mai stranse decat la brandul-sora: acolo capsula era gluma casei,
     aici materialul e sticla taiata. */
  --r-s: 6px;
  --r-m: 12px;
  --r-l: 20px;
  --r-full: 999px;

  --z-sticky:100; --z-drawer:210; --z-gate:300;
  --e-out: cubic-bezier(0.25, 1, 0.5, 1);
  --e-conf: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--surf);color:var(--ink-2);
  font-family:var(--f-text);font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-disp);font-weight:700;color:var(--ink);
  line-height:1.0;letter-spacing:-.03em;margin:0;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}

.data,.eyebrow{font-family:var(--f-data);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;font-variant-numeric:tabular-nums}
.eyebrow{color:var(--acc-deep);margin:0 0 1rem}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skip:focus{width:auto;height:auto;clip-path:none;overflow:visible;left:.5rem;top:.5rem;
  z-index:var(--z-gate);background:var(--acc);color:var(--surf);padding:.6rem 1rem;
  border-radius:var(--r-full)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
::selection{background:var(--acc);color:var(--surf)}

/* ==================================================================== SHELL */
.app{min-height:100vh}

.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:var(--z-sticky);
  background:var(--deep);color:oklch(0.90 0.02 168);
  display:flex;flex-direction:column;gap:1.1rem;padding:1.4rem 1.1rem;overflow-y:auto}
.rail__brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
/* Marca, nu o bulina: N-ul cu flaconul decupat. Sta in os, iar contra-forma
   lasa sa se vada panoul prin ea — de asta nu are fundal propriu. */
.rail__logo{position:relative;display:block;width:1.75rem;flex:none;color:var(--ink)}
.rail__logo .mk{display:block;width:100%;height:auto}
.rail__brand:hover .rail__logo{color:var(--acc)}
.rail__word{font-family:var(--f-disp);font-weight:800;font-size:1.18rem;
  letter-spacing:-.02em;color:#fff}

.rail__search input{width:100%;border:0;border-radius:var(--r-full);
  background:oklch(1 0 0 / .10);color:#fff;padding:.62rem 1rem;
  font-family:var(--f-text);font-size:.92rem}
.rail__search input::placeholder{color:oklch(0.80 0.02 168)}
.rail__search input:focus{outline:none;background:oklch(1 0 0 / .16);
  box-shadow:0 0 0 2px var(--acc)}

.rail__nav{display:flex;flex-direction:column;gap:.15rem}
.rail__nav a{display:block;text-decoration:none;padding:.55rem .85rem;
  border-radius:var(--r-s);color:oklch(0.86 0.02 168);font-size:.95rem;
  transition:background .18s var(--e-out),color .18s var(--e-out)}
.rail__nav a:hover{background:oklch(1 0 0 / .09);color:#fff}

.rail__cart{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;width:100%;cursor:pointer;border:0;border-radius:var(--r-full);
  background:var(--acc);color:var(--surf);padding:.72rem 1.1rem;
  font-family:var(--f-text);font-weight:600;font-size:.95rem;
  transition:background .18s var(--e-out),transform .12s var(--e-out)}
.rail__cart:hover{background:var(--acc-deep);color:var(--surf)}
.rail__cart:active{transform:scale(.97)}
/* Butonul e alama LUMINOASA, deci badge-ul alb-translucid pe el dadea 1.5:1.
   Pilula intunecata cu cifra de alama merge in ambele sensuri. */
.rail__count{font-family:var(--f-data);font-size:.72rem;background:var(--surf);
  color:var(--acc);
  border-radius:var(--r-full);min-width:1.7em;padding:.1em .5em;text-align:center}

.rail__foot{border-top:1px solid oklch(1 0 0 / .12);padding-top:.9rem}
.rail__mark{display:block;width:78px;color:var(--acc-2);margin-bottom:.5rem}
.pill-svg{width:100%;height:auto}
.rail__foot p{margin:0;font-family:var(--f-data);font-size:.58rem;line-height:1.75;
  color:oklch(0.74 0.02 168)}

.pane{position:relative;margin-left:var(--rail);min-height:100vh;overflow:hidden}
.pane__bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.pane > main,.pane > .ftr{position:relative;z-index:1}

.bg__blob{position:absolute;display:block;line-height:0}
.blob{width:100%;height:auto}
.bg__blob--1{top:-14vh;right:-12vw;width:min(48vw,620px);color:var(--acc);opacity:.14}
.bg__blob--2{bottom:12vh;left:-10vw;width:min(38vw,480px);color:var(--acc-2);opacity:.16}
/* Trama de tipar, desenata de motorul de stiluri, nu din 1215 cercuri in DOM.
   Doua straturi de gradient care sar cate un rand fiecare = asezarea in
   fagure a originalului; masca reia rarefierea spre margini. Costul de
   asezare al paginii scade de la 12,4 ms la 4,9 ms pe ciclu. */
.bg__dots{position:absolute;top:30vh;left:38vw;width:min(42vw,560px);
  aspect-ratio:1;color:var(--ink);opacity:.10;
  background-image:
    radial-gradient(circle at 50% 50%, currentColor 1.5px, transparent 1.7px),
    radial-gradient(circle at 50% 50%, currentColor 1.5px, transparent 1.7px);
  background-size:16px 27.8px;
  background-position:0 0, 8px 13.9px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 18%, transparent 76%);
          mask-image:radial-gradient(circle at 50% 50%, #000 18%, transparent 76%)}
@media (prefers-reduced-motion:no-preference){
  .bg__blob--1{animation:morph 34s ease-in-out infinite alternate}
  .bg__blob--2{animation:morph 44s ease-in-out infinite alternate-reverse}
  @keyframes morph{from{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
                   to{transform:translate3d(-3%,4%,0) rotate(22deg) scale(1.12)}}
  .bg__dots{animation:dots 60s linear infinite}
  @keyframes dots{to{transform:rotate(360deg)}}
}

/* ==================================================================== BUTOANE */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--f-text);font-weight:600;font-size:.92rem;
  padding:.78rem 1.5rem;border:1px solid transparent;border-radius:var(--r-full);
  text-decoration:none;cursor:pointer;
  transition:background .18s var(--e-out),color .18s var(--e-out),
             border-color .18s var(--e-out),transform .1s var(--e-out)}
.btn:active:not(:disabled){transform:scale(.97)}
/* Pe tema intunecata --ink e aproape alb, deci textul butonului
   nu mai poate fi alb. Inversul suprafetei. */
.btn--primary{background:var(--ink);color:var(--surf)}
.btn--primary:hover:not(:disabled){background:var(--acc)}
.btn--ghost{border-color:var(--line);color:var(--ink);background:var(--surf-2)}
.btn--ghost:hover{border-color:var(--ink);background:var(--surf-2)}
.btn--lg{padding:.95rem 1.9rem;font-size:1rem}
.btn--sm{padding:.44rem .95rem;font-size:.8rem}
.btn--dis{background:var(--surf-3);color:var(--ink-3);cursor:not-allowed}
.btn:disabled{opacity:.4;cursor:not-allowed}
.lnk{font-family:var(--f-data);font-size:.72rem;color:var(--acc-deep);
  text-decoration:none}
.lnk:hover{color:var(--ink)}

/* ==================================================================== CAROSEL */
.reel{padding:clamp(1.4rem,3vw,2.4rem) 0 clamp(1.4rem,3vw,2.4rem)}
.reel__hd{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:0 var(--pad);margin-bottom:1rem}
.reel__hd h2{font-size:clamp(1.4rem,2.6vw,2rem)}
.reel__track{display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.3rem var(--pad) 1rem;scrollbar-width:thin}
/* aceleasi elemente ca in catalog, dar pe orizontala arata a fise verticale */
.reel .row{flex:0 0 clamp(190px,22vw,236px);scroll-snap-align:start;
  display:flex;flex-direction:column;gap:0;padding:0;border:1px solid var(--line);
  border-radius:var(--r-m);background:var(--surf-2);overflow:hidden}
/* Randarile de flacon au fundal propriu (auriu/inchis), deci nu mai sunt
   decupaje: glow-ul din spate nu s-ar vedea, iar padding-ul ar lasa un
   dreptunghi lipit in card. Poza umple capul cardului; fundalul ei e scena. */
.reel .row__ph{padding:0;display:block;overflow:hidden}
.reel .row__ph .shot{display:block;width:100%;height:auto;aspect-ratio:4/5;
  object-fit:cover}
.reel .row__id{padding:.7rem .9rem 0}
.reel .row__name{font-size:1.05rem}
.reel .row__cat{display:block;font-family:var(--f-data);font-size:.56rem;
  color:oklch(0.80 0.13 var(--h));margin-top:.2rem}
.reel .row__d{padding:.35rem .9rem 0;font-family:var(--f-data);font-size:.6rem;
  color:var(--ink-3)}
.reel .row__f{display:none}
.reel .row__p{padding:.5rem .9rem 0;font-family:var(--f-disp);font-weight:700;
  font-size:1.1rem;color:var(--ink)}
.reel .row__a{padding:.6rem .9rem 1rem}
.reel .row__a .btn{width:100%}

/* ==================================================================== FAMILII */
.fam{padding:clamp(1.4rem,3vw,2.4rem) var(--pad)}
.fam__hd h2{font-size:clamp(1.4rem,2.6vw,2rem);margin-bottom:1rem}
.fam__list{display:flex;flex-direction:column;gap:.4rem}
.fam__i{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:1rem;
  padding:.95rem 1.2rem;border-radius:var(--r-m);background:var(--surf-2);
  border:1px solid var(--line);text-decoration:none;
  transition:background .2s var(--e-out),transform .2s var(--e-out),
             border-color .2s var(--e-out)}
.fam__i:hover{background:oklch(0.70 0.17 var(--h) / .12);transform:translateX(4px);
  border-color:oklch(0.70 0.17 var(--h) / .5)}
.fam__nume{font-family:var(--f-disp);font-weight:700;font-size:1.08rem;color:var(--ink)}
.fam__n{font-family:var(--f-data);font-size:.72rem;color:oklch(0.80 0.13 var(--h));
  background:oklch(0.70 0.17 var(--h) / .16);border-radius:var(--r-full);
  padding:.15rem .6rem}
.fam__go{font-size:1.1rem;color:var(--ink-3)}
.fam__i:hover .fam__go{color:oklch(0.80 0.13 var(--h))}

/* ==================================================================== CLAIM */
.claim{position:relative;margin:clamp(1.4rem,3vw,2.4rem) var(--pad)
  clamp(2rem,4vw,3rem);padding:clamp(1.8rem,4vw,3rem);border-radius:var(--r-l);
  background:var(--deep);color:oklch(0.90 0.02 168);overflow:hidden}
.claim__dots{position:absolute;top:-20%;right:-8%;width:min(40%,340px);
  color:var(--acc);opacity:.30;pointer-events:none}
.claim__txt{position:relative;max-width:60ch}
.claim h2{color:#fff;font-size:clamp(1.5rem,3vw,2.3rem);margin-bottom:.9rem}
.claim p{color:oklch(0.88 0.02 168)}
.claim__note{font-size:.85rem;color:oklch(0.78 0.02 168);margin:1.2rem 0}
.claim__note a{color:var(--acc-2)}
.claim .btn--primary{background:var(--acc)}
.claim .btn--primary:hover{background:#fff;color:var(--deep)}

/* ==================================================================== CATALOG */
.cat{padding:clamp(1.8rem,4vw,3rem) var(--pad) 3rem}
.cat__hd{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.cat__hd h1{font-size:clamp(2rem,4.4vw,3rem);font-weight:800;letter-spacing:-.04em}
.cat__n{margin:0;font-family:var(--f-data);font-size:.72rem;color:var(--ink-3)}
.cat__n b{color:var(--acc-deep)}

.cat__tools{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.9rem}
.cat__search{flex:1 1 260px}
.cat__tools input,.cat__tools select{width:100%;font-family:var(--f-text);font-size:.94rem;
  padding:.62rem 1rem;border:1px solid var(--line);border-radius:var(--r-full);
  background:var(--surf-2);color:var(--ink)}
.cat__sort{flex:0 1 190px}
.cat__tools input:focus,.cat__tools select:focus{outline:none;border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc-pale)}

.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.8rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  padding:.4rem .85rem;border-radius:var(--r-full);border:1px solid var(--line);
  background:var(--surf-2);font-size:.86rem;color:var(--ink-2);
  transition:all .18s var(--e-out)}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip:hover{border-color:oklch(0.70 0.17 var(--h) / .6)}
.chip:has(input:checked){background:oklch(0.70 0.17 var(--h) / .16);
  border-color:oklch(0.62 0.17 var(--h));color:oklch(0.38 0.14 var(--h))}
.chip__n{font-family:var(--f-data);font-size:.66rem;color:var(--ink-3)}
.chip:has(input:checked) .chip__n{color:oklch(0.80 0.13 var(--h))}

.cat__range{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  font-family:var(--f-data);font-size:.68rem;color:var(--ink-3);margin-bottom:1.4rem}
.cat__range input[type=number]{width:88px;font-family:var(--f-data);font-size:.8rem;
  padding:.4rem .6rem;border:1px solid var(--line);border-radius:var(--r-full);
  background:var(--surf-2);color:var(--ink)}
.cat__stoc{display:inline-flex;align-items:center;gap:.4rem;margin-left:.6rem;
  cursor:pointer}
.cat__stoc input{accent-color:var(--acc);width:1rem;height:1rem}

/* --- lista de produse: randuri, nu cutii */
.list{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;
  background:var(--surf-2)}
.list__hd{display:grid;grid-template-columns:64px minmax(0,1.5fr) 96px minmax(0,1fr) 108px 116px;
  gap:1rem;align-items:center;padding:.7rem 1.1rem;background:var(--surf-3);
  font-family:var(--f-data);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:1px solid var(--line)}
.grid--shop{display:block}
.row{display:grid;grid-template-columns:64px minmax(0,1.5fr) 96px minmax(0,1fr) 108px 116px;
  gap:1rem;align-items:center;padding:.6rem 1.1rem;
  border-bottom:1px solid var(--line-2);position:relative;
  transition:background .18s var(--e-out)}
.row:last-child{border-bottom:0}
.row:hover{background:oklch(0.70 0.17 var(--h) / .07)}
.row__ph{display:grid;place-items:center}
.row__ph .shot{height:56px;width:auto;border-radius:var(--r-s);
  transition:transform .3s var(--e-out)}
.row:hover .shot{transform:scale(1.06)}
.row__name{font-family:var(--f-disp);font-weight:700;font-size:1.02rem;
  letter-spacing:-.02em;line-height:1.15}
.row__name a{text-decoration:none}
.row__name a::after{content:"";position:absolute;inset:0;z-index:1}
.row__cat{display:block;font-family:var(--f-data);font-size:.58rem;
  color:oklch(0.80 0.13 var(--h));margin-top:.15rem}
.row__d,.row__f{font-family:var(--f-data);font-size:.72rem;color:var(--ink-3)}
.row__p{font-family:var(--f-disp);font-weight:700;font-size:1.05rem;color:var(--ink)}
.row__a{position:relative;z-index:2;justify-self:end}
.row.out{opacity:0;transform:scale(.98);pointer-events:none}
.empty{padding:2.4rem 1rem;text-align:center;color:var(--ink-3);
  font-family:var(--f-data);font-size:.72rem}
.catnav{display:none}

/* ==================================================================== PRODUS */
.pdp__blob{position:absolute;top:2vh;right:-6vw;width:min(30vw,380px);color:var(--acc);
  opacity:.13;pointer-events:none;z-index:0}
.pdp{position:relative;z-index:1;padding:clamp(1.4rem,3vw,2.4rem) var(--pad) 3rem;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1.6rem,4vw,3.4rem);align-items:start}
.crumbs{font-family:var(--f-data);font-size:.64rem;color:var(--ink-3);margin-bottom:1.2rem}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--acc-deep)}
.pshow{position:sticky;top:1.4rem;margin:0;border-radius:var(--r-l);overflow:hidden;
  background:var(--surf-2);border:1px solid var(--line)}
.pshow__frame{display:block;padding:0;overflow:hidden;background:var(--deep)}
.shot--hero{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  transform-origin:50% 60%}
@media (prefers-reduced-motion:no-preference){
  /* plutirea pe verticala ar scoate marginile pozei din rama; o apropiere
     lenta pastreaza viata fara sa dezveleasca nimic */
  .shot--hero{animation:float 14s ease-in-out infinite alternate}
  @keyframes float{from{transform:scale(1)}to{transform:scale(1.045)}}
}
.pshow__strip{border-top:1px solid var(--line);padding:.85rem 1.1rem}
.pshow__cap{margin:0;font-family:var(--f-data);font-size:.62rem;color:var(--ink-3);
  line-height:1.7}

.pdp h1{font-size:clamp(2rem,4.4vw,3.1rem);font-weight:800;letter-spacing:-.04em;
  margin-bottom:.6rem}
.pdp__sum{font-size:1.04rem;color:var(--ink-2);margin-bottom:1.5rem}
.pdp__label{font-family:var(--f-data);font-size:.64rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--acc-deep);margin:1.9rem 0 .8rem}

.vrow{display:grid;grid-template-columns:auto 1fr auto auto;gap:.9rem;align-items:center;
  cursor:pointer;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--surf-2);padding:.8rem 1.1rem;margin-bottom:.5rem;
  transition:border-color .18s var(--e-out),background .18s var(--e-out)}
.vrow:hover{border-color:var(--ink-3)}
.vrow:has(input:checked){border-color:var(--acc);background:var(--acc-pale)}
.vrow--out{opacity:.42;cursor:not-allowed}
.vrow input{accent-color:var(--acc);width:1rem;height:1rem}
.vrow__doza,.vrow__pret{font-family:var(--f-disp);font-weight:700;font-size:1.06rem;
  color:var(--ink)}
.vrow__lot,.vrow__stoc{font-family:var(--f-data);font-size:.6rem;color:var(--ink-3)}

.buybar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:1.4rem 0}
.buybar__price{font-family:var(--f-disp);font-weight:800;letter-spacing:-.04em;
  font-size:clamp(1.9rem,3.6vw,2.6rem);color:var(--ink);line-height:1}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);
  border-radius:var(--r-full);background:var(--surf-2);overflow:hidden}
.qty button{width:2.4rem;height:2.7rem;border:0;background:none;cursor:pointer;
  font-size:1rem;color:var(--ink-2)}
.qty button:hover{background:var(--acc-pale);color:var(--acc-deep)}
.qty input{width:2.6rem;height:2.7rem;border:0;text-align:center;background:none;
  font-family:var(--f-disp);font-weight:700;font-size:1.05rem;color:var(--ink);
  -moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}

.buyinfo{list-style:none;margin:0 0 1.4rem;padding:1rem 1.2rem;border-radius:var(--r-m);
  background:var(--surf-2);border:1px solid var(--line)}
.buyinfo li{position:relative;padding-left:1.35rem;margin-bottom:.5rem;font-size:.92rem;
  color:var(--ink-2)}
.buyinfo li:last-child{margin-bottom:0}
.buyinfo b{position:absolute;left:0;top:.45em;width:.5rem;height:.5rem;
  border-radius:var(--r-full);background:var(--acc)}
.buyinfo li:nth-child(2) b{background:var(--acc-2)}
.buyinfo li:nth-child(3) b{background:var(--ink-3)}

.addon{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;
  padding:.85rem 1.1rem;margin:0 0 1.5rem;border-radius:var(--r-m);
  border:1px dashed var(--acc);background:var(--acc-pale)}
.addon__img{height:62px;width:auto}
/* --acc-deep pica la 4.48:1 pe suprafata fisei, adica exact sub prag la
   9px. Alama plina, nu cea adancita. */
.addon__k{margin:0 0 .15rem;font-family:var(--f-data);font-size:.58rem;
  color:var(--acc)}
.addon__n{margin:0 0 .1rem;font-family:var(--f-disp);font-weight:700;font-size:1.02rem;
  color:var(--ink)}
.addon__d{margin:0;font-size:.84rem;color:var(--ink-3)}
.addon__buy{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem}
.addon__p{font-family:var(--f-disp);font-weight:700;font-size:1.02rem}


.spec{width:100%;border-collapse:collapse;margin:0 0 1.6rem}
.spec th,.spec td{text-align:left;padding:.65rem .2rem;
  border-bottom:1px solid var(--line-2);vertical-align:top}
.spec th{font-family:var(--f-data);font-size:.6rem;color:var(--ink-3);width:36%;
  font-weight:400}
.spec td{font-family:var(--f-data);font-size:.75rem;color:var(--ink-2);
  word-break:break-word;line-height:1.7}

.warnbox{border-radius:var(--r-m);border:1px solid var(--acc);background:var(--acc-pale);
  padding:1rem 1.2rem;margin:1.5rem 0;font-size:.92rem;color:var(--ink)}
.warnbox strong{display:block;margin-bottom:.3rem;font-family:var(--f-data);
  font-size:.62rem;color:var(--acc-deep)}

/* ==================================================================== PROZĂ */
.prose{max-width:70ch;margin-inline:auto;padding:clamp(1.8rem,4vw,3rem) var(--pad)}
article.prose{background:var(--surf-2);border:1px solid var(--line);
  border-radius:var(--r-l);margin-block:clamp(1.2rem,3vw,2.2rem)}
.prose h1{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:800;letter-spacing:-.04em;
  margin-bottom:.5rem}
.prose .updated{display:block;font-family:var(--f-data);font-size:.62rem;
  color:var(--ink-3);padding-bottom:1rem;margin-bottom:1.9rem;
  border-bottom:1px solid var(--line)}
.prose h2{font-size:1.28rem;margin:2.2rem 0 .7rem}
.prose h3{font-family:var(--f-text);font-size:1.02rem;font-weight:600;margin:1.4rem 0 .5rem;
  letter-spacing:0}
.prose ul,.prose ol{padding-left:1.3rem;margin:0 0 1em}
.prose li{margin-bottom:.45rem}
.prose a{color:var(--acc-deep);text-decoration:none;border-bottom:1px solid currentColor}
.prose table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.9rem}
.prose th,.prose td{border:1px solid var(--line);padding:.6rem .75rem;text-align:left;
  vertical-align:top}
.prose th{background:var(--surf-3);font-family:var(--f-data);font-size:.6rem;
  color:var(--ink-3);font-weight:400}
.prose code{font-family:var(--f-data);font-size:.84em;background:var(--surf-3);
  padding:.1em .35em;border-radius:5px}
.prose .callout{border-radius:var(--r-m);background:var(--surf);border:1px solid var(--line);
  padding:1.1rem 1.25rem;margin:1.5rem 0}
.prose .callout::before{content:"NOTĂ";display:block;font-family:var(--f-data);
  font-size:.58rem;color:var(--acc-deep);margin-bottom:.45rem}
.prose .todo{border-radius:var(--r-m);border:1px dashed var(--acc);
  background:var(--acc-pale);padding:1.1rem 1.25rem;margin:1.5rem 0;font-size:.9rem;
  color:var(--ink)}

/* ==================================================================== POARTĂ */
.gate{position:fixed;inset:0;z-index:var(--z-gate);display:grid;place-items:center;
  padding:1rem;overflow:auto;background:oklch(0.215 0.055 168 / .90);
  backdrop-filter:blur(8px)}
.gate[hidden]{display:none}
.gate__panel{position:relative;width:100%;max-width:600px;background:var(--surf-2);
  border-radius:var(--r-l);overflow:hidden;animation:rise .45s var(--e-conf) both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.gate__blob{position:absolute;top:-30%;right:-18%;width:62%;color:var(--acc);
  opacity:.16;pointer-events:none}
.gate__body{position:relative;padding:clamp(1.5rem,4vw,2.4rem)}
.gate__brand{display:flex;align-items:center;gap:.5rem;margin:0 0 1.2rem;
  font-family:var(--f-disp);font-weight:800;color:var(--ink)}
.gate__body h2{font-size:clamp(1.6rem,3.6vw,2.2rem);font-weight:800;
  letter-spacing:-.04em;margin-bottom:.7rem}
.gate__lead{color:var(--ink-2);font-size:.98rem}
.gate__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.3rem}
.gate__fine{margin:1rem 0 0;font-family:var(--f-data);font-size:.6rem;color:var(--ink-3)}
.check{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--surf);
  padding:.8rem .95rem;margin-bottom:.5rem;cursor:pointer;font-size:.93rem;
  line-height:1.5;color:var(--ink-2);transition:all .18s var(--e-out)}
.check:has(input:checked){border-color:var(--acc);background:var(--acc-pale);color:var(--ink)}
.check--tight{font-size:.84rem;padding:.7rem .8rem;margin:.8rem 0}
.check input{width:1.05rem;height:1.05rem;margin:.18rem 0 0;accent-color:var(--acc)}

/* ==================================================================== COȘ */
.drawer{position:fixed;inset:0;z-index:var(--z-drawer)}
.drawer[hidden]{display:none}
.drawer__scrim{position:absolute;inset:0;background:oklch(0.215 0.055 168 / .5);
  animation:fade .25s var(--e-out) both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.drawer__panel{position:absolute;right:0;top:0;bottom:0;width:min(420px,100%);
  display:flex;flex-direction:column;background:var(--surf-2);
  border-radius:var(--r-l) 0 0 var(--r-l);overflow:hidden;
  animation:slide .4s var(--e-conf) both}
@keyframes slide{from{transform:translateX(100%)}to{transform:none}}
.drawer__bar{display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 1.2rem;background:var(--deep);color:#fff}
.drawer__bar span{font-family:var(--f-disp);font-weight:800;font-size:1.05rem}
.drawer__x{background:none;border:0;color:#fff;font-size:1.6rem;line-height:1;
  cursor:pointer;padding:0 .2rem}
.drawer__items{flex:1;overflow-y:auto;padding:.5rem 1.2rem}
.drawer__empty{font-family:var(--f-data);font-size:.7rem;color:var(--ink-3);
  text-align:center;padding:3rem 1rem}
.citem{display:grid;grid-template-columns:1fr auto;gap:.35rem .8rem;padding:.9rem 0;
  border-bottom:1px solid var(--line-2)}
.citem__name{font-family:var(--f-disp);font-weight:700;font-size:1.02rem;color:var(--ink)}
.citem__pret{font-family:var(--f-disp);font-weight:700;font-size:1rem;align-self:center}
.citem__meta{grid-column:1/-1;font-family:var(--f-data);font-size:.58rem;color:var(--ink-3)}
.citem__qty{display:flex;align-items:center;gap:.45rem;grid-column:1}
.citem__qty button{width:1.8rem;height:1.8rem;border:1px solid var(--line);
  border-radius:var(--r-full);background:var(--surf);color:var(--ink-2);cursor:pointer}
.citem__qty button:hover{border-color:var(--acc);color:var(--acc-deep)}
.citem__qty span{font-family:var(--f-data);font-size:.78rem;min-width:1.4rem;
  text-align:center}
.citem__rm{background:none;border:0;color:var(--ink-3);cursor:pointer;padding:0;
  font-family:var(--f-data);font-size:.56rem;text-decoration:underline}
.drawer__foot{border-top:1px solid var(--line);padding:1.1rem;background:var(--surf)}
.drawer__line{display:flex;justify-content:space-between;gap:1rem;padding:.25rem 0;
  font-family:var(--f-data);font-size:.7rem;color:var(--ink-2)}
.drawer__line--muted{color:var(--ink-3)}
.drawer__line--total{border-top:1px solid var(--line);margin-top:.45rem;padding-top:.7rem;
  align-items:baseline}
.drawer__line--total strong{font-family:var(--f-disp);font-size:1.4rem;color:var(--ink)}
.progress{margin:.6rem 0 0}
.progress__bar{height:6px;background:var(--surf-3);border-radius:var(--r-full);
  overflow:hidden}
.progress__bar i{display:block;height:100%;width:100%;background:var(--acc);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--e-out)}
.progress__t{margin:.35rem 0 0;font-family:var(--f-data);font-size:.58rem;
  color:var(--acc-deep)}
.drawer__note{margin:.7rem 0 0;text-align:center;color:var(--ink-3);
  font-family:var(--f-data);font-size:.58rem;line-height:1.6}

/* ==================================================================== FOOTER */
.ftr{margin:0 var(--pad) var(--pad);border-radius:var(--r-l);background:var(--surf-2);
  border:1px solid var(--line);overflow:hidden}
.ftr__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(1.6rem,3.4vw,2.6rem) clamp(1.4rem,3vw,2.4rem) 0}
.ftr__big{margin:0;font-family:var(--f-disp);font-weight:800;letter-spacing:-.04em;
  font-size:clamp(1.5rem,3.4vw,2.6rem);color:var(--ink);line-height:1.02}
.ftr__arcs{width:clamp(80px,10vw,132px);color:var(--acc);flex:none}
.arcs{width:100%;height:auto}
@media (prefers-reduced-motion:no-preference){
  .ftr__arcs{animation:dots 70s linear infinite}
}
.ftr__grid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  padding:clamp(1.6rem,3vw,2.4rem) clamp(1.4rem,3vw,2.4rem)}
.ftr__col h2{font-family:var(--f-data);font-size:.62rem;color:var(--acc-deep);
  font-weight:400;margin-bottom:.8rem;letter-spacing:.05em;text-transform:uppercase}
.ftr__col ul{list-style:none;margin:0;padding:0}
.ftr__col li{margin-bottom:.45rem}
.ftr__col a{font-size:.93rem;text-decoration:none;color:var(--ink-2)}
.ftr__col a:hover{color:var(--acc-deep)}
.ftr__legal{border-top:1px solid var(--line);padding:1.2rem clamp(1.4rem,3vw,2.4rem);
  display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;align-items:center;
  justify-content:space-between}
.ftr__legal .data{color:var(--ink-3);margin:0;flex:1 1 380px;line-height:1.9;
  font-size:.58rem;text-transform:none;letter-spacing:.01em}
.ftr__anpc{display:flex;gap:.5rem;margin:0}
.ftr__anpc a{font-family:var(--f-data);font-size:.58rem;color:var(--ink-3);
  text-decoration:none;border:1px solid var(--line);border-radius:var(--r-full);
  padding:.28rem .7rem}
.ftr__anpc a:hover{border-color:var(--acc);color:var(--acc-deep)}
.ftr__copy{font-family:var(--f-data);font-size:.58rem;color:var(--ink-3);margin:0}

/* --- Marca in poarta si in subsol ---------------------------------------- */
.gate__logo{display:block;width:1.6rem;flex:none;color:var(--acc)}
.gate__logo .mk{display:block;width:100%;height:auto}
.ftr__logo{width:clamp(88px,9vw,112px);height:auto;flex:none;opacity:.9}

.field{margin-bottom:1rem}
.field label{display:block;font-family:var(--f-data);font-size:.6rem;color:var(--ink-3);
  margin-bottom:.35rem}
.field input,.field textarea{width:100%;font-family:var(--f-text);font-size:1rem;
  padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--surf-2);color:var(--ink)}

/* ==================================================================== MIȘCARE */
.fly{position:fixed;z-index:400;pointer-events:none;will-change:transform,opacity}
.rail__count{transition:transform .18s var(--e-conf)}
.rail__count.pop{animation:pop .4s var(--e-conf)}
@keyframes pop{0%{transform:scale(1)}32%{transform:scale(1.5)}100%{transform:scale(1)}}
.rail__cart.lit{background:var(--acc-2);color:var(--deep)}
@media (prefers-reduced-motion:no-preference){
  .op > *{animation:rise-in .5s var(--e-conf) both;
    animation-delay:calc(var(--i,0) * 70ms)}
  @keyframes rise-in{from{transform:translateY(14px)}to{transform:none}}
  .grid .row{animation:row-in .4s var(--e-out) both;
    animation-delay:calc(min(var(--i,0),12) * 26ms)}
  @keyframes row-in{from{transform:translateX(-10px)}to{transform:none}}
}

/* ==================================================================== RESPONSIVE */
@media (max-width:1160px){
  .op{grid-template-columns:1fr}
  .pdp{grid-template-columns:1fr}
  .pshow{position:static}
}
@media (max-width:1000px){
  .list__hd{display:none}
  .row{grid-template-columns:52px minmax(0,1fr) auto;
    grid-template-areas:"ph id p" "ph d a";row-gap:.3rem;padding:.8rem 1rem}
  .row__ph{grid-area:ph}
  .row__id{grid-area:id}
  .row__d{grid-area:d}
  .row__p{grid-area:p;justify-self:end}
  .row__a{grid-area:a;justify-self:end}
  .row__f{display:none}
  .row__ph .shot{height:48px}
}
@media (max-width:860px){
  :root{--rail:0px}
  .rail{position:static;width:auto;flex-direction:row;flex-wrap:wrap;
    align-items:center;gap:.7rem;padding:.8rem var(--pad);border-radius:0}
  .rail__search{flex:1 1 180px;order:4}
  .rail__nav{flex-direction:row;flex-wrap:wrap;order:5;width:100%;gap:.3rem}
  .rail__nav a{padding:.4rem .7rem;font-size:.86rem}
  .rail__cart{margin:0;width:auto;order:3}
  .rail__foot{display:none}
  .pane{margin-left:0}
}
@media (max-width:560px){
  .cat__range{font-size:.62rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important}
  .fly{display:none}
}
@media print{
  .rail,.drawer,.gate,.pane__bg,.ftr__grid{display:none}
  .pane{margin-left:0}
  body{background:#fff}
}

/* ==========================================================================
   AMPLIFICARE
   Scala extrema si culoare asumata, nu efecte in plus. Un singur moment
   dominant (deschiderea drenata in culoare), restul il sustine.
   ========================================================================== */

/* Aici a stat un al doilea strat de granulatie, fix peste continut, in
   `multiply`. Doua motive pentru care a plecat: pe fond intunecat multiply
   nu produce aproape nimic (vezi nota de la .grain, care de asta e in
   `screen`), iar un strat cu amestec de culoare, fix peste continut care se
   deruleaza, obliga la recompunerea intregii ferestre la fiecare cadru.
   Granulatia ramane, o data, din .grain. */

.tagline{font-family:var(--f-data);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 1.4rem;
  /* magenta plin da doar 3.7:1 pe indigo; varianta deschisa trece pragul */
  color:oklch(0.78 0.16 74)}
.tagline--light{color:var(--acc-2)}

/* --- deschiderea: culoare pe toata suprafata, tip la scara maxima */
.blast{position:relative;isolation:isolate;overflow:hidden;
  margin:0 0 clamp(1rem,2vw,1.6rem);
  padding:clamp(2.6rem,6vw,5.4rem) var(--pad) clamp(1.6rem,3vw,2.4rem);
  background:var(--deep);color:#fff}
.blast__mesh{position:absolute;inset:-30%;z-index:-1;
  background:
    radial-gradient(38% 44% at 18% 22%, oklch(0.560 0.110 74 / .80), transparent 62%),
    radial-gradient(34% 40% at 82% 12%, oklch(0.520 0.095 168 / .78), transparent 64%),
    radial-gradient(46% 50% at 62% 88%, oklch(0.360 0.075 150 / .90), transparent 68%);}
@media (prefers-reduced-motion:no-preference){
  .blast__mesh{animation:mesh 26s ease-in-out infinite alternate}
  @keyframes mesh{from{transform:scale(1) rotate(0deg)}
                  to{transform:scale(1.22) rotate(14deg)}}
}
.blast__in{position:relative;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.4rem,4vw,3.4rem);align-items:end}
.blast .tagline{grid-column:1/-1}
.blast__h{font-family:var(--f-disp);font-weight:800;font-stretch:88%;
  font-size:clamp(3.4rem,11vw,9rem);line-height:.86;letter-spacing:-.055em;
  color:#fff;margin:0}
.blast__h em{font-style:normal;color:transparent;
  -webkit-text-stroke:2px oklch(0.86 0.14 150);paint-order:stroke fill}
.blast__lead{font-size:clamp(1.02rem,1.5vw,1.24rem);font-weight:300;
  color:oklch(0.94 0.02 168);max-width:40ch;margin:0}
.blast__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}
.btn--clear{border-color:oklch(1 0 0 / .6);color:#fff;background:transparent}
.btn--clear:hover{background:#fff;color:var(--deep);border-color:#fff}

/* cifre mari: contrast de greutate 800 fata de 300 */
.counts{position:relative;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;
  margin-top:clamp(2rem,5vw,3.6rem);padding-top:clamp(1.2rem,2.4vw,1.8rem);
  border-top:1px solid oklch(1 0 0 / .24)}
.counts__i b{display:block;font-family:var(--f-disp);font-weight:800;
  font-size:clamp(2.6rem,6vw,4.6rem);line-height:.9;letter-spacing:-.05em;color:#fff;
  font-variant-numeric:tabular-nums}
.counts__i span{display:block;margin-top:.35rem;font-family:var(--f-data);
  font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:oklch(0.86 0.03 168)}

/* --- banda cu text mare, nu ticker marunt */
.marquee{overflow:hidden;background:var(--acc);color:var(--surf);padding:.5rem 0;
  margin-bottom:clamp(1rem,2vw,1.6rem)}
.marquee__t{display:flex;align-items:center;gap:1.4rem;width:max-content}
.marquee__t span{font-family:var(--f-disp);font-weight:800;font-stretch:92%;
  font-size:clamp(1.5rem,3.4vw,2.6rem);letter-spacing:-.035em;white-space:nowrap}
.marquee__t i{width:.6rem;height:.6rem;border-radius:var(--r-full);
  background:oklch(1 0 0 / .8);flex:none}
@media (prefers-reduced-motion:no-preference){
  .marquee__t{animation:slide-x 26s linear infinite}
  @keyframes slide-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}
}

/* --- pasi */
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.6rem;
  padding:clamp(1.2rem,2.6vw,2rem) var(--pad)}
.how__i{position:relative;overflow:hidden;padding:1.4rem 1.4rem 1.5rem;
  border-radius:var(--r-l);background:var(--surf-2);border:1px solid var(--line);
  transition:transform .3s var(--e-out),box-shadow .3s var(--e-out)}
.how__i:hover{transform:translateY(-4px);
  box-shadow:0 18px 40px oklch(0.215 0.055 168 / .14)}
.how__n{display:grid;place-items:center;width:2.6rem;height:2.6rem;
  border-radius:var(--r-full);background:var(--acc);color:var(--surf);
  font-family:var(--f-disp);font-weight:800;font-size:1.3rem;margin-bottom:.9rem}
.how__i:nth-child(2) .how__n{background:var(--acc-2);color:var(--deep)}
.how__i:nth-child(3) .how__n{background:var(--deep)}
.how__i p{margin:0;font-size:.96rem;color:var(--ink-2)}
.how__i strong{color:var(--ink);font-size:1.05rem;font-family:var(--f-disp);
  font-weight:700;letter-spacing:-.02em}

/* --- titluri de sectiune, mai mari si mai grele */
.reel__hd h2,.fam__hd h2,.cat__hd h1,.sec__head h2{
  font-size:clamp(1.8rem,4vw,3rem);font-weight:800;letter-spacing:-.045em}

/* --- randul de catalog: spalare de culoare la trecere */
.row::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg, oklch(0.70 0.17 var(--h) / .18), transparent 62%);
  transform:scaleX(0);transform-origin:left;transition:transform .38s var(--e-out)}
.row:hover::before{transform:scaleX(1)}
.row:hover{background:transparent}
.row > *{position:relative;z-index:1}
.row__name{transition:color .25s var(--e-out)}
.row:hover .row__name{color:oklch(0.34 0.15 var(--h))}
.row:hover .shot{transform:scale(1.06)}   /* poza e opaca: rotirea ar arata colturi */

/* --- fisele din carusel */
.reel .row{transition:transform .32s var(--e-out),box-shadow .32s var(--e-out),
  border-color .32s var(--e-out)}
.reel .row:hover{transform:translateY(-8px);
  border-color:oklch(0.62 0.17 var(--h) / .6);
  box-shadow:0 22px 44px oklch(0.62 0.17 var(--h) / .26)}
.reel .row::before{display:none}

/* --- familii: bara de culoare care creste din stanga */
.fam__i{position:relative;overflow:hidden}
.fam__i::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:oklch(0.62 0.17 var(--h));transform:scaleY(0);transform-origin:bottom;
  transition:transform .3s var(--e-out)}
.fam__i:hover::before{transform:scaleY(1)}
.fam__nume{transition:transform .3s var(--e-out)}
.fam__i:hover .fam__nume{transform:translateX(8px)}

/* --- blocul de final */
.claim{padding:clamp(2.4rem,5vw,4rem)}
.claim h2{font-size:clamp(1.9rem,4.4vw,3.4rem);font-weight:800;letter-spacing:-.05em;
  line-height:.98}
.claim__dots{width:min(46%,420px);opacity:.42}
.claim p{font-size:1.04rem}

/* --- sageata care sare pe butoanele mari */
.btn--lg::after{content:"→";transition:transform .25s var(--e-out)}
.btn--lg:hover::after{transform:translateX(5px)}

@media (max-width:1160px){ .blast__in{grid-template-columns:1fr} }
@media (max-width:560px){
  .how{grid-template-columns:1fr}
  .blast__h{font-size:clamp(2.8rem,15vw,4.4rem)}
}

/* ==========================================================================
   FOTOGRAFIE
   Toate imaginile trec prin aceeasi rampa duotone (vezi duotone.py), deci
   paleta site-ului se continua in ele si nu mai arata a stock.
   ========================================================================== */

/* --- deschiderea: fotografie sub degradeu, nu in locul lui */
.blast__photo{position:absolute;inset:0;z-index:-2;overflow:hidden}
.shotbg{width:100%;height:100%;object-fit:cover}
.blast__mesh{z-index:-1;opacity:.72;mix-blend-mode:screen}
.blast::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg, oklch(0.215 0.055 168 / .94) 0%,
                                     oklch(0.215 0.055 168 / .72) 46%,
                                     oklch(0.215 0.055 168 / .34) 100%)}
@media (prefers-reduced-motion:no-preference){
  .blast__photo{animation:slowpush 30s ease-out both}
  @keyframes slowpush{from{transform:scale(1.10)}to{transform:scale(1)}}
}

/* --- banda taiata: fotografie pe jumatate, text pe cealalta */
.cut{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;margin:clamp(1.2rem,2.6vw,2rem) var(--pad);
  border-radius:var(--r-l);overflow:hidden;background:var(--deep);color:#fff}
.cut__media{position:relative;display:block;overflow:hidden;min-height:clamp(240px,30vw,380px)}
.cut__img{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:no-preference){
  .cut__media .cut__img{transition:transform 1.1s var(--e-out)}
  .cut:hover .cut__media .cut__img{transform:scale(1.05)}
}
.cut__txt{padding:clamp(1.6rem,4vw,3rem);align-self:center}
.cut__txt h2{color:#fff;font-size:clamp(1.6rem,3.4vw,2.8rem);font-weight:800;
  letter-spacing:-.045em;line-height:.98;margin-bottom:.9rem}
.cut__txt p{color:oklch(0.90 0.02 168);margin:0}

/* --- familii: lista plus o fotografie inalta langa ea */
.fam__wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(1rem,2.4vw,1.8rem);align-items:stretch}
.fam__media{display:block;border-radius:var(--r-l);overflow:hidden;
  background:var(--deep)}
.fam__media .cut__img{height:100%;min-height:260px}

/* --- blocul de final: fotografie patrata in coltul din dreapta */
.claim{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(1.4rem,3vw,2.6rem);align-items:center}
.claim__txt{order:1}
.claim__media{order:2;display:block;border-radius:var(--r-m);overflow:hidden;
  box-shadow:0 24px 60px oklch(0.10 0.04 168 / .5)}
.claim__media .cut__img{width:100%;height:auto;display:block}
@media (prefers-reduced-motion:no-preference){
  .claim__media{animation:driftup 12s ease-in-out infinite alternate}
  @keyframes driftup{from{transform:translateY(-8px)}to{transform:translateY(8px)}}
}

@media (max-width:1000px){
  .cut{grid-template-columns:1fr}
  .fam__wrap{grid-template-columns:1fr}
  .fam__media{min-height:220px}
  .claim{grid-template-columns:1fr}
  .claim__media{order:0;max-width:340px}
}

/* ==========================================================================
   NEVORA — stratul premium
   Ce se adauga peste formatul mostenit: lumina care se misca, materiale care
   reactioneaza si intrari legate de derulare.
   ========================================================================== */

/* --- Caustice: lumina prin sticla ---------------------------------------
   Trei pete radiale mari, blurate, cu perioade PRIME intre ele (29/41/53s).
   Cu perioade rotunde (30/40/50) se resincronizeaza la fiecare 2 minute si
   ochiul prinde bucla; asa, revenirea e la peste 17 ore. */
.caustic{
  position:absolute; display:block; border-radius:50%;
  /* Fara blur(72px): forma e deja un gradient radial stins. Blurul costa o
     trecere de GPU pe cadru, de trei ori, pentru o inmuiere pe care o avem
     din stopuri. Si fara mix-blend-mode: causticele sunt primele in .pane__bg,
     care e grup izolat (z-index:0), deci dedesubtul lor e GOL — `screen` peste
     gol se reduce la sursa. Nu facea nimic si costa un grup izolat. */
  opacity:.5; will-change:transform;
}
.caustic--1{
  width:min(62vw,760px); aspect-ratio:1; top:-22vh; right:-14vw;
  background:radial-gradient(circle at 50% 50%,
    oklch(0.62 0.13 168 / .85) 0%, oklch(0.62 0.13 168 / .34) 34%,
    transparent 74%);
}
.caustic--2{
  width:min(46vw,560px); aspect-ratio:1; top:38vh; left:-16vw;
  background:radial-gradient(circle at 50% 50%,
    oklch(0.60 0.12 74 / .60) 0%, oklch(0.60 0.12 74 / .24) 34%,
    transparent 72%);
}
.caustic--3{
  width:min(38vw,460px); aspect-ratio:1; bottom:-14vh; right:12vw;
  background:radial-gradient(circle at 50% 50%,
    oklch(0.58 0.10 140 / .55) 0%, oklch(0.58 0.10 140 / .22) 34%,
    transparent 76%);
}
@media (prefers-reduced-motion: no-preference){
  .caustic--1{animation:deriva-a 29s ease-in-out infinite alternate}
  .caustic--2{animation:deriva-b 41s ease-in-out infinite alternate}
  .caustic--3{animation:deriva-c 53s ease-in-out infinite alternate}
}
@keyframes deriva-a{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-7%,9%,0) scale(1.18)}
}
@keyframes deriva-b{
  from{transform:translate3d(0,0,0) scale(1.1)}
  to{transform:translate3d(11%,-8%,0) scale(.92)}
}
@keyframes deriva-c{
  from{transform:translate3d(0,0,0) scale(.95)}
  to{transform:translate3d(-9%,-6%,0) scale(1.22)}
}

/* --- Granulatie ---------------------------------------------------------
   Fara mix-blend-mode, desi pe fond intunecat `screen` era alegerea corecta.
   Motivul e de randare, nu de culoare: stratul e FIX, iar ce e sub el in
   grupul lui (causticele, petele, trama) DERULEAZA. Un strat cu amestec peste
   un fundal care se misca cere re-amestecarea intregii ferestre la fiecare
   cadru de derulare — exact ce a scos si .pane::after de aici.
   Zgomotul se desatureaza in filtru: `screen` doar lumina, pe cand `normal`
   ar lasa sa treaca si culoarea zgomotului, care ar aparea ca pete. */
.grain{
  position:fixed; inset:-6%; opacity:.20;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference){
  .grain{animation:granuleaza 1.1s steps(4) infinite}
}
@keyframes granuleaza{
  0%{transform:translate(0,0)}   25%{transform:translate(-2%,1.5%)}
  50%{transform:translate(1.5%,-2%)} 75%{transform:translate(-1%,-1.5%)}
  100%{transform:translate(0,0)}
}

/* --- Sclipirea de pe flacon ---------------------------------------------
   O banda de lumina care traverseaza fotografia la hover. Merge doar pe
   translate, deci nu declanseaza reasezare. */
.shot,.row__shot,.reel .shot{position:relative}
.row:hover .shot,.card:hover .shot,.reel__i:hover .shot{
  transform:translateY(-6px) scale(1.04);
}
.shot{transition:transform .5s var(--e-out)}

.sclipire{position:relative; overflow:hidden; isolation:isolate}
/* Doua lucruri contra-intuitive aici, ambele platite o data:

   1. `skewX` inclina banda, dar NU-i schimba inaltimea. Prima versiune o
      supraintindea 60% peste marginea de sus si de jos; inclinata, coltul ei
      de sus se muta lateral cu tan(14°) x jumatate din inaltime — adica zeci
      de pixeli — si intra in cadru. Se vedea o pana alba in coltul fiecarei
      fise, permanent, fara hover. Cu top/bottom la 0, deplasarea maxima scade
      de vreo trei ori si banda ramane acoperitoare pe toata inaltimea.

   2. Deplasarea se face pe `transform`, nu pe `left`. `left` reasaza la
      fiecare cadru; `transform` nu iese din compozitor. */
.sclipire::after{
  content:""; position:absolute; top:0; bottom:0; width:38%;
  left:0; z-index:2; pointer-events:none;
  background:linear-gradient(100deg, transparent,
    oklch(1 0 0 / .16) 42%, oklch(1 0 0 / .30) 50%,
    oklch(1 0 0 / .16) 58%, transparent);
  transform:translateX(-280%) skewX(-14deg);
}
@media (prefers-reduced-motion: no-preference){
  .sclipire:hover::after{animation:sclipeste 1.05s var(--e-out)}
}
@keyframes sclipeste{ to{ transform:translateX(330%) skewX(-14deg) } }

/* --- Intrari legate de derulare -----------------------------------------
   Doar transform. Opacitatea de la 0 cu fill:both lasa continutul invizibil
   cand animatiile nu ruleaza (file ascunse, randare fara cap) — greseala
   platita deja o data. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .urca{
      animation:urca-in linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 62%;
    }
  }
}
@keyframes urca-in{
  from{transform:translateY(34px) scale(.985)}
  to{transform:translateY(0) scale(1)}
}

/* --- Titlu cinetic: cuvintele urca decalat --------------------------------- */
.kin{display:block; overflow:hidden}
.kin > span{display:inline-block; will-change:transform}
@media (prefers-reduced-motion: no-preference){
  .kin > span{animation:kin-urca .95s var(--e-conf) both;
    animation-delay:calc(var(--i,0) * 90ms)}
}
@keyframes kin-urca{ from{transform:translateY(105%)} to{transform:translateY(0)} }

/* --- Reflector care urmareste cursorul ------------------------------------
   Fara pointer fin (atingere) nu are sens si nu se activeaza.

   Petei i se muta STRATUL, nu centrul gradientului. Inainte, pata era un
   gradient intins peste tot eroul, cu centrul legat de doua variabile CSS:
   la fiecare cadru de miscare a mausului browserul redesena toata suprafata
   eroului. Acum e un disc de 840px care se plimba prin translate3d — treaba
   compozitorului, zero redesenare. Aceeasi raza si aceleasi stopuri:
   `420px circle ... transparent 62%` = disc de 840px, `closest-side`. */
@media (pointer: fine){
  .blast{position:relative}
  .blast__spot{
    position:absolute; left:0; top:0; width:840px; height:840px;
    margin:-420px 0 0 -420px; pointer-events:none; z-index:1;
    background:radial-gradient(circle closest-side,
      oklch(0.78 0.10 74 / .16), transparent 62%);
    opacity:0; transition:opacity .5s var(--e-out);
    transform:translate3d(50vw, 30vh, 0); will-change:transform;
  }
  .blast:hover .blast__spot{opacity:1}
}

/* --- Hairline de alama pe randul de catalog ------------------------------
   scaleX, nu width: latimea reasaza, transformarea nu. */
.row{position:relative}
.row::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--acc); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--e-out);
}
.row:hover::after{transform:scaleX(1)}

/* --- Cifre: aliniate pe coloana ------------------------------------------- */
.price,.row__p,.counts__i b,[data-count-to]{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

/* --- Titluri: Fraunces la corp mare, cu axele impinse --------------------- */
h1,.blast__h,.cut__txt h2,.claim h2{
  font-variation-settings:"opsz" 110, "SOFT" 22, "WONK" 1;
  letter-spacing:-.028em;
  text-wrap:balance;
}
.prose p,.blast__lead{text-wrap:pretty}

/* --- Decupajele pe transparent (fara randare noua) ------------------------
   Nu se taie la cover: stau intregi, pe glow-ul de dinainte, in aceeasi rama. */
.shot--decupaj{object-fit:contain;padding:9% 14%;
  background:radial-gradient(56% 44% at 50% 62%,
             oklch(0.70 0.17 var(--h) / .22), var(--deep) 74%)}

/* --- Comutator de diagnostic --------------------------------------------
   `?fara-efecte=1` in adresa scoate tot stratul ambiental: lumina care se
   misca, granulatia, trama, petele, plasa din erou si reflectorul. Serveste la
   un singur lucru — sa raspunda la intrebarea "de la efecte e sau de la
   altceva?" fara sa ghicim. Daca site-ul merge la fel de greu si asa,
   incetineala vine din altceva si nu are rost sa mai taiem din decor. */
.fara-efecte .caustic, .fara-efecte .grain, .fara-efecte .bg__blob,
.fara-efecte .bg__dots, .fara-efecte .blast__mesh,
.fara-efecte .blast__spot{display:none !important}
.fara-efecte *, .fara-efecte *::before, .fara-efecte *::after{
  animation:none !important;
}

/* Cat timp poarta e deschisa, fundalul sta. Poarta are `backdrop-filter`,
   care reface neclaritatea intregii ferestre la fiecare cadru in care se
   misca ceva dedesubt — pentru un fundal care oricum nu se vede prin ea. */
.gate-sus .caustic, .gate-sus .bg__blob, .gate-sus .bg__dots,
.gate-sus .grain, .gate-sus .blast__mesh, .gate-sus .marquee__t,
.gate-sus .fig--lent img{animation-play-state:paused !important}

/* --- Animatiile ambientale se opresc cand ies din fereastra --------------
   Pagina de start are 13 animatii infinite. Un strat care se misca dincolo de
   marginea ecranului costa compozitorul la fel de mult ca unul vizibil, doar
   ca nu-l vede nimeni. Clasa se pune din JS, cu IntersectionObserver.
   `will-change:auto` la pauza elibereaza si stratul promovat degeaba. */
.pauza{animation-play-state:paused !important; will-change:auto !important}

/* --- Marca din panou -----------------------------------------------------
   Aici a stat un inel care respira, mostenit de la bulina pe care marca a
   inlocuit-o. Pe o forma patrata, chenarul rotunjit facea logoul sa arate a
   buton de aplicatie si ii lua din greutate. Marca se tine singura. */

/* --- Fotografia, incadrata ------------------------------------------------ */
.fig{position:relative; overflow:hidden; border-radius:var(--r-l);
  border:1px solid var(--line)}
.fig img{display:block; width:100%; height:100%; object-fit:cover}
.fig::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 42%, var(--surf) 98%);
}
@media (prefers-reduced-motion: no-preference){
  .fig--lent img{animation:apropie 34s ease-in-out infinite alternate}
}
@keyframes apropie{ from{transform:scale(1)} to{transform:scale(1.09)} }

/* --- Arhiva: blocul care sustine promisiunea ------------------------------
   Doua coloane inegale. Dreapta e o fereastra ingusta prin care trece lista
   de loturi — nu un card, ci un capat de banda. */
.arh{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,4rem); align-items:center;
  margin:clamp(3rem,7vw,6rem) 0;
  padding:clamp(1.8rem,4vw,3.4rem);
  border:1px solid var(--line); border-radius:var(--r-l);
  background:
    radial-gradient(120% 140% at 8% 0%, var(--deep-2), transparent 62%),
    var(--surf-2);
  position:relative; overflow:hidden;
}
.arh::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, transparent, var(--acc), transparent);
}
.arh__txt h2{
  font-size:clamp(1.55rem,3.2vw,2.5rem); line-height:1.08;
  color:var(--ink); margin:0 0 .9rem;
}
.arh__txt p{max-width:52ch; margin:0 0 1.3rem}
.arh__grid{
  border-radius:var(--r-m); border:1px solid var(--line-2);
  background:var(--deep); padding:.9rem 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
@media (max-width: 900px){
  .arh{grid-template-columns:1fr}
}

/* --- Fisa etichetei din blocul de arhiva ---------------------------------
   Aici au stat, pe rand, o banda cu produse si preturi (se rupea pe latimea
   coloanei) si un formular de cautare de lot (a plecat odata cu pagina de
   loturi — n-avem buletine publicate, deci cautarea n-avea ce gasi).
   Ce a ramas e ce se poate arata fara sa promita: campurile tiparite chiar
   pe eticheta flaconului. */
.lot{
  border:1px solid var(--line); border-radius:var(--r-m);
  background:var(--deep); padding:clamp(1.1rem,2.4vw,1.7rem);
}
.lot__lab{
  display:block; font-family:var(--f-data); font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--acc);
  margin-bottom:.7rem;
}
.lot__spec{margin:0; display:grid; gap:.1rem}
.lot__spec > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.62rem 0; border-bottom:1px solid var(--line-2);
}
.lot__spec > div:last-child{border-bottom:0}
.lot__spec dt{
  font-family:var(--f-data); font-size:.62rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3);
}
.lot__spec dd{
  margin:0; font-family:var(--f-data); color:var(--ink);
  font-size:clamp(.95rem,1.7vw,1.15rem); letter-spacing:.05em;
}
.lot__hint{
  margin:.85rem 0 0; font-size:.86rem; color:var(--ink-3);
}

/* ==========================================================================
   LAYOUT V2 — ce desparte magazinul asta de brandul-sora

   Prima versiune a pastrat formatul mostenit intact si, cu tot cu paleta si
   fotografii noi, se citea 1:1 cu el. Culoarea nu schimba un layout.
   Trei mutari structurale, toate peste 1000px (sub, formatul compact mostenit
   e in regula si nu are rost stricat):

   1. panoul lateral de 258px devine o BANDA de 104px, cu marca pe verticala
   2. catalogul devine GRILA de fise, nu lista densa cu antet de tabel
   3. eroul se aseaza pe verticala, ancorat jos, cu cifrele ca bandeu

   Sub 860px ramane bara orizontala de dinainte, deci mobilul nu se atinge.
   ========================================================================== */

@media (min-width: 861px){
  :root{ --rail: 104px; }

  .rail{
    padding:1.3rem .5rem; gap:1.5rem; align-items:center;
    border-right:1px solid oklch(1 0 0 / .09);
  }
  .rail__brand{flex-direction:column; gap:.85rem}
  .rail__logo{width:2.4rem}
  /* Marca pe verticala: cu banda ingusta, scrisul culcat e singurul mod in
     care numele incape intreg si la un corp care se vede. */
  .rail__word{
    writing-mode:vertical-rl; transform:rotate(180deg);
    font-size:1rem; letter-spacing:.14em; font-weight:700;
  }

  .rail__search{width:100%; position:relative}
  .rail__search input{
    padding:.5rem .4rem; text-align:center;
    font-family:var(--f-data); font-size:.6rem; letter-spacing:.08em;
    text-transform:uppercase;
    transition:width .28s var(--e-out), padding .28s var(--e-out);
  }
  /* La focus iese din banda si se deschide peste suprafata: altfel ar trebui
     sa scriem intr-un camp de 80px. */
  .rail__search input:focus{
    position:absolute; left:0; top:0; width:272px; z-index:3;
    text-align:left; padding:.62rem .95rem; font-size:.92rem;
    font-family:var(--f-text); letter-spacing:0; text-transform:none;
  }

  .rail__nav{width:100%; gap:.12rem}
  .rail__nav a{
    text-align:center; padding:.62rem .2rem;
    font-family:var(--f-data); font-size:.64rem; letter-spacing:.09em;
    text-transform:uppercase;
  }

  .rail__cart{
    flex-direction:column; gap:.3rem; width:100%;
    padding:.75rem .3rem; border-radius:var(--r-m);
    font-family:var(--f-data); font-size:.6rem; letter-spacing:.09em;
    text-transform:uppercase;
  }
  .rail__foot{width:100%; text-align:center}
  .rail__mark{margin:0 auto .5rem; width:52px}
  .rail__foot p{font-size:.48rem; line-height:1.7}
}

/* --- 2. Catalogul: grila de fise, nu lista ------------------------------- */
@media (min-width: 1001px){
  .list{background:none; border:0; border-radius:0; overflow:visible}
  .list__hd{display:none}
  .grid--shop{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(228px, 1fr));
    gap:clamp(.8rem, 1.5vw, 1.25rem);
  }
  .row{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"ph ph" "id id" "d f" "p a";
    gap:.4rem 1rem; align-content:start;
    padding:1.1rem 1.1rem 1.2rem;
    border:1px solid var(--line); border-bottom:1px solid var(--line);
    border-radius:var(--r-m); background:var(--surf-2);
  }
  .row:last-child{border-bottom:1px solid var(--line)}
  .row__ph{grid-area:ph; margin:-1.1rem -1.1rem .7rem; overflow:hidden;
    border-radius:calc(var(--r-m) - 1px) calc(var(--r-m) - 1px) 0 0}
  .row__ph .shot{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
    border-radius:0}
  .row__id{grid-area:id}
  .row__name{font-size:1.12rem}
  .row__d{grid-area:d}
  .row__f{grid-area:f; text-align:right}
  .row__p{grid-area:p; align-self:end; font-size:1.18rem; margin-top:.5rem}
  .row__a{grid-area:a; align-self:end; margin-top:.5rem}
  /* Hairline-ul de alama sta acum SUS pe fisa: jos ar fi aratat a rand de
     tabel, adica exact ce am plecat de la. */
  .row::after{top:0; bottom:auto}

  /* --- 3. Eroul: asezat pe verticala, ancorat jos --------------------- */
  .blast{
    min-height:76vh; display:flex; flex-direction:column; justify-content:flex-end;
    padding-bottom:0;
  }
  .blast__in{grid-template-columns:1fr; align-items:start}
  .blast__side{
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    align-items:end; gap:clamp(1.4rem,4vw,3rem); margin-top:.4rem;
  }
  .blast__cta{margin-top:0}
  .counts{
    margin-top:clamp(1.6rem,3.4vw,2.6rem);
    padding:clamp(1.1rem,2.2vw,1.6rem) 0 clamp(1.1rem,2.2vw,1.6rem);
    border-bottom:1px solid oklch(1 0 0 / .12);
  }
  .counts__i b{font-size:clamp(2.2rem,4.4vw,3.6rem)}
}