/* ============================================================
   RE. — mockup stylesheet
   Palette: Graphite #080B0B · Off-white #F4F4F4 · Accent #FF3B30
   ============================================================ */

:root{
  /* Negru mai adânc și cremă mai caldă. Dante NYC — barul nr. 1 mondial 2019 —
     folosește #000 cu text #F4EADB. Contrastul mare între negru aproape pur și
     o cremă gălbuie e ce citește „scump"; griul nostru era prea neutru. */
  --black:#070605;
  --off:#F2E9DC;
  --red:#FF3B30;

  /* Titluri: Bruno Ace — lat, rotund, cu „A" fără bară, cel mai apropiat
     font liber de ce a cerut șeful. „E"-ul din trei linii nu există în
     niciun font liber, așa că logoul e desenat separat (SVG, .logo-svg).
     Text: Figtree, ca să rămână ușor de citit. */
  --display:"Bruno Ace","Orbitron",system-ui,sans-serif;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;

  --dim-on-dark:rgba(242,233,220,.62);
  --dim-on-light:rgba(244,244,244,.58);   /* păstrat ca alias: nu mai există fundal deschis */
  --line-dark:rgba(242,233,220,.15);
  --line-light:rgba(244,244,244,.13);

  --wrap:1280px;
  --pad:clamp(20px,5vw,64px);
  --sec-y:clamp(72px,9vw,132px);
  --header-h:76px;
}

*,*::before,*::after{box-sizing:border-box}

/* Reset global de <button>. L-am prins de trei ori ca bug separat: butoane
   care își arătau fundalul gri implicit al browserului. Rezolvat o dată, aici. */
button{
  font:inherit;color:inherit;
  background:none;border:0;padding:0;margin:0;
  cursor:pointer;-webkit-appearance:none;appearance:none;
}

/* Atributul hidden trebuie să învingă orice display (grid/flex). */
[hidden]{display:none !important}

html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}


body{
  margin:0;
  background:var(--black);
  color:var(--off);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Plasă de siguranță: un halou care iese din ecran nu mai lărgește pagina pe
   telefon. clip pe AMBELE, nu hidden: cu html tăiat, body{overflow-x:hidden}
   ar deveni container de scroll și ar strica toate elementele sticky.
   Browserele fără clip rămân pe body{overflow-x:hidden} de mai sus. */
@supports (overflow:clip){ html,body{overflow-x:clip} }

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}   /* h4 lipsea: titlurile de produs primeau marginea implicită a browserului */

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}

/* ---------- Logo ---------- */
.logo{
  font-size:26px;font-weight:800;letter-spacing:-.04em;line-height:1;
}


/* ---------- Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  height:var(--header-h);
  display:flex;align-items:center;
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(8,11,11,.86);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line-dark);
}
/* header sitting over a light section */
.site-header.on-light{color:var(--off)}
.site-header.on-light.scrolled{
  background:rgba(244,244,244,.9);
  border-bottom-color:var(--line-light);
}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:24px}

.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px)}
.nav a{
  font-size:14px;font-weight:500;opacity:.82;
  position:relative;padding-block:6px;transition:opacity .2s;
}
.nav a:hover{opacity:1}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--red);transition:width .28s ease;
}
.nav a:hover::after{width:100%}

.header-right{display:flex;align-items:center;gap:14px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:42px;padding:0 22px;border-radius:2px;
  font-size:13.5px;font-weight:600;letter-spacing:.01em;
  transition:background .25s,color .25s,border-color .25s,transform .25s;
}
/* Roșu, nu alb: pe fundal întunecat un buton alb e cea mai mare pată de lumină
   din pagină și rupe imaginea. */
