/* =============================================================================
 * LICENZO CHECKOUT — BRAND TOKENS
 * =============================================================================
 *
 * H2, 2026-08-28 audit: "the checkout is off-brand, and disagrees with itself."
 * This file carried THREE colour systems at once — Tailwind gray, Tailwind slate,
 * and two different accents (indigo #4F46E5 in the base rules, blue #2563EB in the
 * `.lzco--merchandise-v2` skin) — while the product it sells is teal-navy. A
 * customer moved from a teal-branded site to an indigo checkout on the one page
 * that handles money.
 *
 * WHICH SKIN IS ACTUALLY LIVE. `views/checkout/checkout-page.php:1` emits
 * `class="lzco lzco--merchandise-v2..."` UNCONDITIONALLY, so v2 always wins the
 * cascade: the real pay button was `#2563EB`, not the `#4F46E5` the audit's H2
 * headline cites. The indigo rule is still there and still loses. Both were
 * off-brand, so the diagnosis held; the example was the dead one.
 *
 * WHY TOKENS AND NOT A FIND-AND-REPLACE. Two skins cannot disagree about a colour
 * they both read from one name. Every rule below now resolves through these, so
 * "the checkout disagrees with itself" becomes unwritable rather than merely fixed.
 *
 * WHY DEFINED HERE AND NOT IMPORTED. This stylesheet is enqueued RAW from source
 * with a `filemtime` cache-buster (CheckoutService.php:124) — it is not in Pro's
 * Vite build, there is no Tailwind on this page, and `licenzo-app-admin` (the only
 * bundle carrying the shared palette) is admin-only. A `var()` block is the one
 * mechanism available. `success-page.css` carries the same block for the same
 * reason; consolidating the two into one enqueued file is owed and is a PHP change.
 *
 * VALUES: resources/shared/theme/palette.js. Every substitution was measured on the
 * surface the element actually sits on before it was made — 68 pairs, 11 of them
 * newly clearing a WCAG threshold they were failing, and ZERO lowered except the
 * one named exception below.
 *
 * ---------------------------------------------------------------------------
 * NAMED EXCEPTION — slate-900, 8 sites, -0.03:1. A DECISION, NOT A ROUNDING ERROR.
 * ---------------------------------------------------------------------------
 * The v2 skin used Tailwind `slate-900 #0F172A` = 17.85:1 on white for its
 * near-black headings. The darkest step in the brand ramp is `neutral-900 #0E1920`
 * = 17.82:1, and there is nothing between them: `info-950 #091D27` is 17.26, worse.
 *
 * So the only in-ramp substitution LOWERS contrast by 0.03. Never-regress is
 * otherwise absolute here, and it was upheld everywhere else in this file. It is
 * waived for these 8 because the rule exists to stop two specific failures —
 * crossing a WCAG threshold, and breaking compliant sites to satisfy a linter
 * (LESSON-080) — and -0.03 at 17.8:1 does neither: both values clear the 4.5:1
 * body threshold nearly four times over, and no threshold sits anywhere near.
 * All 8 sit on `#FFFFFF` (checked individually), so nothing compounds.
 * The already-approved map in scratchpad h9-h5-h12.md §7c sends the same hex to
 * `info-950` at -0.59 — twenty times larger. Approved by the owner before shipping.
 * The alternative was to leave slate-900 in place, which keeps two invented neutral
 * scales in one stylesheet and leaves H2 open.
 * ---------------------------------------------------------------------------
 *
 * TYPE. Sizes here are the six-step scale in DESIGN_SYSTEM §2 (12/14/16/20/24/32).
 * 13px x17, 15px x6 and 18px x5 are gone. Direction was chosen per role: anything
 * a buyer reads or clicks grew or held; only meta/badge text shrank. The pay button
 * grew 15 -> 16 and no input is below 16px, which also stops iOS Safari zooming the
 * page when a card field is focused.
 * ============================================================================= */
