/*
 * Winkelwagen — Wietzadenshop
 * ----------------------------------------
 * Bron: docs/design/wietzadenshop-winkelwagen.html
 *
 * Links de productregels, rechts een meescrollend overzicht. De paginakop, de
 * aantal-stepper en de overzichtskaart (.summary) staan in shop.css — die
 * gebruikt de afrekenpagina ook.
 */

/* ----------------------------------------
 * LAYOUT
 * ---------------------------------------- */

.cart-wrap {
  padding: 26px 0 90px;
}

.cart-layout {
  display:               grid;
  grid-template-columns: 1fr 384px;
  gap:                   44px;
  align-items:           start;
}

/* ----------------------------------------
 * GRATIS-VERZENDINGSBALK
 * ---------------------------------------- */

.verzendbalk {
  margin-bottom:    22px;
  padding:          16px 20px;
  background-color: var(--color-card-lite);
  border:           1px solid var(--color-line-lite);
  border-radius:    12px;
}

.verzendbalk__tekst {
  margin-bottom: var(--space-3);
  font-size:     var(--text-sm);
  color:         var(--color-text-muted-lite);
}

.verzendbalk__tekst b {
  font-weight: var(--font-semibold);
  color:       var(--color-text-lite);
}

.verzendbalk__spoor {
  height:           7px;
  overflow:         hidden;
  background-color: var(--color-line-lite);
  border-radius:    var(--radius-full);
}

.verzendbalk__vulling {
  display:          block;
  width:            var(--verzendbalk-vulling, 0);
  height:           100%;
  background-color: var(--color-primary);
  border-radius:    var(--radius-full);
  transition:       width var(--transition-base);
}

/* ----------------------------------------
 * REGELS
 * ---------------------------------------- */

.cart-item {
  display:               grid;
  grid-template-columns: 96px 1fr auto;
  gap:                   var(--space-5);
  align-items:           center;
  padding:               22px 0;
  border-bottom:         1px solid var(--color-line-lite);
}

.cart-item__thumb {
  width:            96px;
  height:           96px;
  overflow:         hidden;
  background-color: var(--color-surface-lite);
  border:           1px solid var(--color-line-lite);
  border-radius:    var(--radius-card);
}

.cart-item__thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.cart-item__title {
  margin-bottom:  var(--space-1);
  font-family:    var(--font-heading);
  font-weight:    var(--font-bold);
  font-size:      19px;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.cart-item__title a {
  color:           var(--color-text-lite);
  text-decoration: none;
}

.cart-item__meta {
  margin-bottom: var(--space-1);
  font-size:     13.5px;
  color:         var(--color-text-muted-lite);
}

.cart-item__gratis {
  display:          inline-block;
  margin-bottom:    var(--space-3);
  padding:          3px 8px;
  background-color: var(--color-primary-soft);
  color:            var(--color-primary-dark);
  border-radius:    var(--radius-full);
  font-family:      var(--font-heading);
  font-weight:      var(--font-bold);
  font-size:        var(--text-2xs);
  letter-spacing:   var(--tracking-wider);
  text-transform:   uppercase;
}

.cart-item__remove {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  font-size:       13px;
  color:           var(--color-text-faint-lite);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.cart-item__remove:hover {
  color: #c0392b;
}

.cart-item__right {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            var(--space-3);
}

.cart-item__price {
  font-family: var(--font-heading);
  font-weight: var(--font-extrabold);
  font-size:   19px;
}

/* Compacte stepper in het mandje (de productpagina gebruikt de grote). */
.qty--klein {
  border-radius: var(--radius-md);
}

.qty--klein .qty__step {
  width:  38px;
  height: 42px;
  font-size: 18px;
}

.qty--klein .qty__input {
  width:  40px;
  height: 42px;
  font-size: 15px;
}

/* Met JavaScript dient cart.js het formulier zelf in. */
.js .cart-update {
  display: none;
}

.cart-update {
  padding-top: var(--space-6);
}

.cart-foot {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-top:     var(--space-6);
}

.cart-foot__verder {
  display:         inline-flex;
  align-items:     center;
  gap:             7px;
  font-size:       var(--text-sm);
  color:           var(--color-text-muted-lite);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.cart-foot__verder:hover {
  color: var(--color-primary-dark);
}

/* Tijdens het bijwerken blijven de oude regels staan, iets gedempt. */
[data-cart-content].is-laden,
[data-cart-summary].is-laden {
  opacity:        0.45;
  transition:     opacity var(--transition-fast);
  pointer-events: none;
}

/* ----------------------------------------
 * LEEG MANDJE
 * ---------------------------------------- */

.cart-leeg {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--space-6);
  padding:        40px 0 120px;
}

.cart-leeg__tekst {
  font-size: var(--text-md);
  color:     var(--color-text-muted-lite);
}

/* ----------------------------------------
 * RESPONSIVE
 * ---------------------------------------- */

@media (max-width: 960px) {

  .cart-layout {
    grid-template-columns: 1fr;
    gap:                   30px;
  }
}

@media (max-width: 560px) {

  .cart-item {
    grid-template-columns: 72px 1fr;
    gap:                   14px;
  }

  .cart-item__thumb {
    width:  72px;
    height: 72px;
  }

  .cart-item__right {
    grid-column:     1 / -1;
    flex-direction:  row;
    align-items:     center;
    justify-content: space-between;
  }
}