/* ==========================================================================
   Brutăria Maia — foaia de stil
   Paleta e scoasă din pozele lor (fațada galbenă, crusta, miezul de pâine).
   Construit la 390 px întâi; media query-urile merg în sus.
   ========================================================================== */

/* ---------- fonturi, găzduite local, subsetate ---------- */
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonturi/fraunces-600-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:'Fraunces'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonturi/fraunces-600-lat.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;
}
@font-face{
  font-family:'Manrope'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('fonturi/manrope-var-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:'Manrope'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('fonturi/manrope-var-lat.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;
}

/* ---------- tokeni ---------- */
:root{
  /* paleta */
  --hartie:#F4EEE3;
  --hartie-2:#EAE1D2;
  --carbune:#17161A;
  --carbune-2:#221F24;
  --ink:#1E1C19;
  --ink-slab:#6B6459;
  --accent:#C8961F;
  --accent-inchis:#8F7517;
  --crusta:#CCB69B;

  /* spațiere — o singură scară */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem;
  --sp-12:3rem; --sp-16:4rem;
  --sectiune:clamp(3.5rem,2rem + 7vw,7rem);

  --radius:12px; --radius-lg:22px;
  --linie:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  --linie-inv:1px solid color-mix(in srgb, #fff 16%, transparent);
  --umbra:0 10px 34px -14px color-mix(in srgb, var(--ink) 50%, transparent);
  --lat:1180px;
  --tranzitie:180ms cubic-bezier(.2,.7,.3,1);

  /* tipografie fluidă */
  --pas:clamp(1rem,.94rem + .3vw,1.0625rem);
  --mic:clamp(.8125rem,.78rem + .15vw,.875rem);
  --h3:clamp(1.3rem,1.1rem + 1vw,1.6rem);
  --h2:clamp(1.75rem,1.3rem + 2.3vw,2.7rem);
  --h1:clamp(2.3rem,1.55rem + 4vw,4.1rem);
  --urias:clamp(3.4rem,2rem + 9vw,7rem);
}

/* ---------- resetări ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0; background:var(--hartie); color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--pas); line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.08;letter-spacing:-.015em;margin:0}
h1{font-size:var(--h1)} h2{font-size:var(--h2)} h3{font-size:var(--h3)}
p{margin:0 0 var(--sp-4)}
blockquote,figure{margin:0}
ul,ol{margin:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

.container{width:100%;max-width:var(--lat);margin-inline:auto;padding-inline:var(--sp-5)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- benzi ---------- */
.banda{padding-block:var(--sectiune)}
.banda--inchis{background:var(--carbune);color:var(--hartie)}
.banda--inchis h1,.banda--inchis h2,.banda--inchis h3{color:var(--hartie)}
.banda--deschis{background:var(--hartie)}
.banda--cald{background:var(--hartie-2)}

/* eticheta de secțiune */
.eticheta{
  font-size:var(--mic);letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--accent-inchis);margin:0 0 var(--sp-3);
}
.banda--inchis .eticheta{color:var(--accent)}
.intro{max-width:56ch;color:var(--ink-slab);margin-top:var(--sp-4)}
.banda--inchis .intro{color:color-mix(in srgb,var(--hartie) 74%,transparent)}

/* ---------- butoane ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:48px;padding:var(--sp-3) var(--sp-6);
  font:inherit;font-weight:600;font-size:var(--pas);
  border:1px solid transparent;border-radius:var(--radius);
  text-decoration:none;cursor:pointer;transition:var(--tranzitie);
}
.btn--primar{background:var(--accent);color:#231A05;border-color:var(--accent)}
.btn--primar:hover{background:#D9A62C;border-color:#D9A62C}
.btn--fantoma{background:transparent;color:inherit;border-color:currentColor}
.btn--fantoma:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.btn--mic{min-height:40px;padding:var(--sp-2) var(--sp-4);font-size:var(--mic)}
/* pe telefon butoanele ocupă lățimea egal — două lățimi diferite arată neîngrijit */
.actiuni{display:grid;gap:var(--sp-3)}
@media (min-width:520px){ .actiuni{display:flex;flex-wrap:wrap} }

/* ---------- antet ---------- */
.antet{
  position:sticky;top:0;z-index:60;
  background:var(--carbune);color:var(--hartie);
  border-bottom:var(--linie-inv);
}
.antet__bara{display:flex;align-items:center;gap:var(--sp-3);min-height:56px}
.marca{display:flex;align-items:center;gap:var(--sp-2);text-decoration:none;color:inherit;margin-right:auto;min-width:0}
.marca__sigla{width:32px;height:32px;flex:0 0 32px}
.marca__nume{font-family:'Fraunces',Georgia,serif;font-size:.98rem;line-height:1.05;letter-spacing:.01em;white-space:nowrap}
.marca__sub{display:none}

.antet__tel{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  text-decoration:none;font-weight:600;font-size:var(--mic);color:var(--hartie);
  white-space:nowrap;min-height:44px;padding-inline:var(--sp-2);
}
.antet__tel svg{width:17px;height:17px;flex:0 0 17px}
/* pe ecrane foarte înguste rămâne doar iconița, ca antetul să nu treacă pe două rânduri */
@media (max-width:359px){ .antet__tel span{display:none} }

.hamburger{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;background:transparent;border:var(--linie-inv);
  border-radius:10px;color:inherit;cursor:pointer;padding:0;
}
.hamburger svg{width:20px;height:20px}
.hamburger__inchide{display:none}
.hamburger[aria-expanded="true"] .hamburger__deschide{display:none}
.hamburger[aria-expanded="true"] .hamburger__inchide{display:inline}

/* panoul mobil — fără backdrop-filter (strică position:fixed) */
.nav{
  position:fixed;inset:56px 0 auto 0;z-index:59;
  background:var(--carbune-2);border-bottom:var(--linie-inv);
  padding:var(--sp-4) 0 var(--sp-6);
  max-height:calc(100dvh - 56px);overflow-y:auto;
}
.nav__lista{list-style:none;margin:0;padding:0 var(--sp-5);display:flex;flex-direction:column}
.nav__lista a{
  display:block;padding:var(--sp-4) 0;text-decoration:none;font-weight:600;
  font-size:1.1rem;border-bottom:var(--linie-inv);
}
.nav__lista a[aria-current="page"]{color:var(--accent)}
.nav__jos{padding:var(--sp-5) var(--sp-5) 0;display:flex;flex-direction:column;gap:var(--sp-3)}

/* voalul de sub meniul mobil — z-index sub panou (59) și sub antet (60),
   ca să nu picteze niciodată peste ele */
.voal{
  position:fixed;inset:0;z-index:58;
  background:color-mix(in srgb, #000 52%, transparent);
}
@media (min-width:900px){ .voal{display:none!important} }

/* ---------- gestul unic: „dospirea" ---------- */
/* elementul observat NU primește masca — masca stă pe copil (altfel
   IntersectionObserver nu livrează în ferestre nepictate) */
/* padding-ul compensat ține coada literelor p, ț, g în afara tăieturii măștii */
.urca{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
html.js .urca > *{
  transform:translateY(105%);
  transition:transform 620ms cubic-bezier(.16,.84,.34,1);
}
html.js .urca.vazut > *{transform:translateY(0)}
html.js .urca--intarziat > *{transition-delay:120ms}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js .urca > *{transform:none!important}
}

/* ---------- hero ---------- */
.hero{background:var(--carbune);color:var(--hartie);padding-block:var(--sp-10) var(--sp-12)}
.hero h1{margin:0 0 var(--sp-4)}
.hero__sub{max-width:44ch;color:color-mix(in srgb,var(--hartie) 76%,transparent);margin-bottom:var(--sp-6)}
.hero__poza{margin:var(--sp-10) 0 0;border-radius:var(--radius-lg);overflow:hidden;position:relative}
.hero__poza img{width:100%;aspect-ratio:7/5;object-fit:cover}
.hero__fapte{
  list-style:none;margin:var(--sp-8) 0 0;padding:var(--sp-6) 0 0;
  display:grid;gap:var(--sp-5);border-top:var(--linie-inv);
}
.hero__fapte li{display:flex;flex-direction:column;gap:var(--sp-1);font-size:var(--mic);
  color:color-mix(in srgb,var(--hartie) 72%,transparent)}
.hero__fapte b{font-family:'Fraunces',serif;color:var(--accent);font-size:1.05rem;font-weight:600}

/* ---------- vitrina: derulare orizontală cu indicator propriu ---------- */
.vitrina__cap{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-6)}
.pista{
  display:flex;gap:var(--sp-4);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:var(--sp-2);
  margin-inline:calc(var(--sp-5) * -1);padding-inline:var(--sp-5);
  /* fără asta, scroll-snap lipește primul card de marginea ecranului
     și anulează padding-ul (scrollLeft sare pe 20) */
  scroll-padding-inline:var(--sp-5);
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){ .pista{scroll-behavior:auto} }
.pista::-webkit-scrollbar{display:none}
.pista__el{flex:0 0 74%;scroll-snap-align:start;max-width:320px}
.pista__el figure{margin:0}
.pista__el img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius);background:var(--hartie-2)}
.pista__el figcaption{margin-top:var(--sp-3);font-size:var(--mic);color:var(--ink-slab)}
.banda--inchis .pista__el figcaption{color:color-mix(in srgb,var(--hartie) 66%,transparent)}