:root {
    /* --- neutral: ONE scale. Replaces Tailwind gray AND Tailwind slate. ------ */
    --lzco-surface: #FFFFFF;          /* raised: cards, inputs, popovers        */
    --lzco-surface-muted: #F9FAFB;    /* neutral-50: summary rail, toggles      */
    --lzco-surface-sunken: #F2F4F6;   /* neutral-100: page ground, disabled     */
    --lzco-border: #E4E7E9;           /* neutral-200: dividers, card edges      */
    --lzco-border-strong: #D1D5D8;    /* neutral-300: control outlines          */
    --lzco-text-strong: #0E1920;      /* neutral-900: headings, prices, totals  */
    --lzco-text-heading: #1E2A30;     /* neutral-800: v2 field labels           */
    --lzco-text: #374248;             /* neutral-700: body                      */
    --lzco-text-muted: #4C555B;       /* neutral-600: secondary + meta          */
    --lzco-text-subtle: #6A7278;      /* neutral-500: marks, decorative glyphs  */
    --lzco-decor: #9DA3A8;            /* neutral-400: DISABLED ONLY, never text */

    /* --- action = the `info` ramp = the brand navy. Was indigo AND blue. ----- */
    --lzco-action: #2A5E75;           /* info-600  7.10:1 with white            */
    --lzco-action-rgb: 42, 94, 117;   /* for the focus ring's rgba()            */
    --lzco-action-hover: #1D4961;     /* info-700  9.64:1, the brand anchor     */
    --lzco-action-surface: #E5F6FF;   /* info-50                                */
    --lzco-action-surface-raised: #CAEBFC; /* info-100                          */
    --lzco-action-border: #AFDBF2;    /* info-200                               */

    /* --- semantic ---------------------------------------------------------- */
    --lzco-success: #2B8344;          /* success-600, the brand green's 600     */
    --lzco-success-text: #226837;     /* success-700                            */
    --lzco-success-strong: #0B4F23;   /* success-800                            */
    --lzco-success-surface: #F0FAF3;  /* success-50                             */
    --lzco-success-surface-raised: #DBF1E1; /* success-100                      */
    --lzco-success-border: #B8E3C4;   /* success-200                            */

    --lzco-danger: #BE3938;           /* danger-600                             */
    --lzco-danger-text: #9A2A2A;      /* danger-700                             */
    --lzco-danger-strong: #741C1D;    /* danger-800                             */
    --lzco-danger-surface: #FFEEEC;   /* danger-50                              */
    --lzco-danger-surface-raised: #FEDCD8; /* danger-100                        */
    --lzco-danger-border: #FC9E96;    /* danger-300 — NOT 200: 200 would drop   */
                                      /* this border 1.74 -> 1.36 vs red-300.   */

    --lzco-warning-text: #74510D;     /* warning-700                            */
    --lzco-warning-surface: #FFF0DB;  /* warning-50                             */
    --lzco-warning-border: #F8CC87;   /* warning-200                            */
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.licenzo-checkout-body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--lzco-surface-sunken);
    color: var(--lzco-text-strong);
    -webkit-font-smoothing: antialiased;
}

.lzs-preview-banner {
    background: var(--lzco-warning-surface);
    color: var(--lzco-warning-text);
    border-bottom: 1px solid var(--lzco-warning-border);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    padding: 6px 12px;
    letter-spacing: 0.03em;
    margin-bottom: 16px;
}

.lzco {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.lzco-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--lzco-surface);
    border-bottom: 1px solid var(--lzco-border);
}

.lzco-header__brand {
    font-size: 20px;
    font-weight: 700;
    color: var(--lzco-text-strong);
    text-decoration: none;
}

.lzco-header__secure {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--lzco-success-text);
    font-weight: 500;
}

