/* ============================================================
   GUST URBAN — v2 „Night Kitchen"
   ------------------------------------------------------------
   Variantă de design pornind de la referința TastyBites: fundal
   aproape negru, portocaliu chihlimbar, tipografie masivă și un
   scris de mână cald peste ea.

   Foaie de stil de sine stătătoare: paginile v2 încarcă doar
   fonts.css + v2.css. Nu se amestecă cu tema deschisă din v1,
   ca cele două variante să poată fi comparate curat.

   Portocaliul e cel de pe gusturban.ro, #DC692A — nuanța 21,2°. Referința
   lucra în chihlimbar, la 37,4°; l-am adus pe al lor, ca pătratul
   siglei și logotipul de lângă el să fie aceeași culoare.

   Pe întuneric se folosește neatins: 7,1:1 chiar și pe banda
   alternantă, iar textul închis pe el dă 7,3:1. Textul secundar
   e la 7,8:1. Toate trec WCAG AA.
   ============================================================ */

/* Spune browserului pe ce fundal desenam, ca bara de derulare si
   controalele native sa nu ramana albe pe pagina intunecata. */
:root{color-scheme:dark}
[data-theme="light"]{color-scheme:light}

:root{
  --bg:#0D0C0B;          /* fundalul nopții */
  --bg-2:#151312;        /* benzi alternante */
  --card:#1A1817;        /* cardurile */
  --line:#2A2725;
  --o:#DC692A;           /* arămiul ca UMPLERE — text închis pe el: 5,67:1 */
  --o-txt:#DC692A;       /* arămiul ca TEXT mic — 5,14:1 pe fundalul închis */
  --o-lg:#DC692A;        /* arămiul ca TEXT MARE — pe întuneric, același */
  --o-line:#DC692A;      /* arămiul ca CONTUR sau pictogramă */
  --o-soft:rgba(220,105,42,.10);
  --o-bd-soft:rgba(220,105,42,.45);
  --o-bg-soft:rgba(220,105,42,.16);
  --o-hot:#FF7A18;       /* portocaliul fierbinte, pentru degradeuri */
  --ink:#12100E;         /* textul pe portocaliu — 9,37:1 */
  --txt:#FFFFFF;
  --muted:#A9A29B;       /* 7,75:1 pe fundal */
  --paper:#FFFFFF;

  /* roluri care se schimbă odată cu tema */
  --nav-bg:rgba(13,12,11,.94);
  --bar-bg:rgba(13,12,11,.97);
  --img-bg:#221F1D;
  --line-2:#3A3532;                /* conturul butonului secundar */
  --ghost:rgba(255,255,255,.06);
  --seal-ring:rgba(13,12,11,.9);
  --sh-1:rgba(0,0,0,.5);           /* umbra cardurilor */
  --sh-2:rgba(0,0,0,.6);           /* umbra imaginii din hero */
  --glow-a:rgba(255,122,24,.30);
  --glow-b:rgba(255,122,24,.10);
  --dot:#fff;                      /* punctele de pe banda de ofertă */
  --sh-o:rgba(220,105,42,.28);     /* haloul de sub butonul portocaliu */
  --chip-bd:#3A3532;               /* conturul ștampilei din hero */

  --wrap:1200px;
  --r:18px;
  --r-lg:26px;
  --fd:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --fs:'Kaushan Script','Brush Script MT',cursive;
  --fb:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --t:.2s cubic-bezier(.2,.7,.3,1);
}


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}

body{
  font-family:var(--fb);font-size:16.5px;line-height:1.65;
  color:var(--txt);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden
}

img,svg,video{display:block;max-width:100%;height:auto}

a{color:var(--o-txt);text-decoration-thickness:2px;text-underline-offset:3px}

a:hover{color:#FFA860}

:focus-visible{outline:3px solid var(--o-line);outline-offset:3px;border-radius:4px}

::selection{background:var(--o);color:var(--ink)}


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

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Orice regulă de display din foaia noastră bate `[hidden]{display:none}` din
   browser, fiindcă aceea vine din foaia implicită. Un element ascuns cu
   atributul `hidden` se vedea deci oricum, dacă îi dădeam display undeva. */
[hidden]{display:none!important}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--o);color:var(--ink);padding:12px 20px;font-weight:800;border-radius:0 0 10px 0}

.skip:focus{left:0}


/* ---------- tipografie ---------- */
h1,h2,h3,h4{font-family:var(--fd);font-weight:800;line-height:1.1;text-transform:uppercase;letter-spacing:-.018em;overflow-wrap:break-word}

h1{font-size:clamp(2.5rem,6.6vw,5.1rem)}

h2{font-size:clamp(2rem,4.6vw,3.4rem)}

h3{font-size:clamp(1.15rem,1.9vw,1.42rem);line-height:1.2}

.scris{font-family:var(--fs);text-transform:none;font-weight:400;line-height:1.25}

.lead{color:var(--muted);font-size:clamp(1rem,1.5vw,1.12rem);max-width:60ch;line-height:1.7}

.sec{padding:clamp(58px,7.5vw,104px) 0;position:relative}

.sec--alt{background:var(--bg-2)}


/* titlu de secțiune, ca în referință: scris de mână între două linii,
   apoi titlul mare în două tonuri */
.sh{text-align:center;margin-bottom:clamp(30px,4vw,50px)}

.sh__k{
  display:flex;align-items:center;justify-content:center;gap:16px;
  font-family:var(--fs);font-size:clamp(1.15rem,2.1vw,1.5rem);color:var(--o-txt);margin-bottom:6px
}

.sh__k::before,.sh__k::after{
  content:"";height:2px;width:clamp(34px,7vw,74px);
  background:linear-gradient(90deg,transparent,var(--o-line))
}

.sh__k::after{background:linear-gradient(90deg,var(--o-line),transparent)}

.sh h1 em,.sh h2 em{font-style:normal;color:var(--o-lg)}

/* titlul paginii e h1, dar pastreaza scara vizuala de h2 */
.sh h1{font-size:clamp(1.7rem,4.6vw,3.4rem);margin:0}

.sh .lead{margin:14px auto 0}

.sh--left{text-align:left}

.sh--left .sh__k{justify-content:flex-start}

.sh--left .sh__k::before{display:none}

.sh--left .lead{margin-inline:0}

.wrap--n{max-width:660px}

/* banda legală din subsol: datele firmei, ANPC, SAL */
.foot__l{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;
  padding:22px 0 18px;margin-top:34px;border-top:1px solid rgba(255,255,255,.12);
  font-size:.82rem;line-height:1.6;color:rgba(255,255,255,.62)
}

.foot__f{flex:1 1 340px;min-width:0}

