/*
 * CartFly default theme.
 *
 * Plain CSS, no build step, no framework (D15). --cf-accent and
 * --cf-accent-text are written into the page by the layout from theme
 * settings, so recolouring a shop is a settings change rather than a
 * stylesheet edit.
 *
 * A NEUTRAL FOUNDATION, ON PURPOSE. This theme is not CartFly-branded - it is
 * what a fashion label, a supplement brand, or an electronics shop all start
 * from, then recolour with the two settings above. Nothing here assumes a
 * particular merchant's identity.
 *
 * Everything below is prefixed `cf-` so a merchant adding their own classes to
 * a copied theme cannot collide with these by accident.
 */

:root {
    --cf-bg: #ffffff;
    --cf-surface: #ffffff;
    --cf-fg: #14181c;
    --cf-muted: #6b7278;
    --cf-line: #e7e9ec;
    --cf-line-strong: #d7dade;
    --cf-panel: #f7f8f7;
    --cf-warn: #8a4b08;
    --cf-warn-bg: #fdf3e6;
    --cf-ok: #1b5e3f;
    --cf-ok-bg: #eaf5ef;
    --cf-radius: 10px;
    --cf-radius-sm: 6px;
    --cf-shadow: 0 1px 2px rgba(20, 24, 28, .04), 0 6px 16px rgba(20, 24, 28, .05);
    --cf-gap: 1.5rem;
    --cf-max: 1320px;

    /* Overridden inline by the layout from theme settings. */
    --cf-accent: #111827;
    --cf-accent-text: #ffffff;
    --cf-grid-columns: 4;
}

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

body {
    margin: 0;
    background: var(--cf-bg);
    color: var(--cf-fg);
    font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: inherit; }

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; }

.cf-container {
    width: 100%;
    max-width: var(--cf-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (max-width: 640px) {
    .cf-container { padding: 0 1rem; }
}

.cf-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Announcement, header, footer ------------------------------------- */

/* --- Promo bar --------------------------------------------------------
   Merchant-configured announcement. Display only.

   The track holds the message twice when scrolling, and the animation
   translates it by exactly -50% so the second copy arrives where the first
   began - that is what makes the loop seamless rather than jumping. The
   duplicate is aria-hidden, so a screen reader hears the message once.

   Reduced motion pins it static instead of hiding it: the message is
   content, and someone who dislikes movement still wants to read it. */

.cf-promo {
    background: var(--cf-accent);
    color: var(--cf-accent-text);
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    /* Contains the moving track: without this the page scrolls sideways. */
    overflow: hidden;
}

.cf-promo__inner {
    display: block;
    padding: 0.55rem 1rem;
    color: inherit;
    text-align: center;
}

.cf-promo__cta {
    margin-left: 0.5rem;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.cf-promo--scrolling .cf-promo__inner {
    text-align: left;
    white-space: nowrap;
}

.cf-promo--scrolling .cf-promo__track {
    display: inline-flex;
    /* Two copies, so -50% lands the second exactly where the first started. */
    animation: cf-promo-scroll 24s linear infinite;
    will-change: transform;
}

.cf-promo--scrolling .cf-promo__item {
    padding-right: 3rem;
}

@keyframes cf-promo-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .cf-promo--scrolling .cf-promo__track {
        animation: none;
    }

    .cf-promo--scrolling .cf-promo__inner {
        text-align: center;
        white-space: normal;
    }

    /* The duplicate exists only to make movement seamless; with no movement
       it would just read twice. */
    .cf-promo--scrolling .cf-promo__item[aria-hidden="true"] {
        display: none;
    }
}

.cf-header {
    border-bottom: 1px solid var(--cf-line);
    position: sticky;
    top: 0;
    background: var(--cf-surface);
    z-index: 20;
}

.cf-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--cf-gap);
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

.cf-header__brand {
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.01em;
    text-decoration: none;
    justify-self: start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-header__nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    justify-self: center;
    font-size: 0.9rem;
    font-weight: 500;
}

.cf-header__nav a { text-decoration: none; }
.cf-header__nav a:hover { color: var(--cf-muted); }

.cf-header__actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    justify-self: end;
    font-size: 0.9rem;
}

