.cart-wrap { padding-top: 24px; }
.cart-cols { display: grid; grid-template-columns: 1fr 330px; gap: 30px; align-items: start; }
/* the price column is minmax, not auto: as an auto column it grew with the amount
   (47 -> 75px from 17,10 to 1330,00 €) and dragged the qty input sideways on every
   edit. 100px holds any realistic line total, so small changes move nothing. */
.cl { display: grid; grid-template-columns: 64px 1fr 90px minmax(100px, auto) 34px; gap: 14px;
  align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cl img, .cl-ph, .cl-thumb { width: 64px; height: 64px; object-fit: contain; background: var(--bg-soft); border-radius: 8px; }
.cl-thumb { flex: none; display: block; overflow: hidden; }
.cl-thumb img { width: 100%; height: 100%; }
.cl-name { font-weight: 600; color: var(--navy); }
.cl-meta { font-size: .85em; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.cl-bo { color: var(--warn); font-size: .83em; margin-top: 4px; }
.cl-ok { color: var(--ok); font-size: .83em; margin-top: 4px; }
.cl-qty .qty { height: 34px; }
.cl-qty .qty input[type=number] { width: 44px; }
.cl-price { text-align: right; }
.cart-side { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; position: sticky; top: 80px; }
.sumry { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0 0 14px; }
.sumry dt { color: var(--muted); } .sumry dd { margin: 0; text-align: right; font-weight: 600; color: var(--navy); }
.sum-total { font-size: 1.12em; font-weight: 700; color: var(--navy) !important; border-top: 1px solid var(--line); padding-top: 8px; }
.btn-full { width: 100%; }
.cart-back { display: block; text-align: center; margin-top: 10px; font-size: .9em; }
@media (max-width: 820px) {
  .cart-cols { grid-template-columns: 1fr; }
  .cl { grid-template-columns: 54px 1fr 74px auto 30px; gap: 8px; }
}


/* Cart grouped by style, then by unit price. The style heading carries the name
   and its running total; a price sub-head only appears when a style actually has
   more than one price (2XL+, outlet colours), so simple carts stay flat-looking. */
.cg { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; }
.cg-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.cg-title { min-width: 0; flex: 1; }
.cg-sum { font-size: .88em; color: var(--muted); margin-top: 2px; }
.cg-tier { margin-top: 8px; }
.cg-tier-head { display: flex; align-items: baseline; gap: 6px; font-size: .88em;
  padding: 5px 0 3px; border-top: 1px dashed var(--line); }
/* the 64px thumbnail column moved up to the style header, so variant rows drop it */
.cg .cl { grid-template-columns: 1fr 90px minmax(100px, auto) 34px; padding: 10px 0; }
.cg-tier .cl { padding-left: 2px; }
.cg .cl { border-bottom: 1px solid var(--line); }
.cg .cl:last-child { border-bottom: 0; }