/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   DEFAULT PAYMENT FORM LIBRARY — the stylesheet of the ONE shared renderer (Components/PaymentForms/NavrPaymentForm).

   Every template is a set of modifier classes on .pf (pf--l-<layout> pf--s-<surface> pf--f-<field> pf--b-<button>
   pf--p-<payment> pf--h-<header> pf--d-<density> pf--r-<radius> pf--t-<font> pf--x-<style> pf--fr-<frame> pf--m-<motif>
   [pf--dark]) plus eight palette custom properties (--pf-accent … --pf-field) written by the component from the template's
   validated blueprint.

   PREMIUM (version 2) styles speak to the base rules through optional custom properties (--pf-backdrop, --pf-card-bg,
   --pf-card-border, --pf-card-shadow, --pf-title-weight, --pf-label-case, --pf-btn-bg …). Every base rule falls back to its
   version-1 value, so a classic template (pf--x-classic pf--fr-divided pf--m-none) renders exactly as before.

   RESPONSIVE BY CONTAINER: .pf is an inline-size container, so a form lays out for the width it is GIVEN (a device frame
   in the Admin preview, a card thumbnail, a page column) rather than for the browser window.
   Everything is scoped under .pf — nothing here can reach the page that hosts a preview.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.pf {
    --pf-radius: 12px;
    --pf-field-radius: 9px;
    --pf-gap: 18px;
    --pf-pad: 24px;
    --pf-size: 15px;
    --pf-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --pf-head: var(--pf-font);
    --pf-label: var(--pf-font);
    --pf-accent-text: var(--pf-accent);
    --pf-accent-soft: color-mix(in srgb, var(--pf-accent) 12%, transparent);
    --pf-accent-line: color-mix(in srgb, var(--pf-accent) 45%, var(--pf-border));
    --pf-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    container: pf / inline-size;
    display: block;
    width: 100%;
    color: var(--pf-text);
    background: var(--pf-backdrop, var(--pf-page));
    font-family: var(--pf-font);
    font-size: var(--pf-size);
    line-height: 1.45;
    text-align: start;
    -webkit-font-smoothing: antialiased;
}

/* Resets carry ZERO specificity (:where), so every component class below wins over them — a plain `.pf button` reset
   would outrank `.pf__btn` and paint every button in body-text colour. */
:where(.pf) *, :where(.pf) *::before, :where(.pf) *::after { box-sizing: border-box; }
:where(.pf) :where(p, h2, h3, ul, ol, dl, dd) { margin: 0; padding: 0; }
:where(.pf) :where(ul, ol) { list-style: none; }
:where(.pf) button { font: inherit; color: inherit; cursor: default; }
:where(.pf--live) button { cursor: pointer; }

.pf__page {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: calc(var(--pf-pad) * 1.2) var(--pf-pad);
    display: flex;
    flex-direction: column;
    gap: var(--pf-gap);
}

.pf__ico { width: 1em; height: 1em; vertical-align: -.125em; flex: 0 0 auto; }

/* ── Density ── */
.pf--d-compact { --pf-gap: 12px; --pf-pad: 16px; --pf-size: 14px; }
.pf--d-cozy { --pf-gap: 18px; --pf-pad: 24px; }
.pf--d-airy { --pf-gap: 26px; --pf-pad: 34px; --pf-size: 15.5px; }

/* ── Corners ── */
.pf--r-none { --pf-radius: 0px; --pf-field-radius: 0px; }
.pf--r-small { --pf-radius: 6px; --pf-field-radius: 5px; }
.pf--r-medium { --pf-radius: 12px; --pf-field-radius: 9px; }
.pf--r-large { --pf-radius: 22px; --pf-field-radius: 14px; }

/* ── Type ── */
.pf--t-geometric { --pf-font: "Poppins", "Montserrat", "Century Gothic", "Avenir Next", "Segoe UI", sans-serif; }
.pf--t-humanist { --pf-font: "Source Sans 3", "Open Sans", "Segoe UI", "Trebuchet MS", sans-serif; }
.pf--t-serif { --pf-head: "Playfair Display", "DM Serif Display", Georgia, "Times New Roman", serif; }
.pf--t-rounded { --pf-font: "Nunito", "Quicksand", "Segoe UI Rounded", "Arial Rounded MT Bold", "Segoe UI", sans-serif; }
.pf--t-mono { --pf-label: "JetBrains Mono", "IBM Plex Mono", Consolas, "Courier New", monospace; --pf-head: var(--pf-label); }

/* ═════════════ Surfaces ═════════════ */
.pf__card, .pf__surface, .pf__acc {
    background: var(--pf-card-bg, var(--pf-surface));
    border: var(--pf-card-border, 0 none);
    box-shadow: var(--pf-card-shadow, none);
    border-radius: var(--pf-radius);
    padding: var(--pf-pad);
    min-width: 0;
}

