.sectiune-cos { padding: var(--sp-5) 0 var(--sectiune); }
.sectiune-cos h1 { font-size: var(--s30); margin-bottom: var(--sp-4); }
.cos-gol { padding: var(--sp-6) 0; display: grid; gap: var(--sp-4); justify-items: start; }
.cos-gol[hidden], .cos-grila[hidden], .dupa-comanda[hidden], [data-campuri-firma][hidden] { display: none; }
.cos-grila { display: grid; gap: var(--sp-6); align-items: start; }

.lista-cos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.linie-cos { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-4); align-items: center; padding: var(--sp-3); background: var(--fundal-alt);
  border: 1px solid var(--linie); border-radius: var(--raza); }
.linie-cos img, .fara-img { width: 96px; height: 72px; object-fit: contain; background: #FFFFFF; border-radius: var(--raza); }
.linie-info { display: grid; gap: var(--sp-1); }
.linie-info span { font-weight: 700; }
.scoate-cos { justify-self: start; min-height: 44px; border: 0; background: none; padding: 0; color: var(--secundar); text-decoration: underline; text-underline-offset: 4px; font: inherit; font-size: var(--s14); cursor: pointer; }
.lista-cos.mica .linie-cos { grid-template-columns: 64px 1fr; padding: var(--sp-2); }
.lista-cos.mica img, .lista-cos.mica .fara-img { width: 64px; height: 48px; }

.sumar { background: var(--fundal-alt); border: 1px solid var(--linie); border-radius: var(--raza); padding: var(--sp-5); display: grid; gap: var(--sp-4); }
.sumar h2 { font-size: var(--s24); }
.sumar-linii { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-4); margin: 0; font-size: var(--s14); }
.sumar-linii dt { color: var(--secundar); }
.sumar-linii dd { margin: 0; text-align: right; font-weight: 700; }
.sumar-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); margin: 0; padding-top: var(--sp-3); border-top: 1px solid var(--linie); }
.sumar-total strong { font-size: var(--s24); }
.sumar .btn { width: 100%; }
.sumar .mic, .pasi-comanda .mic { margin: 0; font-size: var(--s14); color: var(--secundar); }
.liniste { list-style: none; margin: 0; padding: var(--sp-3) 0 0; border-top: 1px solid var(--linie); display: grid; gap: var(--sp-2); font-size: var(--s14); color: var(--secundar); }
.liniste a { font-weight: 700; color: var(--text); }


.pasi-comanda { display: grid; gap: var(--sp-5); }
.pas { border: 1px solid var(--linie); border-radius: var(--raza); background: var(--fundal-alt); margin: 0; padding: var(--sp-5); display: grid; gap: var(--sp-4); }
.pas legend { display: flex; align-items: center; gap: var(--sp-3); font-family: "Gilda Display", Georgia, serif; font-size: var(--s24); padding: 0 var(--sp-2); }   
.pas .nr { width: 32px; height: 32px; border-radius: 50%; background: var(--petrol); color: #FFFFFF; display: grid; place-items: center; font: 700 var(--s14)/1 "Lato", system-ui, sans-serif; }
.pas label { display: grid; gap: var(--sp-1); font-size: var(--s14); }
.pas .camp { font-size: var(--s16); }
.doua { display: grid; gap: var(--sp-4); }
.zona { display: grid; gap: var(--sp-3); }
.optiune-zona { position: relative; cursor: pointer; }
.optiune-zona input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.optiune-zona span { display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); border: 1px solid #8A857E; border-radius: var(--raza); background: #FFFFFF; color: var(--secundar); }
.optiune-zona strong { color: var(--text); font-size: var(--s16); }
.optiune-zona input:checked + span { border-color: var(--petrol); box-shadow: inset 0 0 0 1px var(--petrol); }
.optiune-zona input:focus-visible + span { outline: 3px solid var(--auriu); outline-offset: 2px; }
.bifa { display: flex !important; grid-template-columns: none; gap: var(--sp-3); align-items: flex-start; font-size: var(--s14); cursor: pointer; }
.bifa input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--petrol); }
.bifa a { color: var(--text); font-weight: 700; }
.dupa-comanda { display: grid; gap: var(--sp-3); justify-items: start; padding: var(--sp-6) 0; }
.dupa-comanda h2 { font-size: var(--s30); }
.dupa-comanda h2:focus { outline: none; }

@media (min-width: 640px) {
  .doua { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .sectiune-cos h1 { font-size: var(--s38); }
  .cos-grila { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-7); }
  .sumar { position: sticky; top: calc(var(--antet-h) + var(--sp-4)); }
}


.pas, .pasi-comanda, .sumar, .cos-grila > * { min-width: 0; }


.btn-final { width: 100%; padding: 0 var(--sp-3); letter-spacing: .02em; text-wrap: balance; }
.btn-lung { text-wrap: balance; }