.foot__f b{color:#fff;font-weight:700}

.foot__x{display:flex;gap:18px;flex:none}

.foot__x a{color:rgba(255,255,255,.62)}

.foot__x a:hover{color:var(--o)}

.gol{
  border-bottom:1px dashed currentColor;opacity:.72;font-style:italic;
  padding-bottom:1px
}

.sal{flex:none;display:block;line-height:0;border-radius:4px}

.sal img{display:block;height:50px;width:auto}

.sal:focus-visible{outline:2px solid var(--o);outline-offset:3px}

@media (max-width:620px){
  .foot__l{gap:12px}

  .foot__f,.foot__x{flex:1 1 100%}

}
.nf{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}


/* ---------- butoane ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:700;font-size:.98rem;line-height:1;padding:16px 30px;
  border-radius:999px;border:2px solid transparent;cursor:pointer;
  text-decoration:none;transition:transform var(--t),background var(--t),box-shadow var(--t)
}

.btn--o{background:var(--o);color:var(--ink);box-shadow:0 8px 26px var(--sh-o)}

.btn--o:hover{background:#E38856;color:var(--ink);transform:translateY(-2px);box-shadow:0 12px 32px rgba(220,105,42,.42)}

.btn--line{background:transparent;color:var(--txt);border-color:var(--line-2)}

.btn--line:hover{border-color:var(--o-line);color:var(--o-txt);transform:translateY(-2px)}

.btn--sm{padding:11px 20px;font-size:.88rem}

.btn svg{width:18px;height:18px;flex:none}


/* buton „play" ca în referință */

/* ---------- navigație ---------- */
.nav{position:sticky;top:0;z-index:100;background:var(--nav-bg);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}

.nav__in{display:flex;align-items:center;gap:20px;height:84px;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}

.brand{display:flex;align-items:center;gap:11px;flex:none;margin-right:auto;text-decoration:none}

.brand img{height:38px;width:auto}

.brand__txt{display:flex;flex-direction:column;line-height:1}

.brand__n{font-family:var(--fd);font-weight:800;font-size:1.32rem;color:var(--txt);letter-spacing:.02em}

.brand__n em{font-style:normal;color:var(--o-lg)}

.nav__links{display:flex;align-items:center;gap:2px;list-style:none}

/* Firul de sub bară: unde te afli și un drum înapoi de un click. Aceleași
   verigi ca în BreadcrumbList din schemă, generate din același loc — Google
   verifică potrivirea dintre ce declari și ce se vede pe pagină. */
.crumbs{border-bottom:1px solid var(--line);background:var(--bg)}

.crumbs ol{
  list-style:none;margin:0;padding:11px 0;display:flex;flex-wrap:wrap;
  align-items:center;gap:6px 8px;font-size:.8rem
}

.crumbs li{display:flex;align-items:center;gap:6px 8px;min-width:0}

.crumbs li+li::before{
  content:"";width:5px;height:5px;flex:none;opacity:.75;
  border-right:1.5px solid var(--muted);border-top:1.5px solid var(--muted);
  transform:rotate(45deg)
}

.crumbs a{color:var(--muted);text-decoration:none}

.crumbs a:hover{color:var(--o-txt);text-decoration:underline}

.crumbs [aria-current]{color:var(--txt);font-weight:600}

@media (max-width:520px){
  .crumbs ol{padding:9px 0;font-size:.76rem}
}

.nav__links a{
  display:block;padding:10px 14px;font-weight:600;font-size:.9rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--txt);text-decoration:none;position:relative;transition:color var(--t)
}

.nav__links a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2.5px;
  background:var(--o-line);transform:scaleX(0);transition:transform var(--t);border-radius:2px
}

.nav__links a:hover{color:var(--o-txt)}

.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1)}

.nav__links a[aria-current="page"]{color:var(--o-txt)}

.burger{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:12px;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}

.burger span{display:block;width:20px;height:2px;background:var(--txt);border-radius:2px;transition:transform var(--t),opacity var(--t)}

.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}

.burger[aria-expanded="true"] span:nth-child(2){opacity:0}

.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.grid>*{min-width:0}

/* textul stă deasupra: decupajul intră sub el, nu peste */




/* carusel de decupaje + sigiliul rotund
   ------------------------------------------------------------
   Caseta iese din grilă în ambele direcții: la stânga intră vreo sută de
   pixeli sub coloana cu text (textul are z-index mai mare, deci rămâne
   lizibil), iar la dreapta se duce până în marginea ecranului, unde
   oricum era gol. Așa mâncarea are loc să fie mare.

   Decupajele au fost tăiate pe conținut (scripts/crop_hero.py), deci
   fiecare umple caseta pe latura lui lungă. Cele trei au forme foarte
   diferite — sandvișul e de trei ori mai lat decât înalt, puiul e
   aproape pătrat — așa că fiecare primește propriul factor `--z`, cât
   să pară la fel de mari. */


.dots{display:flex;gap:8px;justify-content:center;margin-top:14px;position:relative;z-index:3}

.dots button{
  width:44px;height:28px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center
}

.dots button::before{
  content:"";display:block;width:10px;height:10px;border-radius:999px;
  background:var(--line-2);transition:width var(--t),background var(--t)
}

.dots button:hover::before{background:var(--o-line)}

.dots button[aria-current="true"]::before{width:32px;background:var(--o)}


/* ---------- carduri de produs ---------- */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(252px,100%),1fr))}

.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px;align-items:start}

.grid--2 .box p+p{margin-top:10px}

.p{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--t),border-color var(--t),box-shadow var(--t)
}

.p:hover{transform:translateY(-5px);border-color:rgba(220,105,42,.5);box-shadow:0 20px 44px var(--sh-1)}

.p__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--img-bg)}

.p__img img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}

.p:hover .p__img img{transform:scale(1.07)}

.p__flag{
  position:absolute;left:12px;top:12px;z-index:2;
  background:var(--o);color:var(--ink);border-radius:999px;
  padding:6px 12px;font-size:.63rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;line-height:1
}

.p__flag--hot{background:#FF4D14;color:var(--ink)}  /* cerneala inchisa ca la
   eticheta sora: alb pe rosul asta dadea 3.32, sub pragul de lizibilitate */

.p__b{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}

.p__b h3{margin:0;color:var(--txt)}

.p__b p{font-size:.86rem;color:var(--muted);line-height:1.5;margin:0}

.p__f{display:flex;align-items:baseline;gap:12px;margin-top:auto;padding-top:12px}

.p__pret{font-family:var(--fd);font-weight:800;font-size:1.42rem;color:var(--o-lg);line-height:1}

.p__pret small{font-family:var(--fb);font-size:.62rem;font-weight:700;color:var(--muted);display:block;margin-top:3px;letter-spacing:.04em}


/* ---------- banda de ofertă ---------- */
.deal{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:linear-gradient(105deg,var(--o) 0%,#FF9A33 46%,var(--o-hot) 100%);
  display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:center;
  padding:clamp(28px,4vw,46px) clamp(24px,4vw,52px)
}

.deal::before{
  content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;
  background:radial-gradient(circle at 22% 30%,var(--dot) 1.6px,transparent 1.6px) 0 0/26px 26px
}

.deal>*{position:relative;z-index:1}

.deal__tag{
  display:inline-block;background:var(--ink);color:var(--o);
  padding:7px 18px;border-radius:8px;font-weight:800;font-size:.8rem;
  letter-spacing:.12em;text-transform:uppercase;transform:rotate(-2deg);margin-bottom:8px
}

.deal__s{font-family:var(--fs);font-size:clamp(2rem,5vw,3.5rem);color:var(--ink);line-height:1.05}

.deal__r{text-align:right}

.deal__big{font-family:var(--fd);font-weight:800;font-size:clamp(2.6rem,7vw,5rem);color:var(--ink);line-height:.95}

.deal__sub{font-weight:800;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;color:#4A3208;margin-bottom:14px}

.deal__code{
  display:inline-block;border:2.5px dashed var(--ink);border-radius:10px;
  padding:9px 24px;font-family:var(--fd);font-weight:800;font-size:1.1rem;color:var(--ink);letter-spacing:.06em
}


/* ---------- panouri simple ---------- */
.box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px}

.box h3{color:var(--txt);margin-bottom:8px}

.box p{color:var(--muted);font-size:.92rem}

.ic-o{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(220,105,42,.12);border:1px solid rgba(220,105,42,.35);margin-bottom:14px}

.ic-o svg{width:23px;height:23px;stroke:var(--o-line)}


/* liste de preț */
.plist{list-style:none;display:grid;gap:0}

.plist li{display:flex;align-items:baseline;gap:4px 12px;padding:13px 2px;
  border-bottom:1px dashed var(--line);flex-wrap:wrap}

.plist .n{font-weight:700;color:var(--txt);flex:0 1 auto;min-width:0}

/* Descrierea avea `flex:1;min-width:0`: cutia se stringea pana la zero, dar
   textul din ea se desena in continuare, iar pretul ateriza peste el. Cu o
   latime minima nu mai poate disparea — cand nu incape, randul se rupe si
   pretul coboara pe linia lui, impins la dreapta. */
.plist .d{color:var(--muted);font-size:.86rem;flex:1 1 11ch;min-width:11ch}

.plist .p2{font-family:var(--fd);font-weight:800;font-size:1.1rem;color:var(--o-txt);
  flex:none;white-space:nowrap;margin-left:auto}


/* FAQ */
.faq{max-width:840px;margin-inline:auto;display:grid;gap:12px}

.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}

.faq summary{cursor:pointer;list-style:none;padding:18px 56px 18px 22px;position:relative;font-weight:700}

.faq summary::-webkit-details-marker{display:none}

.faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-family:var(--fd);font-weight:800;font-size:1.5rem;color:var(--o-txt);transition:transform var(--t)}

