/* ==========================================================================
   Cart page (E1), and the shipping panel the checkout reuses.
   Markup: app/Views/cart/index.php, _items.php, _ship_slot.php, _shipping.php.
   ========================================================================== */

.sp-cart-page { padding-top: 20px; padding-bottom: var(--sp-section); }
.sp-cart-back { margin-bottom: 14px; }
.sp-cart-page h1 { margin: 0 0 24px; font-size: var(--sp-fs-h1); font-weight: 600; line-height: 1.1; letter-spacing: var(--sp-track-tight); }
.sp-cart-alert { margin-bottom: 20px; }

.sp-cart-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
@media (min-width: 900px) {
    .sp-cart-layout { grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; }
    .sp-cart-summary { position: sticky; top: 24px; }
}
.sp-cart-layout:has(#cart-ship[hidden]) { grid-template-columns: minmax(0, 1fr); }
.sp-cart-summary:has(#cart-ship[hidden]) { display: none; }
.sp-cart-refs { margin-top: 8px; padding-top: 8px; }
.sp-cart-refs .sp-field { margin-bottom: 12px; }

/* --- Lines ---------------------------------------------------------------- */
.sp-cart-lines { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sp-line); }
.sp-cart-line {
    display: grid; align-items: center; gap: 4px 24px;
    grid-template-columns: 72px minmax(0, 1fr) auto minmax(110px, auto);
    grid-template-areas: "img info qty total" "img info qty remove";
    padding: 20px 0; border-bottom: 1px solid var(--sp-line);
}
.sp-cart-img {
    grid-area: img; align-self: start; display: grid; place-items: center;
    width: 72px; aspect-ratio: 1; padding: 6px; border-radius: var(--sp-r-sm); background: var(--sp-surface); overflow: hidden;
}
.sp-cart-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.sp-cart-img svg { width: 50%; height: 50%; color: var(--sp-ink-faint); }
.sp-cart-info { grid-area: info; align-self: start; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sp-cart-name { font-size: var(--sp-fs-body); font-weight: 600; line-height: 1.3; color: var(--sp-ink); overflow-wrap: anywhere; }
body.sp .sp-cart-name:hover { color: var(--sp-ink); text-decoration: underline; text-underline-offset: 3px; }
.sp-cart-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: var(--sp-fs-sm); color: var(--sp-ink-soft); font-variant-numeric: tabular-nums; }
.sp-cart-meta .sp-price { font-weight: 400; color: var(--sp-ink-soft); }
.sp-cart-status { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 2px; }
.sp-cart-status .sp-fit, .sp-cart-status .sp-stock { font-size: var(--sp-fs-sm); }
.sp-cart-qty { grid-area: qty; }
.sp-cart-total { grid-area: total; justify-self: end; align-self: end; font-size: var(--sp-fs-lg); }
.sp-cart-remove {
    grid-area: remove; justify-self: end; align-self: start;
    display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0; margin-right: -2px;
    border: 0; background: none; color: var(--sp-ink-soft); font: 500 var(--sp-fs-sm) var(--sp-font); cursor: pointer;
}
.sp-cart-remove svg { width: 14px; height: 14px; }
body.sp .sp-cart-remove:hover { color: var(--sp-ink); text-decoration: underline; text-underline-offset: 3px; }

.sp-cart-undo { align-items: center; margin-bottom: 16px; }
.sp-cart-undo svg { margin-top: 0; }
.sp-cart-undo .sp-link { margin-left: auto; padding: 6px 0; border-top: 0; border-left: 0; border-right: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }

.sp-cart-discount { display: grid; gap: 6px; margin: 16px 0 0; font-size: var(--sp-fs-ui); }
.sp-cart-discount div { display: flex; justify-content: flex-end; gap: 24px; }
.sp-cart-discount dt { color: var(--sp-ink-soft); }
.sp-cart-discount dd { margin: 0; min-width: 110px; text-align: right; font-variant-numeric: tabular-nums; }

/* Lines swap in place on qty and remove */
#cart-lines.htmx-request .sp-cart-lines, #cart-lines:has(.htmx-request) .sp-cart-lines { opacity: .6; transition: opacity var(--sp-fast); }

@media (max-width: 700px) {
    .sp-cart-line {
        gap: 0 12px;
        grid-template-columns: 64px auto minmax(0, 1fr);
        grid-template-areas: "img info info" "img remove remove" ". qty total";
        padding: 16px 0;
    }
    .sp-cart-img { width: 64px; }
    .sp-cart-remove { justify-self: start; min-height: var(--sp-hit); margin: -4px 0 4px; }
    .sp-cart-total { align-self: center; }
}

/* --- Empty ------------------------------------------------------------------ */
.sp-cart-empty {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    padding: 56px 20px; border-radius: var(--sp-r-card); background: var(--sp-surface); text-align: center;
}
.sp-cart-empty-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--sp-paper); color: var(--sp-ink-soft); }
.sp-cart-empty-icon svg { width: 28px; height: 28px; }
.sp-cart-empty p { margin: 0; font-size: var(--sp-fs-lg); font-weight: 600; }
.sp-cart-empty .sp-btn { white-space: normal; text-align: center; }

