/*
* The storefront's composed pages in the four vertical demo sites' own look
* (the `vertical` kit, 27 Sep 2026). Loaded after site.css, and before the
* tenant's palette, on a composed page of demo-caravan, demo-tennis,
* demo-dentist or demo-arena.
*
* WHY THIS FILE EXISTS. The hand-written pages carried their spacings as
* style="" attributes, and the hero's picture as an inline background. A
* composed page's policy has no 'unsafe-inline' (SPEC_STOREFRONT 8), so each
* became a class here -- the same values, so nothing moves -- and the hero's
* picture is a library ![]()
in the same box. It also gives the phase-1
* content blocks (sf-*) site.css's tokens, for anything an editor places on
* a vertical page that the kit does not draw itself.
*
* THE CLS RULE (SPEC_STOREFRONT 9.1): every picture sits in a box whose
* shape is stated here. Targets are at least 44 px (the owner's rule).
*/
/* ---- the hand-written pages' inline spacings, as classes ---- */
.sfv-pb0 { padding-bottom: 0; }
.sfv-pb1 { padding-bottom: 1rem; }
.sfv-mt1 { margin-top: 1rem; }
.sfv-mt15 { margin-top: 1.5rem; }
.sfv-mt2 { margin-top: 2rem; }
.sfv-mt25 { margin-top: 2.5rem; }
.sfv-mb15 { margin: 0 0 1.5rem; }
.sfv-confirm { margin: 1.25rem 0 0; }
.sfv-w26 { max-width: 26rem; }
.sfv-months { align-items: center; gap: .75rem; }
.sfv-important { margin-top: 1.5rem; }
.sfv-important .sfv-important-title { font-size: 1rem; }
.sfv-important ul { margin: .6rem 0 0; padding-left: 1.1rem; font-size: .95rem; }
.sfv-important .sfv-accept { margin-top: .9rem; font-size: 1rem; }
/* A KICKER ON THE INVERTED BAND: white, as the hand-written band said inline. */
.band .kicker { color: #fff; }
/* ---- the hero's picture: a library ![]()
where the background was ---- */
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
aspect-ratio: auto; }
/* ---- the testimonial: a , its attribution a ---- */
.quote blockquote { margin: 0; }
.quote figcaption { margin-top: .9rem; font-size: .9rem; color: var(--ink-soft); }
/* ---- text pages: the cookie and privacy notices ---- */
.sfv-text { padding-top: clamp(2rem, 5vw, 3.5rem); }
.sfv-prose { max-width: 62ch; }
.sfv-prose h2 { margin-top: 2rem; }
.sfv-prose .sf-table-wrap { max-width: 100%; }
.sf-table-wrap { overflow-x: auto; }
.sf-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.sf-table th, .sf-table td { text-align: left; vertical-align: top; padding: .55rem .6rem;
border-bottom: 1px solid var(--line); }
.sf-table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
/* ---- pictures from the library: the box states the shape ---- */
.sf-fit { display: block; width: 100%; height: auto; object-fit: cover; }
.sf-r169 { aspect-ratio: 16 / 9; }
.sf-r43 { aspect-ratio: 4 / 3; }
.sf-r11 { aspect-ratio: 1 / 1; }
.sf-r34 { aspect-ratio: 3 / 4; }
/* ---- the phase-1 content blocks, in site.css's tokens ---- */
.sf-wrap { width: min(1120px, 100% - 3rem); margin-inline: auto; }
.sf-block { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.sf-prose { max-width: 62ch; }
.sf-lead { font-size: 1.15rem; color: var(--ink-soft); }
.sf-eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
color: var(--accent-text); margin: 0 0 .5rem; }
.sf-btn { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1.1rem;
border-radius: var(--radius); background: var(--brand); color: #fff; font-weight: 700;
text-decoration: none; border: 0; }
.sf-btn:hover { background: var(--brand-deep); color: #fff; }
.sf-btn-quiet { background: transparent; color: var(--brand-text); border: 2px solid currentColor; }
.sf-cta { background: var(--paper-warm); padding: 2.5rem 0; }
.sf-cards, .sf-gallery, .sf-features { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.sf-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.sf-card h3, .sf-card p { padding: 0 1rem; }
.sf-card h3 a { display: inline-flex; min-height: 44px; align-items: center; }
.sf-price { border: 2px solid var(--brand); border-radius: var(--radius); padding: 1.5rem; max-width: 34rem; }
.sf-price-figure { font-size: 2rem; font-weight: 800; margin: 0; }
.sf-price-figure::first-letter { text-transform: uppercase; }
.sf-embed { background: var(--paper-warm); border-radius: var(--radius); padding: 1.5rem; }
.sf-embed-fields { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.sf-field label { display: block; font-weight: 600; margin-bottom: .25rem; }
.sf-field input { width: 100%; min-height: 44px; }
.sf-quote blockquote { margin: 0; font-size: 1.25rem; }
.sf-two { display: grid; gap: 2rem; }
@media (min-width: 50rem) { .sf-two { grid-template-columns: 1fr 1fr; align-items: center; } }
.sf-faq details { border-bottom: 1px solid var(--line); padding: .5rem 0; }
.sf-faq summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.sf-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem 0 0; margin: 0;
color: var(--ink-soft); font-size: .9rem; }
.sf-crumbs li + li::before { content: "\203a"; margin-right: .5rem; }
.sf-crumbs a { display: inline-flex; min-height: 44px; align-items: center; }
.sfj-title { padding-top: 1.5rem; }
/* ---- the shop and the basket pane on a vertical site (29 Sep 2026) ----
* The product pages of demo-arena's vouchers and demo-tennis's membership
* plans (shop.js product_grid / product_detail) and the basket pane
* (camc-basket.js) were styled in the Club's kit only. The same shapes here
* in site.css's tokens, so the arena's dark paper stays readable: cards and
* the pane are the tenant's paper, never white. Targets are 44 px. */
.shop-grid { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1.25rem;
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.shop-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
overflow: hidden; display: flex; flex-direction: column; }
.shop-card > p { margin: 0 1rem .75rem; }
.shop-card-link { display: block; color: var(--ink); text-decoration: none; min-height: 44px; }
.shop-card-link:hover .shop-card-name { color: var(--brand-text); text-decoration: underline; }
.shop-card-media { display: block; background: var(--paper-warm); }
.shop-card-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.shop-card-name { font-size: 1.1rem; margin: .75rem 1rem .4rem; }
.shop-price { font-weight: 700; }
.shop-basis { font-weight: 400; color: var(--ink-soft); }
.shop-stock { color: var(--ink-soft); font-size: .95rem; }
.shop-pager { margin-top: 1.5rem; }
.shop-product-row { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .shop-product-row { grid-template-columns: 1fr 1fr; align-items: start; } }
.shop-gallery img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.shop-price-big { font-size: 1.6rem; margin: .5rem 0; }
.shop-buy { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem; }
.shop-variants { border: 0; padding: 0; margin: 0 0 1rem; }
.shop-variant { display: flex; align-items: center; gap: .6rem; min-height: 44px; }
.shop-variant-price { margin-left: auto; font-weight: 700; }
.shop-qty input { width: 6rem; min-height: 44px; border: 1px solid var(--control-line); }
.mini-basket ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.mini-basket li { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding: .6rem 0;
border-bottom: 1px solid var(--line); }
.mini-basket .mini-amount { margin-left: auto; font-weight: 700; }
.bk-pane { position: fixed; top: 0; right: 0; bottom: 0; width: min(24rem, 92vw);
background: var(--paper); color: var(--ink); border-left: 1px solid var(--line);
box-shadow: -8px 0 28px rgba(0, 0, 0, .18); display: flex; flex-direction: column; z-index: 60; }
.bk-pane[hidden] { display: none; }
.bk-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); }
.bk-head h2 { margin: 0; font-size: 1.15rem; }
.bk-close { min-width: 2.75rem; min-height: 2.75rem; border: 0; background: none; font-size: 1.6rem;
line-height: 1; cursor: pointer; color: var(--ink); border-radius: var(--radius); }
.bk-body { flex: 1; overflow-y: auto; padding: 1.15rem; }
.bk-lines { list-style: none; margin: 0; padding: 0; }
.bk-lines li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0;
border-bottom: 1px solid var(--line); }
.bk-remove { display: block; margin-top: .3rem; padding: .35rem 0; min-height: 2.75rem; border: 0;
background: none; font: inherit; font-size: .9rem; font-weight: 600; color: var(--brand-text);
text-decoration: underline; cursor: pointer; }
.bk-amount { font-weight: 700; white-space: nowrap; }
.bk-total { display: flex; justify-content: space-between; gap: 1rem; margin: 1rem 0 0; font-size: 1.05rem; }
.bk-foot { padding: 1.15rem; border-top: 1px solid var(--line); }
.bk-foot .btn { width: 100%; margin-bottom: .5rem; }
body.bk-open { overflow: hidden; }
/* ---- A79: selling and checking out on a vertical site (29 Sep 2026) ----
* The shop's and the checkout's sections say `band` because the Club's kit
* means a plain section by it; here `band` is the inverting brand band, so a
* product page and a checkout would turn brand colour. Plain here, on the
* tenant's own paper and ink. */
.band.shop-band, .band.shop-product, .band.shop-head, .band.mini-basket, .band:has(> .ck-wrap) {
background: transparent; color: var(--ink); }
.band.shop-band :is(h2, h3), .band.shop-product :is(h2, h3), .band.shop-head :is(h2, h3),
.band.mini-basket :is(h2, h3), .band:has(> .ck-wrap) :is(h2, h3) { color: var(--ink); }
.band.shop-band p, .band.shop-product p, .band.shop-head p, .band.mini-basket p,
.band:has(> .ck-wrap) p { color: inherit; }
.band:has(> .ck-wrap) .btn-quiet, .band.mini-basket .btn-quiet { border-color: var(--control-line); color: var(--ink); }
.band.shop-band, .band.mini-basket { padding-block: clamp(1.5rem, 4vw, 2.5rem); }
.sfj-title + .band.shop-band { padding-top: .5rem; }
/* THE HEADER BASKET: the word and a count, 44 px, the site's own ink. */
.bk-open-btn { position: relative; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
padding: .35rem .75rem; border-radius: 9px; color: var(--ink); font-weight: 700; font-size: .93rem;
text-decoration: none; flex: none; }
.bk-open-btn:hover { background: var(--paper-warm); }
.bk-open-btn img { display: block; width: 24px; height: 24px; }
.bk-count[hidden] { display: none; }
.bk-count { min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; border-radius: 999px; background: var(--brand);
color: #fff; font-size: .78rem; font-weight: 800; line-height: 1.35rem; text-align: center; }
@media (max-width: 760px) {
/* BESIDE THE MENU BUTTON on a phone, never under the folded menu: the
brand, the basket and the menu on one row. */
.masthead-row { column-gap: .5rem; }
/* A BASIS OF NOTHING, so the row shrinks the brand's name onto two lines
rather than wrapping the menu button onto a row of its own. */
.masthead-row .brand { order: 0; min-width: 0; flex: 1 1 0; }
.masthead-row .brand-name { font-size: .95rem; line-height: 1.15; }
.masthead-row .bk-open-btn { order: 1; padding: .35rem .45rem; }
.masthead-row .nav-toggle { order: 2; }
.masthead-row .nav { order: 3; }
}
@media (max-width: 480px) {
/* THE WORD HIDDEN, NOT GONE: it stays the button's name for a screen
reader, and a drawn bag and the count say it on screen. */
.bk-open-btn .bk-open-label { position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; }
.bk-open-btn::before { content: ""; width: 18px; height: 14px; margin-top: 5px; border: 2px solid currentColor;
border-radius: 2px 2px 5px 5px; box-sizing: border-box; }
.bk-open-btn::after { content: ""; position: absolute; left: calc(.45rem + 5px); top: calc(50% - 11px); width: 8px;
height: 7px; border: 2px solid currentColor; border-bottom: 0; border-radius: 5px 5px 0 0;
box-sizing: border-box; }
}
/* A LINE'S NOTES -- how many, held until when -- under its name. */
.bk-what small, .rate-note { display: block; margin-top: .2rem; font-size: .85rem; color: var(--ink-soft); font-weight: 400; }
.bk-what .bk-remove { margin-top: .2rem; }
/* WHAT CHANGED ON A LINE WHEN PAYMENT WAS ASKED FOR (1 Oct 2026): words and a
glyph, never colour alone; the kit's tokens, which every theme recolours. */
.bk-what .ck-line-state { margin-top: .3rem; font-size: .9rem; font-weight: 600; color: var(--accent-text); }
.bk-what .ck-line-accepted { color: var(--ok); }
.ck-glyph { font-weight: 700; }
.ck-accept { display: block; margin-top: .2rem; padding: .35rem 0; min-height: 2.75rem; border: 0;
background: none; font: inherit; font-size: .9rem; font-weight: 600; color: var(--brand-text);
text-decoration: underline; cursor: pointer; }
/* THE CHECKOUT, THE CARD PAGE AND THE CONFIRMATION. */
/* THE COLUMN, NOT THE WRAP: a narrow column on the page's own left edge, in
line with the header and the footer. */
.ck-wrap > * { max-width: 44rem; }
#ck-back a { display: inline-flex; align-items: center; min-height: 44px; }
.ck-lines { margin-top: 1rem; }
.ck-terms { margin: 1rem 0; }
.ck-wall, .ck-done { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.4rem; margin-top: 1.25rem;
background: var(--paper); }
.ck-wall h2, .ck-done h2 { font-size: 1.35rem; margin: 0 0 .5rem; }
.ck-wall p { margin: 0; }
.ck-wall p:last-child, .ck-done p:last-child { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 0; }
.ck-done .bk-total { margin: .35rem 0 0; }
.ck-done > p:not(.bk-total):not(:last-child) { margin-top: 1rem; }
.ck-card { display: grid; gap: 1rem; max-width: 26rem; margin-top: 1rem; }
.ck-card input { width: 100%; min-height: 44px; border: 1px solid var(--control-line); border-radius: 9px;
padding: .55rem .75rem; background: var(--paper); color: var(--ink); font: inherit; }
.ck-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ck-amount { font-size: 1.1rem; }
.demo-note { border: 1px dashed var(--control-line); border-radius: var(--radius); padding: .9rem 1.1rem;
background: var(--paper-warm); color: var(--ink); margin: 0 0 1.25rem; }
#ck-status:empty { display: none; }
#ck-status.bad, .ck-done .bad { color: var(--accent-text); font-weight: 700; }
.wallet-buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }
.wallet-buttons[hidden] { display: none; }
.wallet-btn { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: .5rem 1rem;
border-radius: 10px; background: #000; color: #fff; text-decoration: none; font-weight: 700; }
.wallet-btn small { display: block; font-weight: 400; font-size: .75rem; opacity: .85; }
/* THE TRAIL AND THE WAY BACK in the site's own link colour, on one line. */
.sf-crumbs ol { align-items: center; }
.sf-crumbs a, #ck-back a { color: var(--brand-text); }
/* ---- where a posted item goes (2 Oct 2026) -------------------------
Theme tokens only, so all six accessibility themes recolour it; one
column at phone width; touch targets 44px. */
.ck-delivery { margin: 1.25rem 0; border: 1px solid var(--line); }
.ck-delivery legend { font-weight: 700; padding: 0 .4rem; color: var(--ink); }
.ck-dl-new, .ck-dl-file { display: grid; gap: .75rem; margin-top: .75rem; }
.ck-dl-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.ck-field { display: grid; gap: .3rem; font-weight: 600; color: var(--ink); }
.ck-field input { width: 100%; min-height: 44px; border: 1px solid var(--control-line); border-radius: 9px;
padding: .55rem .75rem; background: var(--paper); color: var(--ink); font: inherit; }
.ck-dl-choice { display: flex; gap: .6rem; align-items: center; min-height: 44px; color: var(--ink); }
.ck-dl-choice input { width: 1.25rem; height: 1.25rem; flex: none; }
.ck-dl-lead { margin: 0; font-weight: 600; color: var(--ink); }
@media (max-width: 30rem) { .ck-dl-pair { grid-template-columns: 1fr; } }
/* ---- THE TABLE BLOCK (14 Oct 2026, OPEN_ITEMS 266; SPEC_STOREFRONT 4.2.1) ----
RULES, NOT FILLS: no stripe and no tint anywhere, so every word in a table
is var(--ink) or var(--ink-soft) on the page's own var(--paper) -- the pairs a11y.css's
looks are measured on (AA, AAA in High Contrast) -- and High Contrast,
whose second surface is white, loses nothing. Every colour a token; every
size rem (the 44px target is the owner's rule, as everywhere). Cells wrap,
never truncate. No !important and no font or spacing rule, so Dyslexia
Friendly and Calm keep theirs (Dyslexia's left-aligned cells win over
`num`'s end alignment, by design: its rule is the person's). The region
scrolls sideways inside itself, never the page; it takes the focus ring.
THE STICKY FIRST COLUMN (scroll mode, row headings only) sits on a solid
var(--paper), never a translucent one, so reduced transparency needs nothing
more; border-collapse is `separate` because a collapsed border on a
sticky cell scrolls away from it in Chromium and Safari. */
.sf-tbl .tbl { max-width: 100%; overflow-x: auto; margin: 1rem 0 0; }
.sf-tbl .tbl:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.sf-tbl table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0; }
.sf-tbl caption { caption-side: top; text-align: start; font-weight: 700; color: var(--ink); padding: 0 0 .6rem; }
.sf-tbl th, .sf-tbl td { text-align: start; vertical-align: top; padding: .65rem .75rem; min-width: 6rem;
border-bottom: 1px solid var(--line); color: var(--ink); white-space: normal; overflow-wrap: break-word; }
.sf-tbl thead th { vertical-align: bottom; font-weight: 700; border-bottom: 2px solid var(--ink); }
.sf-tbl tbody th { font-weight: 700; }
.sf-tbl .num { text-align: end; font-variant-numeric: tabular-nums; }
.sf-tbl :is(th, td).is-rec { border-inline: 2px solid var(--brand); }
.sf-tbl tr.is-rec > :is(th, td) { font-weight: 700; border-top: 2px solid var(--brand); border-bottom: 2px solid var(--brand); }
.sf-tbl .tag { display: inline-block; margin-inline-start: .35rem; padding: .05rem .4rem; border: 1px solid currentColor;
border-radius: .25rem; font-size: .8rem; font-weight: 700; color: var(--ink); }
.sf-tbl .tbl-link a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.sf-tbl .tbl-scroll.tbl-heads :is(thead th:first-child, tbody th[scope="row"]) {
position: sticky; inset-inline-start: 0; z-index: 1; background-color: var(--paper); border-inline-end: 1px solid var(--line); }
.sf-tbl .tbl-note { margin: .75rem 0 0; font-size: .95rem; color: var(--ink-soft); }
/* PHONE: STACK -- each row its own small block below 40rem, the table above. */
.sf-tbl .tbl-rows { display: none; }
.sf-tbl .tbl-rows ul { list-style: none; margin: 0; padding: 0; }
.sf-tbl .tbl-rows li { padding: .75rem 0; border-bottom: 1px solid var(--line); }
.sf-tbl .tbl-rows li.is-rec { border-inline-start: 4px solid var(--brand); padding-inline-start: .75rem; }
.sf-tbl :is(.tbl-rows-cap, .tbl-rows-head) { margin: 0 0 .4rem; font-weight: 700; color: var(--ink); }
.sf-tbl .tbl-rows dl { margin: 0; }
.sf-tbl .tbl-rows dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding: .25rem 0; }
.sf-tbl .tbl-rows dt { color: var(--ink-soft); }
.sf-tbl .tbl-rows dd { margin: 0; color: var(--ink); }
@media (max-width: 40rem) {
.sf-tbl .tbl.tbl-stack { display: none; }
.sf-tbl .tbl-rows { display: block; }
}
@media (prefers-reduced-transparency: reduce) {
.sf-tbl .tbl-scroll.tbl-heads :is(thead th:first-child, tbody th[scope="row"]) { background-color: var(--paper); }
}