/* ═══════════════════════════════════════════════════════════════
   MAGAZIN + COȘ
   ═══════════════════════════════════════════════════════════════ */

/* ─────────── capul paginilor interioare ─────────── */

.page-head{ padding:calc(var(--head-h) + clamp(38px,6vw,74px)) 0 clamp(28px,4vw,48px); }
.page-head .eyebrow{ margin-bottom:14px; }
.page-head h1{ font-size:clamp(32px,5vw,64px); letter-spacing:-.024em; text-wrap:balance; }
.page-head .lede{ margin-top:clamp(16px,2vw,24px); max-width:62ch; }
.crumbs{ font-size:13px; color:var(--ink-3); margin:0 0 18px; }
.crumbs a{ text-decoration:none; }
.crumbs a:hover{ color:var(--cherry); }

/* ─────────── coșul din antet ─────────── */

.head-cart{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; font-size:13.5px; font-weight:600; letter-spacing:.03em;
  padding:9px 16px; box-shadow:inset 0 0 0 1px var(--line);
  transition:background .3s var(--ease);
}
.head-cart:hover{ background:rgba(23,21,15,.05); }
.head-cart b{
  display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 5px;
  background:var(--cherry); color:var(--paper);
  font-size:11px; font-weight:700; border-radius:100px;
}
.head-cart[data-empty="1"] b{ display:none; }

/* ─────────── bara de filtre ─────────── */

.filters{
  position:sticky; top:var(--head-h); z-index:40;
  background:var(--paper); border-block:1px solid var(--line);
  padding:14px 0;
}
.filters .wrap{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.chips{
  display:flex; gap:8px; overflow-x:auto; flex:1 1 340px; min-width:0;
  scrollbar-width:none; padding-bottom:2px;
}
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; background:none; cursor:pointer; font:inherit;
  font-size:13.5px; font-weight:500; color:var(--ink-2);
  padding:8px 15px; border:1px solid var(--line); border-radius:100px;
  white-space:nowrap; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s;
}
.chip:hover{ border-color:var(--ink-3); }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.chip small{ opacity:.55; margin-left:5px; font-size:11.5px; }

.f-right{ display:flex; gap:10px; align-items:center; flex:none; }
.search{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); padding:8px 14px; min-width:190px;
}
.search input{
  border:0; background:none; font:inherit; font-size:14px; width:100%;
  color:var(--ink); outline:none;
}
.search input::placeholder{ color:var(--ink-3); }
.sortbox select{
  font:inherit; font-size:14px; color:var(--ink);
  border:1px solid var(--line); background:var(--paper);
  padding:9px 12px; cursor:pointer;
}

.count-line{ margin:clamp(22px,3vw,34px) 0 clamp(18px,2.4vw,26px); font-size:14px; color:var(--ink-3); }

/* ─────────── grila de produse ─────────── */