.faq details[open] summary{color:var(--o-txt)}

.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}

.faq .a{padding:0 22px 20px;color:var(--muted);font-size:.95rem}


/* info / locații */
.info{display:grid;gap:15px;list-style:none}

.info li{display:flex;gap:14px;align-items:flex-start}

.info .ic{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:rgba(220,105,42,.1);border:1px solid rgba(220,105,42,.3)}

.info .ic svg{width:19px;height:19px;stroke:var(--o-line)}

.info li>div>span{display:block}

.info b{display:block;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}

.info .v{font-weight:700;font-size:1.02rem;color:var(--txt)}

.info a.v{text-decoration:none}

.info a.v:hover{color:var(--o-txt)}

.map{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);min-height:220px;background:var(--card)}

.map iframe{width:100%;height:100%;min-height:220px;border:0;display:block;filter:grayscale(.25) contrast(1.05)}


.locs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:20px}

.loc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:15px;scroll-margin-top:100px}

.loc__h{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

.loc__h h3{margin:0}

.pill{padding:5px 13px;border-radius:999px;font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;line-height:1;white-space:nowrap}

.pill--on{background:var(--o);color:var(--ink)}

.pill--soon{background:var(--o-bg-soft);color:var(--o-txt);border:1px solid var(--o-bd-soft)}

.loc .map{margin-top:auto}


/* sosuri */
/* Sosurile, văzute de sus.
   Bolurile sunt fotografii detașate de fundal și aduse toate la același
   diametru, deci grila iese regulată fără să reglăm nimic aici. Numele
   stă dedesubt, liniștit: zece pastile portocalii una lângă alta ar fi
   țipat mai tare decât sosurile. */
.sos-g{
  list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:30px 18px;max-width:880px;margin:38px auto 0
}

.sos-i{display:flex;flex-direction:column;align-items:center;gap:12px}

.sos-b{
  width:100%;max-width:132px;height:auto;aspect-ratio:1;
  filter:drop-shadow(0 10px 18px var(--sh-1));
  transition:transform var(--t)
}

.sos-i:hover .sos-b{transform:translateY(-5px) scale(1.04)}

.sos-n{
  font-size:.82rem;font-weight:700;letter-spacing:.01em;color:var(--txt);
  text-align:center;line-height:1.25
}


/* banda de pe prima pagină spre boxuri */
.tz{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,4vw,52px);align-items:center}

.tz__t .sh__k{text-align:left}

.tz__t .sh__k::before,.tz__t .sh__k::after{display:none}

.tz__t h2{margin:2px 0 12px}

.tz__t .lead{margin:0}

/* Fotografia are fundal propriu, nu e decupaj: o incadram la fel ca pe
   cea din capul paginii /ambalaje. */
.tz__i{width:100%;height:auto;border-radius:var(--r-lg)}

@media (max-width:820px){
  .tz{grid-template-columns:1fr;text-align:center}

  .tz__t .sh__k{text-align:center}

  .tz__t .lead{margin-inline:auto}

  .tz__i{order:-1;max-width:460px;margin-inline:auto}

}

/* cele cinci atuuri: rânduri, nu carduri. Pozele au proporții foarte
   diferite — chifla e lată, punga e înaltă, sticlele sunt patru la rând —
   iar o grilă de carduri le-ar fi pus pe toate în aceeași ramă strâmbă. */
.atus{display:flex;flex-direction:column;gap:12px;margin-top:34px}

.atu{
  display:flex;align-items:center;gap:26px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 26px 18px 18px
}

.atu img{height:clamp(96px,13vw,146px);width:auto;flex:none}

.atu--lat img{height:auto;width:clamp(230px,32vw,380px)}

.atu h3{margin:0 0 6px;color:var(--txt);font-size:clamp(1rem,1.6vw,1.2rem)}

.atu p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.6}


@media (max-width:900px){

  .atu{flex-direction:column;align-items:flex-start;gap:16px;padding:20px}

  .atu img{height:clamp(110px,26vw,150px)}

  .atu--lat img{width:min(100%,320px)}

}

/* ---------- rafturi cu postări ----------
   Două rafturi orizontale, TikTok și Instagram, cu ultimele cinci de la
   fiecare. Derulare nativă cu prindere pe card, plus două butoane pentru
   mouse — pe un ecran lat, derularea orizontală fără butoane e greu de
   nimerit. Raftul are `tabindex="0"`, deci se poate derula și din tastatură.

   Miniaturile sunt locale, iar cadrul platformei apare doar la apăsare. */
/* Rafturile stau intr-un grid. Fara min-width:0 elementul de grid ia
   latimea continutului, nu a coloanei, iar .reel__t nu mai scrolleaza
   intern — impinge toata pagina in lateral. */
.reels{display:grid;gap:38px}
.reels>*{min-width:0}

.reel__h{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}

.reel__h h3{display:flex;align-items:center;gap:11px;margin:0}

.reel__ic{
  width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:var(--o);color:var(--ink)
}

.reel__ic svg{width:18px;height:18px;fill:currentColor}

.reel__n{display:flex;align-items:center;gap:8px}

.reel__b{
  width:38px;height:38px;flex:none;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);border-radius:50%;background:var(--ghost);color:var(--txt);
  transition:border-color var(--t),background var(--t),color var(--t)
}

.reel__b svg{width:17px;height:17px}

.reel__b[data-dir="1"] svg{transform:rotate(180deg)}

.reel__b:hover{border-color:var(--o-line);background:var(--o-soft);color:var(--o-txt)}

.reel__b[disabled]{opacity:.34;cursor:default}

.reel__b[disabled]:hover{border-color:var(--line);background:var(--ghost);color:var(--txt)}

/* când toate cele cinci încap pe ecran, săgețile n-au ce derula */
.reel--fix .reel__b{display:none}


.reel__t{
  display:flex;gap:16px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px 4px 14px;margin:-4px -4px -14px;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent
}

.reel__t::-webkit-scrollbar{height:8px}

.reel__t::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}

.reel__t::-webkit-scrollbar-track{background:transparent}


.rl{
  flex:0 0 clamp(178px,42vw,224px);scroll-snap-align:start;
  display:flex;flex-direction:column;gap:10px
}

