/* ==========================================================================
   GALAXY GADGETZ · checkout.html  (selectors beginnen met .co)
   Afleidingsvrij: eigen rustige header en footer, formulier links, vast overzicht rechts.
   ========================================================================== */
.co-page { background: var(--gg-surface); }
[data-co-filled][hidden], [data-co-empty][hidden], .co-errors[hidden], .co-login[hidden], .co-manual[hidden], .co-billing__fields[hidden], .co-paying[hidden], .co-mobsum__panel[hidden] { display: none; }

/* ---- header ---- */
.co-header { background: var(--gg-paper); border-bottom: 1px solid var(--gg-line); }
.co-header__bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 16px; min-height: 64px; }
.co-header__brand { justify-self: start; }
.co-header__secure { display: none; align-items: center; gap: 8px; font-family: var(--gg-mono); font-size: var(--gg-fs-xs); font-weight: 500; color: var(--gg-ink-2); }
.co-header__secure .gg-icon { color: var(--gg-success); }
.co-header__back { min-height: var(--gg-tap); font-size: var(--gg-fs-sm); }
@media (min-width: 600px) { .co-header__bar { grid-template-columns: 1fr auto 1fr; min-height: 72px; } .co-header__secure { display: inline-flex; } .co-header__back { justify-self: end; } }

/* ---- kop ---- */
.co-top { padding-top: 16px; padding-bottom: 8px; }
.co-top__title { font-size: var(--gg-fs-2xl); letter-spacing: var(--gg-ls-heading); margin-top: 12px; }
.co-top__lead { color: var(--gg-muted); font-size: var(--gg-fs-sm); margin-top: 6px; max-width: 60ch; }
@media (min-width: 900px) { .co-top { padding-top: 28px; padding-bottom: 16px; } .co-top__title { margin-top: 20px; } }

.co-empty { padding-block: 24px 64px; }
.co-empty .gg-state { background: var(--gg-paper); }

/* ---- layout ---- */
.co-layout { display: grid; gap: 16px; padding-block: 8px 48px; align-items: start; }
@media (min-width: 900px) { .co-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; padding-block: 8px 72px; } }
@media (min-width: 1200px) { .co-layout { grid-template-columns: minmax(0, 720px) 420px; gap: 56px; justify-content: space-between; } }

.co-form { display: grid; gap: 16px; min-width: 0; }
.co-step { display: grid; gap: 20px; padding: 20px 16px 24px; background: var(--gg-paper); border: 1px solid var(--gg-line); border-radius: var(--gg-r-xl); min-width: 0; }
@media (min-width: 600px) { .co-step { padding: 28px 28px 32px; } }
.co-step__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.co-step__num { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--gg-ink); color: var(--gg-paper); font-family: var(--gg-mono); font-size: var(--gg-fs-xs); font-weight: 600; }
.co-step__title { font-size: var(--gg-fs-lg); letter-spacing: -0.015em; flex: 1; }
.co-step__aside { min-height: var(--gg-tap); font-size: var(--gg-fs-sm); }
@media (max-width: 599.98px) { .co-step__aside { flex-basis: 100%; justify-content: flex-start; margin: -8px 0 0 40px; } }

.co-grid { display: grid; gap: 16px; min-width: 0; }
.co-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 600px) { .co-grid--2 { grid-template-columns: 1fr 1fr; } }
.co-grid--addr { grid-template-columns: 1fr 1fr; }
.co-f-pc { grid-column: 1 / -1; }
@media (min-width: 600px) { .co-grid--addr { grid-template-columns: 1.4fr 1fr 1fr; } .co-f-pc { grid-column: auto; } }
.co-field--country { max-width: 320px; }

