/* Prototype-like cart styling (scoped to /winkelwagen) */

#cart .catalog{ display:grid; grid-template-columns: 1fr; gap: 24px; }

/* At wider viewports, cart becomes 3 columns: filter/sort, list, totals */
@media (min-width: 640px){
  #cart .catalog{ grid-template-columns: 280px 1fr 360px; align-items:start; }
}

/* Sort fieldset in cart */
#cart fieldset.catalog-sort{ border:0; padding:0; margin:0 0 16px; display:flex; align-items:center; gap:10px; }
#cart fieldset.catalog-sort label{ font-weight:600; }
#cart fieldset.catalog-sort select{ width: 100%; box-sizing:border-box; padding:10px 12px; border-radius: 10px; border:1px solid rgba(0,0,0,.15); background:#fff; }

/* Totals sticky */
#cart-totals{ position: sticky; top: 2rem; height: 100%; }
#cart-totals > div{ padding:1rem; border:1px solid #000; width:100%; }

/* Reuse product card styles on cart page */
#cart .padding-0{ padding:0; }
#cart .small{ font-size:16px; }
#cart .bullet-separator{ list-style:none; }
#cart .bullet-separator li{ padding-inline-end: .5rem; }
#cart .bullet-separator li + li{ list-style: disc; }
#cart .bullet-separator li + li::marker{ color:#ccc; }

#cart .product-list{ display:flex; flex:1; flex-direction:column; }
#cart .product-list > form > ul{
  display:flex;
  flex-direction:column;
  padding-inline-start:0;
  gap:2rem;
}

#cart .product-list-item{
  display:flex;
  flex-direction:column;
  gap:1rem;
  word-break:break-all;
  justify-content:space-between;
}
#cart .product-list-item + .product-list-item{ border-top: 1px solid rgba(0,0,0,.2); padding-block-start: 2rem; }

#cart .product-list-item > div{ display:flex; flex-direction:column; gap:1rem; }
#cart .product-list-item .image{ display:flex; width: 140px; height: 140px; border:1px solid rgba(0,0,0,.15); border-radius: 12px; overflow:hidden; }
#cart .product-list-item .image img{ width:100%; height:100%; object-fit:contain; }

#cart .product-list-item .name{ font-size:18px; font-weight:600; text-decoration:none; color:inherit; }
#cart .product-list-item .pricing{ display:flex; align-items:center; gap: 10px; }
#cart .product-list-item .price{ font-size:28px; font-weight:600; }
#cart .product-list-item .price .decimals{ font-size: 18px; position: relative; top: -6px; }
#cart .product-list-item .price .decimals-separator{ position: relative; top: -6px; }
#cart .product-list-item .price-before{ background: linear-gradient(to left top, transparent 47.75%, currentColor 49.5%, currentColor 50.5%, transparent 52.25%); color:#767676; margin-right: .5rem; }

#cart .product-list-item .cart{ display:flex; align-items:center; gap: 10px; justify-content:flex-end; }
#cart .product-list-item .quantity input{ width: 70px; padding: 10px; border-radius: 10px; border:1px solid rgba(0,0,0,.15); }
#cart .product-list-item .button-cart{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius: 12px; border:1px solid rgba(0,0,0,.15); background: transparent; text-decoration:none; font-size:24px; line-height:1; }

/* Wider cards (row layout) */
@media (min-width: 640px){
  #cart .product-list-item{ flex-direction:row; }
  #cart .product-list-item > div{ flex:1; flex-direction:row; justify-content:space-between; gap: 1.5rem; }
  #cart .product-list-item .info{ flex: 1; }
}

/* Cart pagination */
#cart .vr-pagination{ display:flex; justify-content:center; margin: 24px 0 8px; }
#cart .vr-pagination ul{ list-style:none; display:flex; gap:8px; padding:0; margin:0; }
#cart .vr-pagination a, #cart .vr-pagination span{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 12px; border-radius:999px; border:1px solid rgba(0,0,0,.2); text-decoration:none; }
#cart .vr-pagination .current{ background: rgba(0,0,0,.06); }