.rl__p{
  position:relative;display:block;width:100%;aspect-ratio:9/16;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--img-bg);transition:transform var(--t),border-color var(--t)
}

.rl__p img{width:100%;height:100%;object-fit:cover}

.rl__p:hover{transform:translateY(-4px);border-color:var(--o-line)}

.rl__ic{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--o);color:var(--ink);box-shadow:0 8px 22px rgba(0,0,0,.34);
  transition:transform var(--t)
}

.rl__ic svg{width:22px;height:22px;fill:currentColor;margin-left:2px}

.rl__p:hover .rl__ic{transform:translate(-50%,-50%) scale(1.12)}

.rl__b{display:flex;flex-direction:column;gap:3px}

.rl__t{
  font-size:.86rem;line-height:1.45;color:var(--txt);margin:0;
  /* două rânduri fixe: un titlu scurt și unul lung trebuie să lase data
     pe aceeași linie, altfel rândul de jos al raftului se zimțează */
  min-height:calc(2 * 1.45 * .86rem);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}

.rl__m{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:.76rem;color:var(--muted);margin:0}

.rl__m a{color:var(--muted);text-decoration:none;font-weight:700}

.rl__m a:hover{color:var(--o-txt);text-decoration:underline}


/* lightboxul în care pornește clipul
   Cadrul TikTok are lățime minimă ~325 px; în card, la 224, ar fi ieșit
   cu bare de derulare peste video. Aici primește loc real, iar raftul
   rămâne neatins. Scoaterea cadrului la închidere oprește redarea. */
.lb{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
  background:rgba(8,7,6,.86);backdrop-filter:blur(6px);
  animation:lb-in .18s ease
}

@keyframes lb-in{from{opacity:0}
to{opacity:1}
}
.lb__b{
  width:min(94vw,360px);
  min-height:340px;max-height:92vh;      /* prag de pornire și plafon */
  border-radius:var(--r);overflow:auto;background:#000;
  box-shadow:0 30px 80px rgba(0,0,0,.6)
}

.lb__b iframe{width:100%!important;border:0;display:block}

/* Instagram primește un cadru făcut de noi, deci îi dăm noi înălțimea;
   TikTok și-o pune singur, prin script, și variază cu descrierea. */
.lb__b--fix{height:min(92vh,760px)}

.lb__b--fix iframe{height:100%!important}

/* Scriptul TikTok pune dimensiuni în linie pe blockquote și pe iframe;
   `!important` din foaia autorului trece peste stilul în linie. Foaia lor
   de ambalaj rămâne blocată de CSP — n-avem nevoie de ea, caseta e a
   noastră — deci placeholderul îl îmbrăcăm noi, ca să nu clipească alb. */
.lb__b .tiktok-embed{
  margin:0!important;width:100%!important;height:100%!important;
  max-width:none!important;min-width:0!important;
  display:block;background:#000;border:0
}

.lb__b .tiktok-embed section{display:none}

.lb__x{
  position:absolute;top:18px;right:18px;width:46px;height:46px;cursor:pointer;
  display:grid;place-items:center;border-radius:50%;border:0;
  background:var(--o);color:var(--ink);transition:transform var(--t)
}

.lb__x svg{width:20px;height:20px}

.lb__x:hover{transform:rotate(90deg)}


@media (max-width:620px){
  .reel__h h3{font-size:1.1rem}

  .reel__n .btn{display:none}

}

/* ---------- subsol ---------- */
.foot{background:#0A0908;border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0 26px}

.foot__g{display:grid;grid-template-columns:1.5fr .9fr .9fr 1.2fr 1fr;gap:32px;margin-bottom:36px}

.foot h2{font-family:var(--fb);font-weight:800;font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--o-txt);margin-bottom:16px}

.foot ul{list-style:none;display:grid;gap:10px}

.foot a{color:var(--muted);text-decoration:none;font-size:.92rem}

.foot a:hover{color:var(--o-txt)}

.foot p{color:var(--muted);font-size:.92rem;line-height:1.65}

.foot__c{display:grid;gap:12px;list-style:none}

/* Butonul de adăugare pe ecran, în banda de servicii: plin, nu contur, ca
   să iasă din rândul celor trei beneficii care sunt doar text. */
.uc-inst{ flex:0 0 auto; margin:0; padding-left:30px }

@media (min-width:820px){
  .uc-inst{ border-left:1px solid rgba(19,28,49,.15) }
}

@media (max-width:819px){
  .uc-inst{ padding-left:0 }
}

.uc-inst__h{
  display:block; margin-top:10px; font-size:.8rem; line-height:1.5;
  color:rgba(19,28,49,.72); max-width:30ch
}

.foot__c li{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:.9rem}

.foot__c svg{width:17px;height:17px;flex:none;margin-top:3px;stroke:var(--o-txt)}

/* telefonul și e-mailul din caseta «Firma» (Confidențialitate): fără mărime,
   iconițele se întindeau pe toată lățimea casetei */
.firma-c svg{display:inline-block;width:17px;height:17px;vertical-align:-3px;margin-right:4px;stroke:var(--o-txt)}

.soc{display:flex;gap:9px;margin-top:18px}

.soc a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);transition:all var(--t)}

.soc a:hover{background:var(--o);border-color:var(--o);color:var(--ink)}

.soc svg{width:17px;height:17px;fill:currentColor}

.foot__b{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;font-size:.84rem;color:var(--muted)}

.grai{display:inline-flex;align-items:center;gap:10px;color:var(--muted);text-decoration:none}

.grai:hover{color:var(--o-txt)}

.grai video{width:50px;height:50px;border-radius:50%;border:0}


/* bară fixă pe telefon */
/* Bara si butoanele de navigare exista doar pe telefon. Se aprind in
   blocul responsive de mai jos; aici raman stinse, altfel ar ramane
   un buton ratacit in pagina pe ecran mare. */
.mbar,.fabs{display:none}


/* ---------- responsive ----------
   Pragurile sunt în ordine descrescătoare, ca ordinea de citire să fie
   și ordinea în care se aplică. Contează: regula de la 1240, care
   strânge legăturile din bară, trebuie să vină înaintea celei de la
   1080, care le desface în listă verticală — altfel lista moștenește
   paddingul strâns.

   Bara de sus, cu meniul complet desfășurat, cere 1005 px în engleză,
   1096 în română și 1137 în maghiară; cuvintele lungi decid, iar
   comutatoarele de limbă și temă ocupă singure 183 px. De asta trece pe
   buton la 1080, nu la 820 ca înainte: între cele două praguri, în
   maghiară bara se revărsa peste marginea ecranului.
   ------------------------------------------------------------ */

/* bara se strânge, dar rămâne desfășurată */
@media (max-width:1240px){
  .nav__in{gap:14px}

  .nav__links a{padding:10px 9px;font-size:.82rem}

  .lang a{min-width:32px;padding:10px 8px;font-size:.66rem}

  .theme{width:38px;height:38px}

}

/* meniul trece pe buton; banda de categorii, pe trei coloane */
@media (max-width:1080px){
  .nav__links{
    position:fixed;inset:84px 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;padding:14px 20px 24px;gap:2px;display:none;
    max-height:calc(100dvh - 84px);overflow:auto
  }

  .nav__links.open{display:flex}

  .nav__links a{padding:14px;font-size:1rem}

  .nav__links a::after{display:none}

  .burger{display:flex}

  .foot__g{grid-template-columns:1fr 1fr 1fr;gap:28px}

}