.cf-header__account { display: flex; align-items: center; gap: 0.9rem; }

.cf-search { display: flex; gap: 0.35rem; align-items: center; }
.cf-search input {
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius-sm);
    font: inherit;
    font-size: 0.85rem;
    width: 11rem;
}
.cf-search button {
    border: 1px solid var(--cf-line);
    background: var(--cf-panel);
    border-radius: var(--cf-radius-sm);
    padding: 0.4rem 0.7rem;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.cf-icon-btn {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
}

.cf-cart-badge {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    position: relative;
    padding: 0.2rem;
}

.cf-cart-badge svg { width: 22px; height: 22px; }

.cf-cart-badge__count {
    position: absolute;
    top: -0.35rem;
    right: -0.5rem;
    background: var(--cf-accent);
    color: var(--cf-accent-text);
    border-radius: 999px;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

/* --- Mobile header menu ------------------------------------------------- */

.cf-menu-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 0.25rem;
    cursor: pointer;
}
.cf-menu-toggle svg { width: 22px; height: 22px; }

@media (max-width: 760px) {
    .cf-header__inner { grid-template-columns: auto 1fr auto; }
    .cf-header__nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--cf-surface);
        border-bottom: 1px solid var(--cf-line);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 0.5rem 0;
    }
    .cf-header__nav a { padding: 0.65rem 1rem; width: 100%; }
    .cf-header.is-menu-open .cf-header__nav { display: flex; }
    .cf-menu-toggle { display: inline-flex; }
    .cf-search { display: none; }
    .cf-header__account span.cf-header__name { display: none; }
}

.cf-main { padding: 2.5rem 0 4rem; min-height: 60vh; }

.cf-footer {
    border-top: 1px solid var(--cf-line);
    margin-top: 3rem;
    padding: 2.5rem 0;
    color: var(--cf-muted);
    font-size: 0.9rem;
}

.cf-footer__inner {
    display: flex;
    justify-content: space-between;
    gap: var(--cf-gap);
    flex-wrap: wrap;
}

.cf-footer__name { font-weight: 650; color: var(--cf-fg); margin: 0 0 0.25rem; }
.cf-footer__text { margin: 0; white-space: pre-line; }
.cf-footer__links { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* --- Grid and cards ----------------------------------------------------- */

.cf-grid {
    display: grid;
    grid-template-columns: repeat(var(--cf-grid-columns), minmax(0, 1fr));
    gap: 1.75rem 1.5rem;
}

@media (max-width: 1000px) { .cf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .cf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; } }
@media (max-width: 420px) { .cf-grid { grid-template-columns: 1fr; } }

/* Merchant mobile-display preference. `theme` has no rule here, so the
   active theme's own responsive grid remains authoritative. */
@media (max-width: 720px) {
    body[data-cf-mobile-products-per-row="1"] .cf-grid,
    body[data-cf-mobile-products-per-row="2"] .cf-grid {
        gap: 1.25rem 1rem;
    }
    body[data-cf-mobile-products-per-row="1"] .cf-grid { grid-template-columns: 1fr; }
    body[data-cf-mobile-products-per-row="2"] .cf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cf-card { display: block; }
.cf-card__link { text-decoration: none; display: block; color: inherit; }

.cf-card__media {
    background: var(--cf-panel);
    border-radius: var(--cf-radius);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: opacity .15s ease;
}

.cf-card__link:hover .cf-card__media { opacity: 0.92; }

.cf-card__media img { width: 100%; height: 100%; object-fit: cover; }
.cf-card__placeholder { display: block; width: 100%; height: 100%; }
.cf-card__title {
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0.85rem 0 0.3rem;
}
.cf-card__price { margin: 0; font-size: 0.95rem; }
.cf-card__stock { color: var(--cf-muted); font-size: 0.85rem; margin: 0.3rem 0 0; }

.cf-price { font-weight: 600; }
.cf-price--was { color: var(--cf-muted); margin-left: 0.5rem; font-weight: 400; text-decoration: line-through; }

/* --- Sections and pages -------------------------------------------------- */

.cf-hero { padding: 1rem 0 2.5rem; }
.cf-hero h1 { margin: 0; font-size: clamp(1.9rem, 4vw, 3rem); }

.cf-section__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1.5rem;
}