.lzco-layout {
    flex: 1;
    display: grid;
    grid-template-columns: 380px 1fr;
    max-width: 1000px;
    width: 100%;
    margin: 32px auto;
    gap: 0;
    background: var(--lzco-surface);
    border-radius: 12px;
    border: 1px solid var(--lzco-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.lzco-summary {
    padding: 32px 28px;
    background: var(--lzco-surface-muted);
    border-right: 1px solid var(--lzco-border);
}

.lzco-summary__title {
    margin: 0 0 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--lzco-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lzco-summary__product {
    margin-bottom: 20px;
}

.lzco-summary__product-name {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    color: var(--lzco-text-strong);
}

.lzco-summary__product-desc {
    margin: 0;
    font-size: 14px;
    color: var(--lzco-text-muted);
    line-height: 1.5;
}

.lzco-summary__plan {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 16px;
    background: var(--lzco-surface);
    border: 1px solid var(--lzco-border);
    border-radius: 8px;
    margin-bottom: 12px;
}

.lzco-summary__plan-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--lzco-text);
}

.lzco-summary__plan-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--lzco-text-strong);
}

.lzco-summary__plan-cycle {
    font-size: 12px;
    font-weight: 400;
    color: var(--lzco-text-muted);
}

.lzco-summary__trial {
    margin: 0 0 16px;
    font-size: 12px;
    color: var(--lzco-success-text);
    font-weight: 500;
}

.lzco-summary__totals {
    border-top: 1px solid var(--lzco-border);
    padding-top: 16px;
    margin-top: 16px;
}

.lzco-summary__row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
    color: var(--lzco-text-muted);
}

.lzco-summary__row--discount {
    color: var(--lzco-success-text);
}

.lzco-summary__row--total {
    border-top: 1px solid var(--lzco-border);
    margin-top: 8px;
    padding-top: 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--lzco-text-strong);
}

.lzco-summary__totals--loading {
    opacity: 0.92;
}

.lzco-summary__totals--loading .lzco-summary__row--total {
    opacity: 0.55;
}

.lzco-summary__value--loading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--lzco-text-muted);
    font-size: 14px;
    font-weight: 500;
}

.lzco-summary__value--loading::before {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid var(--lzco-border-strong);
    border-top-color: var(--lzco-text-muted);
    border-radius: 50%;
    animation: lzco-spin 0.7s linear infinite;
    flex-shrink: 0;
}

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

.lzco-form-section {
    padding: 32px 28px;
}

.lzco-step__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--lzco-text-strong);
}

.lzco-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--lzco-action);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.lzco-form__field {
    margin-bottom: 16px;
}

.lzco-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.lzco-form__label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--lzco-text);
}

.lzco-form__optional {
    color: var(--lzco-text-muted);
    font-weight: 400;
}

.lzco-form__input {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--lzco-border-strong);
    border-radius: 6px;
    background: var(--lzco-surface);
    color: var(--lzco-text-strong);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.lzco-form__input:focus {
    border-color: var(--lzco-action);
    box-shadow: 0 0 0 3px rgba(var(--lzco-action-rgb), 0.18);
}

.lzco-form__input:disabled {
    background: var(--lzco-surface-sunken);
    color: var(--lzco-text-muted);
    cursor: not-allowed;
}

.lzco-form__select {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--lzco-border-strong);
    border-radius: 6px;
    background: var(--lzco-surface);
    color: var(--lzco-text-strong);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.lzco-form__select:focus {
    border-color: var(--lzco-action);
    box-shadow: 0 0 0 3px rgba(var(--lzco-action-rgb), 0.18);
}

.lzco-form__select:disabled {
    background-color: var(--lzco-surface-sunken);
    color: var(--lzco-text-muted);
    cursor: not-allowed;
}

.lzco-form__error {
    padding: 10px 14px;
    margin-bottom: 16px;
    background: var(--lzco-danger-surface);
    border: 1px solid var(--lzco-danger-border);
    border-radius: 6px;
    font-size: 12px;
    color: var(--lzco-danger-strong);
}

.lzco-form__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: var(--lzco-action);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.lzco-form__submit:hover {
    background: var(--lzco-action-hover);
}

.lzco-form__submit:disabled {
    background: var(--lzco-decor);
    cursor: not-allowed;
}

.lzco-step__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lzco-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--lzco-action);
    background: none;
    border: 1px solid var(--lzco-border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.lzco-back-link:hover {
    background: var(--lzco-action-surface);
    border-color: var(--lzco-action-border);
}

.lzco-step--payment {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--lzco-border);
}

