/* ==========================================================================
   CART + CHECKOUT RESTYLE (ERR-316 phase 2, owner 2026-10-12)

   Modelled on smartink.co.nz (measured with Playwright, 1280x800). The
   targets are a white page, flat rows split by hairlines, one filled
   pill CTA, and a quiet grey order-summary panel on checkout.

   Loaded LAST on /cart, /checkout and /payment, so it restyles without
   touching the rules it overrides. Every id/class the tests and probes
   pin is unchanged. Only the look moves here — no element is hidden that
   was visible before, and no order changes (ERR-305's "money rows, then
   the button" holds).
   ========================================================================== */

/* ── Cart page ──────────────────────────────────────────────────────────── */

.cart-page__header {
    display: block;
    margin-bottom: var(--spacing-lg);
}
.cart-page__title {
    padding-top: var(--spacing-md);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.cart-page__header .cart-actions__continue {
    gap: 4px;
    min-height: 36px;
    color: var(--color-primary-dark);
    font-weight: 600;
    text-decoration: none;
}
.cart-page__header .cart-actions__continue:hover { text-decoration: underline; }

@media (min-width: 1025px) {
    .cart-layout { grid-template-columns: 1fr 340px; gap: 48px; }
}

/* Lines: no card, hairlines between rows. */
section.cart-page .cart-items {
    border: 0;
    border-top: 1px solid var(--color-border-light);
    border-radius: 0;
    background: none;
}
section.cart-page .cart-item {
    padding: 18px 0;
    border-bottom: 1px solid var(--color-border-light);
    animation: none;
}
section.cart-page .cart-item:last-child { border-bottom: 1px solid var(--color-border-light); }
section.cart-page .cart-item__image {
    width: 80px;
    height: 80px;
    background: none;
}
section.cart-page .cart-item__name {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text-heading);
}

/* Summary: a plain column, not a boxed card. It scrolls WITH the page —
   never sticky (owner 2026-10-15, ERR-342; overrides the pages.css base). */
.cart-page .cart-summary {
    position: static;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.cart-page .cart-summary__totals {
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border-light);
}
.cart-page .cart-summary__row { padding: 6px 0; }
.cart-page .cart-summary__row--total {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-light);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-text-heading);
}
.cart-page .cart-summary__row--total > span { white-space: nowrap; }

/* One filled pill: the way on. */
.cart-page #checkout-btn,
section.checkout-page #continue-to-payment-btn,
section.checkout-page #pay-now-btn {
    min-height: 52px;
    border-radius: 999px;
    font-size: 1.05rem;
    font-weight: 700;
    box-shadow: none;
}

/* The extras under the button, quieter: hairline-separated, smaller type. */
.cart-page .cart-summary__secure { font-size: 0.8rem; }
.cart-page .cart-discount {
    border: 0;
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
    border-radius: 0;
    background: none;
}
.cart-page .cart-discount__summary { padding-left: 0; padding-right: 0; font-weight: 700; }
.cart-page .cart-delivery {
    border: 0;
    background: none;
    padding-left: 0;
    padding-right: 0;
}
.cart-page .cart-summary__payment-icons { justify-content: center; }

/* ── Checkout + payment: Shopify-style two-panel shell ─────────────────── */

section.checkout-page .checkout-page__title,
section.checkout-page .cart-page__title {
    font-size: 1.6rem;
    font-weight: 800;
}

/* The order summary becomes the grey right panel. */
@media (min-width: 1025px) {
    section.checkout-page .checkout-summary {
        background: var(--color-background-alt);
        border: 0;
        border-left: 1px solid var(--color-border-light);
        border-radius: 0;
        box-shadow: none;
        padding: var(--spacing-xl) var(--spacing-lg);
    }
}

/* Section headings: plain, bold, no numbered chips. */
section.checkout-page .checkout-section__heading,
section.checkout-page .payment-section__title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-text-heading);
}

/* Inputs: 48px, 5px radius, hairline border, primary focus ring. */
section.checkout-page .form-input,
section.checkout-page .form-select,
section.checkout-page .form-textarea {
    min-height: 48px;
    border: 1px solid var(--steel-300);
    border-radius: 5px;
    box-shadow: none;
}
section.checkout-page .form-input:focus,
section.checkout-page .form-select:focus,
section.checkout-page .form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
    outline: none;
}

/* Delivery area radios as bordered option rows (Shopify's shipping method). */
section.checkout-page #delivery-type-section label:has(input[name="delivery_type"]) {
    border: 1px solid var(--steel-300);
    border-radius: 5px;
    padding: 14px 16px;
    background: var(--color-background);
}
section.checkout-page #delivery-type-section label:has(input[name="delivery_type"]:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
}

/* Sections: no boxes, no number chips — a bold heading over plain fields.
   The accordion's "Edit" and collapsed summary still work; only the chip
   that numbered them is gone (the heading says what the step is). */
section.checkout-page .checkout-section {
    border: 0;
    background: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 28px;
}
section.checkout-page .checkout-section__heading {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 1.3rem;
    font-weight: 800;
}
section.checkout-page .checkout-section__num { display: none; }

