/* ===========================================================
   Dulcessa Lab — foaie de stil comună pentru toate paginile.
   O modificare aici se vede pe tot site-ul.
   =========================================================== */

:root{
  --paper:#F4F4EF;
  --paper-2:#FBFBF7;
  --ink:#20302A;
  --ink-soft:#55655C;
  --line:#DCDCD3;

  --rose:#F2BECB;
  --rose-pale:#FBEAEF;
  --rose-deep:#9C3D5C;
  --mint:#BFE0D2;
  --mint-pale:#EAF5F0;
  --mint-deep:#2E7259;

  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --prose:"Newsreader", Georgia, serif;

  --wrap:1120px;
  --gap:clamp(1rem, 3vw, 2rem);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--prose); font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.h{font-family:var(--display); font-weight:800; line-height:1.05; letter-spacing:-.02em; margin:0}
h1{font-size:clamp(2.2rem,5.5vw,3.8rem)}
h2{font-size:clamp(1.8rem,3.8vw,2.6rem)}
h3{font-size:1.15rem; font-weight:700; letter-spacing:-.01em}
p{margin:0 0 1rem}
a{color:inherit}
img{max-width:100%; display:block}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gap)}
.lede{font-size:clamp(1.05rem,1.8vw,1.25rem); line-height:1.6; max-width:36em; color:var(--ink-soft)}
:focus-visible{outline:3px solid var(--rose-deep); outline-offset:3px; border-radius:2px}
section{padding-block:clamp(3rem,7vw,5.5rem)}
.tint{background:var(--mint-pale)}
.section-head{max-width:40em; margin-bottom:clamp(1.75rem,4vw,2.75rem)}
.section-head p{margin-top:.75rem}
.row-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; max-width:none}
.row-head a{font-family:var(--display); font-weight:500; font-size:.95rem; color:var(--mint-deep)}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.head-in{display:flex; align-items:center; gap:1.25rem; height:4.25rem;
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gap)}
.logo{display:flex; align-items:center; gap:.6rem; text-decoration:none; font-family:var(--display);
  font-weight:800; font-size:1.12rem; letter-spacing:-.03em; white-space:nowrap}
.nav{display:flex; gap:1.15rem; margin-left:auto; overflow-x:auto; scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{font-family:var(--display); font-weight:500; font-size:.95rem; text-decoration:none;
  color:var(--ink-soft); white-space:nowrap; padding-block:.35rem}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--ink); box-shadow:inset 0 -2px 0 var(--rose)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;
  font-family:var(--display); font-weight:700; font-size:.98rem;
  padding:.72rem 1.15rem; border-radius:999px; border:1.5px solid var(--ink);
  background:var(--ink); color:var(--paper); cursor:pointer;
  transition:transform .12s ease, background .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--ink)}
.btn-ghost:hover{background:var(--mint-pale)}
.btn-sm{padding:.5rem .9rem; font-size:.9rem}
@media (max-width:640px){ .head-cta{display:none} }

/* ---------- promo strip ---------- */
.promo{
  background:var(--rose-deep); color:#fff; font-family:var(--display); font-size:.95rem;
  display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; justify-content:center;
  padding:.7rem var(--gap); text-align:center;
}
.promo strong{font-weight:700}
.promo a{color:#fff; font-weight:500}

/* ---------- hero ---------- */
.hero{padding-top:clamp(2.5rem,6vw,4.5rem)}
.hero-in{display:grid; gap:clamp(1.5rem,4vw,3rem); grid-template-columns:1fr; align-items:center}
@media (min-width:880px){ .hero-in{grid-template-columns:1.05fr .95fr} }
.hero .lede{margin-top:1.25rem}
.actions{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem}
.hero-note{margin-top:1.5rem; font-size:.95rem; color:var(--ink-soft)}
.hero-note b{font-family:var(--display); font-weight:700; color:var(--ink)}
.hero-shot{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:16px}

/* ---------- product cards ---------- */
.grid{display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fill, minmax(235px,1fr))}
.card{background:var(--paper-2); border:1px solid var(--line); border-radius:14px;
  padding:1rem 1rem 1.15rem; display:flex; flex-direction:column}