.lzco-step--payment.lzco-step--inactive {
    opacity: 0.4;
    pointer-events: none;
}

.lzco-checkout-frame {
    min-height: 400px;
}

.lzco-footer {
    text-align: center;
    padding: 20px;
    font-size: 12px;
    color: var(--lzco-text-muted);
}

.lzco-combobox {
    position: relative;
}

.lzco-combobox::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    pointer-events: none;
    transform: translateY(-50%);
    transition: transform 0.15s ease;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.lzco-combobox--open::after {
    transform: translateY(-50%) rotate(180deg);
}

.lzco-combobox__input {
    padding-right: 40px;
}

.lzco-combobox__input[readonly] {
    cursor: pointer;
}

.lzco-combobox__native {
    display: none;
}

.lzco-combobox__list {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    background: var(--lzco-surface);
    border: 1px solid var(--lzco-border-strong);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.lzco-combobox__option {
    padding: 8px 12px;
    font-size: 14px;
    color: var(--lzco-text);
    border-radius: 6px;
    cursor: pointer;
}

.lzco-combobox__option:hover,
.lzco-combobox__option--active {
    background: var(--lzco-action-surface);
    color: var(--lzco-action-hover);
}

.lzco-combobox__empty {
    padding: 8px 12px;
    font-size: 14px;
    color: var(--lzco-text-muted);
}

.lzco-summary__discount {
    border-top: 1px solid var(--lzco-border);
    padding-top: 16px;
    margin-top: 16px;
}

.lzco-summary__discount-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--lzco-text);
}

.lzco-discount-row {
    display: flex;
    gap: 8px;
}

.lzco-discount-row .lzco-form__input {
    flex: 1;
}

.lzco-discount-apply {
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--lzco-action);
    background: var(--lzco-action-surface);
    border: 1px solid var(--lzco-action-border);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.lzco-discount-apply:hover {
    background: var(--lzco-action-surface-raised);
}

.lzco-discount-apply:disabled {
    color: var(--lzco-decor);
    background: var(--lzco-surface-sunken);
    border-color: var(--lzco-border-strong);
    cursor: not-allowed;
}

.lzco-discount-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--lzco-success-surface);
    border: 1px solid var(--lzco-success-border);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--lzco-success-strong);
}