.btn-solid{background:var(--red);color:#fff}
.btn-solid:hover{background:#ff5a51;color:#fff}
.on-light .btn-solid{background:var(--red);color:#fff;border:1px solid var(--red)}
.on-light .btn-solid:hover{background:#ff5a51;border-color:#ff5a51}

/* ---------- Burger / mobile menu ---------- */
.burger{
  display:none;width:34px;height:34px;padding:0;border:0;background:none;
  cursor:pointer;position:relative;color:inherit;
}
.burger span{
  position:absolute;left:6px;right:6px;height:1.5px;background:currentColor;
  transition:transform .3s ease, opacity .2s;
}
.burger span:nth-child(1){top:13px}
.burger span:nth-child(2){top:20px}
.burger.open span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger.open span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:var(--header-h) 0 auto 0;z-index:55;
  background:rgba(8,11,11,.97);backdrop-filter:blur(16px);
  display:flex;flex-direction:column;gap:6px;
  padding:26px var(--pad) 40px;
  transform:translateY(-120%);transition:transform .4s cubic-bezier(.4,0,.2,1);
  border-bottom:1px solid var(--line-dark);
  color:var(--off);
}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{font-size:26px;font-weight:600;letter-spacing:-.02em;padding:9px 0}
.mm-btn{font-size:14px !important;margin-top:16px;align-self:flex-start;padding:0 26px}

/* ---------- Typography blocks ---------- */
.eyebrow{
  display:inline-block;margin-bottom:22px;
  color:var(--red);font-size:11.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
}
.h2{
  font-size:clamp(32px,4.6vw,58px);
  font-weight:700;line-height:1.02;letter-spacing:-.035em;
}
.h3{font-size:clamp(22px,2.4vw,30px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.lead{
  margin-top:22px;max-width:44ch;
  font-size:15px;line-height:1.75;color:var(--dim-on-dark);
}
.sec-light .lead{color:var(--dim-on-dark)}

/* ---------- Arrow link ---------- */
.link-arrow{
  display:inline-flex;align-items:center;gap:12px;margin-top:32px;
  font-size:14px;font-weight:500;
  padding-bottom:4px;border-bottom:1px solid currentColor;
}
.link-arrow::after{content:"\2192";transition:transform .3s ease}
.link-arrow:hover::after{transform:translateX(7px)}
.link-arrow:hover{color:var(--red)}
.link-dash{border-bottom:0}
.link-dash::before{
  content:"";width:28px;height:1px;background:currentColor;
  display:inline-block;flex:0 0 auto;
}

/* ---------- Sections ---------- */
.sec{padding-block:var(--sec-y);position:relative}
/* Fără suprafețe albe nicăieri. Secțiunile care erau deschise păstrează rolul
   de alternanță, dar printr-o nuanță de negru mai ridicată, nu prin contrast
   de luminozitate — altfel pagina devine un bloc uniform fără ritm. */
.sec-light{background:#101314;color:var(--off)}
.sec-dark{background:var(--black);color:var(--off)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.grid-3{display:grid;grid-template-columns:1fr 1.05fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}

/* ---------- Image placeholders (drop real photos in assets/img/) ---------- */
.ph{position:relative;overflow:hidden;background:#101314}
.ph img{width:100%;height:100%;object-fit:cover;position:relative;z-index:2}
.ph::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(120% 90% at 70% 25%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(160deg,#1b1a18 0%,#0d0f10 60%,#070809 100%);
}
.ph-burger::before{
  background:
    radial-gradient(60% 55% at 48% 55%, rgba(214,142,58,.55), transparent 70%),
    radial-gradient(45% 40% at 78% 38%, rgba(255,59,48,.30), transparent 72%),
    linear-gradient(165deg,#241a12 0%,#100c0a 55%,#070707 100%);
}
.ph-interior::before{
  background:
    radial-gradient(45% 35% at 50% 22%, rgba(255,196,120,.42), transparent 70%),
    linear-gradient(180deg,#141210 0%,#0a0a0b 70%,#070708 100%);
}
.ph-drink::before{
  background:
    radial-gradient(55% 55% at 45% 60%, rgba(196,26,58,.60), transparent 72%),
    radial-gradient(40% 40% at 75% 25%, rgba(255,120,60,.22), transparent 70%),
    linear-gradient(170deg,#1a0d12 0%,#0b0709 60%,#060607 100%);
}
.ph-coffee::before{
  background:radial-gradient(60% 60% at 50% 45%, rgba(198,150,96,.62), transparent 72%),
    linear-gradient(170deg,#241a11 0%,#0c0908 100%);
}
.ph-green::before{
  background:radial-gradient(60% 60% at 50% 55%, rgba(96,170,84,.62), transparent 72%),
    linear-gradient(170deg,#12200f 0%,#070b07 100%);
}
.ph-store::before{
  background:
    radial-gradient(40% 60% at 30% 60%, rgba(255,160,70,.40), transparent 70%),
    radial-gradient(35% 50% at 72% 55%, rgba(255,59,48,.28), transparent 72%),
    linear-gradient(180deg,#14100d 0%,#0a0a0b 100%);
}

.media{margin:0}
.media-tall{aspect-ratio:4/5}
.media-square{aspect-ratio:1/1}
.media-wide{aspect-ratio:16/10}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;padding-block:0 clamp(48px,7vw,84px);
  padding-top:var(--header-h);overflow:hidden;
}
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slides .slide{
  position:absolute;inset:0;opacity:0;transform:scale(1.06);
  transition:opacity 1.2s ease, transform 7s linear;
}
.hero-slides .slide.is-active{opacity:1;transform:scale(1)}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,11,11,.92) 0%, rgba(8,11,11,.70) 34%, rgba(8,11,11,.05) 72%),
    linear-gradient(180deg, rgba(8,11,11,.75) 0%, transparent 34%, rgba(8,11,11,.60) 100%);
}
.hero-in{position:relative;z-index:2}
.hero-title{
  font-size:clamp(46px,8.4vw,104px);
  font-weight:700;line-height:.94;letter-spacing:-.045em;
}

.hero-sub{
  margin-top:clamp(20px,2.6vw,32px);
  font-size:clamp(14px,1.25vw,17px);line-height:1.6;color:rgba(255,255,255,.80);
}
.hero-counter{
  position:relative;z-index:2;margin-top:clamp(28px,4vw,48px);
  text-align:right;font-size:12px;font-weight:600;letter-spacing:.14em;
  color:rgba(255,255,255,.72);
}
.hero-counter i{font-style:normal;opacity:.45;margin:0 4px}

/* ---------- Menu list ---------- */
.cat-list li + li{margin-top:0}
.cat-list a{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px 2px;border-bottom:1px solid var(--line-light);
  font-size:15px;font-weight:500;transition:padding-left .28s ease,color .2s;
}
.cat-list li:first-child a{border-top:1px solid var(--line-light)}
.cat-list a:hover{padding-left:10px;color:var(--red)}
.cat-list .arr{opacity:.45;transition:transform .28s ease,opacity .2s}
.cat-list a:hover .arr{opacity:1;transform:translateX(6px)}

/* ---------- Drinks ---------- */
.sec-drinks{overflow:hidden}
.drinks-bg{position:absolute;inset:0;z-index:0}
.sec-drinks::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg, rgba(8,11,11,.94) 0%, rgba(8,11,11,.72) 40%, rgba(8,11,11,.25) 75%);
}
.drinks-in{position:relative;z-index:2}
.thumbs{display:grid;gap:clamp(10px,1.4vw,18px);justify-items:end}
.thumbs figure{
  margin:0;width:clamp(140px,17vw,200px);aspect-ratio:1/1;
  transition:transform .4s ease;
}
.thumbs figure:hover{transform:translateY(-6px)}

/* ---------- Location / map ---------- */
.addr{
  margin-top:26px;display:flex;gap:12px;align-items:flex-start;
  font-size:15px;line-height:1.65;color:var(--dim-on-dark);
}
.pin{width:18px;height:18px;flex:0 0 auto;fill:var(--red);margin-top:2px}

.map{
  position:relative;aspect-ratio:16/9;background:#101314;overflow:hidden;
  border:1px solid var(--line-dark);
}
.map-grid{position:absolute;inset:0;width:100%;height:100%}
.map-grid path{stroke:rgba(255,255,255,.10);stroke-width:7;fill:none}
.map-grid .thin{stroke:rgba(255,255,255,.05);stroke-width:3}
.map-grid .curve{stroke:rgba(255,255,255,.07);stroke-width:9}
.map-pin{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-100%);
}
.map-pin svg{width:30px;height:30px;fill:var(--red);filter:drop-shadow(0 6px 12px rgba(0,0,0,.6))}
.map-label{
  position:absolute;left:50%;top:48%;transform:translateX(-50%);
  font-size:12.5px;font-weight:500;color:rgba(255,255,255,.78);white-space:nowrap;
}

.contact-row{margin-top:clamp(40px,5vw,72px);align-items:center}
.contact-col{padding-left:clamp(0px,2vw,24px)}
.contact-list{margin-top:30px}
.contact-list li{
  display:flex;align-items:center;gap:14px;padding:9px 0;font-size:15px;
}

.contact-list a{color:rgba(255,255,255,.82);transition:color .2s}
.contact-list a:hover{color:var(--red)}
.socials{display:flex;gap:10px;margin-top:26px}
.socials a{
  width:38px;height:38px;border:1px solid var(--line-dark);border-radius:50%;
  display:grid;place-items:center;
  color:rgba(255,255,255,.62);transition:.25s;
}
.socials svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.socials svg .fill{fill:currentColor;stroke:none}
.socials a:hover{background:var(--red);border-color:var(--red);color:#fff}

/* ---------- Footer ---------- */
.footer{
  background:var(--black);border-top:1px solid var(--line-dark);
  padding-block:clamp(28px,3.5vw,44px);
}
.footer-in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.footer-tag{font-size:13.5px;color:rgba(255,255,255,.55)}


/* ---------- Reveal on scroll ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ============ Responsive ============ */
@media (max-width:1024px){
  .grid-3{grid-template-columns:1fr 1fr;row-gap:44px}
  .grid-3 .col:last-child{grid-column:1 / -1}
  .thumbs{grid-template-columns:repeat(3,1fr);justify-items:stretch}
  .thumbs figure{width:auto}
}

@media (max-width:860px){
  :root{--header-h:66px}
  .nav{display:none}
  .burger{display:block}
  .header-right .btn-solid{display:none}
  .grid-2,.grid-3{grid-template-columns:1fr;gap:38px}
  .grid-3 .col:last-child{grid-column:auto}
  .hero{min-height:92svh;justify-content:flex-end}
  .hero-title{font-size:clamp(42px,12vw,64px)}
  .media-tall{aspect-ratio:3/4}
  .contact-col{padding-left:0}
  .footer-in{flex-direction:column;align-items:flex-start;gap:12px}
  .sec-drinks::after{background:linear-gradient(180deg, rgba(8,11,11,.92) 0%, rgba(8,11,11,.78) 55%, rgba(8,11,11,.92) 100%)}
}

@media (max-width:520px){
  .thumbs{grid-template-columns:1fr 1fr}
  .thumbs figure:last-child{grid-column:1 / -1;aspect-ratio:16/9}
  .hero-counter{text-align:left}
}

/* ---------- Reglaje după pozele reale ---------- */

/* Titlul din Menu încape pe 2 rânduri în coloana îngustă, ca în referință. */
.sec-menu .h2{font-size:clamp(30px,3.6vw,46px)}

/* Pozele generate au subiectul aproape de centru, nu în dreapta. Pe ecran îngust
   titlul cădea peste el — întăresc voalul de jos în sus. Reglează procentele dacă
   schimbi pozele hero. */
@media (max-width:860px){
  .hero::after{
    background:linear-gradient(180deg, rgba(8,11,11,.80) 0%, rgba(8,11,11,.35) 30%, rgba(8,11,11,.86) 62%, rgba(8,11,11,.96) 100%);
  }
}

/* ---------- Punctul de brand ----------
   Element dedicat, nu caracterul "." din font: aceeași formă și aceeași
   proporție în header, hero și footer, la orice corp de literă. */
.dot{
  display:inline-block;
  width:.155em;height:.155em;          /* = 67/312 din înălțimea capitalei din logo */
  background:var(--red);
  margin-left:.065em;                  /* = 28/312, spațierea din logo */
  vertical-align:baseline;
}

/* ---------- Iconițe ---------- */
.contact-list .ci{
  width:18px;height:18px;flex:0 0 auto;
  fill:none;stroke:var(--red);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.contact-list .ci .fill{fill:var(--red);stroke:none}

/* ---------- Focus vizibil (tastatură) ---------- */
:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
  border-radius:1px;
}


/* ---------- Selecție text ---------- */
::selection{background:var(--red);color:#fff}

/* ---------- Pozele apar în fade, nu brusc ---------- */
.js .ph img{opacity:0;transition:opacity .7s ease}
.js .ph img.loaded{opacity:1}

/* Counter-ul hero cade peste poză pe unele slide-uri — îl ridic din fundal. */
.hero-counter{text-shadow:0 1px 14px rgba(8,11,11,.9)}

/* ============================================================
   PAGINI INTERIOARE — meniu, comandă, formulare
   ============================================================ */

/* Header-ul paginilor interioare nu stă peste un hero, deci are fundal mereu. */
.site-header.header-static{
  background:rgba(8,11,11,.88);backdrop-filter:blur(14px);
  border-bottom-color:var(--line-dark);
}
.site-header.header-static.on-light{
  background:rgba(244,244,244,.92);border-bottom-color:var(--line-light);
}
.nav a.is-current{opacity:1}
.nav a.is-current::after{width:100%}

/* ---------- Coș în header ---------- */
.cart-btn{
  position:relative;width:40px;height:40px;display:grid;place-items:center;
  border-radius:50%;transition:background .25s,color .25s;
}
.cart-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cart-btn svg .fill{fill:currentColor;stroke:none}
.cart-btn:hover{background:rgba(255,255,255,.08)}
.on-light .cart-btn:hover{background:rgba(255,255,255,.08)}
.cart-count{
  position:absolute;top:-1px;right:-1px;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:var(--red);color:#fff;
  font-size:10.5px;font-weight:700;line-height:18px;text-align:center;
  transition:transform .25s cubic-bezier(.3,1.5,.5,1);
}
.cart-count.is-empty{transform:scale(0);}

/* ---------- Antet de pagină ---------- */
.page-head{
  background:var(--black);color:var(--off);
  padding-top:calc(var(--header-h) + clamp(44px,6vw,86px));
  padding-bottom:clamp(40px,5.5vw,76px);
}
.h1{font-size:clamp(38px,6vw,76px);font-weight:700;line-height:.98;letter-spacing:-.04em}
.page-head .lead{margin-top:24px;max-width:52ch}
.pt-0{padding-top:clamp(36px,4.5vw,64px)}
.mt-xl{margin-top:clamp(32px,4vw,52px)}
.lead.small{font-size:13.5px}

/* ---------- Bara de categorii (meniu) ---------- */
.menu-nav{
  position:sticky;top:var(--header-h);z-index:40;
  background:rgba(8,11,11,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-dark);
}
.menu-nav-in{display:flex;gap:6px;overflow-x:auto;padding-block:14px;scrollbar-width:none}
.menu-nav-in::-webkit-scrollbar{display:none}
.menu-nav a{
  flex:0 0 auto;padding:8px 17px;border-radius:100px;
  font-size:13.5px;font-weight:500;color:var(--dim-on-dark);
  border:1px solid transparent;transition:.25s;white-space:nowrap;
}
.menu-nav a:hover{color:var(--off);border-color:var(--line-dark)}
.menu-nav a.is-current{background:var(--red);color:#fff;border-color:var(--red)}

/* ---------- Meniu (fundal întunecat) ---------- */
.menu-wrap{color:var(--off)}
.menu-cat{padding-top:clamp(46px,5.5vw,76px);scroll-margin-top:72px}
.menu-cat-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.18);
}
.menu-cat-title{
  margin:0;font-size:clamp(26px,3.4vw,44px);
  font-weight:700;letter-spacing:-.035em;line-height:1;
}
.menu-cat-n{
  flex:0 0 auto;font-size:11.5px;font-weight:700;
  letter-spacing:.18em;color:var(--red);font-variant-numeric:tabular-nums;
}
.menu-cat-blurb{
  margin-top:18px;max-width:64ch;
  font-size:14px;line-height:1.65;color:var(--dim-on-dark);
}
.menu-items{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0 clamp(30px,4vw,68px);margin-top:14px;
}

/* Pe ecrane tactile nu există hover — butonul trebuie să se vadă mereu. */
@media (hover:none),(pointer:coarse){
  .add{opacity:1;transform:none}
}

/* ---------- Bara de coș (mobil) ---------- */
.cart-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:none;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--pad);
  background:rgba(8,11,11,.96);backdrop-filter:blur(14px);
  border-top:1px solid var(--line-dark);color:var(--off);
  transform:translateY(110%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  font-size:14px;font-weight:600;
}
.cart-bar.show{transform:translateY(0)}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;z-index:80;
  transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--black);color:var(--off);
  border:1px solid var(--line-dark);border-radius:100px;
  padding:11px 22px;font-size:13.5px;font-weight:500;
  transition:opacity .3s, transform .3s;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- About: valori ---------- */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px);margin-top:44px}
.value-n{
  display:block;margin-bottom:18px;color:var(--red);
  font-size:12px;font-weight:700;letter-spacing:.16em;
}
.value .lead{margin-top:16px}

/* ---------- Program ---------- */
.hours{margin-top:22px;border-top:1px solid var(--line-dark)}
.hours li{
  display:flex;justify-content:space-between;gap:20px;
  padding:13px 0;border-bottom:1px solid var(--line-dark);
  font-size:14.5px;color:var(--dim-on-dark);
}
.hours li span:last-child{color:var(--off);font-variant-numeric:tabular-nums}

/* ---------- Formulare ---------- */
.form-wrap{max-width:760px}
.form{margin-top:36px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:block;margin-bottom:18px}
.field-sm{max-width:180px}
.field > span{
  display:block;margin-bottom:8px;
  font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--dim-on-light);
}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;
  font-family:inherit;font-size:15px;color:var(--off);
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:3px;
  transition:border-color .2s,box-shadow .2s;
}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--off);box-shadow:0 0 0 3px rgba(244,244,244,.08);
}
.sec-dark .field > span{color:var(--dim-on-dark)}
.sec-dark .field input,.sec-dark .field select,.sec-dark .field textarea{
  background:rgba(255,255,255,.04);border-color:var(--line-dark);color:var(--off);
}
.btn-dark{background:var(--red);color:#fff;border:1px solid var(--red)}
.btn-dark:hover{background:#ff5a51;border-color:#ff5a51;color:#fff}
.btn-lg{height:52px;padding:0 34px;font-size:15px;width:100%;margin-top:26px}
.form-note{margin-top:14px;font-size:12.5px;color:var(--dim-on-light)}

/* ---------- Comandă ---------- */
.checkout{
  display:grid;grid-template-columns:1fr 360px;
  gap:clamp(30px,4vw,64px);align-items:start;color:var(--off);
}
.order-lines{margin-top:20px;border-top:1px solid var(--line-light)}
.line{
  display:grid;grid-template-columns:1fr auto auto auto;align-items:center;
  gap:18px;padding:18px 0;border-bottom:1px solid var(--line-light);
}
.line-main h3{font-size:15.5px;font-weight:600;letter-spacing:-.015em}
.line-main p{margin-top:4px;font-size:13px;color:var(--dim-on-light)}
.qty{display:flex;align-items:center;border:1px solid var(--line-light);border-radius:100px;overflow:hidden}
.qty button{
  width:32px;height:32px;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:15px;color:var(--off);transition:background .2s;
}
.qty button:hover{background:rgba(255,255,255,.08)}
.qty span{min-width:26px;text-align:center;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.line-total{font-size:15px;font-weight:600;min-width:64px;text-align:right;font-variant-numeric:tabular-nums}
.line-remove{
  width:28px;height:28px;border:0;background:transparent;cursor:pointer;
  color:rgba(244,244,244,.35);font-size:19px;line-height:1;transition:color .2s;
}
.line-remove:hover{color:var(--red)}

.mode{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.mode button{
  display:flex;flex-direction:column;gap:5px;align-items:flex-start;
  padding:16px 18px;cursor:pointer;text-align:left;
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:4px;
  font-family:inherit;color:var(--off);transition:.2s;
}
.mode button strong{font-size:15px;font-weight:600}
.mode button span{font-size:12.5px;color:var(--dim-on-light)}
.mode button:hover{border-color:rgba(244,244,244,.4)}
.mode button.is-on{border-color:var(--off);box-shadow:inset 0 0 0 1px var(--off)}

.pay{display:grid;gap:10px;margin-top:18px}
.pay-opt{
  display:flex;align-items:center;gap:13px;padding:14px 16px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:4px;transition:.2s;
}
.pay-opt:hover{border-color:rgba(244,244,244,.4)}
.pay-opt span{display:flex;flex-direction:column;gap:2px}
.pay-opt strong{font-size:14.5px;font-weight:600}
.pay-opt em{font-style:normal;font-size:12.5px;color:var(--dim-on-light)}
.pay-opt input{accent-color:var(--red);width:17px;height:17px}
.pay-opt.is-off{opacity:.5;cursor:not-allowed}

.summary{
  position:sticky;top:calc(var(--header-h) + 20px);
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:4px;
  padding:26px 24px;
}
.sum{margin-top:18px}
.sum li{
  display:flex;justify-content:space-between;gap:16px;padding:9px 0;
  font-size:14.5px;color:var(--dim-on-light);font-variant-numeric:tabular-nums;
}
.sum li span:last-child{color:var(--off);font-weight:500}
.sum-total{
  margin-top:10px;padding-top:16px !important;border-top:1px solid var(--line-light);
  font-size:17px !important;color:var(--off) !important;font-weight:700;
}
.sum-total span:last-child{font-weight:700 !important}
.free-hint{
  margin-top:14px;padding:11px 14px;border-radius:3px;
  background:rgba(255,59,48,.08);color:var(--red);
  font-size:12.5px;font-weight:600;
}
.sum-note{margin-top:14px;font-size:12px;color:var(--dim-on-light)}

.empty{padding:54px 0 20px;text-align:center}
.empty .lead{margin:14px auto 28px}

.done{max-width:620px;padding:20px 0 40px}
.done-mark{
  width:56px;height:56px;border-radius:50%;background:var(--red);
  display:grid;place-items:center;margin-bottom:26px;
}
.done-mark svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.done .lead{margin-top:18px}
.done .btn{margin-top:30px}

/* ---------- CTA ---------- */
.cta-in{text-align:center}
.cta-in .lead{margin-inline:auto}
.cta-in .btn{margin-top:30px}

/* ---------- Footer extins ---------- */
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:clamp(26px,3.5vw,56px);padding-bottom:clamp(26px,3.5vw,46px);
}
.f-col h3{
  margin:0 0 16px;font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);
}
.f-col a,.f-col p{
  display:block;font-size:13.5px;line-height:1.75;color:rgba(255,255,255,.62);
  transition:color .2s;
}
.f-col a:hover{color:var(--red)}
.f-brand .footer-tag{margin-top:16px}
.footer-bottom{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:22px;border-top:1px solid var(--line-dark);
  font-size:12.5px;color:rgba(255,255,255,.42);
}
.f-legal a{margin-left:16px;color:inherit}
.f-legal a:hover{color:var(--red)}

/* ============ Responsive — pagini interioare ============ */
@media (max-width:1024px){
  .checkout{grid-template-columns:1fr}
  .summary{position:static}
  .values{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .menu-items{grid-template-columns:1fr}
  .cart-bar{display:flex}
  body:has(.cart-bar.show){padding-bottom:78px}
  .f-row{grid-template-columns:1fr;gap:0}
  .field-sm{max-width:none}
  /* Pe mobil: titlul sus cu × în dreapta, cantitatea și totalul pe rândul doi. */
  .line{grid-template-columns:1fr auto auto;row-gap:14px;column-gap:12px}
  .line-main{grid-column:1 / 3;grid-row:1}
  .line-remove{grid-column:3;grid-row:1;justify-self:end;align-self:start}
  .qty{grid-column:1;grid-row:2;justify-self:start}
  .line-total{grid-column:2 / 4;grid-row:2;text-align:right}
  .header-right .cart-btn{margin-right:2px}
}
@media (max-width:520px){
  .mode{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .toast{left:16px;right:16px;transform:translateY(20px);text-align:center}
  .toast.show{transform:translateY(0)}
}

/* ============================================================
   SECȚIUNI DE CONVERSIE — home
   ============================================================ */

/* Skip link: apare doar la Tab, pentru tastatură și screen reader. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--red);color:#fff;padding:12px 20px;
  font-size:14px;font-weight:600;
}
.skip-link:focus{left:0}

/* ---------- Hero: două acțiuni ---------- */
.hero-cta{display:flex;align-items:center;gap:clamp(18px,2.5vw,32px);flex-wrap:wrap;margin-top:34px}
.hero-cta .link-arrow{margin-top:0}
.btn-hero{height:50px;padding:0 30px;font-size:14.5px}
.btn-ghost{
  background:transparent;color:var(--off);border:1px solid var(--line-dark);
}
.btn-ghost:hover{background:var(--red);color:#fff;border-color:var(--red)}

/* ---------- Bară de încredere ---------- */
.usp{background:var(--black);border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.usp-in{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.5vw,40px);padding-block:clamp(22px,2.6vw,32px);
}
.usp-item{display:flex;flex-direction:column;gap:5px}
.usp-item strong{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.usp-item span{font-size:12.5px;color:var(--dim-on-dark)}
.status{display:inline-flex;align-items:center;gap:9px}
.status-dot{
  width:7px;height:7px;border-radius:50%;background:var(--dim-on-dark);flex:0 0 auto;
}
.status.is-open .status-dot{
  background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.18);
}
.status.is-closed .status-dot{background:var(--red);box-shadow:0 0 0 3px rgba(255,59,48,.16)}

/* ---------- Cele mai comandate ---------- */
.picks-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:38px;
}
.picks-head .link-arrow{margin-top:0}
.picks{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px)}
.pick{
  display:flex;flex-direction:column;gap:9px;
  padding:26px 24px;background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:4px;
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.pick:hover{
  border-color:rgba(8,11,11,.3);transform:translateY(-3px);
  box-shadow:0 14px 30px -18px rgba(8,11,11,.35);
}
.pick h3{
  font-size:16.5px;font-weight:600;letter-spacing:-.02em;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.pick p{font-size:13.5px;line-height:1.55;color:var(--dim-on-light);flex:1 1 auto}
.pick-buy{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}

/* ---------- Recenzii ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px);margin-top:42px}
.review{
  margin:0;padding:28px 26px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:4px;
}
.stars{color:var(--red);font-size:14px;letter-spacing:3px;margin-bottom:16px}
.review blockquote{margin:0}
.review blockquote p{font-size:15px;line-height:1.65;letter-spacing:-.01em}
.review figcaption{
  margin-top:20px;font-size:13px;font-weight:600;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.review figcaption span{font-weight:400;color:var(--dim-on-light)}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,80px);align-items:start}
.faq-intro .lead a{border-bottom:1px solid currentColor}
.faq-intro .lead a:hover{color:var(--red)}
.faq details{border-bottom:1px solid var(--line-light)}
.faq details:first-child{border-top:1px solid var(--line-light)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:19px 2px;cursor:pointer;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:15.5px;font-weight:600;letter-spacing:-.015em}
.faq summary::after{
  content:"";flex:0 0 auto;width:11px;height:11px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s ease;
}
.faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.faq details p{
  padding:0 2px 22px;max-width:60ch;
  font-size:14.5px;line-height:1.7;color:var(--dim-on-light);
}
.faq details p a{border-bottom:1px solid currentColor}
.faq details p a:hover{color:var(--red)}

/* ---------- CTA final ---------- */
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* ============ Responsive ============ */
@media (max-width:1024px){
  .picks{grid-template-columns:1fr 1fr}
  .reviews{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .usp-in{grid-template-columns:1fr 1fr;gap:20px}
}
@media (max-width:560px){
  .picks{grid-template-columns:1fr}
  .usp-in{grid-template-columns:1fr}
  .picks-head{align-items:flex-start}
  .cta-btns{flex-direction:column;align-items:stretch}
}

/* ---------- Meniu: descrieri de categorie + legendă ---------- */
.menu-cat-blurb + .menu-items{margin-top:12px}

/* ============================================================
   DRINKS — rearanjat: textul sus-stânga, cardurile jos, decalate,
   ca să nu mai acopere paharul din fotografia de fundal.
   ============================================================ */
.sec-drinks{padding-block:clamp(84px,10vw,150px)}
.drinks-in{display:block}
.drinks-head{max-width:min(46ch,52%)}
.drinks-head .lead{margin-top:20px}

/* Cardurile stau în STÂNGA, peste zona întunecată a fotografiei. Pe dreapta,
   subiectul fotografiei (paharul) rămâne complet liber — de-aia nu mai sunt
   aliniate la dreapta ca înainte. */
.drink-cards{
  display:flex;justify-content:flex-start;align-items:flex-start;
  gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(40px,5vw,72px);
  max-width:min(640px,54%);
}
.dcard{
  display:block;flex:1 1 0;min-width:0;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
/* Ritm editorial pe MARGIN, nu pe transform: animația de apariție termină cu
   transform:none și ar șterge decalajul. Marginea nu intră în conflict. */
.dcard:nth-child(2){margin-top:clamp(16px,2vw,30px)}
.dcard:nth-child(3){margin-top:clamp(32px,4vw,60px)}
.dcard:hover{transform:translateY(-12px)}

.dcard-img{
  margin:0;aspect-ratio:3/4;overflow:hidden;position:relative;
  box-shadow:0 22px 50px -26px rgba(0,0,0,.9);
}
.dcard-img img{transition:transform .8s cubic-bezier(.16,1,.3,1)}
.dcard:hover .dcard-img img{transform:scale(1.07)}
.dcard-img::after{
  content:"";position:absolute;inset:0;z-index:3;
  background:linear-gradient(180deg,transparent 45%,rgba(8,11,11,.75) 100%);
  opacity:0;transition:opacity .45s;
}
.dcard:hover .dcard-img::after{opacity:1}

/* Coloană, nu rând: numele lungi („Citrus Old Fashioned") treceau pe două
   rânduri și prețul rămânea agățat pe o linie de bază strâmbă. */
.dcard-info{
  display:flex;flex-direction:column;gap:3px;
  margin-top:14px;padding-bottom:10px;
  border-bottom:1px solid var(--line-dark);
  transition:border-color .35s;
}
.dcard:hover .dcard-info{border-color:var(--red)}
.dcard-info h3{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.dcard-info .price{font-size:13.5px;color:var(--dim-on-dark);transition:color .35s}
.dcard:hover .dcard-info .price{color:var(--red)}

/* ============================================================
   BANDĂ RULANTĂ
   ============================================================ */
.marquee{
  background:var(--red);color:#fff;overflow:hidden;
  padding-block:15px;white-space:nowrap;
}
.marquee-track{
  display:inline-flex;align-items:center;gap:22px;
  animation:marquee 34s linear infinite;
  will-change:transform;
}
.marquee span{
  font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.marquee i{font-style:normal;opacity:.55}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   EFECTE — dezvăluiri, hover, progres, header inteligent
   ============================================================ */

/* Bară de progres la scroll */
.scroll-progress{
  position:fixed;top:0;left:0;z-index:70;
  height:2px;width:0;background:var(--red);
  transition:width .1s linear;
}

/* Header care se ascunde la scroll în jos și reapare la scroll în sus */
.site-header{will-change:transform}
.site-header.header-up{transform:translateY(-100%)}
body.header-up .menu-nav{top:0}          /* bara de categorii urcă în locul lui */

/* Titluri care se dezvăluie ca o cortină. Clasa se pune din JS,
   deci fără JS titlurile rămân vizibile. */
/* Mască reală, cu overflow. NU clip-path pe element: clip-path colapsează
   caseta vizibilă, IntersectionObserver nu-l mai vede intersectând, deci nu
   primește niciodată .in și titlul rămâne ascuns pe veci. */
.js .mask{
  display:block;overflow:hidden;
  padding-bottom:.12em;margin-bottom:-.12em;   /* loc pentru codițele literelor */
}
.js .mask .mask-i{
  display:block;
  transform:translateY(108%);
  transition:transform 1.05s cubic-bezier(.16,1,.3,1);
}
.js .mask.in .mask-i{transform:none}

/* Copii care intră în cascadă, nu toți odată */
.js [data-stagger] > *{transition-delay:calc(var(--i,0) * 110ms)}

/* Zoom discret pe fotografii la hover */
.media{overflow:hidden}
.media img{transition:transform .9s cubic-bezier(.16,1,.3,1)}
.media:hover img{transform:scale(1.05)}

/* Butoanele se umplu dinspre stânga, nu doar schimbă culoarea */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--red);
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.btn:hover::before{transform:scaleX(1)}
.btn-solid:hover,.btn-dark:hover,.btn-ghost:hover{background:transparent;color:#fff;border-color:var(--red)}

/* Cardurile de produs se înclină ușor spre cursor */
.pick{transform-style:preserve-3d;will-change:transform}

/* Hero: conținutul se estompează pe măsură ce pleci de pe el */
.hero-in,.hero-counter{will-change:opacity,transform}
.hero-slides{will-change:transform}

/* Săgeata din link-uri capătă o linie care crește */
.link-arrow{position:relative}

@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .js .mask .mask-i{transform:none;transition:none}
  .dcard:hover{transform:none}
  .media:hover img,.dcard:hover .dcard-img img{transform:none}
  .site-header.header-up{transform:none}
}

@media (max-width:860px){
  .drinks-head{max-width:none}
  .drink-cards{max-width:none;gap:12px}
  .dcard{flex:1 1 0}
  .dcard:nth-child(2),.dcard:nth-child(3){margin-top:0}
  .dcard:hover{transform:translateY(-8px)}
  
}

/* ============================================================
   CURSOR, TRANZIȚIE DE PAGINĂ, PREVIZUALIZARE PREPARAT
   ============================================================ */

/* ---------- Cortina dintre pagini ----------
   Animația e CSS pur și se termină cu cortina dispărută: dacă JS-ul nu rulează,
   pagina se vede oricum. JS-ul o folosește doar la ieșire. */
/* Cortină DOAR la ieșire. O animație de intrare ar însemna că pagina începe
   acoperită și se descoperă singură — iar dacă animația se blochează (tab în
   fundal, cronologie înghețată, JS căzut), site-ul rămâne un dreptunghi negru.
   Așa, starea implicită e „invizibilă", iar orice eșec înseamnă doar lipsa
   efectului. Flash-ul alb dispare oricum: cortina e ridicată când pleci. */
.page-fade{
  position:fixed;inset:0;z-index:90;pointer-events:none;
  background:var(--black);
  opacity:0;visibility:hidden;
  transition:opacity .28s ease, visibility .28s;
}
.page-fade.in{opacity:1;visibility:visible}

@media (prefers-reduced-motion:reduce){
  .page-fade{transition:none}
}

/* ============================================================
   MENIU PE GRUPURI — barul primul, mâncarea după
   ============================================================ */
.menu-group{scroll-margin-top:72px}
.menu-group + .menu-group{margin-top:clamp(56px,7vw,104px)}

.group-head{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:0 16px;padding-bottom:22px;
  border-bottom:2px solid var(--red);
}
.group-n{
  font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--red);
  font-variant-numeric:tabular-nums;
}
.group-title{
  margin:0;font-size:clamp(34px,5.4vw,68px);
  font-weight:700;letter-spacing:-.04em;line-height:.95;
}
.group-count{
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim-on-dark);
}
.group-lead{
  grid-column:2 / -1;margin-top:16px;max-width:64ch;
  font-size:14.5px;line-height:1.7;color:var(--dim-on-dark);
}

/* Mâncarea e al doilea act: antet mai mic, rânduri mai strânse, ca ochiul să
   se oprească întâi la bar. */
.menu-group-food .group-title{font-size:clamp(28px,4vw,50px)}
.menu-group-food .group-head{border-bottom-width:1px;border-bottom-color:rgba(255,255,255,.28)}
.menu-group-food .menu-cat{padding-top:clamp(34px,4vw,52px)}
.menu-group-food .menu-cat-title{font-size:clamp(20px,2.4vw,30px)}
.menu-group-food .item{padding-top:15px;padding-bottom:15px}
.menu-group-food .item-main h4{font-size:15.5px}
.menu-group-food .price{font-size:15px}

/* Etichetele de grup din bara lipicioasă */
.chip-group{
  flex:0 0 auto;align-self:center;
  padding:0 12px 0 4px;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.34);white-space:nowrap;
}
.chip-group:not(:first-child){
  margin-left:8px;padding-left:16px;
  border-left:1px solid var(--line-dark);
}

/* Titlurile de categorie sunt acum h3, cele de produs h4 */
.item-main h4{
  font-size:17px;font-weight:600;letter-spacing:-.02em;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}

/* Linia „Food & snacks" din lista de pe home */
.cat-food a{font-weight:600}
.cat-food em{
  font-style:normal;margin-left:8px;
  font-size:12px;font-weight:400;color:var(--dim-on-light);
}
.cat-food a:hover em{color:inherit}

/* Baza pentru toate etichetele. A fost ștearsă odată cu stilurile vechi de
   rând de meniu — fără ea, „Signature" apărea ca text simplu. */
.tag{
  display:inline-block;flex:0 0 auto;
  padding:3px 8px;border-radius:3px;
  font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  line-height:1.5;white-space:nowrap;
}
.tag-signature{background:var(--red);color:#fff}
.tag-zero{background:rgba(120,170,255,.18);color:#8fb8ff}

@media (max-width:860px){
  .group-head{grid-template-columns:auto 1fr;row-gap:4px}
  .group-count{grid-column:2;justify-self:end}
  .group-lead{grid-column:1 / -1}
}

/* ============================================================
   GAMA DE DOZE — arta desenată în rândurile de meniu și pe carduri
   ============================================================ */
.art{display:block;width:100%;height:auto}

/* Rândul de produs are acum trei coloane: doza, textul, prețul. */
.item{align-items:center}
.item-can{
  flex:0 0 auto;width:46px;display:grid;place-items:center;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.item:hover .item-can{transform:translateY(-3px) scale(1.06)}
.item-meta{
  display:block;margin-top:3px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.35);
}

/* Cardurile „most ordered" de pe home */
.pick-can{
  display:grid;place-items:center;margin-bottom:16px;
  padding:10px 0 14px;border-bottom:1px solid var(--line-light);
}
.pick-can .art{width:82px}
.pick:hover .pick-can .art{transform:translateY(-3px)}
.pick-can .art{transition:transform .45s cubic-bezier(.16,1,.3,1)}

/* Numărul de produse din lista de categorii de pe home */
.cat-list em{
  font-style:normal;margin-left:8px;
  font-size:11.5px;color:var(--dim-on-light);font-variant-numeric:tabular-nums;
}

.tag-new{background:rgba(244,244,244,.15);color:var(--off)}
.menu-wrap .tag-new{background:rgba(244,244,244,.15);color:var(--off)}

@media (max-width:860px){
  .item-can{width:28px}
}

/* ============================================================
   MENIU — carduri de produs, filtre, comutator, detaliu
   ============================================================ */

/* ---------- Bara de unelte ---------- */
.tools-band{background:var(--black);border-bottom:1px solid var(--line-dark)}
.tools{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding-block:18px;
}
.tool-filters{display:flex;gap:6px;flex-wrap:wrap}
.tool-filters button{
  padding:9px 16px;border:1px solid var(--line-dark);background:none;cursor:pointer;
  color:var(--dim-on-dark);font-family:inherit;
  font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  border-radius:100px;transition:.25s;
}
.tool-filters button:hover{color:var(--off);border-color:rgba(255,255,255,.4)}
.tool-filters button.on{background:var(--red);border-color:var(--red);color:#fff}

.tool-right{display:flex;align-items:center;gap:16px}
.tool-count{
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim-on-dark);font-variant-numeric:tabular-nums;
}
.view-toggle{display:flex;border:1px solid var(--line-dark);border-radius:100px;overflow:hidden}
.view-toggle button{
  width:38px;height:32px;display:grid;place-items:center;
  border:0;background:none;cursor:pointer;color:var(--dim-on-dark);transition:.25s;
}
.view-toggle button svg{width:14px;height:14px;fill:currentColor}
.view-toggle button:hover{color:var(--off)}
.view-toggle button.on{background:var(--red);color:#fff}

.tool-legend{
  flex:1 1 100%;margin-top:4px;
  font-size:12px;line-height:2.1;color:var(--dim-on-dark);
}
.tool-legend .tag{margin-right:5px}
.tool-legend .tag:not(:first-child){margin-left:14px}

/* ---------- Grila de produse ---------- */
.pgrid{display:grid;gap:clamp(10px,1.2vw,16px);margin-top:22px}
.view-grid .pgrid{grid-template-columns:repeat(4,1fr)}
.view-list .pgrid{grid-template-columns:1fr 1fr}

.pc{
  position:relative;display:flex;flex-direction:column;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.018);
  transition:border-color .35s,background .35s,transform .45s cubic-bezier(.16,1,.3,1);
}
.pc:hover{
  border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.04);
  transform:translateY(-4px);
}

/* zona cu doza, clicabilă */
.pc-art{
  position:relative;display:grid;place-items:center;
  width:100%;padding:34px 18px 20px;border:0;background:none;cursor:pointer;
}
.pc-art .art{
  width:clamp(88px,9.4vw,124px);
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.6));
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.pc:hover .pc-art .art{transform:translateY(-6px) scale(1.05)}
.pc-look{
  position:absolute;left:50%;bottom:10px;transform:translate(-50%,6px);
  padding:4px 12px;border-radius:100px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  color:var(--off);font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;
}
.pc:hover .pc-look,.pc-art:focus-visible .pc-look{opacity:1;transform:translate(-50%,0)}

.pc-body{flex:1 1 auto;padding:0 18px}
.pc-body h4{
  font-size:15.5px;font-weight:600;letter-spacing:-.015em;line-height:1.25;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.pc-notes{margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--dim-on-dark)}
.pc-meta{
  margin-top:5px;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.34);
}
.pc-buy{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:16px;padding:14px 18px;border-top:1px solid rgba(255,255,255,.08);
}
.pc-buy .price{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}

/* Lista: doza în stânga, textul curge pe orizontală */
.view-list .pc{flex-direction:row;align-items:center;gap:4px}
.view-list .pc-art{width:auto;flex:0 0 auto;padding:16px 10px 16px 18px}
.view-list .pc-art .art{width:62px}
.view-list .pc-look{display:none}
.view-list .pc-body{padding:14px 8px}
.view-list .pc-buy{
  margin-top:0;border-top:0;border-left:1px solid rgba(255,255,255,.08);
  flex-direction:column;align-items:flex-end;gap:8px;padding:14px 16px;
}

.add{
  padding:8px 15px;border-radius:100px;cursor:pointer;
  border:1px solid rgba(255,255,255,.26);background:none;color:var(--off);
  font-family:inherit;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;transition:.25s;
}
.add:hover{background:var(--red);color:#fff;border-color:var(--red)}
.add.added{background:var(--red);border-color:var(--red);color:#fff}

/* ---------- Detaliul de produs ---------- */
.pdp-bg{
  position:fixed;inset:0;z-index:80;background:rgba(4,5,5,.78);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
}
.pdp-bg.open{opacity:1;visibility:visible}
.pdp{
  position:fixed;top:0;right:0;bottom:0;z-index:81;width:min(620px,100%);
  background:#0D1011;border-left:1px solid var(--line-dark);
  display:grid;grid-template-columns:250px 1fr;align-items:start;gap:0;
  overflow-y:auto;
  transform:translateX(100%);transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.pdp.open{transform:none}
.pdp-x{
  position:absolute;top:14px;right:16px;z-index:3;
  width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(255,255,255,.07);color:var(--off);
  font-size:20px;line-height:1;cursor:pointer;transition:.25s;
}
.pdp-x:hover{background:var(--red);color:#fff}
.pdp-art{
  position:sticky;top:0;display:grid;place-items:center;
  padding:56px 20px;background:
    radial-gradient(120% 60% at 50% 30%, rgba(255,255,255,.07), transparent 70%),
    linear-gradient(180deg,#141819,#0B0D0E);
  border-right:1px solid var(--line-dark);min-height:100%;
}
.pdp-art .art{width:172px;filter:drop-shadow(0 34px 46px rgba(0,0,0,.8))}
.pdp-body{padding:52px 34px 40px}
.pdp-cat{
  font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red);
}
.pdp-body h2{
  margin-top:12px;font-size:clamp(26px,3.4vw,34px);font-weight:700;
  letter-spacing:-.03em;line-height:1.08;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.pdp-notes{
  margin-top:10px;font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.44);
}
.pdp-long{margin-top:20px;font-size:14.5px;line-height:1.75;color:var(--dim-on-dark)}
.pdp-specs{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.08)}
.pdp-specs li{background:#0D1011;padding:14px 16px}
.pdp-specs li.wide{grid-column:1 / -1}
.pdp-specs span{
  display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.36);
}
.pdp-specs b{display:block;margin-top:5px;font-size:14px;font-weight:500;line-height:1.5}
.pdp-buy{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:30px;padding-top:22px;border-top:1px solid var(--line-dark);
}
.pdp-buy .price{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}

/* ============ Responsive ============ */
@media (max-width:1180px){
  .view-grid .pgrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  .view-grid .pgrid{grid-template-columns:1fr 1fr}
  .view-list .pgrid{grid-template-columns:1fr}
  .tools{gap:14px}
  .tool-right{width:100%;justify-content:space-between}
  .pdp{grid-template-columns:1fr;width:100%}
  .pdp-art{position:static;min-height:0;padding:44px 20px 28px;border-right:0;border-bottom:1px solid var(--line-dark)}
  .pdp-art .art{width:140px}
  .pdp-body{padding:30px 22px 36px}
}
@media (max-width:520px){
  .view-grid .pgrid{grid-template-columns:1fr}
  .pdp-specs{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .pc:hover{transform:none}
  .pc:hover .pc-art .art{transform:none}
}

/* Eticheta din colțul cardului — poziție fixă, aceeași pe toate produsele. */
.pc-tag{position:absolute;top:12px;left:12px;z-index:3}
.view-list .pc-tag{top:8px;left:auto;right:12px}
.view-list .pc-body h4{padding-right:76px}

/* Grila se rărește cu doze mai mari: patru carduri pe rând deveneau înghesuite. */
@media (min-width:1181px){
  .view-grid .pgrid{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1500px){
  .view-grid .pgrid{grid-template-columns:repeat(4,1fr)}
}

/* ============================================================
   REGISTRU EDITORIAL
   Grotesc îngust pentru titluri și nume de produs, geometric pentru rest.
   Accentul din titluri vine din contrast de greutate: gros, apoi subțire roșu.
   ============================================================ */

.h1,.h2,.h3,.hero-title,
.group-title,.menu-cat-title,
.pdp-body h2,.pc-body h4,
.pick h3,.value h3,.empty h3,
.drawer-hd h2,.done h2,.footer-tag,
.faq summary h3,.review blockquote p{
  font-family:var(--display);
  font-weight:500;
  letter-spacing:-.01em;
}

.hero-title{font-size:clamp(52px,8.6vw,118px);line-height:.92;letter-spacing:-.02em}
.h1{font-size:clamp(42px,6.6vw,86px);line-height:.96;letter-spacing:-.018em}
.h2{font-size:clamp(34px,5vw,66px);line-height:.98;letter-spacing:-.018em}
.h3{font-size:clamp(23px,2.6vw,33px);line-height:1.08;letter-spacing:-.015em}
.group-title{font-size:clamp(38px,6vw,82px);letter-spacing:-.025em}
.menu-group-food .group-title,.menu-group-boxes .group-title{font-size:clamp(30px,4.4vw,58px)}
.menu-cat-title{font-size:clamp(24px,3vw,40px);font-weight:400;letter-spacing:-.018em}
.pdp-body h2{font-size:clamp(30px,3.8vw,42px);font-weight:400;letter-spacing:-.018em}

/* Accent în italic roșu — singurul moment de culoare în titluri. */
.display-em,.h1 em,.h2 em,.hero-title em{font-style:normal;font-weight:300;color:var(--red)}

/* Numele produsului: serif, mai mare, fără bold. */
.pc-body h4{font-size:20px;font-weight:400;letter-spacing:-.015em;line-height:1.12}
.view-list .pc-body h4{font-size:19px}
.pick h3{font-size:21px;font-weight:400}
.review blockquote p{font-size:19px;line-height:1.5;letter-spacing:-.005em}
.faq summary h3{font-size:19px;font-weight:400}
.footer-tag{font-size:19px}
.drawer-hd h2,.empty h3,.done h2{font-weight:400}

/* Etichetele mici: spațiate larg, cum stau pe o etichetă de sticlă. */
.eyebrow,.menu-cat-n,.group-count,.chip-group,.tool-count,
.item-meta,.pc-meta,.pdp-cat,.pdp-notes,.value-n,.hero-counter{
  font-family:var(--sans);font-weight:500;
}
.eyebrow{letter-spacing:.26em;font-size:10.5px}
.pdp-cat{letter-spacing:.24em}
.nav a,.btn,.add,.link-arrow,.tool-filters button,.menu-nav a{font-family:var(--sans)}
.price,.sum,.line-total,.pdp-buy .price{font-family:var(--sans);font-weight:400}
.logo{font-family:var(--sans);font-weight:750;letter-spacing:0}

/* Cifrele mari de index, ca într-un catalog tipărit. */
.group-n{
  font-family:var(--display);font-size:clamp(26px,3.4vw,44px);
  font-weight:400;letter-spacing:0;line-height:1;opacity:.55;
}

/* ============================================================
   GRANULAȚIE
   Un strat fin de zgomot peste tot. Costă nimic și scoate paginile
   din senzația de „plat digital" — negrul mari capătă textură.
   ============================================================ */
body::after{
  content:"";position:fixed;inset:0;z-index:200;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

/* ============================================================
   HALOU DE AROMĂ
   Fiecare doză își aruncă propria culoare pe fundal. Grila nu mai e
   un șir de dreptunghiuri identice — fiecare produs are temperatura lui.
   ============================================================ */
.pc-glow,.pdp-glow{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:150%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--c) 0%,transparent 62%);
  opacity:.16;filter:blur(30px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1);
}
.pc:hover .pc-glow{opacity:.34;transform:translate(-50%,-52%) scale(1.08)}
.pdp-glow{width:118%;opacity:.26;filter:blur(46px)}
.pc-art,.pdp-art{isolation:isolate}
.pc-art .art,.pdp-art .art{position:relative;z-index:2}

/* ============================================================
   DETALII FINE
   ============================================================ */
/* Linie de păr care crește sub titlurile de secțiune. */
.sec-head .eyebrow{position:relative;padding-left:26px}
.sec-head .eyebrow::before{
  content:"";position:absolute;left:0;top:50%;
  width:16px;height:1px;background:var(--red);
}

.menu-cat-head{border-bottom-color:rgba(237,231,222,.16)}
.group-head{border-bottom-width:1px;border-bottom-color:var(--red)}
.menu-group-boxes .group-head{border-bottom-color:rgba(237,231,222,.26)}

/* Cardul: margine mai discretă, lumină de sus la hover. */
.pc{
  border-color:rgba(237,231,222,.08);
  background:linear-gradient(180deg,rgba(237,231,222,.035),rgba(237,231,222,.012));
}
.pc:hover{
  border-color:rgba(237,231,222,.2);
  background:linear-gradient(180deg,rgba(237,231,222,.075),rgba(237,231,222,.02));
  box-shadow:0 26px 50px -30px rgba(0,0,0,.9);
}

/* Preț mai prezent, cum stă pe o listă de bar. */
.pc-buy .price{font-size:16.5px;letter-spacing:.01em}
.pdp-buy .price{font-family:var(--display);font-size:34px;font-weight:400}

/* Sublinierea din navigație pornește din centru. */
.nav a::after{left:50%;right:auto;transform:translateX(-50%)}

@media (prefers-reduced-motion:reduce){
  .pc:hover .pc-glow{transform:translate(-50%,-50%)}
}

.pick-can{position:relative;isolation:isolate}
.pick-can .art{position:relative;z-index:2}
.pick-can .pc-glow{top:46%;width:130%}
.pick:hover .pc-glow{opacity:.3}

/* Bara de coș pe ecrane înguste: textul se poate strânge, butonul nu —
   altfel „View order" era împins în afara ecranului. */
.cart-bar{gap:12px}
.cart-bar span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart-bar .btn{flex:0 0 auto;padding:0 18px}
@media (max-width:420px){
  .cart-bar{padding-inline:16px}
  .cart-bar .btn{height:38px;padding:0 14px;font-size:12.5px}
}

/* Doza se înclină ușor la hover — capătă greutate fizică, nu doar se mărește. */
.pc:hover .pc-art .art{transform:translateY(-8px) scale(1.06) rotate(-2.2deg)}

/* Monogramă uriașă, fantomatică, în spatele antetului de grup.
   Mișcarea clasică de revistă: litera devine textură, nu conținut. */
.menu-group{position:relative}
.group-head{position:relative;z-index:2}
.menu-group::before{
  content:"RE";position:absolute;right:-.06em;top:-.34em;
  font-family:var(--display);font-size:clamp(150px,26vw,340px);
  line-height:1;color:var(--off);opacity:.028;
  pointer-events:none;user-select:none;z-index:1;
}

@media (prefers-reduced-motion:reduce){
  .pc:hover .pc-art .art{transform:none}
}
@media (max-width:860px){
  .menu-group::before{font-size:clamp(120px,32vw,200px);top:-.22em}
}

/* ---------- Meniul respiră mai puțin text ----------
   Produsele trebuie să apară în primul ecran de derulare, nu în al cincilea. */
.menu-cat{padding-top:clamp(30px,3.4vw,50px)}
.menu-group + .menu-group{margin-top:clamp(40px,4.6vw,72px)}
.menu-cat-blurb{
  margin-top:12px;max-width:52ch;
  font-size:13.5px;line-height:1.55;
}
.menu-cat-blurb + .pgrid{margin-top:20px}
.group-head{padding-bottom:16px}
.tools{padding-block:14px}
.page-head{padding-bottom:clamp(22px,2.6vw,36px)}

.fineprint{
  margin-bottom:34px;max-width:70ch;
  font-size:12px;line-height:2.2;color:var(--dim-on-dark);
}
.fineprint .tag{margin:0 2px}

/* ---------- Tipografie de afiș ----------
   Barurile bune scriu mare. Bandit (Chicago) pune titluri de 85–100px la
   greutate 400. Aveam 66px maxim — corect, dar timid. */
.group-title{font-size:clamp(46px,8.2vw,104px);letter-spacing:-.03em}
.menu-group-boxes .group-title{font-size:clamp(34px,5.4vw,70px)}
.menu-cat-title{font-size:clamp(27px,3.6vw,50px)}
.h1{font-size:clamp(46px,7.4vw,100px)}
.page-head .h1{line-height:.94}

/* ---------- Turnarea casei ----------
   Fiecare bar își pune semnătura sus, nu o ascunde în grilă. Pagina începea
   direct cu un rând de carduri, fără punct de focalizare. */
.house{
  position:relative;overflow:hidden;
  border:1px solid var(--line-dark);
  background:linear-gradient(120deg,rgba(242,233,220,.05),rgba(242,233,220,.012));
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(24px,4vw,64px);align-items:center;
  padding:clamp(26px,3.4vw,46px) clamp(24px,3.4vw,52px);
  margin-top:clamp(26px,3vw,42px);
}
.house-art{
  position:relative;display:grid;place-items:center;isolation:isolate;
  border:0;background:none;padding:0;cursor:pointer;  /* <button> vine cu fundal gri */
}
.house-art .art{width:clamp(96px,11vw,150px);position:relative;z-index:2;
  filter:drop-shadow(0 26px 38px rgba(0,0,0,.8))}
.house-art .pc-glow{opacity:.3;width:180%}
.house-label{
  font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--red);
}
.house h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(30px,4.4vw,58px);line-height:1;letter-spacing:-.02em;margin-top:12px;
}
.house p{margin-top:14px;max-width:46ch;font-size:14.5px;line-height:1.7;color:var(--dim-on-dark)}
.house-buy{display:flex;align-items:center;gap:18px;margin-top:24px;flex-wrap:wrap}
.house-buy .price{font-family:var(--display);font-size:28px}

@media (max-width:700px){
  .house{grid-template-columns:1fr;text-align:left;padding:28px 22px}
  .house-art{justify-items:start}
  .house-art .art{width:104px}
}

/* ============================================================
   CELE CINCI MOMENTE
   Home-ul e o poveste, nu o listă de secțiuni. Fiecare panou e o stare,
   cu produsul ei. Se alternează, ca să nu devină un ritm de tabel.
   ============================================================ */
.moment{
  position:relative;overflow:hidden;
  border-top:1px solid var(--line-dark);
  padding-block:clamp(56px,7vw,110px);
}
.moment-tint{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(70% 90% at 12% 50%,var(--c),transparent 68%);
  opacity:.09;
}
.moment.flip .moment-tint{background:radial-gradient(70% 90% at 88% 50%,var(--c),transparent 68%)}

.moment-in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(30px,5vw,84px);align-items:center;
}
.moment.flip .moment-in{direction:rtl}
.moment.flip .moment-in > *{direction:ltr}

.moment-when{
  display:block;font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--red);
}
.moment-word{
  font-family:var(--display);font-weight:400;
  font-size:clamp(52px,9.4vw,132px);line-height:.88;letter-spacing:-.035em;
  margin-top:14px;
}
.moment-word .dot{width:.13em;height:.13em;margin-left:.04em}
.moment-copy{
  margin-top:22px;max-width:44ch;
  font-size:15.5px;line-height:1.72;color:var(--dim-on-dark);
}

/* Produsul momentului, discret, sub text. */
.moment-buy{
  display:flex;align-items:center;gap:20px;
  margin-top:32px;padding-top:24px;border-top:1px solid var(--line-dark);
}
.moment-can{
  flex:0 0 auto;border:0;background:none;padding:0;cursor:pointer;
  display:grid;place-items:center;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.moment-can .art{width:clamp(48px,5.2vw,68px);filter:drop-shadow(0 14px 22px rgba(0,0,0,.7))}
.moment-can:hover{transform:translateY(-5px) rotate(-2deg)}
.moment-prod{min-width:0}
.moment-prod h3{font-family:var(--display);font-weight:400;font-size:20px;line-height:1.1}
.moment-prod > p{
  margin-top:5px;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(242,233,220,.4);
}
.moment-act{display:flex;align-items:center;gap:14px;margin-top:12px}
.moment-act .price{font-size:16px}

.moment-shot{
  margin:0;aspect-ratio:4/3;overflow:hidden;
  border:1px solid var(--line-dark);
}
.moment-shot img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.moment:hover .moment-shot img{transform:scale(1.04)}

/* ---------- Banda de încheiere ---------- */
.closing{border-top:1px solid var(--line-dark);text-align:center}
.closing-in .lead{margin-inline:auto}
.closing-btns{
  display:flex;align-items:center;justify-content:center;
  gap:24px;flex-wrap:wrap;margin-top:34px;
}
.closing-btns .link-arrow{margin-top:0}

@media (max-width:860px){
  .moment-in{grid-template-columns:1fr;gap:30px}
  .moment.flip .moment-in{direction:ltr}
  .moment-shot{order:-1;aspect-ratio:16/10}
  .moment-buy{gap:16px}
}
@media (prefers-reduced-motion:reduce){
  .moment:hover .moment-shot img,.moment-can:hover{transform:none}
}

/* ---------- Poarta de vârstă ---------- */
.gate{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;padding:24px;
  background:rgba(5,4,4,.95);backdrop-filter:blur(12px);
}
.gate-card{
  width:min(440px,100%);padding:44px 38px;text-align:center;
  background:#100D0C;border:1px solid var(--line-dark);
}
.gate .logo{font-size:30px;display:inline-block;margin-bottom:26px}
.gate h2{
  font-family:var(--display);font-weight:400;font-size:32px;line-height:1.12;
}
.gate p{margin-top:14px;font-size:13.5px;line-height:1.7;color:var(--dim-on-dark)}
.gate-btns{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.gate .btn-line{border:1px solid var(--line-dark);color:var(--off)}
.gate .btn-line:hover{background:var(--off);color:var(--black);border-color:var(--off)}
.gate-no{margin-top:22px;font-size:12px;color:rgba(242,233,220,.4);line-height:1.6}

/* ---------- 404 ---------- */
.notfound{
  min-height:78svh;display:grid;place-items:center;
  padding-top:calc(var(--header-h) + 40px);
}
.notfound-in{max-width:56ch}
.notfound .h1{margin-top:16px}
.notfound-btns{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:36px}
.notfound-btns .link-arrow{margin-top:0}

/* ============================================================
   TURNAREA
   Doza se înclină, jetul curge, paharul se umple. Trei animații
   decalate, pornite de o singură clasă pe scenă.
   ============================================================ */
.pdp-stage{display:grid;place-items:center;width:100%}
.pour{display:block;width:100%;height:auto;max-width:240px;overflow:visible}

/* Starea scenei (unghi, nivel, jet) o desenează JS-ul — vezi drawPour().
   Fără keyframes: aceeași fizică servește și animația, și înclinarea. */
.pour-drag{cursor:grab;touch-action:none}
.pour-drag:active{cursor:grabbing}
.pour-drag:focus{outline:none}
.pour-drag:focus-visible{outline:2px solid var(--red);outline-offset:8px}

/* Butonul — inelul de pe capac, ca gest de deschidere. */
.pour-btn{
  display:inline-flex;align-items:center;gap:10px;margin-top:20px;
  padding:10px 20px;border:1px solid var(--line-dark);border-radius:100px;
  font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim-on-dark);transition:.25s;
}
.pour-btn:hover{color:var(--off);border-color:var(--off)}
.pour-ring{
  width:13px;height:13px;border:2px solid currentColor;border-radius:50%;
  position:relative;flex:0 0 auto;
}
.pour-ring::after{
  content:"";position:absolute;left:50%;top:100%;
  width:2px;height:5px;background:currentColor;transform:translateX(-50%);
}
.pour-btn:hover .pour-ring{transform:rotate(-18deg)}
.pour-ring{transition:transform .3s}


/* ============================================================
   BUSOLA DE GUSTURI
   Al treilea mod de vizualizare. Se arată doar în modul hartă;
   în grilă și listă stă ascunsă, ca să nu încarce pagina.
   ============================================================ */
[data-compass]{display:none}
body.is-map [data-compass]{display:block;padding-block:clamp(26px,3vw,44px)}
body.is-map [data-house],
body.is-map .menu-wrap,
body.is-map .menu-nav{display:none}

.compass{
  display:grid;grid-template-columns:1fr 300px;
  gap:clamp(24px,3.4vw,52px);align-items:stretch;
}
.compass-plot{
  position:relative;aspect-ratio:1;
  border:1px solid var(--line-dark);
  background:
    radial-gradient(60% 60% at 50% 50%,rgba(242,233,220,.035),transparent 70%),
    linear-gradient(180deg,rgba(242,233,220,.02),transparent);
}
.ax{position:absolute;background:var(--line-dark)}
.ax-x{left:0;right:0;top:50%;height:1px}
.ax-y{top:0;bottom:0;left:50%;width:1px}
.ax-lab{
  position:absolute;font-size:10px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(242,233,220,.34);
}
.lab-dry{left:12px;top:50%;transform:translateY(-50%)}
.lab-sweet{right:12px;top:50%;transform:translateY(-50%)}
.lab-strong{top:12px;left:50%;transform:translateX(-50%)}
.lab-light{bottom:12px;left:50%;transform:translateX(-50%)}

.tdot{
  position:absolute;width:15px;height:15px;border-radius:50%;
  background:var(--c);transform:translate(-50%,50%);
  box-shadow:0 0 0 0 var(--c);
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,opacity .3s;
}
.tdot::after{
  content:"";position:absolute;inset:-9px;border-radius:50%;
}
.tdot-name{
  position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  padding:4px 9px;border-radius:3px;white-space:nowrap;
  background:var(--black);border:1px solid var(--line-dark);
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--off);
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.tdot:hover,.tdot.on,.tdot:focus-visible{
  transform:translate(-50%,50%) scale(1.5);
  box-shadow:0 0 0 7px color-mix(in srgb,var(--c) 26%,transparent);
  z-index:3;
}
.dot:hover .dot-name,.dot.on .dot-name,.dot:focus-visible .tdot-name{opacity:1}
.compass-plot:hover .tdot:not(.on){opacity:.4}

.compass-read{
  border:1px solid var(--line-dark);padding:26px 24px;
  display:flex;align-items:center;
}
.compass-hint{font-size:13.5px;line-height:1.7;color:var(--dim-on-dark)}
.compass-card{width:100%}
.compass-can{display:grid;place-items:center;margin-bottom:18px}
.compass-can .art{width:74px;filter:drop-shadow(0 16px 24px rgba(0,0,0,.7))}
.compass-card h3{font-family:var(--display);font-weight:400;font-size:25px;line-height:1.1;margin-top:8px}
.compass-card > p{margin-top:8px;font-size:13px;color:var(--dim-on-dark)}
.compass-act{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line-dark);
}

@media (max-width:860px){
  .compass{grid-template-columns:1fr}
  .compass-read{min-height:150px}
}

/* ============================================================
   BENZILE DE TIMP
   Pagina se răcește cu ora. După 22 scade un prag de luminozitate
   și accentul se închide — site-ul intră în tura de seară.
   ============================================================ */
.band-line{
  margin-top:18px;max-width:46ch;
  font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);
}
.band-line:empty{display:none}

html[data-band="late"]{
  --off:#E2D9CC;
  --red:#E0313A;
  --dim-on-dark:rgba(226,217,204,.5);
}
html[data-band="late"] body{background:#050404}
html[data-band="late"] .hero::after{
  background:
    linear-gradient(90deg, rgba(5,4,4,.95) 0%, rgba(5,4,4,.78) 34%, rgba(5,4,4,.2) 72%),
    linear-gradient(180deg, rgba(5,4,4,.8) 0%, transparent 34%, rgba(5,4,4,.7) 100%);
}
html[data-band="late"] body::after{opacity:.07}

html[data-band="morning"]{--dim-on-dark:rgba(242,233,220,.66)}

/* ---------- Perechea ---------- */
.pdp-next{
  display:flex;align-items:center;gap:14px;width:100%;
  margin-top:26px;padding:14px 16px;text-align:left;
  border:1px solid var(--line-dark);
  transition:border-color .3s,background .3s;
}
.pdp-next:hover{border-color:var(--off);background:rgba(242,233,220,.04)}
.pdp-next-can{flex:0 0 auto;width:26px;display:grid;place-items:center}
.pdp-next-can .art{width:26px}
.pdp-next-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.pdp-next-txt em{
  font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(242,233,220,.4);
}
.pdp-next-txt strong{font-family:var(--display);font-weight:400;font-size:19px;line-height:1.1}
.pdp-next-arrow{flex:0 0 auto;color:var(--dim-on-dark);transition:transform .3s}
.pdp-next:hover .pdp-next-arrow{transform:translateX(5px);color:var(--red)}

/* Panoul preia culoarea produsului prin --red, care e deja variabila de accent.
   Trecerea e lină ca să nu clipească la deschidere. */
.pdp,.pdp-bg{transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .35s,visibility .35s}
html{transition:none}

/* ============================================================
   RAFTUL
   Toate dozele, una lângă alta, ca pe un raft de bar. Derulare
   laterală cu roata sau cu degetul.
   ============================================================ */
.shelf{border-top:1px solid var(--line-dark);overflow:hidden}
.shelf-wrap{position:relative;margin-top:clamp(30px,4vw,54px)}
.shelf-rail{
  display:flex;align-items:flex-end;gap:clamp(18px,2.4vw,38px);
  overflow-x:auto;overscroll-behavior-x:contain;
  padding:10px var(--pad) 0;
  scroll-snap-type:x proximity;scrollbar-width:none;
}
.shelf-rail::-webkit-scrollbar{display:none}

.shelf-can{
  position:relative;flex:0 0 auto;width:clamp(64px,7.4vw,96px);
  display:flex;flex-direction:column;align-items:center;
  scroll-snap-align:center;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.shelf-can .art{
  width:100%;position:relative;z-index:2;
  filter:drop-shadow(0 18px 20px rgba(0,0,0,.8));
}
.shelf-glow{
  position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
  width:190%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--c),transparent 62%);
  opacity:.12;filter:blur(26px);transition:opacity .45s;
}
.shelf-can:hover{transform:translateY(-14px)}
.shelf-can:hover .shelf-glow{opacity:.36}

.shelf-name{
  margin-top:14px;font-size:11px;line-height:1.3;text-align:center;
  color:var(--dim-on-dark);transition:color .3s;
}
.shelf-abv{
  margin-top:3px;font-size:9.5px;letter-spacing:.14em;
  color:rgba(242,233,220,.3);
}
.shelf-can:hover .shelf-name{color:var(--off)}

/* Linia raftului, sub doze. */
.shelf-floor{
  height:1px;margin-top:-34px;
  background:linear-gradient(90deg,transparent,var(--line-dark) 12%,var(--line-dark) 88%,transparent);
}
.shelf-rail{padding-bottom:36px}

@media (prefers-reduced-motion:reduce){
  .shelf-can:hover{transform:none}
}

/* ============================================================
   CUTIA PE CARE O COMPUI SINGUR
   Click, nu drag. Șase locuri, reducere la al șaselea.
   ============================================================ */
.builder{
  display:grid;grid-template-columns:minmax(0,340px) 1fr;
  gap:clamp(26px,4vw,60px);align-items:start;margin-top:clamp(28px,3.4vw,46px);
}

.builder-box{
  position:sticky;top:calc(var(--header-h) + 20px);
  border:1px solid var(--line-dark);
  background:linear-gradient(180deg,rgba(242,233,220,.045),rgba(242,233,220,.012));
}
.bbox{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  padding:24px 22px;
}
.bslot{
  aspect-ratio:2/3;display:grid;place-items:center;
  border-radius:3px;transition:.35s;
}
.bslot.empty{
  border:1px dashed rgba(242,233,220,.16);
  background:rgba(0,0,0,.25);
}
.bslot.full{
  position:relative;
  background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--c) 30%,transparent),transparent 68%);
}
.bslot.full .art{width:76%;filter:drop-shadow(0 10px 14px rgba(0,0,0,.75))}
.bslot.full::after{
  content:"\00d7";position:absolute;top:4px;right:6px;
  font-size:14px;line-height:1;color:rgba(242,233,220,.4);
  opacity:0;transition:opacity .25s;
}
.bslot.full:hover::after{opacity:1}
.bslot.full:hover{background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--c) 44%,transparent),transparent 68%)}