.grid{
  display:grid; gap:clamp(14px,2vw,26px);
  grid-template-columns:repeat(4, minmax(0, 1fr));
}
.card{
  min-width:0;                 /* fără asta o singură celulă lungă lățește toată coloana */
  display:flex; flex-direction:column;
}
.card figure{
  margin:0 0 14px; aspect-ratio:1/1; overflow:hidden; background:var(--paper-2);
}
.card figure img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.card:hover figure img{ transform:scale(1.04); }
.card h3{
  font-size:clamp(16px,1.25vw,18.5px); line-height:1.22; margin:0 0 6px;
  overflow-wrap:anywhere;      /* denumirile lor au și 90 de caractere */
}
.card h3 a{ text-decoration:none; }
.card h3 a:hover{ color:var(--cherry); }
.card .desc{
  margin:0 0 12px; font-size:13.5px; line-height:1.5; color:var(--ink-2); font-weight:300;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-jos{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.card .pretul{ font-size:15px; font-weight:600; letter-spacing:.01em; min-width:0; overflow-wrap:anywhere; }
.card .pretul small{ display:block; font-size:11px; font-weight:500; color:var(--ink-3); letter-spacing:.02em; }
.add{
  flex:none; cursor:pointer; font:inherit; font-size:13px; font-weight:600;
  padding:10px 15px; border:0; background:var(--ink); color:var(--paper);
  transition:background .25s var(--ease);
}
.add:hover{ background:var(--cherry); }
.add.ok{ background:var(--cherry); }
.card.epuizat .add{ background:var(--paper-2); color:var(--ink-3); cursor:not-allowed; }

.gol{ padding:clamp(40px,7vw,90px) 0; text-align:center; color:var(--ink-2); }
.gol h3{ margin-bottom:10px; }

.more{
  display:block; margin:clamp(32px,4vw,56px) auto 0;
  cursor:pointer; font:inherit; font-size:14.5px; font-weight:600;
  padding:15px 34px; background:none; color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:background .3s var(--ease);
}
.more:hover{ background:rgba(23,21,15,.05); }

/* ─────────── sertarul cu coșul ─────────── */

.drawer-bg{
  position:fixed; inset:0; z-index:98; background:rgba(14,12,10,.42);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility 0s .4s;
}
.drawer-bg.on{ opacity:1; visibility:visible; transition:opacity .4s var(--ease), visibility 0s; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:99;
  width:min(430px, 92vw); background:var(--paper);
  display:flex; flex-direction:column;
  transform:translateX(101%); transition:transform .45s var(--ease);
  box-shadow:-14px 0 50px rgba(14,12,10,.16);
}
.drawer.on{ transform:none; }
.drawer-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(18px,3vw,28px); border-bottom:1px solid var(--line);
}
.drawer-top h2{ font-size:23px; }
.x{
  background:none; border:0; cursor:pointer; font-size:22px; line-height:1;
  color:var(--ink-2); padding:6px 8px;
}
.x:hover{ color:var(--cherry); }
.drawer-body{ flex:1; overflow-y:auto; padding:clamp(14px,2.4vw,22px) clamp(18px,3vw,28px); }
.drawer-foot{ border-top:1px solid var(--line); padding:clamp(18px,2.6vw,24px) clamp(18px,3vw,28px); }

.line{
  display:grid; grid-template-columns:66px 1fr auto; gap:14px; align-items:center;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.line:last-child{ border-bottom:0; }
.line img{ width:66px; height:66px; object-fit:cover; background:var(--paper-2); }
.line .nume{ font-size:14.5px; line-height:1.32; margin:0 0 8px; min-width:0; overflow-wrap:anywhere; }
.line .pret-mic{ font-size:13px; color:var(--ink-3); }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line); }
.qty button{
  background:none; border:0; cursor:pointer; font:inherit; font-size:15px;
  width:28px; height:28px; color:var(--ink-2);
}
.qty button:hover{ color:var(--cherry); }
.qty span{ min-width:26px; text-align:center; font-size:14px; font-weight:600; }
.line .sub{ font-size:14.5px; font-weight:600; text-align:right; white-space:nowrap; }
.line .del{ display:block; margin-top:6px; background:none; border:0; cursor:pointer;
            font:inherit; font-size:12px; color:var(--ink-3); text-decoration:underline; }
.line .del:hover{ color:var(--cherry); }