.pf--s-flat .pf__card, .pf--s-flat .pf__surface, .pf--s-flat .pf__acc { border: 1px solid transparent; }
.pf--s-elevated .pf__card, .pf--s-elevated .pf__surface, .pf--s-elevated .pf__acc {
    box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .28), 0 2px 6px rgba(15, 23, 42, .06);
}
.pf--s-outlined .pf__card, .pf--s-outlined .pf__surface, .pf--s-outlined .pf__acc { border: 1px solid var(--pf-border); }
.pf--s-tinted .pf__card, .pf--s-tinted .pf__surface, .pf--s-tinted .pf__acc {
    background: color-mix(in srgb, var(--pf-accent) 6%, var(--pf-surface));
}
.pf--s-paper { background-image: repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--pf-border) 45%, transparent) 23px 24px); }
.pf--s-paper .pf__card, .pf--s-paper .pf__surface, .pf--s-paper .pf__acc {
    border: 1px solid var(--pf-border);
    box-shadow: 0 1px 0 var(--pf-border), 0 10px 24px -16px rgba(60, 40, 20, .35);
}
.pf--s-brutal .pf__card, .pf--s-brutal .pf__surface, .pf--s-brutal .pf__acc {
    border: 2px solid var(--pf-text);
    box-shadow: 6px 6px 0 var(--pf-text);
}
.pf--s-glass {
    background:
        radial-gradient(60% 55% at 12% 8%, color-mix(in srgb, var(--pf-accent) 38%, transparent), transparent 70%),
        radial-gradient(50% 50% at 92% 18%, color-mix(in srgb, var(--pf-accent) 22%, #7dd3fc), transparent 70%),
        radial-gradient(60% 60% at 70% 100%, color-mix(in srgb, var(--pf-accent) 25%, #f9a8d4), transparent 70%),
        var(--pf-page);
}
.pf--s-glass .pf__card, .pf--s-glass .pf__surface, .pf--s-glass .pf__acc {
    background: color-mix(in srgb, var(--pf-surface) 62%, transparent);
    border: 1px solid color-mix(in srgb, #fff 55%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 16px 40px -20px rgba(15, 23, 42, .35);
}
.pf--dark.pf--s-glass .pf__card, .pf--dark.pf--s-glass .pf__surface, .pf--dark.pf--s-glass .pf__acc { border-color: color-mix(in srgb, #fff 12%, transparent); }
.pf--s-gradient {
    background: linear-gradient(140deg, var(--pf-accent) 0%, color-mix(in srgb, var(--pf-accent) 55%, #0b1020) 100%);
}
.pf--s-gradient .pf__card, .pf--s-gradient .pf__surface, .pf--s-gradient .pf__acc { box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .55); }
.pf--s-gradient .pf__page > .pf__head, .pf--s-gradient .pf__page > .pf__headline { color: var(--pf-ink); }
.pf--s-gradient .pf__page > .pf__head .pf__sub, .pf--s-gradient .pf__page > .pf__headline .pf__sub,
.pf--s-gradient .pf__page > .pf__head .pf__eyebrow { color: color-mix(in srgb, var(--pf-ink) 78%, transparent); }
.pf--s-gradient .pf__page > .pf__head--bar { border-color: color-mix(in srgb, var(--pf-ink) 25%, transparent); }
.pf--s-gradient .pf__page > .pf__progress, .pf--s-gradient .pf__page > .pf__tabs { color: var(--pf-ink); }

/* ═════════════ Header ═════════════ */
.pf__title { font-family: var(--pf-head); font-size: var(--pf-title-size, 1.6em); line-height: 1.15; font-weight: var(--pf-title-weight, 700); letter-spacing: var(--pf-title-track, -.01em); }
.pf__sub { color: var(--pf-muted); margin-top: 4px; }
.pf__eyebrow { font-family: var(--pf-label); font-size: .78em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pf-accent-text); }
.pf__head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; min-width: 0; }
.pf__brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf__mono {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 38px; height: 38px; border-radius: calc(var(--pf-radius) * .6 + 6px);
    background: var(--pf-accent); color: var(--pf-ink);
    font-family: var(--pf-head); font-weight: 800; font-size: 15px; letter-spacing: .02em;
}
.pf__head--bar { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--pf-border); }
.pf__headline { display: flex; flex-direction: column; }
.pf__secure, .pf__badge {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
    font-size: .82em; font-weight: 600; color: var(--pf-muted); white-space: nowrap;
}
.pf__badge {
    padding: 6px 12px; border-radius: 999px; color: var(--pf-accent-text);
    background: var(--pf-accent-soft); border: 1px solid var(--pf-accent-line);
}
.pf__head--badge { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pf__head--banner {
    padding: calc(var(--pf-pad) * .9) var(--pf-pad);
    border-radius: var(--pf-radius);
    color: var(--pf-ink);
    background:
        radial-gradient(80% 140% at 100% 0%, color-mix(in srgb, #fff 22%, transparent), transparent 60%),
        linear-gradient(120deg, var(--pf-accent), color-mix(in srgb, var(--pf-accent) 70%, #000));
    gap: 6px;
}
.pf__head--banner .pf__sub { color: color-mix(in srgb, var(--pf-ink) 80%, transparent); }
.pf__head--banner .pf__mono { background: color-mix(in srgb, var(--pf-ink) 18%, transparent); color: var(--pf-ink); }
.pf__head--centered { align-items: center; text-align: center; gap: 6px; }
.pf__head--centered .pf__mono { width: 48px; height: 48px; font-size: 18px; margin-bottom: 4px; }

/* ═════════════ Layouts ═════════════ */
.pf__cols {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    gap: var(--pf-gap);
    align-items: start;
}
.pf__main { display: flex; flex-direction: column; gap: var(--pf-gap); min-width: 0; }
.pf__aside { display: flex; flex-direction: column; gap: var(--pf-gap); min-width: 0; position: sticky; top: 12px; }
.pf--l-split-reverse .pf__aside { order: -1; }
.pf--l-split-reverse .pf__cols { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr); }

.pf--l-single .pf__page, .pf--l-sticky-bar .pf__page { max-width: 680px; }
.pf--l-compact .pf__page { max-width: 920px; }
.pf--l-receipt .pf__page { max-width: 720px; }

/* Panel: a brand panel carrying the amount due beside the form. */
.pf__panelwrap { display: grid; grid-template-columns: minmax(260px, 5fr) minmax(0, 7fr); padding: 0 !important; overflow: hidden; }
.pf__panel {
    display: flex; flex-direction: column; gap: 14px;
    padding: calc(var(--pf-pad) * 1.2);
    color: var(--pf-ink);
    background:
        radial-gradient(90% 60% at 0% 100%, color-mix(in srgb, #fff 16%, transparent), transparent 60%),
        linear-gradient(160deg, var(--pf-accent), color-mix(in srgb, var(--pf-accent) 55%, #000));
}
.pf__panelwrap > .pf__main { padding: calc(var(--pf-pad) * 1.2); }
.pf__panel .pf__mono { background: color-mix(in srgb, var(--pf-ink) 18%, transparent); color: var(--pf-ink); }
.pf__panel-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.pf__panel-due { margin-top: 18px; font-size: .85em; opacity: .85; text-transform: uppercase; letter-spacing: .1em; }
.pf__panel-total { font-family: var(--pf-head); font-size: 2.6em; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.pf__panel .pf__lines, .pf__panel .pf__totals { color: var(--pf-ink); }
.pf__panel .pf__line span:last-child, .pf__panel .pf__totals dd { color: var(--pf-ink); }
.pf__panel .pf__totals div { border-color: color-mix(in srgb, var(--pf-ink) 22%, transparent); }
.pf__panel .pf__totals dt { color: color-mix(in srgb, var(--pf-ink) 80%, transparent); }
.pf__panel-note { margin-top: auto; display: flex; gap: 8px; align-items: center; font-size: .82em; opacity: .85; }

/* Hero: a colour band with the form card floating over it. */
.pf--l-hero .pf__page { gap: 0; }
.pf__hero {
    border-radius: var(--pf-radius);
    padding: calc(var(--pf-pad) * 1.3) var(--pf-pad) 130px;
    color: var(--pf-ink);
    background:
        radial-gradient(40% 80% at 90% 10%, color-mix(in srgb, #fff 24%, transparent), transparent 70%),
        radial-gradient(35% 70% at 5% 100%, color-mix(in srgb, #000 22%, transparent), transparent 70%),
        linear-gradient(120deg, var(--pf-accent), color-mix(in srgb, var(--pf-accent) 60%, #1e1b4b));
}
.pf__hero-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.pf__hero .pf__mono { background: color-mix(in srgb, var(--pf-ink) 18%, transparent); color: var(--pf-ink); }
.pf__hero-title { font-family: var(--pf-head); font-size: 2.1em; line-height: 1.1; font-weight: 800; }
.pf__hero-sub { opacity: .85; }
.pf__card--float { width: min(100% - 2 * var(--pf-pad), 780px); margin: -104px auto 0; display: flex; flex-direction: column; gap: var(--pf-gap); position: relative; }

/* Compact: one dense card, an inline total strip, sections side by side. */
.pf--l-compact .pf__card { display: flex; flex-direction: column; gap: var(--pf-gap); }
.pf__dense .pf__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--pf-gap) * 1.4); }
.pf__dense .pf__body > div { border-top: 0 !important; padding-top: 0 !important; }
.pf__dense .pf__body > div:has(.pf__sec--payment), .pf__dense .pf__body > div:has(.pf__sec--items),
.pf__dense .pf__body > div:has(.pf__sec--consent) { grid-column: 1 / -1; }
.pf__strip {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; border-radius: var(--pf-field-radius);
    background: var(--pf-accent-soft); border: 1px dashed var(--pf-accent-line);
}
.pf__strip-items { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pf-muted); }
.pf__strip-total { font-size: 1.25em; color: var(--pf-accent-text); white-space: nowrap; }

/* Compact / Quick-Pay: the itemised summary sits inline at the end of the card, set off by a dashed rule. */
.pf__summary-inline { padding-top: var(--pf-gap); border-top: 1px dashed var(--pf-border); }
.pf--l-compact .pf__summary-inline { padding: 14px 16px; border: 1px dashed var(--pf-accent-line); border-radius: var(--pf-field-radius); background: color-mix(in srgb, var(--pf-accent) 4%, transparent); }
.pf--l-sticky-bar .pf__card { display: flex; flex-direction: column; gap: var(--pf-gap); }

/* Receipt: a perforated order ticket. */
.pf--l-receipt .pf__card { display: flex; flex-direction: column; gap: var(--pf-gap); }
.pf__receipt {
    position: relative;
    padding: 18px 20px 22px;
    background: color-mix(in srgb, var(--pf-accent) 5%, var(--pf-field));
    border: 1px dashed var(--pf-accent-line);
    border-radius: var(--pf-field-radius);
    -webkit-mask: radial-gradient(9px at 9px 100%, #0000 98%, #000) -9px 100% / 18px 51% repeat-x, linear-gradient(#000 0 0) top / 100% 50% no-repeat;
    mask: radial-gradient(9px at 9px 100%, #0000 98%, #000) -9px 100% / 18px 51% repeat-x, linear-gradient(#000 0 0) top / 100% 50% no-repeat;
    font-family: var(--pf-label);
}
.pf__receipt-title { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .8em; color: var(--pf-muted); margin-bottom: 10px; }

/* Card grid: every section on its own card. */
.pf__cardgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pf-gap); align-items: start; }
.pf__card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--pf-gap); align-items: end; }
.pf__cardgrid > .pf__card:has(.pf__sec--payment), .pf__cardgrid > .pf__card:has(.pf__sec--items) { grid-column: 1 / -1; }

/* Sticky total bar. */
.pf--l-sticky-bar .pf__page { padding-bottom: 0; }
.pf__bar {
    position: sticky; bottom: 0; z-index: 2;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px var(--pf-pad);
    margin: 0 calc(var(--pf-pad) * -1);
    background: color-mix(in srgb, var(--pf-surface) 92%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--pf-border);
    box-shadow: 0 -12px 30px -18px rgba(15, 23, 42, .35);
}
.pf__bar-total { display: flex; flex-direction: column; min-width: 0; }
.pf__bar-total strong { font-size: 1.35em; font-family: var(--pf-head); }
.pf__bar-label { font-size: .8em; color: var(--pf-muted); }

/* Accordion. */
.pf__acc { padding: 0; overflow: hidden; }
.pf--s-flat .pf__acc, .pf--s-tinted .pf__acc { border: 1px solid var(--pf-border); }
.pf__acc-head {
    width: 100%; display: flex; align-items: center; gap: 12px;
    padding: 16px var(--pf-pad); background: none; border: 0; text-align: start;
    font-weight: 700;
}
.pf__acc-title { flex: 1 1 auto; font-family: var(--pf-head); }
.pf__acc-state { font-size: .8em; font-weight: 600; color: var(--pf-accent-text); }
.pf__acc.is-open .pf__acc-head { border-bottom: 1px solid var(--pf-border); }
.pf__acc-body { padding: var(--pf-pad); display: flex; flex-direction: column; gap: 12px; }

/* Steps: progress bar, tabs, rail. */
.pf__progress { display: flex; gap: 8px; counter-reset: pf-step; }
.pf__progress li { flex: 1 1 0; min-width: 0; }
.pf__progress button {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 0 0 12px; background: none; border: 0; border-bottom: 3px solid var(--pf-border);
    color: var(--pf-muted); font-weight: 600; text-align: start;
}
.pf__progress .is-active button { color: var(--pf-text); border-color: var(--pf-accent); }
.pf__progress .is-done button { color: var(--pf-text); border-color: var(--pf-accent-line); }
.pf__step-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf__tabs { display: flex; gap: 4px; padding: 4px; border-radius: calc(var(--pf-field-radius) + 4px); background: var(--pf-accent-soft); overflow-x: auto; scrollbar-width: none; }
.pf__tab { flex: 1 0 auto; padding: 10px 16px; border: 0; border-radius: var(--pf-field-radius); background: none; font-weight: 600; color: var(--pf-muted); white-space: nowrap; }
.pf__tab.is-active { background: var(--pf-surface); color: var(--pf-text); box-shadow: 0 2px 8px rgba(15, 23, 42, .1); }
.pf__railwrap { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--pf-gap); align-items: start; }
.pf__rail { display: flex; flex-direction: column; gap: 6px; position: relative; }
.pf__rail button {
    width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: start;
    padding: 12px; border: 1px solid transparent; border-radius: var(--pf-field-radius); background: none; color: var(--pf-muted);
}
.pf__rail .is-active button { background: var(--pf-surface); border-color: var(--pf-accent-line); color: var(--pf-text); box-shadow: var(--pf-shadow); }
.pf__rail .is-done button { color: var(--pf-text); }
.pf__rail-text { display: flex; flex-direction: column; min-width: 0; }
.pf__rail-sub { font-size: .8em; color: var(--pf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf__stepbody { display: flex; flex-direction: column; gap: var(--pf-gap); }
.pf__stepname { font-family: var(--pf-label); font-size: .78em; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--pf-accent-text); }
.pf__stepnav { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; }
.pf__stepnav .pf__btn { flex: 0 1 auto; min-width: 220px; }
.pf__link { background: none; border: 0; padding: 8px 4px; color: var(--pf-muted); font-weight: 600; margin-inline-end: auto; }

/* ═════════════ Sections ═════════════ */
.pf__body { display: flex; flex-direction: column; gap: var(--pf-gap); min-width: 0; }
.pf__body > div + div { border-top: 1px solid color-mix(in srgb, var(--pf-border) 70%, transparent); padding-top: var(--pf-gap); }
.pf--l-cards .pf__body > div + div { border-top: 0; padding-top: 0; }
.pf__sec { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pf__sec-title {
    display: flex; align-items: center; gap: 10px; font-family: var(--pf-head); font-size: var(--pf-sec-size, 1.05em); font-weight: var(--pf-sec-weight, 700);
    text-transform: var(--pf-sec-case, none); letter-spacing: var(--pf-sec-track, normal);
}
.pf__num {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px;
    font-family: var(--pf-label); font-size: 12px; font-weight: 700;
    background: var(--pf-accent-soft); color: var(--pf-accent-text);
}
.pf__progress .is-active .pf__num, .pf__rail .is-active .pf__num, .pf__progress .is-done .pf__num, .pf__rail .is-done .pf__num { background: var(--pf-accent); color: var(--pf-ink); }
.pf__label {
    font-family: var(--pf-label); font-size: var(--pf-label-size, .82em); font-weight: 600; color: var(--pf-muted);
    text-transform: var(--pf-label-case, none); letter-spacing: var(--pf-label-track, normal);
}
p.pf__label { margin-top: 2px; }
.pf__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pf__field { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf__field--half { grid-column: auto; }
.pf__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pf__note { font-size: .86em; color: var(--pf-muted); padding: 10px 12px; border-radius: var(--pf-field-radius); background: var(--pf-accent-soft); }
.pf__ok { font-size: .85em; font-weight: 600; color: #16a34a; }
.pf--dark .pf__ok { color: #4ade80; }
.pf__fine { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .78em; color: var(--pf-muted); }
.pf__action { display: flex; flex-direction: column; gap: 10px; }

/* Inputs */
.pf__input {
    width: 100%; min-width: 0; height: 46px; padding: 0 14px;
    font: inherit; color: var(--pf-text);
    background: var(--pf-surface); border: 1px solid var(--pf-border); border-radius: var(--pf-field-radius);
    outline: none;
}
.pf__input::placeholder { color: color-mix(in srgb, var(--pf-muted) 80%, transparent); }
.pf__input:focus { border-color: var(--pf-accent); box-shadow: 0 0 0 3px var(--pf-accent-soft); }
.pf__input--area { height: auto; min-height: 76px; padding: 12px 14px; resize: none; }
.pf--d-compact .pf__input { height: 40px; }
.pf--d-airy .pf__input { height: 50px; }
.pf--f-filled .pf__input { background: var(--pf-field); border-color: transparent; border-bottom: 2px solid var(--pf-border); border-radius: var(--pf-field-radius) var(--pf-field-radius) 4px 4px; }
.pf--f-filled .pf__input:focus { border-bottom-color: var(--pf-accent); }
.pf--f-underline .pf__input { background: transparent; border-width: 0 0 1.5px; border-radius: 0; padding-inline: 2px; }
.pf--f-underline .pf__input:focus { box-shadow: none; }
.pf--f-underline .pf__input--area { border-width: 1.5px; border-radius: var(--pf-field-radius); padding-inline: 12px; }
.pf--f-pill .pf__input { border-radius: 999px; padding-inline: 20px; background: var(--pf-field); }
.pf--f-pill .pf__input--area { border-radius: 22px; }
.pf--f-floating .pf__field { position: relative; gap: 0; }
.pf--f-floating .pf__field > .pf__label { position: absolute; top: 7px; inset-inline-start: 15px; font-size: .72em; pointer-events: none; z-index: 1; }
.pf--f-floating .pf__input { height: 54px; padding-top: 18px; background: var(--pf-field); }
.pf--f-floating .pf__input--area { padding-top: 26px; min-height: 90px; }

/* Choice controls */
.pf__opts { display: flex; flex-direction: column; gap: 8px; }
.pf__opts--row { flex-direction: row; flex-wrap: wrap; }
.pf__opts--row .pf__opt { flex: 1 1 180px; }
.pf__opt {
    display: flex; align-items: center; gap: 12px; min-width: 0;
    padding: 12px 14px; border: 1px solid var(--pf-border); border-radius: var(--pf-field-radius); background: var(--pf-surface);
}
.pf__opt.is-on { border-color: var(--pf-accent); background: color-mix(in srgb, var(--pf-accent) 7%, var(--pf-surface)); box-shadow: 0 0 0 1px var(--pf-accent) inset; }
.pf__radio { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--pf-border); }
.pf__opt.is-on .pf__radio, .pf__method.is-on .pf__radio { border: 5px solid var(--pf-accent); }
.pf__opt-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.pf__opt-label { font-weight: 600; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pf__opt-detail { font-size: .84em; color: var(--pf-muted); }
.pf__opt-price { font-weight: 700; white-space: nowrap; font-size: .92em; }
.pf__pill {
    display: inline-block; padding: 2px 8px; border-radius: 999px; font-style: normal;
    font-size: .7em; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    background: var(--pf-accent); color: var(--pf-ink);
}
.pf__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf__chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--pf-border); font-size: .9em; font-weight: 600; background: var(--pf-surface); }
.pf__chip.is-on { background: var(--pf-accent); border-color: var(--pf-accent); color: var(--pf-ink); }
.pf__chip.is-off { opacity: .45; text-decoration: line-through; }
.pf--r-none .pf__chip, .pf--r-small .pf__chip { border-radius: var(--pf-field-radius); }
.pf__checks { display: flex; flex-direction: column; gap: 10px; }
.pf__check { display: flex; align-items: center; gap: 10px; font-size: .92em; }
.pf__box {
    flex: 0 0 auto; display: inline-grid; place-items: center; width: 20px; height: 20px;
    border-radius: min(6px, var(--pf-field-radius)); border: 2px solid var(--pf-border); font-size: 12px; font-weight: 800;
}
.pf__check.is-on .pf__box { background: var(--pf-accent); border-color: var(--pf-accent); color: var(--pf-ink); }
.pf__check-label { flex: 1 1 auto; min-width: 0; }
.pf__check-price { font-weight: 700; white-space: nowrap; }
.pf__seg { display: inline-flex; align-self: flex-start; max-width: 100%; padding: 4px; gap: 4px; border-radius: 999px; background: var(--pf-accent-soft); overflow-x: auto; scrollbar-width: none; }
.pf--r-none .pf__seg, .pf--r-small .pf__seg { border-radius: var(--pf-field-radius); }
.pf__seg-item { padding: 7px 16px; border-radius: 999px; font-size: .88em; font-weight: 600; color: var(--pf-muted); white-space: nowrap; }
.pf--r-none .pf__seg-item, .pf--r-small .pf__seg-item { border-radius: var(--pf-field-radius); }
.pf__seg-item.is-on { background: var(--pf-surface); color: var(--pf-text); box-shadow: 0 1px 6px rgba(15, 23, 42, .12); }
.pf__amounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.pf__amount { padding: 14px 10px; text-align: center; font-weight: 800; font-size: 1.05em; border-radius: var(--pf-field-radius); border: 1px solid var(--pf-border); background: var(--pf-surface); }
.pf__amount.is-on { border-color: var(--pf-accent); background: var(--pf-accent); color: var(--pf-ink); }
.pf__counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 16px; }
.pf__counters .pf__row { padding: 8px 12px; border: 1px solid var(--pf-border); border-radius: var(--pf-field-radius); font-weight: 600; }
.pf__plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.pf__plan { position: relative; padding: 18px 16px; border-radius: var(--pf-radius); border: 1px solid var(--pf-border); background: var(--pf-surface); display: flex; flex-direction: column; gap: 4px; }
.pf__plan.is-on { border: 2px solid var(--pf-accent); box-shadow: 0 12px 28px -18px var(--pf-accent); }
.pf__plan .pf__pill { position: absolute; top: -10px; inset-inline-start: 14px; }
.pf__plan-name { font-weight: 700; }
.pf__plan-price { font-family: var(--pf-head); font-size: 1.5em; font-weight: 800; }
.pf__plan-price small { font-size: .5em; font-weight: 600; color: var(--pf-muted); margin-inline-start: 4px; }
.pf__plan-detail { font-size: .85em; color: var(--pf-muted); }

/* Items / product */
.pf__items { display: flex; flex-direction: column; gap: 10px; }
.pf__item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pf__thumb {
    flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px;
    border-radius: var(--pf-field-radius); font-weight: 800; font-size: 18px; color: var(--pf-accent-text);
    background: linear-gradient(135deg, var(--pf-accent-soft), color-mix(in srgb, var(--pf-accent) 25%, transparent));
}
.pf__thumb--ticket { font-size: 20px; }
.pf__item-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.pf__item-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.pf__item-detail { font-size: .84em; color: var(--pf-muted); }
.pf__item-price { font-weight: 700; white-space: nowrap; min-width: 72px; text-align: end; }
.pf__qty { display: inline-flex; align-items: center; flex: 0 0 auto; border: 1px solid var(--pf-border); border-radius: 999px; overflow: hidden; }
.pf--r-none .pf__qty { border-radius: 0; }
.pf__qty-btn { width: 30px; height: 30px; border: 0; background: none; font-weight: 700; color: var(--pf-muted); }
.pf__qty-val { min-width: 24px; text-align: center; font-weight: 700; }
.pf__product { display: flex; gap: 18px; align-items: flex-start; }
.pf__product-img {
    flex: 0 0 auto; display: grid; place-items: center; width: 132px; aspect-ratio: 1;
    border-radius: var(--pf-radius); font-size: 44px; font-weight: 800; color: var(--pf-ink);
    background:
        radial-gradient(60% 60% at 30% 25%, color-mix(in srgb, #fff 35%, transparent), transparent 70%),
        linear-gradient(135deg, var(--pf-accent), color-mix(in srgb, var(--pf-accent) 55%, #000));
}
.pf__product-img--course { width: 96px; font-size: 34px; }
.pf__product-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
.pf__product-price { font-family: var(--pf-head); font-size: 1.35em; font-weight: 800; color: var(--pf-accent-text); }
.pf__coupon { display: flex; gap: 8px; }
.pf__coupon .pf__input { flex: 1 1 auto; font-family: var(--pf-label); letter-spacing: .06em; }
.pf__trust { display: flex; flex-wrap: wrap; gap: 8px; }
.pf__trust-item { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: .82em; font-weight: 600; color: var(--pf-muted); border: 1px dashed var(--pf-border); }

/* ═════════════ Payment methods ═════════════ */
.pf__methods { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.pf__method {
    display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0;
    padding: 14px 10px; border: 1px solid var(--pf-border); border-radius: var(--pf-field-radius); background: var(--pf-surface);
    font-weight: 600; text-align: center;
}
.pf__method.is-on { border-color: var(--pf-accent); box-shadow: 0 0 0 1px var(--pf-accent) inset, 0 8px 18px -12px var(--pf-accent); }
.pf__method-name { font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pf__method-hint { font-size: .8em; color: var(--pf-muted); font-weight: 500; }
.pf__mark {
    display: inline-grid; place-items: center; flex: 0 0 auto; min-width: 42px; height: 28px; padding: 0 8px;
    border-radius: 6px; color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .02em; font-family: "Segoe UI", Arial, sans-serif;
}
.pf__mark--bkash { background: #E2136E; }
.pf__mark--nagad { background: #F6921E; }
.pf__mark--rocket { background: #8C3494; }
.pf__mark--card { background: #1A1F71; font-style: italic; font-size: 12px; }
.pf__mark--cod { background: #15803D; font-size: 15px; }
.pf__mark--bank { background: #334155; font-size: 10px; letter-spacing: .06em; }
.pf--p-list .pf__methods { grid-template-columns: 1fr; gap: 8px; }
.pf--p-list .pf__method { flex-direction: row; justify-content: flex-start; text-align: start; padding: 12px 14px; }
.pf--p-list .pf__method-name { flex: 0 1 auto; }
.pf--p-list .pf__method-hint { margin-inline-start: auto; }
.pf--p-tabs .pf__methods { display: flex; gap: 0; border-bottom: 1px solid var(--pf-border); overflow-x: auto; scrollbar-width: none; }
.pf--p-tabs .pf__method { flex: 1 0 auto; flex-direction: row; justify-content: center; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; padding: 10px 14px; box-shadow: none; }
.pf--p-tabs .pf__method.is-on { border-bottom-color: var(--pf-accent); box-shadow: none; color: var(--pf-text); }
.pf--p-tabs .pf__mark { min-width: 34px; height: 22px; font-size: 11px; }
.pf--p-chips .pf__methods { display: flex; flex-wrap: wrap; gap: 8px; }
.pf--p-chips .pf__method { flex-direction: row; padding: 6px 14px 6px 6px; border-radius: 999px; }
.pf--p-chips .pf__method.is-on { background: color-mix(in srgb, var(--pf-accent) 9%, var(--pf-surface)); }
.pf--p-chips .pf__mark { border-radius: 999px; min-width: 34px; height: 26px; font-size: 11px; }
.pf--r-none.pf--p-chips .pf__method, .pf--r-none.pf--p-chips .pf__mark { border-radius: 0; }
.pf__method-detail { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

/* ═════════════ Summary ═════════════ */
.pf__summary { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pf__lines { display: flex; flex-direction: column; gap: 8px; }
.pf__line { display: flex; justify-content: space-between; gap: 12px; font-size: .92em; }
.pf__line span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pf__line span:last-child { font-weight: 600; white-space: nowrap; }
.pf__totals { display: flex; flex-direction: column; }
.pf__totals div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid color-mix(in srgb, var(--pf-border) 70%, transparent); font-size: .92em; }
.pf__totals dt { color: var(--pf-muted); }
.pf__totals dd { font-weight: 600; white-space: nowrap; }
.pf__discount dd { color: #16a34a; }
.pf--dark .pf__discount dd { color: #4ade80; }
.pf__totals .pf__grand { padding-top: 12px; font-size: 1.15em; border-top-width: 2px; border-top-color: var(--pf-border); }
.pf__totals .pf__grand dt { color: var(--pf-text); font-weight: 700; }
.pf__totals .pf__grand dd { font-family: var(--pf-head); font-weight: 800; font-size: 1.2em; color: var(--pf-accent-text); }
.pf__totals--receipt div { border-top-style: dashed; }
.pf__panel .pf__totals .pf__grand dd { color: var(--pf-ink); }
.pf--l-cards .pf__card--wide .pf__action { align-self: stretch; justify-content: flex-end; }

/* ═════════════ Buttons ═════════════ */
.pf__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 50px; padding: 0 22px; width: 100%;
    font-weight: 700; font-size: 1em; letter-spacing: var(--pf-btn-track, .01em); text-transform: var(--pf-btn-case, none);
    color: var(--pf-ink); background: var(--pf-btn-bg, var(--pf-accent));
    border: 2px solid var(--pf-accent); border-radius: var(--pf-field-radius);
    box-shadow: var(--pf-btn-shadow, none);
    transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.pf--live .pf__btn:hover { filter: brightness(1.06); }
.pf__btn--compact { width: auto; min-width: 180px; }
.pf__btn--ghost { width: auto; min-height: 46px; padding: 0 18px; background: transparent; color: var(--pf-accent-text); }
.pf__btn--next { width: auto; }
.pf__btn-amount { padding-inline-start: 12px; border-inline-start: 1px solid color-mix(in srgb, var(--pf-ink) 35%, transparent); white-space: nowrap; }
.pf--b-gradient .pf__btn:not(.pf__btn--ghost) {
    border-color: transparent;
    background: linear-gradient(120deg, color-mix(in srgb, var(--pf-accent) 75%, #fff), var(--pf-accent) 45%, color-mix(in srgb, var(--pf-accent) 70%, #000));
    box-shadow: 0 12px 26px -14px var(--pf-accent);
}
.pf--b-pill .pf__btn { border-radius: 999px; }
.pf--b-outline .pf__btn:not(.pf__btn--ghost) { background: transparent; color: var(--pf-accent-text); border-width: 2px; }
.pf--b-outline .pf__btn-amount { border-color: var(--pf-accent-line); }
.pf--b-raised .pf__btn:not(.pf__btn--ghost) { box-shadow: 0 5px 0 color-mix(in srgb, var(--pf-accent) 65%, #000); margin-bottom: 5px; }
.pf--b-price .pf__btn--cta { justify-content: space-between; }
.pf--s-brutal .pf__btn:not(.pf__btn--ghost) { border-color: var(--pf-text); box-shadow: 4px 4px 0 var(--pf-text); }

/* ═════════════ Responsive (by container width) ═════════════ */
@container pf (max-width: 900px) {
    .pf__cols, .pf--l-split-reverse .pf__cols { grid-template-columns: minmax(0, 1fr); }
    .pf__aside { position: static; }
    .pf__panelwrap { grid-template-columns: minmax(0, 1fr); }
    .pf__panel-due { margin-top: 6px; }
    .pf__panel-total { font-size: 2.1em; }
    .pf__cardgrid { grid-template-columns: minmax(0, 1fr); }
    .pf__card--wide { grid-template-columns: minmax(0, 1fr); }
    .pf__railwrap { grid-template-columns: minmax(0, 1fr); }
    .pf__rail { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
    .pf__rail li { flex: 1 0 auto; }
    .pf__rail-sub { display: none; }
    .pf__dense .pf__body { grid-template-columns: minmax(0, 1fr); }
    .pf__hero-title { font-size: 1.7em; }
}

@container pf (max-width: 560px) {
    /* A container cannot restyle itself from its own query, so the tighter spacing is set on the page inside it. */
    .pf__page { --pf-pad: 16px; --pf-gap: 14px; padding: 16px 12px; }
    .pf--d-airy .pf__page { --pf-pad: 18px; --pf-gap: 18px; }
    .pf__title { font-size: 1.35em; }
    .pf__grid { grid-template-columns: minmax(0, 1fr); }
    .pf__field--half { grid-column: 1 / -1; }
    .pf__head--bar, .pf__head--badge { flex-wrap: wrap; }
    .pf__secure { display: none; }
    .pf__progress .pf__step-label { display: none; }
    .pf__progress .is-active .pf__step-label { display: inline; }
    .pf__progress li { flex: 0 0 auto; }
    .pf__progress li.is-active { flex: 1 1 auto; }
    .pf__methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf--p-list .pf__method-hint { display: none; }
    .pf__product { flex-direction: column; }
    .pf__product-img { width: 100%; aspect-ratio: 16 / 9; }
    .pf__item { flex-wrap: wrap; }
    .pf__item-text { flex-basis: calc(100% - 64px); }
    .pf__item .pf__qty { margin-inline-start: 60px; }
    .pf__item-price { margin-inline-start: auto; }
    .pf__hero { padding-bottom: 110px; }
    .pf__card--float { width: calc(100% - 16px); margin-top: -92px; }
    .pf__bar { flex-direction: column; align-items: stretch; gap: 10px; margin: 0 -12px; padding: 12px; }
    .pf__bar .pf__btn { width: 100%; }
    .pf__stepnav .pf__btn { min-width: 0; width: 100%; }
    .pf__stepnav { flex-direction: column-reverse; align-items: stretch; }
    .pf__link { margin: 0; align-self: center; }
    .pf__opt { flex-wrap: wrap; }
    .pf__opt-price { margin-inline-start: 30px; }
    .pf__opts--row .pf__opt { flex-basis: 100%; }
    .pf__amounts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pf__amount { padding: 12px 4px; font-size: .95em; }
    .pf__panel-total { font-size: 1.9em; }
    .pf--s-brutal .pf__card, .pf--s-brutal .pf__surface, .pf--s-brutal .pf__acc { box-shadow: 4px 4px 0 var(--pf-text); }
}

@media (prefers-reduced-motion: reduce) {
    .pf__btn { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   PREMIUM DESIGN SYSTEM (version 2 — the 2,000-form library)
   Fifteen compositions (pf--l-*), twenty-nine visual systems (pf--x-*), six section frames (pf--fr-*) and seven motifs
   (pf--m-*). Nothing here matches a classic template (pf--x-classic pf--fr-divided pf--m-none). Still scoped under .pf.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.pf:not(.pf--x-classic) .pf__btn--ghost { box-shadow: none; }
.pf:not(.pf--x-classic) .pf__btn--cta { min-height: 54px; }
.pf:not(.pf--x-classic) .pf__input { transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.pf:not(.pf--x-classic) .pf__opt, .pf:not(.pf--x-classic) .pf__method, .pf:not(.pf--x-classic) .pf__chip { transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.pf__fine--start { justify-content: flex-start; }
.pf__cols--even { grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr); }

/* ═════════════ Compositions ═════════════ */

/* Bento: wide tiles, paired half tiles and a tall total tile. */
.pf__bento { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(280px, .9fr); gap: var(--pf-gap); align-items: start; grid-auto-flow: row dense; }
.pf__tile { min-width: 0; }
.pf__bento > .pf__tile--w { grid-column: span 2; }
.pf__bento > .pf__tile--m, .pf__bento > .pf__tile--s { grid-column: span 1; }
.pf__bento > .pf__tile--total {
    grid-column: 3; grid-row: 1 / span 4; position: sticky; top: 12px;
    display: flex; flex-direction: column; gap: var(--pf-gap);
    background: linear-gradient(170deg, color-mix(in srgb, var(--pf-accent) 9%, var(--pf-surface)), var(--pf-surface) 55%);
}
.pf__tile-total { font-family: var(--pf-head); font-size: 2.4em; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--pf-accent-text); }

/* Editorial: a sticky typographic masthead with a ruled ledger beside the form. */
.pf__editorial { display: grid; grid-template-columns: minmax(260px, 5fr) minmax(0, 7fr); gap: calc(var(--pf-gap) * 1.6); align-items: start; }
.pf__masthead { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 14px; padding-top: 6px; min-width: 0; }
.pf__masthead-title { font-family: var(--pf-head); font-size: 2.7em; line-height: 1.02; font-weight: var(--pf-title-weight, 700); letter-spacing: -.025em; }
.pf__masthead-sub { color: var(--pf-muted); font-size: 1.05em; max-width: 34ch; }
.pf__masthead-ledger { padding-top: 16px; border-top: 2px solid var(--pf-text); }
.pf__masthead-ledger .pf__sec-title { font-size: .8em; text-transform: uppercase; letter-spacing: .14em; }
.pf--l-editorial .pf__editorial > .pf__main { display: flex; flex-direction: column; gap: var(--pf-gap); }

/* Overlapping card: the summary card overlaps the form card. */
.pf__overlap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 340px); align-items: start; }
.pf__overlap-form { padding-inline-end: calc(var(--pf-pad) + 72px); }
.pf__overlap-summary {
    position: sticky; top: 12px; z-index: 1; margin-inline-start: -72px; margin-top: 36px;
    display: flex; flex-direction: column; gap: var(--pf-gap); min-width: 0;
}
.pf__overlap-summary .pf__card--summary { box-shadow: 0 30px 60px -28px rgba(15, 23, 42, .45), 0 2px 8px rgba(15, 23, 42, .08); border: 1px solid color-mix(in srgb, var(--pf-border) 70%, transparent); }
.pf--dark .pf__overlap-summary .pf__card--summary { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8); }

/* Showcase: a big product visual leads the page. */
.pf__showcase { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: calc(var(--pf-gap) * 1.4); align-items: center; }
.pf__visual {
    position: relative; display: grid; place-items: center; min-height: 280px; aspect-ratio: 4 / 3; overflow: hidden;
    border-radius: calc(var(--pf-radius) + 6px); color: var(--pf-ink);
    background:
        radial-gradient(55% 55% at 28% 22%, color-mix(in srgb, #fff 42%, transparent), transparent 70%),
        radial-gradient(70% 70% at 85% 90%, color-mix(in srgb, #000 30%, transparent), transparent 70%),
        linear-gradient(145deg, color-mix(in srgb, var(--pf-accent) 80%, #fff), var(--pf-accent) 45%, color-mix(in srgb, var(--pf-accent) 55%, #000));
}
.pf__visual-mark { font-family: var(--pf-head); font-size: 8em; font-weight: 800; line-height: 1; opacity: .9; text-shadow: 0 20px 40px rgba(0, 0, 0, .25); }
.pf__visual-tag {
    position: absolute; inset-inline-end: 18px; bottom: 18px; padding: 8px 16px; border-radius: 999px; font-weight: 800;
    background: color-mix(in srgb, #fff 88%, transparent); color: #111; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .4);
}
.pf__showcase-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pf__showcase-title { font-family: var(--pf-head); font-size: 2.3em; line-height: 1.05; font-weight: var(--pf-title-weight, 800); letter-spacing: -.02em; }
.pf__showcase-lines { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.pf__showcase-lines li { display: flex; flex-direction: column; padding: 10px 14px; border-radius: var(--pf-field-radius); background: var(--pf-accent-soft); font-weight: 700; }
.pf__showcase-lines span { font-weight: 500; font-size: .85em; color: var(--pf-muted); }

/* Timeline: every section on one vertical line. */
.pf__timeline { display: flex; flex-direction: column; gap: var(--pf-gap); }
.pf__tl-item { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
.pf__tl-item:not(:last-child)::before {
    content: ""; position: absolute; inset-inline-start: 19px; top: 44px; bottom: calc(var(--pf-gap) * -1 + 4px); width: 2px;
    background: linear-gradient(var(--pf-accent-line), color-mix(in srgb, var(--pf-border) 60%, transparent));
}
.pf__tl-node {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 800; font-family: var(--pf-label);
    color: var(--pf-ink); background: var(--pf-accent); box-shadow: 0 0 0 5px var(--pf-accent-soft);
}
.pf__tl-body { min-width: 0; padding-top: 6px; }
.pf__timeline .pf__sec-title .pf__num { display: none; }

/* Concierge: an inverse welcome panel holding the summary. */
.pf__concierge { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); padding: 0 !important; overflow: hidden; }
.pf__concierge > .pf__main { padding: calc(var(--pf-pad) * 1.2); }
.pf__concierge-panel {
    display: flex; flex-direction: column; gap: 14px; padding: calc(var(--pf-pad) * 1.2);
    color: var(--pf-surface);
    background:
        radial-gradient(90% 50% at 100% 0%, color-mix(in srgb, var(--pf-accent) 35%, transparent), transparent 70%),
        color-mix(in srgb, var(--pf-text) 94%, var(--pf-accent));
}
.pf__concierge-panel .pf__mono { background: var(--pf-accent); color: var(--pf-ink); }
.pf__concierge-hello { margin-top: 14px; font-family: var(--pf-head); font-size: 1.7em; font-weight: 700; line-height: 1.1; }
.pf__concierge-note { opacity: .82; font-size: .92em; }
.pf__concierge-summary { padding: 14px; border-radius: var(--pf-field-radius); background: color-mix(in srgb, var(--pf-surface) 8%, transparent); border: 1px solid color-mix(in srgb, var(--pf-surface) 16%, transparent); }
.pf__concierge-panel .pf__totals dt { color: color-mix(in srgb, var(--pf-surface) 78%, transparent); }
.pf__concierge-panel .pf__totals div { border-color: color-mix(in srgb, var(--pf-surface) 18%, transparent); }
.pf__concierge-panel .pf__totals .pf__grand dt, .pf__concierge-panel .pf__totals .pf__grand dd { color: var(--pf-surface); }
.pf__concierge-panel .pf__discount dd { color: inherit; }

/* Bottom summary: a full-width form closing on a wide summary band. */
.pf--l-ledger .pf__page, .pf--l-wizard .pf__page { max-width: 1080px; }
.pf__ledger-body .pf__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--pf-gap) * 1.6); }
.pf__ledger-body .pf__body > div:has(.pf__sec--payment), .pf__ledger-body .pf__body > div:has(.pf__sec--items), .pf__ledger-body .pf__body > div:has(.pf__sec--consent),
.pf__ledger-body .pf__body > div:has(.pf__sec--tickets), .pf__ledger-body .pf__body > div:has(.pf__sec--plan), .pf__ledger-body .pf__body > div:has(.pf__sec--stay) { grid-column: 1 / -1; }
.pf--fr-divided .pf__ledger-body .pf__body > div + div { border-top: 0; padding-top: 0; }
.pf__ledger {
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: calc(var(--pf-gap) * 1.4); align-items: center;
    padding: calc(var(--pf-pad) * 1.1); border-radius: var(--pf-radius);
    color: var(--pf-ink);
    background:
        radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, #fff 18%, transparent), transparent 60%),
        linear-gradient(115deg, var(--pf-accent), color-mix(in srgb, var(--pf-accent) 62%, #000));
}
.pf__ledger .pf__line span:last-child, .pf__ledger .pf__totals dd, .pf__ledger .pf__totals .pf__grand dd, .pf__ledger .pf__totals .pf__grand dt { color: var(--pf-ink); }
.pf__ledger .pf__totals dt { color: color-mix(in srgb, var(--pf-ink) 80%, transparent); }
.pf__ledger .pf__totals div { border-color: color-mix(in srgb, var(--pf-ink) 22%, transparent); }
.pf__ledger .pf__discount dd { color: inherit; }
.pf__ledger-pay { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pf__ledger-label { font-size: .78em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.pf__ledger-total { font-family: var(--pf-head); font-size: 2.6em; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.pf__ledger .pf__btn--cta { background: var(--pf-ink); color: var(--pf-accent-text); border-color: var(--pf-ink); box-shadow: none; }
.pf__ledger .pf__btn--cta .pf__btn-amount { border-color: currentColor; }
.pf__ledger .pf__fine { color: color-mix(in srgb, var(--pf-ink) 80%, transparent); }
.pf__ledger--soft { color: var(--pf-text); background: var(--pf-card-bg, var(--pf-surface)); border: 1px solid var(--pf-border); }
.pf__ledger--soft .pf__line span:last-child, .pf__ledger--soft .pf__totals dd, .pf__ledger--soft .pf__totals .pf__grand dt { color: var(--pf-text); }
.pf__ledger--soft .pf__totals dt { color: var(--pf-muted); }
.pf__ledger--soft .pf__totals div { border-color: color-mix(in srgb, var(--pf-border) 70%, transparent); }
.pf__ledger--soft .pf__totals .pf__grand dd, .pf__ledger--soft .pf__ledger-total { color: var(--pf-accent-text); }

/* Ticket: a pass with a perforated total stub. */
.pf__ticket {
    display: grid; grid-template-columns: minmax(0, 1fr) 230px; position: relative; overflow: hidden;
    border-radius: var(--pf-radius); background: var(--pf-card-bg, var(--pf-surface)); border: 1px solid var(--pf-border);
    box-shadow: 0 20px 44px -28px rgba(15, 23, 42, .45);
}
.pf__ticket::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 6px; background: var(--pf-accent); }
.pf__ticket-main { display: flex; flex-direction: column; gap: 8px; padding: calc(var(--pf-pad) * 1.05) var(--pf-pad) calc(var(--pf-pad) * 1.05) calc(var(--pf-pad) + 8px); min-width: 0; }
.pf__ticket-title { font-family: var(--pf-head); font-size: 1.5em; font-weight: 800; line-height: 1.15; }
.pf__ticket-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 6px 0 0; }
.pf__ticket-facts dt { font-size: .72em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pf-muted); }
.pf__ticket-facts dd { margin: 2px 0 0; font-weight: 700; font-family: var(--pf-label); }
.pf__ticket-stub {
    display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: var(--pf-pad);
    border-inline-start: 2px dashed var(--pf-border); background: var(--pf-accent-soft); position: relative;
}
.pf__ticket-stub::before, .pf__ticket-stub::after {
    content: ""; position: absolute; inset-inline-start: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--pf-page);
}
.pf__ticket-stub::before { top: -12px; }
.pf__ticket-stub::after { bottom: -12px; }
.pf__ticket-total { font-family: var(--pf-head); font-size: 2em; font-weight: 800; color: var(--pf-accent-text); line-height: 1; }

/* Dashboard: stat tiles over a section grid. */
.pf__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pf-gap); }
.pf__kpi {
    display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 18px; border-radius: var(--pf-radius);
    background: var(--pf-card-bg, var(--pf-surface)); border: 1px solid var(--pf-border);
}
.pf__kpi strong { font-family: var(--pf-head); font-size: 1.5em; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf__kpi-label { font-family: var(--pf-label); font-size: .72em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pf-muted); }
.pf__kpi--total { color: var(--pf-ink); border-color: transparent; background: linear-gradient(135deg, var(--pf-accent), color-mix(in srgb, var(--pf-accent) 65%, #000)); }
.pf__kpi--total .pf__kpi-label { color: color-mix(in srgb, var(--pf-ink) 82%, transparent); }
.pf__dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pf-gap); align-items: start; grid-auto-flow: row dense; }
.pf__dash > .pf__tile--w { grid-column: span 2; }
.pf__dash-cell { min-width: 0; }
.pf__dash-cell--total { display: flex; flex-direction: column; gap: var(--pf-gap); }

/* Three-column: section index, form, summary. */
.pf__triptych { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(260px, 310px); gap: var(--pf-gap); align-items: start; }
.pf__index { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pf__index-title { font-family: var(--pf-label); font-size: .72em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pf-muted); }
.pf__index ol { display: flex; flex-direction: column; gap: 2px; border-inline-start: 2px solid var(--pf-border); }
.pf__index li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-inline-start: -2px; border-inline-start: 2px solid transparent; font-size: .9em; font-weight: 600; color: var(--pf-muted); min-width: 0; }
.pf__index li > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf__index li.is-active { color: var(--pf-text); border-color: var(--pf-accent); }

/* Layered stack: a narrow card resting on two cards. */
.pf__stack { position: relative; width: 100%; max-width: 640px; margin: 22px auto 0; }
.pf__stack::before, .pf__stack::after {
    content: ""; position: absolute; inset: 0; border-radius: var(--pf-radius); background: var(--pf-card-bg, var(--pf-surface));
    border: 1px solid color-mix(in srgb, var(--pf-border) 80%, transparent); z-index: 0;
}
.pf__stack::before { transform: translateY(-22px) scale(.88); opacity: .45; }
.pf__stack::after { transform: translateY(-11px) scale(.94); opacity: .75; }
.pf__stack-card { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--pf-gap); box-shadow: 0 34px 70px -34px rgba(15, 23, 42, .5); }
.pf--dark .pf__stack-card { box-shadow: 0 34px 70px -30px rgba(0, 0, 0, .85); }
.pf--l-stack .pf__page { max-width: 760px; }

/* Full-bleed split: an immersive half carries the summary. */
.pf--l-fullbleed .pf__page { max-width: none; padding: 0; }
.pf__bleed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); min-height: 100%; }
.pf__bleed-side {
    display: flex; flex-direction: column; gap: 14px; padding: calc(var(--pf-pad) * 1.8) calc(var(--pf-pad) * 1.5); color: var(--pf-ink);
    background:
        radial-gradient(60% 50% at 0% 0%, color-mix(in srgb, #fff 26%, transparent), transparent 70%),
        radial-gradient(60% 60% at 100% 100%, color-mix(in srgb, #000 35%, transparent), transparent 70%),
        linear-gradient(160deg, var(--pf-accent), color-mix(in srgb, var(--pf-accent) 50%, #000));
}
.pf__bleed-side .pf__mono { background: color-mix(in srgb, var(--pf-ink) 18%, transparent); color: var(--pf-ink); }
.pf__bleed-title { margin-top: 24px; font-family: var(--pf-head); font-size: 2.6em; font-weight: var(--pf-title-weight, 800); line-height: 1.05; letter-spacing: -.02em; }
.pf__bleed-sub { opacity: .86; max-width: 34ch; }
.pf__bleed-glass {
    margin-top: 22px; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--pf-radius);
    background: color-mix(in srgb, var(--pf-ink) 12%, transparent); border: 1px solid color-mix(in srgb, var(--pf-ink) 22%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pf__bleed-glass .pf__panel-due { margin-top: 0; }
.pf__bleed-glass .pf__lines, .pf__bleed-glass .pf__line span:last-child, .pf__bleed-glass .pf__totals dd, .pf__bleed-glass .pf__totals .pf__grand dt,
.pf__bleed-glass .pf__totals .pf__grand dd { color: var(--pf-ink); }
.pf__bleed-glass .pf__totals dt { color: color-mix(in srgb, var(--pf-ink) 80%, transparent); }
.pf__bleed-glass .pf__totals div { border-color: color-mix(in srgb, var(--pf-ink) 22%, transparent); }
.pf__bleed-glass .pf__discount dd { color: inherit; }
.pf__bleed-form { padding: calc(var(--pf-pad) * 1.6) calc(var(--pf-pad) * 1.4); background: var(--pf-card-bg, var(--pf-surface)); }

/* Wizard: large step markers joined by a line. */
.pf__wizard { display: flex; }
.pf__wizard li { flex: 1 1 0; min-width: 0; position: relative; }
.pf__wizard li + li::before { content: ""; position: absolute; top: 21px; inset-inline-end: 50%; width: 100%; height: 2px; background: var(--pf-border); z-index: 0; }
.pf__wizard li.is-active + li::before, .pf__wizard li.is-done + li::before { background: var(--pf-accent-line); }
.pf__wizard button { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 6px; border: 0; background: none; color: var(--pf-muted); font-weight: 600; }
.pf__wizard-dot {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-weight: 800; font-family: var(--pf-label);
    background: var(--pf-card-bg, var(--pf-surface)); border: 2px solid var(--pf-border); color: var(--pf-muted);
}
.pf__wizard .is-active button, .pf__wizard .is-done button { color: var(--pf-text); }
.pf__wizard .is-active .pf__wizard-dot, .pf__wizard .is-done .pf__wizard-dot { background: var(--pf-accent); border-color: var(--pf-accent); color: var(--pf-ink); box-shadow: 0 0 0 6px var(--pf-accent-soft); }
.pf__wizard .pf__step-label { max-width: 100%; text-align: center; }

/* Side tabs: vertical tabs with the summary under them. */
.pf__sidetabs { display: grid; grid-template-columns: minmax(240px, 290px) minmax(0, 1fr); gap: var(--pf-gap); align-items: start; }
.pf__sidetabs-nav { display: flex; flex-direction: column; gap: var(--pf-gap); min-width: 0; position: sticky; top: 12px; }
.pf__vtabs { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: calc(var(--pf-field-radius) + 6px); background: var(--pf-accent-soft); }
.pf__vtab { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; border: 0; border-radius: var(--pf-field-radius); background: none; color: var(--pf-muted); font-weight: 700; text-align: start; }
.pf__vtab.is-active { background: var(--pf-card-bg, var(--pf-surface)); color: var(--pf-text); box-shadow: 0 6px 16px -10px rgba(15, 23, 42, .35); }
.pf__vtab.is-active .pf__num, .pf__vtab.is-done .pf__num { background: var(--pf-accent); color: var(--pf-ink); }

/* Paged: one narrow card with a progress meter. */
.pf--l-pager .pf__page { max-width: 700px; }
.pf__pager { display: flex; flex-direction: column; gap: var(--pf-gap); }
.pf__meter { display: flex; flex-direction: column; gap: 10px; }
.pf__meter-label { display: flex; justify-content: space-between; gap: 12px; font-size: .85em; color: var(--pf-muted); font-family: var(--pf-label); }
.pf__meter-label strong { color: var(--pf-text); }
.pf__meter-track { display: block; height: 6px; border-radius: 999px; background: var(--pf-accent-soft); overflow: hidden; }
.pf__meter-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--pf-accent) 70%, #fff), var(--pf-accent)); }

/* ═════════════ Section frames (inside .pf__body) ═════════════ */
.pf--fr-cards .pf__body > div, .pf--fr-inset .pf__body > div, .pf--fr-framed .pf__body > div { padding: calc(var(--pf-pad) * .72); border-radius: var(--pf-radius); }
.pf--fr-cards .pf__body > div { border: 1px solid var(--pf-border); background: var(--pf-card-bg, var(--pf-surface)); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.pf--fr-cards .pf__body > div + div, .pf--fr-framed .pf__body > div + div { padding-top: calc(var(--pf-pad) * .72); }
.pf--fr-inset .pf__body > div { background: color-mix(in srgb, var(--pf-accent) 5%, var(--pf-field)); border: 0; }
.pf--fr-inset .pf__body > div + div { border-top: 0; padding-top: calc(var(--pf-pad) * .72); }
.pf--fr-framed .pf__body > div { border: 1px solid var(--pf-accent-line); position: relative; margin-top: 10px; }
.pf--fr-framed .pf__body > div > .pf__sec > .pf__sec-title {
    align-self: flex-start; margin: calc(var(--pf-pad) * -.72 - .75em) 0 0 -8px; padding: 0 8px;
    background: var(--pf-card-bg, var(--pf-surface)); font-size: .82em; letter-spacing: .1em; text-transform: uppercase;
}
.pf--fr-borderless .pf__body > div + div { border-top: 0; padding-top: calc(var(--pf-gap) * .4); }
.pf--fr-borderless .pf__body .pf__sec-title { font-size: 1.22em; }
.pf--fr-borderless .pf__body { gap: calc(var(--pf-gap) * 1.35); }
.pf--fr-numbered .pf__body .pf__sec:has(> .pf__sec-title > .pf__num) { position: relative; padding-inline-start: 58px; }
.pf--fr-numbered .pf__body .pf__sec > .pf__sec-title > .pf__num {
    position: absolute; inset-inline-start: 0; top: -4px; width: 42px; height: 42px; font-size: 16px;
    background: var(--pf-accent); color: var(--pf-ink); border-radius: calc(var(--pf-field-radius) + 4px);
}
.pf--fr-ribbon .pf__body .pf__sec > .pf__sec-title {
    padding: 9px 14px; border-radius: var(--pf-field-radius); border-inline-start: 4px solid var(--pf-accent);
    background: linear-gradient(90deg, var(--pf-accent-soft), transparent 85%);
}

/* ═════════════ Motifs (behind the form; never on the live order form) ═════════════ */
.pf:not(.pf--x-classic):not(.pf--entry:not(.pf--composed)) > .pf__page { isolation: isolate; }
.pf:not(.pf--x-classic):not(.pf--entry:not(.pf--composed)):not(.pf--m-none) > .pf__page::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.pf--m-orbs:not(.pf--entry:not(.pf--composed)) > .pf__page::before {
    background:
        radial-gradient(260px 260px at 6% 8%, color-mix(in srgb, var(--pf-accent) 26%, transparent), transparent 70%),
        radial-gradient(320px 320px at 96% 30%, color-mix(in srgb, var(--pf-accent) 16%, transparent), transparent 70%),
        radial-gradient(240px 240px at 40% 100%, color-mix(in srgb, var(--pf-accent) 14%, transparent), transparent 70%);
}
.pf--m-grid:not(.pf--entry:not(.pf--composed)) > .pf__page::before {
    background-image: radial-gradient(color-mix(in srgb, var(--pf-text) 18%, transparent) 1.2px, transparent 1.4px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.pf--m-waves:not(.pf--entry:not(.pf--composed)) > .pf__page::before {
    background: repeating-radial-gradient(circle at 100% 0%, transparent 0 34px, color-mix(in srgb, var(--pf-accent) 16%, transparent) 34px 35px);
    -webkit-mask-image: radial-gradient(70% 60% at 100% 0%, #000, transparent); mask-image: radial-gradient(70% 60% at 100% 0%, #000, transparent);
}
.pf--m-lines:not(.pf--entry:not(.pf--composed)) > .pf__page::before {
    background: repeating-linear-gradient(135deg, transparent 0 13px, color-mix(in srgb, var(--pf-text) 7%, transparent) 13px 14px);
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 45%); mask-image: linear-gradient(90deg, #000, transparent 45%);
}
.pf--m-halo:not(.pf--entry:not(.pf--composed)) > .pf__page::before { background: radial-gradient(60% 45% at 50% 0%, color-mix(in srgb, var(--pf-accent) 24%, transparent), transparent 75%); }
.pf--m-corner:not(.pf--entry:not(.pf--composed)) > .pf__page::before {
    background:
        linear-gradient(var(--pf-accent), var(--pf-accent)) 0 0 / 120px 6px no-repeat,
        linear-gradient(var(--pf-accent), var(--pf-accent)) 0 0 / 6px 120px no-repeat,
        radial-gradient(180px 180px at 0 0, color-mix(in srgb, var(--pf-accent) 14%, transparent), transparent 70%);
}
.pf--m-arc:not(.pf--entry:not(.pf--composed)) > .pf__page::before {
    background: radial-gradient(circle at 100% 0%, transparent 0 210px, color-mix(in srgb, var(--pf-accent) 30%, transparent) 210px 212px, transparent 213px 260px,
        color-mix(in srgb, var(--pf-accent) 14%, transparent) 260px 261px, transparent 262px);
}

/* ═════════════ Visual systems ═════════════ */

/* Noir & Gold — black lacquer, gold hairlines, editorial serif. */
.pf--x-noir-gold {
    --pf-head: "Playfair Display", "Cormorant Garamond", "Didot", Georgia, serif;
    --pf-title-weight: 600; --pf-title-track: .005em;
    --pf-label-case: uppercase; --pf-label-track: .14em; --pf-label-size: .7em;
    --pf-sec-case: uppercase; --pf-sec-track: .16em; --pf-sec-size: .86em; --pf-sec-weight: 600;
    --pf-btn-case: uppercase; --pf-btn-track: .14em;
    --pf-backdrop: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--pf-accent) 16%, transparent), transparent 60%), radial-gradient(60% 60% at 0% 100%, color-mix(in srgb, var(--pf-accent) 8%, transparent), transparent 60%), var(--pf-page);
    --pf-card-border: 1px solid color-mix(in srgb, var(--pf-accent) 30%, transparent);
    --pf-card-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .04);
    --pf-btn-bg: linear-gradient(135deg, color-mix(in srgb, var(--pf-accent) 55%, #fff), var(--pf-accent) 48%, color-mix(in srgb, var(--pf-accent) 72%, #000));
}
.pf--x-noir-gold .pf__num, .pf--x-noir-gold .pf__mono { border: 1px solid var(--pf-accent); background: transparent; color: var(--pf-accent-text); }
.pf--x-noir-gold .pf__totals .pf__grand { border-top: 1px solid var(--pf-accent-line); }
.pf--x-noir-gold .pf__body > div + div { border-top-color: color-mix(in srgb, var(--pf-accent) 18%, transparent); }

/* Ivory Luxe — warm ivory, bronze, generous serif. */
.pf--x-ivory {
    --pf-head: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    --pf-title-size: 1.9em; --pf-title-weight: 600; --pf-sec-size: 1.2em; --pf-sec-weight: 600;
    --pf-label-case: uppercase; --pf-label-track: .1em; --pf-label-size: .72em;
    --pf-backdrop: linear-gradient(180deg, color-mix(in srgb, var(--pf-accent) 7%, var(--pf-page)), var(--pf-page) 40%);
    --pf-card-border: 1px solid var(--pf-border);
    --pf-card-shadow: 0 30px 60px -36px rgba(80, 55, 20, .35);
}
.pf--x-ivory .pf__mono { border-radius: 50%; }
.pf--x-ivory .pf__totals .pf__grand dd { font-family: var(--pf-head); font-size: 1.45em; font-weight: 600; }

/* Paper Luxe — deckled paper, stitched rules. */
.pf--x-paper-luxe {
    --pf-head: "Libre Baskerville", "Baskerville", Georgia, serif; --pf-title-weight: 700;
    --pf-label-case: uppercase; --pf-label-track: .08em; --pf-label-size: .72em;
    --pf-backdrop: radial-gradient(120% 90% at 50% 0%, #fff8, transparent), repeating-linear-gradient(0deg, transparent 0 3px, rgba(120, 90, 50, .025) 3px 4px), var(--pf-page);
    --pf-card-shadow: 0 1px 0 var(--pf-border), 0 18px 36px -24px rgba(90, 60, 25, .45);
}
.pf--x-paper-luxe .pf__body > div + div { border-top: 1px dashed var(--pf-border); }
.pf--x-paper-luxe .pf__card--summary, .pf--x-paper-luxe .pf__receipt { outline: 1px dashed color-mix(in srgb, var(--pf-accent) 40%, transparent); outline-offset: -8px; }

/* Aurora Glass — translucent panels over an aurora sky. */
.pf--x-aurora {
    --pf-title-weight: 800; --pf-title-track: -.025em;
    --pf-backdrop:
        radial-gradient(55% 50% at 10% 10%, color-mix(in srgb, var(--pf-accent) 45%, transparent), transparent 70%),
        radial-gradient(45% 45% at 90% 15%, color-mix(in srgb, var(--pf-accent) 25%, #67e8f9), transparent 70%),
        radial-gradient(55% 55% at 70% 100%, color-mix(in srgb, var(--pf-accent) 30%, #f0abfc), transparent 70%), var(--pf-page);
    --pf-btn-shadow: 0 16px 30px -16px var(--pf-accent);
}
.pf--x-aurora .pf__input { background: color-mix(in srgb, var(--pf-surface) 70%, transparent); }

/* Frosted Glass — cool frosted panes. */
.pf--x-frosted {
    --pf-backdrop:
        radial-gradient(40% 40% at 85% 10%, color-mix(in srgb, var(--pf-accent) 22%, transparent), transparent 70%),
        radial-gradient(45% 45% at 5% 90%, color-mix(in srgb, #94a3b8 30%, transparent), transparent 70%),
        linear-gradient(180deg, #f8fafc, var(--pf-page));
    --pf-card-bg: color-mix(in srgb, var(--pf-surface) 78%, transparent);
    --pf-card-border: 1px solid color-mix(in srgb, #fff 80%, transparent);
    --pf-card-shadow: 0 24px 50px -30px rgba(15, 23, 42, .35), inset 0 1px 0 #fff;
}
.pf--x-frosted .pf__card, .pf--x-frosted .pf__surface { -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%); }

/* Obsidian Glass — dark smoked glass with a luminous accent. */
.pf--x-obsidian {
    --pf-title-weight: 800;
    --pf-backdrop:
        radial-gradient(50% 45% at 15% 0%, color-mix(in srgb, var(--pf-accent) 36%, transparent), transparent 70%),
        radial-gradient(40% 40% at 100% 100%, color-mix(in srgb, var(--pf-accent) 20%, transparent), transparent 70%), var(--pf-page);
    --pf-card-bg: color-mix(in srgb, var(--pf-surface) 80%, transparent);
    --pf-card-border: 1px solid color-mix(in srgb, #fff 10%, transparent);
    --pf-card-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06);
    --pf-btn-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-accent) 60%, transparent), 0 14px 34px -12px color-mix(in srgb, var(--pf-accent) 70%, transparent);
}
.pf--x-obsidian .pf__card, .pf--x-obsidian .pf__surface { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* Minimal Premium — hairlines, whitespace, precision. */
.pf--x-minimal {
    --pf-title-weight: 600; --pf-title-track: -.03em; --pf-sec-weight: 600; --pf-sec-size: .95em;
    --pf-card-border: 1px solid var(--pf-border);
}
.pf--x-minimal .pf__num { background: transparent; border: 1px solid var(--pf-border); color: var(--pf-text); }
.pf--x-minimal .pf__opt.is-on, .pf--x-minimal .pf__method.is-on { box-shadow: 0 0 0 1px var(--pf-text) inset; border-color: var(--pf-text); }

/* Bento — soft grey canvas, rounded white tiles. */
.pf--x-bento {
    --pf-title-weight: 800; --pf-title-track: -.03em; --pf-title-size: 1.8em;
    --pf-card-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 30px -20px rgba(15, 23, 42, .25);
}
.pf--x-bento .pf__input { background: var(--pf-field); border-color: transparent; }
.pf--x-bento .pf__sec-title .pf__num { background: var(--pf-text); color: var(--pf-surface); }

/* Editorial — newspaper rules and a big serif. */
.pf--x-editorial {
    --pf-head: "Playfair Display", "Times New Roman", Georgia, serif; --pf-title-size: 2.2em; --pf-title-weight: 800; --pf-title-track: -.02em;
    --pf-sec-size: 1.25em; --pf-label-case: uppercase; --pf-label-track: .12em; --pf-label-size: .7em;
}
.pf--x-editorial .pf__body > div + div { border-top: 1px solid var(--pf-text); }
.pf--x-editorial .pf__head { border-bottom: 3px double var(--pf-text); padding-bottom: 14px; }
.pf--x-editorial .pf__head--banner { border-bottom: 0; }
.pf--x-editorial .pf__num { background: transparent; color: var(--pf-text); font-family: var(--pf-head); font-size: 15px; border: 1px solid var(--pf-text); }

/* Magazine — oversized numerals and column rules. */
.pf--x-magazine {
    --pf-head: "Bodoni Moda", "Didot", "Playfair Display", Georgia, serif; --pf-title-size: 2.4em; --pf-title-weight: 700; --pf-title-track: -.03em;
    --pf-label-case: uppercase; --pf-label-track: .16em; --pf-label-size: .68em;
}
.pf--x-magazine .pf__sec-title .pf__num { min-width: 0; height: auto; padding: 0; background: none; font-family: var(--pf-head); font-size: 2.2em; font-weight: 700; color: var(--pf-accent-text); line-height: .9; }
.pf--x-magazine .pf__eyebrow { color: var(--pf-text); border-bottom: 2px solid var(--pf-accent); align-self: flex-start; padding-bottom: 4px; }
.pf--x-magazine .pf__body > div + div { border-top: 1px solid var(--pf-text); }

/* Duotone — two confident tones. */
.pf--x-duotone {
    --pf-title-weight: 800; --pf-title-track: -.02em;
    --pf-backdrop: linear-gradient(105deg, color-mix(in srgb, var(--pf-accent) 22%, var(--pf-page)) 0 34%, var(--pf-page) 34%);
}
.pf--x-duotone .pf__card--summary { background: color-mix(in srgb, var(--pf-accent) 12%, var(--pf-surface)); }
.pf--x-duotone .pf__sec-title .pf__num { border-radius: 4px; background: var(--pf-accent); color: var(--pf-ink); }

/* Gradient Mesh — rich gradients on every key surface. */
.pf--x-mesh {
    --pf-title-weight: 800; --pf-title-track: -.025em;
    --pf-backdrop:
        radial-gradient(50% 60% at 0% 0%, color-mix(in srgb, var(--pf-accent) 30%, transparent), transparent 70%),
        radial-gradient(50% 60% at 100% 0%, color-mix(in srgb, var(--pf-accent) 18%, #a78bfa), transparent 70%),
        radial-gradient(60% 60% at 50% 100%, color-mix(in srgb, var(--pf-accent) 16%, #f9a8d4), transparent 70%), var(--pf-page);
    --pf-card-shadow: 0 24px 50px -30px color-mix(in srgb, var(--pf-accent) 60%, #000);
    --pf-btn-bg: linear-gradient(120deg, color-mix(in srgb, var(--pf-accent) 70%, #f0abfc), var(--pf-accent) 50%, color-mix(in srgb, var(--pf-accent) 70%, #312e81));
}
.pf--x-mesh .pf__num, .pf--x-mesh .pf__mono { background: linear-gradient(135deg, color-mix(in srgb, var(--pf-accent) 75%, #fff), var(--pf-accent)); color: var(--pf-ink); }

/* Hospitality — warm sand and linen. */
.pf--x-hospitality {
    --pf-head: "Cormorant Garamond", "Playfair Display", Georgia, serif; --pf-title-size: 2em; --pf-title-weight: 600; --pf-sec-size: 1.2em; --pf-sec-weight: 600;
    --pf-backdrop: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--pf-accent) 9%, transparent), transparent 70%), var(--pf-page);
    --pf-card-shadow: 0 26px 52px -34px rgba(90, 60, 30, .4);
}
.pf--x-hospitality .pf__opt { border-radius: calc(var(--pf-field-radius) + 4px); }

/* Soft Clay — gentle neumorphic depth. */
.pf--x-clay {
    --pf-title-weight: 800;
    --pf-card-shadow: 10px 10px 24px color-mix(in srgb, var(--pf-text) 12%, transparent), -10px -10px 24px #fff;
    --pf-btn-shadow: 6px 6px 14px color-mix(in srgb, var(--pf-accent) 35%, transparent), -4px -4px 10px #fff;
}
.pf--x-clay .pf__input { background: var(--pf-field); border-color: transparent; box-shadow: inset 3px 3px 7px color-mix(in srgb, var(--pf-text) 10%, transparent), inset -3px -3px 7px #fff; }
.pf--x-clay .pf__opt, .pf--x-clay .pf__method { border-color: transparent; box-shadow: 4px 4px 10px color-mix(in srgb, var(--pf-text) 10%, transparent), -4px -4px 10px #fff; }
.pf--x-clay .pf__opt.is-on, .pf--x-clay .pf__method.is-on { box-shadow: inset 3px 3px 8px color-mix(in srgb, var(--pf-text) 12%, transparent), inset -3px -3px 8px #fff, 0 0 0 2px var(--pf-accent); }

/* Premium SaaS — crisp, tidy, product-grade. */
.pf--x-saas {
    --pf-title-weight: 700; --pf-title-track: -.025em; --pf-sec-size: 1em;
    --pf-backdrop: linear-gradient(color-mix(in srgb, var(--pf-border) 45%, transparent) 1px, transparent 1px) 0 0 / 100% 32px, linear-gradient(90deg, color-mix(in srgb, var(--pf-border) 45%, transparent) 1px, transparent 1px) 0 0 / 32px 100%, var(--pf-page);
    --pf-card-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px -16px rgba(15, 23, 42, .2);
}
.pf--x-saas .pf__badge, .pf--x-saas .pf__pill { letter-spacing: .02em; }
.pf--x-saas .pf__totals dd { font-variant-numeric: tabular-nums; }

/* Corporate — structured, with a navy masthead block. */
.pf--x-corporate {
    --pf-title-weight: 700; --pf-sec-size: 1em; --pf-label-size: .78em;
    --pf-backdrop: linear-gradient(180deg, color-mix(in srgb, var(--pf-accent) 6%, var(--pf-page)), var(--pf-page) 240px);
    --pf-card-shadow: 0 10px 30px -18px rgba(15, 30, 60, .35);
    --pf-navy: color-mix(in srgb, var(--pf-text) 90%, var(--pf-accent));
}
.pf--x-corporate .pf__page > .pf__head:not(.pf__head--banner) { padding: calc(var(--pf-pad) * .85) var(--pf-pad); border-radius: var(--pf-radius); background: var(--pf-navy); color: var(--pf-surface); border-bottom: 0; }
.pf--x-corporate .pf__page > .pf__head:not(.pf__head--banner) :is(.pf__sub, .pf__eyebrow, .pf__secure) { color: color-mix(in srgb, var(--pf-surface) 78%, transparent); }
.pf--x-corporate .pf__page > .pf__head:not(.pf__head--banner) .pf__badge { color: var(--pf-surface); background: color-mix(in srgb, var(--pf-surface) 14%, transparent); border-color: color-mix(in srgb, var(--pf-surface) 30%, transparent); }
.pf--x-corporate .pf__page > .pf__head:not(.pf__head--banner) .pf__mono { background: var(--pf-accent); color: var(--pf-ink); }
.pf--x-corporate .pf__totals dd { font-variant-numeric: tabular-nums; }

/* Private Banking — navy, tabular figures, trust cues. */
.pf--x-banking {
    --pf-label: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --pf-title-weight: 700; --pf-sec-size: 1em;
    --pf-label-case: uppercase; --pf-label-track: .08em; --pf-label-size: .72em;
    --pf-backdrop: linear-gradient(180deg, color-mix(in srgb, var(--pf-accent) 9%, var(--pf-page)), var(--pf-page) 260px);
    --pf-card-border: 1px solid var(--pf-border);
    --pf-card-shadow: 0 2px 4px rgba(13, 27, 42, .04), 0 18px 36px -26px rgba(13, 27, 42, .35);
}
.pf--x-banking .pf__totals dd, .pf--x-banking .pf__item-price, .pf--x-banking .pf__opt-price { font-variant-numeric: tabular-nums; }
.pf--x-banking .pf__card--summary { border-top: 4px solid var(--pf-accent); }

/* Pastel — candy-soft and rounded. */
.pf--x-pastel {
    --pf-title-weight: 800;
    --pf-backdrop:
        radial-gradient(35% 40% at 10% 15%, #fde2f0, transparent 70%), radial-gradient(35% 40% at 90% 10%, #dbeafe, transparent 70%),
        radial-gradient(40% 40% at 60% 100%, #dcfce7, transparent 70%), var(--pf-page);
    --pf-card-shadow: 0 18px 40px -28px color-mix(in srgb, var(--pf-accent) 60%, transparent);
}
.pf--x-pastel .pf__chip:not(.is-on), .pf--x-pastel .pf__opt:not(.is-on), .pf--x-pastel .pf__method:not(.is-on) { background: color-mix(in srgb, var(--pf-accent) 4%, var(--pf-surface)); }

/* Couture — stark black and white, couture tracking. */
.pf--x-couture {
    --pf-head: "Didot", "Bodoni Moda", "Playfair Display", Georgia, serif; --pf-title-size: 2.1em; --pf-title-weight: 500; --pf-title-track: .02em;
    --pf-sec-case: uppercase; --pf-sec-track: .22em; --pf-sec-size: .8em; --pf-sec-weight: 600;
    --pf-label-case: uppercase; --pf-label-track: .18em; --pf-label-size: .66em;
    --pf-btn-case: uppercase; --pf-btn-track: .22em;
}
.pf--x-couture .pf__num { background: var(--pf-text); color: var(--pf-surface); border-radius: 0; }
.pf--x-couture .pf__body > div + div { border-top: 1px solid var(--pf-text); }
.pf--x-couture .pf__opt.is-on, .pf--x-couture .pf__method.is-on { box-shadow: 0 0 0 1px var(--pf-text) inset; border-color: var(--pf-text); background: var(--pf-surface); }

/* Sunset Glow — warm gradients and glow. */
.pf--x-sunset {
    --pf-title-weight: 800;
    --pf-backdrop:
        radial-gradient(70% 55% at 100% 0%, color-mix(in srgb, var(--pf-accent) 35%, #fde68a), transparent 70%),
        radial-gradient(60% 50% at 0% 100%, color-mix(in srgb, var(--pf-accent) 22%, #fbcfe8), transparent 70%), var(--pf-page);
    --pf-btn-bg: linear-gradient(120deg, #f59f00, var(--pf-accent) 55%, color-mix(in srgb, var(--pf-accent) 60%, #a61e4d));
    --pf-btn-shadow: 0 16px 30px -16px var(--pf-accent);
    --pf-card-shadow: 0 26px 56px -32px color-mix(in srgb, var(--pf-accent) 70%, #000);
}

/* Fine Dining — forest green, brass, menu-card serif. */
.pf--x-dining {
    --pf-head: "Cormorant Garamond", "Playfair Display", Georgia, serif; --pf-title-size: 2em; --pf-title-weight: 600;
    --pf-sec-case: uppercase; --pf-sec-track: .18em; --pf-sec-size: .82em; --pf-sec-weight: 600;
    --pf-label-case: uppercase; --pf-label-track: .14em; --pf-label-size: .68em;
    --pf-backdrop: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--pf-accent) 12%, transparent), transparent 70%), var(--pf-page);
    --pf-card-border: 1px solid color-mix(in srgb, var(--pf-accent) 26%, transparent);
    --pf-card-shadow: 0 30px 60px -36px rgba(0, 0, 0, .8);
}
.pf--x-dining .pf__line span:first-child { flex: 1 1 auto; display: flex; gap: 8px; }
.pf--x-dining .pf__line span:first-child::after { content: ""; flex: 1 1 auto; border-bottom: 1px dotted color-mix(in srgb, var(--pf-accent) 45%, transparent); transform: translateY(-4px); min-width: 12px; }
.pf--x-dining .pf__num, .pf--x-dining .pf__mono { background: transparent; border: 1px solid var(--pf-accent); color: var(--pf-accent-text); }
.pf--x-dining .pf__title, .pf--x-dining .pf__masthead-title { font-style: italic; }

/* Voyage — sky-washed, boarding-pass details. */
.pf--x-voyage {
    --pf-title-weight: 800;
    --pf-backdrop: linear-gradient(180deg, color-mix(in srgb, var(--pf-accent) 16%, #e0f2fe) 0, var(--pf-page) 320px);
    --pf-card-shadow: 0 22px 48px -30px rgba(14, 37, 49, .45);
}
.pf--x-voyage .pf__sec-title .pf__num { border-radius: 6px; }
.pf--x-voyage .pf__card--summary { border-top: 2px dashed var(--pf-accent-line); }

/* Metallic — brushed steel and engraved edges. */
.pf--x-metallic {
    --pf-title-weight: 800; --pf-label-case: uppercase; --pf-label-track: .08em; --pf-label-size: .72em;
    --pf-backdrop: linear-gradient(160deg, #f5f6f8, var(--pf-page) 40%, #dfe3e8);
    --pf-card-bg: linear-gradient(180deg, #fff, var(--pf-surface));
    --pf-card-border: 1px solid #cfd5dd;
    --pf-card-shadow: inset 0 1px 0 #fff, 0 18px 40px -26px rgba(22, 25, 31, .45);
    --pf-btn-bg: linear-gradient(180deg, color-mix(in srgb, var(--pf-accent) 70%, #fff), var(--pf-accent) 45%, color-mix(in srgb, var(--pf-accent) 75%, #000));
}
.pf--x-metallic .pf__mono, .pf--x-metallic .pf__num { background: linear-gradient(180deg, #f1f3f6, #c9d0d9); color: #1f242c; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, .2); }

/* Neon — night canvas, neon edges. */
.pf--x-neon {
    --pf-title-weight: 800; --pf-label-case: uppercase; --pf-label-track: .1em; --pf-label-size: .7em;
    --pf-backdrop: radial-gradient(45% 40% at 85% 0%, color-mix(in srgb, var(--pf-accent) 28%, transparent), transparent 70%), radial-gradient(40% 40% at 0% 100%, rgba(168, 85, 247, .22), transparent 70%), var(--pf-page);
    --pf-card-border: 1px solid color-mix(in srgb, var(--pf-accent) 40%, transparent);
    --pf-card-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-accent) 12%, transparent), 0 0 40px -12px color-mix(in srgb, var(--pf-accent) 45%, transparent);
    --pf-btn-shadow: 0 0 24px -4px var(--pf-accent);
}
.pf--x-neon .pf__title, .pf--x-neon .pf__grand dd { text-shadow: 0 0 18px color-mix(in srgb, var(--pf-accent) 55%, transparent); }
.pf--x-neon .pf__opt.is-on, .pf--x-neon .pf__method.is-on, .pf--x-neon .pf__input:focus { box-shadow: 0 0 0 1px var(--pf-accent) inset, 0 0 18px -6px var(--pf-accent); }

/* Monochrome — pure greyscale. */
.pf--x-mono {
    --pf-title-weight: 700; --pf-title-track: -.03em; --pf-sec-size: .95em;
    --pf-card-border: 1px solid var(--pf-border);
}
.pf--x-mono .pf__mark { filter: grayscale(1) contrast(1.2); }
.pf--x-mono .pf__thumb, .pf--x-mono .pf__product-img, .pf--x-mono .pf__visual { filter: grayscale(1); }

/* Tech Grid — precise grid, mono labels. */
.pf--x-tech {
    --pf-label: "JetBrains Mono", "IBM Plex Mono", Consolas, monospace; --pf-label-case: uppercase; --pf-label-track: .06em; --pf-label-size: .7em;
    --pf-title-weight: 700; --pf-sec-size: .95em;
    --pf-backdrop: linear-gradient(color-mix(in srgb, var(--pf-accent) 8%, transparent) 1px, transparent 1px) 0 0 / 100% 28px, linear-gradient(90deg, color-mix(in srgb, var(--pf-accent) 8%, transparent) 1px, transparent 1px) 0 0 / 28px 100%, var(--pf-page);
    --pf-card-border: 1px solid var(--pf-border);
}
.pf--x-tech .pf__num { border-radius: 2px; font-family: var(--pf-label); }
.pf--x-tech .pf__totals dd, .pf--x-tech .pf__kpi strong { font-family: var(--pf-label); }

/* Concierge — dark personal-service suite with brass. */
.pf--x-concierge {
    --pf-head: "Playfair Display", Georgia, serif; --pf-title-weight: 600;
    --pf-label-case: uppercase; --pf-label-track: .12em; --pf-label-size: .7em;
    --pf-backdrop: radial-gradient(70% 50% at 0% 0%, color-mix(in srgb, var(--pf-accent) 14%, transparent), transparent 70%), var(--pf-page);
    --pf-card-border: 1px solid color-mix(in srgb, var(--pf-accent) 22%, var(--pf-border));
    --pf-card-shadow: 0 34px 70px -40px rgba(0, 0, 0, .85);
}
.pf--x-concierge .pf__num { background: transparent; border: 1px solid var(--pf-accent-line); color: var(--pf-accent-text); }

/* Boutique — blush tones, delicate frames. */
.pf--x-boutique {
    --pf-head: "Cormorant Garamond", "Playfair Display", Georgia, serif; --pf-title-size: 2em; --pf-title-weight: 600; --pf-sec-size: 1.2em; --pf-sec-weight: 600;
    --pf-backdrop: radial-gradient(60% 50% at 100% 0%, color-mix(in srgb, var(--pf-accent) 14%, transparent), transparent 70%), var(--pf-page);
    --pf-card-shadow: 0 24px 50px -34px color-mix(in srgb, var(--pf-accent) 60%, #000);
}
.pf--x-boutique .pf__title { font-style: italic; }
.pf--x-boutique .pf__card--summary { outline: 1px solid color-mix(in srgb, var(--pf-accent) 30%, transparent); outline-offset: -7px; }

/* Velvet Night — deep velvet with a jewel accent. */
.pf--x-velvet {
    --pf-head: "Playfair Display", Georgia, serif; --pf-title-weight: 700;
    --pf-backdrop:
        radial-gradient(60% 50% at 100% 0%, color-mix(in srgb, var(--pf-accent) 30%, transparent), transparent 70%),
        radial-gradient(60% 60% at 0% 100%, rgba(124, 58, 237, .3), transparent 70%), var(--pf-page);
    --pf-card-bg: linear-gradient(180deg, color-mix(in srgb, var(--pf-surface) 92%, #fff), var(--pf-surface));
    --pf-card-border: 1px solid color-mix(in srgb, #fff 10%, transparent);
    --pf-card-shadow: 0 34px 70px -34px rgba(0, 0, 0, .9);
    --pf-btn-shadow: 0 14px 34px -14px var(--pf-accent);
}

/* ── Version 3 systems (PF-2001 … PF-3000) ── */

/* High Gloss — lacquered white cards with a glass sheen and a jewel accent. */
.pf--x-glossy {
    --pf-title-weight: 800; --pf-title-track: -.02em;
    --pf-backdrop:
        radial-gradient(60% 45% at 0% 0%, color-mix(in srgb, var(--pf-accent) 22%, transparent), transparent 70%),
        radial-gradient(55% 50% at 100% 100%, color-mix(in srgb, var(--pf-accent) 14%, #c7d2fe), transparent 70%), var(--pf-page);
    /* The gloss: a bright sheen across the top of every card, under its content. */
    --pf-card-bg: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 42%),
        linear-gradient(165deg, #fff 0%, #f8fafc 55%, color-mix(in srgb, var(--pf-accent) 7%, #fff) 100%);
    --pf-card-border: 1px solid rgba(255, 255, 255, .9);
    --pf-card-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 30px 60px -32px color-mix(in srgb, var(--pf-accent) 55%, #0f172a);
    --pf-btn-bg: linear-gradient(180deg, color-mix(in srgb, var(--pf-accent) 75%, #fff), var(--pf-accent) 52%, color-mix(in srgb, var(--pf-accent) 85%, #000));
    --pf-btn-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 16px 30px -14px var(--pf-accent);
}
.pf--x-glossy .pf__input { box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06); }

/* Champagne Luxe — ivory paper, champagne-gold hairlines, a jeweller's serif. */
.pf--x-champagne {
    --pf-head: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    --pf-title-size: 2em; --pf-title-weight: 600; --pf-sec-size: 1.15em; --pf-sec-weight: 600;
    --pf-label-case: uppercase; --pf-label-track: .12em; --pf-label-size: .7em;
    --pf-btn-case: uppercase; --pf-btn-track: .12em;
    --pf-backdrop: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--pf-accent) 14%, transparent), transparent 70%), var(--pf-page);
    --pf-card-border: 1px solid color-mix(in srgb, var(--pf-accent) 35%, var(--pf-border));
    --pf-card-shadow: 0 32px 64px -40px rgba(90, 65, 25, .45);
    --pf-btn-bg: linear-gradient(135deg, color-mix(in srgb, var(--pf-accent) 60%, #fff), var(--pf-accent) 50%, color-mix(in srgb, var(--pf-accent) 75%, #000));
}
.pf--x-champagne .pf__card--summary { outline: 1px solid color-mix(in srgb, var(--pf-accent) 35%, transparent); outline-offset: -8px; }
.pf--x-champagne .pf__totals .pf__grand dd { font-family: var(--pf-head); font-size: 1.5em; }

/* Midnight Gloss — a glossy midnight console with luminous edges. */
.pf--x-midnight {
    --pf-title-weight: 800; --pf-title-track: -.02em;
    --pf-backdrop:
        radial-gradient(60% 50% at 100% 0%, color-mix(in srgb, var(--pf-accent) 32%, transparent), transparent 70%),
        radial-gradient(50% 50% at 0% 100%, rgba(59, 130, 246, .22), transparent 70%), var(--pf-page);
    --pf-card-bg: linear-gradient(170deg, color-mix(in srgb, var(--pf-surface) 82%, #fff 6%), var(--pf-surface));
    --pf-card-border: 1px solid color-mix(in srgb, var(--pf-accent) 22%, rgba(255, 255, 255, .08));
    --pf-card-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 40px 80px -40px rgba(0, 0, 0, .95);
    --pf-btn-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-accent) 60%, transparent), 0 18px 40px -16px var(--pf-accent);
}
.pf--x-midnight .pf__input:focus { box-shadow: 0 0 0 1px var(--pf-accent) inset, 0 0 22px -8px var(--pf-accent); }

/* Carbon Sport — carbon-black panels, racing accent stripe, spec-plate labels. */
.pf--x-carbon {
    --pf-title-weight: 800; --pf-title-track: -.01em;
    --pf-label-case: uppercase; --pf-label-track: .14em; --pf-label-size: .68em;
    --pf-sec-case: uppercase; --pf-sec-track: .14em; --pf-sec-size: .82em; --pf-sec-weight: 700;
    --pf-btn-case: uppercase; --pf-btn-track: .1em;
    --pf-backdrop: repeating-linear-gradient(45deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 6px), var(--pf-page);
    --pf-card-border: 1px solid rgba(255, 255, 255, .07);
    --pf-card-shadow: 0 30px 60px -30px rgba(0, 0, 0, .95);
}
.pf--x-carbon .pf__card { border-top: 3px solid var(--pf-accent); }
.pf--x-carbon .pf__sec-title { border-left: 3px solid var(--pf-accent); padding-left: 10px; }
.pf--x-carbon .pf__specs .pf__input { font-family: var(--pf-mono, ui-monospace, "SFMono-Regular", Menlo, monospace); }

/* Marketplace — a fast, thumb-friendly social-commerce flow. */
.pf--x-marketplace {
    --pf-title-weight: 800;
    --pf-backdrop: linear-gradient(180deg, color-mix(in srgb, var(--pf-accent) 8%, var(--pf-page)), var(--pf-page) 30%);
    --pf-card-border: 1px solid var(--pf-border);
    --pf-card-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 12px 28px -18px rgba(0, 0, 0, .35);
    --pf-btn-shadow: 0 10px 22px -12px var(--pf-accent);
}
.pf--x-marketplace .pf__input { min-height: 48px; }
.pf--x-marketplace .pf__btn--cta { min-height: 52px; font-size: 1.05em; }
.pf--x-marketplace .pf__method, .pf--x-marketplace .pf__opt { min-height: 48px; }

/* Rose Gold — blush glass, rose-gold rules and a soft serif. */
.pf--x-rose-gold {
    --pf-head: "Playfair Display", "Cormorant Garamond", Georgia, serif; --pf-title-weight: 600; --pf-title-size: 1.95em;
    --pf-backdrop:
        radial-gradient(60% 50% at 100% 0%, color-mix(in srgb, var(--pf-accent) 24%, #ffe4e6), transparent 70%),
        radial-gradient(50% 50% at 0% 100%, rgba(253, 230, 138, .3), transparent 70%), var(--pf-page);
    --pf-card-border: 1px solid color-mix(in srgb, var(--pf-accent) 25%, #fff);
    --pf-card-shadow: 0 28px 56px -34px color-mix(in srgb, var(--pf-accent) 65%, #2e1e1e);
    --pf-btn-bg: linear-gradient(120deg, #e8b4b8, var(--pf-accent) 50%, color-mix(in srgb, var(--pf-accent) 70%, #5b2a2a));
    --pf-btn-shadow: 0 14px 30px -14px var(--pf-accent);
}
.pf--x-rose-gold .pf__title { font-style: italic; }

/* The category-specific details section (version 3). */
.pf__specs { row-gap: var(--pf-gap); }

/* ═════════════ Responsive (by container width) ═════════════ */
@container pf (max-width: 900px) {
    .pf__cols--even { grid-template-columns: minmax(0, 1fr); }
    .pf__bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf__bento > .pf__tile--total { grid-column: 1 / -1; grid-row: auto; position: static; }
    .pf__editorial { grid-template-columns: minmax(0, 1fr); gap: var(--pf-gap); }
    .pf__masthead { position: static; }
    .pf__masthead-title { font-size: 2.1em; }
    .pf__overlap { grid-template-columns: minmax(0, 1fr); }
    .pf__overlap-form { padding-inline-end: var(--pf-pad); }
    .pf__overlap-summary { position: relative; margin: -28px 14px 0; }
    .pf__showcase { grid-template-columns: minmax(0, 1fr); }
    .pf__visual { min-height: 0; aspect-ratio: 16 / 9; }
    .pf__concierge { grid-template-columns: minmax(0, 1fr); }
    .pf__ledger-body .pf__body { grid-template-columns: minmax(0, 1fr); }
    .pf__ledger { grid-template-columns: minmax(0, 1fr); }
    .pf__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf__dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf__dash > .pf__tile--w, .pf__dash > .pf__dash-cell--total { grid-column: 1 / -1; }
    .pf__triptych { grid-template-columns: minmax(0, 1fr); }
    .pf__index { position: static; }
    .pf__index ol { flex-direction: row; overflow-x: auto; scrollbar-width: none; border-inline-start: 0; border-bottom: 2px solid var(--pf-border); }
    .pf__index li { flex: 0 0 auto; margin: 0 0 -2px; border-inline-start: 0; border-bottom: 2px solid transparent; }
    .pf__bleed { grid-template-columns: minmax(0, 1fr); }
    .pf__bleed-title { margin-top: 10px; font-size: 2em; }
    .pf__sidetabs { grid-template-columns: minmax(0, 1fr); }
    .pf__sidetabs-nav { position: static; }
    .pf__vtabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
    .pf__vtab { flex: 1 0 auto; }
    .pf__sidetabs-nav .pf__card--summary { order: 2; }
}

@container pf (max-width: 560px) {
    .pf__bento { grid-template-columns: minmax(0, 1fr); }
    .pf__bento > .pf__tile--w { grid-column: auto; }
    .pf__tile-total { font-size: 2em; }
    .pf__masthead-title, .pf__showcase-title, .pf__bleed-title { font-size: 1.7em; }
    .pf__overlap-summary { margin: -20px 6px 0; }
    .pf__visual-mark { font-size: 5em; }
    .pf__tl-item { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
    .pf__tl-node { width: 30px; height: 30px; font-size: 13px; box-shadow: 0 0 0 3px var(--pf-accent-soft); }
    .pf__tl-item:not(:last-child)::before { inset-inline-start: 14px; top: 34px; }
    .pf__ticket { grid-template-columns: minmax(0, 1fr); }
    .pf__ticket-stub { border-inline-start: 0; border-top: 2px dashed var(--pf-border); }
    .pf__ticket-stub::before, .pf__ticket-stub::after { top: -13px; bottom: auto; }
    .pf__ticket-stub::before { inset-inline-start: -12px; }
    .pf__ticket-stub::after { inset-inline-start: auto; inset-inline-end: -12px; }
    .pf__ledger-total, .pf__ticket-total { font-size: 2em; }
    .pf__kpis { gap: 10px; }
    .pf__kpi { padding: 12px; }
    .pf__kpi strong { font-size: 1.2em; }
    .pf__dash { grid-template-columns: minmax(0, 1fr); }
    .pf__dash > .pf__tile--w { grid-column: auto; }
    .pf__stack { margin-top: 16px; }
    .pf__bleed-side, .pf__bleed-form { padding: 22px 16px; }
    .pf__wizard .pf__step-label { display: none; }
    .pf__wizard .is-active .pf__step-label { display: block; }
    .pf__wizard-dot { width: 36px; height: 36px; }
    .pf__wizard li + li::before { top: 17px; }
    .pf--fr-numbered .pf__body .pf__sec:has(> .pf__sec-title > .pf__num) { padding-inline-start: 0; }
    .pf--fr-numbered .pf__body .pf__sec > .pf__sec-title > .pf__num { position: static; width: 32px; height: 32px; font-size: 13px; }
    .pf--fr-cards .pf__body > div, .pf--fr-inset .pf__body > div, .pf--fr-framed .pf__body > div { padding: 14px; }
    /* A motif steps back on a phone-width form, where it would run under the text. */
    .pf:not(.pf--x-classic) > .pf__page::before { opacity: .4; }
}

@media (prefers-reduced-motion: reduce) {
    .pf:not(.pf--x-classic) .pf__input, .pf:not(.pf--x-classic) .pf__opt, .pf:not(.pf--x-classic) .pf__method, .pf:not(.pf--x-classic) .pf__chip { transition: none; }
}

/* ═════════════ Live order form (Phase 4: the public website's PublicOrderEntry) ═════════════
   The same tokens and palette as the template; one column; real inputs. Still scoped under .pf — nothing reaches the page. */
.pf--entry:not(.pf--composed) .pf__page { max-width: 720px; }
/* A live form drawn in its template's OWN layout (the Product Checkout): the template's width, motif and composition. */
.pf--composed .pf__sec--live > .pf__form, .pf--composed .pf__sec--live { min-width: 0; }
.pf--entry .pf__card--narrow { display: flex; flex-direction: column; gap: var(--pf-gap); }
.pf__form { display: flex; flex-direction: column; gap: var(--pf-gap); min-width: 0; }
.pf--entry fieldset.pf__sec, .pf--entry fieldset.pf__field { margin: 0; padding: 0; border: 0; min-width: 0; }
.pf--entry legend.pf__sec-title { padding: 0; margin-bottom: 12px; }
.pf--entry legend.pf__label { padding: 0; margin-bottom: 6px; }
.pf--entry .pf__sec + .pf__sec { padding-top: var(--pf-gap); border-top: 1px solid var(--pf-border); }
.pf--entry .pf__input { cursor: text; }
.pf--entry .pf__input[type="date"], .pf--entry .pf__input[type="number"] { cursor: default; }
.pf--entry .pf__input--area { resize: vertical; min-height: 88px; }
.pf--entry .pf__input:focus-visible { border-color: var(--pf-accent); box-shadow: 0 0 0 3px var(--pf-accent-soft); }
.pf--entry .pf__input[aria-invalid="true"] { border-color: #dc2626; box-shadow: 0 0 0 1px #dc2626 inset; }
.pf--entry.pf--f-floating .pf__field > .pf__label { position: static; font-size: .82em; }
.pf--entry.pf--f-floating .pf__input { padding-top: 0; height: 46px; }
.pf--entry.pf--f-floating .pf__input--area { padding-top: 12px; height: auto; }
.pf--entry .pf__opt, .pf--entry .pf__check { cursor: pointer; position: relative; }
.pf--entry .pf__opt:has(.pf__native:focus-visible), .pf--entry .pf__check:has(.pf__native:focus-visible) {
    outline: 2px solid var(--pf-accent); outline-offset: 2px;
}
.pf--entry .pf__choice[aria-invalid="true"] .pf__opt { border-color: #dc2626; }
.pf--entry .pf__check .pf__box { margin-top: 1px; align-self: flex-start; }
.pf--entry .pf__check { align-items: flex-start; }
/* Native controls stay in the accessibility tree and take keyboard focus; the styled marks draw them. */
.pf__native { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
/* The Product Checkout's payment methods: the template's own method tiles / chips / tabs / list, holding real radios. */
.pf--entry label.pf__method { position: relative; cursor: pointer; }
.pf--entry .pf__method:has(.pf__native:focus-visible) { outline: 2px solid var(--pf-accent); outline-offset: 2px; }
.pf--entry .pf__choice[aria-invalid="true"] .pf__method { border-color: #dc2626; }
.pf__method-note { margin-top: 8px; }
/* The payment choice (Cash on Delivery / Online Payment) above the template's own online options — preview and checkout alike. */
.pf__paykind { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 10px; }
button.pf__opt { width: 100%; text-align: start; }
.pf__paykind + .pf__methods, .pf__paykind + .pf__method-detail { margin-top: 4px; }
.pf__req { color: #dc2626; font-weight: 700; }
.pf__opt-mark { font-weight: 400; font-size: .92em; color: var(--pf-muted); }
.pf__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pf__hp { position: absolute; inset-inline-start: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.pf__error { margin: 2px 0 0; font-size: .84em; font-weight: 600; color: #b91c1c; }
.pf--dark .pf__error, .pf--dark .pf__req { color: #fca5a5; }
.pf__alerts:empty { display: none; }
.pf__alert {
    margin: 0; padding: 10px 12px; border-radius: var(--pf-field-radius); font-size: .92em; font-weight: 600;
    color: #7f1d1d; background: #fef2f2; border: 1px solid #fecaca;
}
.pf--dark .pf__alert { color: #fecaca; background: color-mix(in srgb, #dc2626 18%, var(--pf-surface)); border-color: color-mix(in srgb, #dc2626 45%, var(--pf-border)); }
.pf--entry .pf__btn[disabled] { opacity: .65; cursor: progress; filter: none; }
.pf__spin {
    width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
    border: 2px solid color-mix(in srgb, var(--pf-ink) 35%, transparent); border-top-color: var(--pf-ink);
    animation: pf-spin .8s linear infinite;
}
@keyframes pf-spin { to { transform: rotate(360deg); } }
.pf__done { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 8px 0; }
.pf__done-mark {
    display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
    font-size: 28px; font-weight: 800; color: var(--pf-ink); background: var(--pf-accent);
}
.pf__done-title { margin: 0; font-family: var(--pf-head); font-size: 1.3em; font-weight: 800; outline: none; }
.pf__done-label { margin: 6px 0 0; font-size: .82em; font-weight: 600; color: var(--pf-muted); text-transform: uppercase; letter-spacing: .06em; }
.pf__done-number {
    margin: 0; font-family: var(--pf-label); font-size: 1.6em; font-weight: 800; letter-spacing: .04em; color: var(--pf-accent-text);
    overflow-wrap: anywhere; user-select: all;
}
.pf__done-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; margin: 6px 0 0; }
.pf__done-facts > div { padding: 10px 12px; border: 1px solid var(--pf-border); border-radius: var(--pf-field-radius); text-align: start; }
.pf__done-facts dt { font-size: .78em; color: var(--pf-muted); }
.pf__done-facts dd { margin: 2px 0 0; font-weight: 700; }
.pf__done .pf__note { width: 100%; text-align: start; }
@container pf (max-width: 560px) {
    .pf__done-facts { grid-template-columns: minmax(0, 1fr); }
    .pf--entry .pf__opts--row .pf__opt { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .pf__spin { animation: none; }
}