.card.pad{padding:1.4rem 1.35rem}
.card h3{margin-bottom:.3rem}
.card .desc{font-size:.95rem; line-height:1.5; color:var(--ink-soft); margin:0 0 .9rem}
.card-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.75rem}
.ask{font-family:var(--display); font-weight:700; font-size:.9rem; color:var(--mint-deep); text-decoration:none}
.ask:hover{text-decoration:underline}
.shot{display:block; width:100%; height:150px; margin-bottom:.9rem;
  border-radius:10px; background:var(--mint-pale); object-fit:cover}
.card:nth-child(even) .shot{background:var(--rose-pale)}

/* prices — placeholders are deliberately loud so they can't ship by accident */
.price{font-family:var(--display); font-weight:700; font-size:1rem; white-space:nowrap}
.price .unit{font-weight:500; font-size:.82rem; color:var(--ink-soft)}
.price-todo{color:var(--rose-deep); background:var(--rose-pale);
  border:1px dashed var(--rose-deep); border-radius:6px; padding:.1rem .45rem}

/* ---------- menu groups ---------- */
.group-title{margin:clamp(2.5rem,5vw,3.5rem) 0 1.25rem; font-size:clamp(1.5rem,3vw,2rem)}
.group-title:first-of-type{margin-top:0}
.menu-group{margin-bottom:clamp(2rem,4vw,3rem)}
.menu-group > header{display:flex; align-items:baseline; gap:.9rem; margin-bottom:1.25rem;
  padding-bottom:.6rem; border-bottom:1px solid var(--line); flex-wrap:wrap}
.menu-group > header .h{font-size:1.3rem}
.menu-group > header span{font-family:var(--prose); font-style:italic; color:var(--ink-soft); font-size:.98rem}

/* ---------- simple price rows (patiserie) ---------- */
.rows{border-top:1px solid var(--line)}
.row{display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  padding:1rem 0; border-bottom:1px solid var(--line)}
.row .desc{margin:.2rem 0 0; font-size:.95rem; color:var(--ink-soft)}

/* ---------- candy bar ---------- */
.candy{background:var(--mint-pale); border-radius:14px; padding:clamp(1.25rem,3vw,2rem)}
.candy ul{margin:0 0 1.25rem; padding-left:1.1rem}
.candy li{margin-bottom:.45rem}

/* ---------- about / facts ---------- */
.despre-in{display:grid; gap:clamp(1.5rem,4vw,3.5rem); grid-template-columns:1fr}
@media (min-width:860px){ .despre-in{grid-template-columns:1.15fr .85fr} }
.despre-in p{max-width:36em}
.facts{border-top:1px solid var(--mint); padding-top:1.25rem; margin:0}
.facts div{padding-block:.85rem; border-bottom:1px solid var(--mint)}
.facts dt{font-family:var(--display); font-weight:700; font-size:.92rem}
.facts dd{margin:.15rem 0 0; color:var(--ink-soft); font-size:.98rem}
.find .addr{font-family:var(--display); font-weight:500; margin-bottom:1.5rem}

/* ---------- steps & rules ---------- */
.steps{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-bottom:2rem}
.step{border-left:2px solid var(--rose); padding-left:1rem}
.step b{display:block; font-family:var(--display); font-weight:800; font-size:1.6rem;
  color:var(--rose-deep); line-height:1}
.step h3{margin:.35rem 0 .25rem}
.step p{font-size:.97rem; color:var(--ink-soft); margin:0}
.rules{background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:1.35rem 1.5rem}
.rules ul{margin:0 0 1.25rem; padding-left:1.1rem}
.rules li{margin-bottom:.5rem}