/* Labels in sentence case, quiet; the field carries the weight. */
section.checkout-page .form-label {
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text);
}
section.checkout-page .form-input,
section.checkout-page .form-select {
    padding: 12px 14px;
}

section.checkout-page .cart-page__header {
    display: block;
    margin-bottom: var(--spacing-lg);
    padding-bottom: 0;
    border-bottom: 0;
}
section.checkout-page .checkout-order-notes__heading {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-text-heading);
}

/* ── /payment: Shopify's "Payment — all transactions are secure" block ───
   The inline <style> in payment.html paints a navy header and splits card
   and PayPal into two columns; here it is one white column, card first,
   PayPal under it, as on smartink. */
section.checkout-page .shipping-summary {
    background: var(--color-background);
    border: 1px solid var(--steel-300);
    border-radius: 5px;
}
section.checkout-page .payment-section {
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}
section.checkout-page .payment-section__header {
    background: none;
    padding: 8px 0 12px;
}
section.checkout-page .payment-section__icon { display: none; }
section.checkout-page .payment-section__subtitle { color: var(--color-text-muted); font-size: 0.9rem; }
section.checkout-page .payment-section__body {
    grid-template-columns: 1fr;
    padding: 20px;
    border: 1px solid var(--steel-300);
    border-radius: 5px;
    background: var(--color-background-alt);
}
section.checkout-page .payment-col-alt {
    width: 100%;
    padding-left: 0;
    border-left: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--steel-200);
}


/* ── ONE-PAGE CHECKOUT (ERR-316 phase 3) ────────────────────────────────────
   Payment moved from /payment into /checkout. First, payment.html's own
   inline rules, carried over verbatim (their variables are scoped to the
   section so they cannot leak into the rest of the page). */
#checkout-payment {
            --cyan: #267FB5;
            --cyan-dark: #1a5a8a;
            --cyan-light: #3a9fd5;
            --magenta: #C71F6E;
            --magenta-dark: #a01858;
            --yellow: #F4C430;
            --dark: #0d1b2a;
            --dark-light: #1b2d45;
            --gray-50: #f8fafc;
            --gray-100: #f1f5f9;
            --gray-200: #e2e8f0;
            --gray-300: #cbd5e1;
            --gray-400: #94a3b8;
            --gray-500: #64748b;
            --gray-600: #475569;
            --gray-700: #334155;
            --gray-800: #1e293b;
            --gray-900: #0f172a;
            --success: #10b981;
            --error: #ef4444;
            --radius: 12px;
            --radius-sm: 8px;
            --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.payment-section {
            background: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            overflow: hidden;
}

.payment-section__header {
            background: linear-gradient(135deg, var(--dark) 0%, var(--dark-light) 100%);
            padding: 1.25rem 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
}

.payment-section__icon {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--cyan-light);
}

.payment-section__title {
            color: white;
            font-size: 1.125rem;
            font-weight: 600;
            margin: 0;
}

.payment-section__subtitle {
            color: var(--gray-400);
            font-size: 0.8125rem;
            margin: 0.25rem 0 0;
}

.payment-section__body {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 1.5rem;
            align-items: start;
            padding: 1.25rem;
}

.payment-col-main {
            min-width: 0;
}

.payment-col-alt {
            width: 190px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.75rem;
            padding-left: 1.5rem;
            border-left: 1px solid var(--gray-200);
            align-self: center;
}

.payment-col-alt__label {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--gray-400);
            text-transform: uppercase;
            letter-spacing: 1px;
}

.payment-col-alt__sublabel {
            font-size: 0.75rem;
            color: var(--gray-500);
            text-align: center;
}

#express-checkout-wrapper {
            margin-bottom: 1rem;
}

.express-divider {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin: 0.75rem 0 0;
            color: var(--gray-500);
            font-size: 0.8125rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
}

.express-divider::before,
        .express-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--gray-200);
}

.payment-element-wrapper {
            margin-bottom: 1rem;
}

#card-errors {
            color: var(--error);
            font-size: 0.8125rem;
            margin-top: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.375rem;
}

#card-errors:empty {
            display: none;
}

.pay-terms {
            margin: 0.5rem 0 0;
            font-size: 0.8125rem;
            line-height: 1.4;
            color: var(--gray-600, #4b5563);
            text-align: center;
}

.pay-terms a { color: inherit; text-decoration: underline;
}

.pay-button.is-verifying { cursor: progress;
}

.pay-button {
            width: 100%;
            padding: 0.875rem 1.5rem;
            font-size: 1rem;
            font-weight: 600;
            color: white;
            background: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-dark) 100%);
            border: none;
            border-radius: var(--radius-sm);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            transition: background-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
            position: relative;
            overflow: hidden;
            margin-top: 0.75rem;
}

.pay-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
}

.pay-button:hover:not(:disabled)::before {
            left: 100%;
}

.pay-button:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(38, 127, 181, 0.4);
}