.lzco-discount-remove {
    margin-left: auto;
    padding: 0 4px;
    font-size: 16px;
    line-height: 1;
    color: var(--lzco-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}

.lzco-discount-remove:hover {
    color: var(--lzco-danger-text);
    background: var(--lzco-danger-surface-raised);
}

.lzco-discount-error {
    margin-top: 6px;
    font-size: 12px;
    color: var(--lzco-danger);
}

@media (max-width: 768px) {
    .lzco-layout {
        grid-template-columns: 1fr;
        margin: 16px;
        border-radius: 8px;
    }

    .lzco-summary {
        border-right: none;
        border-bottom: 1px solid var(--lzco-border);
        padding: 24px 20px;
    }

    .lzco-form-section {
        padding: 24px 20px;
    }

    .lzco-form__row {
        grid-template-columns: 1fr;
    }

    .lzco-header {
        padding: 12px 16px;
    }
}

/* Preview / View-path merchandise v2 — additional scoped rules; global .lzco rules above apply to production too */
.licenzo-checkout-main {
    width: 100%;
}

body.licenzo-checkout-page .lzco--merchandise-v2,
.licenzo-checkout-main .lzco--merchandise-v2 {
    min-height: auto;
    /* Neutral, transparent breathing room — the grey backdrop lives on the
       contained card below, so this space stays theme-background. Clamps on mobile. */
    padding: clamp(48px, 12vh, 150px) 16px;
    background: transparent;
}

/*
 * Block themes cap direct children of .is-layout-constrained to content-size unless
 * they carry .alignfull (WP core convention). We opt in via alignfull on the template
 * wrapper, then set checkout-owned width here — no theme-specific overrides.
 */
.lzco.lzco--merchandise-v2.lzco--theme-shell {
    --lzco-checkout-max-width: 72rem;
    width: 100%;
    max-width: var(--lzco-checkout-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}

body.licenzo-checkout-page .lzco--theme-shell .lzco-header,
.lzco--theme-shell .lzco-header {
    display: none !important;
}

.lzco--merchandise-v2 .lzco-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 1120px;
    width: 100%;
    margin: 0 auto;
    /* Slim contained grey backdrop hugging the card. Contained (not full-bleed)
       so it can't conflict with the theme's full-width layout / root padding. */
    background: var(--lzco-surface-sunken);
    border: none;
    border-radius: 16px;
    box-shadow: none;
    overflow: visible;
    padding: 20px;
}

.lzco--merchandise-v2 .lzco-main-card,
.lzco--merchandise-v2 .lzco-summary--card {
    background: var(--lzco-surface);
    border: 1px solid var(--lzco-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.lzco--merchandise-v2 .lzco-form-section {
    padding: 0;
}

.lzco--merchandise-v2 .lzco-main-card {
    order: 2;
    padding: 28px 28px 32px;
}

.lzco--merchandise-v2 .lzco-summary--card {
    order: 1;
    padding: 0;
    border-right: none;
    background: var(--lzco-surface);
}

.lzco--merchandise-v2 .lzco-summary__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 16px 20px;
    font: inherit;
    color: var(--lzco-text-strong);
    background: var(--lzco-surface);
    border: none;
    border-radius: 12px;
    cursor: pointer;
}

.lzco--merchandise-v2 .lzco-summary__toggle-label {
    font-size: 16px;
    font-weight: 600;
}

.lzco--merchandise-v2 .lzco-summary__toggle-total {
    margin-left: auto;
    font-size: 16px;
    font-weight: 700;
    color: var(--lzco-text-strong);
}

.lzco--merchandise-v2 .lzco-summary__toggle-icon {
    flex-shrink: 0;
    color: var(--lzco-text-muted);
    transition: transform 0.2s ease;
}

.lzco--merchandise-v2 .lzco-summary--collapsed .lzco-summary__toggle-icon {
    transform: rotate(-90deg);
}

.lzco--merchandise-v2 .lzco-summary__body {
    padding: 0 20px 20px;
}

.lzco--merchandise-v2 .lzco-summary--collapsed .lzco-summary__body {
    display: none;
}

.lzco--merchandise-v2 .lzco-summary__title {
    display: none;
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--lzco-text-strong);
    text-transform: none;
    letter-spacing: normal;
}

.lzco--merchandise-v2 .lzco-line-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--lzco-border);
}

.lzco--merchandise-v2 .lzco-line-item__thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--lzco-surface-muted);
    border: 1px solid var(--lzco-border);
}

.lzco--merchandise-v2 .lzco-line-item__thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lzco-text-subtle);
}

.lzco--merchandise-v2 .lzco-line-item__name {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--lzco-text-strong);
    line-height: 1.35;
}

.lzco--merchandise-v2 .lzco-line-item__plan {
    margin: 0;
    font-size: 12px;
    color: var(--lzco-text-muted);
    line-height: 1.4;
}

.lzco--merchandise-v2 .lzco-line-item__price {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--lzco-text-strong);
    white-space: nowrap;
}

/* Sale context (Model B) — line-item only; never part of the totals block. */
.lzco-line-item__sale {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.4;
}

.lzco-line-item__regular {
    color: var(--lzco-text-muted);
}

.lzco-line-item__now {
    color: var(--lzco-text);
    font-weight: 600;
}

.lzco-line-item__save {
    color: var(--lzco-success-text);
    font-weight: 600;
    background: var(--lzco-success-surface);
    border-radius: 999px;
    padding: 1px 8px;
}

.lzco--merchandise-v2 .lzco-section-title {
    margin: 0 0 20px;
    font-size: 20px;
    font-weight: 600;
    color: var(--lzco-text-strong);
    letter-spacing: -0.01em;
}