.indicator{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-5)}
.indicator__sina{position:relative;flex:1;height:3px;background:color-mix(in srgb,var(--ink) 14%,transparent);border-radius:99px;overflow:hidden}
.banda--inchis .indicator__sina{background:color-mix(in srgb,#fff 18%,transparent)}
.indicator__bara{position:absolute;inset-block:0;left:0;width:30%;background:var(--accent);border-radius:99px;transition:left 120ms linear}
.indicator__btn{
  width:40px;height:40px;flex:0 0 40px;border-radius:50%;
  border:var(--linie);background:transparent;color:inherit;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:var(--tranzitie);
}
.banda--inchis .indicator__btn{border:var(--linie-inv)}
.indicator__btn svg{width:16px;height:16px}
.indicator__btn:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.indicator__btn[disabled]{opacity:.35;cursor:default}

/* ---------- coloana vertebrală: „Patru lucruri" ---------- */
.patru{display:grid;gap:var(--sp-8);margin-top:var(--sp-10)}
.lucru{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4) var(--sp-5);align-items:start;
  padding-top:var(--sp-6);border-top:var(--linie-inv)}
.lucru__nr{
  font-family:'Fraunces',serif;font-size:var(--h2);line-height:1;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.lucru__nume{font-family:'Fraunces',serif;font-size:var(--h3);margin:0 0 var(--sp-2)}
.lucru__text{margin:0;font-size:var(--mic);color:color-mix(in srgb,var(--hartie) 70%,transparent)}

.contra{margin-top:var(--sp-12);padding:var(--sp-6);border:var(--linie-inv);border-radius:var(--radius-lg)}
.contra__titlu{font-size:var(--mic);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:color-mix(in srgb,var(--hartie) 60%,transparent);margin:0 0 var(--sp-4)}
.contra__lista{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4)}
.contra__lista li{
  font-size:var(--mic);text-decoration:line-through;
  text-decoration-color:var(--accent);text-decoration-thickness:2px;
  color:color-mix(in srgb,var(--hartie) 52%,transparent);
}
.contra__nota{margin:var(--sp-5) 0 0;font-size:var(--mic);color:color-mix(in srgb,var(--hartie) 72%,transparent)}

/* ---------- pâinea: carduri tipografice ---------- */
.paini{display:grid;gap:0;margin-top:var(--sp-8);border-top:var(--linie)}
.paine{
  display:grid;grid-template-columns:1fr auto;gap:var(--sp-2) var(--sp-4);
  align-items:baseline;padding:var(--sp-5) 0;border-bottom:var(--linie);min-width:0;
}
.paine__nume{font-family:'Fraunces',serif;font-size:1.15rem;line-height:1.2;margin:0;min-width:0}
.paine__gram{font-size:var(--mic);color:var(--ink-slab);font-weight:400}
.paine__pret{
  font-weight:600;font-size:.95rem;white-space:nowrap;
  background:var(--accent);color:#231A05;border-radius:99px;padding:.2rem .7rem;
}
.paine__pret--gol{background:transparent;border:var(--linie);color:var(--ink-slab);font-style:italic;font-weight:400}
.paine__ingrediente{
  grid-column:1/-1;margin:0;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-slab);line-height:1.7;
}
.paine__variante{grid-column:1/-1;margin:var(--sp-2) 0 0;font-size:var(--mic);color:var(--ink-slab)}
.paine__variante b{color:var(--ink);font-weight:600}

