/* ============================================================
   La Cetate · Ghimbav — varianta „Afiș de stradă + bon de casă"
   Neo-brutalist: contur de cerneală, umbre dure, litere de afiș,
   textură de risografie. Pozele de cetate în duoton, mâncarea în culoare.
   Telefonul e platforma. Se animează doar transform și opacity.
   ============================================================ */

/* ---------- FONTURI ---------- */
/* Grenze Gotisch (scrisul de pe fațadă) și Grenze, tăiate cu fontTools la latin + diacriticele românești (SIL OFL).
   Instrument Sans (text lung) e scris de tools/fonturi.js. Variabile: o singură descărcare pentru toate grosimile. */
@font-face{font-family:"Grenze Gotisch";font-style:normal;font-weight:600 900;font-display:swap;src:url(../fonts/grenze-gotisch-600-900.woff2) format("woff2")}
@font-face{font-family:"Grenze";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/grenze-400-700.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/instrument-sans-400-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/instrument-sans-400-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ---------- /FONTURI ---------- */

/* ---------- TOKENS ---------- */
/* Makeover medieval (16.10): culorile clădirii (antracit, piersică, alb), vișiniu, aur vechi și pergament.
   Scrisul gotic de pe fațadă e vocea site-ului; Grenze pentru etichete, Instrument Sans pentru text lung. */
:root{
  --paper:#F4EADB; --paper-2:#E8D7C0; --card:#FBF5EA;
  --ink:#22282D; --ink-soft:#4A5157; --ink-faint:#858B90;
  --red:#8E2F3B; --red-deep:#6B2630; --mustard:#D9A54F; --mint:#B5CDA8; --sky:#9DB7D1; --peach:#E2C0A7;
  --on-red:#FBF5EA;
  --m1:var(--red); --m2:var(--mustard); --m3:#5E8A55;
  --shade:244,234,219;
  --bw:2px;                         /* grosimea conturului */
  --sh:4px 4px 0 var(--ink);        /* umbra dura */
  --sh-s:2px 2px 0 var(--ink);
  --ease:cubic-bezier(.2,.9,.25,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --head:55px; --rail:56px;
  --marker:"Grenze Gotisch","Grenze",Georgia,serif;
  --f-hero:var(--marker); --f-h2:var(--marker); --f-name:var(--marker); --f-price:var(--marker); --f-hand:var(--marker);
  --f-body:"Instrument Sans","Segoe UI",system-ui,sans-serif;    /* text lung, butoane mici */
  --f-mono:"Grenze",Georgia,serif;                               /* etichete, gramaje (ca o inscripție) */
  --f-led:"Grenze",Georgia,serif;                                /* banda de sub antet */
  --display:var(--f-hero); --body:var(--f-body); --mono:var(--f-mono);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#22282D; --paper-2:#2A3136; --card:#2E353B;
  --ink:#F4EADB; --ink-soft:#D5C6B0; --ink-faint:#9AA0A5;
  --red:#E07B6A; --red-deep:#8E2F3B; --mustard:#D9A54F;   /* roșu de miniatură (cinabru), lizibil pe antracit */
  --on-red:#22282D;
  --sh:4px 4px 0 #D9A54F; --sh-s:2px 2px 0 #D9A54F;
  --shade:34,40,45;
  color-scheme:dark;
}

/* ---------- BAZA ---------- */
*,*::before,*::after{box-sizing:border-box}
/* touch-action: fără zoom la două atingeri rapide pe „+” (zoom-ul cu două degete rămâne) */
html{touch-action:manipulation;font-synthesis:none;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head) + var(--rail) + 8px)}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45;
  font-variant-numeric:lining-nums;   /* Grenze are cifre „de modă veche”: la prețuri și ore, drepte */
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:calc(88px + env(safe-area-inset-bottom,0px));
}
/* granulatie de risografie peste tot */
body::after{
  content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .07 0 0 0 0 .06 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::after{filter:invert(1);opacity:.09}
h1,h2,h3{font-weight:800;letter-spacing:0;line-height:.98;margin:0}
h1{font-family:var(--f-hero)}
h2{font-family:var(--f-h2);letter-spacing:0}
h3{font-family:var(--f-name);letter-spacing:0}
.hand{font-family:var(--f-hand);text-transform:none;font-weight:400}
p{margin:0}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit}
[hidden]{display:none!important}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding-inline:16px}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}

/* butonul brutalist: se „apasă" în umbră */
.press{border:var(--bw) solid var(--ink);box-shadow:var(--sh-s);transition:transform .12s var(--ease),box-shadow .12s var(--ease)}
.press:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}

@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.3) rotate(-6deg)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes stamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-14deg) scale(2.4)}35%{opacity:1;transform:translate(-50%,-50%) rotate(-14deg) scale(.92)}50%{transform:translate(-50%,-50%) rotate(-14deg) scale(1.04)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(-14deg) scale(1)}}
@keyframes wobble{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}