.lzco--merchandise-v2 .lzco-form__required {
    color: var(--lzco-danger);
}

.lzco--merchandise-v2 .lzco-combobox__input {
    min-height: 44px;
}

.lzco--merchandise-v2 .lzco-combobox__list {
    z-index: 50;
}

.lzco--merchandise-v2 .lzco-form__input,
.lzco--merchandise-v2 .lzco-form__select,
.lzco--merchandise-v2 .lzco-select {
    border-color: var(--lzco-border-strong);
    border-radius: 8px;
    min-height: 44px;
}

.lzco--merchandise-v2 .lzco-form__input:focus,
.lzco--merchandise-v2 .lzco-form__select:focus,
.lzco--merchandise-v2 .lzco-select:focus {
    border-color: var(--lzco-action);
    box-shadow: 0 0 0 3px rgba(var(--lzco-action-rgb), 0.18);
}

.lzco--merchandise-v2 .lzco-form__submit {
    background: var(--lzco-action);
    border-radius: 8px;
    min-height: 48px;
}

.lzco--merchandise-v2 .lzco-form__submit:hover {
    background: var(--lzco-action-hover);
}

/* TASK-085 — the disabled Pay button used to render as an ENABLED Pay button.
 * `.lzco-form__submit:disabled` in the base block is (0,2,0): one class plus one
 * pseudo-class. `.lzco--merchandise-v2 .lzco-form__submit` above is ALSO (0,2,0):
 * two classes. A tie is settled by source order, the skin rule comes later, and
 * the v2 skin is emitted unconditionally by views/checkout/checkout-page.php:1 —
 * so `background: var(--lzco-decor)` never applied and a disabled button computed
 * the enabled teal on the one page that takes money.
 *
 * SPECIFICITY IS RAISED, deliberately, rather than reordering the file or reaching
 * for !important. The skin block is supposed to win over the base block; only this
 * one pair needed to go the other way, and (0,3,0) says so locally instead of making
 * the whole file order-sensitive. Placed AFTER the :hover rule above, which is also
 * (0,3,0) and still matches while a button is disabled.
 *
 * WCAG: disabled controls are exempt from 1.4.3. Do NOT darken these values to hit
 * a contrast ratio — the low contrast is the affordance. */
.lzco--merchandise-v2 .lzco-form__submit:disabled {
    background: var(--lzco-decor);
    opacity: 0.55;
    cursor: not-allowed;
}

.lzco--merchandise-v2 .lzco-step--payment {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--lzco-border);
}

.lzco--merchandise-v2 .lzco-main-card--payment-active .lzco-step--payment {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.lzco--merchandise-v2 .lzco-step__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.lzco--merchandise-v2 .lzco-step__header .lzco-section-title {
    margin: 0;
}

.lzco--merchandise-v2 .lzco-step--payment.lzco-step--inactive {
    display: none;
}

.lzco--merchandise-v2 .lzco-payment-error {
    margin-top: 12px;
    margin-bottom: 0;
}

.lzco--merchandise-v2 .lzco-step--details .lzco-form__submit {
    margin-top: 24px;
}

.lzco--merchandise-v2 .lzco-step--details .lzco-form__submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.lzco--merchandise-v2 .lzco-field-error {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--lzco-danger);
}

.lzco--merchandise-v2 .lzco-back-link--text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--lzco-action);
    background: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
}

.lzco--merchandise-v2 .lzco-back-link--text:hover {
    background: none;
    text-decoration: underline;
}

.lzco--merchandise-v2 .lzco-step--payment:not(.lzco-step--inactive) .lzco-checkout-frame--card {
    min-height: 320px;
    padding: 4px 0;
}

.lzco--merchandise-v2 .lzco-summary__totals {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.lzco--merchandise-v2 .lzco-summary__row {
    padding: 8px 0;
    font-size: 14px;
    color: var(--lzco-text);
}

.lzco--merchandise-v2 .lzco-summary__row--total {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--lzco-border);
    font-size: 20px;
    font-weight: 700;
    color: var(--lzco-text-strong);
}