.bbox-sum{padding:0 22px 22px;border-top:1px solid var(--line-dark);margin-top:4px;padding-top:18px}
.bbox-line{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
}
.bbox-line span:first-child{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim-on-dark);
}
.bbox-line span:last-child{font-family:var(--display);font-size:28px}
.bbox-note{margin-top:8px;font-size:12px;line-height:1.6;color:rgba(242,233,220,.42)}
.is-full .bbox-note{color:var(--red)}
.bbox-sum .btn{margin-top:18px}
.bbox-sum .btn:disabled{opacity:.35;cursor:not-allowed}

.builder-pick{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));
  gap:8px;
}
.bpick{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 8px 12px;border:1px solid transparent;border-radius:3px;
  transition:border-color .3s,background .3s,transform .3s;
}
.bpick .art{width:38px;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.bpick-name{
  font-size:10px;line-height:1.3;text-align:center;color:var(--dim-on-dark);
}
.bpick:hover{
  border-color:rgba(242,233,220,.18);
  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--c) 18%,transparent),transparent 70%);
}
.bpick:hover .art{transform:translateY(-4px) scale(1.08)}
.bpick.flew .art{animation:flyIn .42s cubic-bezier(.4,0,.2,1)}
@keyframes flyIn{
  0%  {transform:translateY(-4px) scale(1.08)}
  45% {transform:translateY(-26px) scale(.8);opacity:.5}
  100%{transform:translateY(0) scale(1);opacity:1}
}