/* ---------- pași (cum comanzi) ---------- */
.pasi{list-style:none;margin:var(--sp-10) 0 0;padding:0;display:grid;gap:var(--sp-6)}
.pas{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);align-items:start;padding-top:var(--sp-5);border-top:var(--linie-inv)}
.pas__nr{font-family:'Fraunces',serif;font-size:1.6rem;line-height:1;color:var(--accent)}
.pas h3{font-size:1.1rem;margin:0 0 var(--sp-2)}
.pas p{margin:0;font-size:var(--mic);color:color-mix(in srgb,var(--hartie) 70%,transparent)}

.fidelitate{
  margin-top:var(--sp-12);display:grid;gap:var(--sp-6);
  padding:var(--sp-6);border-radius:var(--radius-lg);
  background:color-mix(in srgb,var(--accent) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
}
.fidelitate h3{font-size:var(--h3);margin:0 0 var(--sp-2)}
.fidelitate p{margin:0;font-size:var(--mic);color:color-mix(in srgb,var(--hartie) 78%,transparent)}
.fidelitate img{border-radius:var(--radius);width:100%;aspect-ratio:16/10;object-fit:cover}

/* ---------- vorbe (testimoniale, fără stele) ---------- */
.vorbe{display:grid;gap:var(--sp-8);margin-top:var(--sp-10)}
.vorba{padding-top:var(--sp-5);border-top:var(--linie)}
.vorba p{font-family:'Fraunces',serif;font-size:1.2rem;line-height:1.4;margin:0 0 var(--sp-3)}
.vorba cite{font-style:normal;font-size:var(--mic);color:var(--ink-slab);letter-spacing:.06em}

/* ---------- locul ---------- */
.loc{display:grid;gap:var(--sp-8);margin-top:var(--sp-8)}
.loc img{border-radius:var(--radius-lg);width:100%;aspect-ratio:16/10;object-fit:cover}
.orar{list-style:none;margin:0 0 var(--sp-6);padding:0;font-size:var(--mic)}
.orar li{display:flex;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-2) 0;border-bottom:var(--linie)}
.orar li:last-child{border-bottom:0}
.orar b{font-weight:600}
.orar .inchis{color:var(--ink-slab)}