/* hero-ul se așază pe o coloană, cu decupajul deasupra textului */
@media (max-width:900px){
   /* deasupra bulinelor */
  .deal{grid-template-columns:1fr;text-align:center}

  .deal__r{text-align:center}

  .sos-g{grid-template-columns:repeat(3,minmax(0,1fr))}

}

/* butonul din antet lasă locul barei fixe de jos */
@media (max-width:820px){
  .nav__in > .btn{display:none}

  .tools{gap:7px;margin-left:auto}

  .lang a{min-width:31px;padding:10px 7px}

  body{padding-bottom:78px}

  /* Butoanele de navigare stau deasupra barei fixe. Inaltimea barei e 71px
     plus zona de siguranta a telefonului, pe care o adaug si aici ca sa nu
     ajunga sub gestul de acasa al sistemului. */
  .fabs{
    position:fixed;left:0;right:0;z-index:80;pointer-events:none;
    bottom:calc(85px + env(safe-area-inset-bottom));
    display:flex;justify-content:space-between;padding:0 14px
  }

  /* Sageata ramane portocalie in ambele teme; se schimba doar discul din
     spate, alb pe zi si un negru mai deschis decat fundalul pe noapte.
     Portocaliul e --o-line, rolul pastrat in paleta pentru pictograme:
     se muta putin intre teme tocmai ca sa tina contrastul.
     Conturul e tot portocaliu pentru ca butonul cade des peste un card, iar
     cardul are exact culoarea discului: cu un contur neutru butonul se
     topea in el, 1,6:1. Asa ramane un inel de 3,7:1 pe zi si 5,1:1 pe noapte. */
  .fab{
    pointer-events:auto;width:44px;height:44px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--card);color:var(--o-line);border:1.5px solid var(--o-line);
    box-shadow:0 6px 18px rgba(0,0,0,.16);cursor:pointer;
    transition:opacity .18s ease, transform .18s ease;
    opacity:.85
  }

  .fab svg{width:20px;height:20px}

  /* Cand le atingi sau ajungi la ele din tastatura, redevin intregi. */
  .fab:active,.fab:focus-visible{opacity:1}

  .fab:active{transform:scale(.92)}

  /* Cand lipseste unul din ele, celalalt trebuie sa ramana pe partea lui. */
  .fab[hidden]{display:flex!important;visibility:hidden;opacity:0;pointer-events:none}

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

  .mbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:var(--bar-bg);border-top:1px solid var(--line);backdrop-filter:blur(12px)
  }

  .mbar .btn{flex:1;min-width:0;padding:14px 10px;font-size:.92rem;justify-content:center;overflow:hidden}
  @media (max-width:359px){
    .mbar{gap:8px;padding-inline:10px}
    .mbar .btn{padding:13px 6px;font-size:.84rem;gap:6px}
  }

}

/* telefon: sigla se strânge, ștampila la fel */
@media (max-width:620px){

  /* pe telefon numele siglei se strânge, ca să încapă comutatoarele */
  .nav .brand__n{font-size:1rem}

  /* sub 340 px comutatoarele nu mai incap langa sigla: le strangem */
  @media (max-width:339px){
    .nav__in{gap:8px;padding-inline:12px}
    .lang{padding:2px}
    .lang a{padding:5px 7px;font-size:.7rem}
    .theme{width:36px;height:36px}
    .burger{width:40px;height:40px}
  }

  .foot__g{grid-template-columns:1fr}

  .sos-g{grid-template-columns:repeat(2,minmax(0,1fr))}

}

/* ---------- mișcare ---------- */
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}

}


/* ============================================================
   COMUTATOARE — limbă și temă, dreapta sus
   ============================================================ */
.tools{display:flex;align-items:center;gap:10px;flex:none}


.lang{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--ghost)}

.lang a{
  display:block;min-width:38px;padding:10px 11px;border-radius:999px;text-align:center;
  font-size:.7rem;font-weight:800;letter-spacing:.08em;color:var(--muted);
  text-decoration:none;line-height:1.2;transition:color var(--t),background var(--t)
}

.lang a:hover{color:var(--txt);background:var(--o-soft)}

.lang a[aria-current="true"]{background:var(--o);color:var(--ink)}

.lang a[aria-current="true"]:hover{background:var(--o);color:var(--ink)}


.theme{
  width:42px;height:42px;flex:none;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);border-radius:50%;background:var(--ghost);
  color:var(--o-txt);transition:border-color var(--t),background var(--t),transform var(--t)
}

.theme:hover{border-color:var(--o-line);background:var(--o-soft);transform:rotate(-18deg)}

.theme svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2}

.theme .t-moon{display:none}

[data-theme="light"] .theme .t-sun{display:none}

[data-theme="light"] .theme .t-moon{display:block}


/* ============================================================
   TEMA DESCHISĂ — „Prânz pe hârtie"
   ------------------------------------------------------------
   Întunericul rămâne implicit; asta e alegerea clientului.
   Contrastele au fost calculate pe toate cele trei suprafețe
   (fundal crem, bandă alternantă, card alb) înainte de a fixa
   culorile — cea mai slabă pereche decide:

     text          #14110F  16,6:1 în cel mai rău caz
     text secundar #5A524C   6,8:1
     portocaliu text mic  #B1511D  4,55:1  (AA)
     portocaliu text mare #DC692A  3,04:1  (AA display) — nuanța de bază
     text închis pe portocaliu plin  7,32:1

   Toate portocaliile — și de aici, și din tema întunecată — stau pe
   NUANȚA SIGLEI: 27,8°, saturația 0,873. Se schimbă doar
   luminozitatea, exact cât trebuie ca să treacă pragul.

   Umplerea rămâne #DC692A neatins, în ambele teme: pe ea stă text
   închis, deci contrastul nu depinde de fundal. Butoanele, sigla,
   etichetele, banda de ofertă și pastilele poartă portocaliul
   siglei exact, și pe hârtie. Ca text însă ar da 2,43:1 pe crem —
   sub pragul de 3:1 chiar și pentru titluri uriașe — de asta
   rolurile sunt separate.
   ============================================================ */
[data-theme="light"]{
  --bg:#FAF3EA;          /* hârtia ambalajului */
  --bg-2:#F3EADC;        /* benzi alternante */
  --card:#FFFFFF;
  --line:#E2D8C8;
  --o:#E8511E;           /* portocaliul ambalajelor, ca UMPLERE */
  --o-txt:#B8430F;       /* text mic pe crem — 4,96:1 */
  --o-lg:#E8511E;        /* text mare — 3,39:1 */
  --o-line:#E8511E;      /* contururi și pictograme */
  --o-soft:rgba(232,81,30,.10);
  --o-bd-soft:rgba(232,81,30,.42);
  --o-bg-soft:rgba(232,81,30,.18);
  --o-hot:#FF6A2A;
  --ink:#12100E;         /* text pe portocaliu — 5,09:1 */
  --txt:#131C31;         /* bleumarin, ca în blocul nou — 15,40:1 */
  --muted:#5A6478;       /* 5,40:1 */

  --nav-bg:rgba(250,243,234,.92);
  --bar-bg:rgba(250,243,234,.97);
  --img-bg:#F1E8DA;
  --line-2:#CFC2B0;
  --ghost:rgba(19,28,49,.05);
  --seal-ring:rgba(250,243,234,.92);
  --sh-1:rgba(72,44,20,.13);
  --sh-2:rgba(72,44,20,.20);
  --sh-o:rgba(232,81,30,.26);
  --chip-bd:#9A8E7E;
  --glow-a:rgba(232,81,30,.24);
  --glow-b:rgba(232,81,30,.12);
}