/* --- Summary: postcode, shipping choice, totals, checkout ------------------- */
.sp-cart-summary { padding: 24px; border-radius: var(--sp-r-card); background: var(--sp-surface); }
@media (max-width: 700px) { .sp-cart-summary { padding: 18px 16px; } }

.cart-ship-panel { font-size: var(--sp-fs-ui); }
.cart-ship-form[aria-busy="true"] .cart-choices,
.cart-ship-form[aria-busy="true"] .cart-agents,
.cart-ship-form[aria-busy="true"] #cart-agents { opacity: .55; transition: opacity var(--sp-fast); }
.cart-ship-progress {
    position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 12px; min-height: 0; padding: 10px 14px;
    border-radius: var(--sp-r-ctl); background: var(--sp-paper); box-shadow: 0 8px 24px rgba(19, 37, 37, .12);
    color: var(--sp-ink-soft); font-size: var(--sp-fs-sm);
}
.cart-ship-progress[hidden] { display: none; }
.cart-ship-progress .sp-spinner { color: var(--sp-action); }
.cart-ship-skeleton { display: grid; gap: 10px; }
.cart-ship-skeleton span { display: block; height: 44px; border-radius: var(--sp-r-ctl); background: var(--sp-surface-2); animation: cart-shimmer 1.4s ease infinite; }
.cart-ship-skeleton span.is-short { width: 55%; height: 18px; }
.cart-ship-loading { margin: 0; font-size: var(--sp-fs-sm); color: var(--sp-ink-soft); }
@keyframes cart-shimmer { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .cart-ship-skeleton span { animation: none; } }

.cart-ship-form { position: relative; display: flex; flex-direction: column; gap: 12px; }
.cart-zip label { display: block; margin-bottom: 6px; font-size: var(--sp-fs-sm); font-weight: 600; }
.cart-zip-row { display: flex; gap: 8px; }
/* Same box as the postcode field; the flag sits in the select's left padding */
.cart-country { position: relative; }
.cart-country-flag { position: absolute; left: 14px; top: 50%; width: 22px; height: 16px; border-radius: 2px; box-shadow: 0 0 0 1px var(--sp-line-strong); object-fit: cover; transform: translateY(-50%); pointer-events: none; }
.cart-ship-form .sp-field { margin: 0; }
.cart-ship-form .sp-input { min-height: var(--sp-hit); border-radius: var(--sp-r-ctl); background-color: var(--sp-paper); }
.cart-country select.sp-input { padding-left: 48px; }
.cart-ship-zip {
    flex: 1; min-width: 0; height: var(--sp-hit); padding: 0 14px;
    border: 0; border-radius: var(--sp-r-ctl); box-shadow: inset 0 0 0 1px var(--sp-line-strong); background: var(--sp-paper);
    font: 500 16px var(--sp-font); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--sp-ink);
}
.cart-ship-zip:focus-visible { outline: 2px solid var(--sp-focus); outline-offset: 2px; }
.cart-zip-row .sp-btn { flex: none; min-height: var(--sp-hit); background: var(--sp-paper); box-shadow: inset 0 0 0 1px var(--sp-line-strong); }