/* ---------- cap de pagină interioară (două coloane, nu doar text) ---------- */
.cap{background:var(--carbune);color:var(--hartie);padding-block:var(--sp-10) var(--sp-12)}
.cap__grid{display:grid;gap:var(--sp-8)}
.cap h1{margin:0 0 var(--sp-4)}
.cap p{color:color-mix(in srgb,var(--hartie) 76%,transparent);max-width:52ch;margin:0}
.cap__poza img{border-radius:var(--radius-lg);width:100%;aspect-ratio:4/3;object-fit:cover}

/* ---------- subsol ---------- */
.subsol{background:var(--carbune);color:var(--hartie);padding-block:var(--sp-12) var(--sp-8);border-top:var(--linie-inv)}
.subsol__grid{display:grid;gap:var(--sp-8)}
.subsol h2{font-size:1.1rem;margin:0 0 var(--sp-4)}
.subsol a{color:inherit}
.subsol__lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2);font-size:var(--mic)}
.subsol__lista a{text-decoration:none}
.subsol__lista a:hover{text-decoration:underline}
.subsol__jos{
  margin-top:var(--sp-10);padding-top:var(--sp-5);border-top:var(--linie-inv);
  font-size:.75rem;color:color-mix(in srgb,var(--hartie) 56%,transparent);
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);
}