/* ---------- contact ---------- */
.contact-in{display:grid; gap:clamp(1.75rem,4vw,3rem); grid-template-columns:1fr}
@media (min-width:880px){ .contact-in{grid-template-columns:1fr 1fr} }
.map, .map-todo{width:100%; height:320px; border:0; border-radius:14px; margin-bottom:1.75rem}
.map-todo{background:var(--mint-pale); border:1px dashed var(--mint-deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem;
  font-family:var(--display); color:var(--mint-deep)}
.map-todo small{color:var(--ink-soft); font-weight:500}
.contact-block{margin-bottom:1.5rem}
.contact-block h3{margin-bottom:.35rem}
.contact-block p{margin:0 0 .5rem}

/* ---------- form ---------- */
.form-wrap{background:var(--paper-2); border:1px solid var(--line); border-radius:14px;
  padding:clamp(1.25rem,3vw,1.85rem)}
.form-wrap h2{font-size:1.5rem; margin-bottom:.4rem}
.form-wrap .desc{color:var(--ink-soft); font-size:.95rem}
label{display:block; font-family:var(--display); font-weight:700; font-size:.9rem;
  margin:1rem 0 .35rem}
label .opt{font-weight:500; color:var(--ink-soft)}
input[type=text],input[type=email],input[type=tel],textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:10px;
  padding:.65rem .8rem;
}
input:focus,textarea:focus{border-color:var(--mint-deep); outline:none}
textarea{resize:vertical}
.form-wrap .btn{margin-top:1.25rem}
.hp{position:absolute; left:-9999px}   /* honeypot anti-spam */

/* ---------- footer ---------- */
.site-foot{background:var(--ink); color:var(--paper); padding-block:clamp(2.5rem,5vw,4rem)}
.foot-in{display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.site-foot a{color:var(--mint)}
.foot-block h3{font-size:.92rem; color:var(--mint); margin-bottom:.55rem}
.foot-block p{font-size:1rem; margin-bottom:.4rem; color:#DDE4DF}
.foot-note{margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid rgba(244,244,239,.18);
  font-size:.88rem; color:#A9B7AF; display:flex; flex-wrap:wrap; gap:.75rem 1.5rem;
  justify-content:space-between}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn:hover{transform:none}
}

/* ---------- produse fără poză ---------- */
.shot-name{display:grid; place-items:center; text-align:center; padding:1rem;
  background:var(--mint-pale)}
.shot-name span{font-family:var(--display); font-weight:700; font-size:1.05rem;
  color:var(--mint-deep); line-height:1.2}
.card:nth-child(even) .shot-name{background:var(--rose-pale)}
.card:nth-child(even) .shot-name span{color:var(--rose-deep)}

/* ---------- galerie ---------- */
.gal{display:grid; gap:.9rem; grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.tile{aspect-ratio:4/5; border-radius:12px; margin:0; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.tile figcaption{position:relative; padding:2.5rem .9rem .8rem; width:100%; color:#fff;
  font-family:var(--display); font-weight:700; font-size:.95rem;
  background:linear-gradient(transparent, rgba(32,48,42,.72))}

/* ---------- sortimente ---------- */
.variants{display:flex; flex-wrap:wrap; gap:.35rem; margin:0 0 .9rem}
.variant{
  font-family:var(--display); font-weight:500; font-size:.82rem; cursor:pointer;
  padding:.28rem .6rem; border-radius:999px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink-soft); transition:all .15s ease;
}
.variant:hover{border-color:var(--mint-deep); color:var(--ink)}
.variant.on{background:var(--mint-deep); border-color:var(--mint-deep); color:#fff; font-weight:700}

/* ---------- torturi la comandă ---------- */
.torturi{background:var(--mint-pale); border-radius:14px; padding:clamp(1.25rem,3vw,2rem)}
.torturi .lede{color:var(--ink); max-width:44em}
.torturi-note{font-family:var(--display); font-weight:500; font-size:.92rem;
  color:var(--ink-soft); margin:1.5rem 0 .9rem}
.gal-torturi{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.gal-torturi .tile{aspect-ratio:1/1}
.torturi-foot{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:1.5rem}

/* plăci fără text dedesubt (exemple de torturi, candy bar) */
.tile.plain{aspect-ratio:1/1}

/* ---------- imaginea principală cu buton peste ea ---------- */
.hero-media{position:relative; border-radius:16px; overflow:hidden}
.hero-media img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.hero-cta{position:absolute; left:1rem; bottom:1rem; box-shadow:0 6px 20px rgba(32,48,42,.35)}
@media (min-width:880px){ .hero-cta{left:1.5rem; bottom:1.5rem} }
.map-link{margin:-1rem 0 1.75rem; font-family:var(--display); font-weight:500; font-size:.92rem}
.map-link a{color:var(--mint-deep)}