@media (max-width:860px){
  .builder{grid-template-columns:1fr}
  .builder-box{position:static}
  .builder-pick{grid-template-columns:repeat(auto-fill,minmax(74px,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .bpick.flew .art{animation:none}
  .bpick:hover .art{transform:none}
}

/* Linia de reducere se distinge de restul sumarului. */
.sum li[data-bundle-row] span:last-child{color:var(--red);font-weight:500}

/* ============================================================
   „SPUNE-NE MOMENTUL TĂU"
   Nu newsletter, ci o întrebare. Răspunsul spune și ce să se producă.
   ============================================================ */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.signup{max-width:720px;margin-top:clamp(26px,3vw,40px)}
.signup-moods{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.signup-moods legend{padding:0;margin-bottom:14px;float:left;width:100%}
.mchip{position:relative;cursor:pointer}
.mchip input{position:absolute;opacity:0;width:0;height:0}
.mchip span{
  display:inline-block;padding:10px 18px;border-radius:100px;
  border:1px solid var(--line-dark);
  font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.16em;color:var(--dim-on-dark);transition:.25s;
}
.mchip:hover span{color:var(--off);border-color:rgba(242,233,220,.4)}
.mchip input:checked + span{background:var(--red);border-color:var(--red);color:#fff}
.mchip input:focus-visible + span{outline:2px solid var(--red);outline-offset:3px}

.signup-form{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.signup-form input{
  flex:1 1 260px;min-width:0;padding:0 18px;height:48px;
  background:rgba(242,233,220,.04);border:1px solid var(--line-dark);
  color:var(--off);font-family:var(--sans);font-size:15px;
  transition:border-color .25s;
}
.signup-form input::placeholder{color:rgba(242,233,220,.3)}
.signup-form input:focus{outline:none;border-color:var(--off)}
.signup-form .btn{flex:0 0 auto;height:48px}
.signup-note{margin-top:14px;font-size:12px;color:rgba(242,233,220,.4)}
.signup-note.done{color:var(--red)}

/* ============================================================
   ETAPA 4 — evenimente, carduri cadou, rotirea dozei, tăria,
   cardul distribuibil, last call, sunet.
   ============================================================ */

/* Butonul cu contur, folosit acum și în afara porții de vârstă. */
.btn-line{border:1px solid var(--line-dark);color:var(--off);background:transparent}
.btn-line:hover{border-color:var(--red);color:#fff}

/* ---------- Glisoare ----------
   Un singur stil pentru toate: tăria din meniu și planificatorul.
   --p (umplerea) îl setează shop.js. */
input[type="range"]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:20px;margin:0;background:transparent;cursor:pointer;--p:100%;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--red) var(--p),rgba(242,233,220,.18) var(--p));
}
input[type="range"]::-moz-range-track{height:2px;border-radius:2px;background:rgba(242,233,220,.18)}
input[type="range"]::-moz-range-progress{height:2px;border-radius:2px;background:var(--red)}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;margin-top:-7px;border:0;border-radius:50%;
  background:var(--off);box-shadow:0 0 0 4px rgba(7,6,5,.9);transition:transform .2s;
}
input[type="range"]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--off)}
input[type="range"]:active::-webkit-slider-thumb{transform:scale(1.25)}
input[type="range"]:focus-visible{outline:2px solid var(--red);outline-offset:4px}

/* ---------- Tăria, în bara de unelte a meniului ---------- */
.tool-abv{display:flex;align-items:center;gap:12px;flex:1 1 260px;max-width:380px}
.tool-abv-lab{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim-on-dark);
}
.tool-abv input{flex:1;min-width:90px}
.tool-abv output{
  min-width:8.6em;font-size:12px;color:var(--off);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.tdot{transition:opacity .35s,filter .35s}
.tdot.is-out{opacity:.12;filter:grayscale(1);pointer-events:none}

/* ---------- Last call ---------- */
.lastcall{
  display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;
  border:1px solid color-mix(in srgb,var(--red) 55%,transparent);border-radius:100px;
  font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;transition:background .25s,border-color .25s;
}
.lastcall:hover{background:var(--red);border-color:var(--red);color:#fff}
.lastcall i{width:7px;height:7px;border-radius:50%;background:var(--red);animation:lcPulse 1.6s ease-out infinite}
.lastcall:hover i{background:#fff}
.lastcall b{font-weight:600;letter-spacing:.06em;font-variant-numeric:tabular-nums}
@keyframes lcPulse{
  0%  {box-shadow:0 0 0 0 color-mix(in srgb,var(--red) 70%,transparent)}
  100%{box-shadow:0 0 0 7px color-mix(in srgb,var(--red) 0%,transparent)}
}
/* Unde headerul e plin (nav întreg + buton) sau ecranul e mic, rămâne doar ceasul. */
.nav a{white-space:nowrap}
@media (min-width:861px) and (max-width:1080px),(max-width:520px){
  .lastcall{padding:0 11px;gap:6px}
  .lastcall span{display:none}
}

/* ---------- Doza care se rotește + sunetul ---------- */
.can-spin{cursor:grab;touch-action:pan-y;border-radius:10px;-webkit-user-select:none;user-select:none}
.can-spin.turning{cursor:grabbing}
.can-spin:focus{outline:none}
.can-spin:focus-visible{outline:2px solid var(--red);outline-offset:8px}
.turn-hint{
  margin-top:12px;font-size:10px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(242,233,220,.42);transition:opacity .5s;
}
.can-spin.turned + .turn-hint,.turn-hint:empty{opacity:0}
.turn-hint{min-height:1.6em;text-align:center}
.pdp-art{align-content:center}
.pour-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:16px}
.tilt-ico{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;flex:0 0 auto}
.pour-row .pour-btn{margin-top:0}
.sound-btn{
  width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid var(--line-dark);border-radius:50%;color:var(--dim-on-dark);transition:.25s;
}
.sound-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sound-btn svg path:first-child{fill:currentColor;stroke:none}
.sound-btn .wave{opacity:.22;transition:opacity .25s}
.sound-btn:hover,.sound-btn[aria-pressed="true"]{color:var(--off);border-color:var(--off)}
.sound-btn[aria-pressed="true"] .wave{opacity:1}

/* ---------- Cardul „momentul meu" ---------- */
.share-row{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:30px;padding-top:26px;border-top:1px solid var(--line-dark);
}
.share-row span{flex:1 1 240px;font-size:12.5px;color:rgba(242,233,220,.5)}
.card-modal{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;
  background:rgba(7,6,5,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.card-box{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px}
.card-canvas{
  display:block;height:auto;width:min(calc(100vw - 48px),58vh,560px);
  border-radius:10px;box-shadow:0 40px 90px -30px rgba(0,0,0,.95),0 0 0 1px rgba(242,233,220,.08);
  animation:cardIn .55s cubic-bezier(.2,.8,.2,1);
}
.card-box .pdp-x{top:-14px;right:-14px}
.card-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.card-note{font-size:13px;color:var(--dim-on-dark);text-align:center;max-width:36ch}
@keyframes cardIn{from{opacity:0;transform:translateY(26px) scale(.96)}}

/* ---------- Seturi de opțiuni și bile de culoare (laboratorul) ---------- */
.gf-set{border:0;padding:0;margin:0 0 26px}
.gf-leg{
  float:left;width:100%;padding:0;margin-bottom:12px;
  font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dim-on-dark);
}
.gf-cols{clear:both;display:flex;flex-wrap:wrap;gap:12px}
.gf-col{position:relative;cursor:pointer}
.gf-col input{position:absolute;opacity:0;width:0;height:0}
.gf-col > span{
  display:block;width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 70%,#fff),var(--c) 55%,color-mix(in srgb,var(--c) 60%,#000));
  transition:box-shadow .25s,transform .25s;
}
.gf-col:hover > span{transform:scale(1.08)}
.gf-col input:checked + span{box-shadow:0 0 0 3px var(--black),0 0 0 4.5px var(--off)}
.gf-col input:focus-visible + span{outline:2px solid var(--red);outline-offset:5px}
.gf-left{float:right;font-style:normal;font-weight:500;opacity:.6;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  .card-canvas,.lastcall i{animation:none}
}

/* ============================================================
   CELE ȘASE IDEI — vreme, swipe, laboratorul, masa, povestea dozei
   ============================================================ */

/* ---------- Vremea, sub linia de oră din hero ---------- */
.wx-line{
  display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-top:10px;max-width:56ch;
  font-size:13.5px;line-height:1.5;color:rgba(242,233,220,.78);
}
.wx-line a{color:var(--off);font-weight:500;border-bottom:1px solid color-mix(in srgb,var(--red) 70%,transparent);transition:color .25s}
.wx-line a:hover{color:var(--red)}
.wx-dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex:0 0 auto;box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 18%,transparent)}

/* ---------- Butonul care pornește swipe-urile ---------- */
.swipe-cta{
  display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:10px 18px 10px 12px;
  border:1px solid var(--line-dark);border-radius:100px;background:rgba(7,6,5,.35);
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--off);
  transition:border-color .25s,background .25s;
}
.swipe-cta:hover{border-color:var(--red);background:color-mix(in srgb,var(--red) 14%,transparent)}
.swipe-ico{position:relative;width:26px;height:20px;flex:0 0 auto}
.swipe-ico i{
  position:absolute;top:0;width:14px;height:20px;border-radius:3px;border:1.5px solid currentColor;
}
.swipe-ico i:first-child{left:0;opacity:.45;transform:rotate(-12deg)}
.swipe-ico i:last-child{left:10px;background:var(--red);border-color:var(--red);animation:swipeHint 2.4s ease-in-out infinite}
@keyframes swipeHint{
  0%,55%,100%{transform:translateX(0) rotate(0)}
  70%{transform:translateX(5px) rotate(12deg)}
  85%{transform:translateX(-3px) rotate(-6deg)}
}
.page-head .swipe-cta{margin-top:26px}