/* ---------- formulare ---------- */
.camp{display:grid;gap:var(--sp-2);margin-bottom:var(--sp-5)}
.camp label{font-size:var(--mic);font-weight:600}
.camp input,.camp select,.camp textarea{
  font:inherit;font-size:16px;padding:var(--sp-3) var(--sp-4);
  border:var(--linie);border-radius:var(--radius);background:#fff;color:var(--ink);
  width:100%;min-height:48px;
}
.camp textarea{min-height:120px;resize:vertical}
.camp__ajutor{font-size:.78rem;color:var(--ink-slab)}
.camp__eroare{font-size:.78rem;color:#9B2C1E;font-weight:600}
.camp input:invalid:not(:placeholder-shown){border-color:#9B2C1E}
.bifa{display:flex;gap:var(--sp-3);align-items:flex-start;margin-bottom:var(--sp-6);font-size:var(--mic)}
.bifa input{width:22px;height:22px;min-height:0;flex:0 0 22px;margin-top:2px}
.nota-formular{font-size:var(--mic);color:var(--ink-slab);border-left:3px solid var(--accent);padding-left:var(--sp-4);margin-top:var(--sp-6)}

/* ==========================================================================
   de la 640 px în sus
   ========================================================================== */
@media (min-width:640px){
  .pista__el{flex:0 0 46%}
  .hero__fapte{grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
  .hero__fapte li{flex-direction:column;gap:var(--sp-1)}
  .fidelitate{grid-template-columns:1.1fr .9fr;align-items:center}
  .vorbe{grid-template-columns:repeat(2,1fr);gap:var(--sp-6)}
  .loc{grid-template-columns:1fr 1fr;align-items:center}
  .subsol__grid{grid-template-columns:repeat(3,1fr)}
  .cap__grid{grid-template-columns:1.15fr .85fr;align-items:center;gap:var(--sp-10)}
}

/* ==========================================================================
   de la 900 px în sus — meniul devine orizontal
   ========================================================================== */
@media (min-width:900px){
  .antet__bara{min-height:72px;gap:var(--sp-6)}
  .marca__sigla{width:40px;height:40px;flex-basis:40px}
  .marca__nume{font-size:1.2rem}
  .hamburger{display:none}
  /* pe desktop marca nu mai împinge tot la dreapta — nav-ul preia rolul */
  .marca{margin-right:0}
  .nav{
    position:static;inset:auto;background:transparent;border:0;
    padding:0;max-height:none;overflow:visible;
    display:flex!important;align-items:center;gap:var(--sp-6);
    margin-left:auto;flex-wrap:nowrap;
  }
  .nav__lista{flex-direction:row;gap:var(--sp-6);padding:0}
  .nav__lista a{padding:var(--sp-2) 0;border:0;font-size:var(--mic);font-weight:600;letter-spacing:.02em}
  .nav__lista a:hover{color:var(--accent)}
  .nav__jos{flex-direction:row;padding:0;align-items:center;gap:var(--sp-4)}

  .hero{padding-block:var(--sp-16)}
  /* poza primește mai multă lățime decât textul: e landscape, iar înghesuită
     într-o coloană îngustă i se taie exact subiectul (pâinile de la margini) */
  .hero__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--sp-10);align-items:center}
  .hero__poza{margin-top:0}
  /* 7/5 e chiar raportul pozei (1200×858) — se vede întreagă, fără decupaj */
  .hero__poza img{aspect-ratio:7/5}
  .hero__fapte{grid-column:1/-1}

  .pista__el{flex:0 0 30%}
  .patru{grid-template-columns:repeat(2,1fr);gap:var(--sp-10) var(--sp-12)}
  .paini{grid-template-columns:repeat(2,1fr);gap:0 var(--sp-12)}
  .paine{border-top:0}
  .pasi{grid-template-columns:repeat(3,1fr);gap:var(--sp-8)}
  .vorbe{grid-template-columns:repeat(3,1fr)}
}

/* ==========================================================================
   Meniul, coșul, formularele de comandă
   ========================================================================== */

/* pastila cu numărul din coș, în antet și în meniu */
.pastila{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;margin-left:var(--sp-2);
  border-radius:99px;background:var(--carbune);color:var(--accent);
  font-size:.7rem;font-weight:600;line-height:1;
}

/* ---------- filtre ---------- */
.filtre{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-10)}
.pastila-filtru{
  font:inherit;font-size:var(--mic);font-weight:600;
  min-height:44px;padding:var(--sp-2) var(--sp-4);
  border:var(--linie);border-radius:99px;background:transparent;color:var(--ink);
  cursor:pointer;transition:var(--tranzitie);display:inline-flex;align-items:center;gap:var(--sp-2);
}
.pastila-filtru span{
  font-size:.72rem;color:var(--ink-slab);
  background:color-mix(in srgb,var(--ink) 8%,transparent);
  border-radius:99px;padding:1px 7px;
}
.pastila-filtru:hover{border-color:var(--accent)}
.pastila-filtru[aria-pressed="true"]{background:var(--carbune);color:var(--hartie);border-color:var(--carbune)}
.pastila-filtru[aria-pressed="true"] span{background:color-mix(in srgb,#fff 16%,transparent);color:var(--accent)}

/* ---------- grupuri și carduri de produs ---------- */
.grup{margin-bottom:var(--sp-12)}
.grup:last-child{margin-bottom:0}
.grup__titlu{
  font-size:var(--h3);margin:0 0 var(--sp-5);padding-bottom:var(--sp-3);
  border-bottom:2px solid var(--carbune);
}
.produse{display:grid;gap:0;border-top:var(--linie)}
.produs{padding:var(--sp-5) 0;border-bottom:var(--linie);min-width:0;transition:var(--tranzitie)}
.produs--ales{background:color-mix(in srgb,var(--accent) 9%,transparent);
  box-shadow:inset 3px 0 0 var(--accent);padding-inline:var(--sp-4)}
.produs__cap{display:grid;grid-template-columns:1fr auto;gap:var(--sp-2) var(--sp-4);align-items:baseline;min-width:0}
.produs__nume{font-family:'Fraunces',serif;font-size:1.1rem;line-height:1.2;margin:0;min-width:0}
.produs__unitate{font-weight:400;font-size:.68rem;opacity:.8;margin-left:2px}
.produs__fara{
  margin:var(--sp-2) 0 0;font-size:.72rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-inchis);
}
.produs .paine__ingrediente{margin-top:var(--sp-2)}
.produs__varianta{display:grid;gap:var(--sp-2);margin-top:var(--sp-4);max-width:22rem}
.produs__varianta span{font-size:var(--mic);font-weight:600}
.produs__varianta select{
  font:inherit;font-size:16px;min-height:44px;padding:var(--sp-2) var(--sp-3);
  border:var(--linie);border-radius:var(--radius);background:#fff;color:var(--ink);width:100%;
}

/* ---------- stepper ---------- */
.stepper{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4)}
.stepper__btn{
  width:44px;height:44px;flex:0 0 44px;border-radius:50%;
  border:1px solid var(--carbune);background:transparent;color:var(--ink);
  font-size:1.35rem;line-height:1;cursor:pointer;transition:var(--tranzitie);
  display:inline-flex;align-items:center;justify-content:center;
}
.stepper__btn:hover{background:var(--carbune);color:var(--hartie)}
.stepper__nr{
  min-width:2.2rem;text-align:center;font-weight:600;font-size:1.05rem;
  font-variant-numeric:tabular-nums;
}
.stepper__um{font-size:var(--mic);color:var(--ink-slab)}