.total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; }
.total span{ font-size:14px; color:var(--ink-2); }
.total b{ font-family:"Fraunces",Georgia,serif; font-weight:400; font-size:27px; }
.btn-full{
  display:block; width:100%; text-align:center; text-decoration:none;
  font-size:15px; font-weight:600; padding:16px; background:var(--cherry); color:var(--paper);
  border:0; cursor:pointer; font-family:inherit;
  transition:background .3s var(--ease);
}
.btn-full:hover{ background:#8c1319; }
.drawer .nota{ margin:14px 0 0; font-size:12.5px; line-height:1.5; color:var(--ink-3); }

.toast{
  position:fixed; left:50%; bottom:26px; z-index:110; transform:translate(-50%, 18px);
  background:var(--ink); color:var(--paper); padding:13px 22px; font-size:14px;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
}
.toast.on{ opacity:1; visibility:visible; transform:translate(-50%, 0); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s; }

/* ─────────── coș / finalizare ─────────── */

.co-grid{ display:grid; grid-template-columns:1.45fr .8fr; gap:clamp(28px,4vw,64px); align-items:start; }
.pas{ border-top:1px solid var(--line); padding:clamp(22px,3vw,32px) 0; }
.pas:first-child{ border-top:0; padding-top:0; }
.pas h2{ font-size:clamp(20px,1.8vw,25px); display:flex; align-items:center; gap:13px; margin-bottom:18px; }
.pas h2 i{
  font-style:normal; display:inline-grid; place-items:center; width:29px; height:29px;
  border:1px solid var(--line); font-family:"Archivo",sans-serif; font-size:13px; font-weight:600;
  color:var(--ink-2); flex:none;
}
.optiuni{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:10px; }
.opt{
  text-align:left; cursor:pointer; font:inherit; background:var(--paper);
  border:1px solid var(--line); padding:15px 17px;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.opt:hover{ border-color:var(--ink-3); }
.opt[aria-pressed="true"]{ border-color:var(--ink); background:rgba(23,21,15,.04); }
.opt strong{ display:block; font-size:15px; margin-bottom:4px; }
.opt small{ display:block; font-size:12.5px; color:var(--ink-2); line-height:1.45; }

.chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
.zi, .ora{
  cursor:pointer; font:inherit; font-size:13.5px; background:none;
  border:1px solid var(--line); padding:9px 14px; color:var(--ink-2);
  transition:background .25s var(--ease), color .25s, border-color .25s;
}
.zi[aria-pressed="true"], .ora[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.zi small{ display:block; font-size:11px; opacity:.6; }
.eticheta{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 10px; }

.campuri{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.campuri label{ display:block; }
.campuri label.lat{ grid-column:1 / -1; }
.campuri span{ display:block; font-size:12.5px; font-weight:600; margin-bottom:7px; color:var(--ink-2); }
.campuri input, .campuri textarea{
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  border:1px solid var(--line); background:var(--paper); padding:12px 14px;
}
.campuri textarea{ min-height:88px; resize:vertical; }
.campuri input:focus, .campuri textarea:focus{ outline:none; border-color:var(--ink); }
.campuri input:user-invalid{ border-color:var(--cherry); }
.oblig{ color:var(--cherry); }
.gdpr{ display:flex; gap:11px; align-items:flex-start; margin-top:18px; font-size:13.5px; color:var(--ink-2); }
.gdpr input{ margin-top:3px; flex:none; }

.sumar{ position:sticky; top:calc(var(--head-h) + 24px); border:1px solid var(--line); padding:clamp(20px,2.6vw,28px); }
.sumar h3{ font-size:20px; margin-bottom:16px; }
.sumar .rand{ display:flex; justify-content:space-between; gap:14px; font-size:14px; padding:7px 0; color:var(--ink-2); }
.sumar .rand span:first-child{ min-width:0; overflow-wrap:anywhere; }
.sumar .rand b{ white-space:nowrap; }
.sumar .tot{ display:flex; justify-content:space-between; align-items:baseline;
             border-top:1px solid var(--line); margin-top:14px; padding-top:16px; }
.sumar .tot b{ font-family:"Fraunces",Georgia,serif; font-weight:400; font-size:26px; }

.gata{ text-align:center; padding:clamp(30px,5vw,60px) 0; }
.gata .bifa{ width:62px; height:62px; margin:0 auto 22px; display:grid; place-items:center;
             border-radius:50%; background:var(--cherry); color:var(--paper); font-size:27px; }
.gata h2{ margin-bottom:14px; }
.recap{ text-align:left; max-width:520px; margin:26px auto 0; border:1px solid var(--line); padding:22px; }
.recap div{ display:flex; justify-content:space-between; gap:16px; padding:7px 0; font-size:14.5px; }
.recap div b{ text-align:right; }

/* ─────────── telefon ─────────── */

@media (max-width:1100px){ .grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:820px){
  .grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .co-grid{ grid-template-columns:1fr; }
  .sumar{ position:static; }
  .filters .wrap{ gap:10px; }
  .f-right{ width:100%; }
  .search{ flex:1; min-width:0; }
  .head-cart{ padding:8px 12px; font-size:12.5px; }
}
@media (max-width:520px){
  .campuri{ grid-template-columns:1fr; }
  .card-jos{ flex-wrap:wrap; }
  .add{ width:100%; }
}

/* trei carduri de mod de livrare — grilă proprie, care chiar colapsează
   pe telefon; `.cats` are `repeat(4,1fr)` cu media query, iar un
   `grid-template-columns` inline îl bate și lasă trei coloane la 390 px */
.moduri-3{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.mod-card{ background:var(--paper); padding:clamp(22px,3vw,36px); min-width:0; }
.mod-card p{ margin:12px 0 0; color:var(--ink-2); font-size:15px; line-height:1.6; }
@media (max-width:900px){ .moduri-3{ grid-template-columns:1fr; } }