/* ---------- BANNER MACHETA (34px) ---------- */
.demo{height:34px;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11px;padding:0 12px;white-space:nowrap;overflow:hidden;letter-spacing:.02em}
.demo b{color:var(--mustard);font-weight:500}
:root[data-theme="dark"] .demo b{color:#6B2630}   /* pe banda crem a temei închise, muștarul nu se citea (contrast 1,4) */

/* ---------- ANTET (55px) ---------- */
.top{position:sticky;top:0;z-index:40;height:var(--head);background:var(--paper);border-bottom:var(--bw) solid var(--ink)}
.top .wrap{height:100%;display:flex;align-items:center;gap:8px}
.brand{display:flex;align-items:center;gap:8px;margin-right:auto;min-width:0;text-decoration:none}
.brand img{height:40px;width:auto;flex:none;transition:transform .5s var(--spring)}
.brand:hover img{animation:wobble .5s ease-in-out 2}
.wm{display:flex;flex-direction:column;line-height:1;min-width:0}
.wm b{font-family:var(--display);font-weight:400;font-size:19px;letter-spacing:.01em;white-space:nowrap}
.wm i{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-top:2px}
.status{position:relative;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-family:var(--f-name);font-weight:900;font-size:14px;letter-spacing:.06em;padding:3px 9px 2px;margin-top:10px;border:2px solid var(--ink);background:var(--mint);color:#22282D;border-radius:3px;box-shadow:2px 2px 0 var(--ink);transform-origin:50% -12px;animation:swing 3.2s ease-in-out infinite}
.status::before{content:"";position:absolute;left:50%;top:-13px;width:34px;height:13px;margin-left:-17px;background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 13'%3E%3Cpath d='M3 13 17 2 31 13' fill='none' stroke='%23141210' stroke-width='1.6'/%3E%3Ccircle cx='17' cy='2.2' r='2' fill='%23141210'/%3E%3C/svg%3E")}
:root[data-theme="dark"] .status::before{filter:invert(1)}
@keyframes swing{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.dot{width:7px;height:7px;border-radius:1px;background:#3F6E3A;flex:none;animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.status.shut{background:var(--paper-2);color:var(--ink)}
.status.soon{background:var(--mustard)}
.status.shut .dot{animation:none;background:var(--ink-faint)}
.ic-btn{flex:none;width:40px;height:40px;border:var(--bw) solid var(--ink);background:var(--card);color:var(--ink);display:grid;place-items:center;border-radius:10px;box-shadow:var(--sh-s);transition:transform .12s var(--ease),box-shadow .12s}
.ic-btn:active{transform:translate(3px,3px);box-shadow:none}
.ic-btn svg{width:18px;height:18px}
.tel{flex:none;height:40px;display:inline-flex;align-items:center;gap:6px;padding:0 13px;border:var(--bw) solid var(--ink);border-radius:10px;background:var(--red);color:var(--on-red);text-decoration:none;font-weight:700;font-size:13px;box-shadow:var(--sh-s);transition:transform .12s var(--ease),box-shadow .12s}
.tel:active{transform:translate(3px,3px);box-shadow:none}
.tel svg{width:15px;height:15px}
@media (max-width:459px){
  .top .wrap{gap:6px}
  .tel span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tel{width:40px;padding:0;justify-content:center}
}
@media (max-width:379px){ .wm b{font-size:19px} .brand img{height:34px} .status{font-size:10px;padding:3px 6px} }

/* ---------- PANOUL LED: vezi finalul fisierului ---------- */

/* ---------- HERO: AFIS ---------- */
.hero{position:relative;background:var(--paper);border-bottom:var(--bw) solid var(--ink);overflow:hidden}
.hero-in{position:relative;padding-block:16px 18px;display:grid;grid-template-columns:1fr;gap:12px}
.eyebrow{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.eyebrow span{flex:none;white-space:nowrap;background:var(--ink);color:var(--paper);padding:2px 7px;border-radius:4px}
.hero h1{font-size:clamp(22px,6.4vw,52px);line-height:1.04;letter-spacing:-.005em}   /* runda 13c: cam jumătate din cât era */
.hero h1 em{font-style:normal;display:inline-block;background:var(--red);color:var(--paper);padding:0 .12em;transform:rotate(-2.5deg);box-shadow:var(--sh-s);border:2px solid var(--ink)}
.hero h1 .w{display:inline-block}
.hero h1.rot .ln.on .w{animation:slam .6s var(--spring) both}
@keyframes slam{from{opacity:0;transform:translateY(40%) rotate(4deg) scale(.9)}to{opacity:1;transform:none}}
.hero h1.rot .ln.on em.w{animation-name:slamEm}
@keyframes slamEm{from{opacity:0;transform:translateY(40%) rotate(8deg) scale(.8)}to{opacity:1;transform:rotate(-2.5deg)}}
/* primul titlu, la deschiderea paginii: aceeași izbitură, dar vizibil din primul cadru (fără pornire din transparent),
   ca textul cel mai mare de pe ecran să se vadă imediat. Rotirile de după păstrează intrarea din transparent. */
.hero h1.rot .ln.first .w{animation-name:slamIn}
.hero h1.rot .ln.first em.w{animation-name:slamInEm}
@keyframes slamIn{from{transform:translateY(40%) rotate(4deg) scale(.9)}to{transform:none}}
@keyframes slamInEm{from{transform:translateY(40%) rotate(8deg) scale(.8)}to{transform:rotate(-2.5deg)}}
/* harta ilustrată ca fundal (assets/harta.webp, 944×752): JS-ul o mută și o scalează prin transform, ca pinul și cetatea
   să cadă în fereastră; marginile pozei se estompează în culoarea paginii. Un reflector lasă fereastra la vedere. */
.hero{isolation:isolate;--wb:calc(12px + clamp(260px,78vw,380px));--ov:56px}   /* --wb: marginea de jos a ferestrei pe telefon, până o măsoară JS-ul;
   --ov: cât urcă adresa și titlul peste partea de jos a hărții (creasta munților urcă odată cu ele) */
.hero-map{position:absolute;inset:0;z-index:-1;background:var(--paper)}
.hero-img{position:absolute;left:0;top:0;width:944px;height:752px;max-width:none;transform-origin:0 0;transform:translate(-30px,-26px) scale(.484);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent),linear-gradient(180deg,transparent,#000 40px,#000 calc(100% - 64px),transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent),linear-gradient(180deg,transparent,#000 40px,#000 calc(100% - 64px),transparent);mask-composite:intersect}
/* numele localului lângă pinul desenat (JS-ul îl pune lângă capul pinului) */
.pin-lbl{position:absolute;left:0;top:0;z-index:1;padding:3px 10px 2px;background:#D9A54F;color:#22282D;border:2px solid #22282D;border-radius:4px;box-shadow:2px 2px 0 #22282D;font-family:var(--marker);font-size:15px;line-height:1.1;white-space:nowrap;pointer-events:none}
.hero .pin-lbl{transform:translate(205px,68px) rotate(-4deg)}
#harta .pin-lbl{transform:translate(171px,72px) rotate(-4deg)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--shade),0) 0,rgba(var(--shade),.06) calc(var(--wb,420px) - 34px),rgba(var(--shade),.9) calc(var(--wb,420px) + 18px))}
.hero-map .map-attr{right:8px;bottom:6px}
.hero-win{position:relative;display:block;width:100%;height:clamp(260px,78vw,380px);margin:-4px 0 calc(4px - var(--ov,0px));padding:0;border:0;background:transparent;text-align:left}   /* marginea de jos negativă: textul de sub hartă urcă peste ea */
/* Ghimbav pe hartă: tăblița localității cu direcțiile, avionul spre aeroport, munții unde harta intră sub titlu */
.hero-sign{position:absolute;left:8px;top:5px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:4px;pointer-events:none}
.hs-town{display:flex;flex-direction:column;align-items:center;padding:4px 9px 3px;background:#FBF5EA;color:#22282D;border:2.5px solid #22282D;border-radius:5px;box-shadow:3px 3px 0 #22282D,inset 0 0 0 2px #FBF5EA,inset 0 0 0 3.5px #22282D;transform:rotate(-3deg)}
.hs-town b{font-family:var(--marker);font-weight:400;font-size:16px;line-height:1;letter-spacing:.02em}
.hs-town small{margin-top:2px;font-family:var(--f-mono);font-weight:700;font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;color:#4A5157}
.hs-dir{display:inline-flex;align-items:center;gap:4px;padding:3px 9px 2px 7px;font-family:var(--f-mono);font-weight:700;font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:#F5F1E8;
  text-shadow:0 -1px 0 rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.28);filter:drop-shadow(2px 2px 0 #22282D)}
.hs-dir svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.hs-air{margin-left:6px;background:linear-gradient(180deg,#466C93,#2F4F72 55%,#3B5E86);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:rotate(1.5deg)}
.hs-bv{margin-left:2px;padding:3px 13px 2px 8px;background:linear-gradient(180deg,#2A2724,#22282D 55%,#1F1C19);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%);transform:rotate(-1deg)}
/* avionul: învelișul se mișcă (nu svg-ul), 7 s de zbor, apoi pauză până la următorul */
.hero-plane{position:absolute;left:0;top:calc(var(--wb,420px) - 40px - var(--ov,0px));width:120px;height:40px;margin-left:-120px;pointer-events:none;opacity:0;animation:hpFly 17s linear 2s infinite;will-change:transform,opacity}
.hp-in{display:block;width:100%;height:100%;transform:rotate(-38deg)}
.hp-in svg{display:block;width:100%;height:100%;overflow:visible}
.hp-trail{fill:none;stroke:#22282D;stroke-width:2;stroke-dasharray:5 5;stroke-linecap:round;opacity:.55}
.hp-body{fill:#FBF5EA;stroke:#22282D;stroke-width:2.2}
.hp-wing{fill:#8E2F3B;stroke:#22282D;stroke-width:2;stroke-linejoin:round}
@keyframes hpFly{0%{opacity:0;transform:translate(0,0)}4%{opacity:1}36%{opacity:1}42%{opacity:0;transform:translate(560px,-440px)}100%{opacity:0;transform:translate(560px,-440px)}}
/* munții (Carpații, la sud de Ghimbav): creasta trece peste marginea de jos a hărții; dedesubt începe umbra plină */
.hero-mtn{position:absolute;left:0;right:0;top:0;height:64px;pointer-events:none;transform:translateY(calc(var(--wb) - 56px - var(--ov)))}   /* prin transform: nu contează ca deplasare de layout (CLS) */
.hero-mtn svg{display:block;width:100%;height:100%;overflow:hidden}
.hero-mtn path{vector-effect:non-scaling-stroke;stroke-linejoin:round}
.mt-b{fill:rgba(var(--shade),.5);stroke:var(--ink);stroke-width:2}
.mt-s{fill:#F4EADB;stroke:none}
.mt-f{fill:rgb(var(--shade));stroke:var(--ink);stroke-width:2.5}   /* plin: sub creastă stă textul */
@media (max-width:699px){
  .hero-shade{background:linear-gradient(180deg,rgba(var(--shade),0) 0,rgba(var(--shade),.06) calc(var(--wb) - 40px - var(--ov)),rgba(var(--shade),.06) calc(var(--wb) + 6px - var(--ov)),rgb(var(--shade)) calc(var(--wb) + 6px - var(--ov)))}   /* plin și 2 px peste munți: fără dungă la îmbinare */
}
@media (min-width:700px){ .hero-mtn{display:none} }
.hero .spin{position:absolute;right:-14px;top:-26px;width:96px;height:96px;z-index:3;animation:spin 16s linear infinite;filter:drop-shadow(3px 3px 0 var(--ink))}
.hero .spin svg{display:block;width:100%;height:100%;overflow:visible}
.hero .spin circle{fill:var(--red);stroke:var(--ink);stroke-width:3}
.hero .spin text{font-family:var(--mono);font-size:10.2px;letter-spacing:.14em;fill:#fff;font-weight:500}
.hero-win .spin{right:-8px;top:-10px;width:84px;height:84px}
.hero .spin text.c{font-family:var(--display);font-size:30px;letter-spacing:0}
.lede{font-size:14.5px;color:var(--ink-soft);max-width:44ch;display:none}
.facts{display:flex;gap:7px;margin:0 -16px;padding:2px 16px 4px;overflow-x:auto;scrollbar-width:none}
.facts::-webkit-scrollbar{display:none}
/* banda de etichetat Dymo: litere in relief pe plastic */
.fact{flex:none;display:flex;align-items:center;gap:7px;white-space:nowrap;font-family:var(--f-mono);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#F5F1E8;background:linear-gradient(180deg,#2A2724,#22282D 55%,#1F1C19);padding:6px 16px 5px;
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,7px 100%,0 50%);
  text-shadow:0 -1px 0 rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.28);transform:rotate(-1deg)}
.fact:nth-child(2){background:linear-gradient(180deg,#9E3542,#7A2E36 55%,#8E2F3B);transform:rotate(.8deg)}
.fact:nth-child(3){background:linear-gradient(180deg,#466C93,#2F4F72 55%,#3B5E86);transform:rotate(-.6deg)}
:root[data-theme="dark"] .fact:first-child{background:linear-gradient(180deg,#56504A,#3B3631 55%,#48423C)}
.fact svg{width:13px;height:13px;color:currentColor}

/* ---------- REPETA ---------- */
.again{padding-top:16px}
.again button{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:12px;background:var(--sky);color:#22282D;border:var(--bw) solid var(--ink);border-radius:14px;box-shadow:var(--sh);transition:transform .12s var(--ease),box-shadow .12s}
.again button:active{transform:translate(5px,5px);box-shadow:none}
.ag-ic{flex:none;width:40px;height:40px;border-radius:999px;background:var(--ink);color:var(--paper);display:grid;place-items:center}
.ag-ic svg{width:18px;height:18px}
.ag-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ag-tx b{font-family:var(--f-name);font-weight:900;font-size:21px;line-height:1}
.ag-tx i{font-style:normal;font-family:var(--mono);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-go{flex:none;font-family:var(--f-hero);font-size:16px;background:var(--paper);border:2px solid var(--ink);border-radius:4px;padding:5px 10px 3px;box-shadow:2px 2px 0 var(--ink)}

/* ---------- CELE MAI LUATE: stickere ---------- */
.best{padding-top:18px}
.best-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.best-head h2{font-size:clamp(26px,7.6vw,38px);white-space:nowrap}
.best-head span{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);white-space:nowrap}
.best-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -16px;padding:10px 16px 18px;scroll-padding-inline:16px;overscroll-behavior-x:contain}
.best-row::-webkit-scrollbar{display:none}
.bcard{position:relative;flex:none;width:156px;scroll-snap-align:start;background:var(--card);border:var(--bw) solid var(--ink);border-radius:16px;box-shadow:var(--sh);overflow:visible;transform:rotate(-1.6deg)}
.bcard:nth-child(even){transform:rotate(1.6deg)}
.bcard:nth-child(3n){background:var(--mustard)}
.bcard img{width:100%;height:104px;object-fit:cover;border-radius:13px 13px 0 0;border-bottom:var(--bw) solid var(--ink)}
.bcard .bt{padding:8px 10px 10px;display:flex;flex-direction:column;gap:4px}
.bcard b{font-family:var(--f-name);font-weight:900;font-size:20px;line-height:.95;min-height:2em}
.bcard .bp{display:flex;align-items:center;justify-content:space-between}
.bcard .bp span{font-family:var(--f-price);font-size:20px}
.bcard:nth-child(3n) .bt{color:#22282D}
.rank{position:absolute;top:-16px;left:-14px;z-index:3;width:48px;height:48px;display:grid;place-items:center;background:#22282D;font-family:var(--f-hand);font-size:17px;color:var(--mustard);clip-path:polygon(50.0% 0.0%,60.6% 10.4%,75.0% 6.7%,79.0% 21.0%,93.3% 25.0%,89.6% 39.4%,100.0% 50.0%,89.6% 60.6%,93.3% 75.0%,79.0% 79.0%,75.0% 93.3%,60.6% 89.6%,50.0% 100.0%,39.4% 89.6%,25.0% 93.3%,21.0% 79.0%,6.7% 75.0%,10.4% 60.6%,0.0% 50.0%,10.4% 39.4%,6.7% 25.0%,21.0% 21.0%,25.0% 6.7%,39.4% 10.4%);transform:rotate(-10deg)}
.bcard:nth-child(1) .rank{background:var(--red);color:var(--on-red)}
.qadd{width:44px;height:44px;border-radius:10px;border:var(--bw) solid var(--ink);background:var(--red);color:#fff;display:grid;place-items:center;position:relative;z-index:2;box-shadow:var(--sh-s);transition:transform .12s var(--ease),box-shadow .12s}
.qadd:active{transform:translate(3px,3px);box-shadow:none}
.qadd svg{width:16px;height:16px}

/* ---------- RAIL: file de dosar ---------- */
.rail{position:sticky;top:var(--head);z-index:30;height:var(--rail);transition:height .3s var(--ease)}
.rail-bar{position:absolute;inset:0 0 auto;background:var(--paper);border-bottom:var(--bw) solid var(--ink)}
.rail.big{height:68px}
.rail-in{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;align-items:center;padding:0 16px;height:var(--rail);transition:height .3s var(--ease);max-width:1120px;margin:0 auto;scroll-padding-inline:16px}
.rail.big .rail-in{height:68px}
.rail-in::-webkit-scrollbar{display:none}
.rail button{flex:none;height:40px;display:flex;align-items:center;gap:7px;padding:0 13px 0 5px;border:2.5px solid var(--ink);background:var(--card);border-radius:10px;color:var(--ink);font-family:var(--f-name);font-weight:900;font-size:18px;letter-spacing:.02em;white-space:nowrap;transition:transform .2s var(--spring),background-color .15s,box-shadow .15s,height .3s var(--ease)}
.rail.big button{height:46px}
.rail button .ava{width:28px;height:28px;border-radius:7px;border:2px solid var(--ink);background-size:cover;background-position:center;flex:none}
.rail .ava.ico{display:grid;place-items:center;background:var(--paper-2);color:var(--red)}
.rail .ava.ico svg{width:16px;height:16px}
.rail button.on{background:var(--mustard);color:#22282D;box-shadow:var(--sh-s);transform:translate(-2px,-2px) rotate(-1.5deg)}
.rail button:active{transform:translate(1px,1px)}
.rail .srch{padding:0;width:40px;justify-content:center;background:var(--ink);color:var(--paper)}
.rail.big .srch{width:46px}
.rail .srch svg{width:18px;height:18px}
.rail .cnt{font-family:var(--f-mono);font-weight:700;font-size:11px;min-width:20px;height:20px;border-radius:3px;padding:0 4px;display:grid;place-items:center;background:var(--red);color:#fff;transform:rotate(6deg)}
.rail-prog{position:absolute;left:0;bottom:calc(-1 * var(--bw));height:var(--bw);width:100%;background:var(--red);transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline:scroll()){ .rail-prog{animation:prog linear both;animation-timeline:scroll(root)} @keyframes prog{to{transform:scaleX(1)}} }

/* ---------- MENIU ---------- */
.cat{padding-top:26px}
.cat-head{position:relative;display:flex;align-items:flex-end;gap:10px;min-height:118px;padding:30px 16px 12px;margin-bottom:12px;border:var(--bw) solid var(--ink);border-radius:50% 50% 14px 14px / 46px 46px 14px 14px;box-shadow:var(--sh);overflow:hidden;isolation:isolate;background:var(--red)}
.cat:nth-of-type(2n) .cat-head{background:var(--sky)}
.cat:nth-of-type(3n) .cat-head{background:var(--mint)}
.cat-head::before{content:"";position:absolute;inset:-15% 0;z-index:-1;background-image:var(--secbg);background-size:cover;background-position:center 55%;filter:grayscale(1) contrast(1.4);mix-blend-mode:multiply;opacity:.9}
.cat-head::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.3;background-image:radial-gradient(#22282D 22%,transparent 24%);background-size:5px 5px;mix-blend-mode:multiply}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .cat-head::before{animation:catPar linear both;animation-timeline:view();animation-range:cover}
    @keyframes catPar{from{transform:translateY(-10%)}to{transform:translateY(10%)}}
  }
}
.cat-head h2{font-size:50px;color:#fff;-webkit-text-stroke:2px #22282D;paint-order:stroke fill;text-shadow:4px 4px 0 #22282D}
/* eticheta de pret cu gaura */
.cat-head .n{position:relative;margin-left:auto;align-self:flex-end;font-family:var(--f-mono);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.04em;background:#F4EADB;color:#22282D;padding:5px 10px 5px 20px;max-width:56%;line-height:1.3;
  clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%);transform:rotate(4deg);transform-origin:0 50%;filter:drop-shadow(2px 2px 0 #22282D)}
.cat-head .n::before{content:"";position:absolute;left:8px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#22282D}
.cat-hint{margin:-2px 0 6px;font-family:var(--f-mono);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--red)}
.cat-lead{font-size:13.5px;color:var(--ink-soft);margin:0 0 14px;max-width:60ch}
.list{display:grid;grid-template-columns:1fr;gap:16px}

/* card = bilet cu perforatie */
.item{
  position:relative;display:grid;grid-template-columns:92px 1fr;grid-template-areas:"ph main" "foot foot";
  column-gap:12px;row-gap:0;padding:12px 12px 0;
  background:var(--card);border:var(--bw) solid var(--ink);border-radius:16px;box-shadow:var(--sh);
  transition:transform .15s var(--ease),box-shadow .15s var(--ease);
}
@media (hover:hover){.item:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)} .item:hover .it-photo{transform:scale(1.08) rotate(-2deg)}}
.ph-box{grid-area:ph;width:92px;height:92px;border:2.5px solid var(--ink);border-radius:12px;overflow:hidden;background:var(--paper-2);align-self:start}
.it-photo{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.it-main{grid-area:main;min-width:0;padding-bottom:10px}
.it-main h3{font-size:25px;line-height:.92}
.opn{all:unset;cursor:pointer}
.opn::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.opn:focus-visible::after{outline:3px solid var(--red);outline-offset:3px}
.meta{display:flex;flex-wrap:wrap;gap:3px 7px;margin-top:5px;font-family:var(--f-mono);font-size:10.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.02em}
/* stampila de cauciuc, cu cerneala neuniforma */
.tag{display:inline-block;font-family:var(--f-hero);font-size:12px;letter-spacing:.08em;padding:1px 6px 0;border:2px solid currentColor;outline:1px solid currentColor;outline-offset:1px;border-radius:2px;background:transparent;color:var(--red);vertical-align:5px;margin-left:7px;transform:rotate(-7deg);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 2.4'/%3E%3C/filter%3E%3Crect width='60' height='60' filter='url(%23n)'/%3E%3C/svg%3E");mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 2.4'/%3E%3C/filter%3E%3Crect width='60' height='60' filter='url(%23n)'/%3E%3C/svg%3E")}
.tag.g{color:#9A6F2C}
:root[data-theme="dark"] .tag.g{color:#E6AE52}
.tag.off{color:var(--ink-faint)}
.idesc{font-size:13px;color:var(--ink-soft);margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* talonul biletului, separat de o linie perforata */
.it-foot{
  grid-area:foot;position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 -12px;padding:10px 12px 12px;border-top:2.5px dashed var(--ink);
}
.it-foot::before,.it-foot::after{content:"";position:absolute;top:-11px;width:18px;height:18px;border-radius:50%;background:var(--paper);border:var(--bw) solid var(--ink)}
.it-foot::before{left:-12px;clip-path:inset(0 0 0 50%)}
.it-foot::after{right:-12px;clip-path:inset(0 50% 0 0)}
.price{font-family:var(--f-price);font-size:28px;line-height:1;white-space:nowrap}
.price small{font-family:var(--f-mono);font-size:11px;margin-left:3px;color:var(--ink-soft);text-transform:uppercase}
.slot{position:relative;z-index:2}
.slot{height:50px;display:flex;align-items:center;justify-content:flex-end}   /* aceeași cutie pentru „Adaugă” și „− 1 +”: nu sare nimic */
.add{height:50px;min-width:104px;padding:0 16px;border:var(--bw) solid var(--ink);border-radius:12px;background:var(--red);color:var(--on-red);font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:var(--sh-s);transition:transform .12s var(--ease),box-shadow .12s}
.add svg{width:15px;height:15px}
.add:active{transform:translate(3px,3px);box-shadow:none}
.add:disabled{background:var(--paper-2);color:var(--ink-soft);box-shadow:none;border-style:dashed;cursor:not-allowed;font-size:12px}
.step{display:flex;align-items:center;height:50px;background:var(--mustard);border:var(--bw) solid var(--ink);border-radius:12px;box-shadow:var(--sh-s);padding:0;animation:stepIn .35s var(--spring)}
@keyframes stepIn{from{transform:scale(.7) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
.step button{width:44px;height:44px;border:0;border-radius:8px;background:transparent;color:#22282D;font-size:22px;font-weight:700;line-height:1;display:grid;place-items:center;transition:transform .12s}
.step button:active{transform:scale(.8)}
.step .n{min-width:28px;text-align:center;font-family:var(--display);font-size:20px;color:#22282D}
/* stampila ADAUGAT */
.stamp{position:absolute;left:50%;top:44%;z-index:5;pointer-events:none;font-family:var(--display);font-size:34px;letter-spacing:.04em;color:var(--red);border:4px solid var(--red);border-radius:8px;padding:2px 12px;background:rgba(255,251,240,.6);animation:stamp .95s var(--ease) forwards;mix-blend-mode:multiply}
:root[data-theme="dark"] .stamp{background:rgba(34,40,45,.6);mix-blend-mode:normal}

/* recomandatul: afis mare pe mustar */
.item.star{grid-template-columns:1fr;grid-template-areas:"ph" "main" "foot";padding:12px 12px 0;background:var(--mustard);color:#22282D}
.item.star .ph-box{width:100%;height:190px}
.item.star h3{font-size:38px;padding-top:10px}
.item.star .meta,.item.star .idesc,.item.star .price small{color:#3A332A}
.item.star .idesc{-webkit-line-clamp:3}
.item.star::before{content:"cel mai luat!";position:absolute;top:-16px;right:12px;z-index:3;font-family:var(--f-hand);font-size:19px;background:var(--red);color:#fff;border:var(--bw) solid var(--ink);padding:2px 12px;border-radius:4px;box-shadow:var(--sh-s);animation:wobble 2.6s ease-in-out infinite}
.item.star .it-foot::before,.item.star .it-foot::after{background:var(--paper)}
.item.na{filter:grayscale(.7);opacity:.75}

/* intrare la scroll: biletul se „lipeste" pe perete */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .list .item{animation:stick linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
    .list .item:nth-child(even){animation-name:stickR}
    @keyframes stick{from{transform:translateY(40px) rotate(-4deg) scale(.94)}to{transform:none}}
    @keyframes stickR{from{transform:translateY(40px) rotate(4deg) scale(.94)}to{transform:none}}
  }
}

/* ---------- DESPRE ---------- */
.about{padding-top:44px}
.story{position:relative;min-height:320px;display:flex;align-items:flex-end;color:#22282D;isolation:isolate;background:var(--red);border:var(--bw) solid var(--ink);border-radius:18px;box-shadow:var(--sh);overflow:hidden}
.story img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:grayscale(1) contrast(1.4);mix-blend-mode:multiply}
.story::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.3;background-image:radial-gradient(#22282D 22%,transparent 24%);background-size:5px 5px;mix-blend-mode:multiply}
.story-in{padding:18px;background:var(--paper);border-top:var(--bw) solid var(--ink);width:100%}
.story .eyebrow{margin-bottom:8px}
.story h2{font-size:40px}
.story p{margin-top:8px;font-size:14px;color:#3A332A;max-width:52ch}
:root[data-theme="dark"] .story-in{background:var(--card)}
:root[data-theme="dark"] .story h2{color:var(--ink)}
:root[data-theme="dark"] .story p{color:var(--ink-soft)}
.year{position:absolute;right:16px;top:16px;z-index:2;width:110px;height:110px;display:grid;place-items:center;text-align:center;font-family:var(--f-hand);font-size:17px;clip-path:polygon(50.0% 0.0%,60.6% 10.4%,75.0% 6.7%,79.0% 21.0%,93.3% 25.0%,89.6% 39.4%,100.0% 50.0%,89.6% 60.6%,93.3% 75.0%,79.0% 79.0%,75.0% 93.3%,60.6% 89.6%,50.0% 100.0%,39.4% 89.6%,25.0% 93.3%,21.0% 79.0%,6.7% 75.0%,10.4% 60.6%,0.0% 50.0%,10.4% 39.4%,6.7% 25.0%,21.0% 21.0%,25.0% 6.7%,39.4% 10.4%);line-height:1.05;color:#22282D;background:var(--mustard);border:var(--bw) solid var(--ink);transform:rotate(12deg);box-shadow:var(--sh-s)}
.info{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px}
.panel{background:var(--card);border:var(--bw) solid var(--ink);border-radius:16px;box-shadow:var(--sh);padding:16px}
.panel h3{font-family:var(--f-h2);font-weight:800;font-variation-settings:"wdth" 75;font-size:28px;margin-bottom:10px}
.panel dl{margin:0;font-family:var(--mono);font-size:12.5px}
.panel dl div{display:flex;align-items:baseline;gap:8px;padding:5px 0}
.panel dl div::after{content:none}
.panel dt{color:var(--ink-soft);order:1}
.panel dd{margin:0;order:3;font-weight:500;text-align:right}
.panel dl div::before{content:"";order:2;flex:1;border-bottom:2px dotted var(--ink-faint);transform:translateY(-4px)}
.panel dl div.today{background:var(--mustard);color:#22282D;margin:0 -8px;padding:5px 8px;border-radius:6px}
.panel dl div.today dt{color:#22282D;font-weight:500}
.panel dl div.today dt::after{content:" ← azi"}
.panel .cta{margin-top:12px;display:flex;gap:8px}
.panel .cta a{flex:1;height:46px;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:14px;text-decoration:none;border:var(--bw) solid var(--ink);border-radius:12px;background:var(--card);box-shadow:var(--sh-s);transition:transform .12s,box-shadow .12s}
.panel .cta a:active{transform:translate(3px,3px);box-shadow:none}
.panel .cta a.wa-l{background:var(--mint);color:#22282D}
.panel .cta svg{width:16px;height:16px}
footer{padding:30px 0 12px;font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);display:flex;gap:12px;align-items:center;line-height:1.6}
footer img{height:46px;width:auto;flex:none}
.link{background:none;border:0;padding:0;color:var(--red);font-weight:500;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;font-family:inherit}
.gdpr{margin:0 0 20px;padding:14px 16px;border:2px dashed var(--ink);border-radius:12px;font-size:12.5px;color:var(--ink-soft)}
.gdpr p{margin:0 0 9px}.gdpr p:last-child{margin:0}.gdpr b{color:var(--ink)}


/* ---------- BARA DE COS: talon ---------- */
.bar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:50;height:62px;background:var(--ink);color:var(--paper);border:var(--bw) solid var(--ink);border-radius:14px;box-shadow:5px 5px 0 var(--red);overflow:hidden;transform:translateY(150%) rotate(3deg);transition:transform .5s var(--spring)}
.bar.up{transform:none}
.bar.bump{animation:barBump .5s var(--spring)}
@keyframes barBump{35%{transform:translateY(-8px) rotate(-1.5deg)}}
.bar-in{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;height:100%;width:100%;padding:0 6px 0 10px}
.bar .pics{display:flex;flex:none}
.bar .pics i{width:32px;height:32px;border-radius:8px;background-size:cover;background-position:center;border:2px solid var(--paper);margin-right:-12px;transform:rotate(-6deg)}
.bar .pics i:nth-child(2){transform:rotate(5deg)}
.bar .pics i:last-child{margin-right:0}
.bar .cnt{background:var(--mustard);color:#22282D;border-radius:3px;min-width:26px;height:26px;display:grid;place-items:center;font-family:var(--f-hero);font-size:16px;padding:0 6px;transform:rotate(-6deg)}
.bar .cnt.pop{animation:pop .45s var(--spring)}
.bar .lbl{display:flex;flex-direction:column;line-height:1.15;margin-right:auto;min-width:0}
.bar .lbl b{font-family:var(--f-name);font-weight:900;font-size:19px}
.bar .lbl i{font-style:normal;font-family:var(--mono);font-size:10.5px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .go{flex:none;white-space:nowrap;height:46px;display:flex;align-items:center;gap:6px;padding:0 13px;border-radius:10px;background:var(--red);color:#fff;font-family:var(--f-price);font-size:19px}
.bar .meter{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.1)}
.bar .meter i{display:block;height:100%;width:100%;background:var(--mustard);transform-origin:0 50%;transform:scaleX(0);transition:transform .6s var(--ease)}
.flyimg{position:fixed;z-index:95;pointer-events:none;background-size:cover;background-position:center;border-radius:12px;border:3px solid #22282D}

/* ---------- PANOURI ---------- */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(34,40,45,.55);opacity:0;pointer-events:none;transition:opacity .25s ease}
.scrim.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;z-index:70;left:0;right:0;bottom:0;height:93dvh;background:var(--paper);border:var(--bw) solid var(--ink);border-bottom:0;border-radius:22px 22px 0 0;display:flex;flex-direction:column;transform:translateY(102%);transition:transform .45s cubic-bezier(.22,1,.3,1)}
.sheet.open{transform:none}
.grab{position:absolute;top:8px;left:50%;width:48px;height:6px;margin-left:-24px;border-radius:9px;background:var(--ink);z-index:9}
.sheet-top{display:flex;align-items:center;gap:10px;padding:22px 16px 12px;border-bottom:var(--bw) solid var(--ink);flex:none}
.sheet-top h2{font-size:30px;margin-right:auto}
.x{flex:none;width:42px;height:42px;border:var(--bw) solid var(--ink);border-radius:10px;background:var(--card);color:var(--ink);font-size:20px;line-height:1;display:grid;place-items:center;box-shadow:var(--sh-s);transition:transform .12s,box-shadow .12s}
.x:active{transform:translate(3px,3px);box-shadow:none}
.sheet-body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px;display:flex;flex-direction:column;gap:14px}
.sheet-foot{flex:none;border-top:var(--bw) solid var(--ink);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:9px;background:var(--paper)}

/* ---------- coșul: bonul de comandă, în stilul site-ului (runda 9b, SPEC §5c) ---------- */
:root{--bn-sh:#22282D}
:root[data-theme="dark"]{--bn-sh:#D9A54F}
#sheet .sheet-top h2{display:flex;align-items:center;gap:10px;min-width:0;font-size:28px;white-space:nowrap}
.ck-n{font-family:var(--f-mono);font-weight:700;font-size:11px;line-height:1;letter-spacing:.06em;text-transform:uppercase;padding:5px 7px 4px;background:var(--mustard);color:#22282D;border:2px solid #22282D;border-radius:5px;box-shadow:2px 2px 0 var(--ink);transform:rotate(-3deg);white-space:nowrap}
#sheet .sheet-body{gap:18px;padding:16px 16px 28px}

/* sus în coș: livrare sau ridicare, fiecare cu ora ei */
.ck-mq{margin:0 0 8px;font-family:var(--f-hand);font-size:19px;line-height:1}
.ck-mo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ck-mo button{position:relative;display:flex;align-items:center;gap:8px;min-height:64px;padding:8px 10px 8px 8px;border:var(--bw) solid var(--ink);border-radius:14px;background:var(--card);color:var(--ink);text-align:left;transition:transform .15s,box-shadow .15s,background .15s}
.ck-mo button[aria-checked="true"]{background:var(--sky);color:#22282D;box-shadow:var(--sh);transform:translate(-2px,-2px)}
.ck-mo button:active{transform:translate(2px,2px);box-shadow:none}
.ck-mi{flex:none;display:grid;place-items:center;width:46px;height:40px;background:#FBF5EA;border:2px solid #22282D;border-radius:9px;overflow:hidden}
.ck-mi svg{width:38px;height:26px}
.ck-mi .bagi{width:30px;height:30px}
/* se mișcă învelișul, nu <svg>-ul: animarea unui <svg> întreg reface layout-ul la fiecare cadru */
.ck-mw{display:block;line-height:0}
.ck-mo button[aria-checked="true"] .ck-mw:has(.scoot){animation:ride .45s ease-in-out infinite alternate}
.ck-mo button[aria-checked="true"] .ck-mw:has(.bagi){animation:bagSwing 1.6s ease-in-out infinite;transform-origin:50% 20%}
@keyframes bagSwing{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.ck-mt{min-width:0;display:flex;flex-direction:column;gap:3px}
.ck-mt b{font-family:var(--f-name);font-weight:400;font-size:18px;line-height:1;white-space:nowrap}
.ck-mt small{font-family:var(--f-mono);font-size:10.5px;line-height:1.2;white-space:nowrap}
.ck-mo .ck-pc{right:6px;top:-9px}
.ck-mo button[aria-checked="true"] .ck-pc{opacity:1}
.ck-mo button[aria-checked="true"] .ck-pc path{stroke-dashoffset:0}
.ck-mo button.just{animation:modePop .45s var(--spring)}
.ck-mo button.just .ck-pc path{animation:chkDraw .35s .1s ease-out both}
@keyframes modePop{0%{transform:translate(-2px,-2px) scale(.94)}60%{transform:translate(-2px,-2px) scale(1.04)}100%{transform:translate(-2px,-2px)}}
@keyframes chkDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.ck-mn{margin:10px 0 0;padding:7px 10px 6px;border:2px dashed var(--ink);border-radius:8px;font-family:var(--f-mono);font-size:10.5px;line-height:1.35;color:var(--ink)}
.ck-mn.shut{border-style:solid;background:#E7B8B0;color:#22282D;border-color:#22282D}
.ck-mn.sw,.ck-f .sw{animation:swIn .4s var(--ease) both}
@keyframes swIn{from{opacity:0;transform:translateY(-8px)}}
.ck-mode.in{animation:etaIn .45s var(--ease) both}
@keyframes etaIn{from{opacity:0;transform:translateY(-12px)}}
/* scuterul (și în bara până la transport gratuit) */
@keyframes ride{from{transform:translateY(0)}to{transform:translateY(-1.5px) rotate(-1.5deg)}}

/* bonul: hârtie crem cu margini zimțate, poze color, marker, galben */
.bn-wrap{position:relative;filter:drop-shadow(5px 5px 0 var(--bn-sh))}
.bn{position:relative;padding:24px 16px 26px;background:#FBF5EA;color:#22282D;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 90deg,#0000 91deg) bottom/14px 51% repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 90deg,#0000 91deg) top/14px 51% repeat-x;
          mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 90deg,#0000 91deg) bottom/14px 51% repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 90deg,#0000 91deg) top/14px 51% repeat-x}
.bn p{margin:0}
.bn-h{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:4px 10px;padding-bottom:14px;border-bottom:2.5px dashed #22282D}
.bn-logo{grid-row:span 2;width:42px;height:42px;object-fit:contain}
.bn-h b{min-width:0;font-family:var(--marker);font-weight:400;font-size:25px;line-height:1}
.bn-ad{grid-column:2 / 4;font-family:var(--f-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:#4A5157}
/* numărul bonului pe bandă Dymo, ca etichetele din hero */
.bn-no{justify-self:end;padding:6px 14px 5px;color:#F5F1E8;background:linear-gradient(180deg,#9E3542,#7A2E36 55%,#8E2F3B);
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,6px 100%,0 50%);font:700 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;text-shadow:0 -1px 0 rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.25);transform:rotate(2deg)}

/* rândurile */
.bn-lines{list-style:none;margin:0;padding:0}
.bn-l{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s var(--ease),opacity .3s ease}
.bn-in{position:relative;min-height:0;display:flex;gap:12px;padding:14px 0;border-bottom:1.5px dashed #B5AB9A}
.bn-ph{flex:none;width:62px;height:62px;padding:0;overflow:hidden;background:#F3E3C0;border:2.5px solid #22282D;border-radius:12px;box-shadow:3px 3px 0 #22282D;transform:rotate(-2.5deg);cursor:zoom-in}
.bn-l:nth-child(even) .bn-ph{transform:rotate(2deg)}
.bn-ph img{display:block;width:100%;height:100%;object-fit:cover}
.bn-lm{flex:1;min-width:0}
.bn-lt{display:flex;align-items:flex-start;gap:10px}
.bn-lt b{flex:1;min-width:0;font-family:var(--f-name);font-weight:400;font-size:18px;line-height:1.05}
.bn-p{flex:none;font-family:var(--f-price);font-size:22px;line-height:1;white-space:nowrap}
.bn-p small{font-size:13px}
.bn-ld{margin-top:5px !important;font-family:var(--f-mono);font-size:10.5px;color:#5A6066}
.bn-mods{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px !important}
.bn-mods span{padding:2px 6px 1px;border:1.5px solid #22282D;border-radius:4px;font:700 10.5px/1.35 var(--f-mono)}
.bn-mods .ad{background:var(--mint)}
.bn-mods .rm{background:#F1DFD7;color:#7A2E36;border-color:#7A2E36}
.bn-warn{margin-top:6px !important;font:700 11px/1.3 var(--f-mono);color:#7A2E36}
.bn-ctl{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.bn-step{display:inline-flex;align-items:center;padding:2px;background:var(--mustard);border:2.5px solid #22282D;border-radius:12px;box-shadow:3px 3px 0 #22282D}
.bn-step button{display:grid;place-items:center;width:40px;height:38px;padding:0;border:0;border-radius:9px;background:none;color:#22282D;font:700 22px/1 var(--f-body);transition:transform .12s,background .12s}
.bn-step button:active{transform:scale(.85);background:rgba(255,255,255,.4)}
.bn-step button svg{width:18px;height:18px}
.bn-step button:has(svg){color:#7A2E36}
.bn-step output{min-width:26px;overflow:hidden;text-align:center;font-family:var(--display);font-size:21px;line-height:1.1}
.bn-step output span{display:inline-block}
.bn-edit{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 4px;border:0;background:none;color:#22282D;font:700 11.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--mustard);text-underline-offset:4px}
.bn-edit svg{width:11px;height:11px}

/* intrarea la deschidere: bonul „aruncat" pe tejghea, rândurile vin pe rând, totalul se lipește ultimul */
.bn-wrap.in{animation:bnIn .6s var(--spring) both}
@keyframes bnIn{from{opacity:0;transform:translateY(40px) rotate(3deg)}}
.bn-wrap.in .bn-l{animation:bnRow .45s var(--spring) both;animation-delay:calc(var(--i) * 70ms + .2s)}
@keyframes bnRow{from{opacity:0;transform:translateX(-16px) rotate(-1deg)}}
.bn-wrap.in .bn-total{animation:bnBand .5s var(--spring) both .5s}
@keyframes bnBand{from{opacity:0;transform:scale(1.12) rotate(-2deg)}}
.ck-f.in{animation:ckIn .5s var(--ease) both .4s}
@keyframes ckIn{from{opacity:0;transform:translateY(18px)}}

/* rând nou: se lipește ca un sticker; rând schimbat: marker galben și cifra se răstoarnă */
.bn-l.bn-new{animation:bnGrow .45s var(--ease) both}
.bn-l.bn-new .bn-in{overflow:hidden;animation:bnDrop .5s var(--spring) both .05s}
@keyframes bnGrow{from{grid-template-rows:0fr}}
@keyframes bnDrop{from{opacity:0;transform:scale(1.06) rotate(-2deg)}}
.bn-l.bn-chg .bn-in::before,.bn-l.bn-hl .bn-in::before{content:"";position:absolute;inset:8px -8px;z-index:-1;border-radius:6px;background:#EBCB8B;mix-blend-mode:multiply;transform-origin:0 50%;animation:bnHi 1s ease-out both;pointer-events:none}
.bn-l.bn-hl .bn-in::before{animation-duration:1.5s;animation-delay:.9s}
@keyframes bnHi{0%{transform:scaleX(0);opacity:1}30%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.bn-l.bn-chg.up output span{animation:bnUp .32s var(--spring) both}
.bn-l.bn-chg.dn output span{animation:bnDn .32s var(--spring) both}
.bn-l.bn-chg .bn-p{animation:pop .45s var(--spring)}
@keyframes bnUp{from{transform:translateY(80%);opacity:0}}
@keyframes bnDn{from{transform:translateY(-80%);opacity:0}}
/* rând scos: tăiat cu marker roșu, apoi se strânge și restul urcă lin */
.bn-l.bn-bye{pointer-events:none}
.bn-x{position:absolute;left:-6px;top:24px;width:calc(100% + 12px);height:18px;margin-top:-9px;overflow:visible;pointer-events:none}
.bn-x path{fill:none;stroke:#8E2F3B;stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:bnStrike .22s ease-out forwards}
@keyframes bnStrike{to{stroke-dashoffset:0}}
.bn-l.bn-gone{grid-template-rows:0fr;opacity:0}
.bn-l.bn-gone .bn-in{overflow:hidden}

/* drumul până la transport gratuit */
.bn-road{position:relative;margin-top:16px;padding:12px 12px 16px;background:#F1E2C4;border:2px solid #22282D;border-radius:10px}
.bn-road.free{background:#DDF3E4}
.bn-road p{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:16px !important}
.bn-road b{font-family:var(--f-hand);font-weight:400;font-size:16px;line-height:1.1}
.bn-road em{flex:none;font:700 11px/1 var(--f-mono);font-style:normal}
.bn-rd{position:relative;height:16px;margin-right:20px}
.bn-bar{position:absolute;inset:0;overflow:hidden;background:#FBF5EA;border:2px solid #22282D;border-radius:5px}
.bn-bar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p) * 100%);overflow:hidden;background:#D9A54F;animation:bnFill .8s var(--ease) both}
.bn-bar i::before{content:"";position:absolute;top:0;bottom:0;left:-20px;right:0;background:repeating-linear-gradient(-45deg,#D9A54F 0 7px,#D9A54F 7px 14px);animation:bnStripes 1.2s linear infinite}
.bn-road.free .bn-bar i::before{content:none}
.bn-road.free .bn-bar i{background:var(--mint);animation:bnFill .8s var(--ease) both}
@keyframes bnFill{from{width:calc(var(--p0) * 100%)}}
@keyframes bnStripes{to{transform:translateX(19.8px)}}
.bn-min{position:absolute;top:-5px;bottom:-5px;width:3px;margin-left:-1.5px;background:#22282D;border-radius:2px}
.bn-flag{position:absolute;right:-22px;top:-18px;width:24px;height:28px}
.bn-flag svg{display:block;width:100%;height:100%}
.bn-sc{position:absolute;top:-20px;left:calc(var(--p) * 100%);width:34px;height:22px;margin-left:-28px;animation:bnSc .8s var(--ease) both}
.bn-sc svg{display:block;width:100%;height:100%}
.bn-road:not(.free) .bn-sc{animation:bnSc .8s var(--ease) both,ride .45s ease-in-out infinite alternate}
@keyframes bnSc{from{left:calc(var(--p0) * 100%)}}
/* ștampila, la fel ca „Adăugat!" de pe carduri */
.bn-stamp{position:absolute;right:8px;top:-16px;z-index:3;padding:3px 10px 1px;border:3px solid #8E2F3B;border-radius:7px;background:rgba(255,251,240,.55);mix-blend-mode:multiply;color:#8E2F3B;font-family:var(--display);font-size:15px;line-height:1.05;letter-spacing:.03em;text-align:center;transform:rotate(-7deg);pointer-events:none}
.bn-stamp.slam{animation:bnSlam .55s var(--spring) both}
@keyframes bnSlam{0%{transform:rotate(-24deg) scale(2.3);opacity:0}55%{transform:rotate(-6deg) scale(.94);opacity:1}100%{transform:rotate(-7deg) scale(1)}}
.bn-stampa{position:relative;height:0}
.bn-stamp.big{top:-104px;right:50%;width:196px;margin-right:-98px;padding:7px 10px 5px;border-width:4px;font-size:25px;transform:rotate(-10deg);animation:bnSlamB .6s .25s var(--spring) both}
@keyframes bnSlamB{0%{transform:rotate(-26deg) scale(2.6);opacity:0}55%{transform:rotate(-9deg) scale(.94);opacity:1}100%{transform:rotate(-10deg) scale(1)}}

/* sugestia: bilet galben lipit cu bandă */
.bn-up{position:relative;margin:18px -4px 4px;padding:14px 12px 12px;background:#EBCB8B;color:#22282D;transform:rotate(-1.2deg);box-shadow:0 8px 14px -8px rgba(0,0,0,.45);animation:upIn .6s var(--spring) both .2s}
.bn-up.cold{background:#D7E2EC;transform:rotate(1deg)}
.bn-up::before{content:"";position:absolute;left:50%;top:-9px;width:70px;height:18px;margin-left:-35px;background:rgba(255,255,255,.55);transform:rotate(-4deg)}
.bn-up p{font-family:var(--f-hand);font-size:17px;line-height:1.2}
.bn-up p b{font-family:var(--f-price);font-weight:400;color:#6B2630}
.bn-upr{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.bn-upi{flex:none;display:flex;align-items:center;gap:8px;padding:4px 4px 4px 9px;background:#FBF5EA;border:2px solid #22282D;border-radius:8px}
.bn-upi span{max-width:112px;font-family:var(--f-mono);font-size:11px;line-height:1.2}
.bn-upi span b{display:block;font-family:var(--f-price);font-weight:400;font-size:15px}
.bn-upi .qadd{width:44px;height:44px;box-shadow:2px 2px 0 #22282D}

/* totaluri: banda galbenă cu totalul mare */
.bn-tot{margin:16px 0 0;font:12.5px/1.4 var(--f-mono)}
.bn-tot div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2px 0}
.bn-tot dt,.bn-tot dd{margin:0}
.bn-tot s{margin-right:7px;color:#858B90}
.bn-free{padding:1px 6px;background:var(--mint);border:1.5px solid #22282D;border-radius:4px;font-size:11px;font-weight:700;text-transform:uppercase}
.bn-total{position:relative;display:flex;justify-content:space-between;align-items:center;margin:12px -16px 0;padding:10px 16px 8px;background:var(--mustard);border-top:3px solid #22282D;border-bottom:3px solid #22282D}
.bn-total span{font-family:var(--f-hand);font-size:25px;line-height:1}
.bn-total b{font-family:var(--f-price);font-weight:400;font-size:38px;line-height:1}
.bn-total b small{font-size:18px}
.bn-total.chg b{display:inline-block;animation:pop .45s var(--spring)}
.bn-kcal{margin-top:12px !important;text-align:center;font:10.5px/1.3 var(--f-mono);color:#5A6066}
.bn-thx{margin-top:6px !important;text-align:center;font:700 11px/1 var(--f-mono);letter-spacing:.16em}

/* unde livrăm: cartonaș ca în restul site-ului, cu etichetă galbenă */
.ck-f{min-width:0;margin:4px 0 0;padding:20px 14px 16px;border:var(--bw) solid var(--ink);border-radius:16px;background:var(--card);box-shadow:var(--sh)}
.ck-f legend{padding:2px 10px 0;background:var(--mustard);color:#22282D;border:2px solid var(--ink);border-radius:6px;font-family:var(--f-hand);font-size:22px;transform:rotate(-2deg)}
.ck-f .fld + .fld{margin-top:14px}
.ck-f .fld label,.ck-lb{display:block;margin-bottom:6px;font:700 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.ck-f .fld label small{font-weight:400;letter-spacing:.02em;text-transform:none}
.ck-in{position:relative}
.ck-ic{position:absolute;left:12px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--ink-faint);pointer-events:none;transition:color .15s}
.ck-in:has(textarea) .ck-ic{top:14px;margin-top:0}
.ck-ic svg,.ck-pi svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ck-f input,.ck-f textarea{display:block;width:100%;padding:12px 42px;border:2.5px solid var(--ink);border-radius:10px;background:var(--paper);color:var(--ink);font:400 16px/1.3 var(--f-body);transition:box-shadow .15s,transform .15s,border-color .15s}
.ck-f textarea{min-height:66px;padding-right:12px;resize:vertical}
.ck-f input::placeholder,.ck-f textarea::placeholder{color:var(--ink-faint);opacity:1}
.ck-f input:focus,.ck-f textarea:focus{outline:0;box-shadow:var(--sh-s);transform:translate(-2px,-2px)}
.ck-in:focus-within .ck-ic{color:var(--ink)}
.ck-f input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--paper) inset;-webkit-text-fill-color:var(--ink)}
.ck-f .fld.bad input{border-color:var(--red);background:color-mix(in srgb,var(--red) 8%,var(--paper));animation:shake .4s ease}
.ck-f .err{display:none;margin-top:6px;font:400 15px/1.2 var(--marker);color:var(--red)}
.ck-f .fld.bad .err{display:block}
.ck-okm{position:absolute;right:11px;top:50%;width:22px;height:22px;margin-top:-11px;opacity:0;transition:opacity .2s;pointer-events:none}
.ck-okm svg{display:block;width:100%;height:100%;overflow:visible}
.ck-okm path{fill:none;stroke:#5E8A55;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .35s ease-out}
.ck-f .fld.ok .ck-okm{opacity:1}
.ck-f .fld.ok .ck-okm path{stroke-dashoffset:0}
.ck-pay{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ck-pay button{position:relative;display:flex;align-items:center;gap:10px;min-height:56px;padding:0 12px;border:2.5px solid var(--ink);border-radius:12px;background:var(--paper);color:var(--ink);text-align:left;transition:transform .15s,box-shadow .15s,background .15s}
.ck-pi{flex:none;width:28px;height:28px}
.ck-pay b{font-family:var(--f-name);font-weight:400;font-size:19px;line-height:1}
.ck-pc{position:absolute;right:8px;top:-7px;width:28px;height:28px;opacity:0;transition:opacity .15s}
.ck-pc svg{display:block;width:100%;height:100%;overflow:visible}
.ck-pc path{fill:none;stroke:var(--red);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .3s ease-out}
.ck-pay button[aria-pressed="true"]{background:var(--mustard);color:#22282D;box-shadow:3px 3px 0 var(--ink);transform:translate(-2px,-2px)}
.ck-pay button[aria-pressed="true"] .ck-pc{opacity:1}
.ck-pay button[aria-pressed="true"] .ck-pc path{stroke-dashoffset:0}
.ck-mem{margin:14px 0 0;text-align:center;font:10.5px/1.4 var(--f-mono);color:var(--ink-soft)}

/* butonul de trimis: pe un rând, totalul în dreapta; când datele sunt complete trece o lumină peste el */
.ck-send{position:relative;display:flex;align-items:stretch;width:100%;min-height:58px;border:var(--bw) solid var(--ink);border-radius:14px;overflow:hidden;background:#25D366;color:#22282D;text-decoration:none;box-shadow:var(--sh);transition:transform .12s var(--ease),box-shadow .12s}
.ck-send:active{transform:translate(5px,5px);box-shadow:none}
.ck-sl{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:9px;padding:0 12px;font-family:var(--display);font-size:19px;line-height:1;white-space:nowrap}
.ck-sl svg{flex:none;width:22px;height:22px}
.ck-st{flex:none;display:flex;align-items:center;padding:0 14px;background:#22282D;color:#25D366;font-family:var(--display);font-size:14px;line-height:1;white-space:nowrap}
.ck-st b{font-weight:400;font-size:22px}
.ck-st.pop b{display:inline-block;animation:pop .45s var(--spring)}
.ck-send.ready::after{content:"";position:absolute;top:0;bottom:0;left:0;width:28%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));transform:translateX(-150%) skewX(-18deg);animation:shine 3.4s ease-in-out 1s infinite;pointer-events:none}
@keyframes shine{0%,70%{transform:translateX(-150%) skewX(-18deg)}100%{transform:translateX(470%) skewX(-18deg)}}
.ck-send.busy{opacity:.7;pointer-events:none}
.fine.bad{color:var(--red);font-weight:700}
.ck-send.dis{background:var(--paper-2);color:var(--ink-soft);border-style:dashed;box-shadow:none;cursor:not-allowed}
.ck-send.dis .ck-sl{font-size:17px}
.ck-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* coș gol */
.bn-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 16px 32px;text-align:center}
.bn-empty img{width:50px;height:64px;animation:wobble 2s ease-in-out infinite}
.bn-empty b{font-family:var(--f-name);font-weight:400;font-size:28px;line-height:1}
.bn-empty span{max-width:30ch;font:11px/1.45 var(--f-mono);color:#5A6066}
.ck-picks{margin-top:4px}
.ck-picks h3{margin:0 0 12px;font-size:24px}
.ck-pick{display:flex;align-items:center;gap:12px;padding:8px;border:2px solid var(--ink);border-radius:12px;background:var(--card)}
.ck-pick + .ck-pick{margin-top:10px}
.ck-pick img{flex:none;width:54px;height:54px;border:2px solid var(--ink);border-radius:8px;object-fit:cover}
.ck-pick p{flex:1;min-width:0;margin:0}
.ck-pick b{display:block;font-family:var(--f-name);font-weight:400;font-size:17px;line-height:1.05}
.ck-pick span{font-family:var(--f-price);font-size:17px;color:var(--red)}
.ck-pick .qadd{flex:none;width:44px;height:44px}

/* după trimitere: pașii, apoi bonul curat, ștampilat */
.ck-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:st}
.ck-steps li{position:relative;counter-increment:st;padding:11px 12px 11px 56px;border:2px solid var(--ink);border-radius:12px;background:var(--card)}
.ck-steps li::before{content:counter(st);position:absolute;left:12px;top:50%;width:32px;height:32px;margin-top:-16px;display:grid;place-items:center;border:2px solid currentColor;border-radius:6px;font-family:var(--marker);font-size:18px;line-height:1;transform:rotate(-4deg)}
.ck-steps li.now{background:#25D366;color:#22282D;border-color:#22282D;box-shadow:var(--sh-s);animation:ckNow 3s ease-in-out 1s infinite}
@keyframes ckNow{0%,80%,100%{transform:none}86%{transform:rotate(-1deg) translateY(-2px)}92%{transform:rotate(.6deg)}}
.ck-steps b{display:block;font-family:var(--f-body);font-size:15px;font-weight:700}
.ck-steps span{display:block;margin-top:2px;font-size:13px;color:var(--ink-soft)}
.ck-steps li.now span{color:#22282D;opacity:.8}
.bn-final .bn-in{padding:12px 0}
.ck-msg{font-family:var(--f-mono);font-size:12px}
.ck-msg summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ck-msg summary::-webkit-details-marker{display:none}
.ck-msg summary::before{content:"+";display:grid;place-items:center;width:24px;height:24px;margin-right:10px;border:2px solid currentColor;border-radius:5px;font-size:16px;line-height:1}
.ck-msg[open] summary::before{content:"−"}
.ck-msg pre{margin:8px 0 0;padding:12px;white-space:pre-wrap;background:#FBF5EA;color:#22282D;border:2px dashed var(--ink);border-radius:10px;font:11.5px/1.45 var(--f-mono)}

/* la adăugare din meniu: din spatele barei de jos iese un sticker galben cu produsul */
.slip{position:fixed;left:24px;right:24px;bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:49;pointer-events:none;transform:translateY(125%);transition:transform .3s var(--ease)}
.slip.on{transform:rotate(-1.5deg);transition:transform .45s var(--spring)}
.slip-p{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px 8px;background:var(--mustard);color:#22282D;border:2.5px solid #22282D;border-radius:8px;box-shadow:3px 3px 0 #22282D}
.slip-p::before{content:"";position:absolute;left:50%;top:-9px;width:54px;height:16px;margin-left:-27px;background:rgba(255,255,255,.6);transform:rotate(-3deg)}
.slip-p b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--f-name);font-weight:400;font-size:16px}
.slip-p span{flex:none;font-family:var(--f-price);font-size:17px}
@media (min-width:700px){ .slip{left:auto;right:36px;width:408px} }

.note{background:var(--mustard);color:#22282D;border:2px solid #22282D;border-radius:8px;padding:9px 11px;font-size:11.5px;margin-top:12px}
.note b{font-weight:500;text-decoration:underline}
.meter{display:block;height:8px;background:#FBF8F1;border:2px solid #22282D;border-radius:99px;margin-top:7px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--red);transform-origin:0 50%;transition:transform .6s var(--ease)}
.send{position:relative;border:var(--bw) solid var(--ink);width:100%;min-height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;background:var(--red);color:var(--on-red);font-family:var(--display);font-size:22px;letter-spacing:.02em;box-shadow:var(--sh);transition:transform .12s var(--ease),box-shadow .12s}
.send svg{width:22px;height:22px}
.send.wa{background:#25D366;color:#22282D}
.send:active{transform:translate(5px,5px);box-shadow:none}
.send.dis,.send:disabled{background:var(--paper-2);color:var(--ink-soft);box-shadow:none;border-style:dashed;cursor:not-allowed;font-size:17px}
.fine{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);text-align:center}
.ghost{border:2.5px solid var(--ink);background:var(--card);border-radius:12px;min-height:46px;font-weight:700;width:100%;box-shadow:var(--sh-s);transition:transform .12s,box-shadow .12s}
.ghost:active{transform:translate(3px,3px);box-shadow:none}

/* ---- fisa produs: afis ---- */
#prod .sheet-top{position:absolute;top:0;left:0;right:0;z-index:8;background:transparent;border:0;padding:14px 14px 0;justify-content:flex-end;pointer-events:none}
#prod .sheet-top h2{display:none}
#prod .x{pointer-events:auto}
#prod .sheet-body{padding:0 0 16px;gap:16px}
#prod .sheet-body > *:not(.pd-shot){margin-inline:16px}
/* fișa produsului e o fereastră în mijlocul ecranului (cerută de proprietar, 16.10), nu panou de jos sau din dreapta.
   Centrarea e cu proprietatea `translate`, ca tragerea în jos (transform din JS) să se adune peste ea. */
#prod{left:12px;right:12px;top:50%;bottom:auto;height:auto;width:auto;
  max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  translate:0 -50%;border:var(--bw) solid var(--ink);border-radius:22px;box-shadow:var(--sh);
  opacity:0;visibility:hidden;transform:translateY(28px) scale(.96);
  transition:transform .36s cubic-bezier(.22,1,.3,1),opacity .22s ease,visibility 0s linear .36s}
#prod.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
#prod .grab{display:none}
#prod .sheet-body{flex:1 1 auto;min-height:0}
#prod .sheet-foot{border-radius:0 0 19px 19px}
#prod .pd-shot{border-radius:19px 19px 0 0}
#prod .pd-shot img{max-height:30dvh}
@media (min-width:700px){ #prod{left:50%;right:auto;width:min(560px,calc(100vw - 48px));translate:-50% -50%} }
.pd-shot{position:relative;flex:none;background:var(--paper-2);cursor:zoom-in;overflow:hidden;border-radius:19px 19px 0 0;border-bottom:var(--bw) solid var(--ink)}
.pd-shot img{width:100%;aspect-ratio:3/2;max-height:38dvh;object-fit:cover;animation:kb 12s ease-out both}
@keyframes kb{from{transform:scale(1.001)}to{transform:scale(1.08)}}
.pd-cap{position:absolute;left:12px;right:12px;bottom:12px;z-index:2}
.pd-kick{display:table;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:3px 8px;border-radius:4px;margin-bottom:6px}
.pd-cap h2{display:inline;font-family:var(--f-name);font-weight:900;font-size:40px;line-height:1.05;background:var(--paper);color:var(--ink);padding:2px 8px;box-decoration-break:clone;-webkit-box-decoration-break:clone;border-radius:4px}
.pd-title{padding:22px 60px 0 0}
.pd-title h2{font-size:40px}
.pd-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pd-price{font-family:var(--f-price);font-size:32px;line-height:1;background:var(--red);color:#fff;padding:6px 14px 4px;border:var(--bw) solid var(--ink);border-radius:10px;box-shadow:var(--sh-s);margin-right:auto;transform:rotate(-2deg)}
.pd-pill{font-family:var(--f-mono);font-weight:700;font-size:11.5px;border:2px solid var(--ink);border-left:7px solid var(--ink);border-radius:2px;padding:5px 10px;white-space:nowrap;background:var(--card);text-transform:uppercase}
.pd-desc{font-size:14.5px;color:var(--ink-soft)}
.pd-sec h3{display:flex;align-items:baseline;gap:8px;font-size:24px;margin:0 0 10px}
.pd-sec h3 small{margin-left:auto;font-family:var(--mono);font-size:10.5px;text-transform:none;color:var(--ink-soft)}
.nut{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:var(--card);border:var(--bw) solid var(--ink);border-radius:14px;box-shadow:var(--sh);padding:12px 14px}
.ring{position:relative;width:80px;height:80px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:10}
.ring .bg{stroke:var(--paper-2)}
.ring .s1{stroke:var(--red)}.ring .s2{stroke:var(--mustard)}.ring .s3{stroke:#5E8A55}
.ring .s1,.ring .s2,.ring .s3{transition:stroke-dasharray .6s var(--ease),stroke-dashoffset .6s var(--ease)}
.ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.nut-kcal{font-family:var(--f-price);font-size:21px}
.nut-unit{font-family:var(--mono);font-size:9px;letter-spacing:.1em;margin-top:2px;color:var(--ink-soft)}
.macs{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:12px}
.mac{display:flex;align-items:center;gap:7px}
.mac .sw{width:11px;height:11px;border-radius:3px;border:2px solid var(--ink);flex:none}
.mac span{color:var(--ink-soft);flex:1}
.mac b{font-weight:500}
.nut-note{font-family:var(--mono);font-size:10px;color:var(--ink-soft);margin-top:8px;line-height:1.45}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;border:2.5px solid var(--ink);background:var(--card);color:var(--ink);border-radius:10px;padding:8px 12px 8px 8px;font-size:13.5px;font-weight:600;line-height:1.1;box-shadow:var(--sh-s);transition:transform .12s var(--ease),box-shadow .12s,background .15s}
.chip:active{transform:translate(3px,3px);box-shadow:none}
.chip .ic{width:22px;height:22px;flex:none;border-radius:6px;display:grid;place-items:center;font-size:13px;font-weight:700;line-height:1;background:var(--ink);color:var(--paper);transition:transform .34s var(--ease)}
.chip .nm{position:relative}
/* ingredient scos: mâzgăleală de marker trasă peste nume + sticker „fără" */
.chip{position:relative}
.chip .scr{position:absolute;left:-6px;right:-6px;top:50%;width:calc(100% + 12px);height:22px;margin-top:-11px;overflow:visible;pointer-events:none}
/* ascuns complet cât ingredientul e păstrat: altfel capătul rotunjit al liniei lasă un punct */
.chip .scr path{fill:none;stroke:var(--red);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;
  transition:stroke-dashoffset .32s cubic-bezier(.6,0,.3,1),opacity 0s linear .34s}
.chip .scr path + path{stroke-width:2.4;transition-delay:0s,.34s}
.chip.off .scr path{stroke-dashoffset:0;opacity:1;transition-delay:0s,0s}
.chip.off .scr path + path{transition-delay:.18s,0s}
.chip.ing.off::after{content:"fără";position:absolute;top:-11px;right:-8px;padding:1px 7px 0;background:var(--mustard);color:#22282D;border:2px solid #22282D;border-radius:4px;font-family:var(--marker);font-size:12px;line-height:1.3;transform:rotate(8deg);animation:faraIn .45s .25s var(--spring) both}
@keyframes faraIn{from{opacity:0;transform:rotate(-20deg) scale(1.9)}}
.chip .gg{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft)}
.chip.off{border-style:dashed;box-shadow:none;background:transparent;color:var(--ink-soft);transform:rotate(-1.5deg)}
.chip.off .ic{background:var(--paper-2);color:var(--ink);transform:rotate(135deg)}
.chip.xc .ic{background:var(--mustard);color:#22282D}
.chip.xc .pp{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--red)}
.chip.xc.on{background:var(--mustard);color:#22282D;transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.chip.xc.on .ic{background:var(--ink);color:var(--mustard);transform:rotate(360deg)}
.chip.xc.on .gg,.chip.xc.on .pp{color:#22282D}
@keyframes chipOn{0%{transform:scale(1)}40%{transform:scale(1.1) rotate(-3deg)}100%{transform:translate(-2px,-2px)}}
@keyframes chipOff{0%{transform:none}40%{transform:scale(.9) rotate(-4deg)}100%{transform:rotate(-1.5deg)}}
.chip.anim-on{animation:chipOn .4s var(--spring)}
.chip.anim-off{animation:chipOff .4s var(--ease)}
@keyframes fly{0%{opacity:0;transform:translateY(4px) scale(.6) rotate(-10deg)}15%{opacity:1;transform:translateY(-10px) scale(1.15) rotate(4deg)}60%{opacity:1;transform:translateY(-36px) rotate(-2deg)}100%{opacity:0;transform:translateY(-66px)}}
.fly{position:fixed;z-index:95;pointer-events:none;white-space:nowrap;font-family:var(--display);font-size:22px;color:#22282D;background:var(--mustard);border:2px solid #22282D;border-radius:6px;padding:0 6px;animation:fly 1.4s cubic-bezier(.22,.7,.3,1) forwards}
.alg{display:flex;flex-wrap:wrap;gap:7px}
/* banda de hartie adeziva */
.alg span{font-family:var(--f-hand);font-size:15px;padding:5px 14px;background:rgba(217,165,79,.8);color:#22282D;transform:rotate(-1.5deg);
  clip-path:polygon(0 8%,4% 0,8% 10%,12% 0,50% 4%,88% 0,92% 9%,96% 0,100% 7%,100% 92%,96% 100%,92% 90%,88% 100%,50% 96%,12% 100%,8% 91%,4% 100%,0 93%)}
.alg span:nth-child(even){transform:rotate(1.8deg)}
.alg span.hit{background:rgba(142,47,59,.88);color:#fff}
.pd-foot{display:flex;gap:10px;align-items:stretch}
.pd-foot .step{flex:none;align-self:center;animation:none}
.pd-foot .send{flex:1}

/* ---- cautare ---- */
.q{position:relative}
.q svg{position:absolute;left:13px;top:50%;width:19px;height:19px;margin-top:-9.5px}
.q input{width:100%;font:inherit;font-size:16px;height:54px;padding:0 14px 0 44px;border:var(--bw) solid var(--ink);border-radius:14px;background:var(--card);color:var(--ink);box-shadow:var(--sh)}
.q input:focus{outline:0;background:var(--mustard);color:#22282D}
.flt{display:flex;flex-wrap:wrap;gap:8px}
.flt button{height:40px;padding:0 12px 0 8px;border:2.5px solid var(--ink);background:var(--card);border-radius:4px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:7px;transition:transform .15s,box-shadow .15s,background .15s}
.flt button::before{content:"";width:16px;height:16px;border:2px solid var(--ink);border-radius:2px;background:var(--paper);flex:none}
.flt button[aria-pressed="true"]{background:var(--mustard);color:#22282D;box-shadow:var(--sh-s);transform:translate(-2px,-2px)}
.flt button[aria-pressed="true"]::before{background:#22282D url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27m3 8 3.5 3.5L13 4%27 fill=%27none%27 stroke=%27%23FFC93C%27 stroke-width=%272.6%27/%3E%3C/svg%3E") center/100% no-repeat;border-color:#22282D}
.flt-l{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.res-n{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
#findList{display:grid;gap:16px;padding-bottom:10px}
#findList .item{animation:rise .35s var(--ease) both}

.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:120;transform:translate(-50%,24px) rotate(-3deg);opacity:0;background:#EBCB8B;color:#22282D;box-shadow:3px 6px 14px -6px rgba(0,0,0,.45);padding:12px 16px 10px;border-radius:0;font-family:var(--f-hand);font-size:16px;pointer-events:none;transition:transform .35s var(--spring),opacity .2s;white-space:nowrap}
.toast.on{transform:translate(-50%,0) rotate(-2deg);opacity:1}
.toast::before{content:"";position:absolute;left:50%;top:-9px;width:54px;height:18px;margin-left:-27px;background:rgba(255,255,255,.6);transform:rotate(3deg)}

.lb{position:fixed;inset:0;z-index:100;background:rgba(34,40,45,.96);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .26s ease}
.lb.open{opacity:1}
.lb img{max-width:100%;max-height:100%;object-fit:contain;border:4px solid #F4EADB;border-radius:12px;cursor:zoom-in;transition:transform .38s var(--ease)}
.lb img.z{cursor:zoom-out;transform:scale(2.2)}
.lb-x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:14px;width:46px;height:46px;border:3px solid #F4EADB;border-radius:10px;background:var(--red);color:#fff;font-size:22px}
.lb-hint{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);text-align:center;color:#F4EADB;font-family:var(--mono);font-size:11.5px;transition:opacity .25s}
.lb-hint.gone{opacity:0}

/* schimbarea temei: perdea care cade */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:curtain .55s var(--ease)}
@keyframes curtain{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* ============================================================
   COMPONENTE NOI (runda 3)
   ============================================================ */

/* ---------- panoul LED de shaormerie ---------- */
.led{position:relative;height:38px;overflow:hidden;background:#161B1F;border-bottom:var(--bw) solid var(--ink);display:flex;align-items:center;
  box-shadow:inset 0 0 0 3px #26221D,inset 0 0 18px rgba(0,0,0,.9)}
.led::before{display:none;content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,transparent 0 1px,rgba(13,11,9,.72) 1.6px) 0 0/3px 3px}
.led::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,#161B1F,transparent 8%,transparent 92%,#161B1F)}
.led-in{display:flex;flex:none;white-space:nowrap;font-family:var(--f-led);font-weight:800;font-size:19px;letter-spacing:.08em;text-transform:uppercase;color:#E3B566;
  text-shadow:0 0 4px rgba(255,160,20,.9),0 0 12px rgba(255,120,0,.55);
  animation:marquee var(--led-t,40s) steps(var(--led-steps,900)) infinite}
.led-in span{padding-right:44px}
.led-in b{font-weight:800;color:#E07B6A;text-shadow:0 0 6px rgba(224,123,106,.45)}
.led-in i{font-style:normal;color:#F4EADB;text-shadow:0 0 6px rgba(227,181,102,.5)}

/* ---------- titlurile care se schimba ---------- */
.hero h1.rot{display:grid}
.hero h1.rot .ln{grid-area:1/1;visibility:hidden}
.hero h1.rot .ln.on{visibility:visible}
.hero h1.rot .ln.out{visibility:visible;animation:outUp .45s var(--ease) forwards}
@keyframes outUp{to{opacity:0;transform:translateY(-30%) rotate(-3deg)}}
.rot-bar{display:flex;align-items:center;gap:10px;margin-top:-4px}
.rot-bar i{position:relative;flex:1;height:5px;background:var(--paper-2);border:2px solid var(--ink);border-radius:1px;overflow:hidden}
.rot-bar i::after{content:"";position:absolute;inset:0;background:var(--red);transform-origin:0 50%;transform:scaleX(0)}
.rot-bar i.run::after{animation:fill var(--rot-t,4.8s) linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
.rot-bar span{font-family:var(--f-mono);font-weight:700;font-size:11px}
.eta{font-family:var(--f-hand);font-size:19px;line-height:1.2;color:var(--ink)}
.eta b{font-family:var(--f-price);font-weight:400;color:var(--red);font-size:22px;padding:0 2px}
.eta .arr{display:inline-block;animation:nudge 1.2s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(5px)}}

@keyframes upIn{from{opacity:0;transform:translateY(30px) rotate(6deg) scale(.9)}to{opacity:1;transform:rotate(-1.2deg)}}

/* ---------- declarația nutrițională, compactă (cam jumătate din varianta mare) ---------- */
.nf{background:var(--card);border:var(--bw) solid var(--ink);border-radius:12px;box-shadow:var(--sh-s);padding:10px 12px;font-family:var(--f-body)}
.nf-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;padding-bottom:6px;border-bottom:4px solid var(--ink)}
.nf-top h3{font-size:18px;margin:0;line-height:1}
.nf-top h3::before{content:none}
.nf-sw{display:flex;border:2px solid var(--ink);border-radius:5px;overflow:hidden;flex:none}
.nf-sw button{border:0;background:transparent;padding:4px 7px;font-family:var(--f-mono);font-size:9.5px;font-weight:700;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.nf-sw button + button{border-left:2px solid var(--ink)}
.nf-sw button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.nf-en{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding:8px 0 6px}
.nf-big{display:flex;align-items:baseline;gap:3px;line-height:1}
.nf-big b{font-family:var(--f-mono);font-weight:700;font-size:28px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.nf-big small{font-family:var(--f-mono);font-size:12px;font-weight:700}
.nf-kj{font-family:var(--f-mono);font-size:11px;color:var(--ink-soft)}
.nf-ri{flex:1 1 120px;display:flex;flex-direction:column;gap:3px;align-self:center}
.nf-rib{display:block;height:7px;background:var(--paper-2);border-radius:2px;overflow:hidden}
.nf-rib i{display:block;height:100%;background:var(--red);transform-origin:0 50%;transform:scaleX(0);transition:transform .8s var(--ease)}
.nf-ri em{font-style:normal;font-family:var(--f-mono);font-size:10px;color:var(--ink-soft)}
.nf-ri em b{color:var(--ink)}
.nf-split{display:flex;gap:2px;height:7px;border:1.5px solid var(--ink);border-radius:2px;overflow:hidden;background:var(--ink)}
.nf-split i{display:block;flex-basis:0;flex-grow:1;transition:flex-grow .8s var(--ease)}
.nf-t{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.nf-row{display:flex;flex-direction:column;gap:2px;padding:6px 7px;background:var(--paper);border:1.5px solid color-mix(in srgb,var(--ink) 25%,transparent);border-radius:6px}
.nf-n{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--ink-soft)}
.nf-n i{width:8px;height:8px;border-radius:2px;flex:none}
.nf-v{font-family:var(--f-mono);font-size:14px;font-variant-numeric:tabular-nums}
.nf-v b{font-weight:700}
.nf-bar{height:5px;background:var(--paper-2);border-radius:2px;overflow:hidden}
.nf-bar i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0);transition:transform .8s var(--ease)}
.nf-row.hi .nf-bar i{background:var(--red)}
.nf-pc{font-family:var(--f-mono);font-size:9.5px;color:var(--ink-soft)}
.nf-pc b{color:var(--ink);font-weight:700}
.nf-foot{font-family:var(--f-mono);font-size:9px;line-height:1.4;color:var(--ink-soft);margin-top:6px}

/* ---------- confetti de hartie ---------- */
.conf{position:fixed;z-index:130;pointer-events:none;width:10px;height:14px;top:0;left:0}

/* ---------- cifre care se rotesc (total in bara) ---------- */
.odo{display:inline-flex;align-items:baseline}
.od{display:inline-block;height:1em;overflow:hidden;line-height:1}
.od > span{display:flex;flex-direction:column;transition:transform .7s var(--spring)}
.od > span > i{font-style:normal;height:1em;line-height:1}
.odo small{font-size:.62em;margin-left:3px}

/* ---------- inclinarea listei la scroll rapid ---------- */
#menu .list{transform-origin:50% 0}

/* ---------- aparitii in fisa de produs ---------- */
.chips .chip{animation:chipIn .4s var(--spring) both}
.chips .chip:nth-child(2){animation-delay:.04s}.chips .chip:nth-child(3){animation-delay:.08s}.chips .chip:nth-child(4){animation-delay:.12s}
.chips .chip:nth-child(5){animation-delay:.16s}.chips .chip:nth-child(6){animation-delay:.2s}.chips .chip:nth-child(7){animation-delay:.24s}
.chips .chip:nth-child(8){animation-delay:.28s}.chips .chip:nth-child(n+9){animation-delay:.32s}
@keyframes chipIn{from{opacity:0;transform:translateY(12px) rotate(-4deg) scale(.9)}to{opacity:1;transform:none}}

/* ---------- harta-afiș ---------- */
.map-card{margin-top:22px;background:var(--card);border:var(--bw) solid var(--ink);border-radius:18px;box-shadow:var(--sh);padding:14px}
.map-head h2{font-size:clamp(30px,8.6vw,42px);line-height:1}
.map-head p{margin-top:6px;font-size:14px;color:var(--ink-soft)}
.map-head p b{color:var(--ink)}
.map-frame{position:relative;margin-top:12px;border:var(--bw) solid var(--ink);border-radius:12px;overflow:hidden;background:#E8D7C0;aspect-ratio:1.18}
/* aceeași hartă ilustrată ca sus; JS-ul o potrivește în ramă ca în hero (valorile de aici sunt pentru un telefon de 390 px) */
.map-img{position:absolute;left:0;top:0;width:944px;height:752px;max-width:none;transform-origin:0 0;transform:translate(-40px,-13px) scale(.435)}
@media (min-width:700px){ .map-frame{aspect-ratio:1.6} }   /* pe calculator, rama pe toată lățimea cardului ar fi mai înaltă decât ecranul */
.pin-pulse{position:absolute;left:45%;top:36%;z-index:1;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:rgba(142,47,59,.45);pointer-events:none;animation:mPulse 1.9s ease-out infinite}
@keyframes mPulse{from{transform:scale(.5);opacity:.7}to{transform:scale(2.6);opacity:0}}
.map-addr{display:flex;flex-direction:column;gap:2px;margin-top:12px}
.map-addr span{font-family:var(--marker);font-size:19px;line-height:1.1}
.map-addr small{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-soft)}
.map-act{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.map-b{min-height:48px;display:flex;align-items:center;justify-content:center;border:var(--bw) solid var(--ink);border-radius:10px;background:var(--card);color:var(--ink);font-family:var(--marker);font-size:16px;text-decoration:none;box-shadow:var(--sh-s);transition:transform .12s,box-shadow .12s}
.map-b:active{transform:translate(3px,3px);box-shadow:none}
.map-b.g{background:var(--mustard);color:#22282D}
.map-b.w{background:var(--sky);color:#22282D}
.map-b.c{grid-column:1 / -1}

/* ---------- >= 700px ---------- */
@media (min-width:700px){
  body{font-size:15.5px}
  .rot-bar{grid-area:bar}.eta{grid-area:eta}
  .hero-in{grid-template-columns:1.25fr 1fr;grid-template-areas:"eb eb" "h1 pic" "bar pic" "eta pic" "lede pic" "facts facts";column-gap:34px;padding-block:34px 34px;align-items:start}
  .eyebrow{grid-area:eb}.hero h1{grid-area:h1}.hero-win{grid-area:pic;height:auto;min-height:320px}.lede{grid-area:lede;display:block}.facts{grid-area:facts;flex-wrap:wrap;margin:0;padding:0;overflow:visible}
  .hero h1{font-size:clamp(36px,4.4vw,58px)}
  .hero{--ov:0px}
  .hero-win .spin{width:130px;height:130px;right:-22px;top:-26px}
  .hero-shade{background:radial-gradient(ellipse 36% 52% at var(--wx,70%) var(--wy,50%),rgba(var(--shade),0) 0%,rgba(var(--shade),.1) 62%,rgba(var(--shade),.9) 100%)}
  .list{grid-template-columns:1fr 1fr;gap:20px}
  .item.star{grid-row:span 2}
  .cat-head{min-height:160px;padding:40px 22px 18px;border-radius:50% 50% 16px 16px / 70px 70px 16px 16px}.cat-head h2{font-size:64px}
  .info{grid-template-columns:repeat(2,1fr)}
  .story{min-height:400px}.story-in{padding:26px;max-width:620px;border-right:var(--bw) solid var(--ink);border-top-right-radius:14px}
  .story h2{font-size:56px}
  .bcard{width:190px}.bcard img{height:124px}
  .bar{left:auto;right:20px;width:440px}
  .sheet{left:auto;top:0;width:470px;height:auto;border:var(--bw) solid var(--ink);border-right:0;border-radius:22px 0 0 22px;transform:translateX(104%)}
  .sheet.open{transform:none}
  .grab{display:none}
  .pd-shot{border-radius:19px 0 0 0}
}
@media (min-width:1000px){ .list{grid-template-columns:repeat(3,1fr)} .cat{padding-top:40px} .info{grid-template-columns:repeat(4,1fr)} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* busola și mențiunea OpenStreetMap peste hartă (harta ilustrată nu e la scară, deci fără bara de 50 m) */
.map-n{position:absolute;right:10px;top:10px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#F4EADB;border:2px solid #22282D;font-family:var(--f-mono);font-weight:700;font-size:11px;color:#22282D}
.map-n::before{content:"";position:absolute;top:-7px;left:50%;margin-left:-5px;border:5px solid transparent;border-bottom:7px solid #22282D;border-top:0}
.map-attr{position:absolute;right:8px;bottom:6px;font-family:var(--f-mono);font-size:9px;color:#4A5157;background:rgba(251,233,196,.85);padding:0 4px;border-radius:3px}

/* ---------- fișa produsului: rânduri în loc de chipuri ---------- */
.rows{display:flex;flex-direction:column;border:var(--bw) solid var(--ink);border-radius:12px;overflow:hidden;background:var(--card);box-shadow:var(--sh)}
.row{position:relative;display:flex;align-items:center;gap:10px;min-height:50px;padding:6px 12px 6px 10px;border:0;border-top:1.5px dashed color-mix(in srgb,var(--ink) 30%,transparent);background:transparent;color:var(--ink);text-align:left;transition:background .2s}
.row:first-child{border-top:0}
.row .ic{flex:none;width:26px;height:26px;display:grid;place-items:center;border:2.5px solid var(--ink);border-radius:5px;font-weight:700;font-size:15px;line-height:1;transition:transform .3s var(--spring),background .15s}
.row .nm{position:relative;font-weight:600;font-size:15px}
.row .dots{flex:1;min-width:12px;border-bottom:2px dotted color-mix(in srgb,var(--ink) 35%,transparent);transform:translateY(4px)}
.row .gg{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-soft)}
.row .pp{font-family:var(--marker);font-size:16px;color:var(--red);min-width:52px;text-align:right}
.row .st{position:absolute;right:10px;top:50%;margin-top:-12px;opacity:0}
.row.ing .ic{background:var(--ink);color:var(--paper)}
.row.ing.off{background:repeating-linear-gradient(-45deg,transparent 0 8px,color-mix(in srgb,var(--red) 7%,transparent) 8px 16px)}
.row.ing.off .ic{background:transparent;color:var(--red);border-style:dashed;transform:rotate(-8deg)}
.row.ing.off .nm,.row.ing.off .gg{opacity:.55}
.row.ing.off .st{opacity:1;content:"";width:auto;height:auto}
.row.ing.off .st::after{content:"fără";display:block;padding:1px 8px 0;background:var(--mustard);color:#22282D;border:2px solid #22282D;border-radius:4px;font-family:var(--marker);font-size:13px;transform:rotate(6deg);animation:faraIn .45s .2s var(--spring) both}
.row.ing.off .gg{visibility:hidden}
/* ingredient care nu se poate scoate (meniul de la casă): se vede, fără buton */
.row.fix{cursor:default}
.row.fix .ic{background:transparent;color:var(--ink-soft);border-color:color-mix(in srgb,var(--ink) 40%,transparent)}
.row.xc .ic{background:transparent;color:var(--ink);border-style:dashed}
.row.xc.on{background:color-mix(in srgb,var(--mustard) 32%,transparent)}
.row.xc.on .ic{background:var(--mustard);color:#22282D;border-style:solid;transform:rotate(360deg)}
.row.anim-on{animation:rowOn .35s var(--spring)}
.row.anim-off{animation:rowOff .35s var(--ease)}
@keyframes rowOn{40%{transform:scale(1.02)}}
@keyframes rowOff{40%{transform:translateX(6px)}}
.row .scr{position:absolute;left:-4px;right:-4px;top:50%;width:calc(100% + 8px);height:22px;margin-top:-11px;overflow:visible;pointer-events:none}
.row .scr path{fill:none;stroke:var(--red);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .32s cubic-bezier(.6,0,.3,1),opacity 0s linear .34s}
.row .scr path + path{stroke-width:2.4;transition-delay:0s,.34s}
.row.off .scr path{stroke-dashoffset:0;opacity:1;transition-delay:0s,0s}
.row.off .scr path + path{transition-delay:.18s,0s}
.pd-mods{display:flex;flex-wrap:wrap;gap:6px}
.pd-mods span{padding:3px 9px 2px;border:2px solid var(--ink);border-radius:4px;font-family:var(--marker);font-size:14px}
.pd-mods .m-f{background:color-mix(in srgb,var(--red) 16%,transparent)}
.pd-mods .m-p{background:color-mix(in srgb,var(--mustard) 45%,transparent)}

/* „Atinge ce nu vrei" / „Atinge ce vrei în plus": mare, lizibil, cu un deget care bate ușor */
.tap-hint{display:inline-flex;align-items:center;gap:10px;margin:-2px 0 10px;padding:5px 12px 4px 8px;background:var(--mustard);color:#22282D;border:2.5px solid #22282D;border-radius:6px;box-shadow:3px 3px 0 #22282D;font-family:var(--marker);font-size:18px;line-height:1.1;transform:rotate(-1.5deg);animation:hintNudge 3.2s ease-in-out 1s infinite}
.tap-hint b{font-weight:400;background:#22282D;color:var(--mustard);padding:0 5px;border-radius:3px}
.tap-hint.plus{background:var(--sky)}
.tap-hint.plus b{background:#22282D;color:var(--sky)}
.tap{position:relative;flex:none;width:26px;height:26px}
.tap svg{position:relative;z-index:1;display:block;width:26px;height:26px;fill:#22282D}
.tap{transform-origin:50% 90%;animation:tapPress 1.6s ease-in-out infinite}
/* cercurile pornesc din vârful degetului, exact când „apasă" */
.tap::before,.tap::after{content:"";position:absolute;left:5px;top:0;width:15px;height:15px;border-radius:50%;border:2px solid #22282D;opacity:0;animation:tapRing 1.6s ease-out infinite}
.tap::after{animation-delay:.25s}
@keyframes tapRing{0%,12%{transform:scale(.5);opacity:0}16%{opacity:.9}70%,100%{transform:scale(1.9);opacity:0}}
@keyframes tapPress{0%,100%{transform:none}12%{transform:translateY(2px) scale(.92)}24%{transform:none}}
@keyframes hintNudge{0%,78%,100%{transform:rotate(-1.5deg)}84%{transform:rotate(-1.5deg) translateY(-3px)}90%{transform:rotate(-1.5deg) translateY(1px)}}

/* harta mare, pe tot ecranul */
.mlb{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;gap:10px;padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(14px + env(safe-area-inset-bottom,0px));background:rgba(13,11,9,.94);opacity:0;transition:opacity .22s ease}
.mlb.open{opacity:1}
.mlb-top{display:flex;align-items:flex-start;gap:10px;color:#F4EADB}
.mlb-top div{flex:1;display:flex;flex-direction:column;gap:3px}
.mlb-top b{font-family:var(--marker);font-weight:400;font-size:22px;line-height:1.05}
.mlb-top span{font-family:var(--f-mono);font-size:11px;color:#D5C6B0}
.mlb-map{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;border:3px solid #F4EADB;border-radius:12px;background:#E8D7C0;-webkit-overflow-scrolling:touch}
.mlb-in{position:relative}
.mlb-in img{display:block;width:100%;height:100%;max-width:none}
.mlb.open .mlb-in{animation:mlbIn .45s var(--spring)}
@keyframes mlbIn{from{transform:scale(.92);opacity:0}}
.mlb-act{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.mlb-act .map-b{min-height:46px;font-size:15px}
.mlb-act .map-b.z{background:#F4EADB;color:#22282D}
.mlb-attr{position:absolute;right:18px;bottom:calc(72px + env(safe-area-inset-bottom,0px));font-family:var(--f-mono);font-size:9px;color:#4A5157;background:rgba(251,233,196,.9);padding:0 4px;border-radius:3px}
#harta .map-frame{cursor:zoom-in}

/* ridicare: în bon, în formular și la „Cum ne găsești" */
.bn-pk{display:flex;align-items:center;gap:8px;margin-top:16px !important;padding:9px 11px 8px;background:#DDF3E4;border:2px solid #22282D;border-radius:10px;font:700 11px/1.35 var(--f-mono)}
.bn-pk svg{flex:none;width:18px;height:18px}
.ck-at{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px;border:2.5px solid var(--ink);border-radius:12px;background:var(--mint);color:#22282D}
.ck-ati{flex:none;width:34px;height:34px;display:grid;place-items:center;background:#FBF5EA;border:2px solid #22282D;border-radius:8px}
.ck-ati svg{width:20px;height:20px;fill:none;stroke:#8E2F3B;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ck-at div{flex:1;min-width:0}
.ck-at b{display:block;font-family:var(--f-name);font-weight:400;font-size:16px;line-height:1.1}
.ck-at div span{display:block;margin-top:3px;font:10.5px/1.35 var(--f-mono)}
.ck-atb{flex:none;display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 12px;border:2.5px solid #22282D;border-radius:10px;background:#FBF5EA;color:#22282D;font:700 12px/1 var(--f-mono);text-transform:uppercase;box-shadow:2px 2px 0 #22282D}
.ck-atb svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ck-atb:active{transform:translate(2px,2px);box-shadow:none}
.ck-steps .ck-atb{margin-top:8px}
/* „Când?": orele din sfert în sfert, pe un rând care se derulează */
.ck-when{display:flex;gap:8px;margin:0 -14px;padding:2px 14px 6px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.ck-when::-webkit-scrollbar{display:none}
.ck-when button{flex:none;display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:52px;min-width:70px;padding:6px 12px;border:2.5px solid var(--ink);border-radius:10px;background:var(--paper);color:var(--ink);text-align:left;scroll-snap-align:start;transition:transform .15s,box-shadow .15s,background .15s}
.ck-when b{font-family:var(--f-price);font-weight:400;font-size:18px;line-height:1}
.ck-when small{font-family:var(--f-mono);font-size:10px;line-height:1;opacity:.8}
.ck-when button[aria-pressed="true"]{background:var(--mustard);color:#22282D;box-shadow:3px 3px 0 var(--ink);transform:translate(-2px,-2px)}
.ck-f .fld:has(.ck-when){margin-top:16px}
/* bara de jos pe ridicare: linia de jos e mentă și plină */
.bar.pick .meter i{background:var(--mint)}
/* butonul de ridicare de la hartă */
.map-pick{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:12px 14px;border:var(--bw) solid var(--ink);border-radius:14px;background:var(--mustard);color:#22282D;text-align:left;box-shadow:var(--sh);transition:transform .12s var(--ease),box-shadow .12s}
.map-pick:active{transform:translate(4px,4px);box-shadow:none}
.map-pick svg{flex:none;width:30px;height:30px}
.map-pick b{display:block;font-family:var(--f-name);font-weight:400;font-size:20px;line-height:1}
.map-pick small{display:block;margin-top:4px;font-family:var(--f-mono);font-size:11px}

/* ---------- ce nu se vede nu se mișcă ----------
   Secțiunile ieșite din ecran (hero, panoul LED, aparatul din pagină, harta) primesc .zz din site.js,
   iar panourile închise (coș, fișa produsului, căutare) își opresc animațiile infinite. */
.zz,.zz *,.zz *::before,.zz *::after,
.sheet:not(.open) *,.sheet:not(.open) *::before,.sheet:not(.open) *::after{animation-play-state:paused!important}

/* ---------- ce e departe de ecran nu se desenează până nu te apropii ----------
   Prima afișare pe telefon nu mai așteaptă tot meniul și secțiunile de jos. Înălțimile de rezervă țin bara de scroll
   pe loc; „auto" înseamnă că după prima desenare browserul ține minte înălțimea reală.
   Meniul și panourile primesc 10 px de spațiu în plus (cu margine negativă), ca umbrele tari ale cardurilor
   să nu fie tăiate la margine. */
.cat,.lucky,.story,.map-card,.info,footer{content-visibility:auto}
.cat{contain-intrinsic-size:auto 1300px;padding:26px 10px 10px;margin:0 -10px -10px}
.info{contain-intrinsic-size:auto 900px;padding:0 10px 10px;margin:18px -10px -10px}
.lucky{contain-intrinsic-size:auto 560px}
.story{contain-intrinsic-size:auto 420px}
.map-card{contain-intrinsic-size:auto 600px}
footer{contain-intrinsic-size:auto 120px}

/* banda „Închis acum” (programul vine din Gențiana): stă peste banda de informații, la aceeași înălțime,
   ca să nu împingă pagina în jos când apare după încărcare */
.ledbox{position:relative}
.shutbar{position:absolute;inset:0 0 var(--bw);z-index:5;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;
  background:var(--red-deep);color:#fff;font-size:13.5px;line-height:1.2;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shutbar[hidden]{display:none}
.shutbar b{font-weight:700}

/* locul pentru ce umple scriptul în primul ecran (benzile din hero, „Cele mai luate", rândul „Comanzi acum"):
   rezervat dinainte, ca pagina să nu sară când rulează JS-ul după primul desen (CLS 0,38 → 0 în Lighthouse) */
.eta{min-height:26px}
.facts{min-height:33px}
.best-row{min-height:280px}
@media (min-width:700px){ .facts{min-height:27px} }