.nota-sezon{
  margin-top:var(--sp-10);padding:var(--sp-5);border-radius:var(--radius);
  background:var(--hartie-2);font-size:var(--mic);color:var(--ink-slab);
}
.nota-sezon b{color:var(--ink)}

/* ---------- rezumatul coșului ---------- */
.cos-lista{list-style:none;margin:var(--sp-8) 0 0;padding:0;border-top:var(--linie-inv)}
.cos-rand{
  display:grid;grid-template-columns:1fr auto;gap:var(--sp-1) var(--sp-4);
  padding:var(--sp-4) 0;border-bottom:var(--linie-inv);align-items:baseline;min-width:0;
}
.cos-rand__nume{font-weight:600;min-width:0}
.cos-rand__nume em{font-style:normal;font-weight:400;color:color-mix(in srgb,var(--hartie) 66%,transparent)}
.cos-rand__pret{white-space:nowrap;font-weight:600;color:var(--accent)}
.cos-rand__cant{grid-column:1;font-size:var(--mic);color:color-mix(in srgb,var(--hartie) 62%,transparent)}
.cos-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);
  padding:var(--sp-5) 0;font-size:var(--h3);font-family:'Fraunces',serif;
}
.cos-total b{color:var(--accent)}
.cos-nota{font-size:var(--mic);color:color-mix(in srgb,var(--hartie) 68%,transparent);margin-bottom:var(--sp-6)}

@media (min-width:900px){
  .produse{grid-template-columns:repeat(2,1fr);gap:0 var(--sp-12)}
}

/* ---------- pagina de comandă ---------- */
.rezumat-lista{list-style:none;margin:var(--sp-8) 0 0;padding:0;border-top:var(--linie)}
.rezumat-rand{
  display:grid;grid-template-columns:1fr auto;gap:var(--sp-1) var(--sp-4);
  padding:var(--sp-4) 0;border-bottom:var(--linie);align-items:baseline;min-width:0;
}
.rezumat-rand__nume{font-weight:600;min-width:0}
.rezumat-rand__nume em{font-style:normal;font-weight:400;color:var(--ink-slab)}
.rezumat-rand__cant{grid-column:1;font-size:var(--mic);color:var(--ink-slab)}
.rezumat-rand__pret{white-space:nowrap;font-weight:600}
.rezumat-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);
  padding:var(--sp-5) 0;font-family:'Fraunces',serif;font-size:var(--h3);
  border-bottom:2px solid var(--carbune);margin-bottom:var(--sp-5);
}

.camp-grup{border:0;padding:0;margin:var(--sp-8) 0 0;min-width:0}
.camp-grup legend{
  padding:0;font-size:var(--mic);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-slab);margin-bottom:var(--sp-4);
}
.banda--inchis .camp-grup legend{color:color-mix(in srgb,var(--hartie) 66%,transparent)}

.chipuri{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chip{
  font:inherit;font-size:var(--mic);font-weight:600;
  min-height:48px;padding:var(--sp-2) var(--sp-4);
  border:var(--linie);border-radius:var(--radius);background:#fff;color:var(--ink);
  cursor:pointer;transition:var(--tranzitie);
}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--carbune);color:var(--hartie);border-color:var(--carbune)}
.chip--zi{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:5.5rem;line-height:1.25}
.chip--zi b{font-weight:600;text-transform:capitalize}
.chip--zi span{font-size:.72rem;font-weight:400;opacity:.7}

.formular{display:grid;gap:0;margin-top:var(--sp-8)}
.camp--lat{grid-column:1/-1}
@media (min-width:640px){
  .formular{grid-template-columns:1fr 1fr;gap:0 var(--sp-6)}
}

/* ---------- despre / contact ---------- */
.text-doua{display:grid;gap:var(--sp-6)}
.text-doua__corp{max-width:62ch}
.text-doua__corp p:last-child{margin-bottom:0}