.pay-button:active:not(:disabled) {
            transform: translateY(0);
}

.pay-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background: var(--gray-400);
}

.pay-button__icon {
            width: 20px;
            height: 20px;
}

@keyframes spin {
            to { transform: rotate(360deg); }
}

.animate-spin {
            animation: spin 1s linear infinite;
}

.secure-badge {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 0.5rem;
            padding: 0.5rem 0.75rem;
            background: var(--gray-50);
            border-radius: var(--radius-sm);
            font-size: 0.8125rem;
            color: var(--gray-600);
}

.secure-badge svg {
            color: var(--success);
}

.powered-by {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 0.75rem;
            padding-top: 0.75rem;
            border-top: 1px solid var(--gray-200);
            font-size: 0.75rem;
            color: var(--gray-400);
}

.powered-by svg {
            height: 20px;
            width: auto;
}

@media (max-width: 768px) {
    .payment-section__body {
                grid-template-columns: 1fr;
    }
    .payment-col-alt {
                width: 100%;
                padding-left: 0;
                border-left: none;
                padding-top: 1rem;
                border-top: 1px solid var(--gray-200);
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
    }
}

/* Express row at the top: title, the wallet buttons, then OR. */
.checkout-express { margin-bottom: 8px; }
.checkout-express .cart-wallet { margin-top: 0; }
.checkout-express__title {
    margin: 0 0 10px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}
.checkout-express__or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 6px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.checkout-express__or::before,
.checkout-express__or::after { content: ""; flex: 1; border-top: 1px solid var(--color-border); }


/* ══ SHOPIFY PARITY (ERR-316 phase 4, owner 2026-10-13: "almost exactly like
   smartink.co.nz"). Figures measured on smartink's live checkout with
   Playwright, 2026-10-13, 1280x800: left column 500px ending 40px before the
   divider at x=689; grey (#f5f5f5) right half from header to bottom; summary
   content 400px; fields 48px, 1px #dedede, 12px radius, 14px system font;
   h2 20px/600; Pay now #005BD1, 50px, 12px radius, 14px/600. ═════════════ */