.cf-page-head { margin-bottom: 2rem; }
.cf-page-head h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; }
.cf-muted { color: var(--cf-muted); }
.cf-hint { color: var(--cf-muted); font-size: 0.875rem; margin: 0.35rem 0 0; }
.cf-empty { color: var(--cf-muted); padding: 3rem 0; text-align: center; }
.cf-center { text-align: center; }
.cf-narrow { max-width: 26rem; margin: 0 auto; }

.cf-panel {
    background: var(--cf-surface);
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    padding: 1.5rem;
    margin-bottom: var(--cf-gap);
    box-shadow: var(--cf-shadow);
}

.cf-panel h2 { margin-top: 0; font-size: 1.05rem; }

.cf-stat { font-size: 2.25rem; font-weight: 700; margin: 0; letter-spacing: -0.02em; }

.cf-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.5rem;
    letter-spacing: 0.15em;
    margin: 0 0 1rem;
}

.cf-tag {
    display: inline-block;
    background: var(--cf-panel);
    color: var(--cf-fg);
    border: 1px solid var(--cf-line);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    vertical-align: middle;
    margin-left: 0.4rem;
}

/* --- Product page -------------------------------------------------------- */

.cf-product { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3.5rem; align-items: start; }
@media (max-width: 900px) { .cf-product { grid-template-columns: 1fr; gap: 1.5rem; } }

.cf-product__media { position: sticky; top: 6rem; }
@media (max-width: 900px) { .cf-product__media { position: static; } }

.cf-product__media-main {
    background: var(--cf-panel);
    border-radius: var(--cf-radius);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cf-product__media-main img { width: 100%; height: 100%; object-fit: cover; }

.cf-product__thumbs { display: flex; gap: 0.6rem; margin-top: 0.85rem; flex-wrap: wrap; }
.cf-product__thumbs button {
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--cf-radius-sm);
    background: var(--cf-panel);
    cursor: pointer;
    overflow: hidden;
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
}
.cf-product__thumbs button.is-active { border-color: var(--cf-fg); }
.cf-product__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cf-product__detail h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 0.6rem; }
.cf-product__price { font-size: 1.3rem; margin: 0 0 1.25rem; }
.cf-product__stock { color: var(--cf-warn); font-size: 0.9rem; }
.cf-product__description { white-space: normal; margin: 1.25rem 0; color: var(--cf-fg); }
.cf-product__description p { margin: 0 0 0.75rem; }

.cf-add-form { display: flex; align-items: center; gap: 0.75rem; margin: 1.5rem 0 0.5rem; flex-wrap: wrap; }
.cf-add-form label { font-size: 0.85rem; font-weight: 600; }

.cf-qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius-sm);
    overflow: hidden;
}
.cf-qty-stepper button {
    background: var(--cf-panel);
    border: 0;
    width: 2.25rem;
    height: 2.5rem;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: var(--cf-fg);
}
.cf-qty-stepper input {
    width: 3rem;
    text-align: center;
    border: 0;
    border-left: 1px solid var(--cf-line);
    border-right: 1px solid var(--cf-line);
    height: 2.5rem;
    font: inherit;
    -moz-appearance: textfield;
}
.cf-qty-stepper input::-webkit-outer-spin-button,
.cf-qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cf-add-form .cf-button { flex: 0 0 auto; padding: 0.75rem 2rem; }

/* Empty until the progressive enhancement has something to report, so it
   takes no vertical space on a page that never ran the script. */
.cf-add-status { margin: 0.5rem 0 0; color: var(--cf-ok); font-size: 0.9rem; }
.cf-add-status:empty { display: none; }
.cf-add-status.is-error { color: var(--cf-warn); }

/* --- Cart ---------------------------------------------------------------- */

.cf-cart {
    display: grid;
    grid-template-columns: 1fr 22rem;
    gap: 3rem;
    align-items: start;
}
@media (max-width: 900px) { .cf-cart { grid-template-columns: 1fr; gap: 2rem; } }