.lzco--merchandise-v2 .lzco-summary__row--total span:first-child {
    color: var(--lzco-text-strong);
}

.lzco--merchandise-v2 .lzco-summary__trial {
    margin: 4px 0 0;
    font-size: 12px;
}

.lzco--merchandise-v2 .lzco-summary__product-desc {
    display: none;
}

.lzco--merchandise-v2 .lzco-field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--lzco-text-heading);
}

.lzco--merchandise-v2 .lzco-select {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--lzco-text-strong);
    background: var(--lzco-surface);
    border: 1px solid var(--lzco-border-strong);
    border-radius: 8px;
    margin-bottom: 0;
}

.lzco--merchandise-v2 .lzco-summary__plan-picker {
    margin-bottom: 16px;
}

.lzco--merchandise-v2 .lzco-summary__discount {
    border-top: none;
    padding: 8px 0 4px;
    margin-top: 0;
}

.lzco--merchandise-v2 .lzco-discount-toggle {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--lzco-text-heading);
    text-align: center;
    background: var(--lzco-surface-muted);
    border: 1px solid var(--lzco-border);
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}

.lzco--merchandise-v2 .lzco-discount-toggle:hover {
    background: var(--lzco-surface-sunken);
    text-decoration: none;
}

.lzco--merchandise-v2 .lzco-discount-panel {
    margin-top: 10px;
}

.lzco--merchandise-v2 .lzco-discount-apply {
    color: var(--lzco-action);
    background: var(--lzco-action-surface);
    border-color: var(--lzco-action-border);
}

/* TASK-085, same defect as the Pay button above: `.lzco-discount-apply:disabled`
 * in the base block is (0,2,0) and lost the tie to the (0,2,0) skin rule directly
 * above, so a disabled Apply button was byte-identical to an enabled one — only
 * the cursor differed. Same remedy: (0,3,0), same declarations the base rule
 * already intended. Disabled, therefore WCAG-exempt. */
.lzco--merchandise-v2 .lzco-discount-apply:disabled {
    color: var(--lzco-decor);
    background: var(--lzco-surface-sunken);
    border-color: var(--lzco-border-strong);
    cursor: not-allowed;
}

.lzco--merchandise-v2 .lzco-footer {
    max-width: 1120px;
    margin: 0 auto;
    padding: 16px 0 0;
}

.lzco--merchandise-v2 .lzco-main-card__extension {
    margin-top: 30px;
}

.lzco--merchandise-v2 .lzco-summary__footer {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--lzco-border);
}

.lzco--merchandise-v2 .lzco-summary__extension + .lzco-summary__branding {
    margin-top: 12px;
}

.lzco--merchandise-v2 .lzco-summary__branding {
    text-align: center;
    font-size: 12px;
    color: var(--lzco-text-muted);
}

@media (min-width: 900px) {
    body.licenzo-checkout-page .lzco--merchandise-v2,
    .licenzo-checkout-main .lzco--merchandise-v2 {
        padding: clamp(48px, 12vh, 150px) 24px;
    }

    .lzco--merchandise-v2 .lzco-layout {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
        gap: 24px;
        align-items: start;
    }

    .lzco--merchandise-v2 .lzco-main-card {
        order: 1;
    }

    .lzco--merchandise-v2 .lzco-summary--card {
        order: 2;
        position: sticky;
        top: 24px;
    }

    .lzco--merchandise-v2 .lzco-summary__toggle {
        display: none;
    }

    .lzco--merchandise-v2 .lzco-summary__title {
        display: block;
    }

    .lzco--merchandise-v2 .lzco-summary__body {
        padding: 24px;
    }

    .lzco--merchandise-v2 .lzco-summary--collapsed .lzco-summary__body {
        display: block;
    }
}

@media (max-width: 899px) {
    .lzco--merchandise-v2 .lzco-form__row {
        grid-template-columns: 1fr;
    }

    .lzco--merchandise-v2 .lzco-main-card {
        padding: 24px 20px 28px;
    }
}