/* ==========================================================================
   GALAXY GADGETZ · winkelmand.html  (selectors beginnen met .cart)
   ========================================================================== */

/* ---- kop ---- */
.cart-top { padding-top: 16px; padding-bottom: 8px; }
.cart-top__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin-top: 12px; }
.cart-top__title { font-size: var(--gg-fs-2xl); letter-spacing: var(--gg-ls-heading); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cart-top__title:focus { outline: none; }
.cart-top__count { font-family: var(--gg-mono); font-size: var(--gg-fs-sm); font-weight: 500; letter-spacing: 0; color: var(--gg-muted); }
.cart-top__back { min-height: var(--gg-tap); }
@media (min-width: 900px) { .cart-top { padding-top: 28px; padding-bottom: 16px; } .cart-top__row { margin-top: 20px; } }

/* ---- layout: regels links, overzicht rechts (sticky) ---- */
.cart-layout { display: grid; gap: 32px; padding-block: 16px 48px; align-items: start; }
.cart-layout[hidden] { display: none; }
.cart-main { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 900px) { .cart-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; padding-block: 16px 72px; } }
@media (min-width: 1200px) { .cart-layout { grid-template-columns: minmax(0, 1fr) 400px; gap: 64px; } }

.cart-threshold { padding: 16px 18px; border-radius: var(--gg-r-lg); background: var(--gg-surface); }
.cart-threshold[hidden] { display: none; }
.cart-notice { margin: 0; }

/* ---- zending (per leverroute) ---- */
.cart-ships { display: grid; gap: 16px; }
.cart-ship { border: 1px solid var(--gg-line); border-radius: var(--gg-r-xl); background: var(--gg-paper); overflow: hidden; }
.cart-ship__head { display: grid; gap: 4px; padding: 16px 16px 14px; background: var(--gg-surface); border-bottom: 1px solid var(--gg-line); }
.cart-ship__kicker { font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); font-weight: 500; letter-spacing: var(--gg-ls-caps); text-transform: uppercase; color: var(--gg-muted); }
.cart-ship__title { display: flex; align-items: center; gap: 8px; font-size: var(--gg-fs-base); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.cart-ship__title .gg-icon { color: var(--gg-ink); }
.cart-ship--nl .cart-ship__title .gg-icon { color: var(--gg-success); }
.cart-ship--eu .cart-ship__title .gg-icon { color: var(--gg-info); }
.cart-ship__when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--gg-fs-sm); color: var(--gg-ink); font-weight: 500; }
.cart-ship__days { font-family: var(--gg-mono); font-size: var(--gg-fs-xs); font-weight: 600; padding: 2px 8px; border-radius: var(--gg-r-xs); background: var(--gg-paper); border: 1px solid var(--gg-line-strong); }
.cart-ship__note { font-size: var(--gg-fs-xs); color: var(--gg-muted); line-height: 1.45; }
.cart-ship .cart-ship__lines { padding-inline: 16px; }
.cart-ship .gg-line-item .gg-delivery--compact { display: none; } /* route staat al in de zendingkop */
.cart-ship__lines > li:last-child { border-bottom: 0; }
@media (min-width: 600px) {
  .cart-ship__head { grid-template-columns: 1fr auto; padding: 18px 24px 16px; column-gap: 24px; }
  .cart-ship__kicker, .cart-ship__title, .cart-ship__note { grid-column: 1; }
  .cart-ship__when { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; text-align: right; align-self: center; }
  .cart-ship .cart-ship__lines { padding-inline: 24px; }
}

/* ---- regel ---- */
.cart .gg-line-item--lg { grid-template-columns: 88px 1fr; gap: 14px; }
.cart .gg-line-item--lg .gg-line-item__media { width: 88px; }
@media (min-width: 600px) {
  .cart .gg-line-item--lg { grid-template-columns: 112px 1fr; gap: 20px; }
  .cart .gg-line-item--lg .gg-line-item__media { width: 112px; }
}
.cart .gg-line-item__price { font-size: var(--gg-fs-base); }
.cart-line__unit { font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); color: var(--gg-muted); justify-self: end; margin-top: -2px; }
.cart .gg-line-item__remove { min-height: var(--gg-tap); }
.cart-line--out .gg-line-item__media img { filter: grayscale(.9); opacity: .65; }
.cart-line--out .gg-line-item__price { color: var(--gg-muted); font-weight: 500; }
.cart-line--out .gg-stepper { display: none; }
.cart-line--out .gg-line-item__bottom { justify-content: flex-end; }
.cart-line__error { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; padding: 10px 12px; border-radius: var(--gg-r-md); background: var(--gg-error-tint); color: var(--gg-ink); font-size: var(--gg-fs-xs); line-height: 1.45; }
.cart-line__error .gg-icon { color: var(--gg-error); margin-top: 1px; flex: 0 0 auto; }