/* ---------- Fereastra cu cartonașe ---------- */
.quiz{
  position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:20px;
  background:rgba(7,6,5,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.quiz-box{
  position:relative;width:min(460px,100%);max-height:100%;overflow:auto;
  padding:26px 24px 24px;border:1px solid var(--line-dark);border-radius:14px;
  background:radial-gradient(120% 70% at 50% 0%,rgba(242,233,220,.06),transparent 70%),#0d0b0a;
  animation:cardIn .45s cubic-bezier(.2,.8,.2,1);
}
.quiz-box .pdp-x{top:14px;right:14px}
.quiz-top{display:flex;align-items:baseline;gap:14px;padding-right:44px}
.quiz-kicker{font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--red)}
.quiz-n{font-size:11px;letter-spacing:.14em;color:var(--dim-on-dark);font-variant-numeric:tabular-nums}

.quiz-deck{position:relative;height:340px;margin:22px 0 18px;touch-action:pan-y}
.qcard{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:26px 20px 18px;border-radius:12px;cursor:grab;user-select:none;-webkit-user-select:none;
  background:linear-gradient(160deg,#1d1a18,#0f0d0c 70%);border:1px solid rgba(242,233,220,.12);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9);touch-action:none;
}
.qcard:active{cursor:grabbing}
.qcard-back{transform:translateY(12px) scale(.94);opacity:.5;pointer-events:none}
.qcard-q{font-family:var(--display);font-size:clamp(30px,6vw,40px);line-height:1;text-align:center}
.qcard-poles{display:flex;align-items:center;justify-content:center;gap:22px;width:100%}
.qpole{display:flex;flex-direction:column;align-items:center;gap:10px;transition:transform .25s,opacity .25s}
.qpole-can{position:relative;display:block}
.qpole-can .art{width:54px;height:auto;filter:drop-shadow(0 16px 18px rgba(0,0,0,.7))}
.qpole-lab{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-on-dark)}
.qcard-or{font-family:var(--display);font-style:normal;font-weight:300;font-size:20px;color:rgba(242,233,220,.4)}
.qcard-hint{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(242,233,220,.35)}
.qcard.lean-l .qpole-l,.qcard.lean-r .qpole-r{transform:scale(1.14)}
.qcard.lean-l .qpole-r,.qcard.lean-r .qpole-l{opacity:.3}
.qcard.lean-l .qpole-l .qpole-lab,.qcard.lean-r .qpole-r .qpole-lab{color:var(--off)}

.quiz-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quiz-pick{
  height:48px;padding:0 14px;border:1px solid var(--line-dark);border-radius:100px;
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--off);
  transition:border-color .25s,background .25s;
}
.quiz-pick b{font-weight:600}
.quiz-pick:hover,.quiz-pick:focus-visible{border-color:var(--red);background:color-mix(in srgb,var(--red) 16%,transparent);outline:none}