.co-login { display: grid; gap: 14px; padding: 16px; border-radius: var(--gg-r-lg); background: var(--gg-surface); }
.co-login__intro { font-size: var(--gg-fs-sm); color: var(--gg-muted); }
.co-login__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ---- adres + aanvulling ---- */
.co-address { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; min-width: 0; }
.co-address__legend { font-size: var(--gg-fs-sm); font-weight: 600; padding: 0; margin-bottom: 8px; }
.co-lookup { min-height: 24px; }
.co-lookup__hint { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; font-size: var(--gg-fs-xs); color: var(--gg-muted); line-height: 1.5; }
.co-lookup__hint .gg-icon { margin-top: 2px; flex: 0 0 auto; }
.co-lookup__btn { font-size: var(--gg-fs-xs); min-height: 24px; color: var(--gg-ink); }
.co-lookup__loading { min-height: 48px; }
.co-lookup__found { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; padding: 12px 8px 12px 16px; border-radius: var(--gg-r-md); background: var(--gg-success-tint); border: 1px solid var(--gg-success-line); font-size: var(--gg-fs-sm); line-height: 1.45; animation: co-in var(--gg-dur-3) var(--gg-ease); }
.co-lookup__found > .gg-icon { color: var(--gg-success); align-self: start; margin-top: 2px; }
.co-lookup__found .gg-btn--tertiary { min-height: var(--gg-tap); padding-inline: 8px; }
@keyframes co-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ---- bezorgopties per zending ---- */
.co-delivery { display: grid; gap: 16px; padding-top: 20px; border-top: 1px solid var(--gg-line); }
.co-delivery__title { font-size: var(--gg-fs-base); letter-spacing: -0.01em; }
.co-delivery__sub { font-size: var(--gg-fs-sm); color: var(--gg-muted); margin-top: 4px; }
.co-ship { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.co-ship__legend { display: grid; gap: 2px; padding: 0; margin-bottom: 10px; width: 100%; }
.co-ship__kicker { font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); letter-spacing: var(--gg-ls-caps); text-transform: uppercase; color: var(--gg-muted); }
.co-ship__route { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; font-size: var(--gg-fs-sm); }
.co-ship--nl .co-ship__route .gg-icon { color: var(--gg-success); }
.co-ship--eu .co-ship__route .gg-icon { color: var(--gg-info); }
.co-ship__days { font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); font-weight: 600; padding: 2px 6px; border: 1px solid var(--gg-line-strong); border-radius: var(--gg-r-xs); }
.co-ship__items { font-size: var(--gg-fs-xs); color: var(--gg-muted); }
.co-ship__choices { display: grid; gap: 8px; }
.co-choice .gg-choice__aside { font-size: var(--gg-fs-sm); }
.co-ship__note { display: flex; gap: 6px; font-size: var(--gg-fs-xs); color: var(--gg-muted); line-height: 1.5; }
.co-ship__note .gg-icon { margin-top: 2px; flex: 0 0 auto; }
.co-ship + .co-ship { padding-top: 16px; border-top: 1px dashed var(--gg-line-strong); }
.co-points { display: grid; gap: 0; padding: 8px 16px; border-radius: var(--gg-r-lg); background: var(--gg-surface); animation: co-in var(--gg-dur-3) var(--gg-ease); }
.co-points__title { font-size: var(--gg-fs-sm); font-weight: 600; padding-top: 8px; }
.co-points__title span { font-weight: 400; color: var(--gg-muted); }
.co-point { width: 100%; font-size: var(--gg-fs-sm); }
.co-point + .co-point { border-top: 1px solid var(--gg-line); }
.co-points__note { font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); color: var(--gg-muted); padding-block: 6px 8px; }
.co-billing { margin-top: -4px; }

/* ---- betaling ---- */
.co-pay { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.co-paychoice { align-items: center; }
.co-paychoice .gg-choice__body { display: grid; gap: 2px; }
.co-paychoice__meta { animation: co-in var(--gg-dur-2) var(--gg-ease); }
.co-paychoice__mark { font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); font-weight: 600; color: var(--gg-ink-2); padding: 4px 8px; border: 1px solid var(--gg-line-strong); border-radius: var(--gg-r-xs); white-space: nowrap; align-self: center; }
.co-paychoice:first-child .co-paychoice__mark { border-color: var(--gg-ink); }
@media (max-width: 599.98px) { .co-paychoice__mark { display: none; } }
.co-pay__note { display: flex; gap: 8px; font-size: var(--gg-fs-xs); color: var(--gg-muted); line-height: 1.5; }
.co-pay__note .gg-icon { color: var(--gg-success); flex: 0 0 auto; margin-top: 1px; }
.co-payfail:focus { outline: 2px solid var(--gg-focus); outline-offset: 2px; }