.cf-cart-lines { display: flex; flex-direction: column; }

.cf-cart-line {
    display: grid;
    grid-template-columns: 6rem 1fr auto;
    gap: 1.25rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--cf-line);
    align-items: start;
}
.cf-cart-line:first-child { padding-top: 0; }
.cf-cart-line.is-unavailable { opacity: 0.55; }

.cf-cart-line__media {
    width: 6rem; height: 6rem;
    background: var(--cf-panel);
    border-radius: var(--cf-radius-sm);
    overflow: hidden;
}
.cf-cart-line__media img { width: 100%; height: 100%; object-fit: cover; }

.cf-cart-line__title { font-weight: 600; margin: 0 0 0.2rem; text-decoration: none; display: inline-block; }
.cf-cart-line__meta { color: var(--cf-muted); font-size: 0.88rem; margin: 0 0 0.75rem; }

.cf-cart-line__controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cf-cart-line__controls form { display: flex; align-items: center; gap: 0.5rem; }

.cf-cart-line__totals { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.cf-cart-line__total { font-weight: 650; }

@media (max-width: 560px) {
    .cf-cart-line { grid-template-columns: 4.5rem 1fr; }
    .cf-cart-line__media { width: 4.5rem; height: 4.5rem; }
    .cf-cart-line__totals { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 0.5rem; }
}

.cf-cart-summary {
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    padding: 1.5rem;
    background: var(--cf-panel);
    position: sticky;
    top: 6rem;
}
.cf-cart-summary h2 { font-size: 1.05rem; margin: 0 0 1rem; }
.cf-cart-summary__row { display: flex; justify-content: space-between; font-size: 1rem; margin: 0 0 0.5rem; }
.cf-cart-summary__row--total { font-size: 1.15rem; font-weight: 700; border-top: 1px solid var(--cf-line); padding-top: 0.85rem; margin-top: 0.6rem; }
.cf-cart-summary .cf-button { width: 100%; margin-top: 1rem; text-align: center; padding: 0.85rem; }
.cf-cart-summary .cf-button--secondary { margin-top: 0.6rem; margin-left: 0; }

/* --- Account ------------------------------------------------------------- */

.cf-account-nav { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 0 0 2rem; border-bottom: 1px solid var(--cf-line); padding-bottom: 0.9rem; }
.cf-account-nav a { text-decoration: none; color: var(--cf-muted); font-size: 0.9rem; font-weight: 500; }
.cf-account-nav [aria-current="page"] { color: var(--cf-fg); font-weight: 650; }

.cf-address-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cf-gap); }
@media (max-width: 700px) { .cf-address-grid { grid-template-columns: 1fr; } }

.cf-address-list { list-style: none; padding: 0; margin: 0; }
.cf-address-list p { margin: 0; }
.cf-address__type { font-weight: 600; }

.cf-details summary { cursor: pointer; margin: 0.75rem 0; }

/* --- Forms --------------------------------------------------------------- */

.cf-form { display: block; }
.cf-field { margin-bottom: 1.1rem; }
.cf-field label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; }
.cf-field--check { display: flex; align-items: center; gap: 0.5rem; }
.cf-field--check label { margin: 0; font-weight: 400; }
.cf-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .cf-field-row { grid-template-columns: 1fr; } }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="search"], input[type="number"], select, textarea {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--cf-line-strong);
    border-radius: var(--cf-radius-sm);
    background: #fff;
    color: inherit;
    font: inherit;
    font-size: 0.95rem;
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--cf-fg);
    outline-offset: 1px;
}

input:disabled { background: var(--cf-panel); color: var(--cf-muted); }

.cf-button {
    display: inline-block;
    background: var(--cf-accent);
    color: var(--cf-accent-text);
    border: 0;
    border-radius: var(--cf-radius-sm);
    padding: 0.65rem 1.3rem;
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .15s ease;
}
.cf-button:hover { opacity: 0.88; }