.carduri-simple{display:grid;gap:var(--sp-6);margin-top:var(--sp-10)}
.card-simplu{padding-top:var(--sp-5);border-top:var(--linie-inv)}
.card-simplu h3{font-size:1.15rem;margin:0 0 var(--sp-3)}
.card-simplu p{margin:0;font-size:var(--mic);color:color-mix(in srgb,var(--hartie) 72%,transparent)}
.banda--deschis .card-simplu{border-top:var(--linie)}
.banda--deschis .card-simplu p{color:var(--ink-slab)}

.poza-lata{margin-top:var(--sp-12)}
.poza-lata img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-lg)}
.poza-lata figcaption{margin-top:var(--sp-3);font-size:var(--mic);color:var(--ink-slab)}
.banda--inchis .poza-lata figcaption{color:color-mix(in srgb,var(--hartie) 62%,transparent)}

.contact-grid{display:grid;gap:var(--sp-16)}
.date{margin:var(--sp-8) 0 0;display:grid;gap:0}
.date dt{
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--ink-slab);padding-top:var(--sp-4);border-top:var(--linie);
}
.date dd{margin:var(--sp-2) 0 var(--sp-4);line-height:1.6}

.drum{display:grid;gap:var(--sp-8);margin-top:var(--sp-8)}
.drum img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg)}
.drum figcaption{margin-top:var(--sp-3);font-size:var(--mic);color:var(--ink-slab)}

@media (min-width:900px){
  .text-doua{grid-template-columns:.9fr 1.1fr;gap:var(--sp-12);align-items:start}
  .carduri-simple{grid-template-columns:repeat(3,1fr)}
  .contact-grid{grid-template-columns:1fr 1fr;gap:var(--sp-16)}
  .drum{grid-template-columns:1.1fr .9fr;align-items:center;gap:var(--sp-12)}
}

/* ---------- miniatura de produs, doar unde chiar avem poza produsului ----------
   Cardurile fără poză nu primesc chenar gol: textul ocupă toată lățimea,
   iar rândul arată intenționat, nu ciuntit. */
.produs--cu-poza{
  display:grid;
  grid-template-columns:84px 1fr;
  column-gap:var(--sp-4);
  align-items:start;
  /* fără astea, poza care ține toate rândurile întinde rândurile scurte
     și lasă un gol mare între titlu și ingrediente */
  grid-auto-rows:min-content;
  align-content:start;
}
/* poza ține toată înălțimea cardului, restul copiilor merg pe coloana a doua,
   fiecare pe rândul lui — fără grid-area, ca să nu se suprapună */
.produs__poza{
  grid-column:1;
  /* `1 / -1` NU ajunge în rândurile implicite: -1 e ultima linie a grilei
     explicite, care aici nu există. Poza rămânea singură pe rândul 1 și-l
     umfla la 84px, lăsând un gol sub titlu. `span 20` traversează tot. */
  grid-row:1 / span 20;
  width:84px;height:84px;
  object-fit:cover;border-radius:var(--radius);
  background:var(--hartie-2);
}
.produs--cu-poza > *:not(.produs__poza){grid-column:2}

@media (min-width:520px){
  .produs--cu-poza{grid-template-columns:104px 1fr}
  .produs__poza{width:104px;height:104px}
}