/* ---- controleren ---- */
.co-review__list { display: grid; margin: 0; border-radius: var(--gg-r-lg); border: 1px solid var(--gg-line); overflow: hidden; }
.co-review__row { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 12px 16px; font-size: var(--gg-fs-sm); line-height: 1.45; }
.co-review__row + .co-review__row { border-top: 1px solid var(--gg-line); }
.co-review__row dt { font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); text-transform: uppercase; letter-spacing: var(--gg-ls-caps); color: var(--gg-muted); }
.co-review__row dd { margin: 0; }
.co-review__row--total { background: var(--gg-surface); }
.co-review__row--total dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.co-review__row--total dd .gg-muted { font-weight: 400; font-size: var(--gg-fs-xs); }
.co-review__todo { color: var(--gg-muted); font-style: italic; }
@media (min-width: 600px) { .co-review__row { grid-template-columns: 140px 1fr; gap: 16px; align-items: baseline; } }

.co-withdraw { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 16px; border-radius: var(--gg-r-lg); border: 1.5px solid var(--gg-ink); }
.co-withdraw__title { font-weight: 700; font-size: var(--gg-fs-sm); }
.co-withdraw__text { font-size: var(--gg-fs-xs); color: var(--gg-muted); line-height: 1.55; margin-top: 2px; }
.co-withdraw__links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: var(--gg-fs-xs); }
.co-withdraw__links a { min-height: 24px; display: inline-flex; align-items: center; }
.co-terms { font-size: var(--gg-fs-sm); }
.co-privacy { font-size: var(--gg-fs-xs); color: var(--gg-muted); margin-top: -12px; }
.co-submit { display: grid; gap: 10px; }
.co-submit__btn { min-height: 60px; }
.co-submit__amount { font-variant-numeric: tabular-nums; }
.co-submit__meta { font-size: var(--gg-fs-xs); color: var(--gg-muted); text-align: center; line-height: 1.5; }

/* ---- foutsamenvatting ---- */
.co-errors:focus { outline: none; }
.co-errors:focus-visible .gg-alert { outline: 2px solid var(--gg-focus); outline-offset: 2px; }
.co-errors__list { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 2px; }
.co-errors__list a { color: var(--gg-error); font-weight: 600; }

/* ---- overzicht ---- */
.co-summary { display: grid; gap: 12px; }
@media (min-width: 900px) { .co-summary { position: sticky; top: 24px; } }
.co-summary__card { padding: 24px; background: var(--gg-paper); border: 1px solid var(--gg-line); border-radius: var(--gg-r-xl); box-shadow: var(--gg-shadow-2); display: grid; gap: 16px; }
.co-summary__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.co-summary__title { font-size: var(--gg-fs-lg); letter-spacing: -0.015em; }
.co-summary__head .gg-btn--tertiary { min-height: var(--gg-tap); font-size: var(--gg-fs-sm); }
.co-summary__help { display: flex; gap: 10px; align-items: flex-start; justify-content: center; font-size: var(--gg-fs-xs); color: var(--gg-muted); line-height: 1.5; }
.co-summary__help .gg-icon { margin-top: 2px; flex: 0 0 auto; color: var(--gg-ink); }