.quiz-res{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;margin-top:18px;animation:cardIn .5s cubic-bezier(.2,.8,.2,1)}
.qres-can{position:relative;isolation:isolate;padding:10px}
.qres-can .art{position:relative;z-index:2;width:96px;height:auto;filter:drop-shadow(0 26px 30px rgba(0,0,0,.8))}
.qres-txt h3{margin-top:8px;font-family:var(--display);font-weight:400;font-size:38px;line-height:1}
.qres-txt > p{margin-top:8px;font-size:13.5px;color:var(--dim-on-dark)}
.qres-alt b{color:var(--off);font-weight:500}
.qres-act{display:flex;align-items:center;gap:14px;margin-top:18px}
.qres-more{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:16px;font-size:13px}
.quiz-again{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-on-dark);border-bottom:1px solid var(--line-dark);padding-bottom:2px}
.quiz-again:hover{color:var(--off);border-color:var(--off)}
.tdot.is-mine{outline:2px solid var(--off);outline-offset:4px}
@media (max-width:420px){
  .quiz-res{grid-template-columns:1fr;justify-items:center;text-align:center}
  .qres-act,.qres-more{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .swipe-ico i:last-child,.quiz-box,.quiz-res{animation:none}
}

/* ---------- Laboratorul ---------- */
.lab{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,84px);align-items:start}
.lab-stage{
  position:sticky;top:calc(var(--header-h) + 30px);isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;padding:34px 0 10px;
}
.lab-stage .pc-glow{top:44%;width:120%;opacity:.34;transition:background .4s}
.lab-can{position:relative;z-index:2}
.lab-can .art{width:clamp(160px,19vw,230px);height:auto;filter:drop-shadow(0 44px 54px rgba(0,0,0,.85))}
.lab-stage .turn-hint{position:relative;z-index:2}
.lab-flavs{clear:both;display:flex;flex-wrap:wrap;gap:8px}
.mchip input:disabled + span{opacity:.3;cursor:not-allowed}
.gf-custom > span{background:conic-gradient(from 20deg,#e0313a,#e0a13a,#6aa84f,#3a9ec7,#6a4fc7,#c74f9e,#e0313a)}
.gf-custom input{inset:0;width:100%;height:100%;cursor:pointer}
.lab-match{
  display:flex;align-items:center;gap:20px;margin-top:30px;padding:22px 24px;
  border:1px solid var(--line-dark);border-radius:8px;
  background:radial-gradient(120% 90% at 0% 0%,rgba(242,233,220,.05),transparent 70%);
}
.lab-match-can .art{width:58px;height:auto;filter:drop-shadow(0 14px 16px rgba(0,0,0,.7))}
.lab-match-txt h2{margin-top:6px;font-family:var(--display);font-weight:400;font-size:34px;line-height:1}
.lab-match-txt p{margin-top:6px;font-size:13.5px;color:var(--dim-on-dark)}
.lab-match-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px}
.lab-match-act .btn{height:36px;padding:0 16px;font-size:12px}
.lab-link{margin-top:18px;font-size:13px}
.page-head .lab-link{margin-left:20px}
@media (max-width:860px){
  .lab{grid-template-columns:1fr}
  .lab-stage{position:relative}   /* nu static: altfel overflow:hidden nu mai taie haloul */
  .page-head .lab-link{margin-left:0;display:flex;width:max-content}
}

/* ---------- Masa: bara de jos, linkul, împărțirea notei ---------- */
.table-bar{
  /* centrată cu margin:auto, nu cu transform — animația de intrare folosește transform */
  position:fixed;left:0;right:0;bottom:16px;z-index:70;margin:0 auto;
  width:min(1040px,calc(100% - 24px));
  border:1px solid color-mix(in srgb,var(--red) 45%,transparent);border-radius:14px;
  background:linear-gradient(100deg,color-mix(in srgb,var(--red) 20%,#0d0b0a),rgba(13,11,10,.97) 55%);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8);
  animation:cardIn .45s cubic-bezier(.2,.8,.2,1);
}
.table-bar-in{
  position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;
  padding:12px 52px 12px 18px;max-width:none;
}
.table-who{flex:1 1 220px;font-size:13px;line-height:1.4;color:var(--dim-on-dark)}
.table-who b{display:block;font-family:var(--display);font-weight:400;font-size:21px;color:var(--off)}
.table-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.table-form input{
  width:150px;height:40px;padding:0 14px;border:1px solid var(--line-dark);border-radius:2px;
  background:rgba(242,233,220,.05);color:var(--off);font:inherit;font-size:14px;
}
.table-form input:focus{outline:none;border-color:var(--off)}
.table-form .btn{height:40px;padding:0 16px;font-size:12.5px}
.table-url{
  flex:1 1 100%;height:34px;padding:0 12px;border:1px dashed var(--line-dark);border-radius:2px;
  background:transparent;color:var(--dim-on-dark);font:inherit;font-size:12px;
}
.table-leave{
  position:absolute;top:10px;right:12px;width:30px;height:30px;border-radius:50%;
  font-size:18px;line-height:1;color:var(--dim-on-dark);transition:.25s;
}
.table-leave:hover{background:rgba(242,233,220,.08);color:var(--off)}
body:has(.table-bar){padding-bottom:130px}
body:has(.cart-bar.show) .table-bar{bottom:88px}

.split,.table-start{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-dark)}
.split-t{font-family:var(--display);font-weight:400;font-size:24px;margin-bottom:6px}
.table-start-t{font-size:13.5px;line-height:1.6;color:var(--dim-on-dark);margin-bottom:14px}
.table-start-t b{color:var(--off);font-weight:500}
.table-start .table-form input{flex:1 1 120px;width:auto}
@media (max-width:560px){
  .table-bar{bottom:10px}
  .table-bar-in{padding:10px 40px 12px 14px;gap:8px}
  .table-who b{display:inline;font-size:17px;margin-right:6px}
  .table-form{width:100%}
  .table-form input{flex:1 1 110px;width:auto;height:38px}
  .table-form .btn{height:38px;padding:0 12px}
  .table-form .btn-line{flex:1 1 100%}
  body:has(.table-bar){padding-bottom:190px}
}
@media (prefers-reduced-motion:reduce){ .table-bar{animation:none} }

/* ---------- Cum se face o doză (About) ---------- */
.make{position:relative;padding-block:var(--sec-y);background:var(--black);border-top:1px solid var(--line-dark)}
.make-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px);align-items:start}
.make-stage{
  position:sticky;top:calc(var(--header-h) + 6vh);height:78vh;
  display:grid;place-items:center;isolation:isolate;
}
.make-stage::before{
  content:"";position:absolute;left:50%;top:50%;width:90%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(78,122,58,.32),transparent 62%);filter:blur(30px);z-index:-1;
}
.make-can{height:min(66vh,580px);width:auto;overflow:visible;filter:drop-shadow(0 50px 60px rgba(0,0,0,.8))}
.mk-bubbles circle{fill:#fff;opacity:.55;animation:mkRise 2.4s linear infinite}
.mk-bubbles circle:nth-child(2n){animation-duration:1.9s;animation-delay:-.7s}
.mk-bubbles circle:nth-child(3n){animation-duration:2.8s;animation-delay:-1.4s}
@keyframes mkRise{
  0%  {transform:translateY(0);opacity:0}
  15% {opacity:.6}
  100%{transform:translateY(-140px);opacity:0}
}
.make-n{
  position:absolute;right:4%;bottom:6%;font-family:var(--display);font-weight:300;
  font-size:clamp(60px,8vw,120px);line-height:1;color:rgba(242,233,220,.08);
}
.make-steps .h2{margin-bottom:10vh}
.make-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;transition:opacity .5s}
.js .make-step{opacity:.22}
.js .make-step.on{opacity:1}
.make-step .lead{margin-top:14px;max-width:40ch}
@media (max-width:860px){
  .make-in{grid-template-columns:1fr;gap:0}
  .make-stage{
    top:var(--header-h);height:44vh;z-index:2;
    background:linear-gradient(180deg,var(--black) 82%,transparent);
  }
  .make-can{height:36vh}
  .make-steps{position:relative;z-index:1}
  .make-steps .h2{margin-bottom:4vh}
  .make-step{min-height:55vh}
}
@media (prefers-reduced-motion:reduce){
  .mk-bubbles circle{animation:none}
}