/* ---- verwijderd: inline ongedaan maken ---- */
.cart-ghost { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--gg-line); animation: cart-ghost-in var(--gg-dur-3) var(--gg-ease); }
.cart-ghost__text { flex: 1 1 200px; display: flex; gap: 8px; align-items: center; font-size: var(--gg-fs-sm); color: var(--gg-ink-2); }
.cart-ghost__text .gg-icon { color: var(--gg-success); flex: 0 0 auto; }
.cart-ghost .gg-btn--sm { min-height: var(--gg-tap); }
.cart-ghost__close { width: var(--gg-tap); height: var(--gg-tap); }
@keyframes cart-ghost-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- overzicht ---- */
.cart-summary { display: grid; gap: 12px; }
@media (min-width: 900px) { .cart-summary { position: sticky; top: calc(var(--gg-header-h) + 24px); } }
.cart-summary__card { display: grid; gap: 16px; padding: 20px; border-radius: var(--gg-r-xl); border: 1px solid var(--gg-line); background: var(--gg-paper); box-shadow: var(--gg-shadow-2); }
@media (min-width: 600px) { .cart-summary__card { padding: 28px; } }
.cart-summary__title { font-size: var(--gg-fs-lg); letter-spacing: -0.015em; }
.cart-totals { gap: 10px; }
.cart-totals .gg-totals__row--total dd { font-size: var(--gg-fs-xl); letter-spacing: -0.02em; }
.cart-totals__n { color: var(--gg-muted); font-weight: 400; }
.cart-totals__free { color: var(--gg-success); font-weight: 600; }
.cart-totals__disc dd { color: var(--gg-success); font-weight: 600; }
.cart-totals__disc .gg-mono { font-size: var(--gg-fs-xs); padding: 1px 6px; border-radius: var(--gg-r-xs); background: var(--gg-success-tint); color: var(--gg-success); }
.cart-totals__hint { font-size: var(--gg-fs-xs); color: var(--gg-muted); margin-top: -4px; }
.cart-summary .gg-totals__vat { margin-top: -10px; }
.cart-summary__block[hidden] { display: none; }
.cart-summary__cta[aria-disabled="true"], .cart-bar .gg-btn[aria-disabled="true"] { --_bg: var(--gg-disabled-bg); --_bd: var(--gg-disabled-bg); --_fg: var(--gg-disabled-fg); cursor: not-allowed; }
.cart-assure { display: grid; gap: 10px; list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--gg-line); }
.cart-assure li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: var(--gg-fs-xs); color: var(--gg-muted); line-height: 1.5; }
.cart-assure .gg-icon { color: var(--gg-ink); margin-top: 1px; }
.cart-assure b { color: var(--gg-ink); font-weight: 600; }
.cart-summary__help { font-size: var(--gg-fs-xs); color: var(--gg-muted); text-align: center; }

/* ---- aanvullers ---- */
.cart-comp { background: var(--gg-surface); }
.cart-comp[hidden] { display: none; }
.cart-comp__item { display: grid; gap: 8px; align-content: start; min-width: 0; }
.cart-comp__fit { display: inline-flex; align-items: center; gap: 6px; font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); font-weight: 500; color: var(--gg-ink-2); min-width: 0; }
.cart-comp__fit span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-comp__fit .gg-icon { flex: 0 0 auto; color: var(--gg-pink); }

/* ---- lege staat ---- */
.cart-empty[hidden] { display: none; }
.cart-empty { padding-bottom: 48px; }
.cart-empty__ghost { max-width: 640px; margin: 8px auto 0; }
.cart-empty__ghost .cart-ghost { border: 1px solid var(--gg-line); border-radius: var(--gg-r-lg); padding: 10px 12px 10px 16px; }
.cart-empty__state { padding-block: 32px 40px; }
.cart-empty__state .gg-state__title { font-size: var(--gg-fs-xl); letter-spacing: -0.02em; }
.cart-empty__routes { padding-top: 32px; border-top: 1px solid var(--gg-line); margin-top: 8px; }
.cart-empty__routes + .cart-empty__routes { margin-top: 48px; }
.cart-empty__h { font-size: var(--gg-fs-lg); letter-spacing: -0.015em; margin-bottom: 16px; }
.cart-empty__head { margin-bottom: 16px; align-items: center; }
.cart-empty__head .cart-empty__h { margin-bottom: 0; }
.cart-empty__tiles { --gg-grid-gap: 12px; }
@media (min-width: 600px) and (max-width: 1199.98px) { .cart-empty__tiles--3 { --gg-cols: 3; } }
@media (min-width: 1200px) { .cart-empty__tiles--3 { --gg-cols: 3; } .cart-empty__tiles--2 { --gg-cols: 2; } }
@media (min-width: 900px) { .cart-empty { padding-bottom: 72px; } .cart-empty__routes { padding-top: 48px; } }

/* ---- vaste afrekenbalk mobiel ---- */
.cart-bar .gg-btn { min-height: var(--gg-tap); }
@media (max-width: 899.98px) { body.cart-page.has-buybar { padding-bottom: 76px; } }
@media (max-width: 599.98px) {
  .cart .gg-line-item--lg .gg-line-item__title { font-size: var(--gg-fs-sm); }
  .cart .gg-line-item__price { font-size: var(--gg-fs-sm); }
  .cart-line__unit { margin-top: -4px; }
}
.cart-ship--blocked .cart-ship__when, .cart-ship--blocked .cart-ship__note { display: none; }
.cart-ship--blocked .cart-ship__kicker { color: var(--gg-error); }