[data-co-summary] { display: grid; gap: 16px; }
.co-sum__ship { display: grid; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--gg-line); }
.co-sum__ship-head { display: flex; gap: 10px; font-size: var(--gg-fs-sm); line-height: 1.35; }
.co-sum__when { font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); color: var(--gg-muted); }
.co-sum__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; }
.co-sum__dot--nl { background: var(--gg-success); }
.co-sum__dot--eu { background: var(--gg-info); }
.co-sum__items { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.co-sum__item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; font-size: var(--gg-fs-sm); }
.co-sum__thumb { position: relative; width: 56px; height: 56px; border-radius: var(--gg-r-md); background: var(--gg-surface); }
.co-sum__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.co-sum__qty { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--gg-ink); color: var(--gg-paper); font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); font-weight: 600; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--gg-paper); }
.co-sum__name { font-weight: 500; line-height: 1.35; min-width: 0; }
.co-sum__var { display: block; font-size: var(--gg-fs-xs); color: var(--gg-muted); font-weight: 400; }
.co-sum__price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-sum__totals .gg-totals__row--total dd { font-size: var(--gg-fs-xl); letter-spacing: -0.02em; }
.co-sum__free, .co-sum__disc dd { color: var(--gg-success); font-weight: 600; }
.co-sum__disc .gg-mono { font-size: var(--gg-fs-xs); }
[data-co-summary] .gg-totals__vat { margin-top: -10px; }

/* mobiel inklapbaar overzicht */
.co-mobsum { background: var(--gg-paper); border: 1px solid var(--gg-line); border-radius: var(--gg-r-xl); overflow: hidden; }
.co-mobsum__toggle { width: 100%; display: grid; grid-template-columns: 18px 1fr auto 18px; gap: 10px; align-items: center; min-height: 56px; padding: 0 16px; text-align: left; font-size: var(--gg-fs-sm); font-weight: 600; color: var(--gg-ink); }
.co-mobsum__n { font-family: var(--gg-mono); font-weight: 500; color: var(--gg-muted); font-size: var(--gg-fs-xs); }
.co-mobsum__total { font-weight: 800; font-size: var(--gg-fs-base); font-variant-numeric: tabular-nums; }
.co-mobsum__chev { transition: transform var(--gg-dur-2) var(--gg-ease); }
.co-mobsum__toggle[aria-expanded="true"] .co-mobsum__chev { transform: rotate(180deg); }
.co-mobsum__panel { padding: 16px; border-top: 1px solid var(--gg-line); }

/* ---- laadstaat bij betalen ---- */
.co-paying { position: fixed; inset: 0; z-index: var(--gg-z-modal); display: grid; place-items: center; padding: 16px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--gg-dur-2) var(--gg-ease); }
.co-paying.is-open { opacity: 1; }
.co-paying__box { display: grid; justify-items: center; gap: 10px; max-width: 360px; padding: 32px 28px; text-align: center; background: var(--gg-paper); border: 1px solid var(--gg-line); border-radius: var(--gg-r-xl); box-shadow: var(--gg-shadow-3); }
.co-paying__title { font-weight: 700; font-size: var(--gg-fs-base); margin-top: 6px; }
.co-paying__text { font-size: var(--gg-fs-sm); color: var(--gg-muted); }

/* ---- footer ---- */
.co-footer { background: var(--gg-paper); border-top: 1px solid var(--gg-line); padding-block: 20px 72px; }
.co-footer__inner { display: grid; gap: 8px; }
.co-footer__links { display: flex; flex-wrap: wrap; gap: 0 16px; font-size: var(--gg-fs-xs); }
.co-footer__links a { color: var(--gg-ink-2); min-height: var(--gg-tap); display: inline-flex; align-items: center; }
.co-footer__company { font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); color: var(--gg-muted); }
@media (min-width: 900px) { .co-footer { padding-bottom: 24px; } .co-footer__inner { grid-template-columns: 1fr auto; align-items: center; } }
.co .kassa-proto { margin-top: 0; }
.co-lookup__hint > span { flex: 1 1 200px; min-width: 0; }
.co-step { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 599.98px) { .co-submit__btn { font-size: var(--gg-fs-base); white-space: normal; padding-inline: 16px; } }
.co-choice .gg-choice__body { min-width: 0; flex: 1; }