.cf-button--secondary {
    background: transparent;
    color: inherit;
    border: 1px solid var(--cf-line-strong);
    margin-left: 0.5rem;
}
.cf-button--secondary:hover { background: var(--cf-panel); opacity: 1; }

.cf-linkish {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.9rem;
    color: var(--cf-muted);
    text-decoration: underline;
    cursor: pointer;
}
.cf-linkish:hover { color: var(--cf-fg); }

.cf-inline-form { display: inline-flex; gap: 0.35rem; align-items: center; }

/* --- Alerts -------------------------------------------------------------- */

.cf-alert {
    border-radius: var(--cf-radius);
    padding: 0.85rem 1.1rem;
    margin-bottom: var(--cf-gap);
    border: 1px solid transparent;
    font-size: 0.92rem;
}

.cf-alert--ok { background: var(--cf-ok-bg); color: var(--cf-ok); border-color: currentColor; }
.cf-alert--warn { background: var(--cf-warn-bg); color: var(--cf-warn); border-color: currentColor; }
.cf-alert__list { margin: 0; padding-left: 1.1rem; }

/* --- Pagination ---------------------------------------------------------- */

.cf-pagination { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 3rem; }
.cf-pagination__link.is-disabled { color: var(--cf-muted); }
.cf-pagination__status { color: var(--cf-muted); font-size: 0.9rem; }

/* --- Access wall ---------------------------------------------------------
   Its own page, not the storefront shell: the shell carries a cart badge and
   a search box, and a gated shop shows neither. */

.cf-wall-body { background: var(--cf-panel); }

.cf-wall {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.cf-wall__panel {
    background: var(--cf-bg);
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    box-shadow: var(--cf-shadow);
    padding: 2.25rem;
    max-width: 32rem;
    width: 100%;
}

.cf-wall__store { color: var(--cf-muted); margin: 0 0 0.5rem; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.cf-wall__headline { margin: 0 0 1rem; font-size: clamp(1.4rem, 3vw, 1.9rem); }
/* The disclaimer scrolls INSIDE its own box rather than stretching the page.
   A long legal text otherwise pushes the acceptance controls below the fold
   and makes the whole wall taller than a phone screen; capped, the visitor
   reads it in place and the checkbox and button stay where they are.

   THIS IS THE ONE PLACE THE BEHAVIOUR LIVES. The base sheet loads before
   every theme's overlay, so each theme gets the containment by existing. A
   theme restates only what it wants to look different - colour, padding,
   border - never the scrolling itself.

   Only the structure is here. Height caps at a fraction of the small
   viewport (svh, so a phone's address bar cannot hide the bottom of the
   box), with a vh fallback for browsers that lack it. overscroll-behavior
   keeps a wheel or swipe that reaches the end from scrolling the page
   underneath; scrollbar-gutter keeps the text from shifting when the bar
   appears. A short disclaimer never reaches the cap, so it shows no bar. */
.cf-wall__body {
    margin-bottom: 1.5rem;
    color: var(--cf-muted);
    max-height: clamp(260px, 38vh, 380px);
    max-height: clamp(260px, 38svh, 380px);
    overflow-x: hidden;
    overflow-y: auto;
    overflow-wrap: anywhere;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 560px) {
    /* Shorter still on a phone, so the acceptance controls stay in reach. */
    .cf-wall__body {
        max-height: min(42vh, 320px);
        max-height: min(42svh, 320px);
    }
}

.cf-wall__required { color: var(--cf-warn); }
.cf-wall__submit { width: 100%; margin-top: 0.5rem; padding: 0.8rem; }
.cf-wall__account { margin-top: 1.25rem; text-align: center; }

/* --- Checkout (Phase 5B) --------------------------------------------------
   Two columns on a wide viewport - the form on the left, the server-computed
   order summary on the right - collapsing to one column on mobile. */

.cf-checkout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 760px) { .cf-checkout { grid-template-columns: 1fr; gap: 1.5rem; } }

.cf-checkout__section { margin-bottom: 2rem; }
.cf-checkout__section h2 { font-size: 1.05rem; margin: 0 0 0.9rem; }
.cf-checkout__billing-fields[hidden] { display: none; }

.cf-checkout__shipping-options { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.cf-checkout__shipping-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    padding: 0.75rem 1rem;
}
.cf-checkout__shipping-option label { font-weight: 400; margin: 0; display: flex; gap: 0.5rem; align-items: center; }

.cf-checkout__coupon { display: flex; align-items: stretch; gap: 0.6rem; }
.cf-checkout__coupon input { min-width: 0; flex: 1 1 auto; }
.cf-checkout__coupon .cf-button { flex: 0 0 auto; margin-left: 0; min-height: 44px; white-space: nowrap; }
@media (max-width: 560px) {
    .cf-checkout__coupon { flex-direction: column; }
    .cf-checkout__coupon .cf-button { width: 100%; }
}

.cf-checkout__summary {
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    padding: 1.5rem;
    background: var(--cf-panel);
    position: sticky;
    top: 6rem;
}

.cf-checkout__line { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--cf-line); }
.cf-checkout__line-title { font-weight: 600; }
.cf-checkout__line-meta { color: var(--cf-muted); font-size: 0.88rem; }