/* ============================================================
   FONTUL CERUT DE ȘEF
   Bruno Ace are o singură grosime și e foarte lat: titlurile merg cu
   majuscule, mai mici decât înainte, iar grosimea falsă e oprită
   (font-synthesis), altfel browserul îngroașă literele de la sine.
   ============================================================ */
.h1,.h2,.h3,.hero-title,.group-title,.menu-cat-title,.pdp-body h2,
.moment-word,.house h2,.qcard-q,.qres-txt h3,.lab-match-txt h2,
.split-t,.table-who b,.footer-tag,.gate h2{
  font-family:var(--display);font-weight:400;font-synthesis:none;
  text-transform:uppercase;letter-spacing:.03em;
}
.display-em,.h1 em,.h2 em,.hero-title em{font-weight:400}
.hero-title{font-size:clamp(34px,5.6vw,80px);line-height:1.04}
.h1,.page-head .h1{font-size:clamp(28px,4.6vw,62px);line-height:1.08}
.h2{font-size:clamp(22px,3.3vw,44px);line-height:1.12}
.h3{font-size:clamp(16px,1.7vw,21px);line-height:1.28}
.group-title{font-size:clamp(28px,4.8vw,62px)}
.menu-group-boxes .group-title{font-size:clamp(24px,3.6vw,44px)}
.menu-cat-title{font-size:clamp(18px,2.2vw,28px)}
.pdp-body h2{font-size:clamp(20px,2.4vw,28px);line-height:1.16}
.house h2{font-size:clamp(22px,2.8vw,38px);line-height:1.12}
.moment-word{font-size:clamp(34px,6.2vw,86px);line-height:1.02}
.qcard-q{font-size:clamp(20px,4vw,26px);line-height:1.18}
.qres-txt h3{font-size:24px;line-height:1.12}
.lab-match-txt h2{font-size:22px;line-height:1.12}
.split-t{font-size:16px}
.table-who b{font-size:15px}
.footer-tag{font-size:14px}
.gate h2{font-size:clamp(20px,3vw,28px);line-height:1.2}

/* Numele de produs mici și întrebările rămân în fontul de text: un font
   atât de lat, cu majuscule, nu încape în carduri. */
.pc-body h4,.pick h3,.compass-card h3,.pdp-next-txt strong,.moment-prod h3,
.faq summary h3,.review blockquote p{
  font-family:var(--sans);font-weight:600;text-transform:none;letter-spacing:-.005em;
}
.review blockquote p{font-weight:400}

/* Punctul e rotund, ca pe doza și în logoul șefului. */
.dot{border-radius:50%}

/* Logoul desenat: R + E din trei linii + punct. Culoarea urmează textul,
   punctul urmează --red (deci și culoarea dozei deschise). */
.logo-svg{display:block;height:.82em;width:auto;overflow:visible}
.logo-svg path{fill:none;stroke:currentColor;stroke-width:5.8;stroke-linecap:round;stroke-linejoin:round}
.logo-svg .ld{fill:var(--red)}
.logo{display:inline-flex;align-items:center}
.hero-logo{display:inline-block}
.hero-logo .logo-svg{height:.74em}

/* ============================================================
   CATIFEA — culori mate, umbre pe litere, cuvinte RE
   Cerut de șef: nu doar alb-negru. Fiecare secțiune are culoarea ei de
   catifea (burgund, prună, smarald, bleumarin), mată, cu o lucire moale
   dintr-un colț — cum prinde lumina o țesătură, nu un lac. Granulația de
   peste pagină face restul.
   ============================================================ */
:root{
  --black:#0B0508;          /* negru cu vin în el, nu negru de ecran */
  --wine:#3E0B1B;           /* burgund */
  --plum:#26102B;           /* prună */
  --emerald:#0C2620;        /* smarald */
  --navy:#0E1531;           /* bleumarin de noapte */
  --amber:#D9A55B;          /* auriu mat — al doilea accent */
  --v:var(--black);         /* culoarea catifelei din secțiunea curentă */
}

