/* Komponent: cart — 20-storefront.md § 2.5 */

.cart-page{ padding-bottom:var(--sp-7); }
.cart-layout{ display:grid; grid-template-columns:1fr 340px; gap:var(--sp-6); align-items:start; }

.cart-items{ overflow-x:auto; }
.ci-prod{ display:flex; align-items:center; gap:12px; }
.ci-prod img{ width:56px; height:56px; object-fit:cover; border-radius:var(--r-sm); }
.ci-prod strong{ display:block; font-family:var(--font-display); font-size:17px; }
.ci-prod small{ color:var(--muted); }
.ci-remove{ background:transparent; color:var(--muted); padding:6px; }
.ci-remove:hover{ color:var(--rosso); }

.cart-items .stepper{ display:inline-flex; align-items:center; border:1px solid var(--line-strong); border-radius:var(--r-sm); }
.cart-items .stepper button{ width:34px; height:38px; background:transparent; font-size:16px; color:var(--espresso); }
.cart-items .step-qty{ width:46px; height:38px; text-align:center; border:none; border-left:1px solid var(--line); border-right:1px solid var(--line); background:transparent; }

.cart-summary{ position:sticky; top:104px; }
.cart-summary h3{ font-size:22px; margin-bottom:var(--sp-4); }
.cs-row{ display:flex; justify-content:space-between; padding:8px 0; font-size:15px; }
.cs-row.cs-total{ border-top:1px solid var(--line); margin-top:6px; padding-top:14px; font-size:18px; font-weight:var(--fw-medium); }
.cs-total span:last-child{ font-family:var(--font-display); color:var(--rosso); font-weight:var(--fw-semibold); }
.cs-hint{ font-size:13px; color:var(--crema); padding:4px 0 8px; }
.cs-coupon{ display:flex; gap:8px; margin:var(--sp-4) 0; }
.cs-coupon input{ flex:1; }
.cart-summary .btn-block{ margin-top:10px; }

@media (max-width:820px){ .cart-layout{ grid-template-columns:1fr; } .cart-summary{ position:static; } }

/* Redizajn 22 — košík ako karty na mobile (žiadny horizontálny scroll) */
@media (max-width:560px){
  .cart-items{ overflow-x:visible; }
  .cart-items table.data,
  .cart-items tbody,
  .cart-items tr,
  .cart-items td{ display:block; width:auto; }
  .cart-items thead{ display:none; }

  .cart-items tr{ position:relative; display:flex; flex-direction:column; gap:9px;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
    padding:14px; margin-bottom:12px; }
  .cart-items td{ border:none; padding:0; }
  .cart-items td:first-child{ padding-right:30px; }     /* miesto pre × */

  .cart-items td[data-label]{ display:flex; align-items:center; justify-content:space-between; }
  .cart-items td[data-label]::before{ content:attr(data-label); color:var(--muted); font-size:13px; }
  .cart-items td.num{ text-align:left; font-family:var(--font-display); font-weight:var(--fw-semibold); }
  .cart-items td[data-line-total]{ font-size:17px; color:var(--ink); }

  .cart-items td:last-child{ position:absolute; top:10px; right:8px; }
  .ci-prod strong{ font-size:16px; }
}