/* =====================================================================
   MacLab Stores — Cart, checkout & order pages
   ===================================================================== */

.co { padding-block: clamp(2rem, 5vw, 3.5rem); }
.co__head { margin-bottom: var(--sp-6); }
.co__head h1 { font-size: var(--text-3xl); margin-top: var(--sp-2); }
.co__layout { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }

/* ---- Notices ---- */
.notice { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); font-size: var(--text-sm); margin-bottom: var(--sp-5); }
.notice--ok { background: var(--success-wash); color: var(--success); }
.notice--err { background: var(--red-wash); color: var(--red-ink); }

/* ---- Cart lines ---- */
.cart-lines { display: flex; flex-direction: column; gap: var(--sp-4); }
.cart-line {
    display: grid; grid-template-columns: 96px 1fr auto auto; gap: var(--sp-4);
    align-items: center; padding: var(--sp-4);
    border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--canvas);
}
.cart-line.is-unavailable { opacity: 0.6; }
.cart-line__media {
    width: 96px; height: 72px; border-radius: var(--r-md);
    background: linear-gradient(160deg, #FBFCFE 0%, #EEF2F7 100%);
    display: grid; place-items: center; overflow: hidden;
}
.cart-line__media img { max-width: 85%; max-height: 85%; object-fit: contain; }
.cart-line__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-line__name { font-family: var(--font-display); font-weight: 600; }
.cart-line__name:hover { color: var(--cyan-ink); }
.cart-line__sku { font-size: var(--text-2xs); color: var(--graphite-soft); }
.cart-line__controls { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
.cart-line__qty .select { width: 76px; padding-block: 0.5rem; }
.cart-line__remove { font-size: var(--text-xs); color: var(--graphite-soft); text-decoration: underline; }
.cart-line__remove:hover { color: var(--red-ink); }
.cart-line__price { text-align: right; display: flex; flex-direction: column; }
.cart-line__unit { font-size: var(--text-2xs); }

/* ---- Summary ---- */
.co-summary { padding: var(--sp-5); position: sticky; top: 88px; display: flex; flex-direction: column; gap: var(--sp-4); }
.co-summary h3 { font-size: var(--text-xl); }
.co-summary__items { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.co-summary__items li { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--text-sm); }
.co-summary__items em { font-style: normal; color: var(--graphite-soft); font-size: var(--text-2xs); }
.co-summary__rows { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--hairline); }
.co-summary__rows > div { display: flex; justify-content: space-between; font-size: var(--text-sm); }
.co-summary__rows dt { color: var(--graphite); }
.co-summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--sp-3); border-top: 1px solid var(--hairline); }
.co-summary__total b { font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
.co-summary__fine { font-size: var(--text-2xs); color: var(--graphite-soft); }

/* ---- Checkout form ---- */
.co-form { display: flex; flex-direction: column; gap: var(--sp-6); }
.co-form fieldset { border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); background: var(--canvas); }
.co-form legend { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); padding-inline: var(--sp-2); }
.co-form .grid { gap: var(--sp-4); }

/* ---- Payment options ---- */
.pay-options { display: flex; flex-direction: column; gap: var(--sp-3); }
.pay-option { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); border: 1.5px solid var(--hairline); border-radius: var(--r-md); cursor: pointer; transition: border var(--dur-2), background var(--dur-2); }
.pay-option:has(input:checked) { border-color: var(--cyan); background: var(--cyan-wash); }
.pay-option input { margin-top: 4px; accent-color: var(--cyan); }
.pay-option__body { display: flex; flex-direction: column; gap: 2px; }
.pay-option__body small { color: var(--graphite); font-size: var(--text-xs); }

/* ---- Order page ---- */
.order-hero { text-align: center; padding: var(--sp-6) var(--sp-4); margin-bottom: var(--sp-5); }
.order-hero h1 { font-size: var(--text-3xl); margin-top: var(--sp-3); }
.order-hero p { color: var(--graphite); margin-top: var(--sp-3); max-width: 52ch; margin-inline: auto; }
.order-hero__icon { width: 64px; height: 64px; margin: 0 auto var(--sp-4); border-radius: 50%; display: grid; place-items: center; background: var(--success-wash); color: var(--success); }
.order-hero__icon svg { width: 30px; height: 30px; }
.order-hero--failed .eyebrow::before { background: var(--red); }

.order-number { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4); }
.order-number__value { font-size: var(--text-xl); font-weight: 700; letter-spacing: var(--tracking-wide); }

.bank { padding: var(--sp-5); margin-bottom: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.bank__rows { display: flex; flex-direction: column; }
.bank__rows > div { display: flex; justify-content: space-between; padding-block: var(--sp-3); border-bottom: 1px solid var(--hairline); }
.bank__rows > div:last-child { border-bottom: 0; }
.bank__rows dt { color: var(--graphite); font-size: var(--text-sm); }

.order-detail { padding: var(--sp-5); margin-bottom: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.order-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-6); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .co__layout { grid-template-columns: 1fr; }
    .co-summary { position: static; }
    .cart-line { grid-template-columns: 72px 1fr; }
    .cart-line__media { width: 72px; height: 56px; }
    .cart-line__controls { flex-direction: row; align-items: center; grid-column: 1 / -1; justify-content: space-between; }
    .cart-line__price { grid-column: 1 / -1; text-align: left; flex-direction: row; gap: var(--sp-3); align-items: baseline; }
}