/* Rețeta catifelei: lucire moale sus-stânga, umbră adâncă jos-dreapta. */
.page-head,.signup-sec,.shelf,.closing,.sec-light,.cta,.make,.footer,.marquee{
  background:
    radial-gradient(110% 80% at 12% 0%,color-mix(in srgb,var(--v),#fff 9%) 0%,transparent 58%),
    radial-gradient(90% 90% at 92% 110%,rgba(0,0,0,.55),transparent 62%),
    var(--v);
}
.page-head{--v:var(--wine)}
.signup-sec{--v:var(--emerald)}
.shelf{--v:var(--navy)}
.closing,.cta{--v:var(--wine)}
.sec-light{--v:var(--plum)}
.make{--v:var(--emerald)}
.footer{--v:#12060B;border-top-color:color-mix(in srgb,var(--wine),#fff 12%)}
.marquee{
  --v:#A3142B;
  background:linear-gradient(90deg,#7A0E26,#C3162F 35%,#A3142B 65%,#6B0C22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.35);
}

/* Barele și suprafețele care stau peste pagină preiau aceeași nuanță de vin. */
.site-header.scrolled{background:rgba(20,7,12,.88)}
.mobile-menu{background:rgba(22,7,13,.97)}
.menu-nav{background:rgba(18,6,11,.92)}
.hero::after{
  background:
    linear-gradient(90deg,rgba(24,6,13,.93) 0%,rgba(24,6,13,.7) 34%,rgba(24,6,13,.05) 72%),
    linear-gradient(180deg,rgba(24,6,13,.75) 0%,transparent 34%,rgba(40,8,20,.6) 100%);
}
.pc{
  border-color:color-mix(in srgb,var(--wine),#fff 14%);
  background:linear-gradient(165deg,rgba(92,19,40,.22),rgba(11,5,8,.35) 60%);
}
.pc:hover{border-color:color-mix(in srgb,var(--amber) 55%,transparent)}

/* Butonul roșu: catifea, nu plastic — gradient mic, umbră caldă sub el. */
.btn-solid,.btn-dark{
  background:linear-gradient(180deg,#FF4A3D,#CF1F31);
  box-shadow:0 12px 26px -12px rgba(207,31,49,.75),inset 0 1px 0 rgba(255,255,255,.16);
}

/* Etichetele mici trec pe auriu: al doilea accent, ca să nu fie totul roșu. */
.eyebrow,.pdp-cat,.quiz-kicker,.house-label{color:var(--amber)}

/* ---------- Umbre pe litere ----------
   O umbră decalată, plină, în culoarea catifelei închisă — dă literelor
   grosime, ca imprimate în relief — plus o umbră moale dedesubt. */
.h1,.h2,.hero-title,.group-title,.moment-word,.house h2,.menu-cat-title,
.pdp-body h2,.qcard-q,.qres-txt h3,.lab-match-txt h2,.gate h2{
  text-shadow:
    .05em .055em 0 color-mix(in srgb,var(--v),#000 62%),
    .09em .12em .45em rgba(0,0,0,.5);
}
.hero-title{text-shadow:.05em .055em 0 #2A0712,.1em .14em .5em rgba(0,0,0,.6)}
.logo-svg{filter:drop-shadow(.06em .07em 0 rgba(0,0,0,.6))}
.hero-logo .logo-svg{filter:drop-shadow(.05em .06em 0 #2A0712) drop-shadow(0 .12em .3em rgba(0,0,0,.55))}

/* ---------- Cuvintele RE ----------
   main.js învelește „RE" de la începutul oricărui cuvânt din titluri. */
.re{color:var(--red)}
em .re,.moment-word .re{color:var(--amber)}
.marquee .re{color:#FFD9A0}
.re-rotor{
  display:flex;align-items:baseline;gap:.05em;margin-bottom:18px;
  font-family:var(--display);font-size:clamp(18px,2vw,26px);letter-spacing:.08em;
  text-transform:uppercase;color:var(--off);
  text-shadow:.06em .07em 0 #2A0712;
}
.re-rotor b{font-weight:400;color:var(--amber)}
.re-rotor span{display:inline-block;transition:opacity .35s ease,transform .35s ease}
.re-rotor span.out{opacity:0;transform:translateY(-45%)}
@media (prefers-reduced-motion:reduce){ .re-rotor span{transition:none} }

/* Momentele: catifea în culoarea dozei lor — verde la REFRESH, roșu la REWARD. */
.moment-tint{opacity:.34;background:radial-gradient(85% 100% at 12% 45%,var(--c),transparent 70%)}
.moment.flip .moment-tint{background:radial-gradient(85% 100% at 88% 45%,var(--c),transparent 70%)}
.moment-when{color:var(--amber)}

/* ============================================================
   O ZI CU RE — banda zilei, cerul trece de la auriu la bleumarin
   ============================================================ */
.day{padding-bottom:clamp(40px,5vw,72px)}
.day-rail{
  margin-top:clamp(26px,3vw,40px);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scrollbar-width:none;
}
.day-rail::-webkit-scrollbar{display:none}
.day-track{
  display:flex;width:max-content;min-width:100%;position:relative;
  background:
    radial-gradient(60% 90% at 20% 0%,rgba(255,236,200,.16),transparent 60%),
    linear-gradient(180deg,rgba(11,5,8,.2),rgba(11,5,8,.66)),
    var(--sky);
}
.day-stop{
  position:relative;display:flex;flex-direction:column;gap:10px;
  width:clamp(260px,26vw,340px);min-height:450px;padding:32px 28px 28px;
  border-right:1px solid rgba(255,255,255,.08);scroll-snap-align:start;
}
.day-stop.is-now{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(217,165,91,.55)}
.day-orb{
  width:34px;height:34px;border-radius:50%;margin-bottom:14px;
  background:radial-gradient(circle at 38% 38%,#FFEBC0,#F2B35A 58%,#D27F38);
  box-shadow:0 0 36px rgba(255,196,110,.55);
}
.day-orb.moon{background:transparent;box-shadow:inset -10px -4px 0 0 #F2E9DC,0 0 30px rgba(190,200,255,.25)}
.day-time{
  font-family:var(--display);font-size:clamp(30px,3.4vw,46px);line-height:1;letter-spacing:.02em;
  text-shadow:.05em .06em 0 rgba(0,0,0,.45),0 .15em .45em rgba(0,0,0,.4);
}
.day-time em{
  display:inline-block;vertical-align:middle;margin-left:8px;padding:3px 8px;border-radius:100px;
  background:var(--amber);color:#1a0d05;font:600 10px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;font-style:normal;
}
.day-word{
  font-family:var(--display);font-weight:400;font-size:clamp(18px,1.8vw,24px);letter-spacing:.04em;
  text-transform:uppercase;text-shadow:.05em .06em 0 rgba(0,0,0,.45);
}
.day-word .re{color:var(--amber)}
.day-line{font-size:14.5px;line-height:1.55;color:rgba(242,233,220,.82);max-width:26ch}
.day-buy{margin-top:auto;display:flex;align-items:flex-end;gap:14px}
.day-can .art{width:50px;height:auto;filter:drop-shadow(0 16px 18px rgba(0,0,0,.6));transition:transform .35s}
.day-can:hover .art{transform:translateY(-4px) rotate(-4deg)}
.day-buy strong{display:block;font-size:15px;font-weight:600}
.day-buy span{display:block;margin:2px 0 8px;font-size:12.5px;color:rgba(242,233,220,.72)}
@media (prefers-reduced-motion:reduce){ .day-can:hover .art{transform:none} }

/* ---------- REpeat: ultima comandă, dintr-un buton ---------- */
.repeat{
  display:inline-flex;align-items:center;gap:14px;margin-top:16px;padding:10px 20px 10px 12px;
  border:1px solid color-mix(in srgb,var(--amber) 55%,transparent);border-radius:100px;
  background:linear-gradient(100deg,rgba(217,165,91,.16),rgba(217,165,91,.04));
  text-align:left;transition:border-color .25s,background .25s;
}
.repeat:hover{border-color:var(--amber);background:rgba(217,165,91,.2)}
.repeat-ico{
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--amber);color:#1a0d05;font-size:18px;font-weight:700;line-height:1;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.repeat:hover .repeat-ico{transform:rotate(-200deg)}
.repeat-txt b{display:block;font-family:var(--display);font-weight:400;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.repeat-txt b .re{color:var(--amber)}
.repeat-txt > span{display:block;margin-top:3px;font-size:12px;color:rgba(242,233,220,.7)}
.empty .repeat{margin-top:22px}
@media (prefers-reduced-motion:reduce){ .repeat:hover .repeat-ico{transform:none} }

/* ============================================================
   LOGOUL CARE SE DESENEAZĂ — intrarea și cortina dintre pagini
   ============================================================ */
.draw-logo{width:min(34vw,210px);height:auto;overflow:visible;filter:drop-shadow(.06em .07em 0 rgba(0,0,0,.6))}
.draw-logo path{fill:none;stroke:var(--off);stroke-width:5.8;stroke-linecap:round;stroke-linejoin:round}
.draw-logo .d-dot{fill:var(--red)}
.intro{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:
    radial-gradient(70% 60% at 50% 45%,color-mix(in srgb,var(--wine),#fff 8%),transparent 70%),
    var(--black);
  transition:transform .6s cubic-bezier(.7,0,.2,1),opacity .6s ease;
}
.intro.out{transform:translateY(-100%);opacity:.6}
/* R-ul se trage ca o linie; liniile lui E intră din stânga, pe rând; punctul apare. */
.intro .d-r{stroke-dasharray:110;stroke-dashoffset:110;animation:drawR .55s cubic-bezier(.6,0,.2,1) .1s forwards}
.intro .d-b{stroke-dasharray:22;stroke-dashoffset:22;animation:drawB .32s cubic-bezier(.6,0,.2,1) forwards}
.intro .d-b1{animation-delay:.55s}.intro .d-b2{animation-delay:.67s}.intro .d-b3{animation-delay:.79s}
.intro .d-dot{transform-origin:73px 32.5px;transform:scale(0);animation:popDot .35s cubic-bezier(.3,1.6,.5,1) 1s forwards}
@keyframes drawR{to{stroke-dashoffset:0}}
@keyframes drawB{to{stroke-dashoffset:0}}
@keyframes popDot{to{transform:scale(1)}}

/* Cortina dintre pagini: logoul apare scurt, din aceleași bucăți. */
.page-fade{display:grid;place-items:center}
.page-fade .draw-logo{width:min(22vw,130px);opacity:0;transform:translateY(8px);transition:opacity .2s ease .05s,transform .25s ease .05s}
.page-fade.in .draw-logo{opacity:1;transform:none}

/* ============================================================
   DOZA VIE DIN HERO
   ============================================================ */
.hero-can{
  position:absolute;z-index:2;display:block;
  right:max(5vw,calc((100vw - var(--wrap)) / 2 + 60px));top:50%;
  width:clamp(170px,16vw,240px);margin-top:calc(clamp(170px,16vw,240px) * -1.2);
  animation:heroBob 6s ease-in-out infinite;
}
.hero-can-stage{display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1);will-change:transform}
.hero-can .art{width:100%;height:auto;filter:drop-shadow(0 50px 60px rgba(0,0,0,.85))}
.hero-can-glow{
  position:absolute;left:50%;top:42%;z-index:-1;width:280%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 75%,transparent),transparent 62%);
  opacity:.5;filter:blur(40px);pointer-events:none;
}
.hero-can-name{
  display:block;margin-top:18px;text-align:center;
  font-family:var(--display);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  text-shadow:.06em .07em 0 rgba(0,0,0,.6);
}
.hero-can-name em{font-style:normal;color:var(--amber);margin-left:6px}
@keyframes heroBob{50%{transform:translateY(-14px)}}
/* Poza din spate se retrage pe partea dozei, ca doza să fie vedeta. */
.hero:has(.hero-can)::after{
  background:
    radial-gradient(38% 60% at 80% 50%,rgba(24,6,13,.72),transparent 70%),
    linear-gradient(90deg,rgba(24,6,13,.93) 0%,rgba(24,6,13,.7) 34%,rgba(24,6,13,.2) 72%),
    linear-gradient(180deg,rgba(24,6,13,.75) 0%,transparent 34%,rgba(40,8,20,.6) 100%);
}
@media (max-width:860px){ .hero-can{display:none} }
@media (prefers-reduced-motion:reduce){ .hero-can{animation:none} }
.hero:has(.hero-can) .hero-sub{max-width:46ch}

/* ============================================================
   POVEȘTI — bulele din meniu și vizualizatorul pe tot ecranul
   ============================================================ */
.stories-row{display:flex;gap:18px;overflow-x:auto;padding-block:22px 6px;scrollbar-width:none}
.stories-row::-webkit-scrollbar{display:none}
.sbub{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto}
.sbub-ring{
  display:grid;place-items:center;width:74px;height:74px;border-radius:50%;padding:3px;
  background:conic-gradient(from 200deg,var(--amber),var(--red),#7A0E26,var(--amber));
  transition:transform .3s;
}
.sbub.seen .sbub-ring{background:rgba(242,233,220,.22)}
.sbub:hover .sbub-ring{transform:scale(1.05)}
.sbub-in{
  display:grid;place-items:center;width:100%;height:100%;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--c) 55%,#000),#0B0508 75%);
  border:3px solid var(--black);
}
.sbub-in .art{width:24px;height:auto;filter:drop-shadow(0 6px 6px rgba(0,0,0,.6))}
.sbub-name{font-size:11px;font-weight:500;letter-spacing:.06em;color:rgba(242,233,220,.8);white-space:nowrap}

.story{
  position:fixed;inset:0;z-index:130;overflow:hidden;color:var(--off);touch-action:none;
  background:
    radial-gradient(90% 60% at 50% 38%,color-mix(in srgb,var(--c) 60%,#000),transparent 72%),
    linear-gradient(180deg,#140609,#0B0508);
  transition:background .4s;
}
.story-bars{position:absolute;top:12px;left:12px;right:12px;z-index:4;display:flex;gap:4px}
.story-bars span{flex:1;height:3px;border-radius:3px;background:rgba(242,233,220,.25);overflow:hidden}
.story-bars i{display:block;height:100%;width:0;background:var(--off)}
.story-bars .done i{width:100%}
.story-top{position:absolute;top:26px;left:16px;right:12px;z-index:4;display:flex;align-items:center;justify-content:space-between}
.story-cat{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.story-x{width:40px;height:40px;border-radius:50%;font-size:26px;line-height:1;color:var(--off);background:rgba(0,0,0,.25)}
.story-tap{position:absolute;top:70px;bottom:120px;z-index:2}
.story-prev{left:0;width:32%}
.story-next{right:0;width:68%}
.story-body{
  position:absolute;inset:70px 0 0;z-index:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;padding:0 24px 34px;text-align:center;pointer-events:none;
}
.story-glow{
  position:absolute;left:50%;top:38%;width:min(120vw,900px);aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 70%,transparent),transparent 60%);
  opacity:.45;filter:blur(40px);
}
.story-can{position:relative;animation:storyIn .6s cubic-bezier(.2,.8,.2,1)}
.story-can .art{width:min(34vw,180px);height:auto;filter:drop-shadow(0 50px 50px rgba(0,0,0,.75))}
.story-name{
  position:relative;margin-top:14px;font-family:var(--display);font-weight:400;font-synthesis:none;
  font-size:clamp(24px,7vw,40px);letter-spacing:.04em;text-transform:uppercase;line-height:1.1;
  text-shadow:.05em .06em 0 rgba(0,0,0,.55);
}
.story-desc{position:relative;font-size:14px;color:rgba(242,233,220,.8)}
.story-buy{position:relative;z-index:3;display:flex;align-items:center;gap:16px;margin-top:10px;pointer-events:auto}
.story-buy .price{font-family:var(--display);font-size:22px}
@keyframes storyIn{from{opacity:0;transform:translateY(20px) scale(.94)}}
@media (prefers-reduced-motion:reduce){ .story-can{animation:none} }

/* ============================================================
   JOCUL „POUR TO THE LINE"
   ============================================================ */
.game{--v:var(--navy);border-top:1px solid var(--line-dark)}
.game{background:
  radial-gradient(110% 80% at 12% 0%,color-mix(in srgb,var(--v),#fff 9%) 0%,transparent 58%),
  radial-gradient(90% 90% at 92% 110%,rgba(0,0,0,.55),transparent 62%),var(--v)}
.game-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.game-text .lead{margin-top:16px;max-width:40ch}
.game-result{min-height:1.6em;margin-top:22px;font-size:15px;font-weight:500;color:var(--off)}
.game-result.win{color:var(--amber)}
.game-result.miss{color:#FF8A80}
.game-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.game-best{margin-top:14px;font-size:12.5px;color:rgba(242,233,220,.6)}
.game-stage{display:flex;flex-direction:column;align-items:center}
.game-can .pour{max-width:320px}
@media (max-width:860px){ .game-in{grid-template-columns:1fr} .game-stage{order:-1} }

/* ============================================================
   PROFILUL DE GUST (în fereastra produsului)
   ============================================================ */
.taste{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-dark)}
.taste-svg{display:block;width:min(100%,250px);height:auto;margin:6px auto 0;overflow:visible}
.taste-grid polygon,.taste-grid line{fill:none;stroke:rgba(242,233,220,.14);stroke-width:.6}
.taste-shape{
  fill:color-mix(in srgb,var(--c) 45%,transparent);stroke:var(--c);stroke-width:1.4;stroke-linejoin:round;
  transform-origin:60px 60px;animation:tasteGrow .7s cubic-bezier(.2,.8,.2,1) .15s both;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 60%,transparent));
}
.taste-svg text{font-family:var(--sans);font-size:6.4px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;fill:rgba(242,233,220,.72)}
@keyframes tasteGrow{from{transform:scale(0);opacity:0}}
@media (prefers-reduced-motion:reduce){ .taste-shape{animation:none} }

/* ============================================================
   ADAUGĂ ÎN CALENDAR
   ============================================================ */
.cal-btn{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:9px 16px 9px 12px;
  border:1px solid color-mix(in srgb,var(--amber) 50%,transparent);border-radius:100px;
  font-size:12.5px;font-weight:500;color:var(--off);transition:border-color .25s,background .25s;
}
.cal-btn:hover{border-color:var(--amber);background:rgba(217,165,91,.14)}
.cal-ico{
  position:relative;width:16px;height:16px;border:1.6px solid var(--amber);border-radius:3px;flex:0 0 auto;
}
.cal-ico::before{content:"";position:absolute;left:-1.6px;right:-1.6px;top:-1.6px;height:5px;background:var(--amber);border-radius:3px 3px 0 0}
.cal-ico::after{content:"+";position:absolute;inset:3px 0 0;display:grid;place-items:center;font:700 10px/1 var(--sans);color:var(--amber)}
.cal-mini{margin-top:12px;padding:6px 12px 6px 9px;font-size:11px;border-color:rgba(242,233,220,.22)}
.closing .cal-btn{margin-inline:auto}

/* WordPress: produs epuizat (stoc 0 în WooCommerce). */
.add.is-out{opacity:.45;cursor:default;border-style:dashed}
.add.is-out:hover{background:none;color:var(--off);border-color:rgba(255,255,255,.26)}
/* WordPress: grupa de cutii are slug-ul „gift-boxes" (din importul CSV). */
.menu-group-gift-boxes .group-title{font-size:clamp(24px,3.6vw,44px)}

/* ============================================================
   WORDPRESS + WOOCOMMERCE
   Paginile care vin de la WooCommerce (coș, checkout, cont, confirmare)
   îmbrăcate în aceeași catifea. Clasele de mai jos nu există în machetă,
   deci aici nu strică nimic.
   ============================================================ */
.page-content{max-width:860px}
.page-content h2,.page-content h3{margin-top:1.6em;margin-bottom:.4em}
.page-content p,.page-content li{color:var(--dim-on-dark);line-height:1.7}
.page-content a{color:var(--off);border-bottom:1px solid color-mix(in srgb,var(--red) 60%,transparent)}

/* ---------- Pagina unui produs ---------- */
.single-pdp-sec{padding-top:calc(var(--header-h) + clamp(28px,4vw,64px))}
.single-pdp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.single-pdp .pdp-art{
  position:static;min-height:0;border-right:0;border-radius:12px;padding:clamp(30px,4vw,56px) 20px;
  border:1px solid var(--line-dark);
}
.single-pdp .pdp-art .art{width:clamp(150px,17vw,230px)}
.pdp-title{
  margin-top:10px;font-family:var(--display);font-weight:400;font-synthesis:none;
  font-size:clamp(26px,3.4vw,44px);line-height:1.1;letter-spacing:.03em;text-transform:uppercase;
  text-shadow:.05em .055em 0 color-mix(in srgb,var(--black),#000 40%),.09em .12em .45em rgba(0,0,0,.5);
}
.single-pdp .pdp-long{margin-top:14px;color:var(--dim-on-dark);line-height:1.7}
.single-pdp .pdp-buy{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.single-pdp .pdp-buy .price{font-family:var(--display);font-size:clamp(24px,2.6vw,32px)}
.single-pdp form.cart{display:flex;align-items:center;gap:12px;margin:0}
.pdp-back{margin-top:28px}
@media (max-width:860px){ .single-pdp{grid-template-columns:1fr} }

/* ---------- Butoane și câmpuri WooCommerce ---------- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt{
  display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 24px;border-radius:2px;
  font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:.01em;text-transform:none;
  background:linear-gradient(180deg,#FF4A3D,#CF1F31);color:#fff;border:0;
  box-shadow:0 12px 26px -12px rgba(207,31,49,.75),inset 0 1px 0 rgba(255,255,255,.16);
  transition:filter .25s;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{
  filter:brightness(1.08);background:linear-gradient(180deg,#FF4A3D,#CF1F31);color:#fff;
}
.woocommerce .button.disabled,.woocommerce button.button:disabled{opacity:.5}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce form .form-row select,.woocommerce .select2-container .select2-selection--single,
.woocommerce-page form .form-row input.input-text{
  width:100%;min-height:48px;padding:12px 15px;
  font-family:inherit;font-size:15px;color:var(--off);
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:3px;
}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{outline:none;border-color:var(--off);box-shadow:0 0 0 3px rgba(244,244,244,.08)}
.woocommerce form .form-row label,.woocommerce-billing-fields label,.woocommerce-shipping-fields label{
  display:block;margin-bottom:8px;
  font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dim-on-dark);
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--off);line-height:46px}
.woocommerce-input-wrapper{display:block}
.re-age{margin:18px 0}
.re-age label{display:flex!important;align-items:center;gap:10px;text-transform:none!important;letter-spacing:0!important;font-size:13.5px!important;color:var(--off)!important}

/* ---------- Tabele (coș, sumar comandă, confirmare) ---------- */
.woocommerce table.shop_table{border:1px solid var(--line-dark);border-radius:6px;background:rgba(255,255,255,.02);color:var(--off)}
.woocommerce table.shop_table th{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);
  border-bottom:1px solid var(--line-dark);
}
.woocommerce table.shop_table td{border-top:1px solid var(--line-dark);color:var(--dim-on-dark)}
.woocommerce table.shop_table td .amount,.woocommerce table.shop_table strong{color:var(--off)}
.woocommerce table.shop_table tfoot .order-total .amount{font-family:var(--display);font-size:22px}
.woocommerce-checkout #payment{background:rgba(255,255,255,.03);border:1px solid var(--line-dark);border-radius:6px}
.woocommerce-checkout #payment div.payment_box{background:rgba(0,0,0,.35);color:var(--dim-on-dark)}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:rgba(0,0,0,.35)}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--line-dark)}
.woocommerce-checkout h3,.woocommerce-billing-fields h3,#order_review_heading{
  font-family:var(--display);font-weight:400;font-synthesis:none;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(18px,2vw,24px);margin:28px 0 14px;
}
.woocommerce-cart table.cart img{width:64px;box-shadow:none}
.woocommerce-cart .cart-collaterals .cart_totals>h2{font-family:var(--display);text-transform:uppercase;font-size:20px}

/* ---------- Mesajele WooCommerce ---------- */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{
  background:linear-gradient(100deg,color-mix(in srgb,var(--wine) 65%,transparent),rgba(11,5,8,.9));
  border-top:0;border-left:3px solid var(--amber);border-radius:4px;color:var(--off);
}
.woocommerce-message::before,.woocommerce-info::before{color:var(--amber)}
.woocommerce-error{border-left-color:var(--red)}
.woocommerce-error::before{color:var(--red)}
.woocommerce-message a.button{margin-left:12px}

/* ---------- Confirmarea comenzii ---------- */
.woocommerce-order{max-width:760px}
.woocommerce-thankyou-order-received{
  font-family:var(--display);font-weight:400;font-synthesis:none;text-transform:uppercase;
  font-size:clamp(22px,3vw,34px);letter-spacing:.03em;color:var(--off);
}
.woocommerce ul.order_details li{border-right-color:var(--line-dark);color:var(--dim-on-dark)}
.woocommerce ul.order_details li strong{color:var(--off);font-family:var(--sans)}