.cf-checkout__totals { margin-top: 1rem; }
.cf-checkout__totals-row { display: flex; justify-content: space-between; padding: 0.3rem 0; }
.cf-checkout__totals-row--grand { font-size: 1.2rem; font-weight: 700; border-top: 1px solid var(--cf-line); margin-top: 0.5rem; padding-top: 0.75rem; }
.cf-checkout__totals-row--discount { color: var(--cf-ok); }

.cf-checkout__place-order { width: 100%; margin-top: 1rem; padding: 0.85rem; }

.cf-order-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.cf-order-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
}
.cf-order-row__total { font-weight: 700; }

.cf-table { width: 100%; border-collapse: collapse; }
.cf-table th, .cf-table td { text-align: left; padding: 0.6rem 0.4rem; border-bottom: 1px solid var(--cf-line); }

.cf-order-totals { margin-top: 1rem; }
.cf-order-totals div { display: flex; justify-content: space-between; padding: 0.3rem 0; }

/* --- Manual payment instructions ----------------------------------------- */
.cf-manual-payment__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--cf-line);
}
.cf-manual-payment__row:last-of-type { border-bottom: 0; }
.cf-manual-payment__label { color: var(--cf-muted); font-size: 0.85rem; flex: 0 0 auto; }
.cf-manual-payment__value {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    background: none;
    border: 0;
    padding: 0.25rem 0.4rem;
    margin: -0.25rem -0.4rem;
    border-radius: 0.35rem;
    font: inherit;
    color: inherit;
    cursor: pointer;
    max-width: 100%;
    text-align: right;
}
.cf-manual-payment__value:hover, .cf-manual-payment__value:focus-visible { background: var(--cf-panel); }
.cf-manual-payment__text {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.cf-manual-payment__hint { color: var(--cf-muted); font-size: 0.78rem; white-space: nowrap; }
.cf-manual-payment__open { margin: 1rem 0; }
.cf-manual-payment__instructions { overflow-wrap: anywhere; }
.cf-manual-payment__instructions ol { padding-left: 1.25rem; }
.cf-manual-payment__qr {
    margin: 1.25rem 0;
    text-align: center;
}
.cf-manual-payment__qr h3 { margin-bottom: 0.75rem; }
.cf-manual-payment__qr img {
    display: block;
    width: min(100%, 280px);
    height: auto;
    margin: 0 auto;
    border: 1px solid var(--cf-line);
    border-radius: 0.5rem;
    background: #fff;
}

@media (max-width: 560px) {
    .cf-manual-payment__row {
        align-items: stretch;
        gap: 0.25rem;
    }
    .cf-manual-payment__value {
        width: 100%;
        min-height: 44px;
        justify-content: space-between;
        margin: 0;
        padding: 0.5rem 0;
        text-align: left;
    }
    .cf-manual-payment__open .cf-button {
        width: 100%;
        text-align: center;
    }
}

/* The below-hero placement sits in the page flow rather than at the very top,
   so it gets a little breathing room. Everything else is inherited. */
.cf-promo--below {
    margin-block: 0;
}