[data-theme="light"] body{background:var(--bg)}


/* banda albă de categorii nu se mai delimitează singură pe crem (1,07:1) */


/* cardurile albe pe crem au nevoie de contur, nu de umbră */
[data-theme="light"] .p,
[data-theme="light"] .box,
[data-theme="light"] .loc,
[data-theme="light"] .faq details,
[data-theme="light"] .map{border-color:var(--line)}

[data-theme="light"] .p:hover{border-color:var(--o-line);box-shadow:0 18px 38px var(--sh-1)}


/* pe deschis, degradeul cald al hero-ului citește ca lumină de zi */


/* pictogramele de categorie au fost desenate pentru fundal alb — rămân neschimbate */

/* subsolul rămâne întunecat în ambele teme: ancorează pagina și
   închide lectura. Redefinim tokenurile pe el, ca tot ce moștenește
   dinăuntru să rămână pe paleta de noapte. */
.foot{
  --card:#141211;
  --line:#2A2725;
  --line-2:#3A3532;
  --txt:#FFFFFF;
  --muted:#A9A29B;
  --o-txt:#DC692A;
  --o-lg:#DC692A;
  --o-line:#DC692A;
  --ghost:rgba(255,255,255,.06);
}

[data-theme="light"] .foot{background:#12100E}


/* tiparul: alb pe negru, indiferent de tema aleasa */
@media print{
  .nav,.mbar,.fabs,.foot,.deal{display:none}

  html,html[data-theme="light"]{--bg:#fff;--bg-2:#fff;--card:#fff;--txt:#000;--muted:#333;--o-txt:#B1511D;--o-lg:#B1511D}

  body,[data-theme="light"] body{background:#fff;color:#000}

  /* meniul tipărit: fără poze și panouri, două coloane, niciun card rupt
     între pagini. Din el se generează PDF-ul din footer. */
  .crumbs,.m__salt,.m .p__img,.sos-b,.fab,.uc-inst{display:none!important}
  .sec{padding:14px 0!important}
  .sh h1{font-size:26pt!important}
  .sh h2,.m__grid~h2,.sec h2{font-size:15pt!important}
  .m__grid,.m__grid--unu{grid-template-columns:1fr 1fr!important;gap:8px!important;max-width:none!important}
  .m__grid--unu .p{flex-direction:column!important}
  .p.m{break-inside:avoid;border:1px solid #bbb;box-shadow:none!important;transform:none!important}
  .p.m .p__b{padding:8px 10px!important;gap:3px!important}
  .m__v b{font-size:10.5pt!important}
  .m__meniuri div{border:1px solid #bbb}
  /* titlul secțiunii nu rămâne singur la capăt de pagină, fără carduri */
  .sec .sh{break-inside:avoid;break-after:avoid;page-break-after:avoid}
  .sec .sh h2{break-after:avoid;page-break-after:avoid}
  .sos-g{gap:4px 14px!important}
  .sos-i{break-inside:avoid}

}

/* ============================================================
   Landing "Urban Choices" — blocul de brand din capul paginii
   Paleta e a ambalajelor: portocaliu #E8511E, hartie crem, bleumarin.
   Tipografie: Poppins 800 pentru titluri (deja gazduit local).
   ============================================================ */
.uc { --uc-o:#E8511E; --uc-cream:#FAF3EA; --uc-ink:#131C31; }

.uc h2, .uc p { margin:0 }


.uc-disp { font-family:'Poppins',-apple-system,sans-serif; font-weight:800; letter-spacing:-.022em; text-transform:uppercase }


/* ---------- butoane ---------- */
.uc-btn { display:inline-flex; align-items:center; gap:14px; border-radius:999px;
  padding:11px 11px 11px 28px; font-weight:700; font-size:13.5px; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; transition:var(--t); white-space:nowrap }

.uc-btn svg { width:15px; height:15px }

.uc-btn i { display:grid; place-items:center; width:35px; height:35px; border-radius:999px;
  flex:0 0 auto; transition:transform var(--t) }

.uc-btn:hover i { transform:translateX(4px) }

.uc-btn--dark  { background:var(--uc-ink); color:#fff }

.uc-btn--dark i{ background:#fff; color:var(--uc-ink) }

.uc-btn--light { background:#fff; color:var(--uc-ink) }

.uc-btn--light i{ background:var(--uc-ink); color:#fff }

.uc-btn--o     { background:var(--uc-o); color:#fff }

.uc-btn--o i   { background:#fff; color:var(--uc-o) }

/* varianta mica, fara pastila pe sageata (in carduri) */
.uc-btn--sm { gap:9px; padding:9px 20px; font-size:10px; letter-spacing:.08em }

.uc-btn--sm svg { width:12px; height:12px }


/* ---------- hero ---------- */
.uc-hero { position:relative; background:var(--uc-o); overflow:hidden }

.uc-hero__pat { position:absolute; inset:0; pointer-events:none;
  background:url(/assets/img/urban/pattern-white.webp) repeat; background-size:340px auto;
  -webkit-mask-image:linear-gradient(to right,transparent 30%,rgba(0,0,0,.45) 52%,#000 74%);
          mask-image:linear-gradient(to right,transparent 30%,rgba(0,0,0,.45) 52%,#000 74%) }

.uc-hero__in { position:relative; display:grid; gap:34px; align-items:center; padding-block:30px 40px }

@media (min-width:980px){ .uc-hero__in { grid-template-columns:1fr 1.2fr; padding-block:20px 44px }
 }
/* Titlurile cardurilor si banda de evenimente trec si ele pe fontul de brand.
   Banda de servicii NU: «Livrare rapidă» si «Plătești cash sau card» au litere
   pe care Ortland nu le are. */
.uc-card h2, .uc-ev__h { font-family:'Ortland','Poppins',sans-serif }

/* Titlul care are litere pe care Ortland nu le are ramane intreg pe
   Poppins. Mai bine un titlu pe alt font decat un cuvant cu o litera
   cazuta pe alt font la mijloc. */
.uc-card h2.no-ort { font-family:'Poppins',sans-serif }

.uc-hero__h { font-family:'Ortland','Poppins',sans-serif;
  color:#fff; line-height:.86; font-size:clamp(46px,8vw,104px) }

.uc-hero__l { color:rgba(255,255,255,.95); line-height:1.5; margin-top:20px; max-width:430px;
  font-size:clamp(15.5px,1.3vw,18px) }

.uc-hero__cta { display:flex; flex-wrap:wrap; gap:13px; margin-top:26px }

.uc-hero__img { width:100%; height:auto; display:block }

/* Fotografia are produsul lipit de marginile propriei pânze, fără chenar
   transparent. Pe telefon o scoatem din cei 20px ai lui .wrap, ca sacoșa și
   burgerul să curgă dintr-o margine în alta; textul rămâne retras. */
@media (max-width:979px){
  .uc-hero__img { width:calc(100% + 40px); max-width:none; margin-inline:-20px;
    margin-bottom:-40px }   /* anuleaza spatiul de jos al lui .uc-hero__in */
}

/* produsul se termină fix pe marginea de jos a secțiunii: așa nu mai
   levitează și nu se mai vede unde e tăiată fotografia. Lateral nu-l mai
   tragem afară — n-ar mai ieși transparență din cadru, ci burger. */
@media (min-width:980px){
  .uc-hero__in > div:last-child { align-self:end }

  .uc-hero__img { width:100%; max-width:none; margin:0 0 -44px auto }

}

/* cele patru argumente de sub butoane */
.uc-feat { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 0;
  margin-top:30px; color:#fff }

@media (min-width:820px){ .uc-feat { grid-template-columns:repeat(4,minmax(0,1fr)) }
 }
.uc-feat > div { display:flex; align-items:flex-start; gap:7px; padding:0 8px; min-width:0 }

.uc-feat > div + div { border-left:1px solid rgba(255,255,255,.35) }

.uc-feat > div:first-child { padding-left:0 }

.uc-feat > div:last-child { padding-right:0 }

@media (min-width:820px){ .uc-feat > div:nth-child(3) { border-left:1px solid rgba(255,255,255,.35) }
 }

/* Sub 820px atuurile stau pe doua coloane, deci linia verticala trebuie sa
   desparta coloanele, nu randurile. Regula «div + div» dadea bordura si
   retragere si celui de-al treilea, care e primul din randul doi: iesea
   decalat cu 9px fata de primul si ramanea o linie razleata pe marginea
   din stanga. */
@media (max-width:819px){
  .uc-feat > div:nth-child(odd){ border-left:0; padding-left:0 }
  .uc-feat > div:nth-child(even){ border-left:1px solid rgba(255,255,255,.35);
    padding-left:10px; padding-right:0 }
}
.uc-feat svg { width:22px; height:22px; flex:0 0 auto; margin-top:2px }

.uc-feat b { display:block; font-size:10px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; line-height:1.2 }

.uc-feat span { display:block; font-size:9.5px; margin-top:4px; color:rgba(255,255,255,.85); line-height:1.25 }


/* ---------- banda de beneficii ---------- */
.uc-strip { background:var(--uc-cream); color:var(--uc-ink) }

/* Cele trei beneficii împart banda în părți egale. Butonul de instalare,
   când apare, își ia lățimea lui din dreapta, iar ele se strâng. Flex, nu
   grid cu trei coloane fixe: așa banda arată la fel și când butonul lipsește,
   ceea ce se întâmplă de cele mai multe ori. */
.uc-strip__in { display:flex; flex-direction:column; gap:18px; padding-block:22px }

@media (min-width:820px){
  .uc-strip__in { flex-direction:row; flex-wrap:wrap; align-items:center; gap:0 }
  /* Sub o lățime rezonabilă textul celor trei ar începe să se rupă ca să facă
     loc butonului. Cu o bază minimă, se rupe rândul în schimb: butonul trece
     dedesubt, la dreapta, iar beneficiile își păstrează spațiul. */
  .uc-strip__i { flex:1 1 190px }
  .uc-inst { margin-left:auto }
}
.uc-strip__i { display:flex; align-items:center; gap:14px; padding:0 30px; min-width:0 }

.uc-strip__i + .uc-strip__i { border-left:1px solid rgba(19,28,49,.15) }

.uc-strip__i:first-child { padding-left:0 }

.uc-strip__i:last-of-type { padding-right:0 }

/* Linia dintre beneficii se pune cu `.uc-strip__i + .uc-strip__i`, care are
   specificitate mai mare decât o clasă singură — deci anularea de aici
   trebuie să repete selectorul, altfel n-are niciun efect. */
@media (max-width:819px){
  .uc-strip__i { padding:0 }
  .uc-strip__i + .uc-strip__i { border-left:0 }
}
.uc-strip svg.uc-ic { width:30px; height:30px; flex:0 0 auto }

.uc-strip b { display:block; font-size:13.5px; font-weight:700; line-height:1.25 }

.uc-strip b.up { text-transform:uppercase; letter-spacing:.05em }

.uc-strip span { display:block; font-size:13px; margin-top:2px; color:rgba(19,28,49,.65) }


/* ---------- cele patru carduri ---------- */
.uc-cards { display:grid; grid-template-columns:1fr }

@media (min-width:640px){ .uc-cards { grid-template-columns:repeat(2,1fr) }
 }
@media (min-width:1180px){ .uc-cards { grid-template-columns:repeat(4,1fr) }
 }
.uc-card { position:relative; overflow:hidden; display:flex; flex-direction:column;
  padding:44px 34px; min-height:300px }

.uc-card--o { background:var(--uc-o); color:#fff }

.uc-card--p { background:var(--uc-cream); color:var(--uc-ink);
  background-image:url(/assets/img/urban/pattern-grey.webp); background-size:300px auto }

.uc-card h2 { position:relative; z-index:1; line-height:.94; font-size:clamp(26px,2.4vw,34px) }

.uc-card--o h2 { color:#fff }

/* Titlurile de pe cardurile crem sunt portocalii, ca marca. La 26px in sus
   se califica drept text mare, pentru care pragul de contrast e 3,0. */
.uc-card--p h2 { color:var(--uc-o) }

.uc-card p { position:relative; z-index:1; margin-top:18px; font-size:14px; line-height:1.55; max-width:230px }

.uc-card--o p { color:rgba(255,255,255,.9) }

.uc-card--p p { color:rgba(19,28,49,.8) }

.uc-card__b { position:relative; z-index:1; margin-top:auto; padding-top:26px }

.uc-card__art { position:absolute; right:0; bottom:0; pointer-events:none; user-select:none; height:auto }


/* ---------- banda de evenimente ---------- */
.uc-ev { position:relative; overflow:hidden; background:var(--uc-o) }

.uc-ev__in { position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center;
  gap:26px 34px; padding-block:42px }

@media (min-width:1000px){ .uc-ev__in { gap:26px 44px; padding-block:48px }
 }
/* titlul curge pe două rânduri, altfel butonul cade sub el și rămâne un gol */
.uc-ev__h { color:#fff; line-height:1.02; font-size:clamp(28px,3.1vw,42px);
  flex:0 1 auto; max-width:14ch }

.uc-ev__p { color:rgba(255,255,255,.9); font-size:14px; line-height:1.55;
  flex:1 1 300px; max-width:390px }

.uc-ev .uc-btn { flex:0 0 auto; margin-left:auto }

@media (max-width:820px){ .uc-ev .uc-btn { margin-left:0 }
 }
.uc-ev__art { position:absolute; right:0; bottom:0; height:100%; width:620px; opacity:.22;
  color:#fff; pointer-events:none; display:none }

@media (min-width:1000px){ .uc-ev__art { display:block }
 }


/* ============================================================
   Bara de navigare — portocalie în ambele teme, ca blocul nou.
   Regulile vin după cele de temă, deci nu depind de `data-theme`.
   ============================================================ */
.nav{ background:#E8511E; border-bottom:1px solid rgba(255,255,255,.20);
      backdrop-filter:none }


/* logo pe două rânduri; alb doar în bară, în subsol urmează culoarea textului */
.brand{ gap:0 }

.brand__txt{ line-height:.92 }

.brand__n{ font-family:'Ortland',var(--fb); font-weight:800; font-size:1.12rem; line-height:.92;
  letter-spacing:-.012em; text-transform:uppercase }

.brand__n sup{ font-size:.4em; vertical-align:super; margin-left:1px; font-weight:700 }

.nav .brand__n{ color:#fff }

.foot .brand__n{ color:var(--txt) }

.foot .brand__n sup{ color:var(--o-lg) }


/* legăturile */
.nav__links a{ color:#fff; white-space:nowrap }

@media (min-width:1081px){ .nav__links a{ padding:10px 11px; font-size:.84rem; letter-spacing:.04em }
 }
.nav__links a::after{ background:#fff }

.nav__links a:hover,
.nav__links a[aria-current="page"]{ color:#fff }

.nav__links a:hover{ opacity:.78 }


/* comutatoarele de limbă și temă */
.lang{ border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.12) }

.lang a{ color:rgba(255,255,255,.85) }

.lang a:hover{ color:#fff; background:rgba(255,255,255,.18) }

.lang a[aria-current="true"]{ background:#fff; color:#E8511E }

.theme{ border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.12); color:#fff }

.theme:hover{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.7) }


/* butonul de comandă: alb, altfel ar fi portocaliu pe portocaliu */
.nav .btn--o{ background:#fff; color:#131C31; box-shadow:none }

.nav .btn--o:hover{ background:#FAF3EA; color:#131C31; box-shadow:0 10px 26px rgba(90,30,8,.22) }


/* burger */
.burger{ border-color:rgba(255,255,255,.45) }

.burger span{ background:#fff }


/* panoul de meniu de pe mobil urmează bara, altfel textul alb ar cădea pe crem */
@media (max-width:1080px){
  .nav__links{ background:#E8511E; border-bottom-color:rgba(255,255,255,.2) }

}

/* Titlurile de bloc au urcat de la h3 la h2 pe paginile interioare, ca sa nu
   se sara peste un nivel sub h1. Scara vizuala ramane cea de h3. */
.box h2,.p__b h2,.loc__h h2,.atu h2{
  font-size:clamp(1.15rem,1.9vw,1.42rem);line-height:1.2;color:var(--txt);margin:0 0 8px
}

.p__b h2,.loc__h h2{margin:0}

.atu h2{margin:0 0 6px;font-size:clamp(1rem,1.6vw,1.2rem)}
/* Subtitlu de bloc in corpul paginilor simple: e h2 pentru ierarhie,
   dar la scara dintre titlul paginii si titlurile de card. */
.h-sec{font-size:clamp(1.45rem,2.4vw,1.9rem);line-height:1.15}


/* ---------- meniul: un card pe produs, cu prețurile pe variante ----------
   Prețurile sunt text de ~17px, sub pragul de «text mare», deci stau pe
   --o-txt (4,96:1 pe zi, 5,14:1 pe noapte), nu pe portocaliul decorativ. */
.m__h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.m__h h3,.m__h h2{margin:0}
/* steaua de lângă nume trimite la «* conține ingrediente congelate» */
.m__h sup{color:var(--o-txt);font-size:.6em;margin-left:2px}
/* produsele care se vând doar pe Tomis 109 */
.m__doar{
  padding:4px 10px;border-radius:999px;font-size:.62rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.1;white-space:nowrap
}
.m__doar--tomis{background:var(--o-bg-soft);color:var(--o-txt);border:1px solid var(--o-bd-soft)}

.m__loc{margin-top:auto;padding-top:10px;display:grid;gap:0}
.m__r{border-top:1px solid var(--line);padding:9px 0 2px;display:grid;gap:4px}
.m__s{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.m__k{font-size:.74rem;font-weight:700;color:var(--muted);min-width:3.2em}
.m__v{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.m__v li{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap}
.m__v span{font-size:.76rem;color:var(--muted);font-weight:600}
.m__v b{font-family:var(--fd);font-weight:800;font-size:1.06rem;color:var(--o-txt);line-height:1.1}
.m__v .m__cur{font-size:.74rem;color:var(--muted);font-weight:700}
.m__n,.m__o,.m__a{font-size:.76rem;line-height:1.45;color:var(--muted);margin:0}
.m__o{margin-top:8px;color:var(--txt)}
.m__a{margin-top:6px}
.m__a b{color:var(--txt);font-weight:700}

/* produsele fără fotografie: panou cu cantitatea, pe portocaliul de
   umplere; cerneala închisă pe el dă 5,09:1 pe zi și 5,67:1 pe noapte */
.m__pan{display:flex;align-items:center;justify-content:center;background:var(--o);padding:18px}
.m__pan span{
  font-family:var(--fd);font-weight:800;color:var(--ink);text-align:center;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.05;text-transform:uppercase;
  text-wrap:balance
}

/* un singur produs în categorie: cardul se lățește, cu poza alături */
/* trei sau șase produse: trei coloane, ca rândurile să iasă pline, nu 4 + 2 */
.m__grid--3{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.m__grid--unu{grid-template-columns:1fr;max-width:920px}
@media (min-width:720px){
  .m__grid--unu .p{flex-direction:row}
  .m__grid--unu .p__img{flex:0 0 46%}
  .m__grid--unu .p__b{padding:22px 26px}
}

/* capul paginii: cum devine un produs meniu, cu cartofi și băutură */
.m__meniuri{
  display:grid;gap:14px;margin:26px auto 0;max-width:640px;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))
}
.m__meniuri div{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md,14px);padding:14px 16px}
.m__meniuri b{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--o-txt);margin-bottom:4px}
.m__meniuri p{margin:0;font-size:.86rem;color:var(--txt);line-height:1.5}
.m__salt{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:22px auto 0;max-width:880px}
.m__salt a{
  padding:7px 14px;border-radius:999px;border:1px solid var(--line-2);color:var(--txt);
  font-size:.8rem;font-weight:700;text-decoration:none
}
.m__salt a:hover{border-color:var(--o-line);color:var(--o-txt)}
.m__leg{text-align:center;font-size:.78rem;color:var(--muted);margin:16px auto 0;max-width:60ch}


/* ---------- alergeni și valori nutriționale ---------- */
.al{display:grid;gap:10px}
.al__s{margin-top:46px}
.al__s .h-sec{margin-bottom:12px}
.al__atentie{
  margin:26px auto 0;max-width:760px;background:var(--o-bg-soft);border:1px solid var(--o-bd-soft);
  border-radius:14px;padding:14px 18px;color:var(--txt);font-size:.95rem;line-height:1.5
}
.al__atentie b{color:var(--o-txt)}
.al__dom{text-align:center;color:var(--muted);font-size:.86rem;margin:12px auto 0;max-width:60ch}
.al__f{background:var(--card);border:1px solid var(--line);border-radius:14px}
.al__f summary{
  cursor:pointer;list-style:none;padding:14px 46px 14px 18px;position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:baseline
}
.al__f summary::-webkit-details-marker{display:none}
.al__f summary::after{
  content:"+";position:absolute;right:18px;top:11px;font-family:var(--fd);font-weight:800;
  font-size:1.3rem;color:var(--o-txt);transition:transform var(--t)
}
.al__f[open] summary::after{transform:rotate(45deg)}
.al__nm{font-weight:800;color:var(--txt)}
.al__gr{font-size:.82rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.al__al{grid-column:1/-1;font-size:.84rem;color:var(--txt)}
.al__al b{color:var(--muted);font-weight:700;margin-right:4px}
.al__c{padding:0 18px 16px;display:grid;gap:12px}
.al__in{font-size:.84rem;color:var(--muted);line-height:1.55;margin:0}
.al__in b{color:var(--txt);margin-right:4px}
.al__tw{overflow-x:auto}
.al__t{width:100%;border-collapse:collapse;font-size:.84rem;font-variant-numeric:tabular-nums}
.al__t th,.al__t td{padding:7px 10px;border-top:1px solid var(--line);text-align:right;white-space:nowrap}
.al__t th[scope=row]{text-align:left;font-weight:600;color:var(--txt);white-space:normal}
.al__t thead th,.al__t thead td{border-top:0;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.al__t .al__sub th{padding-left:24px;font-weight:400;color:var(--muted)}
.al__nota{font-size:.86rem;color:var(--muted);margin:6px 0 0;max-width:72ch}