/* locțiitorul grafic: aceeași casetă ca poza, ca rândurile să se alinieze */
.produs__poza--gol{
  display:flex;align-items:center;justify-content:center;
  background:var(--hartie-2);
  border:1px dashed color-mix(in srgb, var(--ink) 18%, transparent);
  color:var(--accent-inchis);
}
.produs__poza--gol svg{width:44%;height:44%;display:block}
.produs--ales .produs__poza--gol{
  background:color-mix(in srgb, var(--accent) 16%, var(--hartie-2));
  border-color:color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ==========================================================================
   Degradeuri — adâncime, nu decor.
   Toate ies din culorile deja existente în :root; nicio nuanță nouă.
   Regula: un degradeu se vede doar dacă îl cauți. Dacă îl observi imediat,
   e prea tare.
   ========================================================================== */
:root{
  /* aur cu o urmă de metal, pentru butonul principal și pastilele de preț */
  /* capătul închis e un amestec, nu ocrul pur: pe ocru pur textul închis
     scade la 3,8:1, sub pragul de 4,5:1 pentru text normal */
  --grad-aur:linear-gradient(145deg,
              color-mix(in srgb, var(--accent) 82%, #fff) 0%,
              var(--accent) 48%,
              color-mix(in srgb, var(--accent) 78%, var(--accent-inchis)) 100%);
  /* cald, pentru benzile deschise */
  --grad-hartie:linear-gradient(180deg, var(--hartie) 0%, var(--hartie-2) 100%);
  /* fir subțire care se stinge la capete */
  --grad-fir:linear-gradient(90deg, transparent,
              color-mix(in srgb, var(--ink) 26%, transparent) 12%,
              color-mix(in srgb, var(--ink) 26%, transparent) 88%, transparent);
}

/* --- benzile închise: căldură de cuptor dinspre colțul de sus --- */
.antet,
.hero,
.cap,
.banda--inchis,
.subsol{
  background-color:var(--carbune);
  background-image:
    radial-gradient(120% 90% at 82% -10%,
      color-mix(in srgb, var(--accent) 15%, transparent) 0%,
      transparent 58%),
    linear-gradient(180deg, var(--carbune-2) 0%, var(--carbune) 62%);
  background-repeat:no-repeat;
}
/* antetul e o fâșie subțire — îi ajunge doar degradeul vertical */
.antet{
  background-image:linear-gradient(180deg, var(--carbune-2), var(--carbune));
}

/* --- benzile deschise: trecere abia perceptibilă, ca hârtia să nu fie plată --- */
.banda--deschis{ background:var(--grad-hartie) }
.banda--cald{
  background:linear-gradient(180deg, var(--hartie-2) 0%, var(--hartie) 100%);
}

/* --- aurul: buton principal și pastile de preț --- */
.btn--primar{
  background:var(--grad-aur);
  box-shadow:0 1px 0 color-mix(in srgb, #fff 40%, transparent) inset,
             0 8px 20px -12px color-mix(in srgb, var(--accent-inchis) 90%, transparent);
}
.btn--primar:hover{
  background:linear-gradient(145deg,
    color-mix(in srgb, var(--accent) 92%, #fff) 0%,
    color-mix(in srgb, var(--accent) 96%, #fff) 46%,
    var(--accent) 100%);
}
.paine__pret{
  background:var(--grad-aur);
  box-shadow:0 1px 0 color-mix(in srgb, #fff 34%, transparent) inset;
}
.paine__pret--gol{background:transparent;box-shadow:none}

/* --- firele de separare se sting la capete, în loc să taie drept --- */
.paini,
.produse{border-top:0;background-image:var(--grad-fir);background-size:100% 1px;
  background-repeat:no-repeat;background-position:0 0}
.paine,
.produs{
  border-bottom:0;
  background-image:var(--grad-fir);
  background-size:100% 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
}
/* cardul ales păstrează evidențierea, peste fir */
.produs--ales{
  background-image:
    linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 13%, transparent) 0%,
      color-mix(in srgb, var(--accent) 4%, transparent) 60%,
      transparent 100%),
    var(--grad-fir);
  background-size:100% 100%, 100% 1px;
  background-position:0 0, 0 100%;
  background-repeat:no-repeat, no-repeat;
}

/* --- titlul de grup: linia de dedesubt capătă un capăt auriu --- */
.grup__titlu{
  border-bottom:0;
  background-image:linear-gradient(90deg, var(--accent) 0%, var(--accent-inchis) 14%,
    color-mix(in srgb, var(--ink) 22%, transparent) 14%, transparent 100%);
  background-size:100% 2px;background-repeat:no-repeat;background-position:0 100%;
}

/* --- poza de hero: o umbră caldă dedesubt, ca să nu plutească --- */
.hero__poza,
.cap__poza img{
  box-shadow:0 24px 50px -28px color-mix(in srgb, #000 85%, transparent);
}

/* --- caseta de fidelitate primește degradeu în locul culorii plate --- */
.fidelitate{
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 20%, transparent) 0%,
    color-mix(in srgb, var(--accent) 7%, transparent) 55%,
    transparent 100%);
}

/* poza din coloana titlului, la „Numele" — altfel coloana rămâne goală
   sub titlu și banda se citește ca și cum ar lipsi ceva */
.text-doua__poza{margin-top:var(--sp-8)}
.text-doua__poza img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:var(--radius-lg);
  box-shadow:0 22px 46px -26px color-mix(in srgb, var(--ink) 70%, transparent);
}
@media (min-width:900px){
  .text-doua__poza{margin-top:var(--sp-10)}
}

/* În coloana de hero, cele două butoane se rup pe rânduri diferite la lățimi
   mijlocii și rămân de lățimi diferite — arată neîngrijit. Cu flex-basis egal
   ies fie două jumătăți egale, fie două rânduri pline. */
@media (min-width:520px){
  .hero .actiuni{flex-wrap:wrap}
  /* nowrap ca eticheta să nu se rupă pe două rânduri în buton; flex:1 1 auto
     ca cele două fie să împartă rândul, fie să treacă fiecare pe rândul ei,
     pline — niciodată două lățimi diferite una sub alta */
  .hero .actiuni .btn{flex:1 1 auto;white-space:nowrap}
}