.cart-ship-panel input[type="radio"] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--sp-action); }
.cart-choices { display: grid; gap: 8px; }
.cart-choice {
    display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px;
    border-radius: var(--sp-r-ctl); background: var(--sp-paper); cursor: pointer; transition: box-shadow var(--sp-fast);
}
.cart-choice:hover { box-shadow: inset 0 0 0 1px var(--sp-line-strong); }
.cart-choice[data-need-zip] { cursor: pointer; }
.cart-choice[data-need-zip] input { pointer-events: none; }
.cart-choice:has(input:checked) { box-shadow: inset 0 0 0 2px var(--sp-t3); }
.cart-choice-logo { width: 44px; height: 24px; object-fit: contain; flex: none; }
.cart-choice-text, .cart-agent-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-choice-main { font-weight: 600; }
.cart-choice-carrier, .cart-agent-street, .cart-agent-distance { font-size: var(--sp-fs-xs); color: var(--sp-ink-soft); }
.cart-choice-price { margin-left: auto; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

.cart-agents-loading {
    display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 14px;
    border-radius: var(--sp-r-ctl); background: var(--sp-paper); color: var(--sp-ink-soft); font-size: var(--sp-fs-sm);
}
.cart-agents-loading .sp-spinner { width: 22px; height: 22px; color: var(--sp-action); }
.cart-agents-label { margin-top: 4px; font-size: var(--sp-fs-sm); font-weight: 600; }
.cart-agent-changed { margin: 10px 0 0; font-size: var(--sp-fs-sm); line-height: 1.45; }
.cart-agents { display: grid; max-height: 260px; overflow: auto; border-radius: var(--sp-r-ctl); background: var(--sp-paper); }
.cart-agent { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--sp-line); cursor: pointer; }
.cart-agent:last-child { border-bottom: 0; }
.cart-agent input[type="radio"] { margin-top: 1px; }
.cart-agent:has(input:checked) { background: var(--sp-t1); }
.cart-agent-name { font-weight: 600; font-size: var(--sp-fs-sm); }
.cart-agent-distance { margin-left: auto; white-space: nowrap; padding-top: 2px; }

.cart-buyer { border: 0; margin: 0; padding: 0 0 4px; display: grid; gap: 8px; }
.cart-buyer legend { padding: 0; font-size: var(--sp-fs-sm); font-weight: 600; }
.cart-buyer-options { display: flex; flex-wrap: wrap; gap: 8px; }
.cart-buyer-option {
    display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px;
    border-radius: var(--sp-r-pill, 999px); background: var(--sp-paper); cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--sp-line-strong); font-size: var(--sp-fs-sm); font-weight: 600;
}
.cart-buyer-option:has(input:checked) { box-shadow: inset 0 0 0 2px var(--sp-t3); }
.cart-ship-heading { margin: 18px 0 0; font-size: var(--sp-fs-sm); font-weight: 600; }
.cart-ship-note { margin: 10px 0 0; font-size: var(--sp-fs-sm); line-height: 1.45; color: var(--sp-ink-soft); }
.cart-ship-more { margin: 8px 0 0; }

.cart-money-block { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--sp-line-strong); }
.cart-money { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.cart-money-total { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--sp-line-strong); font-size: var(--sp-fs-lg); }
.cart-money-total strong { font-weight: 600; }
.cart-money-vat { margin-top: -4px; font-size: var(--sp-fs-xs); color: var(--sp-ink-soft); }
.cart-cta { margin-top: 18px; }

/* --- Mobile checkout bar: shown while the summary's own button is off screen -- */
.sp-cart-bar {
    position: fixed; z-index: 40; inset: auto 0 0 0;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--sp-paper); box-shadow: 0 -1px 0 var(--sp-line), 0 -10px 30px rgba(19, 37, 37, .08);
}
.sp-cart-bar[hidden] { display: none; }
.sp-cart-bar-sum { display: flex; flex-direction: column; line-height: 1.2; }
.sp-cart-bar-sum small { font-size: var(--sp-fs-xs); color: var(--sp-ink-soft); }
.sp-cart-bar-sum strong { font-size: var(--sp-fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-cart-bar .sp-btn { flex: none; }
body.sp-has-cart-bar { padding-bottom: 84px; }