body:has(section.checkout-page) {
    --shop-blue: #005BD1;
    --shop-line: #dedede;
    --shop-grey: #f5f5f5;
    --shop-muted: #707070;
    --shop-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #fff;
}
body:has(section.checkout-page) .site-main,
body:has(section.checkout-page) .site-header--checkout { font-family: var(--shop-font); color: #000; }

/* Header: wordmark left, bag right, hairline under. */
.site-header--checkout { border-bottom: 1px solid var(--shop-line); box-shadow: none; background: #fff; }
.site-header--checkout .header-main { padding: 18px 0; }
.site-header--checkout .header-main .container { max-width: 1012px; }
.site-header--checkout .logo__text { font-size: 1.25rem; }
.checkout-header__bag { display: inline-flex; align-items: center; gap: 8px; color: var(--shop-blue); text-decoration: none; }
/* Same blue as the bag icon, plain weight like its 1.8px stroke (ERR-347). */
.checkout-header__bag-label { font: 400 15px var(--shop-font); line-height: 1; }
.checkout-header__bag:hover .checkout-header__bag-label { text-decoration: underline; }

/* The big site footer: on checkout only its legal line, like Shopify's bare
   page (the noscript block stays in the HTML for the compliance pins). */
/* Shopify's checkout has no site footer: the policy links under Pay replace
   it. The <noscript> company block stays in the HTML (compliance pins). */
body:has(section.checkout-page) .site-footer { display: none; }

section.checkout-page { padding: 0; }
section.checkout-page > .container { max-width: none; padding: 0; }

/* Desktop split: the grey half runs from the header to the bottom. */
@media (min-width: 1000px) {
    section.checkout-page .checkout-layout {
        display: grid;
        grid-template-columns: calc(50% + 49px) 1fr;
        gap: 0;
        align-items: stretch;
    }
    section.checkout-page .checkout-form-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding: 32px 40px 48px 20px;
    }
    section.checkout-page .checkout-form-wrapper > * { width: 100%; max-width: 500px; }
    section.checkout-page .checkout-sidebar {
        position: static;
        align-self: stretch;
        background: var(--shop-grey);
        border-left: 1px solid var(--shop-line);
        padding: 38px 20px 48px 40px;
    }
    section.checkout-page .checkout-sidebar .checkout-summary {
        position: sticky;
        top: 38px;
        max-width: 400px;
        background: none;
        border: 0;
        padding: 0;
        box-shadow: none;
    }
}
@media (max-width: 999px) {
    section.checkout-page .checkout-form-wrapper { padding: 20px 16px 40px; }
    section.checkout-page .checkout-sidebar { background: var(--shop-grey); border-bottom: 1px solid var(--shop-line); }
}

/* Section headings and the Sign in link. */
section.checkout-page .checkout-section { position: relative; margin: 0 0 28px; padding: 0; border: 0; background: none; box-shadow: none; }
section.checkout-page .checkout-section__heading {
    display: block;
    width: 100%;
    margin: 0 0 14px;
    padding: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: #000;
}
section.checkout-page .checkout-section__login-prompt {
    position: absolute;
    top: 3px;
    right: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    font-size: 14px;
}
section.checkout-page .checkout-section__login-prompt a,
section.checkout-page .checkout-policies a,
section.checkout-page .pay-terms a { color: var(--shop-blue); text-decoration: underline; text-underline-offset: 2px; }
section.checkout-page .checkout-subheading { margin: 22px 0 12px; font-size: 16px; font-weight: 600; color: #000; }

/* Rows of fields, 12px apart. */
section.checkout-page .checkout-section .form-row { display: grid; gap: 12px; margin: 0 0 12px; grid-template-columns: 1fr; }
section.checkout-page .checkout-section .form-row--two-col { grid-template-columns: 1fr 1fr; }
section.checkout-page .checkout-section .form-row--three-col { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 560px) {
    section.checkout-page .checkout-section .form-row--two-col { grid-template-columns: 1fr; }
}
section.checkout-page .checkout-section .form-group { position: relative; margin: 0; }

/* Fields: 48px, hairline, 12px radius; the label lives INSIDE the box —
   full size while empty, small at the top once filled or focused. */
section.checkout-page .checkout-section .form-input,
section.checkout-page .checkout-section .form-select,
section.checkout-page .form-static,
section.checkout-page .phone-input-group {
    width: 100%;
    min-height: 48px;
    height: 48px;
    margin: 0;
    padding: 20px 12px 6px;
    border: 1px solid var(--shop-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
    font: 400 14px/1.3 var(--shop-font);
    color: #000;
}
section.checkout-page .checkout-section .form-select { padding-right: 34px; }
section.checkout-page .form-static { display: flex; align-items: flex-end; }
section.checkout-page .checkout-section .form-input:focus,
section.checkout-page .checkout-section .form-select:focus,
section.checkout-page .phone-input-group:focus-within {
    border-color: var(--shop-blue);
    box-shadow: 0 0 0 1px var(--shop-blue);
    outline: none;
}
section.checkout-page .checkout-section .form-input.is-error,
section.checkout-page .checkout-section .form-select.is-error { border-color: #dd1d1d; box-shadow: 0 0 0 1px #dd1d1d; }
section.checkout-page .checkout-section .form-group:not(.form-group--checkbox) > .form-label {
    position: absolute;
    z-index: 1;
    top: 6px;
    left: 13px;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--shop-muted);
    pointer-events: none;
    transition: top 0.12s ease, font-size 0.12s ease;
}
/* Descendant, not child: address autocomplete wraps #address1 in its own box. */
section.checkout-page .checkout-section .form-group:has(.form-input:placeholder-shown:not(:focus)) > .form-label {
    top: 15px;
    font-size: 14px;
}
section.checkout-page .checkout-section .form-label .required { display: none; }
section.checkout-page .checkout-section .form-error { margin-top: 6px; font-size: 13px; color: #dd1d1d; }

/* Phone: the +64 picker and the number share one box. */
section.checkout-page .phone-input-group { display: flex; padding: 0; gap: 0; }
section.checkout-page .phone-input-group .phone-country-code {
    width: 76px;
    height: 100%;
    padding: 18px 4px 4px 12px;
    border: 0;
    border-right: 1px solid var(--shop-line);
    border-radius: 12px 0 0 12px;
    background: transparent;
    font: 400 14px var(--shop-font);
    text-align: left;
}
section.checkout-page .phone-input-group .phone-number {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 20px 12px 6px;
    border: 0;
    border-radius: 0 12px 12px 0;
    background: transparent;
    box-shadow: none;
    font: 400 14px var(--shop-font);
}
section.checkout-page .phone-input-group .phone-country-code:focus,
section.checkout-page .phone-input-group .phone-number:focus { box-shadow: none; outline: none; }
section.checkout-page .form-group--phone > .form-label { left: 90px !important; }
section.checkout-page .form-group--phone:has(.phone-number:placeholder-shown:not(:focus)) > .form-label { top: 15px; font-size: 14px; }

/* Checkboxes: 14px text, square box, Shopify blue tick. */
section.checkout-page .checkout-optin,
section.checkout-page .form-group--checkbox { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font-size: 14px; color: #000; }
section.checkout-page .form-group--checkbox .form-label--checkbox { position: static; margin: 0; font-size: 14px; color: #000; text-transform: none; letter-spacing: 0; }
section.checkout-page input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--shop-blue); flex: 0 0 auto; }

/* Shipping method: one bordered list, price on the right. */
section.checkout-page .delivery-type-options {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border: 1px solid var(--shop-line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
section.checkout-page .delivery-type-option {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 16px;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    cursor: pointer;
}
section.checkout-page .delivery-type-option + .delivery-type-option { border-top: 1px solid var(--shop-line); }
section.checkout-page .delivery-type-option:has(input:checked) { background: #f0f5ff; box-shadow: inset 0 0 0 1px var(--shop-blue); }
section.checkout-page .delivery-type-option__radio { position: static; opacity: 1; width: 18px; height: 18px; accent-color: var(--shop-blue); }
section.checkout-page .delivery-type-option__icon-wrap,
section.checkout-page .delivery-type-option__check { display: none; }
section.checkout-page .delivery-type-option__content {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    font-size: 14px;
}
section.checkout-page .delivery-type-option__name { font-weight: 400; color: #000; }
section.checkout-page .delivery-type-option__desc { grid-column: 1; font-size: 13px; color: var(--shop-muted); }
section.checkout-page .delivery-type-option__price { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 600; color: #000; }

section.checkout-page .checkout-order-notes__heading { font-size: 16px; font-weight: 600; margin: 0 0 12px; }
section.checkout-page .checkout-order-notes .form-textarea {
    border: 1px solid var(--shop-line);
    border-radius: 12px;
    padding: 12px;
    font: 400 14px/1.4 var(--shop-font);
}

/* Payment. */
section.checkout-page .checkout-payment { margin-top: 32px; }
section.checkout-page .payment-section__header { padding: 0 0 12px; }
section.checkout-page .payment-section__title { font-size: 20px; font-weight: 600; color: #000; }
section.checkout-page .payment-section__subtitle { margin-top: 4px; font-size: 14px; color: var(--shop-muted); }
section.checkout-page .payment-section__body { padding: 0; border: 0; background: none; border-radius: 0; gap: 0; }
section.checkout-page .payment-element-wrapper { margin-bottom: 20px; }
section.checkout-page #pay-now-btn {
    width: 100%;
    min-height: 50px;
    height: 50px;
    margin: 8px 0 0;
    padding: 14px;
    border: 0;
    border-radius: 12px;
    background: var(--shop-blue);
    color: #fff;
    font: 600 14px var(--shop-font);
    box-shadow: none;
    transform: none;
}
section.checkout-page #pay-now-btn::before { display: none; }
section.checkout-page #pay-now-btn:hover:not(:disabled) { background: #004aab; box-shadow: none; transform: none; }
section.checkout-page #pay-now-btn:disabled { background: var(--shop-blue); opacity: 0.55; cursor: not-allowed; }
section.checkout-page .pay-terms,
section.checkout-page .pay-reassurance { margin: 12px 0 0; font-size: 12px; color: var(--shop-muted); text-align: left; }
section.checkout-page .payment-col-alt { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--shop-line); align-items: stretch; }
section.checkout-page .payment-col-alt__label { text-align: center; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 14px; color: var(--shop-muted); }
section.checkout-page .payment-col-alt__sublabel { display: none; }

/* Policy links under Pay. */
section.checkout-page .checkout-policies {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 40px;
    padding-top: 18px;
    border-top: 1px solid var(--shop-line);
    font-size: 14px;
}

/* Express row: Shopify's small grey title and OR. */
section.checkout-page .checkout-express__title { font-size: 14px; color: var(--shop-muted); }

/* Summary: thumbnail + black qty badge, rows, big total, GST line. */
section.checkout-page .checkout-summary__item { display: flex; align-items: center; gap: 14px; padding: 0 0 16px; border: 0; }
section.checkout-page .checkout-summary__item-image {
    position: relative;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border: 1px solid var(--shop-line);
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
section.checkout-page .checkout-summary__item-qty {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #000;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
}
section.checkout-page .checkout-summary__item-name { font-size: 14px; color: #000; }
section.checkout-page .checkout-summary__item-price { font-size: 14px; color: #000; }
section.checkout-page .checkout-summary__row { padding: 4px 0; font-size: 14px; color: #000; border: 0; }
section.checkout-page .checkout-summary__totals { border: 0; padding-top: 8px; }
section.checkout-page .checkout-summary__row--total {
    align-items: baseline;
    margin-top: 10px;
    padding-top: 0;
    border: 0;
    font-size: 19px;
    font-weight: 600;
}
section.checkout-page .checkout-summary__currency { font-size: 12px; font-weight: 400; color: var(--shop-muted); margin-right: 4px; }
section.checkout-page .checkout-summary__tax { margin: 2px 0 0; font-size: 14px; color: var(--shop-muted); }
section.checkout-page .checkout-summary__points,
section.checkout-page .checkout-summary__shipping-info,
section.checkout-page .checkout-summary__trust { font-size: 13px; }

/* Phone: Shopify's grey "Order summary ▾  $X" bar under the header. */
@media (max-width: 999px) {
    section.checkout-page .checkout-summary__toggle {
        width: 100%;
        margin: 0;
        padding: 16px;
        border: 0;
        border-radius: 0;
        background: var(--shop-grey);
        color: var(--shop-blue);
        font: 400 14px var(--shop-font);
    }
    section.checkout-page .checkout-summary__toggle-total { color: #000; font-weight: 600; font-size: 17px; }
    section.checkout-page .checkout-sidebar .checkout-summary { background: var(--shop-grey); border: 0; border-radius: 0; padding: 0; box-shadow: none; }
    section.checkout-page .checkout-summary__inner { padding: 0 16px 16px; }
}

section.checkout-page .checkout-delivery-type { padding: 0; margin: 0 0 4px; border: 0; background: none; }
section.checkout-page .checkout-order-notes .form-textarea { width: 100%; }
section.checkout-page .checkout-order-notes__heading,
section.checkout-page .checkout-summary,
section.checkout-page .checkout-summary * { font-family: var(--shop-font); }
section.checkout-page .checkout-summary .quote-pdf { font-size: 13px; }
section.checkout-page .checkout-summary .quote-pdf > .btn {
    min-height: 40px;
    border: 1px solid var(--shop-line);
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
}

section.checkout-page .phone-input-group .phone-country-code { padding: 0 4px 0 12px; }
section.checkout-page .checkout-order-notes .form-row,
section.checkout-page .checkout-order-notes .form-group { display: block; width: 100%; margin: 0; }
section.checkout-page .checkout-order-notes .form-textarea { display: block; width: 100%; max-width: none; }
section.checkout-page .delivery-type-option:has(input:checked) { background-color: #f0f5ff; }
/* No white strip under the split: the grey half reaches the bottom. */
body:has(section.checkout-page) .site-main { padding-bottom: 0; margin-bottom: 0; }
@media (min-width: 1000px) {
    section.checkout-page .checkout-layout { min-height: calc(100vh - 69px); }
}

/* ── Cart line: name, value-pack pill and volume nudge on ONE line ─────────
   (owner, 13 Oct: "why is there a cutoff on the text … wrapping a third of
   the way"). Measured: `70px 1fr auto auto auto auto` left the details column
   ~340 of 780px at 1280 because the unit price had a column of its own. The
   unit price now sits under the name (the SAME cell phones already use —
   .cart-item__price-mobile, the same unitPriceFor figure, ERR-307), which
   gives the details ~110px back. Markup unchanged. */
@media (min-width: 769px) {
    section.cart-page .cart-item {
        grid-template-columns: 80px minmax(0, 1fr) auto auto auto;
        column-gap: 20px;
        row-gap: 2px;
        align-items: start;
    }
    /* The details' children join the line's grid, so the value-pack pill and
       the volume nudge can run the FULL width under the name instead of
       wrapping inside the name column. */
    section.cart-page .cart-item__details { display: contents; }
    section.cart-page .cart-item__details > * { grid-column: 2; margin-top: 0; margin-bottom: 0; }
    section.cart-page .cart-item__details > :is(.cart-line-pack, .cart-item__volume-nudge) {
        grid-column: 2 / -1;
        justify-self: start;
        margin-top: 8px;
    }
    section.cart-page .cart-item__image { grid-column: 1; grid-row: 1 / span 4; }
    section.cart-page .cart-item__quantity { grid-column: 3; grid-row: 1 / span 4; align-self: center; }
    section.cart-page .cart-item__total { grid-column: 4; grid-row: 1 / span 4; align-self: center; }
    section.cart-page .cart-item__remove { grid-column: 5; grid-row: 1 / span 4; align-self: center; }
    section.cart-page .cart-item__price { display: none; }
    section.cart-page .cart-item__price-mobile {
        display: block;
        margin-top: 4px;
        font-size: 13px;
        font-weight: 400;
        color: var(--color-text-muted);
    }
}

/* ── PDF quote control: a quiet secondary action, not a second CTA ────────
   (owner, 13 Oct: "more professional"). The PDF itself is the backend's;
   this styles the button and the company/PO popup on /cart and
   /checkout. The status line stays visible — every failure is said. */
:is(.cart-page, section.checkout-page) .quote-pdf { margin-top: 14px; }
:is(.cart-page, section.checkout-page) .quote-pdf__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--color-border, #dedede);
    border-radius: 12px;
    background: #fff;
    color: var(--color-text-heading, #000);
    font-size: 14px;
    font-weight: 600;
    box-shadow: none;
    transform: none;
}
:is(.cart-page, section.checkout-page) .quote-pdf__button::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='12' y1='12' x2='12' y2='18'/%3E%3Cpolyline points='9 15 12 18 15 15'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='12' y1='12' x2='12' y2='18'/%3E%3Cpolyline points='9 15 12 18 15 15'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(.cart-page, section.checkout-page) .quote-pdf__button:hover:not(:disabled) { background: #f7f7f7; color: var(--color-text-heading, #000); box-shadow: none; }
/* Company / attention / PO live in a popup opened by the button (owner
   2026-10-15, ERR-342 — replaced the "Add company or PO number" disclosure).
   Native <dialog>: the base reset zeroes its margin, so margin:auto centres it. */
:is(.cart-page, section.checkout-page) .quote-pdf__dialog {
    margin: auto;
    width: min(420px, calc(100vw - 32px));
    padding: 20px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: var(--color-text, #333);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
:is(.cart-page, section.checkout-page) .quote-pdf__dialog::backdrop { background: rgba(15, 23, 42, 0.5); }
:is(.cart-page, section.checkout-page) .quote-pdf__dialog-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--color-text-heading, #000); }
:is(.cart-page, section.checkout-page) .quote-pdf__fields-hint { margin: 4px 0 4px; font-size: 13px; color: var(--color-text-muted, #707070); }
:is(.cart-page, section.checkout-page) .quote-pdf__dialog .form-group { margin-top: 12px; }
/* Grey "Optional" in every empty box, gone once the shopper types (owner 2026-10-16, ERR-348).
   Not hidden on :focus — showModal() focuses Company on open, which would blank it at once. */
:is(.cart-page, section.checkout-page) .quote-pdf__dialog .form-input::placeholder { color: #9ca3af; opacity: 1; }
:is(.cart-page, section.checkout-page) .quote-pdf__dialog .form-label { display: block; margin: 0 0 4px; font-size: 13px; font-weight: 500; color: var(--color-text, #333); text-transform: none; letter-spacing: normal; }
/* 16px: iOS zooms the page on focus of anything smaller. */
:is(.cart-page, section.checkout-page) .quote-pdf__dialog .form-input { width: 100%; min-height: 44px; border-radius: 10px; font-size: 16px; }
/* Cancel flush left, Download flush right: two equal halves spanning the inputs (owner 2026-10-16, ERR-349).
   Too narrow for both on one line (~320 phone) ⇒ they stack full width, never wrap text. */
:is(.cart-page, section.checkout-page) .quote-pdf__dialog-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
:is(.cart-page, section.checkout-page) .quote-pdf__dialog-actions .btn { flex: 1 1 140px; min-height: 44px; white-space: nowrap; }
:is(.cart-page, section.checkout-page) .quote-pdf__status { margin-top: 6px; font-size: 12px; }
/* .btn carries a decorative ::before (modern-effects.css); the icon must not inherit its absolute box. */
:is(.cart-page, section.checkout-page) .quote-pdf__button::before {
    position: static;
    inset: auto;
    transform: none;
    opacity: 1;
    border-radius: 0;
    transition: none;
}

/* ── No dead band beside "Cart" (owner, 13 Oct: "too much white space at the
   top to the right of the Cart header"). The title sits above #cart-layout,
   so the summary column started ~110px below it. On desktop the container is
   the two-column grid and #cart-layout dissolves into it (display: contents),
   so the summary starts level with the title. No markup moves: phones keep
   their order (summary first, then the lines). */
@media (min-width: 1025px) {
    section.cart-page > .container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        /* Row 2 takes the summary's extra height, so the lines start right
           under the title instead of below a stretched row 1. */
        grid-template-rows: auto 1fr;
        column-gap: 48px;
        align-items: start;
    }
    section.cart-page > .container > * { grid-column: 1 / -1; }
    section.cart-page > .container > .cart-page__header { grid-column: 1; grid-row: 1; }
    section.cart-page #cart-layout:not([hidden]) { display: contents; }
    section.cart-page #cart-layout > .cart-main { grid-column: 1; grid-row: 2; }
    /* Guarantees beside the title, summary from row 2: the Subtotal row starts
       level with the first cart line (owner 2026-10-15, ERR-342). */
    section.cart-page #cart-layout > .cart-assurance { grid-column: 2; grid-row: 1; align-self: end; }
    section.cart-page #cart-layout > .cart-summary { grid-column: 2; grid-row: 2; }
    /* The re-price bar was drawn on #cart-layout, which no longer has a box. */
    section.cart-page #cart-layout.cart-layout--syncing::before { display: none; }
    section.cart-page #cart-layout.cart-layout--syncing > .cart-main { position: relative; }
    section.cart-page #cart-layout.cart-layout--syncing > .cart-main::before {
        content: '';
        position: absolute;
        top: -3px;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent, var(--color-primary, #267FB5), transparent);
        background-size: 200% 100%;
        animation: cart-sync-slide 1.2s linear infinite;
    }
}
/* ≤1024 #cart-layout is one column in DOM order since ERR-371 (item 23a):
   line items, then the summary, then the guarantees. The old order:-1 here
   kept the guarantees beside a summary that no longer leads. */
@keyframes cart-sync-slide { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Points pay the whole order (ERR-362): no card form, no PayPal, no wallet.
   ONE writer of the attribute: PaymentPage.setPointsMode. */
body[data-points-order="on"] section.checkout-page .payment-element-wrapper,
body[data-points-order="on"] section.checkout-page .payment-col-alt,
body[data-points-order="on"] section.checkout-page .checkout-express { display: none; }
section.checkout-page .points-pay-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: #ecfdf5; color: #047857; font-weight: 600; font-size: 14px; }
section.checkout-page .checkout-summary__total-note { margin: 2px 0 0; text-align: right; font-size: 12px; color: var(--shop-muted); }
section.checkout-page .cart-loyalty__choices { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
section.checkout-page .cart-loyalty__choice { border: 1px solid var(--shop-blue); background: #fff; color: var(--shop-blue); border-radius: 6px; padding: 4px 8px; font: inherit; font-size: 13px; cursor: pointer; }

/* Checkout summary on desktop: items two-up (left, right, next row) and the
   coupon beside the points card (owner 2026-10-16, ERR-346). Phone keeps one
   column. A hidden #cart-loyalty is display:none, so the coupon fills the row. */
@media (min-width: 1000px) {
    section.checkout-page .checkout-sidebar .checkout-summary { max-width: 640px; }
    section.checkout-page .checkout-summary__items {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 20px;
        align-items: start; /* a stretched cell pushed its price down to the taller neighbour's */
    }
    /* A cell is ~300px: image | details, the price right under the details
       (grid areas, so it never waits for the image's height). */
    section.checkout-page .checkout-summary__item {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        grid-template-areas: "img details" "img price";
        gap: 0 12px;
        align-items: start;
        margin: 0;
        padding: 0;
    }
    section.checkout-page .checkout-summary__item-image { grid-area: img; width: 52px; height: 52px; }
    section.checkout-page .checkout-summary__item-details { grid-area: details; min-width: 0; }
    section.checkout-page .checkout-summary__item-details .brand-source { line-height: 1.3; }
    section.checkout-page .checkout-summary__item-title { margin: 0; line-height: 1.3; }
    section.checkout-page .checkout-summary__item-price { grid-area: price; margin-top: 2px; font-weight: 600; }
    section.checkout-page .checkout-summary__discounts {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        align-items: stretch;
        padding: 0 0 14px;
        border-bottom: 1px solid var(--shop-line);
        margin-bottom: 4px;
    }
    /* 260px = narrowest width the input + Apply rows fit; a narrower sidebar
       (≈1000–1300 wide) stacks the two cards instead of crushing them. */
    section.checkout-page .checkout-summary__discounts > * { flex: 1 1 260px; min-width: 0; margin: 0; }
    section.checkout-page .checkout-summary__discounts > .checkout-summary__coupon { padding: 0; border: 0; }
    section.checkout-page .checkout-summary__discounts > .cart-loyalty { padding: 10px 12px; }

    /* Fit the whole sticky column on a laptop screen (owner 2026-10-16, ERR-350):
       it was 862px tall with top 38, so on a ~780px window the PDF button and
       trust lines could never come into view. */
    section.checkout-page .checkout-sidebar { padding-top: 24px; }
    /* A column taller than the window pins by its BOTTOM: --summary-top is
       min(10px, window − column − 6px), written by CheckoutPage.pinSummary().
       The page scrolls normally from either side and every line comes into
       view. Never overflow:auto here — an inner scroller trapped the wheel on
       the right side and clipped the qty badges (owner 2026-10-16, ERR-350). */
    section.checkout-page .checkout-sidebar .checkout-summary { top: var(--summary-top, 10px); }
    section.checkout-page .checkout-summary__totals { padding: 4px 0 8px; }
    section.checkout-page .checkout-summary__row { padding: 2px 0; }
    section.checkout-page .checkout-summary__row--total { margin-top: 4px; }
    section.checkout-page .checkout-summary .quote-pdf { margin-top: 10px; }
    /* Trust lines: one wrapping row instead of three stacked lines. */
    section.checkout-page .checkout-summary__trust {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 14px;
        margin-top: 12px;
        padding-top: 12px;
    }
    section.checkout-page .checkout-summary__trust-item { margin: 0; gap: 6px; font-size: 13px; }
}

/* Item 23b (ERR-371): the free-shipping line + bar sit INSIDE the totals,
   between Shipping and the total — a quiet row, not the 57px banner (+54px bar
   block, both with 24px margins) it was as a standalone box under the button:
   that cost the Checkout button 127px at 1366x768 (measured, probe:checkout-funnel). */
.cart-summary__totals .cart-summary__shipping-message {
    margin: 0;
    padding: 2px 0 0;
    background: none;
    border: 0;
    font-size: var(--font-size-xs, 0.8125rem);
    line-height: 1.35;
}
.cart-summary__totals .cart-summary__shipping-message svg { width: 16px; height: 16px; }
.cart-summary__totals .cart-summary__shipping-bar { margin: 4px 0 6px; }

/* Item 30 (ERR-371): the reassurance list under the checkout total. Compact —
   the desktop summary pins by its bottom and must fit a laptop (ERR-350). */
.checkout-reassure {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    gap: 2px;
    font-size: var(--font-size-xs, 0.8125rem);
    line-height: 1.35;
    color: var(--color-text-light);
}
.checkout-reassure[hidden] { display: none; }
.checkout-reassure li { position: relative; padding-left: 16px; }
.checkout-reassure li::before { content: "✓"; position: absolute; left: 0; color: var(--color-success, #15803d); font-weight: 700; }
.checkout-reassure--pay { margin-top: 10px; }
@media (min-width: 1025px) {
    .checkout-reassure--pay { display: none !important; }
}