/* ============================================================================
BP:STARTER_SECTIONS v2 — section grammars for the Starter Business Page
(design-convergence Pass B). Scoped under .sbp-sections; nothing leaks into
the surrounding public chrome.
TOKENS: this sheet declares NO palette of its own. Every colour, radius and
shadow resolves to THE KEEL declared on .sbp-page in starter-business.css
(--sbp-ink/-mut/-canvas/-card/-line/-r/-r-lg/-shadow) and to the business's
TERRITORY tokens (--sbp-acc/-soft/-ink, --sbp-field-a/b/c — Constitution
Amendment A1). CHL orange never appears here: decoration is territory,
the signature loci live in the shell (§5 Orange Law).
RHYTHM (§7 District Law): sections compose with the keel's four surface
registers — .sbp-band (tinted moment: features, contact), .sbp-imgled
(editorial split: about, programmes), dense media fields (gallery, photos),
and quiet canvas prose (columns, menu, blog-adjacent lists) — so the page
never repeats "white rectangle, heading, three cards".
========================================================================== */
.sbp-sections {
font-family: inherit; /* the CHL theme's DM Sans */
color: var(--sbp-ink);
-webkit-font-smoothing: antialiased;
}
.sbp-sections * { box-sizing: border-box; }
/* ── section frame ──────────────────────────────────────────────────────── */
.sbp-sec { padding: var(--sbp-flow-standard, clamp(34px, 4.6vw, 60px)) 0 0; }
.sbp-sw { width: 100%; max-width: 1160px; margin: 0 auto; }
/* ── shared type ────────────────────────────────────────────────────────── */
.sbp-kicker {
display: flex; align-items: center; gap: 10px;
margin: 0 0 9px; font-size: 12px; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase;
/* CHL:BP_EYEBROW_UNITY v1.1 (operator) — eyebrows wear the palette's BRIGHT
signature, matching the dash via currentColor. Operator-approved brand
exception to the 4.5:1 small-text rule (12px bold label on light canvas). */
color: var(--sbp-indicator, var(--sbp-org-display, var(--sbp-acc-ink)));
}
.sbp-kicker::before {
content: ""; flex: 0 0 auto; width: 22px; height: 2px; border-radius: 2px;
/* CHL:BP_EYEBROW_UNITY v1 (operator 2026-08-09) — the dash ALWAYS wears the
eyebrow text's own colour: one pair, never a mismatch, in every tone band. */
background: currentColor;
}
/* Light-deep palettes (their "deep" band is a pale tint, not a dark block):
the eyebrow keeps its orange pair inside the band. Dark-deep palettes keep
the readable remap (dash follows it via currentColor). */
.sbp-page[data-sbp-palette="chl_bright"] .sbp-tone--deep .sbp-kicker,
.sbp-page[data-sbp-palette="ember_sand"] .sbp-tone--deep .sbp-kicker {
/* CHL:BP_EYEBROW_UNITY v2 — the operator-approved brand exception (Aug 9,
reaffirmed 2026-08-11) stands: eyebrows wear the bright signature even
on the pale band. (An audit pass had timidly downgraded this to accent
ink; reverted by operator ruling.) */
color: var(--sbp-indicator, var(--sbp-org-display, var(--sbp-acc-ink)));
}
.sbp-h2 {
margin: 0 0 12px; font-size: calc(clamp(23px, 2.5vw, 33px) * var(--sbp-type-scale, 1)); font-weight: 800;
line-height: 1.14; letter-spacing: -.015em; color: var(--sbp-ink); text-wrap: balance;
}
.sbp-h3 { margin: 0 0 10px; font-size: calc(clamp(18px, 1.8vw, 23px) * var(--sbp-type-scale, 1)); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--sbp-ink); }
/* BP:2.5C-D — the subhead is a DECK (a quiet summary line under the heading),
not a second bold title competing with the muted lead: larger, lighter, ink,
pulled up under the h2 so kicker→heading→deck→lead reads as one descending
unit rather than four repeated bold lines. */
.sbp-sub { margin: -4px 0 10px; font-size: clamp(15.5px, 1.35vw, 18px); font-weight: 600; line-height: 1.45; color: var(--sbp-ink); max-width: 58ch; }
.sbp-lead { margin: 0 0 4px; font-size: 15.5px; line-height: 1.65; color: var(--sbp-mut); max-width: 62ch; }
.sbp-prose { font-size: 15.5px; line-height: 1.72; color: #4a4036; }
.sbp-prose p { margin: 0 0 12px; }
.sbp-head { margin-bottom: clamp(18px, 2.6vw, 28px); }
/* focus (a11y) — every interactive in the sections area */
.sbp-sections a:focus-visible,
.sbp-sections button:focus-visible,
.sbp-sections [tabindex]:focus-visible {
outline: 2px solid var(--sbp-focus); outline-offset: 2px;
}
/* ── buttons (44px Tap Law) ─────────────────────────────────────────────── */
.sbp-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.sbp-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 44px; padding: 10px 20px; border-radius: 999px;
font: inherit; font-weight: 700; font-size: 14.5px; line-height: 1.2;
text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
/* CHL:BP_ONE_FAMILY v2 — a CTA is the theme's ACTION, not keel ink. (The v1
edit of this rule was lost to a mid-build crash and wrongly certified;
caught by the token-lint 2026-08-11.) */
.sbp-btn--solid { background: var(--sbp-org); border-color: var(--sbp-org); color: var(--sbp-action-ink, #fff); }
.sbp-btn--solid:hover { background: var(--sbp-org-ink); border-color: var(--sbp-org-ink); color: var(--sbp-action-ink, #fff); }
/* CHL:BP_CB_BRIGHT v3 — ghost buttons carry the SIGNATURE border in normal
state (operator: "orange border on normal state I expected"). */
.sbp-btn--ghost { background: transparent; border-color: color-mix(in srgb, var(--sbp-indicator, var(--sbp-org-display)) 60%, transparent); color: var(--sbp-indicator, var(--sbp-org-display)); }
.sbp-btn--ghost:hover { background: var(--sbp-acc-soft); border-color: var(--sbp-indicator, var(--sbp-org-display)); }
/* quiet "see all" ghost */
.sbp-more {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
padding: 9px 18px; border-radius: 999px;
border: 1.5px solid color-mix(in srgb, var(--sbp-acc) 42%, transparent);
color: var(--sbp-acc-ink); font-weight: 700; font-size: 14px; line-height: 1.2;
text-decoration: none; white-space: nowrap;
transition: background-color .16s ease, border-color .16s ease;
}
.sbp-more:hover { background: var(--sbp-acc-soft); color: var(--sbp-acc-ink); }
.sbp-more i { font-size: 12px; }
/* ── checklist (custom glyph in territory) ──────────────────────────────── */
.sbp-checks { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.sbp-check { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.sbp-check__mark {
width: 28px; height: 28px; border-radius: 9px; margin-top: 1px;
background: var(--sbp-acc-soft); color: var(--sbp-acc);
display: inline-flex; align-items: center; justify-content: center;
}
.sbp-check__mark::before { content: "✓"; font-size: 13px; font-weight: 800; line-height: 1; }
.sbp-check__t { display: block; margin: 0 0 2px; font-size: 15.5px; font-weight: 700; color: var(--sbp-ink); }
.sbp-check__d { display: block; margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--sbp-mut); }
/* compact register (programme points) */
.sbp-checks--compact { gap: 9px; }
.sbp-checks--compact .sbp-check { grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
.sbp-checks--compact .sbp-check__mark { width: 22px; height: 22px; border-radius: 7px; }
.sbp-checks--compact .sbp-check__mark::before { font-size: 11px; }
.sbp-checks--compact .sbp-check__t { font-size: 14.5px; }
.sbp-checks--compact .sbp-check__d { font-size: 13.5px; }
/* ── ABOUT — editorial split (image-led) / quiet prose (no image) ───────── */
/* .sbp-imgled (keel) bounds the media: 4/3, max-height 460px */
.sbp-about__media { min-width: 0; }
.sbp-about__body { min-width: 0; }
.sbp-about--prose { max-width: 820px; }
.sbp-about--prose .sbp-h2 { font-size: clamp(25px, 2.8vw, 36px); }
.sbp-about .sbp-prose, .sbp-about--prose .sbp-prose { max-width: 64ch; }
.sbp-about__media .sbp-eimg, .sbp-about__media .sbp-eimg img { border-radius: var(--sbp-r-lg); }
.sbp-about__media .sbp-eimg img { aspect-ratio: 4 / 3; max-height: 460px; object-fit: var(--sbp-media-fit, cover); }
/* ── FEATURES — tinted territory band with benefit tiles (proof moment) ─── */
/* outer surface = keel .sbp-band */
.sbp-features .sbp-head { max-width: 66ch; margin-bottom: 4px; }
.sbp-benefits {
display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 12px; margin-top: 22px;
}
.sbp-benefit {
display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start;
background: var(--sbp-card);
border: 1px solid color-mix(in srgb, var(--sbp-acc) 16%, transparent);
border-radius: 14px; padding: 15px 17px;
}
.sbp-benefit .sbp-check__mark { background: var(--sbp-acc-soft); }
.sbp-benefit__t { display: block; margin: 1px 0 2px; font-size: 15px; font-weight: 700; color: var(--sbp-ink); line-height: 1.35; }
.sbp-benefit__d { display: block; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--sbp-mut); }
/* ── PROGRAMMES — territory tab rail + image/body panel ──────────────────
The .b_profile_tabs / .tabs_contae class names are the starter-sections.js
contract AND are styled by the global theme sheet (haseeb/css/style.css:
white 81% rail, top:-33px, uppercase, orange active). Every theme property
is neutralised here so the section reads only the sbp grammar. */
.sbp-prog .b_profile_tabs {
position: static; top: auto; z-index: auto; display: block;
margin: 0 0 clamp(18px, 2.4vw, 26px);
}
.sbp-prog .b_profile_tabs ul {
display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none;
width: 100%; background: transparent; border-radius: 0; justify-content: flex-start;
}
.sbp-prog .b_profile_tabs li { margin: 0; list-style: none; }
.sbp-prog .b_profile_tabs li a {
display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px;
border-radius: 999px; border: 1.5px solid var(--sbp-line); border-bottom: 1.5px solid var(--sbp-line);
background: var(--sbp-card); text-transform: none; letter-spacing: normal;
color: var(--sbp-mut); font-weight: 700; font-size: 14px; line-height: 1.2;
cursor: pointer; user-select: none; text-decoration: none;
transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.sbp-prog .b_profile_tabs li a:hover { border-color: color-mix(in srgb, var(--sbp-acc) 45%, transparent); color: var(--sbp-acc-ink); background: var(--sbp-card); }
.sbp-prog .b_profile_tabs li.active a,
.sbp-prog .b_profile_tabs li.active a:hover {
background: var(--sbp-org); border-color: var(--sbp-org); color: #201A14; /* CHL:BP_PREMIUM_UX v2 — dark ink on bright fill */
}
.sbp-prog .tabs_contae { display: none; }
.sbp-prog .tabs_contae.active {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: clamp(20px, 3vw, 44px); align-items: center;
}
/* no image on this programme → a single quiet prose column, never a void */
.sbp-prog .tabs_contae.sbp-prog__panel--noimg.active { grid-template-columns: minmax(0, 1fr); }
.sbp-prog .sbp-prog__panel--noimg .sbp-prog__body { max-width: 70ch; }
.sbp-prog__media { min-width: 0; }
.sbp-prog__media img {
display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 400px;
object-fit: cover; border-radius: var(--sbp-r-lg);
}
.sbp-prog__media .sbp-eimg { border-radius: var(--sbp-r-lg); }
.sbp-prog__body { min-width: 0; }
.sbp-prog__body .sbp-prose { max-width: 58ch; }
/* ── COLUMNS — compact quiet prose columns on the canvas ────────────────── */
.sbp-cols {
display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: clamp(20px, 3vw, 40px); margin-top: 6px;
}
.sbp-col { min-width: 0; }
.sbp-col__t {
position: relative; margin: 0 0 9px; padding-top: 14px;
font-size: 16px; font-weight: 800; color: var(--sbp-ink); line-height: 1.3;
}
.sbp-col__t::before {
content: ""; position: absolute; top: 0; left: 0; width: 26px; height: 3px;
border-radius: 2px; background: var(--sbp-indicator, var(--sbp-org-display)); /* CHL:BP_SIGNATURE_SWEEP v1 — column dash joins the theme mark */
}
/* an EMPTY editable title has no intrinsic width — without a floor the
placeholder letter-wraps vertically in the V2/V3 row grids */
.sbp-cols .sbp-e--empty { display: block; min-width: 12ch; }
.sbp-col__b { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--sbp-mut); }
/* Optional per-column link (backward-compatible): linked title + quiet CTA. */
a.sbp-col__link { display: block; text-decoration: none; color: var(--sbp-ink); transition: color .15s ease; }
a.sbp-col__link:hover, a.sbp-col__link:focus-visible { color: var(--sbp-indicator, var(--sbp-org-display)); }
.sbp-col--linked .sbp-col__b { margin-bottom: 10px; }
.sbp-col__cta {
display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
font-size: 14px; font-weight: 700; color: var(--sbp-indicator, var(--sbp-org-display)); text-decoration: none;
}
.sbp-col__cta i { transition: transform .15s ease; }
.sbp-col__cta:hover i, .sbp-col__cta:focus-visible i { transform: translateX(3px); }
/* ── GALLERY — editorial grid, varied spans, quiet captions ─────────────── */
.sbp-galgrid {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: clamp(115px, 12.5vw, 172px); grid-auto-flow: dense;
gap: 12px; margin-top: clamp(16px, 2.4vw, 24px);
}
.sbp-galitem {
position: relative; margin: 0; border-radius: 14px; overflow: hidden;
background: var(--sbp-field-b); min-width: 0;
}
.sbp-galitem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sbp-galitem:first-child { grid-column: span 2; grid-row: span 2; }
.sbp-galitem:nth-child(6n+4):not(:first-child) { grid-column: span 2; }
.sbp-galitem__cap {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 26px 14px 10px; font-size: 12.5px; font-weight: 700; color: #fff;
background: linear-gradient(180deg, transparent, rgba(21, 17, 13, .62));
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* perfect-fill tuning for the common counts (no ragged last row) */
.sbp-galgrid[data-n="6"] .sbp-galitem:nth-child(n+5),
.sbp-galgrid[data-n="7"] .sbp-galitem:nth-child(7) { grid-column: span 2; }
.sbp-galgrid[data-n="1"] { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.sbp-galgrid[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sbp-galgrid[data-n="2"] .sbp-galitem:first-child { grid-column: span 1; grid-row: span 2; }
.sbp-galgrid[data-n="2"] .sbp-galitem:nth-child(2) { grid-row: span 2; }
.sbp-galgrid[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* edit-mode gallery cards (starter-editor.css supplies the frame chrome) */
.sbp-gallery__grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 16px; margin-top: 22px;
}
.sbp-gcard { margin: 0; background: var(--sbp-card); border: 1px solid var(--sbp-line); border-radius: 14px; overflow: hidden; }
.sbp-gcard .sbp-eimg, .sbp-gcard .sbp-eimg img { border-radius: 0; }
.sbp-gcard__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.sbp-gcard .sbp-eimg__ph { min-height: 108px; border-radius: 0; border: 0; }
.sbp-gcard__title { display: block; padding: 10px 12px; font-size: 13.5px; font-weight: 600; color: var(--sbp-mut); }
/* ── PHOTOS — dense mosaic strip, edge-to-edge within the container ─────── */
.sbp-mosaic {
display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
grid-auto-rows: clamp(86px, 9.5vw, 132px); grid-auto-flow: dense; gap: 6px;
margin-top: clamp(16px, 2.4vw, 24px);
border-radius: var(--sbp-r-lg); overflow: hidden;
}
.sbp-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--sbp-field-b); }
.sbp-mosaic img:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; }
.sbp-mosaic img:nth-child(7n+4) { grid-column: span 2; }
/* edit-mode photo cells */
.sbp-photos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-top: 22px; }
/* ── MEDIA — stage + playlist card, duration chips, territory play glyph ── */
.sbp-media {
display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
gap: 18px; margin-top: clamp(16px, 2.4vw, 24px); align-items: stretch;
}
.sbp-media__stage {
position: relative; aspect-ratio: 16 / 9; border-radius: var(--sbp-r-lg);
overflow: hidden; background: #16120e; min-width: 0;
}
.sbp-media__stage iframe { width: 100%; height: 100%; border: 0; display: block; }
/* designed audio/no-embed state: territory light-study field + play glyph */
.sbp-media__stage:empty {
background:
radial-gradient(120% 90% at 78% 8%, var(--sbp-field-b) 0%, transparent 55%),
radial-gradient(90% 70% at 12% 92%, var(--sbp-field-c) 0%, transparent 60%),
linear-gradient(180deg, var(--sbp-field-b) 0%, var(--sbp-field-a) 46%, var(--sbp-field-c) 100%);
}
.sbp-media__stage:empty::after {
content: "▶"; position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 30px; color: var(--sbp-acc); opacity: .65;
}
.sbp-media__list {
display: flex; flex-direction: column; min-width: 0; min-height: 0;
background: var(--sbp-card); border: 1px solid var(--sbp-line);
border-radius: var(--sbp-r-lg); box-shadow: var(--sbp-shadow); overflow: hidden;
}
.sbp-media__switch { display: flex; flex: 0 0 auto; border-bottom: 1px solid var(--sbp-line); }
.sbp-media__list .podcast-tab {
flex: 1 1 50%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 46px; font-size: 13.5px; font-weight: 700; color: var(--sbp-mut);
text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px;
transition: color .15s ease, border-color .15s ease;
}
.sbp-media__list .podcast-tab:hover { color: var(--sbp-ink); }
.sbp-media__list .podcast-tab.active { color: var(--sbp-acc-ink); border-bottom-color: var(--sbp-acc); }
.sbp-media__list .podcast-content { display: none; }
.sbp-media__list .podcast-content.active {
display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto;
padding: 8px; max-height: 420px;
}
.sbp-mrow {
display: flex; align-items: center; gap: 12px; padding: 9px 10px;
border-radius: 12px; cursor: pointer; min-height: 44px;
transition: background-color .15s ease;
}
.sbp-mrow:hover { background: var(--sbp-acc-soft); }
.sbp-mrow__icon {
flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--sbp-acc-soft); color: var(--sbp-acc); font-size: 15px;
}
.sbp-mrow__meta { min-width: 0; }
.sbp-mrow__t { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--sbp-ink); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbp-mrow__chip {
display: inline-flex; align-items: center; gap: 5px; margin-top: 3px;
padding: 2px 9px; border-radius: 999px;
background: color-mix(in srgb, var(--sbp-acc) 10%, transparent);
color: var(--sbp-acc-ink); font-size: 11.5px; font-weight: 700;
font-variant-numeric: tabular-nums;
}
.sbp-mrow__chip i { font-size: 10px; }
/* ── MENU (sections mode) — .sbp-menusec* ────────────────────────────────
NAMESPACE NOTE (diagnosis defect #6): the tab-mode menu page owns .sbp-menu
and .sbp-menu__item in starter-business.css (sidebar grid + item cards).
The sections-mode grammar lives under .sbp-menusec* so nothing bleeds in
either direction. One element keeps its historic name — .sbp-menu__dots,
the dotted leader — which has no tab-mode counterpart and is the encoded
editorial-menu contract checked by bp_experience_proof (P5). */
.sbp-menusec__groups {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(24px, 4vw, 54px); margin-top: clamp(16px, 2.4vw, 26px);
}
.sbp-menusec__group { min-width: 0; }
.sbp-menusec__groupname {
display: flex; align-items: center; gap: 12px; margin: 0 0 15px;
font-size: 13px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
color: var(--sbp-acc-ink);
}
.sbp-menusec__groupname::after {
content: ""; flex: 1 1 auto; height: 2px; border-radius: 2px;
background: color-mix(in srgb, var(--sbp-indicator, var(--sbp-org-display)) 32%, transparent);
}
.sbp-menusec__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sbp-menusec__item { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.sbp-menusec__thumb {
flex: 0 0 48px; width: 48px; height: 48px; object-fit: cover;
border-radius: 10px; background: var(--sbp-field-b);
}
.sbp-menusec__body { flex: 1 1 auto; min-width: 0; }
.sbp-menusec__row { display: flex; align-items: baseline; gap: 8px; margin: 0; min-width: 0; }
.sbp-menusec__name { font-weight: 700; font-size: 15.5px; color: var(--sbp-ink); min-width: 0; }
.sbp-menu__dots {
flex: 1 1 auto; min-width: 16px; transform: translateY(-4px);
border-bottom: 2px dotted color-mix(in srgb, var(--sbp-indicator, var(--sbp-org-display)) 32%, var(--sbp-line));
}
.sbp-menusec__price {
flex: 0 0 auto; font-weight: 800; font-size: 14.5px; color: var(--sbp-indicator, var(--sbp-org-display));
white-space: nowrap; font-variant-numeric: tabular-nums;
}
.sbp-menusec__desc { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--sbp-mut); max-width: 52ch; }
/* ── COMMERCE SHOWCASES — featured offering rail ────────────────────────── */
.sbp-shop__head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 14px 22px; flex-wrap: wrap; margin-bottom: clamp(14px, 2.2vw, 22px);
}
.sbp-shop__intro { min-width: 0; max-width: 66ch; }
.sbp-shop__intro .sbp-h2 { margin-bottom: 8px; }
.sbp-shop__intro .sbp-lead { margin: 0; }
.sbp-shop__rail { display: grid; gap: 18px; }
.sbp-shop__rail--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sbp-shop__rail--1 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.sbp-shop__rail--solo { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
.sbp-shopcard {
display: flex; flex-direction: column; min-width: 0;
background: var(--sbp-card); border: 1px solid var(--sbp-line);
border-radius: var(--sbp-r-lg); overflow: hidden; box-shadow: var(--sbp-shadow);
text-decoration: none; color: inherit;
transition: border-color .16s ease, box-shadow .18s ease;
}
.sbp-shopcard:hover { border-color: color-mix(in srgb, var(--sbp-acc) 38%, transparent); box-shadow: 0 14px 30px -18px rgba(32, 26, 20, .3); }
.sbp-shopcard__img {
position: relative; width: 100%; aspect-ratio: 4 / 3;
/* CONSTRAINED media (diagnosis defect #10): a card's media may never
paint a viewport-filling block, even when the card spans the rail. */
max-height: 260px; min-height: 150px;
background: var(--sbp-field-b) center / cover no-repeat;
}
.sbp-shopcard__ph {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
color: var(--sbp-field-c); font-size: 28px;
}
.sbp-shopcard__price {
position: absolute; right: 12px; bottom: 12px; padding: 5px 12px; border-radius: 999px;
background: rgba(255, 255, 255, .96); color: var(--sbp-indicator, var(--sbp-org-display));
font-weight: 800; font-size: 14px; box-shadow: 0 3px 12px -5px rgba(0, 0, 0, .35);
}
.sbp-shopcard__body { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; padding: 15px 17px 16px; }
.sbp-shopcard__body h4 { margin: 0; font-size: 16.5px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; color: var(--sbp-ink); }
.sbp-shopcard__meta { font-size: 13px; font-weight: 600; color: var(--sbp-mut); }
.sbp-shopcard__go {
margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 7px;
font-weight: 800; font-size: 13.5px; color: var(--sbp-acc-ink);
}
.sbp-shopcard__go i { font-size: 12px; }
/* the invitation panel beside a lone card — never a lone-card void */
.sbp-shopinvite {
display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
gap: 10px; min-width: 0; padding: clamp(20px, 3vw, 34px);
border: 1.5px dashed color-mix(in srgb, var(--sbp-acc) 34%, transparent);
border-radius: var(--sbp-r-lg);
background: color-mix(in srgb, var(--sbp-acc-soft) 55%, #fff);
}
.sbp-shopinvite__icon {
width: 44px; height: 44px; border-radius: 13px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--sbp-card); color: var(--sbp-acc); font-size: 17px;
border: 1px solid color-mix(in srgb, var(--sbp-acc) 22%, transparent);
}
.sbp-shopinvite b { font-size: 15.5px; font-weight: 800; color: var(--sbp-ink); }
.sbp-shopinvite .sbp-more { margin-top: 2px; }
/* owner-facing empty state */
.sbp-shop__empty {
margin-top: 20px; padding: 28px; text-align: center; color: var(--sbp-mut);
border: 2px dashed var(--sbp-line); border-radius: var(--sbp-r-lg);
}
.sbp-shop__empty i { font-size: 24px; color: var(--sbp-field-c); }
.sbp-shop__empty p { margin: 8px 0 0; font-size: 14.5px; }
.sbp-shop__empty a { color: var(--sbp-acc-ink); font-weight: 700; }
.sbp-shop__cta--edit { margin-top: 16px; }
.sbp-shop__cta--edit .sbp-more { cursor: text; }
/* ── CONTACT — the signature closer (territory band split) ──────────────── */
.sbp-contactsec .sbp-band { padding: clamp(26px, 4vw, 52px) clamp(18px, 3vw, 44px); }
.sbp-contact {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: clamp(22px, 3.5vw, 46px);
/* CHL:BP_CONTACT_ALIGN v1 — equal-height columns: the form card and the
map card close on the SAME baseline at every width. The form's message
field and the map card are the two elastic parts (below). */
align-items: stretch;
}
.sbp-contact__info { min-width: 0; display: flex; flex-direction: column; }
.sbp-contact__facts { display: grid; gap: 12px; margin: 18px 0 0; }
.sbp-fact { display: flex; gap: 12px; align-items: flex-start; }
.sbp-fact__ic {
flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; margin-top: 1px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--sbp-card); color: var(--sbp-acc); font-size: 14px;
border: 1px solid color-mix(in srgb, var(--sbp-acc) 22%, transparent);
}
.sbp-fact__body { min-width: 0; }
.sbp-fact__l { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sbp-acc-ink); margin-bottom: 2px; }
.sbp-fact__v { display: block; font-size: 14.5px; line-height: 1.55; color: var(--sbp-ink); overflow-wrap: anywhere; }
.sbp-contact__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
/* the designed map card (px-map precedent): territory field + pin + label +
"Open map" ghost. A static designed object — never a raw third-party
iframe that can render as a broken-document icon. */
.sbp-map {
position: relative; display: block; margin-top: 20px; aspect-ratio: 16 / 9;
border-radius: var(--sbp-r); overflow: hidden; text-decoration: none;
border: 1px solid color-mix(in srgb, var(--sbp-acc) 20%, transparent);
background:
radial-gradient(120% 90% at 78% 8%, var(--sbp-field-b) 0%, transparent 55%),
radial-gradient(90% 70% at 12% 92%, var(--sbp-field-c) 0%, transparent 60%),
linear-gradient(180deg, var(--sbp-field-b) 0%, var(--sbp-field-a) 100%);
}
.sbp-map::before {
content: ""; position: absolute; left: 8%; right: 8%; top: 62%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(32, 26, 20, .22), transparent);
}
.sbp-map__pin {
position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 8px; padding: 0 12%;
text-align: center; color: rgba(32, 26, 20, .72); font-weight: 700; font-size: 14px;
}
.sbp-map__pin i { font-size: 26px; color: var(--sbp-indicator, var(--sbp-org-display)); } /* CHL:BP_ONE_FAMILY v2.1 — signature pin */
.sbp-map__open {
position: absolute; right: 12px; bottom: 12px;
display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 16px;
border-radius: 999px; background: var(--sbp-card); color: var(--sbp-acc-ink);
border: 1.5px solid color-mix(in srgb, var(--sbp-acc) 42%, transparent);
font-size: 13px; font-weight: 700;
}
.sbp-map:hover .sbp-map__open, .sbp-map:focus-visible .sbp-map__open { background: var(--sbp-acc-soft); }
/* CHL:BP_CONTACT_ALIGN v1 — the map card absorbs the info column's spare
height so its bottom meets the form's bottom (16/9 stays the minimum). */
.sbp-contact__info .sbp-map { flex: 1 0 auto; aspect-ratio: auto; min-height: clamp(180px, 24vw, 300px); }
/* CHL:BP_MAP_PHOTO v1 — vendor photo (shopfront / own map image) in the map
card's place. Cover-fit; label pin becomes a scrimmed chip so it stays
readable on any photograph. */
.sbp-map--photo { background: var(--sbp-field-a); }
.sbp-map--photo::before { content: none; }
.sbp-map__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sbp-map--photo .sbp-eimg { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; }
.sbp-map--photo .sbp-eimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sbp-map--photo .sbp-map__pin {
inset: auto 12px 12px 12px; flex-direction: row; justify-content: flex-start; gap: 8px;
padding: 8px 12px; border-radius: 10px; width: fit-content; max-width: calc(100% - 24px);
background: rgba(24, 18, 12, .62); color: #fff; font-size: 13px; text-align: left;
}
.sbp-map--photo .sbp-map__pin i { font-size: 16px; color: #fff; }
.sbp-map--photo .sbp-map__open { z-index: 2; }
/* editor-only affordance strip: the optional map-photo uploader */
.sbp-map__uploadrow { margin-top: 10px; }
.sbp-map__uploadrow .sbp-eimg.sbp-map__uploader { width: 100%; min-height: 52px; border-radius: 12px; }
/* the form — keel inputs on a white card so the band stays a moment */
.sbp-contact__form {
min-width: 0; background: var(--sbp-card); border: 1px solid var(--sbp-line);
border-radius: var(--sbp-r-lg); box-shadow: var(--sbp-shadow);
padding: clamp(18px, 2.6vw, 28px);
/* CHL:BP_CONTACT_ALIGN v1 — the card is a column whose form grows; the
message field is the elastic row, so the submit stays on the baseline. */
display: flex; flex-direction: column;
}
.sbp-contact__form form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.sbp-field--grow { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.sbp-field--grow .sbp-textarea { flex: 1 1 auto; min-height: 96px; resize: vertical; }
.sbp-contact__formtitle { margin: 0 0 14px; font-size: 16px; font-weight: 800; color: var(--sbp-ink); }
.sbp-field { margin-bottom: 14px; min-width: 0; }
.sbp-field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--sbp-ink); }
.sbp-field--row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sbp-input, .sbp-textarea {
width: 100%; min-height: 44px; padding: 10px 13px;
border: 1.5px solid var(--sbp-line); border-radius: 10px;
font: inherit; font-size: 14.5px; color: var(--sbp-ink); background: #fff;
transition: border-color .15s ease;
}
.sbp-input:focus, .sbp-textarea:focus {
outline: 2px solid var(--sbp-acc); outline-offset: 1px; border-color: var(--sbp-acc);
}
.sbp-textarea { min-height: 110px; resize: vertical; }
/* transactional submit — TERRITORY solid (the §5 orange budget lives in the
shell: primary action, open dot, nav underline, mobile bar) */
.sbp-submit {
display: flex; align-items: center; justify-content: center; gap: 9px;
width: 100%; min-height: 48px; margin-top: 4px;
border: 0; border-radius: 12px; cursor: pointer;
background: var(--sbp-org); color: var(--sbp-action-ink, #fff); /* CHL:BP_ONE_FAMILY v2.1 — white on the action fill (operator ruling) */
font: inherit; font-weight: 800; font-size: 15px;
transition: background-color .15s ease;
}
.sbp-submit:hover { background: var(--sbp-org-ink); }
.sbp-submit:disabled { background: var(--sbp-line); color: var(--sbp-mut); cursor: not-allowed; }
.sbp-contact__ok {
margin: 0 0 14px; padding: 11px 14px; border-radius: 12px;
background: #e8f5ee; color: #17603f; font-weight: 600; font-size: 14px;
}
.sbp-contact__ok i { margin-right: 4px; }
/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
.sbp-shop__rail--1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
.sbp-prog .tabs_contae.active,
.sbp-contact,
.sbp-shop__rail--2,
.sbp-shop__rail--1 { grid-template-columns: minmax(0, 1fr); }
.sbp-menusec__groups { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.sbp-galgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(110px, 24vw, 170px); }
.sbp-galitem:nth-child(6n+4):not(:first-child) { grid-column: span 1; }
.sbp-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(92px, 24vw, 140px); }
.sbp-media { grid-template-columns: minmax(0, 1fr); }
.sbp-media__list .podcast-content.active { max-height: 300px; }
.sbp-field--row { grid-template-columns: minmax(0, 1fr); }
.sbp-shop__head { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px) {
.sbp-benefits { grid-template-columns: minmax(0, 1fr); }
.sbp-cols { grid-template-columns: minmax(0, 1fr); }
.sbp-galgrid, .sbp-galgrid[data-n="2"], .sbp-galgrid[data-n="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sbp-sec { padding-top: 30px; }
}
/* BP:2.5C-G — Business-Site endcap (palette-aware sign-off before platform footer) */
.sbp-page .sbp-endcap {
display: flex; flex-direction: column; align-items: center; gap: 14px;
padding: clamp(40px, 7vw, 88px) 0 clamp(28px, 5vw, 56px);
}
.sbp-page .sbp-endcap__mono {
display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px; border-radius: 12px;
background: var(--sbp-acc-soft); color: var(--sbp-acc-ink);
font-weight: 800; font-size: 1.05rem; letter-spacing: .03em;
}
.sbp-page .sbp-endcap__rule { width: 32px; height: 2px; border-radius: 2px; background: var(--sbp-indicator, var(--sbp-org-display)); }
.sbp-page .sbp-endcap__name {
font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
color: var(--sbp-mut);
}
/* ══ BP:2.5C-A — governed section RHYTHM (layout, not colour → lives here) ═══
Named tokens; each transition resolves to ONE intentional decision.
--sbp-flow-compact related / nav→first
--sbp-flow-standard canvas→canvas beat (also the .sbp-sec top pad)
--sbp-flow-open before & after a tinted panel (surface change)
--sbp-panel-inset a panel's internal top/bottom padding
Panels drop their ad-hoc outer margin and absorb the inner section pad so
tone-pad + section-pad never stack. A pulse, not a metronome. */
.sbp-page {
--sbp-flow-compact: clamp(20px, 3vw, 36px);
--sbp-flow-standard: clamp(34px, 4.6vw, 60px);
--sbp-flow-open: clamp(52px, 6.5vw, 92px);
--sbp-panel-inset: clamp(20px, 3vw, 34px);
}
.sbp-page .sbp-tone--soft,
.sbp-page .sbp-tone--artwork,
.sbp-page .sbp-tone--deep,
.sbp-page .sbp-tone--action { margin: var(--sbp-flow-open) 0 0; padding-block: var(--sbp-panel-inset); }
/* ══ CHL:BP_SECTION_RHYTHM v1 (Batch 3) — COMPENSATE ONLY REAL SURFACES ══
MEASURED DEFECT: a plain→canvas transition rendered 42px while plain→plain
rendered 66px — a surface change receiving LESS space than a non-change.
CAUSE: .sbp-tone--canvas paints nothing ("open page background, no chrome
added"), but [class*="sbp-tone--"] matched it anyway and applied the
padding COMPENSATION that exists for tones which DO paint a panel and
already carry --sbp-panel-inset. A surface that adds no surface was being
compensated as though it had one.
FIX: the compensation now names the four painting tones explicitly.
Canvas is a plain surface for rhythm purposes, because visually it is one.
GOVERNED TRANSITION TABLE (the whole law, in one place):
same surface -> --sbp-flow-standard (the canvas→canvas beat)
surface CHANGES -> --sbp-flow-open (applied once, never stacked)
inside a panel -> --sbp-flow-compact (the panel already insets)
panel after panel -> --sbp-flow-standard (so runs don't go loose) */
.sbp-page .sbp-secwrap.sbp-tone--soft > .sbp-sec,
.sbp-page .sbp-secwrap.sbp-tone--artwork > .sbp-sec,
.sbp-page .sbp-secwrap.sbp-tone--deep > .sbp-sec,
.sbp-page .sbp-secwrap.sbp-tone--action > .sbp-sec { padding-top: var(--sbp-flow-compact); }
.sbp-page .sbp-secwrap.sbp-tone--soft + .sbp-secwrap > .sbp-sec,
.sbp-page .sbp-secwrap.sbp-tone--artwork + .sbp-secwrap > .sbp-sec,
.sbp-page .sbp-secwrap.sbp-tone--deep + .sbp-secwrap > .sbp-sec,
.sbp-page .sbp-secwrap.sbp-tone--action + .sbp-secwrap > .sbp-sec { padding-top: var(--sbp-flow-open); }
/* BP:2.5C-B guardrail — a panel directly after a panel must not stack two open
beats (margin-open + internal-open). Adjacent panels get standard separation
so several tinted sections in a row don't make the page loose. */
.sbp-page .sbp-secwrap[class*="sbp-tone--"]:not(.sbp-tone--canvas) + .sbp-secwrap[class*="sbp-tone--"]:not(.sbp-tone--canvas) { margin-top: var(--sbp-flow-standard); }
.sbp-page .sbp-secwrap[class*="sbp-tone--"]:not(.sbp-tone--canvas) + .sbp-secwrap[class*="sbp-tone--"]:not(.sbp-tone--canvas) > .sbp-sec { padding-top: var(--sbp-flow-compact); }
/* SECTION_BOTTOM_SPACE. Every .sbp-sec carried padding-bottom:0, so the LAST
section on a page sat flush against the footer and the page ended abruptly.
Separation between sections is owned by the next section's top beat, so the
bottom space is added ONLY where nothing follows. */
.sbp-page .sbp-secwrap:last-of-type > .sbp-sec { padding-bottom: var(--sbp-flow-standard); }
.sbp-page .sbp-secwrap:last-of-type.sbp-tone--soft > .sbp-sec,
.sbp-page .sbp-secwrap:last-of-type.sbp-tone--artwork > .sbp-sec,
.sbp-page .sbp-secwrap:last-of-type.sbp-tone--deep > .sbp-sec,
.sbp-page .sbp-secwrap:last-of-type.sbp-tone--action > .sbp-sec { padding-bottom: var(--sbp-flow-compact); }
/* EMPTY_SECTION_RESERVED_HEIGHT. A section whose grid rendered nothing still
contributed its top beat, leaving a gap with no content to justify it. */
.sbp-page .sbp-secwrap:not(:has(.sbp-sec *)) > .sbp-sec { padding-top: 0; padding-bottom: 0; }
/* ── BP:2.5C-B COLOUR RESTRAINT (sections) ───────────────────────────────
Section roles that still consumed territory (--sbp-acc/-ink) return to the
palette: checks, ghost buttons, "More" links, prog-tab hover, shop-card
hover/CTA, invite icon. Eyebrow/kicker (36,40) stays territory by design. */
.sbp-page .sbp-check__mark { color: var(--sbp-org); }
.sbp-page .sbp-btn--ghost { border-color: color-mix(in srgb, var(--sbp-indicator, var(--sbp-org-display)) 60%, transparent); color: var(--sbp-indicator, var(--sbp-org-display)); }
.sbp-page .sbp-btn--ghost:hover { border-color: var(--sbp-indicator, var(--sbp-org-display)); color: var(--sbp-indicator, var(--sbp-org-display)); background: var(--sbp-acc-soft); }
/* CHL:BP_PALETTE_AUDIT v1 — --sbp-org-ink is the HOVER FILL token ("action
fill darkened for hover"), not a text ink: as link text it measured 4.0:1
under Community Bright. Text wears the audited accent ink. */
/* CHL:BP_EYEBROW_UNITY v2 (operator 2026-08-11) — small BOLD signature
labels (see-all, record-go, menu group names) join the eyebrow's
operator-approved brand exception: they wear the bright display
signature, like the eyebrow rule above documents. */
.sbp-page .sbp-more { border-color: color-mix(in srgb, var(--sbp-indicator, var(--sbp-org-display)) 42%, transparent); color: var(--sbp-indicator, var(--sbp-org-display)); }
.sbp-page .sbp-more:hover { color: var(--sbp-indicator, var(--sbp-org-display)); background: var(--sbp-acc-soft); }
.sbp-page .sbp-prog .b_profile_tabs li a:hover { border-color: color-mix(in srgb, var(--sbp-org) 45%, transparent); color: var(--sbp-ink); }
.sbp-page .sbp-shopcard:hover { border-color: color-mix(in srgb, var(--sbp-org) 40%, transparent); }
.sbp-page .sbp-shopcard__go { color: var(--sbp-indicator, var(--sbp-org-display)); } /* CHL:BP_EYEBROW_UNITY v2 — brand-signature bold label */
.sbp-page .sbp-shopinvite__icon { color: var(--sbp-org); border-color: color-mix(in srgb, var(--sbp-ink) 16%, transparent); }
/* BP:DESIGN v1 — governed Motion. Sections fade-up only when the vendor opts in
(--sbp-reveal set) AND the visitor allows motion. Default (unset) = no motion. */
@media (prefers-reduced-motion: no-preference) {
.sbp-page .sbp-secwrap { animation: sbp-reveal var(--sbp-reveal, 0s) ease both; }
@keyframes sbp-reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
/* BP:PAGES v2 — governed per-section presets (inspector-set) */
.sbp-page .sbp-secwrap.sbp-space--compact { padding-top: var(--sbp-flow-compact, clamp(20px,3vw,36px)); }
.sbp-page .sbp-secwrap.sbp-space--open { padding-top: var(--sbp-flow-open, clamp(52px,6.5vw,92px)); }
/* ⛔ MEASURED IN THE LIVE EDITOR (operator journey, 2026-08-22): THE DIAL WAS
ADDITIVE, SO "COMPACT" MADE THE SECTION TALLER. .sbp-sec always contributes
--sbp-flow-standard (60px here), and the two rules above ADD to it, so the
three states rendered 60 / 96 / 152 — Standard was the tightest and Compact
read as "slightly roomier". Measured section heights on BP 954 Highlights:
Standard 650, Compact 686, Open 742.
The dial must REPLACE the flow, not stack on it: when the wrapper states a
spacing, the inner section's standard top flow stands down. Result 36 / 60 /
92 — monotonic, and each label now means what it says. Untouched sections
(no spacing class) keep the standard 60 exactly as before. */
.sbp-page .sbp-secwrap.sbp-space--compact > .sbp-sec,
.sbp-page .sbp-secwrap.sbp-space--open > .sbp-sec { padding-top: 0; }
.sbp-page .sbp-secwrap.sbp-lay--wide .sbp-sw { max-width: min(1360px, 94vw); }
.sbp-page .sbp-secwrap.sbp-lay--narrow .sbp-sw { max-width: 760px; }
/* BP:DESIGN v1 — contained media framing sits on a soft field so portraits/logos
don't leave bare gaps when the vendor chooses 'contain'. */
.sbp-page[style*="--sbp-media-fit:contain"] .sbp-about__media .sbp-eimg { background: var(--sbp-acc-soft, var(--sbp-field-b, #f1ece5)); border-radius: var(--sbp-r-lg); overflow: hidden; }
/* CHL:BP_CB_BRIGHT v3 — Contain letterboxing is the palette's soft wash, not
white bars; the frame clips all four corners (operator annotations 4). */
.sbp-page .sbp-about__media .sbp-eimg { overflow: hidden; }
/* ─────────────────────────────────────────────────────────────────────────
BP:LISTINGS v1 — shared listings card grid (capability_listing.php).
One system for events/publishing/services/menu/etc. Cards with a canonical
public destination are a single stretched anchor (keyboard-focusable, visible
focus); cards without one stay honest, non-clickable surfaces.
───────────────────────────────────────────────────────────────────────── */
.sbp-page .sbp-cardgrid {
display: grid; gap: clamp(14px, 2vw, 22px);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.sbp-page .sbp-card {
position: relative; display: flex; flex-direction: column;
background: var(--sbp-card, #fff); border: 1px solid var(--sbp-line, #e7e2da);
border-radius: var(--sbp-r-lg, 16px); overflow: hidden;
transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.sbp-page .sbp-card__media { aspect-ratio: 16 / 10; background: var(--sbp-field-b, #f1ece5); }
.sbp-page .sbp-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sbp-page .sbp-card__body { display: flex; flex-direction: column; gap: 6px; padding: clamp(14px, 1.6vw, 18px); }
.sbp-page .sbp-card__badge { align-self: flex-start; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
color: var(--sbp-ink-soft, #6b6357); background: var(--sbp-field-b, #f1ece5); padding: 2px 8px; border-radius: 999px; }
.sbp-page .sbp-card__title { margin: 0; font-size: clamp(1.02rem, 1.4vw, 1.16rem); line-height: 1.25; color: var(--sbp-ink, #26201a); }
.sbp-page .sbp-card__meta { margin: 0; font-size: .82rem; color: var(--sbp-ink-soft, #6b6357); }
.sbp-page .sbp-card__desc { margin: 2px 0 0; font-size: .9rem; line-height: 1.5; color: var(--sbp-ink-soft, #6b6357);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sbp-page .sbp-card__price { margin: 4px 0 0; font-weight: 700; color: var(--sbp-indicator, var(--sbp-org-display)); }
/* CHL:BP_TOKEN_CONTRACT v1 — INTERACTION STATES USE THE ACTION FAMILY.
These consumed --sbp-accent, which is the palette's COMPANION colour:
Sage & Clay's accent is clay (#a2543a), Ember's is plum, Plum's is
mineral. A companion is a decorative/secondary colour and must never
become a link, hover border or focus ring — that is what made a green
Sage page show terracotta calls-to-action. Interaction now rides the
action ramp (org / org-ink / org-active), which is in-family by
construction for every palette. */
.sbp-page .sbp-card__cta { margin-top: auto; padding-top: 8px; font-size: .88rem; font-weight: 600;
color: var(--sbp-org, #c74d17); display: inline-flex; align-items: center; gap: 4px; }
.sbp-page .sbp-card__cta-arrow { transition: transform .18s ease; }
/* Clickable card: the stretched anchor is the single interactive element. */
.sbp-page .sbp-card__hit { position: absolute; inset: 0; z-index: 1; text-indent: -9999px; overflow: hidden; }
.sbp-page .sbp-card--link { cursor: pointer; }
.sbp-page .sbp-card--link:hover { box-shadow: 0 10px 30px rgba(0,0,0,.10); transform: translateY(-2px); border-color: var(--sbp-org, #c74d17); }
.sbp-page .sbp-card--link:hover .sbp-card__cta-arrow { transform: translateX(3px); }
.sbp-page .sbp-card--link:focus-within { outline: 3px solid var(--sbp-focus, var(--sbp-org, #c74d17)); outline-offset: 2px; box-shadow: 0 10px 30px rgba(0,0,0,.10); }
.sbp-page .sbp-card__hit:focus { outline: none; }
.sbp-page .sbp-card__hit:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
.sbp-page .sbp-card, .sbp-page .sbp-card--link:hover, .sbp-page .sbp-card__cta-arrow { transition: none; transform: none; }
}
/* CHL:BP_HOURS + PUBLIC_ACTIONS v1 (Unit 3C-G) — public Contact surface. Palette-owned
semantic tokens only (never fixed brand colours); territory stays on the monogram. */
.sbp-page .sbp-contact__hours { margin-top: 18px; }
.sbp-page .sbp-hourstz { font-weight: 400; color: var(--sbp-mut); font-size: .85em; }
.sbp-page .sbp-hourslist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; max-width: 340px; }
.sbp-page .sbp-hoursrow { display: flex; justify-content: space-between; gap: 16px; font-size: .92rem; padding: 5px 0; border-bottom: 1px solid color-mix(in srgb, var(--sbp-ink) 8%, transparent); }
.sbp-page .sbp-hoursrow.is-today { font-weight: 700; }
.sbp-page .sbp-hoursrow.is-today .sbp-hoursday::after { content: " · Today"; color: var(--sbp-acc); font-weight: 600; }
.sbp-page .sbp-hoursday { color: var(--sbp-ink); }
.sbp-page .sbp-hoursval { color: var(--sbp-ink); text-align: right; }
.sbp-page .sbp-hoursval--closed { color: var(--sbp-mut); }
.sbp-page .sbp-hoursval--appointment { color: var(--sbp-acc-ink); }
.sbp-page .sbp-hoursval em { font-style: normal; color: var(--sbp-mut); font-size: .82em; display: block; }
.sbp-page .sbp-contact__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sbp-page .sbp-caction { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--sbp-acc) 34%, transparent); color: var(--sbp-acc-ink); text-decoration: none; font-weight: 600; font-size: .9rem; background: var(--sbp-card); }
.sbp-page .sbp-caction:hover { background: var(--sbp-acc-soft); border-color: var(--sbp-acc); }
.sbp-page .sbp-caction i { color: var(--sbp-acc); }
/* ── CHL:BP_SECTION_CONTRACT v1 — written content inside a commerce showcase
(editorial / hybrid modes). Reads as prose, sits between the intro and
the record rail, and never exceeds a comfortable measure. ───────────── */
.sbp-shop__editorial { max-width: 70ch; margin: 14px 0 6px; }
.sbp-shop__editorial .sbp-body { font-size: 15.5px; line-height: 1.7; color: var(--sbp-ink); white-space: normal; }
/* CHL:BP_UXPARITY v1 — no-cover hero: a compact band, not a tall empty area.
The identity crest below already carries the business initials. */
.sbp-page .sbp-banner--compact { min-height: 96px; height: 96px; aspect-ratio: auto; }
.sbp-page .sbp-banner--compact .sbp-banner__mono { display: none; }
@media (min-width: 900px) { .sbp-page .sbp-banner--compact { min-height: 132px; height: 132px; } }
/* CHL:BP_TOUCH v1 — public contact actions on a phone. Height only; the
existing widths, colours and palette tokens are untouched. */
@media (max-width: 860px) {
.sbp-caction { min-height: 44px; }
}
/* ══ CHL:BP_CARD_CONTRACT v1 (Batch 4) — SHARED OPERATIONAL CARD ═══════════
ONE contract for the eight families that share _offerings.php. Every value
below is a governed BP theme/layout token or a geometric constant — no
interface colour literals enter this component.
MEASURED DEFECTS THIS CLOSES (live /business/907, 8 real cards):
card heights 347 / 370 / 392px -> equal rows
6 of 8 cards with no image, shown
as a bare icon in a 260px panel -> designed fallback that names itself
2 cards reading "£0.00" -> resolved in PHP as a price STATE
a 13.5px text link as the only CTA -> a real action zone with a target */
/* EQUAL ROWS. The rail is a grid, so every card in a row shares one height and
the zones line up across cards instead of floating at content height. */
.sbp-page .sbp-shop__rail { align-items: stretch; }
.sbp-page .sbp-shopcard { height: 100%; }
/* MEDIA ZONE — one ratio for every family, never distorted. */
.sbp-page .sbp-shopcard__zone--media { flex: none; background-size: cover; background-position: center; }
.sbp-page .sbp-shopcard__zone--media.is-empty {
background:
radial-gradient(120% 90% at 50% 0%, var(--sbp-acc-soft) 0%, transparent 70%),
var(--sbp-field-b);
}
/* DESIGNED FALLBACK: the family glyph AND its word, so an image-less card is
still self-describing rather than a hollow panel. */
.sbp-page .sbp-shopcard__ph { flex-direction: column; gap: 8px; font-size: 30px; }
.sbp-page .sbp-shopcard__phlbl {
font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
color: var(--sbp-mut);
}
/* CONTENT ZONE — title clamped to two lines so a long title cannot push the
action out of alignment; the meta line always occupies its row so cards with
and without meta stay on the same skeleton. */
.sbp-page .sbp-shopcard__zone--content { gap: 6px; }
.sbp-page .sbp-shopcard__t {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; overflow-wrap: anywhere;
}
.sbp-page .sbp-shopcard__meta {
min-height: 1.25em; display: -webkit-box; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; overflow: hidden;
}
/* ACTION ZONE — always present, always last, always the same distance from the
card's bottom edge. */
.sbp-page .sbp-shopcard__zone--action { margin-top: auto; padding-top: 10px; min-height: 34px; display: flex; align-items: flex-end; }
.sbp-page .sbp-shopcard__go { margin-top: 0; padding-top: 0; min-height: 24px; }
.sbp-page .sbp-shopcard__go.is-inert { color: var(--sbp-mut); font-weight: 700; }
/* PRICE STATES. Only PAID_PRICE and FROM_PRICE read as commerce; an
availability state must not look like a price. */
.sbp-page .sbp-shopcard__price--sold-out,
.sbp-page .sbp-shopcard__price--unavailable {
background: color-mix(in srgb, var(--sbp-ink) 82%, transparent); color: var(--sbp-card);
}
.sbp-page .sbp-shopcard__price--free { background: var(--sbp-acc-soft); color: var(--sbp-acc-ink); }
/* TOUCH. The whole card is the target where a URL exists; on narrow screens the
action line also clears a comfortable height of its own. */
@media (max-width: 860px) {
.sbp-page .sbp-shopcard__zone--action { min-height: 44px; align-items: center; }
.sbp-page .sbp-shopcard__go { min-height: 44px; align-items: center; }
}
/* CHL:BP_A11Y v2 — this sheet loads AFTER starter-business.css (page.php:295),
so its :focus-visible rules win ties. They already ring correctly through the
repaired --sbp-focus token; this adds the SEPARATOR half of the dual ring so
section controls sitting over card media keep a local contrast boundary.
.sbp-card__hit is intentionally excluded — the card rings itself via
.sbp-card--link:focus-within. */
.sbp-sections a:focus-visible,
.sbp-sections button:focus-visible,
.sbp-sections [tabindex]:focus-visible {
outline-offset: -4px;
box-shadow: inset 0 0 0 2px var(--sbp-card);
}
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_LAYOUT_VARIANT v1 — three curated compositions per component.
Variant 1 = the existing composition (no class; zero change to any page).
.sbp-var--2 / .sbp-var--3 change LAYOUT ONLY: position, emphasis, flair.
Content, records, links, palette tokens and functionality are untouched.
DOM order never changes — visual order moves via grid/order, and is kept
sensible (§ a11y: forms keep field order; swapped columns carry no
focusable-order traps beyond the columns themselves).
═══════════════════════════════════════════════════════════════════════════ */
/* ── CONTACT ── moved: the full V1-V5 family composition set now lives in the
CHL:BP_CONTACT_COMPOSITION v1 zone at the end of this sheet (Wave A1). */
/* ── ABOUT (.sbp-imgled) ── V2: copy left, image right (mirror).
V3: editorial feature — full-width media, copy card overlapping upward. */
.sbp-var--2 .sbp-imgled__media { order: 2; }
/* CHL:BP_LAYOUT_VARIANT v1.2c (operator) — the mirror flips the TRACKS too:
the base grid is 1.1fr/1fr with media in the wide first track; order alone
dropped the image into the narrow track and the copy/CTA side overweighed
it. Mirrored widths keep the image generous on the right. */
.sbp-var--2 .sbp-imgled { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.sbp-var--3 .sbp-imgled { display: block; }
.sbp-var--3 .sbp-imgled__media { max-height: 380px; }
.sbp-var--3 .sbp-imgled__media img { width: 100%; height: 100%; object-fit: cover; }
.sbp-var--3 .sbp-imgled > :not(.sbp-imgled__media) { position: relative; z-index: 1;
background: var(--sbp-card); border: 1px solid var(--sbp-line); border-radius: var(--sbp-r-lg);
/* CHL:BP_WYSIWYG_PARITY v1 (About V3 geometry) — same concept, firmer
anchor: stronger pull into the image and a deliberate left offset so
the editorial card reads as part of the photograph, not below it. */
padding: clamp(20px, 3vw, 32px) clamp(22px, 3vw, 34px) clamp(20px, 3vw, 30px);
margin: -72px auto 0 clamp(24px, 6vw, 84px);
width: min(calc(100% - clamp(24px, 6vw, 84px) - 18px), 720px); /* 18px keeps a right inset in the 761-860px band */
box-shadow: 0 18px 44px -30px rgba(var(--sbp-shadow-rgb, 32, 26, 20), .35); }
/* ── RECORD SHELVES (.sbp-cardgrid: shop, bookables, memberships, rentals,
events, subscriptions, products, services) ──
V2: horizontal list rows. V3: feature-led — first card hero-sized.
Same records, same order, same links; presentation only. */
.sbp-var--2 .sbp-cardgrid { display: flex; flex-direction: column; gap: 14px; }
.sbp-var--2 .sbp-cardgrid .sbp-shopcard { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: stretch; }
.sbp-var--2 .sbp-cardgrid .sbp-shopcard__img { min-height: 128px; height: 100%; }
.sbp-var--3 .sbp-cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sbp-var--3 .sbp-cardgrid .sbp-shopcard:first-child { grid-column: 1 / -1; }
.sbp-var--3 .sbp-cardgrid .sbp-shopcard:first-child .sbp-shopcard__img { min-height: 300px; }
/* ── GALLERY + PHOTO WALL ── V2: masonry flow. V3: featured-first mosaic. */
.sbp-var--2 .sbp-gallery__grid, .sbp-var--2 .sbp-photos__grid { display: block; columns: 3 240px; column-gap: 14px; }
.sbp-var--2 .sbp-gallery__grid > *, .sbp-var--2 .sbp-photos__grid > * { break-inside: avoid; margin-bottom: 14px; display: block; }
.sbp-var--3 .sbp-gallery__grid, .sbp-var--3 .sbp-photos__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sbp-var--3 .sbp-gallery__grid > :first-child, .sbp-var--3 .sbp-photos__grid > :first-child { grid-column: span 2; grid-row: span 2; }
.sbp-var--3 .sbp-gallery__grid img, .sbp-var--3 .sbp-photos__grid img { height: 100%; object-fit: cover; }
/* ── FEATURES (why choose us) + COLUMNS (highlights) ──
V2: ledger rows (icon-led, left-aligned list). V3: alternating bands. */
.sbp-var--2 .sbp-features .sbp-cols, .sbp-var--2 .sbp-cols { display: flex; flex-direction: column; gap: 12px; }
.sbp-var--2 .sbp-cols > * { display: grid; grid-template-columns: minmax(140px, auto) minmax(0, 1fr); gap: 14px; align-items: start;
padding: 14px 16px; background: var(--sbp-card); border: 1px solid var(--sbp-line); border-radius: 12px; }
.sbp-var--3 .sbp-cols { display: flex; flex-direction: column; gap: 0; }
.sbp-var--3 .sbp-cols > * { padding: clamp(18px, 2.6vw, 28px); border-radius: 0; }
.sbp-var--3 .sbp-cols > :nth-child(odd) { background: var(--sbp-soft-x, var(--sbp-acc-soft)); }
.sbp-var--3 .sbp-cols > :first-child { border-radius: var(--sbp-r-lg) var(--sbp-r-lg) 0 0; }
.sbp-var--3 .sbp-cols > :last-child { border-radius: 0 0 var(--sbp-r-lg) var(--sbp-r-lg); }
/* ── MOBILE LAW — every variant stacks intentionally; no squeezed desktops. */
@media (max-width: 760px) {
/* (contact order reset retired — Wave A1 V2 "Details" keeps source order) */
.sbp-var--2 .sbp-imgled__media { order: initial; }
.sbp-var--2 .sbp-cardgrid .sbp-shopcard { grid-template-columns: minmax(0, 1fr); }
.sbp-var--2 .sbp-cardgrid .sbp-shopcard__img { min-height: 170px; }
.sbp-var--3 .sbp-cardgrid { grid-template-columns: minmax(0, 1fr); }
.sbp-var--3 .sbp-cardgrid .sbp-shopcard:first-child .sbp-shopcard__img { min-height: 200px; }
.sbp-var--2 .sbp-gallery__grid, .sbp-var--2 .sbp-photos__grid { columns: 2 150px; }
.sbp-var--3 .sbp-gallery__grid, .sbp-var--3 .sbp-photos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sbp-var--3 .sbp-imgled > :not(.sbp-imgled__media) { margin: -24px auto 0; width: min(100%, 720px); } /* CHL:BP_WYSIWYG_PARITY v1 — stacked mobile keeps the symmetric card */
}
/* ── CHL:BP_LAYOUT_VARIANT v1.2 — the remaining families: EVERY public
content component now answers the variant toggle. Content untouched. ── */
/* MENU — V2: two-column carte. V3: centered classic carte (single column,
generous rhythm, thumbnails hidden for a type-led composition). */
/* CHL:BP_MENU_VARIANTS v2 — three distinct designed treatments.
V1 (default) = editorial two-column with dotted leaders (above).
V2 = CARDED groups: each category is a light card panel.
V3 = CENTRED TASTING LIST: one column, name/price stacked centre,
rules between courses (the dashed rows read cheap — dropped). */
.sbp-var--2 .sbp-menusec__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 28px); }
.sbp-var--2 .sbp-menusec__group {
background: var(--sbp-card, #fff); border: 1px solid var(--sbp-line);
border-radius: 18px; padding: clamp(18px, 2.6vw, 26px);
box-shadow: 0 16px 34px -26px rgba(32, 26, 20, .35);
}
.sbp-var--3 .sbp-menusec__written { text-align: center; margin-inline: auto; max-width: 58ch; }
.sbp-var--3 .sbp-menusec__groups { display: block; max-width: 640px; margin-inline: auto; }
.sbp-var--3 .sbp-menusec__group + .sbp-menusec__group { margin-top: clamp(26px, 4vw, 40px); }
.sbp-var--3 .sbp-menusec__groupname { justify-content: center; text-align: center; }
.sbp-var--3 .sbp-menusec__groupname::before {
content: ""; height: 2px; border-radius: 2px;
background: color-mix(in srgb, var(--sbp-indicator, var(--sbp-org-display)) 32%, transparent);
}
.sbp-var--3 .sbp-menusec__groupname::before,
.sbp-var--3 .sbp-menusec__groupname::after { flex: 0 0 44px; }
.sbp-var--3 .sbp-menusec__thumb { display: none; }
.sbp-var--3 .sbp-menusec__item { display: block; text-align: center; padding-block: 11px; }
.sbp-var--3 .sbp-menusec__item + .sbp-menusec__item { border-top: 1px solid var(--sbp-line); }
.sbp-var--3 .sbp-menu__dots { display: none; }
.sbp-var--3 .sbp-menusec__row { justify-content: center; flex-wrap: wrap; column-gap: 10px; }
.sbp-var--3 .sbp-menusec__desc { margin-inline: auto; }
/* PROGRAMMES — legacy tab-era variant compositions RETIRED (Wave A2): the
public tab markup no longer exists, and the old `.sbp-var--2 .sbp-prog`
220px rail grid was crushing the NEW .sbp-pg anatomy into its rail track
(caught live in A2 acceptance). The family's compositions now live in the
CHL:BP_PROGRAMMES_FAMILY v1 zone at the end of this sheet. */
/* MEDIA (Videos & audio) — V2: stage on top, playlist as a row band below.
V3: mirrored (playlist left, stage right). */
.sbp-var--2 .sbp-media { display: block; }
.sbp-var--2 .sbp-media__stage { margin-bottom: 14px; aspect-ratio: 16 / 9; }
.sbp-var--2 .sbp-media__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.sbp-var--3 .sbp-media__stage { order: 2; }
.sbp-var--3 .sbp-media__list { order: 1; }
@media (max-width: 760px) {
.sbp-var--2 .sbp-menusec__groups { grid-template-columns: minmax(0, 1fr); }
/* (tab-era .sbp-prog mobile resets retired with the rail grid — Wave A2) */
.sbp-var--2 .sbp-media__list { grid-template-columns: minmax(0, 1fr); }
.sbp-var--3 .sbp-media__stage, .sbp-var--3 .sbp-media__list { order: initial; }
}
/* CHL:BP_LAYOUT_VARIANT v1.2b — the record shelves' REAL container is
.sbp-shop__rail (measured in the canvas; .sbp-cardgrid belongs to the
capability listing and keeps its rules). Same compositions, right target. */
.sbp-var--2 .sbp-shop__rail { display: flex; flex-direction: column; gap: 14px; }
.sbp-var--2 .sbp-shop__rail .sbp-shopcard { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: stretch; }
.sbp-var--2 .sbp-shop__rail .sbp-shopcard__img { min-height: 128px; height: 100%; }
.sbp-var--3 .sbp-shop__rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sbp-var--3 .sbp-shop__rail .sbp-shopcard:first-child { grid-column: 1 / -1; }
.sbp-var--3 .sbp-shop__rail .sbp-shopcard:first-child .sbp-shopcard__img { min-height: 300px; }
@media (max-width: 760px) {
.sbp-var--2 .sbp-shop__rail .sbp-shopcard { grid-template-columns: minmax(0, 1fr); }
.sbp-var--2 .sbp-shop__rail .sbp-shopcard__img { min-height: 170px; }
.sbp-var--3 .sbp-shop__rail { grid-template-columns: minmax(0, 1fr); }
.sbp-var--3 .sbp-shop__rail .sbp-shopcard:first-child .sbp-shopcard__img { min-height: 200px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_LAYOUT_VARIANT v1.3 — FLAIR LAW (operator). Variants are MOODS, not
mirrors: the header block (eyebrow · heading · deck · CTA) changes with the
composition, and each variant carries its own signature.
V2 = EDITORIAL LEDGER — leading bright rule, tightened rhythm, structured rows
V3 = FEATURE STAGE — centered header, bigger balanced heading, centered
signature rule + centered CTAs, generous stage
Same palette, same content, same records. Composition + flair only.
═══════════════════════════════════════════════════════════════════════════ */
/* ── V2 header mood: the kicker's dash becomes a full leading rule ── */
.sbp-var--2 .sbp-head,
.sbp-var--2 .sbp-shop__intro,
.sbp-var--2 .sbp-contact__info > .sbp-kicker + .sbp-h2,
.sbp-var--2 .sbp-imgled > :not(.sbp-imgled__media) > .sbp-kicker { border: 0; }
.sbp-var--2 .sbp-head, .sbp-var--2 .sbp-shop__intro {
border-left: 3px solid var(--sbp-indicator, var(--sbp-org-display)); padding-left: clamp(14px, 2vw, 22px);
}
.sbp-var--2 .sbp-head .sbp-kicker::before, .sbp-var--2 .sbp-shop__intro .sbp-kicker::before { display: none; }
.sbp-var--2 .sbp-h2 { letter-spacing: -0.02em; }
/* ── V3 header mood: centered stage with a signature rule ── */
.sbp-var--3 .sbp-head, .sbp-var--3 .sbp-shop__head {
display: block; text-align: center; max-width: 720px; margin-inline: auto;
}
.sbp-var--3 .sbp-head .sbp-kicker, .sbp-var--3 .sbp-shop__head .sbp-kicker { justify-content: center; }
.sbp-var--3 .sbp-head .sbp-h2, .sbp-var--3 .sbp-shop__head .sbp-h2 {
font-size: calc(clamp(23px, 2.5vw, 33px) * var(--sbp-type-scale, 1) * 1.12);
}
.sbp-var--3 .sbp-head .sbp-deck, .sbp-var--3 .sbp-shop__head .sbp-deck { margin-inline: auto; }
/* CHL:BP_COMPOSITION_POLISH v1 — the shelf intro is a 66ch block; centred
V3 must centre the BLOCK too or its text sits left of the signature rule. */
.sbp-var--3 .sbp-shop__head .sbp-shop__intro { margin-inline: auto; }
.sbp-var--3 .sbp-head::after, .sbp-var--3 .sbp-shop__head::after {
content: ""; display: block; width: 54px; height: 3px; border-radius: 3px;
background: var(--sbp-indicator, var(--sbp-org-display)); margin: 16px auto 4px;
}
.sbp-var--3 .sbp-shop__head .sbp-more { display: inline-flex; margin-top: 12px; }
.sbp-var--3 .sbp-shop__cta, .sbp-var--3 .sbp-more--footer { text-align: center; }
/* ── Shelves V3: no dangling half-card — an unpaired last card becomes a
second full-width hero (stacked-stage rhythm). ── */
.sbp-var--3 .sbp-shop__rail .sbp-shopcard:last-child:nth-child(even) { grid-column: 1 / -1; }
.sbp-var--3 .sbp-shop__rail .sbp-shopcard:last-child:nth-child(even) .sbp-shopcard__img { min-height: 240px; }
/* ── (Contact V2 track mirror retired — Wave A1 "Details" composition, end of sheet) ── */
/* ── About V3 stage flair: the overlap card carries a signature top rule ── */
.sbp-var--3 .sbp-imgled > :not(.sbp-imgled__media) { border-top: 3px solid var(--sbp-indicator, var(--sbp-org-display)); }
/* ── V2 rows flair: ledger rows carry a quiet leading edge on hover ── */
.sbp-var--2 .sbp-shop__rail .sbp-shopcard { border-left: 2px solid transparent; transition: border-color .15s ease; }
.sbp-var--2 .sbp-shop__rail .sbp-shopcard:hover { border-left-color: var(--sbp-indicator, var(--sbp-org-display)); }
@media (max-width: 760px) {
.sbp-var--2 .sbp-head, .sbp-var--2 .sbp-shop__intro { border-left-width: 2px; padding-left: 12px; }
.sbp-var--3 .sbp-head .sbp-h2, .sbp-var--3 .sbp-shop__head .sbp-h2 { font-size: calc(clamp(23px, 2.5vw, 33px) * var(--sbp-type-scale, 1)); }
}
/* ═══ CHL:BP_MEDIA_SCALE v1 — the image-presence dial (Default / Medium /
Large), per section instance, composing with every variant. ═══ */
/* Shelf rows (V2 ledger): the image column grows */
.sbp-med--m.sbp-var--2 .sbp-shop__rail .sbp-shopcard { grid-template-columns: 260px minmax(0, 1fr); }
.sbp-med--l.sbp-var--2 .sbp-shop__rail .sbp-shopcard { grid-template-columns: 360px minmax(0, 1fr); }
.sbp-med--m.sbp-var--2 .sbp-shop__rail .sbp-shopcard__img { min-height: 170px; }
.sbp-med--l.sbp-var--2 .sbp-shop__rail .sbp-shopcard__img { min-height: 220px; }
/* Shelf grid (V1) + stage (V3): media zones deepen */
/* CHL:BP_MEDIA_DIAL v2 — the dial scales the CEILING, not just the floor.
Card images are aspect-driven and capped (max-height 260 base); pushing
min-height alone was a no-op whenever the aspect height already hit the
cap (V1 shelves with real photos). The min ladder stays so photo-less
placeholder cards keep responding too. */
.sbp-med--m .sbp-shop__rail .sbp-shopcard__img { min-height: 210px; max-height: 340px; }
.sbp-med--l .sbp-shop__rail .sbp-shopcard__img { min-height: 280px; max-height: 440px; }
.sbp-med--m.sbp-var--3 .sbp-shop__rail .sbp-shopcard:first-child .sbp-shopcard__img { min-height: 360px; }
.sbp-med--l.sbp-var--3 .sbp-shop__rail .sbp-shopcard:first-child .sbp-shopcard__img { min-height: 440px; }
/* About: the media track widens (variant-aware mirrors) */
.sbp-med--m .sbp-imgled { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.sbp-med--l .sbp-imgled { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.sbp-med--m.sbp-var--2 .sbp-imgled { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.sbp-med--l.sbp-var--2 .sbp-imgled { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.sbp-med--m .sbp-imgled > img, .sbp-med--m .sbp-imgled__media img { max-height: 540px; }
.sbp-med--l .sbp-imgled > img, .sbp-med--l .sbp-imgled__media img { max-height: 640px; aspect-ratio: 16 / 10; }
.sbp-med--m.sbp-var--3 .sbp-imgled__media { max-height: 460px; }
.sbp-med--l.sbp-var--3 .sbp-imgled__media { max-height: 560px; }
/* CHL:BP_MEDIA_DIAL v2 — gallery & photo wall respond to the dial: wider
cells at M/L (V1 auto-fill grid), deeper masonry columns (V2). The V3
feature composition is deliberately fixed — the variant owns composition,
the dial owns scale, and V3's scale is its design. */
.sbp-med--m .sbp-gallery__grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.sbp-med--l .sbp-gallery__grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.sbp-med--m .sbp-photos__grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sbp-med--l .sbp-photos__grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.sbp-med--m.sbp-var--2 .sbp-gallery__grid, .sbp-med--m.sbp-var--2 .sbp-photos__grid { columns: 2 300px; }
.sbp-med--l.sbp-var--2 .sbp-gallery__grid, .sbp-med--l.sbp-var--2 .sbp-photos__grid { columns: 2 380px; }
.sbp-med--m.sbp-var--3 .sbp-gallery__grid, .sbp-med--m.sbp-var--3 .sbp-photos__grid,
.sbp-med--l.sbp-var--3 .sbp-gallery__grid, .sbp-med--l.sbp-var--3 .sbp-photos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* ═══ CHL:BP_OVERLAY v1 — text-on-image mode. Shared record families keep
their historical overlay behavior; Shop now delegates V2–V7 to their own
composition laws. Scrim guarantees contrast where overlay is truly used. ═══ */
/* CHL:BP_OVERLAY v2 — shared record families retain the historical overlay
law, but Shop variants V2–V7 own their own compositions. Product overlay is
therefore V1-only; this prevents absolute-position/scrim leakage into the
Catalogue Stage, Price Index, Showcase, Lookbook and Shelf. */
.sbp-olay--1:not(.sbp-var--2):not(:has(.sbp-sec--products)) .sbp-shop__rail .sbp-shopcard,
.sbp-olay--1:not(.sbp-var--2):not(.sbp-var--3):not(.sbp-var--4):not(.sbp-var--5):not(.sbp-var--6):not(.sbp-var--7) .sbp-sec--products .sbp-shop__rail .sbp-shopcard { position: relative; overflow: hidden; }
.sbp-olay--1:not(.sbp-var--2):not(:has(.sbp-sec--products)) .sbp-shop__rail .sbp-shopcard__img,
.sbp-olay--1:not(.sbp-var--2):not(.sbp-var--3):not(.sbp-var--4):not(.sbp-var--5):not(.sbp-var--6):not(.sbp-var--7) .sbp-sec--products .sbp-shop__rail .sbp-shopcard__img { min-height: 300px; }
.sbp-olay--1:not(.sbp-var--2):not(:has(.sbp-sec--products)) .sbp-shop__rail .sbp-shopcard__img::after,
.sbp-olay--1:not(.sbp-var--2):not(.sbp-var--3):not(.sbp-var--4):not(.sbp-var--5):not(.sbp-var--6):not(.sbp-var--7) .sbp-sec--products .sbp-shop__rail .sbp-shopcard__img::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(24,18,12,0) 34%, rgba(24,18,12,.42) 62%, rgba(24,18,12,.78) 100%);
}
.sbp-olay--1:not(.sbp-var--2):not(:has(.sbp-sec--products)) .sbp-shop__rail .sbp-shopcard > :not(.sbp-shopcard__img),
.sbp-olay--1:not(.sbp-var--2):not(.sbp-var--3):not(.sbp-var--4):not(.sbp-var--5):not(.sbp-var--6):not(.sbp-var--7) .sbp-sec--products .sbp-shop__rail .sbp-shopcard > :not(.sbp-shopcard__img) {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
padding: 16px 18px; background: none;
}
.sbp-olay--1:not(.sbp-var--2):not(:has(.sbp-sec--products)) .sbp-shop__rail .sbp-shopcard > :not(.sbp-shopcard__img) *,
.sbp-olay--1:not(.sbp-var--2):not(.sbp-var--3):not(.sbp-var--4):not(.sbp-var--5):not(.sbp-var--6):not(.sbp-var--7) .sbp-sec--products .sbp-shop__rail .sbp-shopcard > :not(.sbp-shopcard__img) * { color: #fff; }
.sbp-olay--1:not(.sbp-var--2):not(:has(.sbp-sec--products)) .sbp-shop__rail .sbp-shopcard .sbp-shopcard__go,
.sbp-olay--1:not(.sbp-var--2):not(.sbp-var--3):not(.sbp-var--4):not(.sbp-var--5):not(.sbp-var--6):not(.sbp-var--7) .sbp-sec--products .sbp-shop__rail .sbp-shopcard .sbp-shopcard__go { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
.sbp-med--m.sbp-var--2 .sbp-shop__rail .sbp-shopcard,
.sbp-med--l.sbp-var--2 .sbp-shop__rail .sbp-shopcard { grid-template-columns: minmax(0, 1fr); }
.sbp-med--m .sbp-imgled, .sbp-med--l .sbp-imgled,
.sbp-med--m.sbp-var--2 .sbp-imgled, .sbp-med--l.sbp-var--2 .sbp-imgled { grid-template-columns: minmax(0, 1fr); }
.sbp-olay--1:not(.sbp-var--2):not(:has(.sbp-sec--products)) .sbp-shop__rail .sbp-shopcard__img,
.sbp-olay--1:not(.sbp-var--2):not(.sbp-var--3):not(.sbp-var--4):not(.sbp-var--5):not(.sbp-var--6):not(.sbp-var--7) .sbp-sec--products .sbp-shop__rail .sbp-shopcard__img { min-height: 240px; }
}
/* ── CHL:BP_GLYPH_DIVIDERS v1 ── spaced separators in title-class text
(" | ", " . ", " ~ ", " - ") render as designed dividers. The hairline
bar takes currentColor so it sits correctly on any tone/palette. */
/* The bar is a real text glyph (thin-weight pipe), NOT an inline-block box —
boxes invite line breaks beside them even across ; text obeys it. */
.sbp-gsep--bar { font-weight: 200; opacity: .34; padding: 0 .12em; font-size: .92em; }
.sbp-gsep--dot { opacity: .45; margin: 0 .18em; font-weight: 400; }
.sbp-gsep--tld { opacity: .5; margin: 0 .16em; font-weight: 400; font-size: .85em; vertical-align: .05em; }
.sbp-gsep--dash { opacity: .4; margin: 0 .18em; font-weight: 300; }
/* CHL:BP_EYEBROW_UNITY v2 — menu group names are signature labels */
.sbp-page .sbp-menusec__groupname { color: var(--sbp-indicator, var(--sbp-org-display)); }
/* ═══ CHL:BP_PHOTO_MOTION v1 — operator spec 2026-08-11 ═══════════════════
Photo wall & Gallery, public composition by count + variant:
1 image → single stage. V1 default: ≤6 → mosaic/grid at rest; >6 → an
animated filmstrip (6-ish in view, marquee, pauses on hover). V2 → all
visible. V3 → snap slider (arrows injected by starter-sections.js). */
.sbp-photosolo { margin: clamp(16px, 2.4vw, 24px) auto 0; max-width: 860px; border-radius: var(--sbp-r-lg); overflow: hidden; background: var(--sbp-field-b); }
.sbp-photosolo img { width: 100%; height: auto; display: block; }
.sbp-photosolo .sbp-galitem__cap { position: static; padding: 10px 14px; background: var(--sbp-card); color: var(--sbp-mut); white-space: normal; }
.sbp-filmstrip { overflow: hidden; margin-top: clamp(16px, 2.4vw, 24px); border-radius: var(--sbp-r-lg); }
.sbp-filmstrip__track { display: flex; gap: 8px; width: max-content; animation: sbp-strip 42s linear infinite; }
.sbp-filmstrip:hover .sbp-filmstrip__track { animation-play-state: paused; }
.sbp-filmstrip__track figure { position: relative; margin: 0; flex: 0 0 auto; width: clamp(180px, 16vw, 250px); height: clamp(150px, 15vw, 210px); border-radius: 12px; overflow: hidden; background: var(--sbp-field-b); }
.sbp-filmstrip__track img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes sbp-strip { to { transform: translateX(calc(-50% - 4px)); } }
@media (prefers-reduced-motion: reduce) { .sbp-filmstrip__track { animation: none; } }
.sbp-snapwrap { position: relative; margin-top: clamp(16px, 2.4vw, 24px); }
.sbp-snapslider { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--sbp-r-lg); }
.sbp-snapslider::-webkit-scrollbar { display: none; }
.sbp-snapslide { flex: 0 0 min(72%, 640px); scroll-snap-align: center; position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: var(--sbp-field-b); }
.sbp-snapslide img { width: 100%; height: clamp(240px, 30vw, 420px); object-fit: cover; display: block; }
.sbp-snaparrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .94); color: var(--sbp-indicator, var(--sbp-org-display)); font-size: 17px; cursor: pointer; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .4); display: inline-flex; align-items: center; justify-content: center; }
.sbp-snaparrow:hover { background: #fff; }
.sbp-snaparrow--prev { left: 10px; }
.sbp-snaparrow--next { right: 10px; }
/* CHL:BP_EMPTY_MEDIA_COLLAPSE v1 — public prose-only About reads at measure */
.sbp-about--prose .sbp-about__body { max-width: 72ch; }
/* ═══ CHL:BP_PREMIUM_VARIANTS v1 — operator video rejection pass ══════════
Law: CONTENT HUGS DATA. A record without an image never reserves a
faux-photo slab; empty media collapses (V2) or compacts to a slim
branded band (V1/V3). Families keep shared primitives but carry light
true-to-data identity. */
/* no-image media: compact branded band, never a giant empty region */
.sbp-page .sbp-shopcard__zone--media.is-empty { aspect-ratio: auto; min-height: 96px; max-height: 118px; }
.sbp-page .sbp-shopcard__zone--media.is-empty .sbp-shopcard__ph { font-size: 22px; gap: 5px; }
.sbp-var--3 .sbp-shop__rail .sbp-shopcard:first-child .sbp-shopcard__img.is-empty { min-height: 140px; max-height: 160px; }
/* V2 rows: an image-less row is a TEXT row — media column collapses */
.sbp-var--2 .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) { grid-template-columns: minmax(0, 1fr); }
.sbp-var--2 .sbp-shop__rail .sbp-shopcard > .sbp-shopcard__zone--media.is-empty { display: none; }
.sbp-var--2 .sbp-shop__rail .sbp-shopcard__body { padding: 16px 20px 15px; }
/* MEMBERSHIPS — price-led plans; artwork optional, never required */
#bp-subscriptions .sbp-shopcard__zone--media.is-empty { display: none; }
#bp-subscriptions .sbp-shopcard__body { gap: 8px; padding: 20px 22px 18px; }
#bp-subscriptions .sbp-shopcard__t { font-size: 1.14rem; }
#bp-subscriptions .sbp-shopcard__price {
position: static; align-self: flex-start; margin: 2px 0 2px; box-shadow: none;
background: var(--sbp-acc-soft); color: var(--sbp-indicator, var(--sbp-org-display));
font-size: 16.5px; padding: 6px 14px;
}
/* V3 = featured-plan stage (neutral first-plan emphasis — no fabricated
"featured" flag exists; composition only) */
#bp-subscriptions.sbp-var--3 .sbp-shopcard:first-child {
border-top: 3px solid var(--sbp-indicator, var(--sbp-org-display));
background: linear-gradient(180deg, var(--sbp-acc-soft), var(--sbp-card) 46%);
}
/* light family identity — truthful, data-free styling only */
#bp-publications .sbp-shopcard__t { font-family: Georgia, 'Times New Roman', serif; font-size: 1.1rem; }
#bp-events .sbp-shopcard__meta { color: var(--sbp-indicator, var(--sbp-org-display)); font-weight: 700; }
#bp-rentals .sbp-shopcard__price { background: var(--sbp-acc-soft); color: var(--sbp-acc-ink); box-shadow: none; }
/* MENU — three real experiences */
.sbp-menusec__list { gap: 14px; }
.sbp-menusec__desc { margin-top: 4px; }
.sbp-var--2 .sbp-menusec__group { background: linear-gradient(180deg, var(--sbp-field-b), var(--sbp-card) 55%); }
.sbp-var--2 .sbp-menusec__item + .sbp-menusec__item { border-top: 1px solid var(--sbp-line); padding-top: 12px; }
.sbp-var--2 .sbp-menusec__list { gap: 12px; }
.sbp-var--3 .sbp-menusec__name { font-size: 17px; }
.sbp-var--3 .sbp-menusec__desc { font-size: 13px; max-width: 46ch; }
.sbp-var--3 .sbp-menusec__price { display: block; margin-top: 3px; }
/* (Contact V3 centred header — folded into CHL:BP_CONTACT_COMPOSITION v1, end of sheet) */
/* CHL:BP_PREMIUM_VARIANTS v1.1 — OVERLAY IS A TEXT-ON-IMAGE MODE. An
image-less card cannot carry it: the scrim over an empty ivory band was
the operator's rejected dark slab. Empty-media overlay cards fall back
to the standard card anatomy (ink text, compact band, no scrim). */
.sbp-olay--1:not(.sbp-var--2) .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__img { min-height: 96px; }
.sbp-olay--1:not(.sbp-var--2) .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__img::after { content: none; }
.sbp-olay--1:not(.sbp-var--2) .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) > :not(.sbp-shopcard__img) { position: static; }
.sbp-olay--1:not(.sbp-var--2) .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) > :not(.sbp-shopcard__img) * { color: var(--sbp-ink); }
.sbp-olay--1:not(.sbp-var--2) .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__go { color: var(--sbp-indicator, var(--sbp-org-display)); text-decoration: none; }
.sbp-olay--1:not(.sbp-var--2) .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__price { color: var(--sbp-indicator, var(--sbp-org-display)); }
/* CHL:BP_PREMIUM_VARIANTS v1.2 — the media-size dial ladders declare
min-heights AFTER the is-empty compaction and were re-inflating empty
media to 240px+ on M/L sections (services/rentals mixed-media defect).
An EMPTY media zone is exempt from the dial: the dial sizes PHOTOS. */
.sbp-page .sbp-med--m .sbp-shopcard__zone--media.is-empty,
.sbp-page .sbp-med--l .sbp-shopcard__zone--media.is-empty,
.sbp-med--m .sbp-shop__rail .sbp-shopcard__img.is-empty,
.sbp-med--l .sbp-shop__rail .sbp-shopcard__img.is-empty {
min-height: 96px; max-height: 118px;
}
/* CHL:BP_PREMIUM_VARIANTS v1.2b — CSS law: min-height BEATS max-height, so
any composition rule declaring a min re-inflates empty media past the cap
(the V3 unpaired-last-card hero was the 240px culprit, not the dial).
Every known inflator gets an is-empty min override at matching-or-higher
specificity, declared last. */
.sbp-var--3 .sbp-shop__rail .sbp-shopcard:last-child:nth-child(even) .sbp-shopcard__img.is-empty,
.sbp-var--3 .sbp-cardgrid .sbp-shopcard:first-child .sbp-shopcard__img.is-empty,
.sbp-med--m .sbp-shop__rail .sbp-shopcard__img.is-empty,
.sbp-med--l .sbp-shop__rail .sbp-shopcard__img.is-empty,
.sbp-med--m.sbp-var--2 .sbp-shop__rail .sbp-shopcard__img.is-empty,
.sbp-page .sbp-shopcard__img.sbp-shopcard__zone--media.is-empty {
min-height: 96px; max-height: 118px;
}
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_CONTACT_COMPOSITION v1 (Wave A1) — the Contact family's designed
variant set, V1-V5, layout ONLY over the ONE shared markup (parity law:
the same classes recompose editor canvas, draft preview and public page).
V1 Balanced — the split band, now content-width-aware (geometry repair)
V2 Details — details-first editorial ledger; the form is a quiet card
V3 Statement — centred stage; the form is the principal card
V4 Map — the map is the field; the form floats over it
(map absent → designed twin-column sibling, no dead zone)
V5 Minimal — one narrow editorial column, underline fields
Tokens only (--sbp-*); no new colour enters the programme in this zone.
═══════════════════════════════════════════════════════════════════════════ */
/* ── V1 GEOMETRY REPAIR — the section, not the viewport, decides when the
split becomes cramped. The band and the form card are measured
containers: a narrow SECTION width stays a valid choice that stacks
early instead of squeezing paired inputs to ~130px. The 860px viewport
rules above remain as the no-container-query fallback. ── */
.sbp-contactsec .sbp-band { container: sbp-contact-band / inline-size; }
.sbp-contact__form { container: sbp-contact-form / inline-size; }
/* (the @container stack rules live at the END of this zone — cascade law:
they must out-order the equal-specificity variant track rules below) */
/* ── V2 DETAILS — the info column leads (wider track, ledger facts);
the form sits beside it as a quieter, self-heighted card. ── */
.sbp-var--2 .sbp-contact { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.sbp-var--2 .sbp-contact__facts { gap: 0; margin-top: 20px; }
.sbp-var--2 .sbp-fact { padding: 13px 2px; }
.sbp-var--2 .sbp-fact + .sbp-fact { border-top: 1px solid var(--sbp-line); }
.sbp-var--2 .sbp-contact__hours { padding-top: 14px; border-top: 1px solid var(--sbp-line); }
.sbp-var--2 .sbp-contact__form { align-self: start; }
.sbp-var--2 .sbp-contact__info .sbp-map { flex: 0 0 auto; aspect-ratio: 16 / 9; min-height: clamp(160px, 20vw, 240px); }
/* ── V3 STATEMENT — centred stage, the form as the principal card ── */
.sbp-var--3 .sbp-contact { display: flex; flex-direction: column; max-width: 860px; margin-inline: auto; }
.sbp-var--3 .sbp-contact__info { width: 100%; }
.sbp-var--3 .sbp-contact__info > .sbp-kicker,
.sbp-var--3 .sbp-contact__info > .sbp-h2,
.sbp-var--3 .sbp-contact__info > .sbp-lead { text-align: center; }
.sbp-var--3 .sbp-contact__info > .sbp-kicker { justify-content: center; }
.sbp-var--3 .sbp-contact__info > .sbp-h2 { font-size: calc(clamp(23px, 2.5vw, 33px) * var(--sbp-type-scale, 1) * 1.12); }
.sbp-var--3 .sbp-contact__info > .sbp-h2::after {
content: ""; display: block; width: 54px; height: 3px; border-radius: 3px;
background: var(--sbp-indicator, var(--sbp-org-display)); margin: 14px auto 0;
}
.sbp-var--3 .sbp-contact__info > .sbp-lead { margin-inline: auto; max-width: 62ch; }
.sbp-var--3 .sbp-contact__facts { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.sbp-var--3 .sbp-contact__form { width: 100%; background: var(--sbp-card); border: 1px solid var(--sbp-line);
border-radius: var(--sbp-r-lg); padding: clamp(20px, 3vw, 34px);
box-shadow: 0 18px 44px -30px rgba(var(--sbp-shadow-rgb, 32, 26, 20), .35); }
.sbp-var--3 .sbp-contact .sbp-map { max-height: 220px; }
/* V3 keeps its compact map — the equal-height elasticity is a side-by-side law */
.sbp-var--3 .sbp-contact__info .sbp-map { flex: 0 0 auto; min-height: 0; aspect-ratio: 16 / 9; }
/* ── V4 MAP — the map card becomes the section's field; the form floats
over its edge as a raised card with the signature top rule. ── */
.sbp-var--4 .sbp-contact:has(.sbp-map) { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 0; }
.sbp-var--4 .sbp-contact:has(.sbp-map) .sbp-contact__info { justify-content: center; }
.sbp-var--4 .sbp-contact:has(.sbp-map) .sbp-contact__info .sbp-map {
flex: 0 0 auto; aspect-ratio: auto; min-height: clamp(320px, 34cqw, 520px);
}
.sbp-var--4 .sbp-contact:has(.sbp-map) .sbp-contact__form {
position: relative; z-index: 1;
margin-left: calc(-1 * clamp(28px, 5cqw, 72px));
border-top: 3px solid var(--sbp-indicator, var(--sbp-org-display));
box-shadow: 0 18px 44px -30px rgba(var(--sbp-shadow-rgb, 32, 26, 20), .35);
}
/* NO-MAP sibling — a designed state, not a reserved hole: balanced twin
columns, the form carrying the signature rule. Never fabricate location. */
.sbp-var--4 .sbp-contact:not(:has(.sbp-map)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sbp-var--4 .sbp-contact:not(:has(.sbp-map)) .sbp-contact__form { border-top: 3px solid var(--sbp-indicator, var(--sbp-org-display)); }
/* ── V5 MINIMAL — one narrow editorial column; chrome retires, the words
and the underline fields carry it. Focus rings stay platform law. ── */
.sbp-var--5 .sbp-contact { display: flex; flex-direction: column; max-width: 640px; margin-inline: auto; gap: 8px; }
.sbp-var--5 .sbp-contact__info > .sbp-kicker,
.sbp-var--5 .sbp-contact__info > .sbp-h2,
.sbp-var--5 .sbp-contact__info > .sbp-lead { text-align: center; }
.sbp-var--5 .sbp-contact__info > .sbp-kicker { justify-content: center; }
.sbp-var--5 .sbp-contact__info > .sbp-lead { margin-inline: auto; max-width: 58ch; }
.sbp-var--5 .sbp-contact__info .sbp-map { flex: 0 0 auto; aspect-ratio: 21 / 9; min-height: 0; max-height: 200px; }
.sbp-var--5 .sbp-contact__form { background: transparent; border: 0; box-shadow: none; padding: 0; margin-top: 10px; }
.sbp-var--5 .sbp-contact__formtitle { text-align: center; }
.sbp-var--5 .sbp-input, .sbp-var--5 .sbp-textarea {
border-width: 0 0 1.5px; border-radius: 0; padding-inline: 2px; background: transparent;
}
.sbp-var--5 .sbp-submit { width: fit-content; min-width: 200px; padding-inline: 30px; margin-inline: auto; }
/* ── viewport fallback law — the higher-specificity variant tracks above
must still stack on small screens without container-query support ── */
@media (max-width: 860px) {
.sbp-var--2 .sbp-contact,
.sbp-var--4 .sbp-contact:has(.sbp-map),
.sbp-var--4 .sbp-contact:not(:has(.sbp-map)) { grid-template-columns: minmax(0, 1fr); }
.sbp-var--4 .sbp-contact:has(.sbp-map) .sbp-contact__form {
margin-left: 0; margin-top: calc(-1 * clamp(18px, 4vw, 40px));
margin-inline: clamp(10px, 3vw, 24px);
}
.sbp-var--2 .sbp-contact__info .sbp-map,
.sbp-var--4 .sbp-contact:has(.sbp-map) .sbp-contact__info .sbp-map {
aspect-ratio: 16 / 9; min-height: clamp(180px, 40vw, 260px);
}
}
/* ── SECTION-WIDTH STACK LAW — declared LAST in the zone deliberately: these
carry the same specificity as the variant track rules above, so source
order is what lets the narrow-section stack win the tie (the A1
acceptance caught V4 narrow rendering 404/269 columns when this block
sat before the variant zones). The section, not the viewport, decides. ── */
@container sbp-contact-band (max-width: 720px) {
.sbp-contact,
.sbp-var--2 .sbp-contact,
.sbp-var--4 .sbp-contact:has(.sbp-map),
.sbp-var--4 .sbp-contact:not(:has(.sbp-map)) { grid-template-columns: minmax(0, 1fr); }
/* stacked: the map returns to a tidy 16/9 card (equal-height elasticity
is a side-by-side law) and the floating form re-docks */
.sbp-contact__info .sbp-map,
.sbp-var--2 .sbp-contact__info .sbp-map,
.sbp-var--4 .sbp-contact:has(.sbp-map) .sbp-contact__info .sbp-map {
flex: 0 0 auto; aspect-ratio: 16 / 9; min-height: 0;
}
.sbp-var--4 .sbp-contact:has(.sbp-map) .sbp-contact__form {
margin-left: 0; margin-top: calc(-1 * clamp(18px, 4cqw, 40px));
margin-inline: clamp(10px, 3cqw, 24px);
}
}
@container sbp-contact-form (max-width: 380px) {
/* paired fields go full-width BEFORE they go cramped — whatever made the
form column narrow (viewport, narrow section width, a variant's track) */
.sbp-field--row { grid-template-columns: minmax(0, 1fr); }
}
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_GALLERY_ADAPTIVE v1 (Wave A2) — Gallery V4 "Adaptive".
V1-V3 are untouched shipped designs; V4 lets the image COUNT compose the
stage. One scroll-snap rail serves every count — CSS sizes the slides per
data-n, and starter-sections.js adds prev/next ONLY when the rail truly
overflows (so 1 and 3 images never grow controls on desktop). No timers,
no autoplay, ever. Tokens only.
═══════════════════════════════════════════════════════════════════════════ */
.sbp-adapt { position: relative; }
.sbp-adapt__rail {
display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
border-radius: var(--sbp-r); outline-offset: 3px;
}
.sbp-adapt__rail::-webkit-scrollbar { display: none; }
.sbp-adapt__slide {
flex: 0 0 auto; margin: 0; position: relative; scroll-snap-align: start;
border-radius: var(--sbp-r); overflow: hidden; background: var(--sbp-field-a);
}
.sbp-adapt__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* count → slide sizing (desktop): 2 = one-at-a-time · 3 = static three-up ·
4-5 = three-up with the extras rotating into the slots · 6+ = filmstrip */
.sbp-adapt[data-n="2"] .sbp-adapt__slide { flex-basis: 100%; aspect-ratio: 16 / 9; }
.sbp-adapt[data-n="3"] .sbp-adapt__slide,
.sbp-adapt[data-n="4"] .sbp-adapt__slide,
.sbp-adapt[data-n="5"] .sbp-adapt__slide { flex-basis: calc((100% - 28px) / 3); aspect-ratio: 4 / 5; }
.sbp-adapt:not([data-n="2"]):not([data-n="3"]):not([data-n="4"]):not([data-n="5"]) .sbp-adapt__slide {
/* 6+ — the richer rail: later images continue naturally in the same band */
flex-basis: clamp(220px, 30%, 380px); aspect-ratio: 4 / 5;
}
/* controls — created by JS only when navigable; 44px targets; theme action roles */
.sbp-adapt__btn {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--sbp-line);
background: var(--sbp-card); color: var(--sbp-acc-ink); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
box-shadow: var(--sbp-shadow); transition: background-color .15s ease, opacity .15s ease;
}
.sbp-adapt__btn:hover { background: var(--sbp-acc-soft); }
.sbp-adapt__btn:disabled { opacity: .35; cursor: default; }
.sbp-adapt__btn--prev { left: 10px; }
.sbp-adapt__btn--next { right: 10px; }
.sbp-adapt__rail:focus-visible { outline: 2px solid var(--sbp-focus, var(--sbp-acc)); }
/* mobile law — no three tiny images on a phone: navigable counts become
one-up with an intentional next-image peek; 2 stays one-at-a-time. */
@media (max-width: 760px) {
.sbp-adapt[data-n="3"] .sbp-adapt__slide,
.sbp-adapt[data-n="4"] .sbp-adapt__slide,
.sbp-adapt[data-n="5"] .sbp-adapt__slide,
.sbp-adapt:not([data-n="2"]):not([data-n="3"]):not([data-n="4"]):not([data-n="5"]) .sbp-adapt__slide {
flex-basis: 86%; aspect-ratio: 4 / 3;
}
.sbp-adapt[data-n="2"] .sbp-adapt__slide { aspect-ratio: 4 / 3; }
.sbp-adapt__btn { top: auto; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.sbp-adapt__rail { scroll-behavior: auto; }
.sbp-adapt__btn { transition: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_PROGRAMMES_FAMILY v1 (Wave A2) — seven designed compositions over
ONE shared anatomy (.sbp-pg__item = numeral · media-when-real · body).
The wrapper's .sbp-var--N recomposes; absent variant = V1 Editorial.
MEDIA CONTRACT: --nomedia items emitted WITHOUT a media element — every
variant declares a designed absent state; none reserves an empty stage.
CTA LAW: compact arrow action (.sbp-pg__act), never the old giant button.
Tokens only; no invented dates — the schedule board is a decorative motif.
═══════════════════════════════════════════════════════════════════════════ */
.sbp-pg { display: flex; flex-direction: column; gap: 18px; margin-top: 6px; }
.sbp-pg__item { position: relative; min-width: 0; }
.sbp-pg__num { display: none; font-weight: 800; color: var(--sbp-indicator, var(--sbp-org-display)); }
.sbp-pg__media { border-radius: var(--sbp-r); overflow: hidden; background: var(--sbp-field-a); }
.sbp-pg__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sbp-pg__label {
margin: 0 0 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em;
text-transform: uppercase; color: var(--sbp-acc-ink);
}
.sbp-pg__title { margin: 0 0 8px; }
.sbp-pg__prose { max-width: 66ch; }
.sbp-pg__acts { margin: 12px 0 0; }
.sbp-pg__act {
display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
font-weight: 700; font-size: 14px; color: var(--sbp-acc-ink); text-decoration: none;
border-bottom: 2px solid color-mix(in srgb, var(--sbp-acc) 45%, transparent);
transition: gap .15s ease, border-color .15s ease;
}
.sbp-pg__act:hover { gap: 11px; border-bottom-color: var(--sbp-acc); }
.sbp-pg__act--nolink { border-bottom: 0; color: var(--sbp-mut); }
.sbp-pg__item .sbp-checks--compact { margin-top: 10px; }
/* ── V1 EDITORIAL (default) — tight authored blocks; content hugs content.
Media, when real, is a modest inset beside the words. ── */
.sbp-pg__item {
display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
background: var(--sbp-card); border: 1px solid var(--sbp-line);
border-radius: var(--sbp-r-lg); padding: clamp(14px, 2vw, 22px);
}
.sbp-pg__item:not(.sbp-pg__item--nomedia) { grid-template-columns: 200px minmax(0, 1fr); align-items: start; }
.sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__media { aspect-ratio: 4 / 3; }
/* nomedia = full-measure editorial block — no reserved column, no void */
/* ── V2 STORIES — alternating story spreads; generous media, mirrored rhythm.
Without media the story becomes a wide indented editorial passage. ── */
.sbp-var--2 .sbp-pg { gap: clamp(26px, 4vw, 44px); }
.sbp-var--2 .sbp-pg__item { background: transparent; border: 0; padding: 0; gap: clamp(18px, 3vw, 34px); }
.sbp-var--2 .sbp-pg__item:not(.sbp-pg__item--nomedia) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
.sbp-var--2 .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__media { aspect-ratio: 3 / 2; }
.sbp-var--2 .sbp-pg__item:nth-child(even):not(.sbp-pg__item--nomedia) .sbp-pg__media { order: 2; }
.sbp-var--2 .sbp-pg__item--nomedia .sbp-pg__body {
border-left: 3px solid var(--sbp-indicator, var(--sbp-org-display));
padding-left: clamp(16px, 2.5vw, 28px);
}
.sbp-var--2 .sbp-pg__item + .sbp-pg__item { border-top: 1px solid var(--sbp-line); padding-top: clamp(22px, 3.5vw, 40px); }
/* ── V3 SPOTLIGHT — one principal programme; the rest form a quiet queue. ── */
.sbp-var--3 .sbp-pg { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 34px); align-items: start; }
.sbp-var--3 .sbp-pg__item:first-child {
grid-row: 1 / span 9; display: flex; flex-direction: column;
background: var(--sbp-card); border: 1px solid var(--sbp-line);
border-radius: var(--sbp-r-lg); padding: 0; overflow: hidden;
}
.sbp-var--3 .sbp-pg__item:first-child .sbp-pg__media { border-radius: 0; aspect-ratio: 16 / 9; order: -1; }
.sbp-var--3 .sbp-pg__item:first-child .sbp-pg__body { padding: clamp(16px, 2.5vw, 26px); }
.sbp-var--3 .sbp-pg__item:first-child .sbp-pg__title { font-size: calc(clamp(19px, 2vw, 25px) * var(--sbp-type-scale, 1)); }
.sbp-var--3 .sbp-pg__item:first-child.sbp-pg__item--nomedia { border-top: 3px solid var(--sbp-indicator, var(--sbp-org-display)); }
.sbp-var--3 .sbp-pg__item:not(:first-child) {
grid-column: 2; display: grid; grid-template-columns: 84px minmax(0, 1fr);
gap: 12px; padding: 12px; border-radius: var(--sbp-r);
}
.sbp-var--3 .sbp-pg__item:not(:first-child) .sbp-pg__media { aspect-ratio: 1 / 1; }
.sbp-var--3 .sbp-pg__item:not(:first-child).sbp-pg__item--nomedia { grid-template-columns: minmax(0, 1fr); }
.sbp-var--3 .sbp-pg__item:not(:first-child) .sbp-pg__prose,
.sbp-var--3 .sbp-pg__item:not(:first-child) .sbp-checks--compact { display: none; }
.sbp-var--3 .sbp-pg__item:not(:first-child) .sbp-pg__title { font-size: 15.5px; margin-bottom: 2px; }
.sbp-var--3 .sbp-pg__item:not(:first-child) .sbp-pg__acts { margin-top: 4px; }
/* ── V4 SCHEDULE — a session board: slot cell + programme row. The cell is a
DECORATIVE calendar motif (numeral + label chip); real dates only ever
come from authored content — nothing here invents one. ── */
.sbp-var--4 .sbp-pg { gap: 0; border: 1px solid var(--sbp-line); border-radius: var(--sbp-r-lg); overflow: hidden; }
.sbp-var--4 .sbp-pg__item { border: 0; border-radius: 0; background: var(--sbp-card); grid-template-columns: 118px minmax(0, 1fr); gap: clamp(14px, 2vw, 24px); align-items: center; }
.sbp-var--4 .sbp-pg__item + .sbp-pg__item { border-top: 1px solid var(--sbp-line); }
.sbp-var--4 .sbp-pg__item:nth-child(odd) { background: color-mix(in srgb, var(--sbp-field-a) 55%, var(--sbp-card)); }
.sbp-var--4 .sbp-pg__num {
display: flex; align-items: center; justify-content: center;
width: 118px; align-self: stretch; font-size: 24px;
border-right: 1px dashed var(--sbp-line);
grid-row: 1 / span 2; grid-column: 1;
}
.sbp-var--4 .sbp-pg__item .sbp-pg__media { display: none; } /* the board is typographic */
.sbp-var--4 .sbp-pg__body { grid-column: 2; padding-right: clamp(12px, 2vw, 20px); }
.sbp-var--4 .sbp-pg__label {
display: inline-block; padding: 3px 10px; border-radius: 999px;
background: var(--sbp-acc-soft); color: var(--sbp-acc-ink); letter-spacing: .08em;
}
.sbp-var--4 .sbp-pg__prose { font-size: 14px; }
/* ── V5 INDEX — the numeral is the architecture: 01/02/03 lead strong
typographic rows with hairline separations and inline actions. ── */
.sbp-var--5 .sbp-pg { gap: 0; }
.sbp-var--5 .sbp-pg__item { background: transparent; border: 0; border-radius: 0; padding: clamp(20px, 3vw, 34px) 4px; grid-template-columns: minmax(84px, 120px) minmax(0, 1fr); align-items: start; }
.sbp-var--5 .sbp-pg__item + .sbp-pg__item { border-top: 1px solid var(--sbp-line); }
.sbp-var--5 .sbp-pg__num {
display: block; grid-row: 1; font-size: clamp(40px, 6vw, 64px); line-height: .9;
letter-spacing: -0.03em; opacity: .9;
}
.sbp-var--5 .sbp-pg__item .sbp-pg__media { display: none; }
.sbp-var--5 .sbp-pg__title { font-size: calc(clamp(20px, 2.2vw, 27px) * var(--sbp-type-scale, 1)); }
.sbp-var--5 .sbp-pg__item--nomedia, .sbp-var--5 .sbp-pg__item { grid-template-columns: minmax(84px, 120px) minmax(0, 1fr); }
/* ── V6 IMMERSIVE — media-led stages when media is REAL: the photograph is
the surface and the words sit on its scrim. The ABSENT sibling is a
deliberate tonal type-stage (soft accent field + watermark numeral) —
premium without a photograph, never a dimmed void. ── */
.sbp-var--6 .sbp-pg { gap: clamp(18px, 2.5vw, 28px); }
.sbp-var--6 .sbp-pg__item { display: block; padding: 0; border: 0; overflow: hidden; border-radius: var(--sbp-r-lg); min-height: 300px; position: relative; background: var(--sbp-card); }
.sbp-var--6 .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__media { position: absolute; inset: 0; border-radius: 0; }
.sbp-var--6 .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__media::after {
/* the scrim carries a BASE tint at the top too — A2 acceptance caught
white type under-contrasting on a near-cream fixture photograph when
the gradient started from transparent */
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg,
color-mix(in srgb, var(--sbp-ink-base, var(--sbp-ink)) 34%, transparent) 0%,
color-mix(in srgb, var(--sbp-ink-base, var(--sbp-ink)) 82%, transparent) 100%);
}
.sbp-var--6 .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__body {
position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end;
min-height: 300px; padding: clamp(18px, 3vw, 30px);
}
.sbp-var--6 .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__title,
.sbp-var--6 .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__prose,
.sbp-var--6 .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__label { color: var(--sbp-card); }
.sbp-var--6 .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__act { color: var(--sbp-card); border-bottom-color: color-mix(in srgb, var(--sbp-card) 55%, transparent); }
.sbp-var--6 .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__prose { max-width: 56ch; }
.sbp-var--6 .sbp-pg__item--nomedia {
background: var(--sbp-acc-soft); min-height: 0; padding: clamp(22px, 3.5vw, 40px);
border-top: 3px solid var(--sbp-indicator, var(--sbp-org-display));
}
.sbp-var--6 .sbp-pg__item--nomedia .sbp-pg__num {
display: block; position: absolute; right: clamp(14px, 3vw, 34px); top: 6px;
font-size: clamp(64px, 10vw, 120px); line-height: 1; opacity: .14; pointer-events: none;
}
.sbp-var--6 .sbp-pg__item--nomedia .sbp-pg__title { font-size: calc(clamp(21px, 2.4vw, 29px) * var(--sbp-type-scale, 1)); }
/* ── V7 JOURNEY — programme stages on a connected rail; each numeral is a
node. Desktop reads left→right; mobile transforms to a vertical
timeline with the same connector logic. ── */
.sbp-var--7 .sbp-pg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: clamp(14px, 2vw, 24px); overflow-x: auto; padding: 26px 2px 6px; scrollbar-width: thin; }
.sbp-var--7 .sbp-pg__item { display: block; background: var(--sbp-card); border: 1px solid var(--sbp-line); border-radius: var(--sbp-r-lg); padding: 16px; position: relative; }
.sbp-var--7 .sbp-pg__num {
display: inline-flex; align-items: center; justify-content: center;
position: absolute; top: -22px; left: 14px; width: 44px; height: 44px;
border-radius: 999px; background: var(--sbp-card); font-size: 15px;
border: 2px solid var(--sbp-indicator, var(--sbp-org-display));
}
.sbp-var--7 .sbp-pg__item::before { /* the connector between stages */
content: ""; position: absolute; top: 0; left: 64px; right: -18px; height: 2px;
background: color-mix(in srgb, var(--sbp-indicator, var(--sbp-org-display)) 40%, transparent);
}
.sbp-var--7 .sbp-pg__item:last-child::before { content: none; }
.sbp-var--7 .sbp-pg__media { aspect-ratio: 16 / 10; margin: 8px 0 12px; }
.sbp-var--7 .sbp-pg__item--nomedia .sbp-pg__label { margin-top: 10px; }
.sbp-var--7 .sbp-pg__prose { font-size: 14px; }
.sbp-var--7 .sbp-pg__item .sbp-checks--compact { display: none; }
/* ── family mobile law ── */
@media (max-width: 760px) {
.sbp-pg__item:not(.sbp-pg__item--nomedia) { grid-template-columns: minmax(0, 1fr); }
.sbp-var--2 .sbp-pg__item:not(.sbp-pg__item--nomedia) { grid-template-columns: minmax(0, 1fr); }
.sbp-var--2 .sbp-pg__item:nth-child(even):not(.sbp-pg__item--nomedia) .sbp-pg__media { order: 0; }
.sbp-var--3 .sbp-pg { grid-template-columns: minmax(0, 1fr); }
.sbp-var--3 .sbp-pg__item:first-child { grid-row: auto; }
.sbp-var--3 .sbp-pg__item:not(:first-child) { grid-column: auto; }
.sbp-var--4 .sbp-pg__item { grid-template-columns: 72px minmax(0, 1fr); }
.sbp-var--4 .sbp-pg__num { width: 72px; font-size: 18px; }
.sbp-var--5 .sbp-pg__item { grid-template-columns: minmax(56px, 72px) minmax(0, 1fr); }
.sbp-var--5 .sbp-pg__num { font-size: 34px; }
.sbp-var--7 .sbp-pg { grid-auto-flow: row; grid-auto-columns: unset; overflow: visible; padding-top: 6px; padding-left: 26px; }
.sbp-var--7 .sbp-pg__num { top: 14px; left: -22px; }
.sbp-var--7 .sbp-pg__item::before { top: 44px; bottom: -18px; left: 0; right: auto; width: 2px; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
.sbp-pg__act { transition: none; }
}
/* ═══ CHL:BP_MEDIA_SCALE v3 — actual public composition targets ════════════
S is the existing classless default. M/L visibly enlarge media while
preserving variant identity. Programmes V4/V5 intentionally have no photo
and the UI authority hides the dial there. */
.sbp-med--m .sbp-photosolo { max-width: 980px; }
.sbp-med--l .sbp-photosolo { max-width: 1120px; }
.sbp-med--m .sbp-galgrid { grid-auto-rows: clamp(145px, 15.5vw, 220px); }
.sbp-med--l .sbp-galgrid { grid-auto-rows: clamp(180px, 19vw, 280px); }
.sbp-med--m .sbp-filmstrip__track figure { width: clamp(220px, 20vw, 310px); height: clamp(185px, 18vw, 255px); }
.sbp-med--l .sbp-filmstrip__track figure { width: clamp(270px, 25vw, 380px); height: clamp(225px, 23vw, 320px); }
.sbp-med--m .sbp-snapslide { flex-basis: min(82%, 760px); }
.sbp-med--m .sbp-snapslide img { height: clamp(280px, 35vw, 500px); }
.sbp-med--l .sbp-snapslide { flex-basis: min(92%, 900px); }
.sbp-med--l .sbp-snapslide img { height: clamp(330px, 40vw, 580px); }
.sbp-med--m .sbp-mosaic { grid-auto-rows: clamp(112px, 12vw, 170px); }
.sbp-med--l .sbp-mosaic { grid-auto-rows: clamp(140px, 15vw, 215px); }
/* Gallery V4 Adaptive: cardinality mode is preserved. */
.sbp-med--m .sbp-adapt[data-n="2"] .sbp-adapt__slide { aspect-ratio: 3 / 2; }
.sbp-med--l .sbp-adapt[data-n="2"] .sbp-adapt__slide { aspect-ratio: 4 / 3; }
.sbp-med--m .sbp-adapt[data-n="3"] .sbp-adapt__slide,
.sbp-med--m .sbp-adapt[data-n="4"] .sbp-adapt__slide,
.sbp-med--m .sbp-adapt[data-n="5"] .sbp-adapt__slide { aspect-ratio: 3 / 4; }
.sbp-med--l .sbp-adapt[data-n="3"] .sbp-adapt__slide,
.sbp-med--l .sbp-adapt[data-n="4"] .sbp-adapt__slide,
.sbp-med--l .sbp-adapt[data-n="5"] .sbp-adapt__slide { aspect-ratio: 2 / 3; }
.sbp-med--m .sbp-adapt:not([data-n="2"]):not([data-n="3"]):not([data-n="4"]):not([data-n="5"]) .sbp-adapt__slide {
flex-basis: clamp(250px, 34%, 430px);
}
.sbp-med--l .sbp-adapt:not([data-n="2"]):not([data-n="3"]):not([data-n="4"]):not([data-n="5"]) .sbp-adapt__slide {
flex-basis: clamp(290px, 40%, 500px); aspect-ratio: 3 / 4;
}
/* Programmes V1 Editorial. */
.sbp-med--m:not(.sbp-var--2):not(.sbp-var--3):not(.sbp-var--4):not(.sbp-var--5):not(.sbp-var--6):not(.sbp-var--7)
.sbp-pg__item:not(.sbp-pg__item--nomedia) { grid-template-columns: 260px minmax(0, 1fr); }
.sbp-med--l:not(.sbp-var--2):not(.sbp-var--3):not(.sbp-var--4):not(.sbp-var--5):not(.sbp-var--6):not(.sbp-var--7)
.sbp-pg__item:not(.sbp-pg__item--nomedia) { grid-template-columns: 340px minmax(0, 1fr); }
/* Programmes V2 Stories. */
.sbp-med--m.sbp-var--2 .sbp-pg__item:not(.sbp-pg__item--nomedia) {
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}
.sbp-med--l.sbp-var--2 .sbp-pg__item:not(.sbp-pg__item--nomedia) {
grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
}
/* Programmes V3 Spotlight. */
.sbp-med--m.sbp-var--3 .sbp-pg__item:first-child .sbp-pg__media { aspect-ratio: 3 / 2; }
.sbp-med--l.sbp-var--3 .sbp-pg__item:first-child .sbp-pg__media { aspect-ratio: 4 / 3; }
.sbp-med--m.sbp-var--3 .sbp-pg__item:not(:first-child):not(.sbp-pg__item--nomedia) {
grid-template-columns: 104px minmax(0, 1fr);
}
.sbp-med--l.sbp-var--3 .sbp-pg__item:not(:first-child):not(.sbp-pg__item--nomedia) {
grid-template-columns: 124px minmax(0, 1fr);
}
/* Programmes V6 Immersive. */
.sbp-med--m.sbp-var--6 .sbp-pg__item:not(.sbp-pg__item--nomedia),
.sbp-med--m.sbp-var--6 .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__body { min-height: 390px; }
.sbp-med--l.sbp-var--6 .sbp-pg__item:not(.sbp-pg__item--nomedia),
.sbp-med--l.sbp-var--6 .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__body { min-height: 480px; }
/* Programmes V7 Journey. */
.sbp-med--m.sbp-var--7 .sbp-pg { grid-auto-columns: minmax(285px, 1fr); }
.sbp-med--l.sbp-var--7 .sbp-pg { grid-auto-columns: minmax(350px, 1fr); }
.sbp-med--m.sbp-var--7 .sbp-pg__media { aspect-ratio: 3 / 2; }
.sbp-med--l.sbp-var--7 .sbp-pg__media { aspect-ratio: 4 / 3; }
@media (max-width: 760px) {
.sbp-med--m .sbp-adapt[data-n="3"] .sbp-adapt__slide,
.sbp-med--m .sbp-adapt[data-n="4"] .sbp-adapt__slide,
.sbp-med--m .sbp-adapt[data-n="5"] .sbp-adapt__slide,
.sbp-med--m .sbp-adapt:not([data-n="2"]):not([data-n="3"]):not([data-n="4"]):not([data-n="5"]) .sbp-adapt__slide {
flex-basis: 90%; aspect-ratio: 6 / 5;
}
.sbp-med--l .sbp-adapt[data-n="3"] .sbp-adapt__slide,
.sbp-med--l .sbp-adapt[data-n="4"] .sbp-adapt__slide,
.sbp-med--l .sbp-adapt[data-n="5"] .sbp-adapt__slide,
.sbp-med--l .sbp-adapt:not([data-n="2"]):not([data-n="3"]):not([data-n="4"]):not([data-n="5"]) .sbp-adapt__slide {
flex-basis: 94%; aspect-ratio: 1 / 1;
}
.sbp-med--m .sbp-adapt[data-n="2"] .sbp-adapt__slide { aspect-ratio: 6 / 5; }
.sbp-med--l .sbp-adapt[data-n="2"] .sbp-adapt__slide { aspect-ratio: 1 / 1; }
.sbp-med--m .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__media { min-height: 230px; }
.sbp-med--l .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__media { min-height: 300px; }
.sbp-med--m.sbp-var--6 .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__media,
.sbp-med--l.sbp-var--6 .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__media { min-height: 100%; }
}
/* ═══ CHL:BP_MEDIA_SCALE_RENDER_CLOSURE v1 ═════════════════════════════════
V6 clears the inherited V1 4:3 ratio so stage depth owns size. At mobile
width, track-width ladders become progressively deeper crops so S/M/L never
collapse into aliases. */
.sbp-var--6 .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__media { aspect-ratio: auto; }
@media (max-width: 760px) {
.sbp-med--m .sbp-shop__rail .sbp-shopcard__img { aspect-ratio: 6 / 5; }
.sbp-med--l .sbp-shop__rail .sbp-shopcard__img { aspect-ratio: 1 / 1; }
.sbp-med--m .sbp-imgled__media { aspect-ratio: 6 / 5; max-height: none; overflow: hidden; }
.sbp-med--l .sbp-imgled__media { aspect-ratio: 1 / 1; max-height: none; overflow: hidden; }
.sbp-med--m .sbp-imgled__media img,
.sbp-med--l .sbp-imgled__media img { width:100%; height:100%; max-height:none; object-fit:cover; }
.sbp-med--m .sbp-photosolo img { aspect-ratio: 6 / 5; object-fit: cover; }
.sbp-med--l .sbp-photosolo img { aspect-ratio: 1 / 1; object-fit: cover; }
.sbp-med--m .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__media { aspect-ratio: 6 / 5; }
.sbp-med--l .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__media { aspect-ratio: 1 / 1; }
.sbp-med--m.sbp-var--6 .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__media,
.sbp-med--l.sbp-var--6 .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__media { aspect-ratio: auto; }
}
/* ═══ CHL:BP_CONVERGENCE_BUILD1 v1 — CTA + CONTACT PURPOSE LAW ═══════════ */
/* Standalone CTA V1: centred card. */
.sbp-sec--cta .sbp-cta { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; padding:clamp(30px,5vw,58px); border:1px solid var(--sbp-line); border-radius:var(--sbp-r-lg); background:var(--sbp-card); box-shadow:var(--sbp-shadow); overflow:hidden; }
.sbp-sec--cta .sbp-cta__copy { max-width:720px; }
.sbp-sec--cta .sbp-cta__copy .sbp-kicker { justify-content:center; }
.sbp-sec--cta .sbp-cta__copy .sbp-lead { margin-inline:auto; }
.sbp-sec--cta .sbp-cta__actions .sbp-btns { justify-content:center; margin-top:0; }
/* V2: split action bar. */
.sbp-var--2 .sbp-sec--cta .sbp-cta { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr); align-items:center; text-align:left; gap:clamp(24px,5vw,64px); box-shadow:none; }
.sbp-var--2 .sbp-sec--cta .sbp-cta__copy .sbp-kicker { justify-content:flex-start; }
.sbp-var--2 .sbp-sec--cta .sbp-cta__actions { justify-self:end; }
.sbp-var--2 .sbp-sec--cta .sbp-btns { justify-content:flex-end; }
/* V3: full-width deep banner, knockout copy. */
.sbp-var--3 .sbp-sec--cta .sbp-sw { max-width:none; }
.sbp-var--3 .sbp-sec--cta .sbp-cta { border:0; border-radius:var(--sbp-r-lg); background:var(--sbp-ink); color:var(--sbp-card); box-shadow:none; }
.sbp-var--3 .sbp-sec--cta .sbp-kicker, .sbp-var--3 .sbp-sec--cta .sbp-h2, .sbp-var--3 .sbp-sec--cta .sbp-lead { color:var(--sbp-card); }
.sbp-var--3 .sbp-sec--cta .sbp-lead { opacity:.82; }
.sbp-var--3 .sbp-sec--cta .sbp-btn--ghost { color:var(--sbp-card); border-color:color-mix(in srgb,var(--sbp-card) 52%,transparent); }
/* V4: framed editorial destination. */
.sbp-var--4 .sbp-sec--cta .sbp-cta { align-items:flex-start; text-align:left; padding:clamp(34px,5vw,64px); border:2px solid var(--sbp-indicator,var(--sbp-org-display)); box-shadow:none; background:linear-gradient(135deg,var(--sbp-card),var(--sbp-field-a)); }
.sbp-var--4 .sbp-sec--cta .sbp-cta::before { content:""; position:absolute; width:90px; height:90px; border:1px solid color-mix(in srgb,var(--sbp-indicator,var(--sbp-org-display)) 35%,transparent); border-radius:50%; right:clamp(18px,4vw,48px); top:clamp(18px,4vw,42px); }
.sbp-var--4 .sbp-sec--cta .sbp-cta__copy { max-width:760px; position:relative; z-index:1; }
.sbp-var--4 .sbp-sec--cta .sbp-cta__copy .sbp-kicker { justify-content:flex-start; }
.sbp-var--4 .sbp-sec--cta .sbp-cta__copy .sbp-lead { margin-inline:0; }
.sbp-var--4 .sbp-sec--cta .sbp-cta__actions { position:relative; z-index:1; }
.sbp-var--4 .sbp-sec--cta .sbp-btns { justify-content:flex-start; }
/* CHL:BP_CONTACT_CORRECTIVE v1 — Contact now has five different jobs.
V1 restores the rich full-contact silhouette: business facts + six canonical
actions + hours + map beside the enquiry form. V2 is genuinely photo-led.
V3 keeps the calm statement/form stage. V4 makes the map the stage and docks
the form over its lower edge. V5 stays minimal. */
/* V1 FULL CONTACT — the recovered rich closer. */
.sbp-var--1 .sbp-contact { grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(26px,4vw,52px); align-items:start; }
.sbp-var--1 .sbp-contact__info .sbp-map { flex:0 0 auto; aspect-ratio:16/9; min-height:220px; }
.sbp-var--1 .sbp-contact__actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:18px; }
.sbp-var--1 .sbp-caction { justify-content:flex-start; min-height:46px; padding:11px 13px; border-radius:14px; background:var(--sbp-card); }
.sbp-caction--preview, .sbp-contact__previewlink { pointer-events:none; cursor:default; }
/* V2 IMAGE-LED — one dominant photo. No photo means no dead public slab; the
editor shows a compact, deliberate invitation instead. */
.sbp-var--2 .sbp-contact { grid-template-columns:minmax(0,1fr) minmax(460px,1fr); gap:clamp(24px,3vw,40px); align-items:center; }
.sbp-var--2 .sbp-contact__info .sbp-map--photo { flex:0 0 auto; aspect-ratio:4/3; min-height:clamp(320px,34cqw,520px); max-height:560px; margin-top:24px; }
.sbp-var--2 .sbp-contact__info .sbp-map--image-invite {
flex:0 0 auto; min-height:150px; aspect-ratio:16/6; margin-top:24px;
display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
background:linear-gradient(135deg,var(--sbp-field-a),var(--sbp-card));
border:1.5px dashed color-mix(in srgb,var(--sbp-acc) 38%,var(--sbp-line));
}
.sbp-var--2 .sbp-map--image-invite::before { content:none; }
.sbp-var--2 .sbp-map--image-invite .sbp-eimg { position:static; inset:auto; width:auto; height:auto; padding:0; background:transparent; border:0; }
.sbp-var--2 .sbp-map--image-invite .sbp-eimg__ph { min-height:0; padding:10px 16px; border-radius:999px; background:var(--sbp-card); border:1px solid var(--sbp-line); }
.sbp-imageinvite__note { color:var(--sbp-mut); font-size:12px; font-weight:650; }
/* CHL:BP_CONTACT_V2_FORM_WIDTH v2 — preserve the classic desktop contact-form
geometry: two paired field rows, then the full-width message and submit.
The form owns at least 460px whenever the image-led split is active. The
whole composition stacks before either side becomes cramped, while the form
itself keeps two columns until the actual viewport is phone-sized. */
.sbp-var--2 .sbp-contact__form .sbp-field--row {
grid-template-columns:repeat(2,minmax(0,1fr));
}
@container sbp-contact-band (max-width: 940px) {
.sbp-var--2 .sbp-contact { grid-template-columns:minmax(0,1fr); }
.sbp-var--2 .sbp-contact__info .sbp-map--photo { min-height:0; aspect-ratio:4/3; }
}
@media (max-width:640px) {
.sbp-var--2 .sbp-contact__form .sbp-field--row { grid-template-columns:minmax(0,1fr); }
}
/* V3 STATEMENT — copy + form, no competing visual block. */
.sbp-var--3 .sbp-contact__info .sbp-map { display:none; }
/* V4 MAP-LED — a wide territory stage with a single docked form. */
.sbp-var--4 .sbp-contact { display:flex; flex-direction:column; max-width:1050px; margin-inline:auto; gap:0; }
.sbp-var--4 .sbp-contact__info { width:100%; }
.sbp-var--4 .sbp-contact__info > .sbp-kicker,
.sbp-var--4 .sbp-contact__info > .sbp-h2,
.sbp-var--4 .sbp-contact__info > .sbp-lead { max-width:720px; }
.sbp-var--4 .sbp-contact__info .sbp-map {
flex:0 0 auto; aspect-ratio:21/9; min-height:clamp(300px,30cqw,430px); margin-top:24px;
}
.sbp-var--4 .sbp-contact__form {
width:min(720px,calc(100% - 48px)); align-self:flex-end; position:relative; z-index:2;
margin-top:calc(-1 * clamp(52px,7cqw,86px)); margin-right:24px;
border-top:3px solid var(--sbp-indicator,var(--sbp-org-display));
box-shadow:0 26px 56px -34px rgba(var(--sbp-shadow-rgb,32,26,20),.48);
}
/* V5 MINIMAL — no map/photo theatre. */
.sbp-var--5 .sbp-contact__info .sbp-map { display:none; }
/* V6 CLASSIC SPLIT — recovered desktop Contact anatomy: a compact information
rail beside a deliberately generous enquiry form. The form is the dominant
plane, not a phone-width card. Names share a row; email gets extra room
beside phone; message and submit run full width. */
.sbp-var--6 .sbp-contact {
display:flex; flex-direction:column;
gap:clamp(24px,3vw,38px); align-items:stretch;
max-width:820px; margin-inline:auto;
}
.sbp-var--6 .sbp-contact__info { padding-top:clamp(6px,1vw,14px); }
.sbp-var--6 .sbp-contact__facts { gap:10px; margin-top:22px; }
.sbp-var--6 .sbp-contact__acts { margin-top:14px; }
.sbp-var--6 .sbp-contact__actions {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
gap:9px; margin-top:16px;
}
.sbp-var--6 .sbp-caction {
justify-content:flex-start; min-height:42px; padding:9px 11px;
border-radius:12px; background:var(--sbp-card);
}
.sbp-var--6 .sbp-contact__info .sbp-map {
flex:0 0 auto; aspect-ratio:16/7; min-height:150px; max-height:190px;
margin-top:18px;
}
.sbp-var--6 .sbp-contact__form {
width:100%; min-width:0; padding:clamp(24px,3vw,36px);
}
.sbp-var--6 .sbp-contact__form .sbp-field--row--identity {
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
}
.sbp-var--6 .sbp-contact__form .sbp-field--row--contact {
grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr);
gap:16px;
}
.sbp-var--6 .sbp-contact__form .sbp-field { margin-bottom:16px; }
.sbp-var--6 .sbp-contact__form .sbp-input,
.sbp-var--6 .sbp-contact__form .sbp-textarea { font-size:15px; }
.sbp-var--6 .sbp-contact__form .sbp-textarea { min-height:150px; }
@container sbp-contact-band (max-width: 980px) {
.sbp-var--6 .sbp-contact__info .sbp-map { aspect-ratio:16/8; max-height:220px; }
}
@media (max-width:640px) {
.sbp-var--6 .sbp-contact__form .sbp-field--row--identity,
.sbp-var--6 .sbp-contact__form .sbp-field--row--contact {
grid-template-columns:minmax(0,1fr);
}
.sbp-var--6 .sbp-contact__actions { grid-template-columns:minmax(0,1fr); }
}
/* V7 TWO-COLUMN — the restored horizontal Contact composition. This remains
two columns even inside the governed Narrow section preset while there is
enough real space: compact information/map rail on the left, dominant form
on the right. It only stacks when the section truly cannot support it. */
.sbp-var--7 .sbp-contact {
display:grid;
grid-template-columns:minmax(240px,.62fr) minmax(520px,1.38fr);
gap:clamp(26px,3.2vw,44px);
align-items:start;
width:100%;
max-width:1180px;
margin-inline:auto;
}
/* V7 is the explicit horizontal Contact composition. The generic Narrow
section preset is allowed to narrow every other variant, but V7 must retain
enough real estate for its two-column identity on desktop. */
.sbp-page .sbp-secwrap.sbp-var--7.sbp-lay--narrow .sbp-sec--contact .sbp-sw {
max-width:min(1080px,94vw);
}
.sbp-var--7 .sbp-contact__info {
min-width:0;
padding-top:4px;
}
.sbp-var--7 .sbp-contact__facts { gap:9px; margin-top:20px; }
.sbp-var--7 .sbp-contact__acts { margin-top:12px; }
.sbp-var--7 .sbp-contact__actions {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
margin-top:14px;
}
.sbp-var--7 .sbp-caction {
justify-content:flex-start;
min-height:40px;
padding:8px 10px;
border-radius:11px;
background:var(--sbp-card);
}
.sbp-var--7 .sbp-contact__info .sbp-map {
flex:0 0 auto;
aspect-ratio:16/8;
min-height:145px;
max-height:190px;
margin-top:16px;
}
.sbp-var--7 .sbp-contact__form {
width:100%;
min-width:0;
padding:clamp(24px,3vw,36px);
}
.sbp-var--7 .sbp-contact__form .sbp-field--row--identity {
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
}
.sbp-var--7 .sbp-contact__form .sbp-field--row--contact {
grid-template-columns:minmax(0,1.75fr) minmax(0,.75fr);
gap:16px;
}
.sbp-var--7 .sbp-contact__form .sbp-field { margin-bottom:16px; }
.sbp-var--7 .sbp-contact__form .sbp-input,
.sbp-var--7 .sbp-contact__form .sbp-textarea { font-size:15px; }
.sbp-var--7 .sbp-contact__form .sbp-textarea { min-height:150px; }
/* This sits after the generic Contact stack law on purpose. V7's identity is
horizontal, so it stays two-column until the section is genuinely tablet
sized. Only then does it become a vertical contact stack. */
@container sbp-contact-band (min-width: 780px) {
.sbp-var--7 .sbp-contact {
display:grid;
grid-template-columns:minmax(240px,.62fr) minmax(520px,1.38fr);
}
}
@container sbp-contact-band (max-width: 779px) {
.sbp-var--7 .sbp-contact {
display:flex;
flex-direction:column;
max-width:760px;
}
}
@media (max-width:640px) {
.sbp-var--7 .sbp-contact__form .sbp-field--row--identity,
.sbp-var--7 .sbp-contact__form .sbp-field--row--contact {
grid-template-columns:minmax(0,1fr);
}
.sbp-var--7 .sbp-contact__actions { grid-template-columns:minmax(0,1fr); }
}
/* Shared visual hygiene. Editor never overlays a second image control on a map. */
.sbp-map { position:relative; }
.sbp-map__uploadrow { display:none !important; }
@media (max-width:860px) {
.sbp-var--1 .sbp-contact,
.sbp-var--2 .sbp-contact { grid-template-columns:minmax(0,1fr); }
.sbp-var--1 .sbp-contact__actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
.sbp-var--2 .sbp-contact__info .sbp-map--photo { min-height:0; aspect-ratio:4/3; }
.sbp-var--4 .sbp-contact__info .sbp-map { aspect-ratio:16/9; min-height:220px; }
.sbp-var--4 .sbp-contact__form { width:calc(100% - 24px); margin-top:-34px; margin-right:12px; }
}
@media (max-width:520px) {
.sbp-var--1 .sbp-contact__actions { grid-template-columns:minmax(0,1fr); }
.sbp-var--4 .sbp-contact__form { width:100%; margin:14px 0 0; }
}
@media (max-width:760px) {
.sbp-var--2 .sbp-sec--cta .sbp-cta { grid-template-columns:1fr; }
.sbp-var--2 .sbp-sec--cta .sbp-cta__actions { justify-self:start; }
.sbp-var--2 .sbp-sec--cta .sbp-btns { justify-content:flex-start; }
}
/* ═══ CHL:BP_CONTACT_DYNAMIC_VARIANTS v1 ═══════════════════════════════════
The editor changes .sbp-var--N without re-rendering the PHP section. Keep a
superset Contact DOM in edit mode and let the active variant choose its
visual/details. This is what makes V1/V2/V4 truthful during live switching. */
.sbp-page--editing .sbp-sec--contact .sbp-contact__image,
.sbp-page--editing .sbp-sec--contact .sbp-contact__map,
.sbp-page--editing .sbp-sec--contact .sbp-contact__facts,
.sbp-page--editing .sbp-sec--contact .sbp-contact__hours,
.sbp-page--editing .sbp-sec--contact .sbp-contact__actions,
.sbp-page--editing .sbp-sec--contact .sbp-contact__acts { display:none; }
/* Full Contact exposes its information system and canonical map. */
.sbp-page--editing .sbp-var--1 .sbp-sec--contact .sbp-contact__map { display:block; }
.sbp-page--editing .sbp-var--1 .sbp-sec--contact .sbp-contact__facts { display:grid; }
.sbp-page--editing .sbp-var--1 .sbp-sec--contact .sbp-contact__hours { display:block; }
.sbp-page--editing .sbp-var--1 .sbp-sec--contact .sbp-contact__actions { display:grid; }
.sbp-page--editing .sbp-var--1 .sbp-sec--contact .sbp-contact__acts { display:flex; }
/* Image-led owns exactly one visual slot. */
.sbp-page--editing .sbp-var--2 .sbp-sec--contact .sbp-contact__image { display:flex; }
.sbp-page--editing .sbp-var--2 .sbp-sec--contact .sbp-map--photo.sbp-contact__image { display:block; }
/* Map-led owns the map, never the image uploader. */
.sbp-page--editing .sbp-var--4 .sbp-sec--contact .sbp-contact__map { display:block; }
/* Classic Split previews the same real information/actions/map that public V6
will render, while keeping every destination inert in the editor. */
.sbp-page--editing .sbp-var--6 .sbp-sec--contact .sbp-contact__map { display:block; }
.sbp-page--editing .sbp-var--6 .sbp-sec--contact .sbp-contact__facts { display:grid; }
.sbp-page--editing .sbp-var--6 .sbp-sec--contact .sbp-contact__hours { display:block; }
.sbp-page--editing .sbp-var--6 .sbp-sec--contact .sbp-contact__actions { display:grid; }
.sbp-page--editing .sbp-var--6 .sbp-sec--contact .sbp-contact__acts { display:flex; }
/* Two-column previews the same truthful contact information as its public
counterpart. The left rail stays live-looking but inert inside the editor. */
.sbp-page--editing .sbp-var--7 .sbp-sec--contact .sbp-contact__map { display:block; }
.sbp-page--editing .sbp-var--7 .sbp-sec--contact .sbp-contact__facts { display:grid; }
.sbp-page--editing .sbp-var--7 .sbp-sec--contact .sbp-contact__hours { display:block; }
.sbp-page--editing .sbp-var--7 .sbp-sec--contact .sbp-contact__actions { display:grid; }
.sbp-page--editing .sbp-var--7 .sbp-sec--contact .sbp-contact__acts { display:flex; }
/* Ensure the V4 stage remains visible behind the docked form. */
.sbp-page--editing .sbp-var--4 .sbp-sec--contact .sbp-contact__info .sbp-contact__map {
min-height:clamp(300px,30cqw,430px); aspect-ratio:21/9;
}
@media (max-width:860px) {
.sbp-page--editing .sbp-var--4 .sbp-sec--contact .sbp-contact__info .sbp-contact__map {
min-height:220px; aspect-ratio:16/9;
}
}
@media (prefers-reduced-motion: reduce) {
.sbp-sec--contact *, .sbp-sec--contact *::before, .sbp-sec--contact *::after {
scroll-behavior:auto !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_MEDIA_FAMILY v2 — Videos & audio, seven real compositions.
V1 public is intentionally untouched and continues to use .sbp-media.
V2-V7 use .sbp-mediax so this wave cannot accidentally restyle V1.
═══════════════════════════════════════════════════════════════════════════ */
.sbp-mediax {
position:relative;
margin-top:clamp(18px,2.6vw,30px);
}
.sbp-mediax__stage {
position:relative;
min-width:0;
border-radius:var(--sbp-r-lg);
}
.sbp-mediax__stagebody {
position:relative;
overflow:hidden;
border-radius:var(--sbp-r-lg);
background:
radial-gradient(120% 90% at 78% 8%, var(--sbp-field-b) 0%, transparent 55%),
radial-gradient(90% 70% at 12% 92%, var(--sbp-field-c) 0%, transparent 60%),
linear-gradient(180deg, var(--sbp-field-b) 0%, var(--sbp-field-a) 46%, var(--sbp-field-c) 100%);
}
.sbp-mediax__stagebody iframe { display:block; width:100%; height:100%; border:0; }
.sbp-mediax__stagebody audio { width:min(88%,620px); position:absolute; left:6%; right:6%; bottom:8%; z-index:2; }
.sbp-mediax__stageph {
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
color:var(--sbp-acc); font-size:clamp(32px,5vw,54px); opacity:.72;
}
.sbp-mediax__featured {
display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
padding:14px 4px 0;
}
.sbp-mediax__featured strong {
flex:1 1 260px; color:var(--sbp-ink); font-size:clamp(17px,1.8vw,22px);
}
.sbp-mediax__featured > span:last-child { color:var(--sbp-mut); font-size:13px; }
.sbp-mediax__kind {
display:inline-flex; align-items:center; min-height:26px; padding:3px 9px;
border-radius:999px; background:var(--sbp-acc-soft); color:var(--sbp-acc-ink);
font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.sbp-mediax__track { min-width:0; }
.sbp-mediax__item {
appearance:none; border:0; font:inherit; color:inherit; text-align:left; cursor:pointer;
min-width:0; position:relative;
}
.sbp-mediax__visual {
position:relative; display:flex; align-items:center; justify-content:center;
overflow:hidden; background-color:var(--sbp-field-b);
background-size:cover; background-position:center;
}
.sbp-mediax__visual::after {
content:""; position:absolute; inset:0;
background:linear-gradient(180deg,transparent 42%,rgba(18,14,10,.18));
pointer-events:none;
}
.sbp-mediax__visual i {
position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
width:42px; height:42px; border-radius:999px;
background:color-mix(in srgb,var(--sbp-card) 88%,transparent);
color:var(--sbp-acc-ink); box-shadow:0 8px 28px rgba(34,24,15,.14);
}
.sbp-mediax__copy { min-width:0; display:block; }
.sbp-mediax__meta {
display:flex; align-items:center; gap:8px; margin-bottom:4px;
color:var(--sbp-mut); font-size:11px; font-weight:750;
letter-spacing:.065em; text-transform:uppercase;
}
.sbp-mediax__title {
display:block; color:var(--sbp-ink); font-size:16px; line-height:1.3;
}
.sbp-mediax__num {
color:var(--sbp-acc-ink); font-variant-numeric:tabular-nums; font-weight:800;
}
.sbp-mediax__go { color:var(--sbp-acc-ink); }
.sbp-mediax__nav {
display:none; justify-content:flex-end; gap:8px; margin-top:14px;
}
.sbp-mediax__nav button {
width:42px; height:42px; border-radius:999px; cursor:pointer;
border:1px solid var(--sbp-line); background:var(--sbp-card); color:var(--sbp-ink);
font:inherit; font-size:24px; line-height:1;
}
.sbp-mediax__item.is-active { outline-color:var(--sbp-indicator,var(--sbp-org-display)); }
/* V2 MEDIA LIBRARY — no featured stage: the collection itself is the hero. */
.sbp-var--2 .sbp-sec--media .sbp-mediax__stage { display:none; }
.sbp-var--2 .sbp-sec--media .sbp-mediax__track {
display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:clamp(14px,2vw,22px);
}
.sbp-var--2 .sbp-sec--media .sbp-mediax__item {
display:grid; grid-template-rows:auto 1fr;
background:var(--sbp-card); border:1px solid var(--sbp-line);
border-radius:var(--sbp-r-lg); overflow:hidden; box-shadow:var(--sbp-shadow);
}
.sbp-var--2 .sbp-sec--media .sbp-mediax__visual { aspect-ratio:16/10; }
.sbp-var--2 .sbp-sec--media .sbp-mediax__copy { padding:15px 16px 18px; }
.sbp-var--2 .sbp-sec--media .sbp-mediax__num {
position:absolute; top:11px; left:11px; z-index:2;
padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.88);
}
.sbp-var--2 .sbp-sec--media .sbp-mediax__go {
position:absolute; right:14px; bottom:15px;
}
/* V3 FEATURED PREMIERE — cinematic featured stage without the old viewport-eating
void; the rest of the channel becomes a compact "up next" rail. */
.sbp-var--3 .sbp-sec--media .sbp-mediax__stagebody {
aspect-ratio:21/9; max-height:500px; box-shadow:var(--sbp-shadow);
}
.sbp-var--3 .sbp-sec--media .sbp-mediax__featured {
padding:16px 0 2px; max-width:980px; margin-inline:auto;
}
.sbp-var--3 .sbp-sec--media .sbp-mediax__track {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px; margin-top:18px;
}
.sbp-var--3 .sbp-sec--media .sbp-mediax__item {
display:grid; grid-template-columns:96px minmax(0,1fr) auto;
gap:12px; align-items:center;
padding:10px; background:var(--sbp-card); border:1px solid var(--sbp-line);
border-radius:14px;
}
.sbp-var--3 .sbp-sec--media .sbp-mediax__visual { width:96px; aspect-ratio:16/10; border-radius:10px; }
.sbp-var--3 .sbp-sec--media .sbp-mediax__num { display:none; }
/* V4 AUDIO LOUNGE — audio-first, tactile and calm. */
.sbp-var--4 .sbp-sec--media .sbp-head { max-width:760px; }
.sbp-var--4 .sbp-sec--media .sbp-mediax {
display:grid; grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);
gap:clamp(24px,4vw,54px); align-items:center;
}
.sbp-var--4 .sbp-sec--media .sbp-mediax__stagebody {
aspect-ratio:1/1; border-radius:50%;
background:
radial-gradient(circle at 50% 50%, var(--sbp-card) 0 18%, transparent 19%),
radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--sbp-acc) 28%,transparent) 0 36%, transparent 37%),
radial-gradient(circle at 50% 50%, var(--sbp-field-b) 0 58%, var(--sbp-field-c) 59% 100%);
box-shadow:var(--sbp-shadow);
}
.sbp-var--4 .sbp-sec--media .sbp-mediax__stagebody iframe {
border-radius:50%; opacity:.96;
}
.sbp-var--4 .sbp-sec--media .sbp-mediax__featured { justify-content:center; text-align:center; }
.sbp-var--4 .sbp-sec--media .sbp-mediax__featured strong { flex-basis:100%; }
.sbp-var--4 .sbp-sec--media .sbp-mediax__track { display:flex; flex-direction:column; gap:8px; }
.sbp-var--4 .sbp-sec--media .sbp-mediax__item {
display:grid; grid-template-columns:52px minmax(0,1fr) auto;
gap:14px; align-items:center; padding:12px 14px;
border-bottom:1px solid var(--sbp-line); background:transparent;
}
.sbp-var--4 .sbp-sec--media .sbp-mediax__visual {
width:52px; aspect-ratio:1; border-radius:12px;
}
.sbp-var--4 .sbp-sec--media .sbp-mediax__num { display:none; }
.sbp-var--4 .sbp-sec--media .sbp-mediax__go { font-size:20px; }
/* V5 SCREENING ROOM — dark channel rail beside a contained cinema stage.
CHL:BP_MEDIA_V5_CINEMA_TOKENS v1 — the theatre is a DOCUMENTED component
surface: film-black stage, white projection type. These tokens fix that
contract in one place (values identical to the accepted literals) and pin
the panel to the page-level ink snapshot so a tone remap (e.g. deep) can
never flip the theatre light while its type stays white. */
.sbp-var--5 .sbp-sec--media {
--sbp-cinema-surface:var(--sbp-ink-base, var(--sbp-ink));
--sbp-cinema-bg:#100d0a;
--sbp-cinema-ink:#fff;
--sbp-cinema-soft:rgba(255,255,255,.68);
--sbp-cinema-muted:rgba(255,255,255,.58);
--sbp-cinema-border:rgba(255,255,255,.12);
--sbp-cinema-chip:rgba(255,255,255,.1);
}
.sbp-var--5 .sbp-sec--media .sbp-mediax {
display:grid; grid-template-columns:minmax(240px,.58fr) minmax(0,1.42fr);
gap:18px; align-items:stretch; padding:clamp(18px,2.6vw,30px);
border-radius:var(--sbp-r-lg); background:var(--sbp-cinema-surface);
}
.sbp-var--5 .sbp-sec--media .sbp-mediax__stage { grid-column:2; grid-row:1; align-self:center; }
.sbp-var--5 .sbp-sec--media .sbp-mediax__stagebody {
aspect-ratio:16/9; background:var(--sbp-cinema-bg);
}
.sbp-var--5 .sbp-sec--media .sbp-mediax__featured strong,
.sbp-var--5 .sbp-sec--media .sbp-mediax__featured > span:last-child { color:var(--sbp-cinema-ink); }
.sbp-var--5 .sbp-sec--media .sbp-mediax__track {
grid-column:1; grid-row:1; display:flex; flex-direction:column; justify-content:center; gap:2px;
}
.sbp-var--5 .sbp-sec--media .sbp-mediax__item {
display:grid; grid-template-columns:42px minmax(0,1fr) auto;
gap:10px; align-items:center; padding:11px 9px;
background:transparent; border-bottom:1px solid var(--sbp-cinema-border);
}
.sbp-var--5 .sbp-sec--media .sbp-mediax__visual {
width:42px; aspect-ratio:1; border-radius:10px; background-color:var(--sbp-cinema-chip);
}
.sbp-var--5 .sbp-sec--media .sbp-mediax__meta { color:var(--sbp-cinema-muted); }
.sbp-var--5 .sbp-sec--media .sbp-mediax__title { color:var(--sbp-cinema-ink); }
.sbp-var--5 .sbp-sec--media .sbp-mediax__num { display:none; }
.sbp-var--5 .sbp-sec--media .sbp-mediax__go { color:var(--sbp-cinema-ink); opacity:.72; }
/* V6 STORY STRIP — a navigable horizontal media journey. */
.sbp-var--6 .sbp-sec--media .sbp-mediax__stage { display:none; }
.sbp-var--6 .sbp-sec--media .sbp-mediax__track {
display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
padding:24px 2px 8px; scrollbar-width:thin;
}
.sbp-var--6 .sbp-sec--media .sbp-mediax__item {
flex:0 0 clamp(250px,31vw,350px); scroll-snap-align:start;
display:grid; grid-template-rows:auto 1fr; overflow:hidden;
border:1px solid var(--sbp-line); border-radius:var(--sbp-r-lg); background:var(--sbp-card);
}
.sbp-var--6 .sbp-sec--media .sbp-mediax__visual { aspect-ratio:16/10; }
.sbp-var--6 .sbp-sec--media .sbp-mediax__copy { padding:15px 16px 20px; }
.sbp-var--6 .sbp-sec--media .sbp-mediax__num {
position:absolute; top:-20px; left:16px; z-index:2;
display:flex; align-items:center; justify-content:center;
width:42px; height:42px; border-radius:999px; background:var(--sbp-card);
border:2px solid var(--sbp-indicator,var(--sbp-org-display));
}
.sbp-var--6 .sbp-sec--media .sbp-mediax__go { position:absolute; right:16px; bottom:16px; }
.sbp-var--6 .sbp-sec--media .sbp-mediax__nav { display:flex; }
/* V7 EDITORIAL CHANNEL — numbered archive, typography first. */
.sbp-var--7 .sbp-sec--media .sbp-mediax__stage { display:none; }
.sbp-var--7 .sbp-sec--media .sbp-mediax__track { display:flex; flex-direction:column; }
.sbp-var--7 .sbp-sec--media .sbp-mediax__item {
display:grid; grid-template-columns:minmax(64px,90px) minmax(90px,150px) minmax(0,1fr) auto;
gap:clamp(14px,2.5vw,30px); align-items:center; padding:18px 4px;
background:transparent; border-bottom:1px solid var(--sbp-line);
}
.sbp-var--7 .sbp-sec--media .sbp-mediax__num {
font-size:clamp(28px,4vw,48px); line-height:1; color:var(--sbp-acc-ink); opacity:.88;
}
.sbp-var--7 .sbp-sec--media .sbp-mediax__visual {
width:100%; aspect-ratio:16/10; border-radius:10px;
}
.sbp-var--7 .sbp-sec--media .sbp-mediax__title { font-size:clamp(17px,2vw,22px); }
.sbp-var--7 .sbp-sec--media .sbp-mediax__go { font-size:18px; }
/* Media-family responsive recomposition. */
@media (max-width:900px) {
.sbp-var--3 .sbp-sec--media .sbp-mediax__track { grid-template-columns:minmax(0,1fr); }
.sbp-var--4 .sbp-sec--media .sbp-mediax { grid-template-columns:minmax(0,1fr); }
.sbp-var--4 .sbp-sec--media .sbp-mediax__stage { max-width:420px; margin-inline:auto; }
.sbp-var--5 .sbp-sec--media .sbp-mediax { grid-template-columns:minmax(0,1fr); }
.sbp-var--5 .sbp-sec--media .sbp-mediax__stage,
.sbp-var--5 .sbp-sec--media .sbp-mediax__track { grid-column:1; grid-row:auto; }
.sbp-var--5 .sbp-sec--media .sbp-mediax__track { order:2; }
.sbp-var--7 .sbp-sec--media .sbp-mediax__item {
grid-template-columns:64px 110px minmax(0,1fr) auto;
}
}
@media (max-width:640px) {
.sbp-var--2 .sbp-sec--media .sbp-mediax__track { grid-template-columns:minmax(0,1fr); }
.sbp-var--3 .sbp-sec--media .sbp-mediax__stagebody { aspect-ratio:16/10; }
.sbp-var--3 .sbp-sec--media .sbp-mediax__item { grid-template-columns:82px minmax(0,1fr) auto; }
.sbp-var--3 .sbp-sec--media .sbp-mediax__visual { width:82px; }
.sbp-var--7 .sbp-sec--media .sbp-mediax__item {
grid-template-columns:54px minmax(0,1fr) auto;
}
.sbp-var--7 .sbp-sec--media .sbp-mediax__visual { display:none; }
}
/* Subtle motion is governed by the existing Motion=Subtle token
(--sbp-reveal); reduced-motion users receive the static composition. */
@media (prefers-reduced-motion:no-preference) {
.sbp-mediax__item {
animation:sbp-media-item-in var(--sbp-reveal,0s) ease both;
animation-delay:calc(var(--sbp-mi,0) * 45ms);
}
.sbp-mediax__visual { transition:transform .28s ease; }
.sbp-mediax__item:hover .sbp-mediax__visual { transform:scale(1.018); }
@keyframes sbp-media-item-in {
from { opacity:0; transform:translateY(10px); }
to { opacity:1; transform:none; }
}
}
@media (prefers-reduced-motion:reduce) {
.sbp-mediax__item, .sbp-mediax__visual { animation:none !important; transition:none !important; }
}
/* CHL:BP_CONTACT_V7_BALANCE v1 — operator-approved closure. V7 alone is an
explicit 50/50 outer split; V1-V6 Contact selectors are untouched. */
.sbp-page .sbp-secwrap.sbp-var--7 .sbp-sec--contact .sbp-contact {
grid-template-columns:repeat(2,minmax(0,1fr));
}
@container sbp-contact-band (min-width:780px) {
.sbp-page .sbp-secwrap.sbp-var--7 .sbp-sec--contact .sbp-contact {
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_MEDIA_PREMIUM v1 — full-family convergence.
The protected V1 PUBLIC markup remains untouched. These rules choreograph
the section introduction and polish V2-V7 without changing stored content.
═══════════════════════════════════════════════════════════════════════════ */
/* HEADER CHOREOGRAPHY — the same vendor words, six premium alternates around
the protected V1 default. V1's public header and body remain unchanged. */
/* V2 library: editorial ledger intro, deliberately left and compact. */
.sbp-var--2 .sbp-sec--media .sbp-head {
max-width:880px;
margin-bottom:clamp(22px,3vw,34px);
}
.sbp-var--2 .sbp-sec--media .sbp-head .sbp-h2 {
max-width:18ch;
}
/* V3 premiere: true centred title card, then stage + Up next. */
.sbp-var--3 .sbp-sec--media .sbp-head {
max-width:760px;
margin-inline:auto;
margin-bottom:clamp(24px,3.4vw,40px);
}
.sbp-var--3 .sbp-sec--media .sbp-head .sbp-lead {
margin-inline:auto;
max-width:56ch;
}
/* V4 lounge: title block and description become a two-part listening-room intro. */
.sbp-var--4 .sbp-sec--media .sbp-head {
max-width:none;
display:grid;
grid-template-columns:minmax(240px,.85fr) minmax(300px,1.15fr);
column-gap:clamp(30px,5vw,70px);
align-items:end;
text-align:left;
margin-bottom:clamp(24px,3vw,38px);
}
.sbp-var--4 .sbp-sec--media .sbp-head .sbp-kicker { grid-column:1; grid-row:1; }
.sbp-var--4 .sbp-sec--media .sbp-head .sbp-h2 { grid-column:1; grid-row:2; margin-bottom:0; }
.sbp-var--4 .sbp-sec--media .sbp-head .sbp-lead {
grid-column:2; grid-row:1 / span 2;
align-self:end; max-width:52ch; margin:0 0 2px;
}
/* V5 screening room: intro and theatre are one dark environment. */
.sbp-var--5 .sbp-sec--media .sbp-head {
max-width:none;
margin-bottom:0;
padding:clamp(22px,3vw,34px) clamp(22px,3vw,34px) clamp(14px,2vw,20px);
border-radius:var(--sbp-r-lg) var(--sbp-r-lg) 0 0;
background:var(--sbp-cinema-surface);
}
.sbp-var--5 .sbp-sec--media .sbp-head .sbp-kicker { color:color-mix(in srgb,var(--sbp-card) 74%,var(--sbp-indicator)); }
.sbp-var--5 .sbp-sec--media .sbp-head .sbp-h2 { color:var(--sbp-cinema-ink); }
.sbp-var--5 .sbp-sec--media .sbp-head .sbp-lead { color:var(--sbp-cinema-soft); max-width:58ch; }
.sbp-var--5 .sbp-sec--media .sbp-mediax {
margin-top:0;
border-radius:0 0 var(--sbp-r-lg) var(--sbp-r-lg);
}
/* V6 story strip: compressed horizontal prologue so the journey owns the stage. */
.sbp-var--6 .sbp-sec--media .sbp-head {
max-width:none;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);
column-gap:clamp(28px,5vw,72px);
align-items:end;
margin-bottom:12px;
}
.sbp-var--6 .sbp-sec--media .sbp-head .sbp-kicker { grid-column:1; }
.sbp-var--6 .sbp-sec--media .sbp-head .sbp-h2 { grid-column:1; margin-bottom:0; }
.sbp-var--6 .sbp-sec--media .sbp-head .sbp-lead {
grid-column:2; grid-row:1 / span 2; align-self:end;
margin:0; max-width:48ch;
}
/* V7 editorial channel: magazine masthead with a narrow label rail. */
.sbp-var--7 .sbp-sec--media .sbp-head {
max-width:none;
display:grid;
grid-template-columns:clamp(110px,13vw,160px) minmax(0,1fr);
column-gap:clamp(24px,4vw,56px);
align-items:start;
padding-top:14px;
border-top:2px solid color-mix(in srgb,var(--sbp-indicator,var(--sbp-org-display)) 55%,transparent);
}
.sbp-var--7 .sbp-sec--media .sbp-head .sbp-kicker {
grid-column:1; grid-row:1 / span 2;
margin-top:5px; align-self:start;
}
.sbp-var--7 .sbp-sec--media .sbp-head .sbp-kicker::before { display:none; }
.sbp-var--7 .sbp-sec--media .sbp-head .sbp-h2 { grid-column:2; margin-bottom:8px; }
.sbp-var--7 .sbp-sec--media .sbp-head .sbp-lead { grid-column:2; max-width:56ch; }
/* V2 MEDIA LIBRARY — hierarchy lives in metadata + title, not chrome. */
.sbp-var--2 .sbp-sec--media .sbp-mediax__copy { padding-bottom:22px; }
.sbp-var--2 .sbp-sec--media .sbp-mediax__meta { margin-bottom:7px; }
.sbp-var--2 .sbp-sec--media .sbp-mediax__title { font-size:17px; }
/* V3 FEATURED PREMIERE — stage and Up Next share one premium composition. */
.sbp-var--3 .sbp-sec--media .sbp-mediax {
display:grid;
grid-template-columns:minmax(0,1.48fr) minmax(280px,.52fr);
gap:clamp(18px,2.8vw,34px);
align-items:start;
}
.sbp-var--3 .sbp-sec--media .sbp-mediax__stage { grid-column:1; }
.sbp-var--3 .sbp-sec--media .sbp-mediax__stagebody {
aspect-ratio:16/10;
max-height:430px;
}
.sbp-var--3 .sbp-sec--media .sbp-mediax__featured { padding-top:14px; }
.sbp-var--3 .sbp-sec--media .sbp-mediax__track {
grid-column:2;
display:flex;
flex-direction:column;
gap:8px;
margin-top:0;
}
.sbp-var--3 .sbp-sec--media .sbp-mediax__track::before {
content:"Up next";
display:block;
margin:0 0 4px 2px;
color:var(--sbp-acc-ink);
font-size:11px;
font-weight:800;
letter-spacing:.11em;
text-transform:uppercase;
}
.sbp-var--3 .sbp-sec--media .sbp-mediax__item {
grid-template-columns:70px minmax(0,1fr) auto;
padding:8px;
}
.sbp-var--3 .sbp-sec--media .sbp-mediax__visual { width:70px; }
/* V4 AUDIO LOUNGE — larger artwork/player and a subtle listening-progress motif. */
.sbp-var--4 .sbp-sec--media .sbp-mediax {
grid-template-columns:minmax(360px,.92fr) minmax(0,1.08fr);
}
.sbp-var--4 .sbp-sec--media .sbp-mediax__stage {
width:min(100%,520px);
justify-self:center;
}
.sbp-var--4 .sbp-sec--media .sbp-mediax__stagebody::after {
content:"";
position:absolute;
left:22%; right:22%; bottom:20%;
height:2px;
border-radius:2px;
background:linear-gradient(90deg,var(--sbp-indicator,var(--sbp-org-display)) 0 42%,color-mix(in srgb,var(--sbp-line) 85%,transparent) 42% 100%);
opacity:.75;
pointer-events:none;
}
.sbp-var--4 .sbp-sec--media .sbp-mediax__stagebody::before {
content:"";
position:absolute;
width:9px; height:9px; border-radius:999px;
left:45.5%; bottom:calc(20% - 3.5px);
background:var(--sbp-indicator,var(--sbp-org-display));
z-index:2;
pointer-events:none;
}
.sbp-var--4 .sbp-sec--media .sbp-mediax__stagebody:has(iframe)::before,
.sbp-var--4 .sbp-sec--media .sbp-mediax__stagebody:has(iframe)::after,
.sbp-var--4 .sbp-sec--media .sbp-mediax__stagebody:has(audio)::before,
.sbp-var--4 .sbp-sec--media .sbp-mediax__stagebody:has(audio)::after {
display:none;
}
/* V5 SCREENING ROOM — slightly more breathing room in the joined theatre. */
.sbp-var--5 .sbp-sec--media .sbp-mediax {
padding-top:clamp(14px,2vw,22px);
}
.sbp-var--5 .sbp-sec--media .sbp-mediax__track {
padding-bottom:4px;
}
/* V6 STORY STRIP — deliberate peek, no native scrollbar, fully visible medallions. */
.sbp-var--6 .sbp-sec--media .sbp-mediax__track {
gap:16px;
padding:30px clamp(44px,7vw,92px) 10px 2px;
scrollbar-width:none;
scroll-padding-inline:2px clamp(44px,7vw,92px);
}
.sbp-var--6 .sbp-sec--media .sbp-mediax__track::-webkit-scrollbar { display:none; }
.sbp-var--6 .sbp-sec--media .sbp-mediax__item {
flex:0 0 clamp(260px,30vw,350px);
overflow:visible;
}
.sbp-var--6 .sbp-sec--media .sbp-mediax__visual {
border-radius:var(--sbp-r-lg) var(--sbp-r-lg) 0 0;
overflow:hidden;
}
.sbp-var--6 .sbp-sec--media .sbp-mediax__nav {
align-items:center;
justify-content:flex-end;
margin-top:10px;
padding-right:2px;
}
/* V7 EDITORIAL CHANNEL — more magazine, less settings list. */
.sbp-var--7 .sbp-sec--media .sbp-mediax__item {
grid-template-columns:minmax(62px,88px) minmax(100px,145px) minmax(0,1fr) auto;
padding-block:20px;
}
.sbp-var--7 .sbp-sec--media .sbp-mediax__meta {
margin-bottom:6px;
letter-spacing:.09em;
}
.sbp-var--7 .sbp-sec--media .sbp-mediax__title {
font-size:clamp(18px,2vw,23px);
}
/* Responsive header/body choreography. */
@media (max-width:900px) {
.sbp-var--4 .sbp-sec--media .sbp-head,
.sbp-var--6 .sbp-sec--media .sbp-head {
display:block;
}
.sbp-var--4 .sbp-sec--media .sbp-head .sbp-h2,
.sbp-var--6 .sbp-sec--media .sbp-head .sbp-h2 { margin-bottom:12px; }
.sbp-var--4 .sbp-sec--media .sbp-head .sbp-lead,
.sbp-var--6 .sbp-sec--media .sbp-head .sbp-lead { margin:0; }
.sbp-var--3 .sbp-sec--media .sbp-mediax {
grid-template-columns:minmax(0,1fr);
}
.sbp-var--3 .sbp-sec--media .sbp-mediax__stage,
.sbp-var--3 .sbp-sec--media .sbp-mediax__track { grid-column:1; }
.sbp-var--3 .sbp-sec--media .sbp-mediax__track { margin-top:14px; }
.sbp-var--4 .sbp-sec--media .sbp-mediax {
grid-template-columns:minmax(0,1fr);
}
}
@media (max-width:640px) {
.sbp-var--7 .sbp-sec--media .sbp-head { display:block; border-top-width:1px; }
.sbp-var--7 .sbp-sec--media .sbp-head .sbp-kicker { margin-bottom:9px; }
.sbp-var--6 .sbp-sec--media .sbp-mediax__track {
padding-right:48px;
}
}
/* Motion remains opt-in via the existing --sbp-reveal token and respects the
user's reduced-motion preference. */
@media (prefers-reduced-motion:no-preference) {
.sbp-var--3 .sbp-sec--media .sbp-mediax__stagebody,
.sbp-var--4 .sbp-sec--media .sbp-mediax__stagebody,
.sbp-var--5 .sbp-sec--media .sbp-mediax__stagebody {
transition:transform .35s ease, box-shadow .35s ease;
}
.sbp-var--3 .sbp-sec--media .sbp-mediax:hover .sbp-mediax__stagebody,
.sbp-var--4 .sbp-sec--media .sbp-mediax:hover .sbp-mediax__stagebody,
.sbp-var--5 .sbp-sec--media .sbp-mediax:hover .sbp-mediax__stagebody {
transform:translateY(-2px);
}
}
@media (prefers-reduced-motion:reduce) {
.sbp-sec--media * {
scroll-behavior:auto !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_MEDIA_ACCEPTANCE_FIX2_PUBLIC v1
V1 remains byte-for-byte untouched. V3 recovers its own silhouette:
a centred premiere screen followed by a horizontal Up Next shelf.
═══════════════════════════════════════════════════════════════════════════ */
.sbp-var--3 .sbp-sec--media .sbp-mediax {
display:block;
max-width:980px;
margin-inline:auto;
}
.sbp-var--3 .sbp-sec--media .sbp-mediax__stage {
width:min(100%,860px);
margin-inline:auto;
}
.sbp-var--3 .sbp-sec--media .sbp-mediax__stagebody {
aspect-ratio:16/9;
max-height:440px;
}
.sbp-var--3 .sbp-sec--media .sbp-mediax__featured {
width:min(100%,860px);
margin-inline:auto;
padding-top:14px;
}
.sbp-var--3 .sbp-sec--media .sbp-mediax__track {
margin-top:20px;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}
.sbp-var--3 .sbp-sec--media .sbp-mediax__track::before {
grid-column:1/-1;
margin:0 0 2px 2px;
}
.sbp-var--3 .sbp-sec--media .sbp-mediax__item {
grid-template-columns:54px minmax(0,1fr) auto;
min-height:78px;
padding:9px;
}
.sbp-var--3 .sbp-sec--media .sbp-mediax__visual {
width:54px;
}
@media (max-width:820px) {
.sbp-var--3 .sbp-sec--media .sbp-mediax__track {
grid-template-columns:minmax(0,1fr);
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_PHOTOWALL_PREMIUM v1 — seven spatial/static Photo Wall compositions.
Gallery owns sequencing. Photo Wall owns composition, crop, rhythm and scale.
Same .sbp-pwall anatomy is used in editor + public for near-WYSIWYG parity.
═══════════════════════════════════════════════════════════════════════════ */
.sbp-sec--photos .sbp-pwall {
--pw-unit:126px;
--pw-gap:12px;
position:relative;
display:grid;
gap:var(--pw-gap);
margin-top:clamp(22px,3vw,34px);
padding-bottom:clamp(14px,2vw,24px);
counter-reset:sbp-pwall;
}
.sbp-med--m .sbp-sec--photos .sbp-pwall { --pw-unit:150px; --pw-gap:14px; }
.sbp-med--l .sbp-sec--photos .sbp-pwall { --pw-unit:176px; --pw-gap:16px; }
.sbp-sec--photos .sbp-pwall__item {
counter-increment:sbp-pwall;
position:relative;
min-width:0;
margin:0;
overflow:hidden;
border-radius:16px;
background:var(--sbp-field-b);
}
.sbp-sec--photos .sbp-pwall__item > img,
.sbp-sec--photos .sbp-pwall__item .sbp-eimg,
.sbp-sec--photos .sbp-pwall__item .sbp-eimg > img {
width:100%;
height:100%;
display:block;
}
.sbp-sec--photos .sbp-pwall__item > img,
.sbp-sec--photos .sbp-pwall__item .sbp-eimg > img {
object-fit:var(--sbp-media-fit,cover);
}
.sbp-sec--photos .sbp-pwall__item .sbp-eimg {
min-height:100%;
overflow:hidden;
border-radius:inherit;
}
.sbp-sec--photos .sbp-pwall__item .sbp-eimg__ph {
min-height:100%;
}
/* V1 CLASSIC GRID — retained baseline identity: calm equal photographic tiles. */
.sbp-sec--photos .sbp-pwall {
grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--pw-unit)),1fr));
}
.sbp-sec--photos .sbp-pwall__item {
aspect-ratio:1 / 1;
}
/* V2 CURATED COLUMNS — paired asymmetric reservoir, rebuilt as a deliberate
12-column editorial arrangement. No CSS multi-column masonry, no dead desert. */
.sbp-var--2 .sbp-sec--photos .sbp-pwall {
grid-template-columns:repeat(12,minmax(0,1fr));
grid-auto-rows:var(--pw-unit);
grid-auto-flow:dense;
}
.sbp-var--2 .sbp-sec--photos .sbp-pwall__item { aspect-ratio:auto; }
.sbp-var--2 .sbp-sec--photos .sbp-pwall__item:nth-child(8n+1) { grid-column:1 / span 5; grid-row:span 2; }
.sbp-var--2 .sbp-sec--photos .sbp-pwall__item:nth-child(8n+2) { grid-column:6 / span 7; grid-row:span 3; }
.sbp-var--2 .sbp-sec--photos .sbp-pwall__item:nth-child(8n+3) { grid-column:1 / span 5; grid-row:span 2; }
.sbp-var--2 .sbp-sec--photos .sbp-pwall__item:nth-child(8n+4) { grid-column:6 / span 3; grid-row:span 2; }
.sbp-var--2 .sbp-sec--photos .sbp-pwall__item:nth-child(8n+5) { grid-column:9 / span 4; grid-row:span 2; }
.sbp-var--2 .sbp-sec--photos .sbp-pwall__item:nth-child(8n+6) { grid-column:1 / span 4; grid-row:span 2; }
.sbp-var--2 .sbp-sec--photos .sbp-pwall__item:nth-child(8n+7) { grid-column:5 / span 4; grid-row:span 2; }
.sbp-var--2 .sbp-sec--photos .sbp-pwall__item:nth-child(8n+8) { grid-column:9 / span 4; grid-row:span 2; }
/* V3 EDITORIAL WALL — preserve the strong lead-image concept, but bound its
height and use balanced supporting tiles so the wall never runs away. */
.sbp-var--3 .sbp-sec--photos .sbp-pwall {
grid-template-columns:repeat(12,minmax(0,1fr));
grid-auto-rows:var(--pw-unit);
grid-auto-flow:dense;
}
.sbp-var--3 .sbp-sec--photos .sbp-pwall__item { aspect-ratio:auto; }
.sbp-var--3 .sbp-sec--photos .sbp-pwall__item:nth-child(8n+1) { grid-column:1 / span 8; grid-row:span 3; }
.sbp-var--3 .sbp-sec--photos .sbp-pwall__item:nth-child(8n+2) { grid-column:9 / span 4; grid-row:span 1; }
.sbp-var--3 .sbp-sec--photos .sbp-pwall__item:nth-child(8n+3) { grid-column:9 / span 4; grid-row:span 2; }
.sbp-var--3 .sbp-sec--photos .sbp-pwall__item:nth-child(8n+4),
.sbp-var--3 .sbp-sec--photos .sbp-pwall__item:nth-child(8n+5),
.sbp-var--3 .sbp-sec--photos .sbp-pwall__item:nth-child(8n+6) {
grid-column:span 4;
grid-row:span 2;
}
.sbp-var--3 .sbp-sec--photos .sbp-pwall__item:nth-child(8n+7),
.sbp-var--3 .sbp-sec--photos .sbp-pwall__item:nth-child(8n+8) {
grid-column:span 6;
grid-row:span 2;
}
/* V4 MOSAIC — denser and more rhythmic than V3, without one permanent hero. */
.sbp-var--4 .sbp-sec--photos .sbp-pwall {
grid-template-columns:repeat(12,minmax(0,1fr));
grid-auto-rows:calc(var(--pw-unit) * .78);
grid-auto-flow:dense;
gap:max(6px,calc(var(--pw-gap) * .65));
}
.sbp-var--4 .sbp-sec--photos .sbp-pwall__item { aspect-ratio:auto; border-radius:12px; }
.sbp-var--4 .sbp-sec--photos .sbp-pwall__item:nth-child(10n+1) { grid-column:span 5; grid-row:span 2; }
.sbp-var--4 .sbp-sec--photos .sbp-pwall__item:nth-child(10n+2) { grid-column:span 3; grid-row:span 1; }
.sbp-var--4 .sbp-sec--photos .sbp-pwall__item:nth-child(10n+3) { grid-column:span 4; grid-row:span 2; }
.sbp-var--4 .sbp-sec--photos .sbp-pwall__item:nth-child(10n+4) { grid-column:span 3; grid-row:span 2; }
.sbp-var--4 .sbp-sec--photos .sbp-pwall__item:nth-child(10n+5) { grid-column:span 4; grid-row:span 1; }
.sbp-var--4 .sbp-sec--photos .sbp-pwall__item:nth-child(10n+6) { grid-column:span 5; grid-row:span 2; }
.sbp-var--4 .sbp-sec--photos .sbp-pwall__item:nth-child(10n+7) { grid-column:span 4; grid-row:span 2; }
.sbp-var--4 .sbp-sec--photos .sbp-pwall__item:nth-child(10n+8) { grid-column:span 4; grid-row:span 1; }
.sbp-var--4 .sbp-sec--photos .sbp-pwall__item:nth-child(10n+9) { grid-column:span 4; grid-row:span 2; }
.sbp-var--4 .sbp-sec--photos .sbp-pwall__item:nth-child(10n+10){ grid-column:span 4; grid-row:span 1; }
/* V5 FRAMED COLLECTION — literal gallery-wall whitespace + varied mat sizes. */
.sbp-var--5 .sbp-sec--photos .sbp-pwall {
grid-template-columns:repeat(12,minmax(0,1fr));
grid-auto-flow:dense;
gap:clamp(22px,3vw,42px);
padding:clamp(28px,4vw,54px);
border:1px solid color-mix(in srgb,var(--sbp-line) 72%,transparent);
border-radius:24px;
background:color-mix(in srgb,var(--sbp-card) 42%,transparent);
}
.sbp-var--5 .sbp-sec--photos .sbp-pwall__item {
aspect-ratio:4 / 3;
padding:clamp(8px,1.2vw,14px);
border:1px solid color-mix(in srgb,var(--sbp-line) 82%,transparent);
border-radius:10px;
background:var(--sbp-card);
box-shadow:0 16px 34px -28px rgba(27,21,17,.45);
}
.sbp-var--5 .sbp-sec--photos .sbp-pwall__item .sbp-eimg,
.sbp-var--5 .sbp-sec--photos .sbp-pwall__item > img { border-radius:5px; }
.sbp-var--5 .sbp-sec--photos .sbp-pwall__item:nth-child(6n+1) { grid-column:2 / span 5; }
.sbp-var--5 .sbp-sec--photos .sbp-pwall__item:nth-child(6n+2) { grid-column:8 / span 4; aspect-ratio:3 / 4; }
.sbp-var--5 .sbp-sec--photos .sbp-pwall__item:nth-child(6n+3) { grid-column:1 / span 4; aspect-ratio:1 / 1; }
.sbp-var--5 .sbp-sec--photos .sbp-pwall__item:nth-child(6n+4) { grid-column:6 / span 5; }
.sbp-var--5 .sbp-sec--photos .sbp-pwall__item:nth-child(6n+5) { grid-column:9 / span 4; aspect-ratio:1 / 1; }
.sbp-var--5 .sbp-sec--photos .sbp-pwall__item:nth-child(6n+6) { grid-column:3 / span 5; }
/* V6 STORYBOARD — static sequence, paired and stepped rather than carousel. */
.sbp-var--6 .sbp-sec--photos .sbp-pwall {
grid-template-columns:repeat(12,minmax(0,1fr));
gap:clamp(20px,3vw,36px) clamp(18px,2.5vw,32px);
align-items:start;
}
.sbp-var--6 .sbp-sec--photos .sbp-pwall__item {
aspect-ratio:16 / 10;
overflow:visible;
border-radius:14px;
}
.sbp-var--6 .sbp-sec--photos .sbp-pwall__item:nth-child(odd) { grid-column:1 / span 7; }
.sbp-var--6 .sbp-sec--photos .sbp-pwall__item:nth-child(even) {
grid-column:8 / span 5;
margin-top:clamp(42px,6vw,82px);
}
.sbp-var--6 .sbp-sec--photos .sbp-pwall__item:nth-child(4n+3) { grid-column:2 / span 6; }
.sbp-var--6 .sbp-sec--photos .sbp-pwall__item::before {
content:counter(sbp-pwall,decimal-leading-zero);
position:absolute;
z-index:4;
top:-14px;
left:-12px;
width:38px;
height:38px;
display:grid;
place-items:center;
border:1px solid var(--sbp-indicator,var(--sbp-org-display));
border-radius:999px;
background:var(--sbp-card);
color:var(--sbp-indicator,var(--sbp-org-display));
font-size:11px;
font-weight:800;
letter-spacing:.05em;
}
/* V7 IMMERSIVE WALL — Studio/canvas reservoir: off-corner, layered and
architectural. Materially distinct from V3 because the whole wall is one
composed canvas rather than a hero plus supporting grid. */
.sbp-var--7 .sbp-sec--photos .sbp-pwall {
grid-template-columns:repeat(12,minmax(0,1fr));
grid-auto-rows:var(--pw-unit);
grid-auto-flow:dense;
gap:clamp(10px,1.6vw,20px);
padding:clamp(14px,2vw,26px) 0 clamp(34px,5vw,68px);
}
.sbp-var--7 .sbp-sec--photos .sbp-pwall__item { aspect-ratio:auto; border-radius:8px; }
.sbp-var--7 .sbp-sec--photos .sbp-pwall__item:nth-child(7n+1) {
grid-column:1 / span 9; grid-row:span 3; z-index:1;
}
.sbp-var--7 .sbp-sec--photos .sbp-pwall__item:nth-child(7n+2) {
grid-column:9 / span 4; grid-row:span 2; z-index:3;
transform:translateY(clamp(24px,4vw,58px));
box-shadow:0 24px 46px -32px rgba(24,18,14,.58);
}
.sbp-var--7 .sbp-sec--photos .sbp-pwall__item:nth-child(7n+3) {
grid-column:2 / span 5; grid-row:span 2;
}
.sbp-var--7 .sbp-sec--photos .sbp-pwall__item:nth-child(7n+4) {
grid-column:7 / span 6; grid-row:span 2;
transform:translateY(clamp(-28px,-2vw,-14px));
}
.sbp-var--7 .sbp-sec--photos .sbp-pwall__item:nth-child(7n+5) {
grid-column:1 / span 4; grid-row:span 2;
}
.sbp-var--7 .sbp-sec--photos .sbp-pwall__item:nth-child(7n+6) {
grid-column:5 / span 5; grid-row:span 2;
}
.sbp-var--7 .sbp-sec--photos .sbp-pwall__item:nth-child(7n+7) {
grid-column:10 / span 3; grid-row:span 2;
}
/* ── Photo Wall heading choreography ─────────────────────────────────────── */
.sbp-var--2 .sbp-sec--photos .sbp-head {
padding-left:clamp(18px,2vw,28px);
border-left:3px solid var(--sbp-indicator,var(--sbp-org-display));
max-width:880px;
}
.sbp-var--3 .sbp-sec--photos .sbp-head {
max-width:900px;
margin-inline:auto;
text-align:center;
}
.sbp-var--3 .sbp-sec--photos .sbp-head .sbp-kicker {
justify-content:center;
}
.sbp-var--3 .sbp-sec--photos .sbp-head .sbp-lead {
margin-inline:auto;
max-width:62ch;
}
.sbp-var--4 .sbp-sec--photos .sbp-head {
max-width:680px;
}
.sbp-var--5 .sbp-sec--photos .sbp-head {
max-width:720px;
margin-inline:auto;
text-align:center;
}
.sbp-var--5 .sbp-sec--photos .sbp-head .sbp-kicker { justify-content:center; }
.sbp-var--5 .sbp-sec--photos .sbp-head .sbp-lead { margin-inline:auto; max-width:52ch; }
.sbp-var--6 .sbp-sec--photos .sbp-head {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(260px,.72fr);
column-gap:clamp(28px,5vw,70px);
align-items:end;
}
.sbp-var--6 .sbp-sec--photos .sbp-head .sbp-kicker,
.sbp-var--6 .sbp-sec--photos .sbp-head .sbp-h2 { grid-column:1; }
.sbp-var--6 .sbp-sec--photos .sbp-head .sbp-lead {
grid-column:2;
grid-row:1 / span 2;
margin:0;
align-self:end;
}
.sbp-var--7 .sbp-sec--photos .sbp-head {
max-width:1120px;
position:relative;
padding-bottom:clamp(18px,2.6vw,34px);
}
.sbp-var--7 .sbp-sec--photos .sbp-head .sbp-h2 {
max-width:14ch;
font-size:clamp(2.35rem,5.4vw,5.2rem);
line-height:.98;
letter-spacing:-.045em;
}
.sbp-var--7 .sbp-sec--photos .sbp-head .sbp-lead {
max-width:50ch;
margin-left:auto;
margin-top:clamp(-18px,-1.5vw,-8px);
}
/* Minimal, spatial motion: a tiny settled hover only; never autoplay. */
@media (prefers-reduced-motion:no-preference) {
.sbp-sec--photos .sbp-pwall__item > img,
.sbp-sec--photos .sbp-pwall__item .sbp-eimg > img {
transition:transform .24s ease, filter .24s ease;
}
.sbp-sec--photos .sbp-pwall__item:hover > img,
.sbp-page--editing .sbp-sec--photos .sbp-pwall__item:hover .sbp-eimg > img {
transform:scale(1.012);
}
}
@media (prefers-reduced-motion:reduce) {
.sbp-sec--photos .sbp-pwall__item,
.sbp-sec--photos .sbp-pwall__item *,
.sbp-sec--photos .sbp-pwall__item::before {
transition:none !important;
animation:none !important;
transform:none !important;
}
}
/* Tablet/mobile recomposition. These are designed layouts, not squeezed desktop. */
@media (max-width:860px) {
.sbp-var--2 .sbp-sec--photos .sbp-pwall,
.sbp-var--3 .sbp-sec--photos .sbp-pwall,
.sbp-var--4 .sbp-sec--photos .sbp-pwall,
.sbp-var--7 .sbp-sec--photos .sbp-pwall {
grid-template-columns:repeat(2,minmax(0,1fr));
grid-auto-rows:auto;
gap:12px;
}
.sbp-var--2 .sbp-sec--photos .sbp-pwall__item,
.sbp-var--3 .sbp-sec--photos .sbp-pwall__item,
.sbp-var--4 .sbp-sec--photos .sbp-pwall__item,
.sbp-var--7 .sbp-sec--photos .sbp-pwall__item {
grid-column:auto !important;
grid-row:auto !important;
aspect-ratio:4 / 3;
transform:none !important;
}
.sbp-var--3 .sbp-sec--photos .sbp-pwall__item:first-child {
grid-column:1 / -1 !important;
aspect-ratio:16 / 9;
}
.sbp-var--5 .sbp-sec--photos .sbp-pwall {
grid-template-columns:repeat(2,minmax(0,1fr));
padding:24px;
}
.sbp-var--5 .sbp-sec--photos .sbp-pwall__item {
grid-column:auto !important;
aspect-ratio:4 / 3 !important;
}
.sbp-var--6 .sbp-sec--photos .sbp-head {
grid-template-columns:minmax(0,1fr);
}
.sbp-var--6 .sbp-sec--photos .sbp-head .sbp-lead {
grid-column:1;
grid-row:auto;
margin-top:10px;
}
.sbp-var--7 .sbp-sec--photos .sbp-head .sbp-lead {
margin-left:0;
margin-top:10px;
}
}
@media (max-width:620px) {
.sbp-sec--photos .sbp-pwall,
.sbp-var--2 .sbp-sec--photos .sbp-pwall,
.sbp-var--3 .sbp-sec--photos .sbp-pwall,
.sbp-var--4 .sbp-sec--photos .sbp-pwall,
.sbp-var--5 .sbp-sec--photos .sbp-pwall,
.sbp-var--6 .sbp-sec--photos .sbp-pwall,
.sbp-var--7 .sbp-sec--photos .sbp-pwall {
display:grid;
grid-template-columns:minmax(0,1fr);
gap:12px;
padding-left:0;
padding-right:0;
}
.sbp-sec--photos .sbp-pwall__item,
.sbp-var--2 .sbp-sec--photos .sbp-pwall__item,
.sbp-var--3 .sbp-sec--photos .sbp-pwall__item,
.sbp-var--4 .sbp-sec--photos .sbp-pwall__item,
.sbp-var--5 .sbp-sec--photos .sbp-pwall__item,
.sbp-var--6 .sbp-sec--photos .sbp-pwall__item,
.sbp-var--7 .sbp-sec--photos .sbp-pwall__item {
grid-column:1 !important;
grid-row:auto !important;
width:100%;
margin:0 !important;
transform:none !important;
aspect-ratio:4 / 3 !important;
}
.sbp-var--6 .sbp-sec--photos .sbp-pwall__item::before {
top:8px;
left:8px;
}
.sbp-var--7 .sbp-sec--photos .sbp-head .sbp-h2 {
font-size:clamp(2.1rem,11vw,3.5rem);
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_PHOTOWALL_ACCEPTANCE_FIX1 v1
Visual acceptance corrections from operator screenshots + recordings.
Static wall remains static; navigation lives in the photo viewer, not in a
carousel rail. V6 composition is intentionally untouched.
═══════════════════════════════════════════════════════════════════════════ */
/* Photo Wall is a composed display surface. Outside the Framed Collection,
every image must finish the tile rather than letterbox inside it. */
.sbp-sec--photos .sbp-pwall__item > img,
.sbp-sec--photos .sbp-pwall__item .sbp-eimg > img {
padding:0;
object-fit:cover !important;
object-position:center;
}
.sbp-sec--photos .sbp-pwall__item .sbp-eimg {
padding:0;
border:0;
}
/* V4 MOSAIC — keep the dense concept, but tighten its rhythm and remove the
unfinished-card feeling from pale gutters / under-filled cells. */
.sbp-var--4 .sbp-sec--photos .sbp-pwall {
grid-auto-rows:calc(var(--pw-unit) * .84);
gap:max(7px,calc(var(--pw-gap) * .72));
}
.sbp-var--4 .sbp-sec--photos .sbp-pwall__item {
background:transparent;
border-radius:11px;
}
.sbp-var--4 .sbp-sec--photos .sbp-pwall__item .sbp-eimg,
.sbp-var--4 .sbp-sec--photos .sbp-pwall__item > img {
border-radius:11px;
}
/* V5 FRAMED COLLECTION — concept retained, but the art should feel mounted,
not padded inside oversized empty cards. Natural image height determines
the frame; the mat is intentionally slim. */
.sbp-var--5 .sbp-sec--photos .sbp-pwall {
gap:clamp(16px,2.2vw,28px);
padding:clamp(18px,2.8vw,34px);
}
.sbp-var--5 .sbp-sec--photos .sbp-pwall__item {
aspect-ratio:auto !important;
padding:clamp(5px,.7vw,8px);
border-radius:9px;
align-self:start;
}
.sbp-var--5 .sbp-sec--photos .sbp-pwall__item > img,
.sbp-var--5 .sbp-sec--photos .sbp-pwall__item .sbp-eimg,
.sbp-var--5 .sbp-sec--photos .sbp-pwall__item .sbp-eimg > img {
height:auto;
min-height:0;
aspect-ratio:auto !important;
}
.sbp-var--5 .sbp-sec--photos .sbp-pwall__item > img,
.sbp-var--5 .sbp-sec--photos .sbp-pwall__item .sbp-eimg > img {
object-fit:cover !important;
border-radius:5px;
}
.sbp-var--5 .sbp-sec--photos .sbp-pwall__item:nth-child(6n+1) { grid-column:2 / span 5; }
.sbp-var--5 .sbp-sec--photos .sbp-pwall__item:nth-child(6n+2) { grid-column:8 / span 4; }
.sbp-var--5 .sbp-sec--photos .sbp-pwall__item:nth-child(6n+3) { grid-column:1 / span 4; }
.sbp-var--5 .sbp-sec--photos .sbp-pwall__item:nth-child(6n+4) { grid-column:6 / span 5; }
.sbp-var--5 .sbp-sec--photos .sbp-pwall__item:nth-child(6n+5) { grid-column:9 / span 4; }
.sbp-var--5 .sbp-sec--photos .sbp-pwall__item:nth-child(6n+6) { grid-column:3 / span 5; }
/* V7 IMMERSIVE WALL — keep the architectural image canvas, but reconnect the
description to the headline. It should read as one editorial introduction. */
.sbp-var--7 .sbp-sec--photos .sbp-head {
max-width:1040px;
}
.sbp-var--7 .sbp-sec--photos .sbp-head .sbp-h2 {
max-width:15ch;
font-size:clamp(2.35rem,5vw,4.7rem);
}
.sbp-var--7 .sbp-sec--photos .sbp-head .sbp-lead {
max-width:58ch;
margin-left:0;
margin-top:clamp(16px,2vw,24px);
}
/* Every Photo Wall can now be explored without turning its wall itself into
Gallery. The small expand control opens a navigable, keyboard-safe viewer. */
.sbp-pwall__view {
position:absolute;
z-index:5;
left:10px;
bottom:10px;
width:38px;
height:38px;
border:1px solid rgba(255,255,255,.55);
border-radius:999px;
display:grid;
place-items:center;
padding:0;
background:rgba(28,22,17,.66);
color:#fff;
box-shadow:0 8px 20px rgba(25,19,15,.16);
cursor:pointer;
opacity:.88;
transition:opacity .15s ease, transform .15s ease, background-color .15s ease;
}
.sbp-pwall__item:hover .sbp-pwall__view,
.sbp-pwall__view:focus-visible {
opacity:1;
transform:translateY(-1px);
background:rgba(28,22,17,.82);
}
.sbp-pwall__view i { pointer-events:none; }
.sbp-pwallviewer[hidden] { display:none !important; }
.sbp-pwallviewer {
position:fixed;
inset:0;
z-index:10050;
display:grid;
place-items:center;
}
.sbp-pwallviewer__backdrop {
position:absolute;
inset:0;
background:rgba(18,14,11,.84);
backdrop-filter:blur(8px);
}
.sbp-pwallviewer__dialog {
position:relative;
z-index:1;
width:min(94vw,1440px);
height:min(90vh,980px);
display:grid;
grid-template-columns:56px minmax(0,1fr) 56px;
align-items:center;
gap:14px;
}
.sbp-pwallviewer__stage {
position:relative;
margin:0;
min-width:0;
min-height:0;
width:100%;
height:100%;
display:grid;
place-items:center;
}
.sbp-pwallviewer__stage img {
display:block;
max-width:100%;
max-height:84vh;
width:auto;
height:auto;
object-fit:contain;
border-radius:12px;
box-shadow:0 28px 70px rgba(0,0,0,.34);
}
.sbp-pwallviewer__count {
position:absolute;
left:50%;
bottom:8px;
transform:translateX(-50%);
min-width:64px;
padding:6px 11px;
border-radius:999px;
background:rgba(20,16,13,.68);
color:#fff;
text-align:center;
font-size:12px;
font-weight:800;
letter-spacing:.05em;
}
.sbp-pwallviewer__nav,
.sbp-pwallviewer__close {
border:1px solid rgba(255,255,255,.28);
background:rgba(255,255,255,.94);
color:#2a211b;
cursor:pointer;
box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.sbp-pwallviewer__nav {
width:50px;
height:50px;
border-radius:999px;
font-size:30px;
line-height:1;
}
.sbp-pwallviewer__nav:disabled {
opacity:.32;
cursor:default;
}
.sbp-pwallviewer__close {
position:absolute;
z-index:2;
top:0;
right:0;
width:42px;
height:42px;
border-radius:999px;
font-size:24px;
}
html.sbp-pwallviewer-open,
html.sbp-pwallviewer-open body {
overflow:hidden !important;
}
@media (max-width:700px) {
.sbp-pwallviewer__dialog {
width:96vw;
height:92vh;
grid-template-columns:44px minmax(0,1fr) 44px;
gap:6px;
}
.sbp-pwallviewer__nav {
width:42px;
height:42px;
font-size:26px;
}
.sbp-pwallviewer__close {
top:8px;
right:8px;
}
}
@media (prefers-reduced-motion:reduce) {
.sbp-pwall__view {
transition:none;
transform:none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_PHOTOWALL_MOTION v1
Operator acceptance extension:
- V5/V6 now have material S/M/L image-scale states.
- V8 is a deliberate one-up Photo Slider.
- V9 restores cardinality-aware Adaptive Rotation.
The existing full-photo viewer remains available on every variant.
═══════════════════════════════════════════════════════════════════════════ */
/* ── S/M/L correction: V5 FRAMED COLLECTION ───────────────────────────────
Scale changes the authored wall measure, mat rhythm and therefore the actual
displayed artwork size. This is deliberately obvious, not a token no-op. */
.sbp-var--5 .sbp-sec--photos .sbp-pwall {
width:min(100%,920px);
margin-inline:auto;
}
.sbp-med--m.sbp-var--5 .sbp-sec--photos .sbp-pwall {
width:min(100%,1060px);
gap:clamp(18px,2.4vw,32px);
padding:clamp(20px,3vw,38px);
}
.sbp-med--l.sbp-var--5 .sbp-sec--photos .sbp-pwall {
width:100%;
max-width:1220px;
gap:clamp(22px,2.8vw,38px);
padding:clamp(24px,3.4vw,44px);
}
.sbp-med--m.sbp-var--5 .sbp-sec--photos .sbp-pwall__item {
padding:7px;
}
.sbp-med--l.sbp-var--5 .sbp-sec--photos .sbp-pwall__item {
padding:9px;
}
/* ── S/M/L correction: V6 STORYBOARD ──────────────────────────────────────
S is intimate; M opens the story; L lets the principal frames dominate. */
.sbp-var--6 .sbp-sec--photos .sbp-pwall {
width:min(100%,920px);
margin-inline:auto;
}
.sbp-med--m.sbp-var--6 .sbp-sec--photos .sbp-pwall {
width:min(100%,1080px);
gap:clamp(24px,3.4vw,42px) clamp(20px,2.8vw,36px);
}
.sbp-med--l.sbp-var--6 .sbp-sec--photos .sbp-pwall {
width:100%;
max-width:1240px;
gap:clamp(30px,4vw,50px) clamp(24px,3vw,42px);
}
.sbp-med--m.sbp-var--6 .sbp-sec--photos .sbp-pwall__item:nth-child(odd) {
grid-column:1 / span 8;
}
.sbp-med--m.sbp-var--6 .sbp-sec--photos .sbp-pwall__item:nth-child(even) {
grid-column:9 / span 4;
}
.sbp-med--l.sbp-var--6 .sbp-sec--photos .sbp-pwall__item:nth-child(odd) {
grid-column:1 / span 8;
}
.sbp-med--l.sbp-var--6 .sbp-sec--photos .sbp-pwall__item:nth-child(even) {
grid-column:9 / span 4;
margin-top:clamp(58px,7vw,96px);
}
/* ── Shared V8/V9 motion navigation ─────────────────────────────────────── */
.sbp-pwallmotion {
display:none;
align-items:center;
justify-content:center;
gap:10px;
margin:14px auto 4px;
}
.sbp-var--8 .sbp-sec--photos .sbp-pwallmotion,
.sbp-var--9 .sbp-sec--photos .sbp-pwallmotion {
display:flex;
}
.sbp-pwallmotion__btn {
width:42px;
height:42px;
border:1px solid var(--sbp-line);
border-radius:999px;
display:grid;
place-items:center;
padding:0;
background:var(--sbp-card);
color:var(--sbp-acc-ink);
box-shadow:var(--sbp-shadow);
cursor:pointer;
font-size:23px;
line-height:1;
}
.sbp-pwallmotion__btn:disabled {
opacity:.32;
cursor:default;
}
.sbp-pwallmotion__pages {
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:6px;
max-width:min(48vw,280px);
}
.sbp-pwallmotion__dot {
width:8px;
height:8px;
padding:0;
border:0;
border-radius:999px;
background:color-mix(in srgb,var(--sbp-acc) 28%,var(--sbp-line));
cursor:pointer;
}
.sbp-pwallmotion__dot.is-active {
width:22px;
background:var(--sbp-acc);
}
.sbp-pwallmotion__count {
min-width:42px;
color:var(--sbp-mut);
font-size:11px;
font-weight:800;
font-variant-numeric:tabular-nums;
text-align:center;
}
/* ── V8 PHOTO SLIDER ──────────────────────────────────────────────────────
One intentional photograph at a time, with arrows + pagination. */
.sbp-var--8 .sbp-sec--photos .sbp-head {
max-width:820px;
margin-inline:auto;
text-align:center;
}
.sbp-var--8 .sbp-sec--photos .sbp-head .sbp-kicker {
justify-content:center;
}
.sbp-var--8 .sbp-sec--photos .sbp-head .sbp-lead {
max-width:58ch;
margin-inline:auto;
}
.sbp-var--8 .sbp-sec--photos .sbp-pwall {
display:block;
width:min(100%,820px);
margin-inline:auto;
padding-bottom:0;
}
.sbp-var--8 .sbp-sec--photos .sbp-pwall__item {
display:none;
width:100%;
aspect-ratio:16 / 10;
border-radius:18px;
}
.sbp-var--8 .sbp-sec--photos .sbp-pwall__item.is-pw-active {
display:block;
}
.sbp-var--8 .sbp-sec--photos .sbp-pwall__item > img,
.sbp-var--8 .sbp-sec--photos .sbp-pwall__item .sbp-eimg,
.sbp-var--8 .sbp-sec--photos .sbp-pwall__item .sbp-eimg > img {
width:100%;
height:100%;
}
.sbp-med--m.sbp-var--8 .sbp-sec--photos .sbp-pwall {
width:min(100%,980px);
}
.sbp-med--l.sbp-var--8 .sbp-sec--photos .sbp-pwall {
width:min(100%,1160px);
}
.sbp-med--l.sbp-var--8 .sbp-sec--photos .sbp-pwall__item {
aspect-ratio:16 / 9;
}
/* ── V9 ADAPTIVE ROTATION ─────────────────────────────────────────────────
Original cardinality law, upgraded:
1 = one image.
2 = large-left + one right image.
3-5 = large-left + two stacked right; arrows/dots rotate every source image
through the large featured position.
6+ = the same featured three-up stage + three-image row below; arrows/dots
rotate the full source set through all six visible positions.
Mobile 2+ = one-up slider, preserving useful image size.
No autoplay timer exists. */
.sbp-var--9 .sbp-sec--photos .sbp-head {
max-width:920px;
}
.sbp-var--9 .sbp-sec--photos .sbp-pwall {
display:grid;
grid-template-columns:repeat(12,minmax(0,1fr));
grid-template-rows:repeat(3,minmax(128px,var(--pw-unit)));
grid-auto-rows:minmax(128px,var(--pw-unit));
gap:12px;
width:min(100%,1080px);
margin-inline:auto;
padding-bottom:0;
}
.sbp-var--9 .sbp-sec--photos .sbp-pwall__item {
display:none;
aspect-ratio:auto;
min-height:0;
border-radius:14px;
}
.sbp-var--9 .sbp-sec--photos .sbp-pwall__item.pw-slot-1,
.sbp-var--9 .sbp-sec--photos .sbp-pwall__item.pw-slot-2,
.sbp-var--9 .sbp-sec--photos .sbp-pwall__item.pw-slot-3,
.sbp-var--9 .sbp-sec--photos .sbp-pwall__item.pw-slot-4,
.sbp-var--9 .sbp-sec--photos .sbp-pwall__item.pw-slot-5,
.sbp-var--9 .sbp-sec--photos .sbp-pwall__item.pw-slot-6 {
display:block;
}
/* n=1 */
.sbp-var--9 .sbp-sec--photos .sbp-pwall.is-pw-one {
display:block;
}
.sbp-var--9 .sbp-sec--photos .sbp-pwall.is-pw-one .pw-slot-1 {
width:100%;
aspect-ratio:16 / 9;
}
/* n=2 */
.sbp-var--9 .sbp-sec--photos .sbp-pwall.is-pw-two .pw-slot-1 {
grid-column:1 / span 8;
grid-row:1 / span 2;
}
.sbp-var--9 .sbp-sec--photos .sbp-pwall.is-pw-two .pw-slot-2 {
grid-column:9 / span 4;
grid-row:1 / span 2;
}
/* n=3-5 */
.sbp-var--9 .sbp-sec--photos .sbp-pwall.is-pw-threeup .pw-slot-1,
.sbp-var--9 .sbp-sec--photos .sbp-pwall.is-pw-sixplus .pw-slot-1 {
grid-column:1 / span 8;
grid-row:1 / span 2;
}
.sbp-var--9 .sbp-sec--photos .sbp-pwall.is-pw-threeup .pw-slot-2,
.sbp-var--9 .sbp-sec--photos .sbp-pwall.is-pw-sixplus .pw-slot-2 {
grid-column:9 / span 4;
grid-row:1;
}
.sbp-var--9 .sbp-sec--photos .sbp-pwall.is-pw-threeup .pw-slot-3,
.sbp-var--9 .sbp-sec--photos .sbp-pwall.is-pw-sixplus .pw-slot-3 {
grid-column:9 / span 4;
grid-row:2;
}
/* 6+ second row */
.sbp-var--9 .sbp-sec--photos .sbp-pwall.is-pw-sixplus .pw-slot-4 {
grid-column:1 / span 4;
grid-row:3;
}
.sbp-var--9 .sbp-sec--photos .sbp-pwall.is-pw-sixplus .pw-slot-5 {
grid-column:5 / span 4;
grid-row:3;
}
.sbp-var--9 .sbp-sec--photos .sbp-pwall.is-pw-sixplus .pw-slot-6 {
grid-column:9 / span 4;
grid-row:3;
}
.sbp-var--9 .sbp-sec--photos .sbp-pwall__item > img,
.sbp-var--9 .sbp-sec--photos .sbp-pwall__item .sbp-eimg,
.sbp-var--9 .sbp-sec--photos .sbp-pwall__item .sbp-eimg > img {
width:100%;
height:100%;
object-fit:cover !important;
}
.sbp-med--m.sbp-var--9 .sbp-sec--photos .sbp-pwall {
width:min(100%,1180px);
gap:14px;
}
.sbp-med--l.sbp-var--9 .sbp-sec--photos .sbp-pwall {
width:100%;
max-width:1280px;
gap:16px;
grid-template-rows:repeat(3,minmax(150px,calc(var(--pw-unit) * 1.08)));
}
@media (max-width:760px) {
.sbp-var--8 .sbp-sec--photos .sbp-pwall,
.sbp-var--9 .sbp-sec--photos .sbp-pwall,
.sbp-var--9 .sbp-sec--photos .sbp-pwall.is-pw-one {
display:block;
width:100%;
}
.sbp-var--8 .sbp-sec--photos .sbp-pwall__item,
.sbp-var--9 .sbp-sec--photos .sbp-pwall__item,
.sbp-var--9 .sbp-sec--photos .sbp-pwall__item.pw-slot-2,
.sbp-var--9 .sbp-sec--photos .sbp-pwall__item.pw-slot-3,
.sbp-var--9 .sbp-sec--photos .sbp-pwall__item.pw-slot-4,
.sbp-var--9 .sbp-sec--photos .sbp-pwall__item.pw-slot-5,
.sbp-var--9 .sbp-sec--photos .sbp-pwall__item.pw-slot-6 {
display:none;
}
.sbp-var--8 .sbp-sec--photos .sbp-pwall__item.is-pw-active,
.sbp-var--9 .sbp-sec--photos .sbp-pwall__item.pw-slot-1 {
display:block;
width:100%;
aspect-ratio:4 / 3 !important;
}
.sbp-pwallmotion__pages {
max-width:42vw;
}
}
@media (prefers-reduced-motion:reduce) {
.sbp-pwallmotion__dot,
.sbp-pwallmotion__btn {
transition:none;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_COLUMNS_PREMIUM v1 — Highlights / Columns premium family.
Seven materially different whole-section compositions over the same
three-item content contract. S/M/L changes measure, spacing and hierarchy.
═══════════════════════════════════════════════════════════════════════════ */
.sbp-sec--columns {
--col-max:980px;
--col-gap:clamp(18px,2.6vw,30px);
--col-pad:clamp(18px,2.2vw,26px);
--col-title:clamp(1rem,1.25vw,1.12rem);
--col-body:14.5px;
--col-index:12px;
}
.sbp-sec--columns .sbp-sw {
max-width:min(var(--col-max),94vw);
}
.sbp-sec--columns .sbp-cols {
margin-top:clamp(22px,3vw,34px);
gap:var(--col-gap);
}
.sbp-sec--columns .sbp-col {
position:relative;
min-width:0;
}
.sbp-sec--columns .sbp-col__copy {
min-width:0;
}
.sbp-sec--columns .sbp-col__index {
display:none;
color:var(--sbp-indicator,var(--sbp-org-display));
font-size:var(--col-index);
font-weight:800;
letter-spacing:.08em;
}
.sbp-sec--columns .sbp-col__t {
font-size:var(--col-title);
}
.sbp-sec--columns .sbp-col__b {
font-size:var(--col-body);
}
.sbp-sec--columns .sbp-cols__add {
margin-top:16px;
}
/* S/M/L. Default = S. Each step changes real section geometry, not merely font. */
.sbp-med--m .sbp-sec--columns {
--col-max:1120px;
--col-gap:clamp(24px,3.2vw,40px);
--col-pad:clamp(22px,2.8vw,34px);
--col-title:clamp(1.08rem,1.45vw,1.28rem);
--col-body:15px;
--col-index:13px;
}
.sbp-med--l .sbp-sec--columns {
--col-max:1280px;
--col-gap:clamp(28px,3.8vw,52px);
--col-pad:clamp(28px,3.4vw,44px);
--col-title:clamp(1.18rem,1.7vw,1.48rem);
--col-body:16px;
--col-index:14px;
}
/* V1 CLASSIC COLUMNS — preserve the quiet baseline, but make it intentional. */
.sbp-var--1 .sbp-sec--columns .sbp-cols {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
}
.sbp-var--1 .sbp-sec--columns .sbp-col {
padding-right:clamp(4px,1vw,14px);
}
.sbp-var--1 .sbp-sec--columns .sbp-col__t {
padding-top:16px;
}
.sbp-var--1 .sbp-sec--columns .sbp-col__t::before {
width:32px;
}
/* V2 EDITORIAL CARDS — complete change from open canvas to tactile cards. */
.sbp-var--2 .sbp-sec--columns .sbp-head {
max-width:840px;
padding-left:clamp(18px,2vw,28px);
border-left:3px solid var(--sbp-indicator,var(--sbp-org-display));
}
.sbp-var--2 .sbp-sec--columns .sbp-cols {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
}
.sbp-var--2 .sbp-sec--columns .sbp-col {
min-height:220px;
padding:var(--col-pad);
border:1px solid var(--sbp-line);
border-radius:var(--sbp-r-lg);
background:color-mix(in srgb,var(--sbp-card) 92%,var(--sbp-field-a));
box-shadow:0 18px 42px -36px rgba(28,21,16,.5);
}
.sbp-var--2 .sbp-sec--columns .sbp-col__index {
display:block;
margin-bottom:clamp(32px,4vw,58px);
}
.sbp-var--2 .sbp-sec--columns .sbp-col__t {
padding-top:0;
}
.sbp-var--2 .sbp-sec--columns .sbp-col__t::before {
display:none;
}
/* V3 STATEMENT ROWS — full-width editorial ledger, not cards. */
.sbp-var--3 .sbp-sec--columns .sbp-head {
max-width:900px;
margin-inline:auto;
text-align:center;
}
.sbp-var--3 .sbp-sec--columns .sbp-head .sbp-kicker {
justify-content:center;
}
.sbp-var--3 .sbp-sec--columns .sbp-head .sbp-lead {
max-width:62ch;
margin-inline:auto;
}
.sbp-var--3 .sbp-sec--columns .sbp-cols {
display:flex;
flex-direction:column;
gap:0;
border-top:1px solid var(--sbp-line);
}
.sbp-var--3 .sbp-sec--columns .sbp-col {
display:grid;
grid-template-columns:clamp(54px,7vw,96px) minmax(180px,.68fr) minmax(0,1.32fr);
gap:clamp(18px,3vw,42px);
align-items:start;
padding:clamp(22px,3vw,34px) 0;
border-bottom:1px solid var(--sbp-line);
}
.sbp-var--3 .sbp-sec--columns .sbp-col__index {
display:block;
font-size:clamp(1.5rem,3.8vw,3.6rem);
line-height:1;
letter-spacing:-.04em;
color:color-mix(in srgb,var(--sbp-indicator,var(--sbp-org-display)) 75%,var(--sbp-mut));
}
.sbp-var--3 .sbp-sec--columns .sbp-col__copy {
display:contents;
}
.sbp-var--3 .sbp-sec--columns .sbp-col__t {
grid-column:2;
padding-top:0;
margin:0;
font-size:clamp(1.22rem,2vw,1.8rem);
}
.sbp-var--3 .sbp-sec--columns .sbp-col__t::before {
display:none;
}
.sbp-var--3 .sbp-sec--columns .sbp-col__b {
grid-column:3;
margin:2px 0 0;
max-width:62ch;
}
.sbp-var--3 .sbp-sec--columns .sbp-col__cta {
grid-column:3;
}
/* V4 NUMBERED STEPS — horizontal progression with a connected spine. */
.sbp-var--4 .sbp-sec--columns .sbp-head {
max-width:760px;
}
.sbp-var--4 .sbp-sec--columns .sbp-cols {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
position:relative;
padding-top:14px;
}
.sbp-var--4 .sbp-sec--columns .sbp-cols::before {
content:"";
position:absolute;
top:37px;
left:calc(16.66% + 17px);
right:calc(16.66% + 17px);
height:1px;
background:color-mix(in srgb,var(--sbp-indicator,var(--sbp-org-display)) 34%,var(--sbp-line));
}
.sbp-var--4 .sbp-sec--columns .sbp-col {
padding:0 var(--col-pad) var(--col-pad);
text-align:left;
}
.sbp-var--4 .sbp-sec--columns .sbp-col__index {
position:relative;
z-index:2;
display:grid;
place-items:center;
width:48px;
height:48px;
margin-bottom:24px;
border:1px solid var(--sbp-indicator,var(--sbp-org-display));
border-radius:999px;
background:var(--sbp-card);
}
.sbp-var--4 .sbp-sec--columns .sbp-col__t {
padding-top:0;
}
.sbp-var--4 .sbp-sec--columns .sbp-col__t::before {
display:none;
}
/* V5 BENTO HIGHLIGHTS — wide lead tile + two supporting tiles. */
.sbp-var--5 .sbp-sec--columns .sbp-head {
max-width:820px;
margin-inline:auto;
text-align:center;
}
.sbp-var--5 .sbp-sec--columns .sbp-head .sbp-kicker {
justify-content:center;
}
.sbp-var--5 .sbp-sec--columns .sbp-head .sbp-lead {
margin-inline:auto;
max-width:58ch;
}
.sbp-var--5 .sbp-sec--columns .sbp-cols {
display:grid;
grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);
grid-template-rows:repeat(2,minmax(150px,auto));
gap:var(--col-gap);
}
.sbp-var--5 .sbp-sec--columns .sbp-col {
padding:var(--col-pad);
border:1px solid var(--sbp-line);
border-radius:var(--sbp-r-lg);
background:var(--sbp-card);
}
.sbp-var--5 .sbp-sec--columns .sbp-col:first-child {
grid-column:1;
grid-row:1 / span 2;
min-height:calc(300px + var(--col-gap));
display:flex;
flex-direction:column;
justify-content:flex-end;
background:
radial-gradient(120% 110% at 90% 8%, color-mix(in srgb,var(--sbp-indicator,var(--sbp-org-display)) 13%,transparent), transparent 58%),
var(--sbp-card);
}
.sbp-var--5 .sbp-sec--columns .sbp-col:nth-child(2) {
grid-column:2;
grid-row:1;
}
.sbp-var--5 .sbp-sec--columns .sbp-col:nth-child(3) {
grid-column:2;
grid-row:2;
}
.sbp-var--5 .sbp-sec--columns .sbp-col__index {
display:block;
margin-bottom:auto;
padding-bottom:clamp(24px,4vw,54px);
}
.sbp-var--5 .sbp-sec--columns .sbp-col__t {
padding-top:0;
}
.sbp-var--5 .sbp-sec--columns .sbp-col__t::before {
display:none;
}
.sbp-var--5 .sbp-sec--columns .sbp-col:first-child .sbp-col__t {
font-size:clamp(1.65rem,3.1vw,2.7rem);
max-width:14ch;
}
/* V6 SPLIT FEATURE — header and highlights become one two-column composition. */
.sbp-var--6 .sbp-sec--columns .sbp-sw {
display:grid;
grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr);
gap:clamp(34px,6vw,90px);
align-items:start;
}
.sbp-var--6 .sbp-sec--columns .sbp-head {
position:sticky;
top:96px;
max-width:none;
}
.sbp-var--6 .sbp-sec--columns .sbp-head .sbp-h2 {
font-size:clamp(2.25rem,4.6vw,4.8rem);
line-height:1;
letter-spacing:-.04em;
}
.sbp-var--6 .sbp-sec--columns .sbp-cols {
display:flex;
flex-direction:column;
gap:0;
margin-top:0;
border-top:1px solid var(--sbp-line);
}
.sbp-var--6 .sbp-sec--columns .sbp-col {
display:grid;
grid-template-columns:56px minmax(0,1fr);
gap:18px;
padding:clamp(24px,3vw,38px) 0;
border-bottom:1px solid var(--sbp-line);
}
.sbp-var--6 .sbp-sec--columns .sbp-col__index {
display:block;
padding-top:3px;
}
.sbp-var--6 .sbp-sec--columns .sbp-col__t {
padding-top:0;
font-size:clamp(1.18rem,1.8vw,1.55rem);
}
.sbp-var--6 .sbp-sec--columns .sbp-col__t::before {
display:none;
}
/* V7 SIGNATURE INDEX — full deep destination with knockout editorial index. */
.sbp-var--7 .sbp-sec--columns .sbp-sw {
max-width:min(var(--col-max),94vw);
padding:clamp(30px,5vw,68px);
border-radius:24px;
background:var(--sbp-ink);
color:var(--sbp-card);
}
.sbp-var--7 .sbp-sec--columns .sbp-head {
display:grid;
grid-template-columns:minmax(0,1.12fr) minmax(260px,.88fr);
gap:clamp(24px,5vw,72px);
align-items:end;
color:var(--sbp-card);
}
.sbp-var--7 .sbp-sec--columns .sbp-head .sbp-kicker,
.sbp-var--7 .sbp-sec--columns .sbp-head .sbp-h2,
.sbp-var--7 .sbp-sec--columns .sbp-head .sbp-lead {
color:var(--sbp-card);
}
.sbp-var--7 .sbp-sec--columns .sbp-head .sbp-kicker,
.sbp-var--7 .sbp-sec--columns .sbp-head .sbp-h2 {
grid-column:1;
}
.sbp-var--7 .sbp-sec--columns .sbp-head .sbp-h2 {
font-size:clamp(2.45rem,5vw,5.4rem);
line-height:.98;
letter-spacing:-.045em;
}
.sbp-var--7 .sbp-sec--columns .sbp-head .sbp-lead {
grid-column:2;
grid-row:1 / span 2;
margin:0;
opacity:.76;
}
.sbp-var--7 .sbp-sec--columns .sbp-cols {
display:flex;
flex-direction:column;
gap:0;
margin-top:clamp(34px,5vw,64px);
border-top:1px solid rgba(255,255,255,.18);
}
.sbp-var--7 .sbp-sec--columns .sbp-col {
display:grid;
grid-template-columns:clamp(70px,10vw,150px) minmax(180px,.7fr) minmax(0,1.3fr);
gap:clamp(20px,3vw,44px);
align-items:start;
padding:clamp(24px,3.4vw,42px) 0;
border-bottom:1px solid rgba(255,255,255,.16);
}
.sbp-var--7 .sbp-sec--columns .sbp-col__index {
display:block;
font-size:clamp(2.1rem,5vw,5.8rem);
line-height:.86;
letter-spacing:-.05em;
color:color-mix(in srgb,var(--sbp-indicator,var(--sbp-org-display)) 78%,white);
}
.sbp-var--7 .sbp-sec--columns .sbp-col__copy {
display:contents;
}
.sbp-var--7 .sbp-sec--columns .sbp-col__t {
grid-column:2;
padding-top:0;
margin:0;
color:#fff;
font-size:clamp(1.3rem,2.2vw,2rem);
}
.sbp-var--7 .sbp-sec--columns .sbp-col__t::before {
display:none;
}
.sbp-var--7 .sbp-sec--columns a.sbp-col__link {
color:#fff;
}
.sbp-var--7 .sbp-sec--columns .sbp-col__b {
grid-column:3;
color:rgba(255,255,255,.72);
}
.sbp-var--7 .sbp-sec--columns .sbp-col__cta {
grid-column:3;
color:color-mix(in srgb,var(--sbp-indicator,var(--sbp-org-display)) 78%,white);
}
/* Scale-specific hierarchy changes inside the most structural variants. */
.sbp-med--m.sbp-var--5 .sbp-sec--columns .sbp-cols {
grid-template-columns:minmax(0,1.38fr) minmax(280px,.62fr);
}
.sbp-med--l.sbp-var--5 .sbp-sec--columns .sbp-cols {
grid-template-columns:minmax(0,1.52fr) minmax(300px,.48fr);
}
.sbp-med--m.sbp-var--6 .sbp-sec--columns .sbp-sw {
grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr);
}
.sbp-med--l.sbp-var--6 .sbp-sec--columns .sbp-sw {
grid-template-columns:minmax(360px,.9fr) minmax(0,1.1fr);
}
.sbp-med--m.sbp-var--7 .sbp-sec--columns .sbp-sw {
padding:clamp(38px,5.6vw,78px);
}
.sbp-med--l.sbp-var--7 .sbp-sec--columns .sbp-sw {
padding:clamp(46px,6.4vw,92px);
}
/* Subtle composition motion, never decorative noise. */
@media (prefers-reduced-motion:no-preference) {
.sbp-sec--columns .sbp-col {
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sbp-var--2 .sbp-sec--columns .sbp-col:hover,
.sbp-var--5 .sbp-sec--columns .sbp-col:hover {
transform:translateY(-3px);
box-shadow:0 22px 48px -34px rgba(28,21,16,.42);
}
}
@media (prefers-reduced-motion:reduce) {
.sbp-sec--columns .sbp-col,
.sbp-sec--columns .sbp-col * {
transition:none !important;
animation:none !important;
transform:none !important;
}
}
/* Tablet/mobile recomposition. */
@media (max-width:860px) {
.sbp-var--1 .sbp-sec--columns .sbp-cols,
.sbp-var--2 .sbp-sec--columns .sbp-cols,
.sbp-var--4 .sbp-sec--columns .sbp-cols {
grid-template-columns:minmax(0,1fr);
}
.sbp-var--4 .sbp-sec--columns .sbp-cols::before {
display:none;
}
.sbp-var--5 .sbp-sec--columns .sbp-cols {
grid-template-columns:minmax(0,1fr);
grid-template-rows:auto;
}
.sbp-var--5 .sbp-sec--columns .sbp-col,
.sbp-var--5 .sbp-sec--columns .sbp-col:first-child,
.sbp-var--5 .sbp-sec--columns .sbp-col:nth-child(2),
.sbp-var--5 .sbp-sec--columns .sbp-col:nth-child(3) {
grid-column:1;
grid-row:auto;
min-height:0;
}
.sbp-var--6 .sbp-sec--columns .sbp-sw {
grid-template-columns:minmax(0,1fr);
}
.sbp-var--6 .sbp-sec--columns .sbp-head {
position:relative;
top:auto;
}
.sbp-var--7 .sbp-sec--columns .sbp-head {
grid-template-columns:minmax(0,1fr);
}
.sbp-var--7 .sbp-sec--columns .sbp-head .sbp-lead {
grid-column:1;
grid-row:auto;
margin-top:12px;
}
}
@media (max-width:620px) {
.sbp-var--3 .sbp-sec--columns .sbp-col,
.sbp-var--7 .sbp-sec--columns .sbp-col {
grid-template-columns:52px minmax(0,1fr);
gap:14px;
}
.sbp-var--3 .sbp-sec--columns .sbp-col__index,
.sbp-var--7 .sbp-sec--columns .sbp-col__index {
grid-column:1;
grid-row:1 / span 2;
font-size:1.8rem;
}
.sbp-var--3 .sbp-sec--columns .sbp-col__t,
.sbp-var--3 .sbp-sec--columns .sbp-col__b,
.sbp-var--3 .sbp-sec--columns .sbp-col__cta,
.sbp-var--7 .sbp-sec--columns .sbp-col__t,
.sbp-var--7 .sbp-sec--columns .sbp-col__b,
.sbp-var--7 .sbp-sec--columns .sbp-col__cta {
grid-column:2;
}
.sbp-var--7 .sbp-sec--columns .sbp-sw {
padding:28px 20px;
border-radius:18px;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_COLUMNS_ACCEPTANCE_FIX1 v1
Fixes inherited legacy V2 card internals, count-aware geometry and V4 live
additions. The seven premium silhouettes remain intact.
═══════════════════════════════════════════════════════════════════════════ */
/* V1/V2 must use the number of real rows, not reserve an invisible third slot. */
.sbp-var--1 .sbp-sec--columns .sbp-cols[data-n="1"],
.sbp-var--2 .sbp-sec--columns .sbp-cols[data-n="1"] {
grid-template-columns:minmax(0,1fr);
max-width:620px;
}
.sbp-var--1 .sbp-sec--columns .sbp-cols[data-n="2"],
.sbp-var--2 .sbp-sec--columns .sbp-cols[data-n="2"] {
grid-template-columns:repeat(2,minmax(0,1fr));
}
/* Old pre-premium V2 gave every .sbp-cols child its own two-column grid.
Premium V2 cards are vertical editorial cards, so explicitly reset it. */
.sbp-var--2 .sbp-sec--columns .sbp-col {
display:block;
}
.sbp-var--2 .sbp-sec--columns .sbp-col__copy {
display:block;
}
/* V4 progression is count-aware. Live additions no longer leave a phantom
third track or a spine running through empty space. */
.sbp-var--4 .sbp-sec--columns .sbp-cols[data-n="1"] {
grid-template-columns:minmax(0,520px);
}
.sbp-var--4 .sbp-sec--columns .sbp-cols[data-n="1"]::before {
display:none;
}
.sbp-var--4 .sbp-sec--columns .sbp-cols[data-n="2"] {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.sbp-var--4 .sbp-sec--columns .sbp-cols[data-n="2"]::before {
left:calc(25% + 18px);
right:calc(25% + 18px);
}
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_MEDIA_SCALE_V2 + COLUMNS_LONGFORM_V6_ACCEPTANCE v1
Media gains truthful S/M/L. Highlights reserves long-form additions for V6.
═══════════════════════════════════════════════════════════════════════════ */
/* MEDIA S/M/L — real geometry, not a cosmetic label. */
.sbp-sec--media {
--media-max:1040px;
--media-gap:clamp(16px,2.4vw,28px);
--media-stage-max:430px;
}
.sbp-sec--media .sbp-sw {
max-width:min(var(--media-max),94vw);
}
.sbp-med--m .sbp-sec--media {
--media-max:1160px;
--media-gap:clamp(20px,2.8vw,34px);
--media-stage-max:500px;
}
.sbp-med--l .sbp-sec--media {
--media-max:1280px;
--media-gap:clamp(24px,3.2vw,42px);
--media-stage-max:580px;
}
.sbp-var--3 .sbp-sec--media .sbp-mediax__stagebody {
max-height:var(--media-stage-max);
}
.sbp-med--m.sbp-var--4 .sbp-sec--media .sbp-mediax__stage { width:min(100%,560px); }
.sbp-med--l.sbp-var--4 .sbp-sec--media .sbp-mediax__stage { width:min(100%,620px); }
.sbp-med--m.sbp-var--6 .sbp-sec--media .sbp-mediax__item { flex-basis:clamp(290px,32vw,390px); }
.sbp-med--l.sbp-var--6 .sbp-sec--media .sbp-mediax__item { flex-basis:clamp(330px,35vw,440px); }
/* Highlights 4-8 belong to V6 only. Switching away never deletes them, but
the concise variants remain deliberately three-item compositions. */
.sbp-var--1 .sbp-sec--columns .sbp-col:nth-child(n+4),
.sbp-var--2 .sbp-sec--columns .sbp-col:nth-child(n+4),
.sbp-var--3 .sbp-sec--columns .sbp-col:nth-child(n+4),
.sbp-var--4 .sbp-sec--columns .sbp-col:nth-child(n+4),
.sbp-var--5 .sbp-sec--columns .sbp-col:nth-child(n+4),
.sbp-var--7 .sbp-sec--columns .sbp-col:nth-child(n+4) {
display:none !important;
}
/* V6 Split Feature is the intentional long-form Highlights composition.
Restore a calmer header, then let extra items become supporting notes. */
.sbp-var--6 .sbp-sec--columns .sbp-sw {
grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);
gap:clamp(34px,5vw,74px);
}
.sbp-var--6 .sbp-sec--columns .sbp-head {
position:relative;
top:auto;
max-width:540px;
padding-top:4px;
}
.sbp-var--6 .sbp-sec--columns .sbp-head .sbp-h2 {
max-width:12ch;
font-size:clamp(2.05rem,3.8vw,4rem);
line-height:1.02;
}
.sbp-var--6 .sbp-sec--columns .sbp-head .sbp-lead {
max-width:42ch;
margin-top:14px;
}
.sbp-var--6 .sbp-sec--columns .sbp-col:nth-child(n+4) {
grid-template-columns:44px minmax(0,1fr);
padding:18px 0;
}
.sbp-var--6 .sbp-sec--columns .sbp-col:nth-child(n+4) .sbp-col__index {
opacity:.68;
font-size:11px;
}
.sbp-var--6 .sbp-sec--columns .sbp-col:nth-child(n+4) .sbp-col__t {
font-size:1rem;
}
.sbp-var--6 .sbp-sec--columns .sbp-col:nth-child(n+4) .sbp-col__b {
font-size:13.5px;
line-height:1.65;
color:var(--sbp-mut);
}
.sbp-var--6 .sbp-sec--columns .sbp-cols__add::after {
content:" · Split Feature supports up to 8 highlights";
font-size:11px;
font-weight:600;
opacity:.62;
}
@media (max-width:860px) {
.sbp-var--6 .sbp-sec--columns .sbp-sw {
grid-template-columns:minmax(0,1fr);
}
.sbp-var--6 .sbp-sec--columns .sbp-head {
max-width:680px;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_MEDIA_HIGHLIGHTS_ACCEPTANCE_FIX4 v1
Consolidated visual acceptance correction:
- restore protected V1 media balance;
- make V2 S/M/L intuitive;
- prioritise media-list width in V1/V4;
- centre every media icon;
- Highlights content parity across V1-V7;
- robust layouts for >3 highlights.
═══════════════════════════════════════════════════════════════════════════ */
/* MEDIA ICON LAW — the glyph sits in the optical centre of its shape in every
current media composition, including disabled/new rows. */
.sbp-sec--media .sbp-medialrow__visual,
.sbp-sec--media .sbp-medialrow__play,
.sbp-sec--media .sbp-mediax__visual,
.sbp-sec--media .sbp-mediax__go {
align-items:center;
justify-content:center;
}
.sbp-sec--media .sbp-medialrow__visual,
.sbp-sec--media .sbp-medialrow__play {
display:grid;
place-items:center;
line-height:1;
}
.sbp-sec--media .sbp-medialrow__visual i,
.sbp-sec--media .sbp-medialrow__play i,
.sbp-sec--media .sbp-mediax__visual i,
.sbp-sec--media .sbp-mediax__go i {
display:block;
line-height:1;
margin:0;
transform:none;
}
.sbp-sec--media .sbp-medialrow__visual i::before,
.sbp-sec--media .sbp-medialrow__play i::before,
.sbp-sec--media .sbp-mediax__visual i::before,
.sbp-sec--media .sbp-mediax__go i::before {
display:block;
line-height:1;
}
/* MEDIA SCALE LAW v3.
S = compact collection, M = standard, L = deliberately larger media.
The section does not simply become wider and accidentally fit MORE cards. */
.sbp-sec--media {
--media-max:1080px;
--media-gap:18px;
--media-v1-rail:390px;
--media-v4-stage:500px; /* v1.7 operator: prominence pass */
--media-v2-card-min:220px;
}
.sbp-med--m .sbp-sec--media {
--media-max:1130px;
--media-gap:22px;
--media-v1-rail:430px;
--media-v4-stage:560px;
--media-v2-card-min:280px;
}
.sbp-med--l .sbp-sec--media {
--media-max:1180px;
--media-gap:26px;
--media-v1-rail:470px;
--media-v4-stage:620px;
--media-v2-card-min:340px;
}
.sbp-sec--media .sbp-sw {
max-width:min(var(--media-max),94vw);
}
/* V1 DEFAULT SPLIT — restore the accepted silhouette.
Player keeps real presence; playlist gets a content-aware minimum width and
scrolls internally when long instead of invading the stage. */
.sbp-var--1 .sbp-sec--media .sbp-mediaedit {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(var(--media-v1-rail),.92fr);
gap:var(--media-gap);
align-items:start;
overflow:visible;
}
.sbp-var--1 .sbp-sec--media .sbp-mediaedit__stage {
width:100%;
aspect-ratio:16/9;
min-height:0;
max-height:none;
}
.sbp-var--1 .sbp-sec--media .sbp-medialist-edit {
width:100%;
min-width:0;
max-height:470px;
overflow-y:auto;
overflow-x:hidden;
}
.sbp-med--m.sbp-var--1 .sbp-sec--media .sbp-medialist-edit { max-height:510px; }
.sbp-med--l.sbp-var--1 .sbp-sec--media .sbp-medialist-edit { max-height:550px; }
/* V2 MEDIA LIBRARY — scale means card size, not "more columns".
S ≈ four compact cards, M ≈ three standard cards, L ≈ two/three large cards
depending on the real container. */
.sbp-var--2 .sbp-sec--media .sbp-medialist-edit,
.sbp-var--2 .sbp-sec--media .sbp-mediax__track {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--media-v2-card-min)),1fr));
gap:var(--media-gap);
}
.sbp-var--2 .sbp-sec--media .sbp-medialrow,
.sbp-var--2 .sbp-sec--media .sbp-mediax__item {
min-width:0;
}
.sbp-med--m.sbp-var--2 .sbp-sec--media .sbp-medialrow__visual,
.sbp-med--m.sbp-var--2 .sbp-sec--media .sbp-mediax__visual {
aspect-ratio:16/10;
}
.sbp-med--l.sbp-var--2 .sbp-sec--media .sbp-medialrow__visual,
.sbp-med--l.sbp-var--2 .sbp-sec--media .sbp-mediax__visual {
aspect-ratio:16/9;
}
/* V4 AUDIO LOUNGE — keep the circular player restrained. The list is the
useful information column, so it receives more width whenever available. */
.sbp-var--4 .sbp-sec--media .sbp-mediaedit,
.sbp-var--4 .sbp-sec--media .sbp-mediax {
grid-template-columns:minmax(260px,.68fr) minmax(420px,1.32fr);
gap:clamp(26px,4vw,54px);
align-items:center;
}
.sbp-var--4 .sbp-sec--media .sbp-mediaedit__stage,
.sbp-var--4 .sbp-sec--media .sbp-mediax__stage {
width:min(100%,var(--media-v4-stage));
justify-self:center;
}
.sbp-var--4 .sbp-sec--media .sbp-medialist-edit,
.sbp-var--4 .sbp-sec--media .sbp-mediax__track {
min-width:0;
width:100%;
}
/* Explicit add choice. */
.sbp-sec--media .sbp-mediaedit__addrow {
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
margin-top:14px;
}
.sbp-sec--media .sbp-mediaedit__addrow .sbp-additem {
margin:0;
}
/* HIGHLIGHTS CONTENT PARITY.
Authored rows are never hidden because the operator changes variant. */
.sbp-var--1 .sbp-sec--columns .sbp-col:nth-child(n+4),
.sbp-var--2 .sbp-sec--columns .sbp-col:nth-child(n+4),
.sbp-var--3 .sbp-sec--columns .sbp-col:nth-child(n+4),
.sbp-var--4 .sbp-sec--columns .sbp-col:nth-child(n+4),
.sbp-var--5 .sbp-sec--columns .sbp-col:nth-child(n+4),
.sbp-var--7 .sbp-sec--columns .sbp-col:nth-child(n+4) {
display:revert !important;
}
/* Reset old generic Columns variant laws before re-applying each premium
composition. This stops bodies/titles from escaping their intended card/row. */
.sbp-var--1 .sbp-sec--columns .sbp-col,
.sbp-var--2 .sbp-sec--columns .sbp-col,
.sbp-var--4 .sbp-sec--columns .sbp-col,
.sbp-var--5 .sbp-sec--columns .sbp-col {
display:block !important;
}
.sbp-var--1 .sbp-sec--columns .sbp-col__copy,
.sbp-var--2 .sbp-sec--columns .sbp-col__copy,
.sbp-var--4 .sbp-sec--columns .sbp-col__copy,
.sbp-var--5 .sbp-sec--columns .sbp-col__copy,
.sbp-var--6 .sbp-sec--columns .sbp-col__copy {
display:block !important;
}
/* V1 and V2 simply wrap more authored highlights into further rows. */
.sbp-var--1 .sbp-sec--columns .sbp-cols,
.sbp-var--2 .sbp-sec--columns .sbp-cols {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
align-items:stretch;
}
.sbp-var--2 .sbp-sec--columns .sbp-col {
min-height:220px;
}
/* V3 is a true ledger at any item count. */
.sbp-var--3 .sbp-sec--columns .sbp-col {
display:grid !important;
grid-template-columns:clamp(54px,7vw,96px) minmax(180px,.68fr) minmax(0,1.32fr);
}
.sbp-var--3 .sbp-sec--columns .sbp-col__copy {
display:contents !important;
}
/* V4 Numbered Steps becomes rows of three when the section has more than
three highlights. The connector is intentionally limited to each row's
visual rhythm rather than stretching through empty space. */
.sbp-var--4 .sbp-sec--columns .sbp-cols {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
row-gap:clamp(26px,3.2vw,40px);
}
.sbp-var--4 .sbp-sec--columns .sbp-cols::before {
display:none;
}
.sbp-var--4 .sbp-sec--columns .sbp-col {
position:relative;
padding:0 var(--col-pad) var(--col-pad);
}
.sbp-var--4 .sbp-sec--columns .sbp-col__index {
display:grid;
}
/* V5 keeps the premium first-three Bento hero, then supporting cards span
beneath it in a calm two-column continuation. */
.sbp-var--5 .sbp-sec--columns .sbp-col:nth-child(n+4) {
display:block !important;
grid-column:auto !important;
grid-row:auto !important;
min-height:0 !important;
padding:var(--col-pad);
}
.sbp-var--5 .sbp-sec--columns .sbp-col:nth-child(n+4) .sbp-col__index {
display:block;
margin-bottom:14px;
padding-bottom:0;
}
.sbp-var--5 .sbp-sec--columns .sbp-cols:has(.sbp-col:nth-child(4)) {
grid-template-columns:repeat(2,minmax(0,1fr));
grid-template-rows:auto;
}
.sbp-var--5 .sbp-sec--columns .sbp-cols:has(.sbp-col:nth-child(4)) .sbp-col:first-child {
grid-column:1 / -1;
grid-row:auto;
min-height:300px;
}
.sbp-var--5 .sbp-sec--columns .sbp-cols:has(.sbp-col:nth-child(4)) .sbp-col:nth-child(2),
.sbp-var--5 .sbp-sec--columns .sbp-cols:has(.sbp-col:nth-child(4)) .sbp-col:nth-child(3) {
grid-column:auto;
grid-row:auto;
}
/* V6 remains the best long-form composition, but it no longer owns the data.
Keep the heading composed and every item contained in the right-hand list. */
.sbp-var--6 .sbp-sec--columns .sbp-sw {
grid-template-columns:minmax(300px,.84fr) minmax(0,1.16fr);
gap:clamp(36px,5vw,72px);
}
.sbp-var--6 .sbp-sec--columns .sbp-head {
position:relative;
top:auto;
max-width:520px;
align-self:start;
}
.sbp-var--6 .sbp-sec--columns .sbp-head .sbp-h2 {
max-width:12ch;
font-size:clamp(2rem,3.6vw,3.85rem);
line-height:1.02;
}
.sbp-var--6 .sbp-sec--columns .sbp-head .sbp-lead {
max-width:42ch;
margin-top:14px;
}
.sbp-var--6 .sbp-sec--columns .sbp-col {
display:grid !important;
grid-template-columns:52px minmax(0,1fr);
}
.sbp-var--6 .sbp-sec--columns .sbp-col__copy {
min-width:0;
}
.sbp-var--6 .sbp-sec--columns .sbp-col__b {
max-width:58ch;
}
.sbp-var--6 .sbp-sec--columns .sbp-col:nth-child(n+4) {
padding:18px 0;
}
/* V7 is also an honest ledger at any count. */
.sbp-var--7 .sbp-sec--columns .sbp-col {
display:grid !important;
}
.sbp-var--7 .sbp-sec--columns .sbp-col__copy {
display:contents !important;
}
/* Mobile/tablet containment. */
@media (max-width:980px) {
.sbp-var--1 .sbp-sec--media .sbp-mediaedit,
.sbp-var--4 .sbp-sec--media .sbp-mediaedit,
.sbp-var--4 .sbp-sec--media .sbp-mediax {
grid-template-columns:minmax(0,1fr);
}
.sbp-var--1 .sbp-sec--media .sbp-medialist-edit {
max-height:360px;
}
.sbp-var--4 .sbp-sec--media .sbp-mediaedit__stage,
.sbp-var--4 .sbp-sec--media .sbp-mediax__stage {
max-width:430px;
}
}
@media (max-width:860px) {
.sbp-var--1 .sbp-sec--columns .sbp-cols,
.sbp-var--2 .sbp-sec--columns .sbp-cols,
.sbp-var--4 .sbp-sec--columns .sbp-cols,
.sbp-var--5 .sbp-sec--columns .sbp-cols:has(.sbp-col:nth-child(4)) {
grid-template-columns:minmax(0,1fr);
}
.sbp-var--5 .sbp-sec--columns .sbp-cols:has(.sbp-col:nth-child(4)) .sbp-col:first-child {
grid-column:1;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_MEDIA_PREMIUM_SEAL_V1
Canonical late-cascade law for Videos & Audio.
Root-cause correction:
1. V1 stage and playlist own explicit grid columns and the playlist becomes
a bounded scroll viewport after a few rows instead of increasing section
height indefinitely.
2. Responsive stacking is based on the SECTION'S available inline width via
a container query, not only the browser viewport.
3. Bootstrap icon-font pseudo-elements are absolutely centred inside a
stable circle; no cumulative baseline/relative nudges remain.
4. Editor bottom breathing room belongs to the section canvas, because the
Add controls sit OUTSIDE .sbp-mediaedit in the DOM.
═══════════════════════════════════════════════════════════════════════════ */
.sbp-sec--media .sbp-sw {
container-type:inline-size;
container-name:sbp-media-band;
}
/* Protected public V1: same bounded playlist law as the editor. */
.sbp-var--1 .sbp-sec--media .sbp-media__list .podcast-content.active {
max-height:372px;
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior:contain;
scrollbar-gutter:stable;
}
/* V1 editor: stage left, bounded rail right. Explicit placement prevents
later generic grid rules from letting either child occupy the other's area. */
.sbp-var--1 .sbp-sec--media .sbp-mediaedit {
display:grid;
grid-template-columns:minmax(0,1.22fr) minmax(340px,.78fr);
grid-template-rows:auto;
gap:clamp(16px,2.3vw,24px);
align-items:start;
min-width:0;
max-width:100%;
padding-bottom:0;
}
.sbp-var--1 .sbp-sec--media .sbp-mediaedit__stage {
grid-column:1;
grid-row:1;
width:100%;
min-width:0;
max-width:100%;
aspect-ratio:16/9;
align-self:start;
}
.sbp-var--1 .sbp-sec--media .sbp-medialist-edit {
grid-column:2;
grid-row:1;
width:100%;
min-width:0;
max-width:100%;
max-height:372px;
align-self:start;
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior:contain;
scrollbar-gutter:stable;
}
/* Audio Lounge has the same overload risk when many rows exist. Keep its
information rail useful without allowing it to dictate the whole section. */
.sbp-var--4 .sbp-sec--media .sbp-medialist-edit,
.sbp-var--4 .sbp-sec--media .sbp-mediax__track {
max-height:420px;
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior:contain;
scrollbar-gutter:stable;
}
/* Editor breathing room: Add Video / Add Audio live AFTER .sbp-mediaedit, so
spacing must be owned by the section canvas rather than the grid itself. */
.sbp-page--editing .sbp-sec--media .sbp-sw,
.sbp-editing .sbp-sec--media .sbp-sw {
padding-bottom:clamp(24px,3vw,36px);
box-sizing:border-box;
}
.sbp-page--editing .sbp-sec--media .sbp-mediaedit__addrow,
.sbp-editing .sbp-sec--media .sbp-mediaedit__addrow {
margin-bottom:0;
}
/* One optical icon system. Bootstrap Icons are font glyphs whose baseline can
visually drift even in flex/grid centring. Centre the pseudo-element itself. */
.sbp-sec--media .sbp-medialrow__visual,
.sbp-sec--media .sbp-medialrow__play,
.sbp-sec--media .sbp-mrow__icon,
.sbp-sec--media .sbp-mediax__visual,
.sbp-sec--media .sbp-mediax__go {
align-items:center;
justify-content:center;
}
.sbp-sec--media .sbp-medialrow__visual i,
.sbp-sec--media .sbp-mrow__icon i,
.sbp-sec--media .sbp-mediax__visual i {
position:relative;
display:block;
width:30px;
height:30px;
border-radius:999px;
background:rgba(255,255,255,.88);
border:1px solid color-mix(in srgb,var(--sbp-line,#e9e2da) 92%,transparent);
box-shadow:0 1px 2px rgba(31,23,17,.035);
line-height:1;
box-sizing:border-box;
}
.sbp-sec--media .sbp-medialrow__play i {
position:relative;
display:block;
width:16px;
height:16px;
line-height:1;
}
.sbp-sec--media .sbp-medialrow__visual i::before,
.sbp-sec--media .sbp-medialrow__play i::before,
.sbp-sec--media .sbp-mrow__icon i::before,
.sbp-sec--media .sbp-mediax__visual i::before {
position:absolute !important;
left:50% !important;
top:50% !important;
margin:0 !important;
line-height:1 !important;
vertical-align:0 !important;
transform:translate(-50%,-50%) !important;
}
/* A filled play triangle carries more visual mass on its left edge. */
.sbp-sec--media .sbp-medialrow__play .bi-play-fill::before {
transform:translate(-46%,-50%) !important;
}
.sbp-sec--media .sbp-medialrow__play,
.sbp-sec--media .sbp-mediax__go {
display:grid;
place-items:center;
}
/* Disabled actions retain the same soft circular boundary; only the glyph
quietens. This prevents incomplete/new rows looking broken. */
.sbp-sec--media .sbp-medialrow__play.is-disabled,
.sbp-sec--media .sbp-medialrow__play:disabled {
opacity:1;
border:1px solid var(--sbp-line,#e9e2da);
background:rgba(255,255,255,.82);
}
.sbp-sec--media .sbp-medialrow__play.is-disabled i,
.sbp-sec--media .sbp-medialrow__play:disabled i {
opacity:.28;
}
/* Container-aware editor/public parity. Inspector/sidebar width can reduce
the section without changing viewport width, so viewport media queries alone
cannot protect the composition. */
@container sbp-media-band (max-width:820px) {
.sbp-var--1 .sbp-sec--media .sbp-media,
.sbp-var--1 .sbp-sec--media .sbp-mediaedit,
.sbp-var--4 .sbp-sec--media .sbp-mediaedit,
.sbp-var--4 .sbp-sec--media .sbp-mediax {
grid-template-columns:minmax(0,1fr);
}
.sbp-var--1 .sbp-sec--media .sbp-mediaedit__stage,
.sbp-var--1 .sbp-sec--media .sbp-medialist-edit {
grid-column:1;
grid-row:auto;
}
.sbp-var--1 .sbp-sec--media .sbp-medialist-edit,
.sbp-var--1 .sbp-sec--media .sbp-media__list .podcast-content.active {
max-height:330px;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_PROGRAMMES_MEDIA_PREMIUM_FIX8 v1
Programme image proportion + Media V1 strict geometry.
═══════════════════════════════════════════════════════════════════════════ */
/* V1 Editorial programme imagery participates in card height rather than
behaving like a fixed thumbnail. Short cards stay compact, fuller cards let
the image grow, and object-fit keeps the crop intentional. */
.sbp-var--1 .sbp-sec--programmes .sbp-pg__item:not(.sbp-pg__item--nomedia) {
grid-template-columns:clamp(210px,24%,300px) minmax(0,1fr);
align-items:stretch;
}
.sbp-var--1 .sbp-sec--programmes .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__media {
aspect-ratio:auto;
min-height:clamp(160px,18vw,220px);
height:100%;
max-height:380px;
align-self:stretch;
}
.sbp-var--1 .sbp-sec--programmes .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__media img {
width:100%; height:100%; object-fit:cover;
}
.sbp-med--m.sbp-var--1 .sbp-sec--programmes .sbp-pg__item:not(.sbp-pg__item--nomedia) {
grid-template-columns:clamp(230px,27%,330px) minmax(0,1fr);
}
.sbp-med--l.sbp-var--1 .sbp-sec--programmes .sbp-pg__item:not(.sbp-pg__item--nomedia) {
grid-template-columns:clamp(260px,30%,380px) minmax(0,1fr);
}
/* MEDIA V1 FINAL GEOMETRY.
The stage and playlist are two non-overlapping paint islands. The playlist
stops after roughly five rows and scrolls internally. */
.sbp-var--1 .sbp-sec--media .sbp-mediaedit {
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(320px,38%) !important;
grid-template-rows:auto !important;
column-gap:clamp(22px,2.8vw,34px) !important;
align-items:start !important;
width:100%; max-width:100%; min-width:0;
isolation:isolate;
}
.sbp-var--1 .sbp-sec--media .sbp-mediaedit__stage {
grid-column:1 !important; grid-row:1 !important;
position:relative; z-index:1;
width:100% !important; max-width:100% !important; min-width:0 !important;
overflow:hidden !important; contain:paint;
aspect-ratio:16/9 !important;
}
.sbp-var--1 .sbp-sec--media .sbp-medialist-edit {
grid-column:2 !important; grid-row:1 !important;
position:relative; z-index:2;
width:100% !important; min-width:0 !important; max-width:100% !important;
max-height:348px !important;
overflow-y:auto !important; overflow-x:hidden !important;
overscroll-behavior:contain;
scrollbar-gutter:stable;
box-sizing:border-box;
}
.sbp-var--1 .sbp-sec--media .sbp-medialrow.is-empty {
display:grid !important;
background:#fff !important;
opacity:.72;
}
@container sbp-media-band (max-width:780px) {
.sbp-var--1 .sbp-sec--media .sbp-mediaedit {
grid-template-columns:minmax(0,1fr) !important;
}
.sbp-var--1 .sbp-sec--media .sbp-mediaedit__stage,
.sbp-var--1 .sbp-sec--media .sbp-medialist-edit {
grid-column:1 !important;
grid-row:auto !important;
}
.sbp-var--1 .sbp-sec--media .sbp-medialist-edit { max-height:320px !important; }
}
@media (max-width:760px) {
.sbp-var--1 .sbp-sec--programmes .sbp-pg__item:not(.sbp-pg__item--nomedia) {
grid-template-columns:minmax(0,1fr);
}
.sbp-var--1 .sbp-sec--programmes .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__media {
min-height:220px; max-height:360px;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_PM_FINAL_CONVERGENCE v1 — Programmes + Media final corrective.
Ships WITH the V1 class contract (page.php/starter-editor.js now emit
sbp-var--1 explicitly). One zone, one responsibility each:
· V7 Journey cards gain real presence and a meaningful S/M/L;
· V5 Index gains a dial-scaled supporting image (never a V3 clone);
· V6 Immersive gets image-independent content contrast (photo dominant,
no global opacity dimming, numbering omission preserved);
· variant-voiced programme actions (V3 Spotlight deliberately untouched);
· point details keep authored line/paragraph breaks (¶ contract);
· Media V1 idle stage (unplayable list) is a designed, honest surface.
Tokens only; no invented content; content hugs content.
═══════════════════════════════════════════════════════════════════════════ */
/* ── PROGRAMME POINT PARAGRAPHS — details render their real line breaks. ── */
.sbp-sec--programmes .sbp-check__d { white-space: pre-line; }
/* ── V7 JOURNEY — the card is the protagonist: material width, dial-scaled.
Desktop-only: the accepted mobile vertical timeline is untouched. ── */
@media (min-width: 761px) {
.sbp-var--7 .sbp-sec--programmes .sbp-pg { grid-auto-columns: clamp(300px, 32vw, 390px); }
.sbp-var--7 .sbp-sec--programmes .sbp-pg__item { padding: 18px; }
.sbp-med--m.sbp-var--7 .sbp-sec--programmes .sbp-pg { grid-auto-columns: clamp(340px, 37vw, 450px); }
.sbp-med--l.sbp-var--7 .sbp-sec--programmes .sbp-pg { grid-auto-columns: clamp(390px, 44vw, 530px); }
.sbp-med--l.sbp-var--7 .sbp-sec--programmes .sbp-pg__title { font-size: calc(clamp(19px, 2vw, 24px) * var(--sbp-type-scale, 1)); }
}
/* ── V5 INDEX — a real supporting visual, proportional to the index row.
S = accent thumbnail · M = supporting visual · L = editorial image.
The numeral architecture stays the spine; nomedia rows are untouched. ── */
@media (min-width: 761px) {
.sbp-var--5 .sbp-sec--programmes .sbp-pg__item:not(.sbp-pg__item--nomedia) {
grid-template-columns: minmax(84px, 120px) minmax(0, 1fr) clamp(120px, 14vw, 170px);
column-gap: clamp(16px, 2.5vw, 30px);
}
.sbp-var--5 .sbp-sec--programmes .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__body { grid-column: 2; grid-row: 1; }
.sbp-var--5 .sbp-sec--programmes .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__media {
display: block; grid-column: 3; grid-row: 1; align-self: start;
aspect-ratio: 4 / 3; border-radius: var(--sbp-r); width: 100%;
}
.sbp-med--m.sbp-var--5 .sbp-sec--programmes .sbp-pg__item:not(.sbp-pg__item--nomedia) {
grid-template-columns: minmax(84px, 120px) minmax(0, 1fr) clamp(190px, 21vw, 250px);
}
.sbp-med--l.sbp-var--5 .sbp-sec--programmes .sbp-pg__item:not(.sbp-pg__item--nomedia) {
grid-template-columns: minmax(84px, 120px) minmax(0, 1fr) clamp(250px, 28vw, 330px);
}
.sbp-med--l.sbp-var--5 .sbp-sec--programmes .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__media { aspect-ratio: 3 / 2; }
}
/* ── V6 IMMERSIVE — image-independent contrast. The photograph stays the
surface; the scrim is strongest under the words and the points sit on a
restrained glass so a light photograph can never wash them out.
(No numbering is added to image panels — that omission is the design.) ── */
.sbp-var--6 .sbp-sec--programmes .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__media::after {
background: linear-gradient(180deg,
color-mix(in srgb, var(--sbp-ink-base, var(--sbp-ink)) 44%, transparent) 0%,
color-mix(in srgb, var(--sbp-ink-base, var(--sbp-ink)) 62%, transparent) 52%,
color-mix(in srgb, var(--sbp-ink-base, var(--sbp-ink)) 88%, transparent) 100%);
}
/* Local halo: type carries its own contrast edge, so even a white photograph
cannot wash the words; the photo itself is never globally dimmed. */
.sbp-var--6 .sbp-sec--programmes .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__title,
.sbp-var--6 .sbp-sec--programmes .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__label,
.sbp-var--6 .sbp-sec--programmes .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__prose {
text-shadow:
0 1px 2px color-mix(in srgb, var(--sbp-ink-base, var(--sbp-ink)) 72%, transparent),
0 0 16px color-mix(in srgb, var(--sbp-ink-base, var(--sbp-ink)) 46%, transparent);
}
.sbp-var--6 .sbp-sec--programmes .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-checks--compact {
background: color-mix(in srgb, var(--sbp-ink-base, var(--sbp-ink)) 44%, transparent);
-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
border-radius: 12px; padding: 10px 14px;
}
.sbp-var--6 .sbp-sec--programmes .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-check__t,
.sbp-var--6 .sbp-sec--programmes .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-check__mark { color: var(--sbp-card); }
.sbp-var--6 .sbp-sec--programmes .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-check__d {
color: color-mix(in srgb, var(--sbp-card) 84%, transparent);
}
/* ── PROGRAMME ACTIONS — one family, seven voices (V3 keeps its accepted
treatment; V1 Editorial keeps the base editorial underline). ── */
.sbp-sec--programmes .sbp-pg__act:focus-visible {
outline: 2px solid var(--sbp-focus, var(--sbp-acc)); outline-offset: 3px; border-radius: 6px;
}
.sbp-var--2 .sbp-sec--programmes .sbp-pg__act {
border: 1px solid var(--sbp-line); border-radius: 999px; padding: 9px 16px;
background: var(--sbp-card);
}
.sbp-var--2 .sbp-sec--programmes .sbp-pg__act:hover { border-color: var(--sbp-acc); }
.sbp-var--4 .sbp-sec--programmes .sbp-pg__act {
border-bottom: 0; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase;
}
.sbp-var--5 .sbp-sec--programmes .sbp-pg__act { border-bottom: 0; font-size: 15px; }
.sbp-var--5 .sbp-sec--programmes .sbp-pg__act i { transition: transform .15s ease; }
.sbp-var--5 .sbp-sec--programmes .sbp-pg__act:hover i { transform: translateX(3px); }
.sbp-var--6 .sbp-sec--programmes .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__act {
padding: 9px 16px; border: 1px solid color-mix(in srgb, var(--sbp-card) 45%, transparent);
border-radius: 999px; border-bottom-width: 1px;
background: color-mix(in srgb, var(--sbp-ink-base, var(--sbp-ink)) 32%, transparent);
}
.sbp-var--6 .sbp-sec--programmes .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-pg__act:hover {
background: color-mix(in srgb, var(--sbp-ink-base, var(--sbp-ink)) 52%, transparent);
border-color: color-mix(in srgb, var(--sbp-card) 70%, transparent);
}
.sbp-var--7 .sbp-sec--programmes .sbp-pg__act {
border-bottom: 0; padding: 8px 13px; border-radius: 10px;
background: var(--sbp-acc-soft); color: var(--sbp-acc-ink);
}
.sbp-var--7 .sbp-sec--programmes .sbp-pg__act i { transition: transform .15s ease; }
.sbp-var--7 .sbp-sec--programmes .sbp-pg__act:hover i { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
.sbp-sec--programmes .sbp-pg__act i { transition: none !important; }
}
/* ── MEDIA V1 IDLE STAGE — the list has no playable item yet: a designed,
honest surface (same territory field, no fake player chrome). ── */
.sbp-media__stage--idle { display: flex; align-items: center; justify-content: center;
background:
radial-gradient(120% 90% at 78% 8%, var(--sbp-field-b) 0%, transparent 55%),
radial-gradient(90% 70% at 12% 92%, var(--sbp-field-c) 0%, transparent 60%),
linear-gradient(180deg, var(--sbp-field-b) 0%, var(--sbp-field-a) 46%, var(--sbp-field-c) 100%);
}
.sbp-media__idle { display: grid; justify-items: center; gap: 7px; text-align: center;
padding: 20px; color: var(--sbp-ink); max-width: 46ch; }
.sbp-media__idle i { font-size: clamp(26px, 4vw, 40px); color: var(--sbp-acc-ink); opacity: .9; }
.sbp-media__idle strong { font-size: clamp(15px, 1.6vw, 19px); line-height: 1.3; }
.sbp-media__idle span { font-size: 11.5px; font-weight: 750; letter-spacing: .09em;
text-transform: uppercase; color: var(--sbp-mut); }
.sbp-media__stage--audio { display: flex; align-items: center; justify-content: center;
padding: clamp(16px, 3vw, 28px);
background:
radial-gradient(120% 90% at 78% 8%, var(--sbp-field-b) 0%, transparent 55%),
linear-gradient(180deg, var(--sbp-field-b) 0%, var(--sbp-field-a) 46%, var(--sbp-field-c) 100%); }
.sbp-media__stage--audio audio { width: min(92%, 560px); }
/* CHL:BP_PM_FINAL_CONVERGENCE v1.2 — PUBLIC V1 media geometry law (operator
passes 1+2): the stage and the playlist are equal-height companions. The
original defect was aspect-ratio 16/9 deriving WIDTH from the stretched row
height (745px in a 628px track). The law: on desktop the stage stretches to
the rail's height but its aspect feedback is severed, so width always comes
from its own column; mobile stacking keeps the base 16/9. Stage floor is the
column's own 16/9 height so short playlists never flatten it. */
.sbp-var--1 .sbp-sec--media .sbp-media__stage {
width: 100%; max-width: 100%; min-width: 0;
overflow: hidden; contain: paint;
}
@media (min-width: 761px) {
.sbp-var--1 .sbp-sec--media .sbp-media { align-items: stretch; }
.sbp-var--1 .sbp-sec--media .sbp-media__stage {
aspect-ratio: auto; height: auto; min-height: 354px;
}
}
/* ═══ CHL:BP_PM_FINAL_CONVERGENCE v1.3 — operator variant-walk correctives ═══
· Columns V7: items 4+ were un-hidden with `display:revert` which rolls back
to UA block, not the authored ledger grid (⛔never revert for semantic
states). Explicit grid restores every row at any count.
· Media V4: the lounge stage earns a wider column; the list yields.
· Rail law extends to every vertical PUBLIC media track: V4/V5/V7 bound
with internal scroll at high item counts (V2 grid, V3 shelf and V6 strip
are compositions, not rails — untouched; V6 is accepted as-is). */
.sbp-var--7 .sbp-sec--columns .sbp-col:nth-child(n+4) {
display:grid !important;
}
.sbp-var--4 .sbp-sec--media .sbp-mediax {
grid-template-columns:minmax(300px,.95fr) minmax(0,1.05fr);
}
.sbp-var--4 .sbp-sec--media .sbp-mediax__track {
max-height:520px; overflow-y:auto; overflow-x:hidden;
overscroll-behavior:contain; scrollbar-width:thin; padding-right:6px;
}
.sbp-var--5 .sbp-sec--media .sbp-mediax__track {
max-height:432px; overflow-y:auto; overflow-x:hidden;
overscroll-behavior:contain; scrollbar-width:thin;
scrollbar-color:var(--sbp-cinema-border) transparent; padding-right:6px;
}
.sbp-var--7 .sbp-sec--media .sbp-mediax__track {
max-height:620px; overflow-y:auto; overflow-x:hidden;
overscroll-behavior:contain; scrollbar-width:thin; padding-right:6px;
}
/* CHL:BP_PM_FINAL_CONVERGENCE v1.5 — the lounge vinyl plays bigger (operator). */
.sbp-var--4 .sbp-sec--media .sbp-mediax__stage { width:min(100%,640px); }
.sbp-med--m.sbp-var--4 .sbp-sec--media .sbp-mediax__stage { width:min(100%,690px); }
.sbp-med--l.sbp-var--4 .sbp-sec--media .sbp-mediax__stage { width:min(100%,740px); }
/* CHL:BP_PM_FINAL_CONVERGENCE v1.6 — the enlarged vinyl must not be clipped by
the older 420/430px stage caps; the --media-v4-stage token is the single
size authority (S 460 / M 520 / L 580). */
.sbp-var--4 .sbp-sec--media .sbp-mediaedit__stage { max-width:none; }
/* ═══ CHL:BP_PM_FINAL_CONVERGENCE v1.7 — operator polish batch ═════════════
· Columns V3 joins the ledger-at-any-count law (same specificity war the
V7 fix settled: the parity zone's `revert` outranked the ledger rule for
items 4+ via :nth-child).
· About is hero-class imagery: it always FILLS its frame (the site-wide
media-fit dial keeps governing menus/galleries where `contain` matters),
and the split composition centres vertically so neither column top-hangs.
· About V3 becomes a poster that respects the fold: viewport-aware stage,
card raised well onto the image; M/L grow deliberately, never a tower.
· Programmes V4 Schedule gains real S/M/L semantics: board density.
· Programmes V6 point marks read on ANY photograph (card-glass chip).
═══════════════════════════════════════════════════════════════════════════ */
.sbp-var--3 .sbp-sec--columns .sbp-col:nth-child(n+4) { display:grid !important; }
.sbp-sec--about .sbp-about__media .sbp-eimg img { object-fit:cover; }
.sbp-imgled { align-items:center; }
.sbp-var--3 .sbp-imgled__media { max-height:clamp(300px,38vh,380px); }
.sbp-var--3 .sbp-imgled__media img { max-height:none; height:100%; }
.sbp-var--3 .sbp-imgled > :not(.sbp-imgled__media) { margin-top:-140px; }
.sbp-med--m.sbp-var--3 .sbp-imgled__media { max-height:clamp(360px,46vh,470px); }
.sbp-med--l.sbp-var--3 .sbp-imgled__media { max-height:clamp(420px,54vh,560px); }
.sbp-med--m.sbp-var--3 .sbp-imgled > :not(.sbp-imgled__media),
.sbp-med--l.sbp-var--3 .sbp-imgled > :not(.sbp-imgled__media) { margin-top:-120px; }
.sbp-med--m.sbp-var--4 .sbp-sec--programmes .sbp-pg__item { padding-block:clamp(30px,4vw,52px); }
.sbp-med--m.sbp-var--4 .sbp-sec--programmes .sbp-pg__num { font-size:28px; }
.sbp-med--l.sbp-var--4 .sbp-sec--programmes .sbp-pg__item { padding-block:clamp(38px,5vw,64px); }
.sbp-med--l.sbp-var--4 .sbp-sec--programmes .sbp-pg__num { font-size:32px; }
.sbp-med--l.sbp-var--4 .sbp-sec--programmes .sbp-pg__title { font-size:calc(clamp(19px,2vw,24px) * var(--sbp-type-scale,1)); }
.sbp-var--6 .sbp-sec--programmes .sbp-pg__item:not(.sbp-pg__item--nomedia) .sbp-check__mark {
background:color-mix(in srgb, var(--sbp-card) 22%, transparent);
color:var(--sbp-card);
box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sbp-card) 48%, transparent);
}
/* ═══ CHL:BP_PM_FINAL_CONVERGENCE v1.8 — operator catch + dial completion ═══
· ⛔About V3 containment: v1.7 freed the poster image's own height, but the
stage never clipped — a 900px image painted over the sections below.
The stage is the clip authority.
· Programmes V4 at L: points flow two-up so the schedule row uses its width.
· Features ("Why choose us") and Menu join the S/M/L authority: the dial
means density/scale there (mark and thumb size, breathing room) — it must
always change presentation, never nothing. */
.sbp-var--3 .sbp-imgled__media { overflow:hidden; }
.sbp-med--l.sbp-var--4 .sbp-sec--programmes .sbp-checks--compact {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 26px;
}
.sbp-med--m .sbp-sec--features .sbp-checks { gap:18px; }
.sbp-med--m .sbp-sec--features .sbp-check__mark { width:34px; height:34px; border-radius:11px; }
.sbp-med--m .sbp-sec--features .sbp-check__mark::before { font-size:15px; }
.sbp-med--l .sbp-sec--features .sbp-checks { gap:24px; }
.sbp-med--l .sbp-sec--features .sbp-check__mark { width:40px; height:40px; border-radius:13px; }
.sbp-med--l .sbp-sec--features .sbp-check__mark::before { font-size:17px; }
.sbp-med--l .sbp-sec--features .sbp-check__t { font-size:17px; }
.sbp-med--m .sbp-menusec__thumb { flex-basis:72px; width:72px; height:72px; }
.sbp-med--l .sbp-menusec__thumb { flex-basis:96px; width:96px; height:96px; }
.sbp-med--l .sbp-menusec__list { gap:16px; }
/* ═══ CHL:BP_PM_FINAL_CONVERGENCE v1.9 — the dial must always be felt ═══════
· Record shelves (Shop, Publications, Services, Events, …): with photos the
existing image ladders bite; WITHOUT photos the card itself now scales —
type, padding and a modest breath in the tone strip. No fake whitespace:
the strip stays a compact accent, the content grows.
· Features ("Why choose us"): v1.8 aimed at .sbp-checks but this family's
anatomy is .sbp-benefits/.sbp-benefit — only the shared mark matched.
Correct classes now: M = larger reading rhythm, L = benefit cards. */
.sbp-med--m:not(:has(.sbp-sec--products)) .sbp-shopcard__body { padding:19px 21px 20px; gap:6px; }
.sbp-med--m:not(:has(.sbp-sec--products)) .sbp-shopcard__t,
.sbp-med--m:not(:has(.sbp-sec--products)) .sbp-shopcard__body h4 { font-size:18px; }
.sbp-med--m:not(:has(.sbp-sec--products)) .sbp-shopcard__meta { font-size:14px; }
.sbp-med--l:not(:has(.sbp-sec--products)) .sbp-shopcard__body { padding:24px 26px 25px; gap:8px; }
.sbp-med--l:not(:has(.sbp-sec--products)) .sbp-shopcard__t,
.sbp-med--l:not(:has(.sbp-sec--products)) .sbp-shopcard__body h4 { font-size:20px; }
.sbp-med--l:not(:has(.sbp-sec--products)) .sbp-shopcard__meta { font-size:15px; }
.sbp-med--l:not(:has(.sbp-sec--products)) .sbp-shopcard__price { font-size:15px; }
/* (v1.9.1) The empty media strip does NOT grow with the dial — the existing
96px pin is the content-hugs-data law and it stands; on imageless records
the dial speaks only through the card's real content above. */
.sbp-med--m .sbp-features .sbp-benefits { gap:20px 26px; }
.sbp-med--m .sbp-benefit__t { font-size:16.5px; }
.sbp-med--m .sbp-benefit__d { font-size:14.5px; }
.sbp-med--l .sbp-features .sbp-benefits { gap:22px 26px; }
.sbp-med--l .sbp-benefit {
padding:18px 18px 20px; border:1px solid var(--sbp-line);
border-radius:var(--sbp-r-lg); background:var(--sbp-card);
}
.sbp-med--l .sbp-benefit__t { font-size:17.5px; }
.sbp-med--l .sbp-benefit__d { font-size:15px; }
/* ═══ CHL:BP_PM_FINAL_CONVERGENCE v2.0 — the dial moves the COMPOSITION ═════
Operator law: S/M/L must be visually appreciated — geometry, not just type.
· Features: the benefit grid itself breathes — S four-up compact,
M three-up substantial, L two-up statement cards.
· Record shelves: L becomes full-width showcase rows; a card WITH a photo
turns editorial (image column beside content); imageless cards stay
content-forward (no fake media, per the content-hugs law).
· Menu: L folds the two-column menu into one elegant centred list. */
.sbp-med--m .sbp-features .sbp-benefits { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
.sbp-med--l .sbp-features .sbp-benefits { grid-template-columns:repeat(auto-fit,minmax(430px,1fr)); gap:22px; }
.sbp-med--m:not(:has(.sbp-sec--products)) .sbp-shop__rail { gap:24px; }
.sbp-med--l:not(:has(.sbp-sec--products)) .sbp-shop__rail { gap:30px; }
.sbp-med--l:not(:has(.sbp-sec--products)) .sbp-shop__rail--2,
.sbp-med--l:not(:has(.sbp-sec--products)) .sbp-shop__rail--1 { grid-template-columns:minmax(0,1fr); }
.sbp-med--l:not(:has(.sbp-sec--products)) .sbp-shop__rail .sbp-shopcard:not(:has(.sbp-shopcard__zone--media.is-empty)) {
display:grid; grid-template-columns:minmax(280px,42%) minmax(0,1fr); align-items:stretch;
}
.sbp-med--l:not(:has(.sbp-sec--products)) .sbp-shop__rail .sbp-shopcard:not(:has(.sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__img {
height:100%; max-height:none; aspect-ratio:auto;
}
.sbp-med--m .sbp-menusec__groups { gap:clamp(30px,5vw,64px); }
.sbp-med--l .sbp-menusec__groups { grid-template-columns:minmax(0,1fr); max-width:780px; margin-inline:auto; }
/* CHL:BP_PM_FINAL_CONVERGENCE v2.0.1 — the mark's grid track scales WITH the
mark (v1.8 grew the tick to 34/40px inside a 28px track, so it overflowed
into the text's gap). Track + breathing room per dial stop. */
.sbp-med--m .sbp-benefit { grid-template-columns:34px minmax(0,1fr); gap:16px; }
.sbp-med--l .sbp-benefit { grid-template-columns:40px minmax(0,1fr); gap:18px; }
/* CHL:BP_PM_FINAL_CONVERGENCE v2.0.2 — imageless shelf cards get a real M/L
silhouette too: the designed tone panel (category voice + price chip) turns
into a side column beside the content, echoing the photo-editorial rows.
Honest by construction — the panel carries real content, never blank air. */
.sbp-med--m:not(:has(.sbp-sec--products)) .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--l:not(:has(.sbp-sec--products)) .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) {
display:grid; grid-template-columns:minmax(150px,36%) minmax(0,1fr); align-items:stretch;
}
.sbp-med--m:not(:has(.sbp-sec--products)) .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__img.is-empty,
.sbp-med--l:not(:has(.sbp-sec--products)) .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__img.is-empty {
height:100%; max-height:none; aspect-ratio:auto; min-height:96px;
}
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_SHOP_PREMIUM_FAMILY v2 — reference-standard record-driven Shop.
One truthful product record contract, seven materially distinct shopping
compositions. V1 is the classless-safe base: every product section wears
.sbp-sec--products, so no .sbp-var--1 dependency exists. Variants 2–7 are
explicit overrides. S/M/L changes composition, not merely font size.
═══════════════════════════════════════════════════════════════════════════ */
/* ── FAMILY BASE / V1 STOREFRONT ───────────────────────────────────────────
A conventional, polished store grid. Product imagery is useful but never
mandatory: an image-less product keeps a compact branded media strip. */
.sbp-sec--products .sbp-shop { container:sbp-product-shop / inline-size; }
.sbp-sec--products .sbp-shop__head {
display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end;
gap:18px 28px; margin-bottom:clamp(20px,3vw,34px);
}
.sbp-sec--products .sbp-shop__intro { max-width:66ch; }
.sbp-sec--products .sbp-shop__rail,
.sbp-sec--products .sbp-shop__rail--1,
.sbp-sec--products .sbp-shop__rail--2,
.sbp-sec--products .sbp-shop__rail--solo {
display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:18px; max-width:none; margin:0; align-items:stretch;
}
.sbp-sec--products .sbp-shopcard {
display:flex; flex-direction:column; min-width:0; height:100%;
border:1px solid var(--sbp-line); border-radius:var(--sbp-r-lg);
background:var(--sbp-card); overflow:hidden; box-shadow:var(--sbp-shadow);
}
.sbp-sec--products .sbp-shopcard__img {
min-height:180px; max-height:none; aspect-ratio:4/3;
background-size:cover; background-position:center;
}
.sbp-sec--products .sbp-shopcard__img.is-empty {
min-height:92px; max-height:108px; aspect-ratio:auto;
background:linear-gradient(145deg,var(--sbp-field-b),color-mix(in srgb,var(--sbp-acc-soft) 52%,var(--sbp-field-b)));
}
.sbp-sec--products .sbp-shopcard__ph { gap:7px; }
.sbp-sec--products .sbp-shopcard__ph i { font-size:20px; }
.sbp-sec--products .sbp-shopcard__phlbl {
font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
}
.sbp-sec--products .sbp-shopcard__body { padding:17px 18px 18px; gap:7px; }
.sbp-sec--products .sbp-shopcard__t,
.sbp-sec--products .sbp-shopcard__body h4 { font-size:16.5px; line-height:1.28; }
.sbp-sec--products .sbp-shopcard__meta:empty { display:none; }
.sbp-sec--products .sbp-shopcard__go { width:max-content; }
.sbp-sec--products .sbp-shopcard__price { right:12px; bottom:12px; }
/* V1 dial: S = denser storefront, M = three substantial cards,
L = two editorial-sized product cards. */
.sbp-med--m .sbp-sec--products .sbp-shop__rail {
grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px;
}
.sbp-med--m .sbp-sec--products .sbp-shopcard__img { min-height:230px; aspect-ratio:5/4; }
.sbp-med--l .sbp-sec--products .sbp-shop__rail {
grid-template-columns:repeat(auto-fit,minmax(390px,1fr)); gap:26px;
}
.sbp-med--l .sbp-sec--products .sbp-shopcard__img { min-height:300px; aspect-ratio:16/11; }
.sbp-med--m .sbp-sec--products .sbp-shopcard__img.is-empty,
.sbp-med--l .sbp-sec--products .sbp-shopcard__img.is-empty {
min-height:96px; max-height:112px; aspect-ratio:auto;
}
/* ── V2 EDITORIAL COLLECTION ───────────────────────────────────────────────
A calm vertical collection. Media is a supporting thumbnail, never a slab. */
.sbp-var--2 .sbp-sec--products .sbp-shop__head {
display:grid; grid-template-columns:minmax(0,1fr) auto; text-align:left;
}
.sbp-var--2 .sbp-sec--products .sbp-shop__intro {
border-left:3px solid var(--sbp-indicator,var(--sbp-org-display));
padding-left:clamp(15px,2vw,22px);
}
.sbp-var--2 .sbp-sec--products .sbp-shop__intro .sbp-kicker::before { display:none; }
.sbp-var--2 .sbp-sec--products .sbp-shop__rail,
.sbp-var--2 .sbp-sec--products .sbp-shop__rail--1,
.sbp-var--2 .sbp-sec--products .sbp-shop__rail--2,
.sbp-var--2 .sbp-sec--products .sbp-shop__rail--solo {
display:flex; flex-direction:column; gap:12px; max-width:980px;
}
.sbp-var--2 .sbp-sec--products .sbp-shopcard {
display:grid !important; grid-template-columns:190px minmax(0,1fr);
min-height:138px; height:auto; align-items:stretch; box-shadow:none;
}
.sbp-var--2 .sbp-sec--products .sbp-shopcard__img {
height:100%; min-height:138px; max-height:none; aspect-ratio:auto; border-radius:0;
}
.sbp-var--2 .sbp-sec--products .sbp-shopcard__body {
padding:18px 22px; justify-content:center;
}
.sbp-var--2 .sbp-sec--products .sbp-shopcard__img.is-empty { display:none; }
.sbp-var--2 .sbp-sec--products .sbp-shopcard:has(>.sbp-shopcard__img.is-empty) {
grid-template-columns:minmax(0,1fr);
}
.sbp-med--m.sbp-var--2 .sbp-sec--products .sbp-shopcard { grid-template-columns:260px minmax(0,1fr); min-height:170px; }
.sbp-med--l.sbp-var--2 .sbp-sec--products .sbp-shop__rail { max-width:1120px; }
.sbp-med--l.sbp-var--2 .sbp-sec--products .sbp-shopcard { grid-template-columns:340px minmax(0,1fr); min-height:220px; }
.sbp-med--m.sbp-var--2 .sbp-sec--products .sbp-shopcard:has(>.sbp-shopcard__img.is-empty),
.sbp-med--l.sbp-var--2 .sbp-sec--products .sbp-shopcard:has(>.sbp-shopcard__img.is-empty) {
grid-template-columns:minmax(0,1fr); min-height:0;
}
/* ── V3 CATALOGUE STAGE ────────────────────────────────────────────────────
One flagship record becomes an editorial stage; the remainder form a
structured catalogue beneath it. This is NOT centred V1. */
.sbp-var--3 .sbp-sec--products .sbp-shop__head {
display:block; max-width:760px; margin-inline:auto;
margin-bottom:clamp(24px,3.5vw,38px); text-align:center;
}
.sbp-var--3 .sbp-sec--products .sbp-shop__head .sbp-kicker { justify-content:center; }
.sbp-var--3 .sbp-sec--products .sbp-shop__intro { margin-inline:auto; }
.sbp-var--3 .sbp-sec--products .sbp-shop__head::after {
content:""; display:block; width:54px; height:3px; border-radius:999px;
margin:16px auto 0; background:var(--sbp-indicator,var(--sbp-org-display));
}
.sbp-var--3 .sbp-sec--products .sbp-shop__rail,
.sbp-var--3 .sbp-sec--products .sbp-shop__rail--1,
.sbp-var--3 .sbp-sec--products .sbp-shop__rail--2,
.sbp-var--3 .sbp-sec--products .sbp-shop__rail--solo {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px; max-width:none;
}
.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child {
grid-column:1/-1; display:grid !important;
grid-template-columns:minmax(300px,1.15fr) minmax(260px,.85fr);
min-height:320px; height:auto;
}
.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img {
min-height:320px; height:100%; max-height:none; aspect-ratio:auto;
}
.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__body {
justify-content:center; padding:clamp(28px,4vw,52px);
}
.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__t { font-size:clamp(23px,2.6vw,34px); }
.sbp-var--3 .sbp-sec--products .sbp-shopcard:not(:first-child) .sbp-shopcard__img { min-height:150px; aspect-ratio:16/9; }
.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child:has(>.sbp-shopcard__img.is-empty) {
grid-template-columns:minmax(0,1fr); min-height:0;
}
.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img.is-empty {
min-height:112px; max-height:132px; height:auto;
}
.sbp-med--m.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child {
grid-template-columns:minmax(360px,1.35fr) minmax(280px,.65fr); min-height:390px;
}
.sbp-med--m.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img { min-height:390px; }
.sbp-med--l.sbp-var--3 .sbp-sec--products .sbp-shop__rail { gap:22px; }
.sbp-med--l.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child {
grid-template-columns:minmax(440px,1.55fr) minmax(300px,.65fr); min-height:470px;
}
.sbp-med--l.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img { min-height:470px; }
.sbp-med--m.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child:has(>.sbp-shopcard__img.is-empty),
.sbp-med--l.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child:has(>.sbp-shopcard__img.is-empty) {
grid-template-columns:minmax(0,1fr); min-height:0;
}
.sbp-med--m.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img.is-empty,
.sbp-med--l.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img.is-empty {
min-height:112px; max-height:132px;
}
/* ── V4 PRICE INDEX ────────────────────────────────────────────────────────
A commerce ledger. Media retires; product, action and price become the page. */
.sbp-var--4 .sbp-sec--products .sbp-shop__head {
display:grid; grid-template-columns:minmax(0,.85fr) minmax(280px,1.15fr);
gap:clamp(24px,5vw,72px); align-items:end;
}
.sbp-var--4 .sbp-sec--products .sbp-shop__intro { max-width:52ch; }
.sbp-var--4 .sbp-sec--products .sbp-shop__rail,
.sbp-var--4 .sbp-sec--products .sbp-shop__rail--1,
.sbp-var--4 .sbp-sec--products .sbp-shop__rail--2,
.sbp-var--4 .sbp-sec--products .sbp-shop__rail--solo {
display:block; max-width:940px; margin-inline:auto; counter-reset:shop-index;
}
.sbp-var--4 .sbp-sec--products .sbp-shopcard {
counter-increment:shop-index; display:grid !important;
grid-template-columns:52px minmax(0,1fr) auto; gap:16px; align-items:center;
padding:16px 4px; min-height:0; height:auto;
border:0; border-bottom:1px solid var(--sbp-line);
border-radius:0; background:transparent; box-shadow:none; overflow:visible;
}
.sbp-var--4 .sbp-sec--products .sbp-shopcard::before {
content:counter(shop-index,decimal-leading-zero); font-weight:800;
font-size:12px; letter-spacing:.08em; color:var(--sbp-mut);
}
.sbp-var--4 .sbp-sec--products .sbp-shopcard__zone--media { display:contents; }
.sbp-var--4 .sbp-sec--products .sbp-shopcard__ph { display:none; }
.sbp-var--4 .sbp-sec--products .sbp-shopcard__price {
position:static; grid-column:3; grid-row:1; padding:0;
background:transparent; box-shadow:none; color:var(--sbp-acc-ink);
font-size:17px; font-weight:850;
}
.sbp-var--4 .sbp-sec--products .sbp-shopcard__body {
grid-column:2; grid-row:1; padding:0; background:transparent; gap:4px;
}
.sbp-var--4 .sbp-sec--products .sbp-shopcard__zone--action { min-height:0; padding-top:4px; }
.sbp-var--4 .sbp-sec--products .sbp-shopcard__go { font-size:12.5px; }
.sbp-med--m.sbp-var--4 .sbp-sec--products .sbp-shopcard { grid-template-columns:60px minmax(0,1fr) auto; padding:22px 4px; }
.sbp-med--m.sbp-var--4 .sbp-sec--products .sbp-shopcard__t { font-size:19px; }
.sbp-med--l.sbp-var--4 .sbp-sec--products .sbp-shop__rail { max-width:1080px; }
.sbp-med--l.sbp-var--4 .sbp-sec--products .sbp-shopcard { grid-template-columns:72px minmax(0,1fr) auto; padding:28px 4px; }
.sbp-med--l.sbp-var--4 .sbp-sec--products .sbp-shopcard__t,
.sbp-med--l.sbp-var--4 .sbp-sec--products .sbp-shopcard__price { font-size:22px; }
/* ── V5 FEATURED SHOWCASE ─────────────────────────────────────────────────
A hero product commands the left. Supporting products become a composed
queue with honest thumbnails when media exists. */
.sbp-var--5 .sbp-sec--products .sbp-shop__head {
display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end;
}
.sbp-var--5 .sbp-sec--products .sbp-shop__rail,
.sbp-var--5 .sbp-sec--products .sbp-shop__rail--1,
.sbp-var--5 .sbp-sec--products .sbp-shop__rail--2,
.sbp-var--5 .sbp-sec--products .sbp-shop__rail--solo {
display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);
gap:14px 22px; align-items:start; max-width:none;
}
.sbp-var--5 .sbp-sec--products .sbp-shopcard:first-child {
grid-column:1; grid-row:1/span 12; display:flex !important; flex-direction:column; height:auto;
}
.sbp-var--5 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img {
min-height:350px; max-height:520px; aspect-ratio:16/11;
}
.sbp-var--5 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__body { padding:22px 24px 24px; }
.sbp-var--5 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__t { font-size:clamp(21px,2.2vw,28px); }
.sbp-var--5 .sbp-sec--products .sbp-shopcard:not(:first-child) {
grid-column:2; display:grid !important; grid-template-columns:84px minmax(0,1fr);
min-height:84px; height:auto; box-shadow:none;
}
.sbp-var--5 .sbp-sec--products .sbp-shopcard:not(:first-child) .sbp-shopcard__img {
height:100%; min-height:84px; max-height:none; aspect-ratio:1/1;
}
.sbp-var--5 .sbp-sec--products .sbp-shopcard:not(:first-child) .sbp-shopcard__body {
padding:12px 14px; justify-content:center;
}
.sbp-var--5 .sbp-sec--products .sbp-shopcard:not(:first-child) .sbp-shopcard__zone--action { min-height:0; padding-top:3px; }
.sbp-var--5 .sbp-sec--products .sbp-shopcard:not(:first-child):has(>.sbp-shopcard__img.is-empty) {
grid-template-columns:minmax(0,1fr);
}
.sbp-var--5 .sbp-sec--products .sbp-shopcard:not(:first-child) .sbp-shopcard__img.is-empty { display:none; }
.sbp-var--5 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img.is-empty {
min-height:108px; max-height:132px; aspect-ratio:auto;
}
.sbp-med--m.sbp-var--5 .sbp-sec--products .sbp-shop__rail { grid-template-columns:minmax(0,1.7fr) minmax(300px,.72fr); gap:16px 26px; }
.sbp-med--m.sbp-var--5 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img { min-height:420px; }
.sbp-med--l.sbp-var--5 .sbp-sec--products .sbp-shop__rail { grid-template-columns:minmax(0,2fr) minmax(320px,.7fr); gap:18px 30px; }
.sbp-med--l.sbp-var--5 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img { min-height:500px; }
/* ── V6 LOOKBOOK ───────────────────────────────────────────────────────────
Image-led market wall. Real images become editorial tiles with a protected
contrast scrim. Imageless records fall back to a deliberate tone card. */
.sbp-var--6 .sbp-sec--products .sbp-shop__head {
display:block; max-width:760px; margin-inline:auto; text-align:center;
}
.sbp-var--6 .sbp-sec--products .sbp-shop__head .sbp-kicker { justify-content:center; }
.sbp-var--6 .sbp-sec--products .sbp-shop__intro { margin-inline:auto; }
.sbp-var--6 .sbp-sec--products .sbp-shop__rail,
.sbp-var--6 .sbp-sec--products .sbp-shop__rail--1,
.sbp-var--6 .sbp-sec--products .sbp-shop__rail--2,
.sbp-var--6 .sbp-sec--products .sbp-shop__rail--solo {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
grid-auto-flow:dense; gap:12px; max-width:none;
}
.sbp-var--6 .sbp-sec--products .sbp-shopcard {
position:relative; display:block !important; min-height:250px; height:auto;
border:0; border-radius:var(--sbp-r-lg); overflow:hidden;
background:var(--sbp-card); box-shadow:var(--sbp-shadow);
}
.sbp-var--6 .sbp-sec--products .sbp-shopcard:first-child { grid-column:span 2; grid-row:span 2; min-height:520px; }
.sbp-var--6 .sbp-sec--products .sbp-shopcard__img:not(.is-empty) {
position:absolute; inset:0; width:100%; height:100%; min-height:100%; max-height:none;
aspect-ratio:auto; background-size:cover; background-position:center;
}
.sbp-var--6 .sbp-sec--products .sbp-shopcard:has(>.sbp-shopcard__img:not(.is-empty))::after {
content:""; position:absolute; inset:30% 0 0; pointer-events:none;
background:linear-gradient(to bottom,transparent,rgba(20,16,12,.84));
}
.sbp-var--6 .sbp-sec--products .sbp-shopcard:has(>.sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__body {
position:absolute; z-index:2; inset:auto 0 0; padding:18px 18px 19px;
background:transparent; color:#fff;
}
.sbp-var--6 .sbp-sec--products .sbp-shopcard:has(>.sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t,
.sbp-var--6 .sbp-sec--products .sbp-shopcard:has(>.sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__body h4,
.sbp-var--6 .sbp-sec--products .sbp-shopcard:has(>.sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta,
.sbp-var--6 .sbp-sec--products .sbp-shopcard:has(>.sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__go {
color:#fff;
}
.sbp-var--6 .sbp-sec--products .sbp-shopcard:has(>.sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price { z-index:3; }
.sbp-var--6 .sbp-sec--products .sbp-shopcard__img.is-empty {
position:relative; min-height:150px; max-height:none; aspect-ratio:auto;
}
.sbp-var--6 .sbp-sec--products .sbp-shopcard:has(>.sbp-shopcard__img.is-empty) {
display:flex !important; flex-direction:column; min-height:250px;
border:1px solid var(--sbp-line);
}
.sbp-var--6 .sbp-sec--products .sbp-shopcard:has(>.sbp-shopcard__img.is-empty) .sbp-shopcard__body {
position:static; padding:16px 17px 18px; background:var(--sbp-card); color:var(--sbp-ink);
}
.sbp-med--m.sbp-var--6 .sbp-sec--products .sbp-shop__rail { grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.sbp-med--m.sbp-var--6 .sbp-sec--products .sbp-shopcard { min-height:300px; }
.sbp-med--m.sbp-var--6 .sbp-sec--products .sbp-shopcard:first-child { min-height:610px; }
.sbp-med--l.sbp-var--6 .sbp-sec--products .sbp-shop__rail { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.sbp-med--l.sbp-var--6 .sbp-sec--products .sbp-shopcard { min-height:380px; }
.sbp-med--l.sbp-var--6 .sbp-sec--products .sbp-shopcard:first-child { grid-column:span 2; min-height:680px; }
/* ── V7 SHOP SHELF ─────────────────────────────────────────────────────────
A tactile horizontal storefront. Scroll-snap is primary; visible controls
exist only when the shelf genuinely overflows. */
.sbp-var--7 .sbp-sec--products .sbp-shop__head {
display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end;
}
.sbp-var--7 .sbp-sec--products .sbp-shop__rail,
.sbp-var--7 .sbp-sec--products .sbp-shop__rail--1,
.sbp-var--7 .sbp-sec--products .sbp-shop__rail--2,
.sbp-var--7 .sbp-sec--products .sbp-shop__rail--solo {
display:flex; gap:16px; max-width:none; overflow-x:auto;
scroll-snap-type:x mandatory; scroll-padding-inline:2px;
padding:4px 2px 10px; scrollbar-width:none;
}
.sbp-var--7 .sbp-sec--products .sbp-shop__rail::-webkit-scrollbar { display:none; }
.sbp-var--7 .sbp-sec--products .sbp-shopcard {
flex:0 0 clamp(250px,27vw,320px); scroll-snap-align:start;
display:flex !important; flex-direction:column; height:auto;
}
.sbp-var--7 .sbp-sec--products .sbp-shopcard__img { min-height:250px; max-height:320px; aspect-ratio:4/5; }
.sbp-var--7 .sbp-sec--products .sbp-shopcard__img.is-empty { min-height:105px; max-height:118px; aspect-ratio:auto; }
.sbp-med--m.sbp-var--7 .sbp-sec--products .sbp-shopcard { flex-basis:clamp(315px,34vw,390px); }
.sbp-med--m.sbp-var--7 .sbp-sec--products .sbp-shopcard__img { min-height:315px; max-height:390px; }
.sbp-med--l.sbp-var--7 .sbp-sec--products .sbp-shopcard { flex-basis:clamp(390px,43vw,500px); }
.sbp-med--l.sbp-var--7 .sbp-sec--products .sbp-shopcard__img { min-height:390px; max-height:500px; }
.sbp-med--m.sbp-var--7 .sbp-sec--products .sbp-shopcard__img.is-empty,
.sbp-med--l.sbp-var--7 .sbp-sec--products .sbp-shopcard__img.is-empty { min-height:105px; max-height:118px; }
/* Shelf navigation is DOM-stable for editor/public parity but is only visible
on V7 and only after JS proves genuine overflow. */
.sbp-shopnav { display:none; }
.sbp-var--7 .sbp-sec--products + .sbp-shopnav,
.sbp-var--7 .sbp-sec--products .sbp-shopnav { display:none; }
.sbp-var--7 .sbp-sec--products .sbp-shopnav[data-active="1"] {
display:flex; align-items:center; justify-content:center; gap:12px; margin-top:18px;
}
.sbp-shopnav__btn {
width:40px; height:40px; border-radius:999px; border:1px solid var(--sbp-line);
display:inline-flex; align-items:center; justify-content:center;
background:var(--sbp-card); color:var(--sbp-ink); cursor:pointer;
box-shadow:var(--sbp-shadow);
}
.sbp-shopnav__btn:disabled { opacity:.35; cursor:default; box-shadow:none; }
.sbp-shopnav__count {
min-width:58px; text-align:center; font-size:12px; font-weight:800;
letter-spacing:.08em; color:var(--sbp-mut); font-variant-numeric:tabular-nums;
}
/* Distinct section-CTA treatment per Shop mood. */
.sbp-var--2 .sbp-sec--products .sbp-more,
.sbp-var--4 .sbp-sec--products .sbp-more {
background:transparent; border:0; border-radius:0; padding:5px 0;
box-shadow:none; border-bottom:1px solid currentColor;
}
.sbp-var--3 .sbp-sec--products .sbp-shop__head .sbp-more { margin:14px auto 0; }
.sbp-var--5 .sbp-sec--products .sbp-more { border-radius:999px; }
.sbp-var--6 .sbp-sec--products .sbp-shop__head .sbp-more { margin:14px auto 0; }
/* Mobile composition law: preserve identity, remove impossible geometry. */
@media (max-width:760px) {
.sbp-sec--products .sbp-shop__head,
.sbp-var--4 .sbp-sec--products .sbp-shop__head,
.sbp-var--5 .sbp-sec--products .sbp-shop__head,
.sbp-var--7 .sbp-sec--products .sbp-shop__head {
grid-template-columns:minmax(0,1fr);
}
.sbp-sec--products .sbp-shop__rail { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.sbp-sec--products .sbp-shopcard__img { min-height:150px; }
.sbp-med--l .sbp-sec--products .sbp-shop__rail,
.sbp-med--m .sbp-sec--products .sbp-shop__rail { grid-template-columns:minmax(0,1fr); }
.sbp-var--2 .sbp-sec--products .sbp-shopcard,
.sbp-med--m.sbp-var--2 .sbp-sec--products .sbp-shopcard,
.sbp-med--l.sbp-var--2 .sbp-sec--products .sbp-shopcard {
grid-template-columns:118px minmax(0,1fr); min-height:118px;
}
.sbp-var--2 .sbp-sec--products .sbp-shopcard__img { min-height:118px; }
.sbp-var--2 .sbp-sec--products .sbp-shopcard:has(>.sbp-shopcard__img.is-empty) {
grid-template-columns:minmax(0,1fr);
}
.sbp-var--3 .sbp-sec--products .sbp-shop__rail { grid-template-columns:minmax(0,1fr); }
.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child,
.sbp-med--m.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child,
.sbp-med--l.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child {
grid-template-columns:minmax(0,1fr); min-height:0;
}
.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img,
.sbp-med--m.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img,
.sbp-med--l.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img {
min-height:220px; height:auto; aspect-ratio:16/10;
}
.sbp-var--4 .sbp-sec--products .sbp-shopcard {
grid-template-columns:38px minmax(0,1fr) auto; gap:10px;
}
.sbp-var--5 .sbp-sec--products .sbp-shop__rail,
.sbp-med--m.sbp-var--5 .sbp-sec--products .sbp-shop__rail,
.sbp-med--l.sbp-var--5 .sbp-sec--products .sbp-shop__rail {
grid-template-columns:minmax(0,1fr);
}
.sbp-var--5 .sbp-sec--products .sbp-shopcard:first-child { grid-row:auto; }
.sbp-var--5 .sbp-sec--products .sbp-shopcard:not(:first-child) { grid-column:1; }
.sbp-var--6 .sbp-sec--products .sbp-shop__rail,
.sbp-med--m.sbp-var--6 .sbp-sec--products .sbp-shop__rail,
.sbp-med--l.sbp-var--6 .sbp-sec--products .sbp-shop__rail {
grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
}
.sbp-var--6 .sbp-sec--products .sbp-shopcard,
.sbp-med--m.sbp-var--6 .sbp-sec--products .sbp-shopcard,
.sbp-med--l.sbp-var--6 .sbp-sec--products .sbp-shopcard { min-height:230px; }
.sbp-var--6 .sbp-sec--products .sbp-shopcard:first-child,
.sbp-med--m.sbp-var--6 .sbp-sec--products .sbp-shopcard:first-child,
.sbp-med--l.sbp-var--6 .sbp-sec--products .sbp-shopcard:first-child {
grid-column:span 2; min-height:420px;
}
.sbp-var--7 .sbp-sec--products .sbp-shopcard,
.sbp-med--m.sbp-var--7 .sbp-sec--products .sbp-shopcard,
.sbp-med--l.sbp-var--7 .sbp-sec--products .sbp-shopcard {
flex-basis:min(82vw,340px);
}
.sbp-var--7 .sbp-sec--products .sbp-shopcard__img { min-height:260px; max-height:340px; }
}
@media (max-width:480px) {
.sbp-sec--products .sbp-shop__rail { grid-template-columns:minmax(0,1fr); }
.sbp-var--6 .sbp-sec--products .sbp-shop__rail { grid-template-columns:minmax(0,1fr); }
.sbp-var--6 .sbp-sec--products .sbp-shopcard:first-child { grid-column:1; min-height:360px; }
}
@media (prefers-reduced-motion:reduce) {
.sbp-var--7 .sbp-sec--products .sbp-shop__rail { scroll-behavior:auto !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_SHOP_PREMIUM_REFERENCE v7 — scale + contrast integrity.
The S/M/L dial is monotonic by construction, Shop is insulated from legacy
generic record-shelf geometry, and every text-on-image state carries its own
deterministic contrast veil. White, mid-tone and dark imagery remain readable
without pretending CSS can infer image luminance. One authoritative Shop block.
═══════════════════════════════════════════════════════════════════════════ */
/* Shared product information contract. The canonical description excerpt now
reaches .sbp-shopcard__meta; Shop variants may give it 1–3 lines. */
.sbp-sec--products .sbp-shopcard__meta{
min-height:0;
-webkit-line-clamp:2;
line-height:1.45;
font-weight:550;
}
.sbp-sec--products .sbp-shopcard__t,
.sbp-sec--products .sbp-shopcard__meta,
.sbp-sec--products .sbp-shopcard__go{overflow-wrap:anywhere;word-break:normal}
.sbp-sec--products .sbp-shopcard__pricebody{
display:none;
width:max-content;
max-width:100%;
font-weight:850;
font-size:14px;
line-height:1.2;
color:var(--sbp-acc-ink);
font-variant-numeric:tabular-nums;
}
/* V1 STOREFRONT — protected conventional grid. It is the only Shop variant
allowed to inherit the global Text-on-image switch. */
.sbp-secwrap:not(.sbp-var--2):not(.sbp-var--3):not(.sbp-var--4):not(.sbp-var--5):not(.sbp-var--6):not(.sbp-var--7)
.sbp-sec--products .sbp-shopcard__img.is-empty{min-height:138px;max-height:158px}
.sbp-med--m.sbp-secwrap:not(.sbp-var--2):not(.sbp-var--3):not(.sbp-var--4):not(.sbp-var--5):not(.sbp-var--6):not(.sbp-var--7)
.sbp-sec--products .sbp-shopcard__img.is-empty{min-height:164px;max-height:188px}
.sbp-med--l.sbp-secwrap:not(.sbp-var--2):not(.sbp-var--3):not(.sbp-var--4):not(.sbp-var--5):not(.sbp-var--6):not(.sbp-var--7)
.sbp-sec--products .sbp-shopcard__img.is-empty{min-height:205px;max-height:228px}
/* V1 scale law: explicit heights beat width-derived aspect ratios, so
S < M < L remains true even on very wide editor canvases. */
.sbp-secwrap:not(.sbp-var--2):not(.sbp-var--3):not(.sbp-var--4):not(.sbp-var--5):not(.sbp-var--6):not(.sbp-var--7)
.sbp-sec--products .sbp-shopcard__img:not(.is-empty){
height:260px;min-height:260px;max-height:260px;aspect-ratio:auto;
}
.sbp-med--m.sbp-secwrap:not(.sbp-var--2):not(.sbp-var--3):not(.sbp-var--4):not(.sbp-var--5):not(.sbp-var--6):not(.sbp-var--7)
.sbp-sec--products .sbp-shopcard__img:not(.is-empty){
height:320px;min-height:320px;max-height:320px;aspect-ratio:auto;
}
.sbp-med--l.sbp-secwrap:not(.sbp-var--2):not(.sbp-var--3):not(.sbp-var--4):not(.sbp-var--5):not(.sbp-var--6):not(.sbp-var--7)
.sbp-sec--products .sbp-shopcard__img:not(.is-empty){
height:380px;min-height:380px;max-height:380px;aspect-ratio:auto;
}
/* V1 text-on-image contrast contract. CSS cannot truthfully classify image
luminance, so the text region gets a deterministic veil strong enough for a
white, mid-tone or dark source plus a small shadow for edge contrast. */
.sbp-olay--1.sbp-secwrap:not(.sbp-var--2):not(.sbp-var--3):not(.sbp-var--4):not(.sbp-var--5):not(.sbp-var--6):not(.sbp-var--7)
.sbp-sec--products .sbp-shopcard__img:not(.is-empty)::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(9,11,14,.04) 18%,rgba(9,11,14,.20) 42%,rgba(9,11,14,.68) 66%,rgba(9,11,14,.94) 100%);
}
.sbp-olay--1.sbp-secwrap:not(.sbp-var--2):not(.sbp-var--3):not(.sbp-var--4):not(.sbp-var--5):not(.sbp-var--6):not(.sbp-var--7)
.sbp-sec--products .sbp-shopcard:not(:has(>.sbp-shopcard__img.is-empty)) .sbp-shopcard__body{
text-shadow:0 1px 3px rgba(0,0,0,.72);
}
.sbp-olay--1.sbp-secwrap:not(.sbp-var--2):not(.sbp-var--3):not(.sbp-var--4):not(.sbp-var--5):not(.sbp-var--6):not(.sbp-var--7)
.sbp-sec--products .sbp-shopcard:has(>.sbp-shopcard__img.is-empty) .sbp-shopcard__img::after{content:none!important}
.sbp-olay--1.sbp-secwrap:not(.sbp-var--2):not(.sbp-var--3):not(.sbp-var--4):not(.sbp-var--5):not(.sbp-var--6):not(.sbp-var--7)
.sbp-sec--products .sbp-shopcard:has(>.sbp-shopcard__img.is-empty) > .sbp-shopcard__body{
position:static!important;inset:auto!important;background:var(--sbp-card)!important;color:var(--sbp-ink)!important;text-shadow:none;
}
.sbp-olay--1.sbp-secwrap:not(.sbp-var--2):not(.sbp-var--3):not(.sbp-var--4):not(.sbp-var--5):not(.sbp-var--6):not(.sbp-var--7)
.sbp-sec--products .sbp-shopcard:has(>.sbp-shopcard__img.is-empty) > .sbp-shopcard__body *{color:inherit!important}
/* V2 EDITORIAL COLLECTION — alternating magazine rows. Real artwork is shown
whole (contain), never squeezed into a destructive cover-crop. Price belongs
with the copy, not inside the artwork. */
.sbp-var--2 .sbp-sec--products .sbp-shop__head{
grid-template-columns:minmax(0,1fr) auto;
align-items:end;
margin-bottom:clamp(26px,3.5vw,42px);
}
.sbp-var--2 .sbp-sec--products .sbp-shop__intro{
max-width:58ch;
border-left:3px solid var(--sbp-indicator,var(--sbp-org-display));
padding-left:clamp(16px,2.2vw,24px);
}
.sbp-var--2 .sbp-sec--products .sbp-shop__rail{counter-reset:shop-v2;gap:18px;max-width:1080px}
.sbp-var--2 .sbp-sec--products .sbp-shopcard{
counter-increment:shop-v2;
position:relative;
display:grid!important;
grid-template-columns:minmax(240px,.44fr) minmax(0,.56fr);
min-height:210px;
height:auto;
overflow:hidden;
box-shadow:none;
border-radius:22px;
}
.sbp-var--2 .sbp-sec--products .sbp-shopcard:nth-child(even){grid-template-columns:minmax(0,.56fr) minmax(240px,.44fr)}
.sbp-var--2 .sbp-sec--products .sbp-shopcard:nth-child(even) .sbp-shopcard__img{grid-column:2;grid-row:1}
.sbp-var--2 .sbp-sec--products .sbp-shopcard:nth-child(even) .sbp-shopcard__body{grid-column:1;grid-row:1}
.sbp-var--2 .sbp-sec--products .sbp-shopcard__img,
.sbp-var--2 .sbp-sec--products .sbp-shopcard__img.is-empty{
display:flex;
width:100%;
height:100%;
min-height:210px;
max-height:none;
aspect-ratio:auto;
border-radius:0;
background-size:contain!important;
background-repeat:no-repeat!important;
background-position:center!important;
background-color:color-mix(in srgb,var(--sbp-field-b) 82%,var(--sbp-card));
}
.sbp-var--2 .sbp-sec--products .sbp-shopcard__body{
position:static!important;
inset:auto!important;
padding:26px 30px;
justify-content:center;
background:color-mix(in srgb,var(--sbp-card) 98%,var(--sbp-acc-soft));
color:var(--sbp-ink)!important;
}
.sbp-var--2 .sbp-sec--products .sbp-shopcard__body *{color:inherit}
.sbp-var--2 .sbp-sec--products .sbp-shopcard__meta{-webkit-line-clamp:3;max-width:58ch;color:var(--sbp-mut)!important}
.sbp-var--2 .sbp-sec--products .sbp-shopcard__price{display:none}
.sbp-var--2 .sbp-sec--products .sbp-shopcard__pricebody{display:block;margin-top:5px;color:var(--sbp-acc-ink)!important}
.sbp-var--2 .sbp-sec--products .sbp-shopcard__go{color:var(--sbp-acc-ink)!important}
.sbp-var--2 .sbp-sec--products .sbp-shopcard::after{
content:counter(shop-v2,decimal-leading-zero);
position:absolute;right:18px;top:14px;z-index:3;
font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--sbp-mut);
}
.sbp-var--2 .sbp-sec--products .sbp-shopcard:nth-child(even)::after{right:auto;left:18px}
.sbp-med--m.sbp-var--2 .sbp-sec--products .sbp-shopcard{grid-template-columns:300px minmax(0,1fr);min-height:230px}
.sbp-med--m.sbp-var--2 .sbp-sec--products .sbp-shopcard:nth-child(even){grid-template-columns:minmax(0,1fr) 300px}
.sbp-med--l.sbp-var--2 .sbp-sec--products .sbp-shopcard{grid-template-columns:380px minmax(0,1fr);min-height:270px}
.sbp-med--l.sbp-var--2 .sbp-sec--products .sbp-shopcard:nth-child(even){grid-template-columns:minmax(0,1fr) 380px}
.sbp-var--2 .sbp-sec--products .sbp-shopcard:has(>.sbp-shopcard__img.is-empty){grid-template-columns:minmax(240px,.44fr) minmax(0,.56fr);min-height:210px}
.sbp-var--2 .sbp-sec--products .sbp-shopcard:nth-child(even):has(>.sbp-shopcard__img.is-empty){grid-template-columns:minmax(0,.56fr) minmax(240px,.44fr)}
.sbp-med--m.sbp-var--2 .sbp-sec--products .sbp-shopcard:has(>.sbp-shopcard__img.is-empty){grid-template-columns:300px minmax(0,1fr);min-height:230px}
.sbp-med--m.sbp-var--2 .sbp-sec--products .sbp-shopcard:nth-child(even):has(>.sbp-shopcard__img.is-empty){grid-template-columns:minmax(0,1fr) 300px}
.sbp-med--l.sbp-var--2 .sbp-sec--products .sbp-shopcard:has(>.sbp-shopcard__img.is-empty){grid-template-columns:380px minmax(0,1fr);min-height:270px}
.sbp-med--l.sbp-var--2 .sbp-sec--products .sbp-shopcard:nth-child(even):has(>.sbp-shopcard__img.is-empty){grid-template-columns:minmax(0,1fr) 380px}
.sbp-med--m.sbp-var--2 .sbp-sec--products .sbp-shopcard__img,
.sbp-med--l.sbp-var--2 .sbp-sec--products .sbp-shopcard__img{min-height:100%}
/* V3 CATALOGUE STAGE — image + real information, never image + empty white
half. V6 owns overlay storytelling, so V3 is explicitly non-overlay. */
.sbp-var--3 .sbp-sec--products .sbp-shop__head{max-width:700px;margin-bottom:clamp(24px,3vw,34px)}
.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child,
.sbp-med--m.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child,
.sbp-med--l.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child{
grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr);
min-height:300px;
}
.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img,
.sbp-med--m.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img,
.sbp-med--l.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img{
min-height:300px;
height:100%;
max-height:none;
aspect-ratio:auto;
background-size:cover;
background-position:center;
}
.sbp-med--m.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child,
.sbp-med--m.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img{min-height:340px}
.sbp-med--l.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child,
.sbp-med--l.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img{min-height:390px}
.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child:has(>.sbp-shopcard__img.is-empty){grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr);min-height:300px}
.sbp-med--m.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child:has(>.sbp-shopcard__img.is-empty){grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr);min-height:340px}
.sbp-med--l.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child:has(>.sbp-shopcard__img.is-empty){grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr);min-height:390px}
.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img.is-empty{min-height:300px;max-height:none;height:100%}
.sbp-med--m.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img.is-empty{min-height:340px;max-height:none;height:100%}
.sbp-med--l.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img.is-empty{min-height:390px;max-height:none;height:100%}
.sbp-var--3 .sbp-sec--products .sbp-shopcard .sbp-shopcard__img::after{content:none!important}
.sbp-var--3 .sbp-sec--products .sbp-shopcard > .sbp-shopcard__body{
position:static!important;inset:auto!important;z-index:auto!important;
padding:clamp(24px,3.4vw,42px)!important;background:var(--sbp-card)!important;color:var(--sbp-ink)!important;
}
.sbp-var--3 .sbp-sec--products .sbp-shopcard__body *{color:inherit!important}
.sbp-var--3 .sbp-sec--products .sbp-shopcard__meta{-webkit-line-clamp:3;color:var(--sbp-mut)!important}
.sbp-var--3 .sbp-sec--products .sbp-shopcard__price{display:none}
.sbp-var--3 .sbp-sec--products .sbp-shopcard__pricebody{display:block;margin-top:7px;color:var(--sbp-acc-ink)!important}
.sbp-var--3 .sbp-sec--products .sbp-shopcard__go{color:var(--sbp-acc-ink)!important;text-decoration:none!important}
.sbp-var--3 .sbp-sec--products .sbp-shopcard:nth-child(2):last-child{
grid-column:1/-1;display:grid!important;grid-template-columns:132px minmax(0,1fr);min-height:120px;
}
.sbp-var--3 .sbp-sec--products .sbp-shopcard:nth-child(2):last-child .sbp-shopcard__img{
min-height:120px;height:100%;aspect-ratio:auto;background-size:contain;background-repeat:no-repeat;background-color:var(--sbp-field-b);
}
.sbp-var--3 .sbp-sec--products .sbp-shopcard:nth-child(2):last-child .sbp-shopcard__body{padding:16px 20px!important;justify-content:center}
/* V4 PRICE INDEX — a pure commerce ledger. Images and every overlay artefact
are retired. Product, excerpt, action and price are the whole composition. */
.sbp-var--4 .sbp-sec--products .sbp-shop__head{
grid-template-columns:minmax(0,1fr) auto;
gap:18px 32px;
align-items:end;
max-width:1040px;
margin-inline:auto;
}
.sbp-var--4 .sbp-sec--products .sbp-shop__intro{max-width:48ch}
.sbp-var--4 .sbp-sec--products .sbp-shop__rail,
.sbp-var--4 .sbp-sec--products .sbp-shop__rail--1,
.sbp-var--4 .sbp-sec--products .sbp-shop__rail--2,
.sbp-var--4 .sbp-sec--products .sbp-shop__rail--solo{
display:block;max-width:1040px;margin-inline:auto;padding:8px 24px;
border:1px solid var(--sbp-line);border-radius:22px;
background:var(--sbp-card);box-shadow:var(--sbp-shadow);counter-reset:shop-index;
}
.sbp-var--4 .sbp-sec--products .sbp-shopcard{
counter-increment:shop-index;display:grid!important;grid-template-columns:52px minmax(0,1fr);
gap:16px;align-items:center;padding:20px 2px;min-height:0;height:auto;
border:0;border-bottom:1px solid var(--sbp-line);border-radius:0;background:transparent;box-shadow:none;overflow:visible;
}
.sbp-var--4 .sbp-sec--products .sbp-shopcard:last-child{border-bottom:0}
.sbp-var--4 .sbp-sec--products .sbp-shopcard::before{
content:counter(shop-index,decimal-leading-zero);font-weight:800;font-size:12px;letter-spacing:.08em;color:var(--sbp-mut);
}
.sbp-var--4 .sbp-sec--products .sbp-shopcard__zone--media{display:none!important}
.sbp-var--4 .sbp-sec--products .sbp-shopcard > .sbp-shopcard__body{
position:static!important;inset:auto!important;grid-column:2;display:grid!important;
grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;column-gap:24px;row-gap:4px;
padding:0!important;background:transparent!important;color:var(--sbp-ink)!important;
}
.sbp-var--4 .sbp-sec--products .sbp-shopcard__body *{color:inherit!important}
.sbp-var--4 .sbp-sec--products .sbp-shopcard__t{grid-column:1;grid-row:1;font-size:18px}
.sbp-var--4 .sbp-sec--products .sbp-shopcard__meta{grid-column:1;grid-row:2;-webkit-line-clamp:1;color:var(--sbp-mut)!important}
.sbp-var--4 .sbp-sec--products .sbp-shopcard__pricebody{
display:block;grid-column:2;grid-row:1/4;align-self:center;font-size:18px;color:var(--sbp-acc-ink)!important;
}
.sbp-var--4 .sbp-sec--products .sbp-shopcard__zone--action{grid-column:1;grid-row:3;min-height:0;padding-top:3px;margin-top:0}
.sbp-var--4 .sbp-sec--products .sbp-shopcard__go{font-size:12.5px;color:var(--sbp-acc-ink)!important;text-decoration:none!important}
.sbp-var--4 .sbp-sec--products .sbp-shop__rail{max-width:900px}
.sbp-var--4 .sbp-sec--products .sbp-shopcard{padding:16px 2px}
.sbp-var--4 .sbp-sec--products .sbp-shopcard__t{font-size:16px}
.sbp-med--m.sbp-var--4 .sbp-sec--products .sbp-shop__rail{max-width:990px}
.sbp-med--m.sbp-var--4 .sbp-sec--products .sbp-shopcard{grid-template-columns:60px minmax(0,1fr);padding:21px 2px}
.sbp-med--m.sbp-var--4 .sbp-sec--products .sbp-shopcard__t{font-size:18px}
.sbp-med--l.sbp-var--4 .sbp-sec--products .sbp-shop__rail{max-width:1080px}
.sbp-med--l.sbp-var--4 .sbp-sec--products .sbp-shopcard{grid-template-columns:70px minmax(0,1fr);padding:25px 2px}
.sbp-med--l.sbp-var--4 .sbp-sec--products .sbp-shopcard__t,
.sbp-med--l.sbp-var--4 .sbp-sec--products .sbp-shopcard__pricebody{font-size:20px}
/* V5 FEATURED SHOWCASE — merchandising hierarchy without cinema-screen scale.
Supporting products keep a useful full-art thumbnail and real information. */
.sbp-var--5 .sbp-sec--products .sbp-shop__head{grid-template-columns:minmax(0,1fr) auto;align-items:end;margin-bottom:clamp(24px,3vw,34px)}
.sbp-var--5 .sbp-sec--products .sbp-shopcard .sbp-shopcard__img::after{content:none!important}
.sbp-var--5 .sbp-sec--products .sbp-shopcard > .sbp-shopcard__body{
position:static!important;inset:auto!important;background:var(--sbp-card)!important;color:var(--sbp-ink)!important;
}
.sbp-var--5 .sbp-sec--products .sbp-shopcard__body *{color:inherit!important}
.sbp-var--5 .sbp-sec--products .sbp-shopcard__price{display:none}
.sbp-var--5 .sbp-sec--products .sbp-shopcard__pricebody{display:block;margin-top:4px;color:var(--sbp-acc-ink)!important}
.sbp-var--5 .sbp-sec--products .sbp-shopcard__go{color:var(--sbp-acc-ink)!important;text-decoration:none!important}
.sbp-var--5 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img{
min-height:280px;max-height:280px;height:280px;aspect-ratio:auto;background-size:cover;background-position:center;
}
.sbp-med--m.sbp-var--5 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img{min-height:330px;max-height:330px;height:330px}
.sbp-med--l.sbp-var--5 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img{min-height:380px;max-height:380px;height:380px}
.sbp-var--5 .sbp-sec--products .sbp-shopcard:first-child:has(>.sbp-shopcard__img.is-empty){display:flex!important;flex-direction:column;min-height:0}
.sbp-var--5 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img.is-empty{display:flex;min-height:180px;max-height:180px;height:180px}
.sbp-med--m.sbp-var--5 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img.is-empty{min-height:210px;max-height:210px;height:210px}
.sbp-med--l.sbp-var--5 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img.is-empty{min-height:240px;max-height:240px;height:240px}
.sbp-var--5 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__meta{-webkit-line-clamp:2}
.sbp-var--5 .sbp-sec--products .sbp-shopcard:not(:first-child),
.sbp-var--5 .sbp-sec--products .sbp-shopcard:not(:first-child):has(>.sbp-shopcard__img.is-empty){display:grid!important;grid-template-columns:100px minmax(0,1fr)!important;min-height:104px}
.sbp-var--5 .sbp-sec--products .sbp-shopcard:not(:first-child) .sbp-shopcard__img,
.sbp-var--5 .sbp-sec--products .sbp-shopcard:not(:first-child) .sbp-shopcard__img.is-empty{
display:flex;width:100px;height:100%;min-height:104px;max-height:none;aspect-ratio:auto;
background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important;
background-color:var(--sbp-field-b);
}
.sbp-var--5 .sbp-sec--products .sbp-shopcard:not(:first-child) .sbp-shopcard__body{padding:14px 16px!important;justify-content:center}
.sbp-var--5 .sbp-sec--products .sbp-shopcard:not(:first-child) .sbp-shopcard__meta{-webkit-line-clamp:2}
.sbp-med--m.sbp-var--5 .sbp-sec--products .sbp-shopcard:not(:first-child),
.sbp-med--m.sbp-var--5 .sbp-sec--products .sbp-shopcard:not(:first-child):has(>.sbp-shopcard__img.is-empty){grid-template-columns:116px minmax(0,1fr)!important;min-height:116px}
.sbp-med--m.sbp-var--5 .sbp-sec--products .sbp-shopcard:not(:first-child) .sbp-shopcard__img{width:116px;min-height:116px}
.sbp-med--l.sbp-var--5 .sbp-sec--products .sbp-shopcard:not(:first-child),
.sbp-med--l.sbp-var--5 .sbp-sec--products .sbp-shopcard:not(:first-child):has(>.sbp-shopcard__img.is-empty){grid-template-columns:132px minmax(0,1fr)!important;min-height:132px}
.sbp-med--l.sbp-var--5 .sbp-sec--products .sbp-shopcard:not(:first-child) .sbp-shopcard__img{width:132px;min-height:132px}
/* V6 LOOKBOOK — owns the Shop image-overlay experience. Real imagery proved
the concept; only its overlarge heights are reduced. */
.sbp-var--6 .sbp-sec--products .sbp-shop__head{max-width:680px;margin-bottom:clamp(22px,3vw,34px)}
.sbp-var--6 .sbp-sec--products .sbp-shopcard{min-height:220px}
.sbp-var--6 .sbp-sec--products .sbp-shopcard:first-child{min-height:400px}
.sbp-med--m.sbp-var--6 .sbp-sec--products .sbp-shopcard{min-height:250px}
.sbp-med--m.sbp-var--6 .sbp-sec--products .sbp-shopcard:first-child{min-height:450px}
.sbp-med--l.sbp-var--6 .sbp-sec--products .sbp-shopcard{min-height:280px}
.sbp-med--l.sbp-var--6 .sbp-sec--products .sbp-shopcard:first-child{min-height:500px}
.sbp-var--6 .sbp-sec--products .sbp-shopcard:has(>.sbp-shopcard__img.is-empty){min-height:240px}
.sbp-var--6 .sbp-sec--products .sbp-shopcard:first-child:has(>.sbp-shopcard__img.is-empty){min-height:330px}
.sbp-med--m.sbp-var--6 .sbp-sec--products .sbp-shopcard:has(>.sbp-shopcard__img.is-empty){min-height:260px}
.sbp-med--m.sbp-var--6 .sbp-sec--products .sbp-shopcard:first-child:has(>.sbp-shopcard__img.is-empty){min-height:360px}
.sbp-med--l.sbp-var--6 .sbp-sec--products .sbp-shopcard:has(>.sbp-shopcard__img.is-empty){min-height:280px}
.sbp-med--l.sbp-var--6 .sbp-sec--products .sbp-shopcard:first-child:has(>.sbp-shopcard__img.is-empty){min-height:390px}
.sbp-var--6 .sbp-sec--products .sbp-shopcard__meta{-webkit-line-clamp:2;color:#fff!important}
.sbp-var--6 .sbp-sec--products .sbp-shopcard:has(>.sbp-shopcard__img.is-empty) .sbp-shopcard__meta{color:var(--sbp-mut)!important}
/* V6 contrast is deterministic, not luminance-guessing. A veil beneath the
copy makes white/mid/dark imagery safe and leaves the upper image clean. */
.sbp-var--6 .sbp-sec--products .sbp-shopcard:has(>.sbp-shopcard__img:not(.is-empty))::after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(8,10,13,0) 22%,rgba(8,10,13,.12) 44%,rgba(8,10,13,.70) 72%,rgba(8,10,13,.94) 100%);
}
.sbp-var--6 .sbp-sec--products .sbp-shopcard:has(>.sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__body{
text-shadow:0 1px 3px rgba(0,0,0,.72);
}
/* With exactly two products, do not let the flagship span the whole grid and
bury product two below the fold. Keep both merchandise stories visible. */
.sbp-var--6 .sbp-sec--products .sbp-shop__rail--2{
grid-template-columns:minmax(0,1.55fr) minmax(260px,.65fr);align-items:stretch;gap:14px;
}
.sbp-var--6 .sbp-sec--products .sbp-shop__rail--2 .sbp-shopcard:first-child{
grid-column:auto;grid-row:auto;min-height:380px;
}
.sbp-var--6 .sbp-sec--products .sbp-shop__rail--2 .sbp-shopcard:last-child{min-height:380px}
.sbp-med--m.sbp-var--6 .sbp-sec--products .sbp-shop__rail--2{grid-template-columns:minmax(0,1.6fr) minmax(280px,.7fr);gap:16px}
.sbp-med--m.sbp-var--6 .sbp-sec--products .sbp-shop__rail--2 .sbp-shopcard:first-child,
.sbp-med--m.sbp-var--6 .sbp-sec--products .sbp-shop__rail--2 .sbp-shopcard:last-child{min-height:430px}
.sbp-med--l.sbp-var--6 .sbp-sec--products .sbp-shop__rail--2{grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);gap:18px}
.sbp-med--l.sbp-var--6 .sbp-sec--products .sbp-shop__rail--2 .sbp-shopcard:first-child,
.sbp-med--l.sbp-var--6 .sbp-sec--products .sbp-shop__rail--2 .sbp-shopcard:last-child{min-height:480px}
/* V7 SHOP SHELF — true merchandise windows on a rail. Unlike V1, artwork is
shown whole and the product label lives BELOW the image. Navigation remains
honest: controls appear only when JS proves genuine overflow. */
.sbp-var--7 .sbp-sec--products .sbp-shop__head{
grid-template-columns:minmax(0,1fr) auto;align-items:end;
padding-bottom:14px;border-bottom:1px solid color-mix(in srgb,var(--sbp-line) 86%,transparent);
margin-bottom:18px;
}
.sbp-var--7 .sbp-sec--products .sbp-shop__rail{
counter-reset:shop-shelf;gap:16px;padding:4px 2px 22px;
border-bottom:2px solid color-mix(in srgb,var(--sbp-ink) 12%,var(--sbp-line));
}
.sbp-var--7 .sbp-sec--products .sbp-shopcard{
counter-increment:shop-shelf;position:relative;display:flex!important;flex-direction:column!important;
grid-template-columns:none!important;align-items:stretch!important;flex-basis:clamp(280px,31vw,330px);
border-radius:20px;box-shadow:none;background:var(--sbp-card);
}
.sbp-var--7 .sbp-sec--products .sbp-shopcard::after{
content:counter(shop-shelf,decimal-leading-zero);position:absolute;left:14px;top:14px;z-index:3;
padding:5px 8px;border-radius:999px;background:color-mix(in srgb,var(--sbp-card) 92%,transparent);
box-shadow:0 3px 12px -7px rgba(0,0,0,.32);font-size:10px;font-weight:850;letter-spacing:.12em;color:var(--sbp-ink);
}
.sbp-var--7 .sbp-sec--products .sbp-shopcard__img{
min-height:220px;max-height:220px;height:220px;aspect-ratio:auto;
background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important;
background-color:color-mix(in srgb,var(--sbp-field-b) 88%,var(--sbp-card));
}
.sbp-var--7 .sbp-sec--products .sbp-shopcard__img::after{content:none!important}
.sbp-var--7 .sbp-sec--products .sbp-shopcard > .sbp-shopcard__body{
position:static!important;inset:auto!important;z-index:auto!important;
display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;
column-gap:14px;row-gap:5px;padding:17px 18px 18px!important;background:var(--sbp-card)!important;color:var(--sbp-ink)!important;
}
.sbp-var--7 .sbp-sec--products .sbp-shopcard__body *{color:inherit!important}
.sbp-var--7 .sbp-sec--products .sbp-shopcard__t{grid-column:1/-1;grid-row:1}
.sbp-var--7 .sbp-sec--products .sbp-shopcard__meta{grid-column:1/-1;grid-row:2;-webkit-line-clamp:2;color:var(--sbp-mut)!important}
.sbp-var--7 .sbp-sec--products .sbp-shopcard__price{display:none}
.sbp-var--7 .sbp-sec--products .sbp-shopcard__pricebody{display:block;grid-column:1;grid-row:3;align-self:end;color:var(--sbp-acc-ink)!important}
.sbp-var--7 .sbp-sec--products .sbp-shopcard__zone--action{grid-column:2;grid-row:3;align-self:end;min-height:0;margin-top:0;padding-top:0}
.sbp-var--7 .sbp-sec--products .sbp-shopcard__go{color:var(--sbp-acc-ink)!important;text-decoration:none!important;white-space:nowrap}
.sbp-med--m.sbp-var--7 .sbp-sec--products .sbp-shopcard{flex-basis:clamp(310px,34vw,360px)}
.sbp-med--m.sbp-var--7 .sbp-sec--products .sbp-shopcard__img{min-height:250px;max-height:250px;height:250px}
.sbp-med--l.sbp-var--7 .sbp-sec--products .sbp-shopcard{flex-basis:clamp(340px,37vw,390px)}
.sbp-med--l.sbp-var--7 .sbp-sec--products .sbp-shopcard__img{min-height:280px;max-height:280px;height:280px}
.sbp-var--7 .sbp-sec--products .sbp-shopcard__img.is-empty{min-height:180px;max-height:180px;height:180px}
.sbp-med--m.sbp-var--7 .sbp-sec--products .sbp-shopcard__img.is-empty{min-height:210px;max-height:210px;height:210px}
.sbp-med--l.sbp-var--7 .sbp-sec--products .sbp-shopcard__img.is-empty{min-height:230px;max-height:230px;height:230px}
/* Container/mobile law: preserve the identity of each composition without
forcing desktop geometry into the editor's narrow canvas. */
@container sbp-product-shop (max-width:760px){
/* Narrow canvases still preserve dial direction. S/M/L may compress, but
they never collapse to one identical geometry. */
.sbp-var--2 .sbp-sec--products .sbp-shopcard,
.sbp-var--2 .sbp-sec--products .sbp-shopcard:nth-child(even){grid-template-columns:104px minmax(0,1fr);min-height:124px}
.sbp-var--2 .sbp-sec--products .sbp-shopcard:nth-child(even) .sbp-shopcard__img{grid-column:1;grid-row:1}
.sbp-var--2 .sbp-sec--products .sbp-shopcard:nth-child(even) .sbp-shopcard__body{grid-column:2;grid-row:1}
.sbp-var--2 .sbp-sec--products .sbp-shopcard__img{min-height:124px}
.sbp-med--m.sbp-var--2 .sbp-sec--products .sbp-shopcard,
.sbp-med--m.sbp-var--2 .sbp-sec--products .sbp-shopcard:nth-child(even){grid-template-columns:118px minmax(0,1fr);min-height:138px}
.sbp-med--m.sbp-var--2 .sbp-sec--products .sbp-shopcard__img{min-height:138px}
.sbp-med--l.sbp-var--2 .sbp-sec--products .sbp-shopcard,
.sbp-med--l.sbp-var--2 .sbp-sec--products .sbp-shopcard:nth-child(even){grid-template-columns:132px minmax(0,1fr);min-height:152px}
.sbp-med--l.sbp-var--2 .sbp-sec--products .sbp-shopcard__img{min-height:152px}
.sbp-var--2 .sbp-sec--products .sbp-shopcard__body{padding:16px 18px}
.sbp-var--2 .sbp-sec--products .sbp-shopcard__meta{-webkit-line-clamp:2}
.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child,
.sbp-med--m.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child,
.sbp-med--l.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child{grid-template-columns:minmax(0,1fr);min-height:0}
.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img{min-height:190px;height:190px}
.sbp-med--m.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img{min-height:220px;height:220px}
.sbp-med--l.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img{min-height:250px;height:250px}
.sbp-var--3 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__body{padding:20px!important}
.sbp-var--4 .sbp-sec--products .sbp-shop__head{grid-template-columns:minmax(0,1fr)}
.sbp-var--4 .sbp-sec--products .sbp-shop__rail{padding:6px 14px;border-radius:18px}
.sbp-var--4 .sbp-sec--products .sbp-shopcard{grid-template-columns:34px minmax(0,1fr);gap:10px;padding:13px 0}
.sbp-med--m.sbp-var--4 .sbp-sec--products .sbp-shopcard{grid-template-columns:38px minmax(0,1fr);padding:16px 0}
.sbp-med--l.sbp-var--4 .sbp-sec--products .sbp-shopcard{grid-template-columns:42px minmax(0,1fr);padding:19px 0}
.sbp-var--4 .sbp-sec--products .sbp-shopcard__meta{display:none}
.sbp-var--4 .sbp-sec--products .sbp-shopcard__pricebody{font-size:14px}
.sbp-med--m.sbp-var--4 .sbp-sec--products .sbp-shopcard__pricebody{font-size:15px}
.sbp-med--l.sbp-var--4 .sbp-sec--products .sbp-shopcard__pricebody{font-size:16px}
.sbp-var--5 .sbp-sec--products .sbp-shop__rail,
.sbp-med--m.sbp-var--5 .sbp-sec--products .sbp-shop__rail,
.sbp-med--l.sbp-var--5 .sbp-sec--products .sbp-shop__rail{grid-template-columns:minmax(0,1fr)}
.sbp-var--5 .sbp-sec--products .sbp-shopcard:first-child{grid-row:auto}
.sbp-var--5 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img{height:240px;min-height:240px;max-height:240px}
.sbp-med--m.sbp-var--5 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img{height:270px;min-height:270px;max-height:270px}
.sbp-med--l.sbp-var--5 .sbp-sec--products .sbp-shopcard:first-child .sbp-shopcard__img{height:300px;min-height:300px;max-height:300px}
.sbp-var--5 .sbp-sec--products .sbp-shopcard:not(:first-child){grid-column:1}
.sbp-var--6 .sbp-sec--products .sbp-shop__rail,
.sbp-med--m.sbp-var--6 .sbp-sec--products .sbp-shop__rail,
.sbp-med--l.sbp-var--6 .sbp-sec--products .sbp-shop__rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sbp-var--6 .sbp-sec--products .sbp-shopcard{min-height:210px}
.sbp-med--m.sbp-var--6 .sbp-sec--products .sbp-shopcard{min-height:230px}
.sbp-med--l.sbp-var--6 .sbp-sec--products .sbp-shopcard{min-height:250px}
.sbp-var--6 .sbp-sec--products .sbp-shopcard:first-child{grid-column:span 2;min-height:340px}
.sbp-med--m.sbp-var--6 .sbp-sec--products .sbp-shopcard:first-child{min-height:370px}
.sbp-med--l.sbp-var--6 .sbp-sec--products .sbp-shopcard:first-child{min-height:400px}
.sbp-var--6 .sbp-sec--products .sbp-shop__rail--2,
.sbp-med--m.sbp-var--6 .sbp-sec--products .sbp-shop__rail--2,
.sbp-med--l.sbp-var--6 .sbp-sec--products .sbp-shop__rail--2{grid-template-columns:minmax(0,1fr)}
.sbp-var--6 .sbp-sec--products .sbp-shop__rail--2 .sbp-shopcard:first-child,
.sbp-var--6 .sbp-sec--products .sbp-shop__rail--2 .sbp-shopcard:last-child{grid-column:1;min-height:320px}
.sbp-med--m.sbp-var--6 .sbp-sec--products .sbp-shop__rail--2 .sbp-shopcard:first-child,
.sbp-med--m.sbp-var--6 .sbp-sec--products .sbp-shop__rail--2 .sbp-shopcard:last-child{min-height:350px}
.sbp-med--l.sbp-var--6 .sbp-sec--products .sbp-shop__rail--2 .sbp-shopcard:first-child,
.sbp-med--l.sbp-var--6 .sbp-sec--products .sbp-shop__rail--2 .sbp-shopcard:last-child{min-height:380px}
.sbp-var--7 .sbp-sec--products .sbp-shop__head{grid-template-columns:minmax(0,1fr)}
.sbp-var--7 .sbp-sec--products .sbp-shopcard{flex-basis:min(80vw,300px)}
.sbp-med--m.sbp-var--7 .sbp-sec--products .sbp-shopcard{flex-basis:min(82vw,320px)}
.sbp-med--l.sbp-var--7 .sbp-sec--products .sbp-shopcard{flex-basis:min(84vw,340px)}
.sbp-var--7 .sbp-sec--products .sbp-shopcard__img{height:210px;min-height:210px;max-height:210px}
.sbp-med--m.sbp-var--7 .sbp-sec--products .sbp-shopcard__img{height:235px;min-height:235px;max-height:235px}
.sbp-med--l.sbp-var--7 .sbp-sec--products .sbp-shopcard__img{height:260px;min-height:260px;max-height:260px}
}
@media(max-width:480px){
.sbp-var--6 .sbp-sec--products .sbp-shop__rail{grid-template-columns:minmax(0,1fr)}
.sbp-var--6 .sbp-sec--products .sbp-shopcard:first-child{grid-column:1}
.sbp-var--4 .sbp-sec--products .sbp-shopcard > .sbp-shopcard__body{grid-template-columns:minmax(0,1fr) auto;column-gap:12px}
.sbp-var--7 .sbp-sec--products .sbp-shopcard > .sbp-shopcard__body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto}
.sbp-var--7 .sbp-sec--products .sbp-shopcard__pricebody{grid-column:1;grid-row:3}
.sbp-var--7 .sbp-sec--products .sbp-shopcard__zone--action{grid-column:1;grid-row:4;margin-top:3px}
}
@media(prefers-reduced-motion:reduce){
.sbp-var--7 .sbp-sec--products .sbp-shop__rail{scroll-behavior:auto!important}
}
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_SERVICES_PREMIUM_FAMILY v1 — seven service-native compositions.
Designed from how people choose HELP, not how they browse objects: the
capability (meta) leads, the title names the practice, price is honest but
never the automatic climax, the CTA keeps its truthful adapter label.
SCOPING: .sbp-fam--services — the SECTION-type discriminator emitted by
_offerings.php; Shop v2 (.sbp-sec--products zones) and every other shelf
family cannot match these rules, and the variant allowlist gates 4-7.
PRICE SEAT: for services sections the renderer seats the price as a card-
level field (CHL:BP_SERVICES_PRICE_SEAT v1); the base absolute badge law
keeps V1 Practice Front pixel-faithful, and V2-V7 re-seat it as type.
V1 is the untouched classless-safe base. Tokens only; no invented content;
an imageless record is typographically complete, never a void.
═══════════════════════════════════════════════════════════════════════════ */
/* Shared (V2–V7): capability leads; cards hug; imageless media never renders
a stage (typographic variants drop media entirely — the capability kicker
carries the voice). */
.sbp-var--2 .sbp-fam--services .sbp-shopcard,
.sbp-var--3 .sbp-fam--services .sbp-shopcard,
.sbp-var--4 .sbp-fam--services .sbp-shopcard,
.sbp-var--5 .sbp-fam--services .sbp-shopcard,
.sbp-var--6 .sbp-fam--services .sbp-shopcard,
.sbp-var--7 .sbp-fam--services .sbp-shopcard { height:auto; }
.sbp-var--2 .sbp-fam--services .sbp-shopcard__img,
.sbp-var--3 .sbp-fam--services .sbp-shopcard__img,
.sbp-var--6 .sbp-fam--services .sbp-shopcard__img,
.sbp-var--7 .sbp-fam--services .sbp-shopcard__img,
.sbp-var--4 .sbp-fam--services .sbp-shopcard__img.is-empty,
.sbp-var--5 .sbp-fam--services .sbp-shopcard__img.is-empty { display:none; }
.sbp-var--2 .sbp-fam--services .sbp-shopcard__body,
.sbp-var--3 .sbp-fam--services .sbp-shopcard__body,
.sbp-var--4 .sbp-fam--services .sbp-shopcard__body,
.sbp-var--5 .sbp-fam--services .sbp-shopcard__body { padding:0; }
.sbp-var--2 .sbp-fam--services .sbp-shopcard__meta,
.sbp-var--4 .sbp-fam--services .sbp-shopcard__meta,
.sbp-var--5 .sbp-fam--services .sbp-shopcard__meta {
order:-1; margin:0 0 4px; font-size:11px; font-weight:800;
letter-spacing:.11em; text-transform:uppercase; color:var(--sbp-acc-ink);
}
.sbp-var--2 .sbp-fam--services .sbp-shopcard__price--seat,
.sbp-var--3 .sbp-fam--services .sbp-shopcard__price--seat,
.sbp-var--4 .sbp-fam--services .sbp-shopcard__price--seat,
.sbp-var--5 .sbp-fam--services .sbp-shopcard__price--seat,
.sbp-var--6 .sbp-fam--services .sbp-shopcard__price--seat,
.sbp-var--7 .sbp-fam--services .sbp-shopcard__price--seat {
position:static; padding:0; background:transparent; box-shadow:none;
font-weight:800; color:var(--sbp-acc-ink);
}
/* ── V2 CONSULTATION LIST — a calm letter about what they can do for you. ── */
.sbp-var--2 .sbp-fam--services .sbp-shop__rail,
.sbp-var--2 .sbp-fam--services .sbp-shop__rail--2,
.sbp-var--2 .sbp-fam--services .sbp-shop__rail--1,
.sbp-var--2 .sbp-fam--services .sbp-shop__rail--solo { display:block; max-width:720px; margin-inline:auto; }
.sbp-var--2 .sbp-fam--services .sbp-shopcard {
display:flex !important; flex-direction:column; --sbp-ink:inherit; --sbp-mut:inherit;
background:transparent; border:0; border-radius:0; box-shadow:none;
padding:22px 2px; border-bottom:1px solid var(--sbp-line);
}
.sbp-var--2 .sbp-fam--services .sbp-shopcard__body { display:contents; }
.sbp-var--2 .sbp-fam--services .sbp-shopcard__meta { order:1; }
.sbp-var--2 .sbp-fam--services .sbp-shopcard__t { order:2; font-size:19px; margin:0; }
.sbp-var--2 .sbp-fam--services .sbp-shopcard__price--seat { order:3; display:none; font-size:13.5px; font-weight:650; color:var(--sbp-mut); margin-top:4px; }
.sbp-var--2 .sbp-fam--services .sbp-shopcard__zone--action { order:4; margin-top:8px; padding-top:0; min-height:0; }
.sbp-med--m.sbp-var--2 .sbp-fam--services .sbp-shopcard__price--seat { display:block; }
.sbp-med--m.sbp-var--2 .sbp-fam--services .sbp-shopcard { padding:26px 2px; }
.sbp-med--m.sbp-var--2 .sbp-fam--services .sbp-shopcard__t { font-size:21px; }
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shop__rail { max-width:820px; }
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard { padding:30px 2px; }
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard__t { font-size:23px; }
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard__meta { font-size:12px; letter-spacing:.14em; }
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard__price--seat { display:block; font-size:14.5px; }
/* ── V3 CAPABILITY GRID — a text-first "what we help with" wall. ── */
.sbp-var--3 .sbp-fam--services .sbp-shop__rail,
.sbp-var--3 .sbp-fam--services .sbp-shop__rail--2,
.sbp-var--3 .sbp-fam--services .sbp-shop__rail--1,
.sbp-var--3 .sbp-fam--services .sbp-shop__rail--solo { display:flex; flex-wrap:wrap; gap:12px; max-width:none; }
.sbp-var--3 .sbp-fam--services .sbp-shopcard {
display:flex !important; flex-direction:column; flex:0 1 auto; min-width:200px; max-width:300px;
padding:14px 16px; border:1px solid var(--sbp-line); border-radius:12px;
background:var(--sbp-card); box-shadow:none;
}
.sbp-var--3 .sbp-fam--services .sbp-shopcard__body { display:contents; }
.sbp-var--3 .sbp-fam--services .sbp-shopcard__meta {
order:1; margin:0 0 3px; font-size:10.5px; font-weight:800;
letter-spacing:.1em; text-transform:uppercase; color:var(--sbp-acc-ink);
}
.sbp-var--3 .sbp-fam--services .sbp-shopcard__t {
order:2; margin:0; font-size:15px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sbp-var--3 .sbp-fam--services .sbp-shopcard__price--seat { order:3; display:none; margin-top:5px; font-size:13px; font-weight:700; color:var(--sbp-mut); }
.sbp-var--3 .sbp-fam--services .sbp-shopcard__zone--action { order:4; margin-top:6px; padding-top:0; min-height:0; }
.sbp-var--3 .sbp-fam--services .sbp-shopcard__go { font-size:12.5px; }
.sbp-med--m.sbp-var--3 .sbp-fam--services .sbp-shopcard { flex:1 1 240px; max-width:none; padding:17px 18px; }
.sbp-med--m.sbp-var--3 .sbp-fam--services .sbp-shopcard__price--seat { display:block; }
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shop__rail { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard {
max-width:none; display:grid !important;
grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto auto;
align-items:center; column-gap:16px; padding:19px 20px;
}
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard__meta { grid-column:1; grid-row:1; }
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard__t { grid-column:1; grid-row:2; font-size:17px; }
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard__price--seat { grid-column:1; grid-row:3; }
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard__zone--action { grid-column:2; grid-row:1 / span 3; margin:0; justify-self:end; }
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard__go i { transition:transform .15s ease; }
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard:hover .sbp-shopcard__go i { transform:translateX(3px); }
/* ── V4 PATHWAY — numbered stones on a spine; the numeral is honest order. ── */
.sbp-var--4 .sbp-fam--services .sbp-shop__rail,
.sbp-var--4 .sbp-fam--services .sbp-shop__rail--2,
.sbp-var--4 .sbp-fam--services .sbp-shop__rail--1,
.sbp-var--4 .sbp-fam--services .sbp-shop__rail--solo {
display:block; max-width:760px; margin-inline:auto;
position:relative; counter-reset:svc-step; padding-left:54px;
}
.sbp-var--4 .sbp-fam--services .sbp-shop__rail::before {
content:""; position:absolute; left:21px; top:8px; bottom:8px; width:2px;
background:color-mix(in srgb, var(--sbp-indicator, var(--sbp-org-display)) 45%, transparent);
}
.sbp-var--4 .sbp-fam--services .sbp-shopcard {
display:flex !important; flex-direction:column; position:relative; overflow:visible;
counter-increment:svc-step; margin:0 0 18px;
background:var(--sbp-card); border:1px solid var(--sbp-line);
border-radius:14px; padding:16px 18px; box-shadow:none;
}
.sbp-var--4 .sbp-fam--services .sbp-shopcard::before {
content:counter(svc-step, decimal-leading-zero);
position:absolute; left:-54px; top:14px; width:42px; height:42px;
display:flex; align-items:center; justify-content:center;
border-radius:999px; background:var(--sbp-card);
border:2px solid var(--sbp-indicator, var(--sbp-org-display));
font-size:14px; font-weight:800; color:var(--sbp-ink);
font-variant-numeric:tabular-nums;
}
.sbp-var--4 .sbp-fam--services .sbp-shopcard__body { display:contents; }
.sbp-var--4 .sbp-fam--services .sbp-shopcard__meta { order:1; }
.sbp-var--4 .sbp-fam--services .sbp-shopcard__t { order:2; margin:0; font-size:17px; }
.sbp-var--4 .sbp-fam--services .sbp-shopcard__price--seat {
order:3; align-self:flex-start; margin-top:8px; padding:2px 9px;
border-radius:999px; background:var(--sbp-acc-soft);
font-size:12.5px; font-weight:750;
}
.sbp-var--4 .sbp-fam--services .sbp-shopcard__zone--action { order:4; margin-top:6px; min-height:0; padding-top:0; }
.sbp-med--m.sbp-var--4 .sbp-fam--services .sbp-shop__rail { max-width:860px; }
.sbp-med--m.sbp-var--4 .sbp-fam--services .sbp-shopcard { padding:20px 22px; margin-bottom:22px; }
.sbp-med--m.sbp-var--4 .sbp-fam--services .sbp-shopcard__img:not(.is-empty) {
display:block; position:absolute; right:16px; top:16px; width:76px; height:76px;
min-height:76px; max-height:76px; aspect-ratio:1; border-radius:12px; overflow:hidden;
border:1px solid var(--sbp-line);
}
.sbp-med--m.sbp-var--4 .sbp-fam--services .sbp-shopcard__img:not(.is-empty) .sbp-shopcard__ph { display:none; }
.sbp-med--m.sbp-var--4 .sbp-fam--services .sbp-shopcard:not(:has(> .sbp-shopcard__img.is-empty)) .sbp-shopcard__t { padding-right:96px; }
.sbp-med--m.sbp-var--4 .sbp-fam--services .sbp-shopcard__t { font-size:19px; }
.sbp-med--l.sbp-var--4 .sbp-fam--services .sbp-shop__rail { max-width:960px; padding-left:0; }
.sbp-med--l.sbp-var--4 .sbp-fam--services .sbp-shop__rail::before { left:50%; margin-left:-1px; }
.sbp-med--l.sbp-var--4 .sbp-fam--services .sbp-shopcard { width:calc(50% - 40px); margin-bottom:26px; }
.sbp-med--l.sbp-var--4 .sbp-fam--services .sbp-shopcard:nth-child(odd) { margin-right:auto; }
.sbp-med--l.sbp-var--4 .sbp-fam--services .sbp-shopcard:nth-child(even) { margin-left:auto; }
.sbp-med--l.sbp-var--4 .sbp-fam--services .sbp-shopcard:nth-child(odd)::before { left:auto; right:-61px; }
.sbp-med--l.sbp-var--4 .sbp-fam--services .sbp-shopcard:nth-child(even)::before { left:-61px; }
/* ── V5 PRACTICE STORIES — portrait-framed storytelling; an imageless
practice is a type-led panel under an amplified capability. ── */
.sbp-var--5 .sbp-fam--services .sbp-shop__rail,
.sbp-var--5 .sbp-fam--services .sbp-shop__rail--2,
.sbp-var--5 .sbp-fam--services .sbp-shop__rail--1,
.sbp-var--5 .sbp-fam--services .sbp-shop__rail--solo { display:block; max-width:none; }
.sbp-var--5 .sbp-fam--services .sbp-shopcard {
display:grid !important; position:relative;
grid-template-columns:minmax(0,1fr) auto; column-gap:22px; align-items:start;
background:var(--sbp-card); border:1px solid var(--sbp-line);
border-radius:var(--sbp-r-lg); padding:clamp(20px,3vw,30px); margin-bottom:16px;
}
.sbp-var--5 .sbp-fam--services .sbp-shopcard__img:not(.is-empty) {
display:block; grid-column:2; grid-row:1 / span 2; width:96px; height:96px;
min-height:96px; max-height:96px; aspect-ratio:1; border-radius:14px; overflow:hidden;
box-shadow:0 0 0 4px color-mix(in srgb, var(--sbp-acc) 16%, transparent);
}
.sbp-var--5 .sbp-fam--services .sbp-shopcard__img:not(.is-empty) .sbp-shopcard__ph { display:none; }
.sbp-var--5 .sbp-fam--services .sbp-shopcard__body { grid-column:1; grid-row:1; display:flex; flex-direction:column; }
.sbp-var--5 .sbp-fam--services .sbp-shopcard__meta { letter-spacing:.12em; margin-bottom:5px; }
.sbp-var--5 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img.is-empty) .sbp-shopcard__meta { font-size:clamp(13px,1.4vw,15px); letter-spacing:.16em; opacity:.92; }
.sbp-var--5 .sbp-fam--services .sbp-shopcard__t { font-size:clamp(19px,2vw,24px); margin:0; }
.sbp-var--5 .sbp-fam--services .sbp-shopcard__price--seat { grid-column:1; grid-row:2; margin-top:10px; font-size:15px; }
.sbp-var--5 .sbp-fam--services .sbp-shopcard__zone--action {
margin-top:10px; padding-top:10px; min-height:0;
border-top:1px solid var(--sbp-line);
}
.sbp-med--m.sbp-var--5 .sbp-fam--services .sbp-shopcard { grid-template-columns:minmax(0,1.3fr) minmax(200px,.7fr); margin-bottom:20px; }
.sbp-med--m.sbp-var--5 .sbp-fam--services .sbp-shopcard__img:not(.is-empty) { width:100%; height:auto; min-height:0; max-height:280px; aspect-ratio:3/4; border-radius:16px; justify-self:end; }
.sbp-med--l.sbp-var--5 .sbp-fam--services .sbp-shopcard { grid-template-columns:minmax(0,1fr) minmax(280px,1fr); column-gap:clamp(24px,4vw,48px); }
.sbp-med--l.sbp-var--5 .sbp-fam--services .sbp-shopcard__img:not(.is-empty) { width:100%; height:auto; min-height:0; max-height:380px; aspect-ratio:3/4; }
.sbp-med--l.sbp-var--5 .sbp-fam--services .sbp-shopcard__t { font-size:clamp(22px,2.4vw,30px); }
/* ── V6 ENQUIRY DESK — services beside a standing invitation. ── */
.sbp-var--6 .sbp-fam--services .sbp-shop { display:grid; grid-template-areas:"head" "rail" "btns"; grid-template-columns:minmax(0,1fr); }
.sbp-var--6 .sbp-fam--services .sbp-head { grid-area:head; }
.sbp-var--6 .sbp-fam--services .sbp-shop__rail,
.sbp-var--6 .sbp-fam--services .sbp-shop__rail--2,
.sbp-var--6 .sbp-fam--services .sbp-shop__rail--1,
.sbp-var--6 .sbp-fam--services .sbp-shop__rail--solo { grid-area:rail; display:block; max-width:none; }
.sbp-var--6 .sbp-fam--services .sbp-btns--section { grid-area:btns; justify-content:flex-start; margin-top:14px; }
.sbp-var--6 .sbp-fam--services .sbp-shopcard {
display:grid !important;
grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) auto;
align-items:baseline; column-gap:18px;
background:transparent; border:0; border-radius:0; box-shadow:none;
--sbp-ink:inherit; --sbp-mut:inherit;
padding:14px 2px; border-bottom:1px solid var(--sbp-line);
}
.sbp-var--6 .sbp-fam--services .sbp-shopcard__body { display:contents; }
.sbp-var--6 .sbp-fam--services .sbp-shopcard__t { grid-column:1; grid-row:1; font-size:16px; margin:0; }
.sbp-var--6 .sbp-fam--services .sbp-shopcard__meta { grid-column:2; grid-row:1; font-size:12.5px; }
.sbp-var--6 .sbp-fam--services .sbp-shopcard__price--seat { grid-column:3; grid-row:1; font-size:14.5px; justify-self:end; }
.sbp-var--6 .sbp-fam--services .sbp-shopcard__zone--action { display:none; }
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shop { grid-template-columns:280px minmax(0,1fr); column-gap:clamp(24px,3.5vw,44px); grid-template-areas:"head head" "btns rail"; align-items:start; }
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-btns--section { flex-direction:column; align-items:stretch; margin-top:0; padding:20px; border:1px solid var(--sbp-line); border-radius:var(--sbp-r-lg); background:var(--sbp-card); }
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard__zone--action { display:flex; grid-column:3; grid-row:2; justify-content:flex-end; margin:0; padding:0; min-height:0; }
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard { padding:16px 2px; }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shop { grid-template-columns:340px minmax(0,1fr); }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard__t { font-size:18px; }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard { padding:19px 2px; }
/* ── V7 COMPARE SHEET — one aligned decision surface. ── */
.sbp-var--7 .sbp-fam--services .sbp-shop__rail,
.sbp-var--7 .sbp-fam--services .sbp-shop__rail--2,
.sbp-var--7 .sbp-fam--services .sbp-shop__rail--1,
.sbp-var--7 .sbp-fam--services .sbp-shop__rail--solo { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; max-width:none; }
.sbp-var--7 .sbp-fam--services .sbp-shopcard {
display:grid !important; grid-template-columns:minmax(0,1fr); row-gap:4px;
background:var(--sbp-card); border:1px solid var(--sbp-line);
border-radius:12px; padding:16px 18px; box-shadow:none;
}
.sbp-var--7 .sbp-fam--services .sbp-shopcard__body { display:contents; }
.sbp-var--7 .sbp-fam--services .sbp-shopcard__meta { order:-1; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--sbp-acc-ink); }
.sbp-var--7 .sbp-fam--services .sbp-shopcard__t { font-size:16.5px; margin:0; }
.sbp-var--7 .sbp-fam--services .sbp-shopcard__price--seat { font-size:14.5px; }
.sbp-var--7 .sbp-fam--services .sbp-shopcard__zone--action { min-height:0; padding-top:4px; margin-top:0; }
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard { grid-template-columns:minmax(140px,22%) minmax(0,1fr) auto auto; column-gap:20px; align-items:center; row-gap:0; }
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard__meta { order:0; grid-column:1; grid-row:1; }
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard__t { grid-column:2; grid-row:1; }
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard__price--seat { grid-column:3; grid-row:1; justify-self:end; }
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard__zone--action { grid-column:4; grid-row:1; justify-content:flex-end; padding-top:0; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shop__rail { gap:0; border:1px solid var(--sbp-line); border-radius:var(--sbp-r-lg); overflow:hidden; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard { grid-template-columns:minmax(150px,20%) minmax(0,1fr) minmax(90px,14%) auto; border:0; border-radius:0; border-bottom:1px solid var(--sbp-line); padding:18px 20px; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:last-child { border-bottom:0; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:nth-child(odd) { background:color-mix(in srgb, var(--sbp-field-a) 45%, var(--sbp-card)); }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__meta { border-right:1px solid var(--sbp-line); padding-right:16px; align-self:stretch; display:flex; align-items:center; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__price--seat { grid-column:3; grid-row:1; justify-self:end; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__zone--action { grid-column:4; grid-row:1; padding-top:0; justify-self:end; }
/* ── FAMILY MOBILE LAW ── */
@media (max-width:760px) {
.sbp-var--4 .sbp-fam--services .sbp-shop__rail { padding-left:44px; max-width:none; }
.sbp-var--4 .sbp-fam--services .sbp-shop__rail::before { left:16px; margin-left:0; }
.sbp-med--l.sbp-var--4 .sbp-fam--services .sbp-shopcard { width:auto; margin-left:0; margin-right:0; }
.sbp-med--l.sbp-var--4 .sbp-fam--services .sbp-shopcard:nth-child(odd)::before,
.sbp-med--l.sbp-var--4 .sbp-fam--services .sbp-shopcard:nth-child(even)::before { left:-44px; right:auto; }
.sbp-med--m.sbp-var--5 .sbp-fam--services .sbp-shopcard,
.sbp-med--l.sbp-var--5 .sbp-fam--services .sbp-shopcard { grid-template-columns:minmax(0,1fr); }
.sbp-med--m.sbp-var--5 .sbp-fam--services .sbp-shopcard__img:not(.is-empty),
.sbp-med--l.sbp-var--5 .sbp-fam--services .sbp-shopcard__img:not(.is-empty) { grid-column:1; grid-row:auto; width:100%; aspect-ratio:16/10; max-height:260px; justify-self:stretch; margin-top:12px; }
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shop,
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shop { grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "rail" "btns"; }
.sbp-var--6 .sbp-fam--services .sbp-shopcard { grid-template-columns:minmax(0,1fr) auto; }
.sbp-var--6 .sbp-fam--services .sbp-shopcard__meta { grid-column:1; grid-row:2; }
.sbp-var--6 .sbp-fam--services .sbp-shopcard__price--seat { grid-column:2; }
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard { grid-template-columns:minmax(0,1fr); row-gap:4px; padding:14px 16px; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__meta { border-right:0; padding-right:0; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__price--seat,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__zone--action { grid-column:1; grid-row:auto; justify-self:start; }
}
@media (prefers-reduced-motion:reduce) {
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard__go i { transition:none !important; }
}
/* ═══ CHL:BP_SERVICES_SML_CORRECTION v1 — acceptance-closure fixes ═════════
· V4 Pathway: S is text-first stacked steps (no raw base image); L regains a
deliberate 88px waypoint chip; imagery never inflates a stone.
· V5 Stories: an imageless story hugs a single column at every dial (no
reserved empty right column); the L portrait gets an explicit height law
so base/generic image ladders can never flatten it.
· V6 Desk: row actions live at L too; L recomposes the service field into
two columns beside the desk — a real M→L topology step.
· V2 Consultation: L becomes a hanging-capability letter — the capability
sits in its own left margin column; still consultation, never a ledger. ── */
.sbp-var--4 .sbp-fam--services .sbp-shopcard__img:not(.is-empty) { display:none; }
.sbp-med--m.sbp-var--4 .sbp-fam--services .sbp-shopcard__img:not(.is-empty) { display:block; }
.sbp-med--l.sbp-var--4 .sbp-fam--services .sbp-shopcard__img:not(.is-empty) {
display:block; position:absolute; right:16px; top:16px; width:88px;
/* !important: the generic med--l shelf image ladder (min-height:280) would
inflate this waypoint chip; the chip is a fixed mark, not a stage. */
height:88px !important; min-height:88px !important; max-height:88px !important;
aspect-ratio:auto; border-radius:12px; overflow:hidden;
border:1px solid var(--sbp-line);
}
.sbp-med--l.sbp-var--4 .sbp-fam--services .sbp-shopcard__img:not(.is-empty) .sbp-shopcard__ph { display:none; }
.sbp-med--l.sbp-var--4 .sbp-fam--services .sbp-shopcard:not(:has(> .sbp-shopcard__img.is-empty)) .sbp-shopcard__t { padding-right:104px; }
.sbp-var--5 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img.is-empty) { grid-template-columns:minmax(0,1fr); }
.sbp-med--m.sbp-var--5 .sbp-fam--services .sbp-shopcard__img:not(.is-empty) {
aspect-ratio:auto; height:auto; min-height:250px; max-height:280px;
}
.sbp-med--l.sbp-var--5 .sbp-fam--services .sbp-shopcard__img:not(.is-empty) {
aspect-ratio:auto; height:auto; min-height:340px; max-height:380px;
}
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard__zone--action { display:flex; grid-column:3; grid-row:2; justify-content:flex-end; margin:0; padding:0; min-height:0; }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-btns--section { flex-direction:column; align-items:stretch; margin-top:0; padding:22px; border:1px solid var(--sbp-line); border-radius:var(--sbp-r-lg); background:var(--sbp-card); }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shop__rail,
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shop__rail--2,
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shop__rail--1,
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shop__rail--solo {
display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); column-gap:36px; align-items:start;
}
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard { grid-template-columns:minmax(0,1fr) auto; }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard__meta { grid-column:1; grid-row:2; }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard__price--seat { grid-column:2; grid-row:1; }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard__zone--action { grid-column:2; grid-row:2; }
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard {
display:grid !important; grid-template-columns:150px minmax(0,1fr); column-gap:26px; align-items:start;
}
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard__meta {
order:0; grid-column:1; grid-row:1; margin:3px 0 0;
font-size:11.5px; letter-spacing:.14em; text-align:left;
}
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard__t { grid-column:2; grid-row:1; }
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard__price--seat { grid-column:2; grid-row:2; }
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard__zone--action { grid-column:2; grid-row:3; }
@media (max-width:760px) {
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shop__rail { grid-template-columns:minmax(0,1fr); }
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard { grid-template-columns:minmax(0,1fr); }
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard__meta { grid-row:auto; margin:0 0 4px; }
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard__t,
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard__price--seat,
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard__zone--action { grid-column:1; grid-row:auto; }
.sbp-med--l.sbp-var--4 .sbp-fam--services .sbp-shopcard:not(:has(> .sbp-shopcard__img.is-empty)) .sbp-shopcard__t { padding-right:0; }
.sbp-med--l.sbp-var--4 .sbp-fam--services .sbp-shopcard__img:not(.is-empty) { position:static; width:64px; height:64px; min-height:64px; margin-bottom:8px; }
}
/* ═══ CHL:BP_SERVICES_DESCRIPTION_CONTRACT v1 — every composition gives the
record's own explanation a deliberate seat. The renderer emits
.sbp-shopcard__d (plain text, word-safe 420-char excerpt, escaped) for
SERVICES sections only; an absent description emits nothing, so every
variant content-hugs by construction. Depth rides the S/M/L dial ON TOP of
each variant's structural ladder — never instead of it. Paragraph breaks
survive via pre-line. ═══ */
.sbp-fam--services .sbp-shopcard__d {
margin:4px 0 0; font-size:14px; line-height:1.55; color:var(--sbp-mut);
white-space:pre-line; display:-webkit-box; -webkit-box-orient:vertical;
overflow:hidden; -webkit-line-clamp:2;
}
.sbp-med--m .sbp-fam--services .sbp-shopcard__d { -webkit-line-clamp:3; }
.sbp-med--l .sbp-fam--services .sbp-shopcard__d { -webkit-line-clamp:4; }
/* V2 Consultation — the description carries the letter. */
.sbp-var--2 .sbp-fam--services .sbp-shopcard__d { order:3; max-width:62ch; margin-top:6px; }
.sbp-var--2 .sbp-fam--services .sbp-shopcard__price--seat { order:4; }
.sbp-var--2 .sbp-fam--services .sbp-shopcard__zone--action { order:5; }
.sbp-med--m.sbp-var--2 .sbp-fam--services .sbp-shopcard__d { -webkit-line-clamp:5; }
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard__d { display:block; -webkit-line-clamp:unset; grid-column:2; }
/* V3 Capability Grid — concise, aligned. */
.sbp-var--3 .sbp-fam--services .sbp-shopcard__d { order:3; font-size:12.5px; -webkit-line-clamp:2; }
.sbp-var--3 .sbp-fam--services .sbp-shopcard__price--seat { order:4; }
.sbp-var--3 .sbp-fam--services .sbp-shopcard__zone--action { order:5; }
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard__d { grid-column:1; grid-row:3; }
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard__price--seat { grid-row:4; }
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard { grid-template-rows:auto auto auto auto; }
/* V4 Pathway — each real step explains itself. */
.sbp-var--4 .sbp-fam--services .sbp-shopcard__d { order:3; max-width:60ch; }
.sbp-var--4 .sbp-fam--services .sbp-shopcard__price--seat { order:4; }
.sbp-var--4 .sbp-fam--services .sbp-shopcard__zone--action { order:5; }
/* V5 Stories — the description is the story. */
.sbp-var--5 .sbp-fam--services .sbp-shopcard__d { -webkit-line-clamp:3; margin-top:7px; max-width:64ch; }
.sbp-med--m.sbp-var--5 .sbp-fam--services .sbp-shopcard__d { -webkit-line-clamp:6; }
.sbp-med--l.sbp-var--5 .sbp-fam--services .sbp-shopcard__d { display:block; -webkit-line-clamp:unset; }
/* V6 Desk — the explanation stays beside the invitation. */
.sbp-var--6 .sbp-fam--services .sbp-shopcard__d {
grid-column:1 / span 2; grid-row:2; -webkit-line-clamp:1; font-size:13px; margin-top:2px;
}
.sbp-var--6 .sbp-fam--services .sbp-shopcard__meta { grid-column:2; grid-row:1; }
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard__d { -webkit-line-clamp:2; }
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard__zone--action { grid-row:1; }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard__d { -webkit-line-clamp:2; }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard__zone--action { grid-row:1; }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard__price--seat { grid-row:1; }
/* V7 Compare Sheet — an aligned summary field. */
.sbp-var--7 .sbp-fam--services .sbp-shopcard__d { order:1; -webkit-line-clamp:2; font-size:13px; }
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard { align-items:start; }
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard__d { grid-column:2; grid-row:2; -webkit-line-clamp:1; margin-top:2px; }
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard__zone--action { grid-row:1 / span 2; align-self:center; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard { align-items:start; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__d { grid-column:2; grid-row:2; -webkit-line-clamp:2; margin-top:2px; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__meta { align-self:stretch; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__price--seat { grid-row:1 / span 2; align-self:center; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__zone--action { grid-row:1 / span 2; align-self:center; }
@media (max-width:760px) {
.sbp-var--6 .sbp-fam--services .sbp-shopcard__d { grid-column:1; grid-row:3; }
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard__d,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__d { grid-column:1; grid-row:auto; }
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard__zone--action,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__zone--action,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__price--seat { grid-row:auto; }
}
/* ═══ CHL:BP_SERVICES_V6V7_COLLISION_CORRECTIVE v1 ═════════════════════════
Post-CLM-0098 visual corrective for Services V6 + V7 only.
· V6 is renamed Booking Desk (registry): its real record action is Book
(whole card is the anchor) and no enquiry action exists in the contract.
· V6 drops the phantom side-desk: public renders may carry NO
.sbp-btns--section node, so a reserved 280/340px desk column becomes a
permanent hole. The desk is now the full-width booking field itself; a
configured section button bar (when present) flows below it.
· Every V6 dial gives each record four independent seats — type, main
content (title+description), price, Book — in real grid tracks
(minmax(0,1fr) for text, max-content for price/action) with column-gap
as the un-collapsible minimum separation. Nothing is absolutely
positioned over flexible content.
· V7-L regains a protected sheet grid: price and Book live in their own
max-content tracks separated by an explicit column-gap, so they can
never concatenate into "£49.99Book →".
· The trailing media block re-asserts the ≤760px collapse AFTER these
rules (cascade order: later same-specificity rules win, and the older
mobile blocks now sit before this zone). ═══ */
/* ── V6 BOOKING DESK — container: one honest column at every dial ── */
.sbp-var--6 .sbp-fam--services .sbp-shop,
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shop,
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shop {
grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "rail" "btns"; column-gap:0;
}
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-btns--section,
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-btns--section {
flex-direction:row; align-items:center; padding:0; border:0; background:transparent; margin-top:18px;
}
/* V6-S — compact directory rows: type over title over one-line summary;
price sits top-right, the genuine Book affordance bottom-right. */
.sbp-var--6 .sbp-fam--services .sbp-shopcard {
grid-template-columns:minmax(0,1fr) max-content;
grid-template-rows:auto auto auto;
align-items:start; column-gap:20px; row-gap:3px;
}
.sbp-var--6 .sbp-fam--services .sbp-shopcard__meta {
grid-column:1; grid-row:1; font-size:10.5px; font-weight:800;
letter-spacing:.11em; text-transform:uppercase; color:var(--sbp-acc-ink);
}
.sbp-var--6 .sbp-fam--services .sbp-shopcard__t { grid-column:1; grid-row:2; }
.sbp-var--6 .sbp-fam--services .sbp-shopcard__d {
grid-column:1; grid-row:3; -webkit-line-clamp:1; margin-top:0; overflow-wrap:anywhere;
}
.sbp-var--6 .sbp-fam--services .sbp-shopcard__t { overflow-wrap:anywhere; }
.sbp-var--6 .sbp-fam--services .sbp-shopcard__price--seat {
grid-column:2; grid-row:1 / span 2; align-self:start; justify-self:end;
}
.sbp-var--6 .sbp-fam--services .sbp-shopcard__zone--action {
display:flex; grid-column:2; grid-row:3; justify-content:flex-end; align-self:end;
margin:0; padding:0; min-height:0;
}
/* V6-M — the desk ledger: four reserved tracks per row
(type | title+description | price | Book), 22px un-collapsible gaps. */
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard {
grid-template-columns:fit-content(140px) minmax(0,1fr) max-content max-content;
grid-template-rows:auto auto;
align-items:start; column-gap:22px; row-gap:3px; padding:16px 2px;
}
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard__meta { grid-column:1; grid-row:1; padding-top:3px; }
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard__t { grid-column:2; grid-row:1; }
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard__d { grid-column:2; grid-row:2; -webkit-line-clamp:2; }
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard__price--seat { grid-column:3; grid-row:1; justify-self:end; }
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard__zone--action {
display:flex; grid-column:4; grid-row:1; justify-content:flex-end; align-self:start;
margin:0; padding:0; min-height:0;
}
/* V6-L — the full-width booking field: complete cards in a two-up field.
One record hugs one full-width card; two sit side by side; six form a
balanced 2-column field. Footer (price | Book) pins to the card base. */
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shop__rail,
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shop__rail--2,
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shop__rail--1,
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shop__rail--solo {
display:grid; grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));
gap:18px; column-gap:18px; align-items:stretch;
}
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard {
grid-template-columns:minmax(0,1fr) max-content;
grid-template-rows:auto auto minmax(0,1fr) auto;
background:var(--sbp-card); border:1px solid var(--sbp-line);
border-radius:var(--sbp-r-lg); padding:20px 22px;
align-items:start; column-gap:22px; row-gap:4px;
}
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard__meta { grid-column:1 / span 2; grid-row:1; padding-top:0; }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard__t { grid-column:1 / span 2; grid-row:2; font-size:18px; }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard__d {
grid-column:1 / span 2; grid-row:3; -webkit-line-clamp:3; align-self:start; margin-top:2px;
}
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard__price--seat {
grid-column:1; grid-row:4; justify-self:start; align-self:end; margin-top:8px;
}
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard__zone--action {
display:flex; grid-column:2; grid-row:4; justify-content:flex-end; align-self:end;
margin:0; margin-top:8px; padding:0; min-height:0;
}
/* ── V7-L COMPARE SHEET — protected columns: type | main | price | Book.
max-content price/action tracks + explicit 22px gap = no concatenation. ── */
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard {
grid-template-columns:minmax(100px,18%) minmax(0,1fr) max-content max-content;
column-gap:22px;
}
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__meta { grid-column:1; grid-row:1 / span 2; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__t { grid-column:2; grid-row:1; overflow-wrap:anywhere; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__d { grid-column:2; grid-row:2; overflow-wrap:anywhere; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__price--seat {
grid-column:3; grid-row:1 / span 2; align-self:center; justify-self:end;
}
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__zone--action {
grid-column:4; grid-row:1 / span 2; align-self:center; justify-self:end; padding-top:0;
}
/* ── SPECIFICITY SHIELD — the generic imageless-shelf silhouettes
(PM_FINAL_CONVERGENCE v2.0.2 line-area rules, 6-class :has selectors)
force minmax(150px,36%)/minmax(280px,42%) side-columns onto any services
card whose media zone is empty or filled. Every card owns a
.sbp-shopcard__zone--media span, so these :has-boosted twins tie that
specificity and win by source order, keeping the V6/V7 templates
authoritative for both imaged and imageless records. ── */
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__zone--media) {
grid-template-columns:fit-content(140px) minmax(0,1fr) max-content max-content; align-items:start;
}
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__zone--media) {
grid-template-columns:minmax(0,1fr) max-content; align-items:start;
}
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__zone--media) {
grid-template-columns:minmax(100px,18%) minmax(0,1fr) max-content max-content; align-items:start;
}
/* ── ≤760px collapse, re-asserted after this zone's desktop rules ── */
@media (max-width:760px) {
.sbp-var--6 .sbp-fam--services .sbp-shopcard,
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard,
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard {
grid-template-columns:minmax(0,1fr) max-content;
grid-template-rows:auto auto auto auto; column-gap:16px;
}
.sbp-var--6 .sbp-fam--services .sbp-shopcard__meta,
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard__meta,
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard__meta { grid-column:1; grid-row:1; padding-top:0; }
.sbp-var--6 .sbp-fam--services .sbp-shopcard__price--seat,
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard__price--seat,
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard__price--seat {
grid-column:2; grid-row:1; align-self:start; justify-self:end; margin-top:0;
}
.sbp-var--6 .sbp-fam--services .sbp-shopcard__t,
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard__t,
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard__t { grid-column:1 / span 2; grid-row:2; }
.sbp-var--6 .sbp-fam--services .sbp-shopcard__d,
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard__d,
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard__d { grid-column:1 / span 2; grid-row:3; }
.sbp-var--6 .sbp-fam--services .sbp-shopcard__zone--action,
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard__zone--action,
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard__zone--action {
grid-column:1 / span 2; grid-row:4; justify-content:flex-start; align-self:start; margin-top:2px;
}
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shop__rail,
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shop__rail--2,
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shop__rail--1,
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shop__rail--solo { grid-template-columns:minmax(0,1fr); }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard { grid-template-columns:minmax(0,1fr); row-gap:4px; padding:14px 16px; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__meta { grid-column:1; grid-row:auto; border-right:0; padding-right:0; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__t,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__d { grid-column:1; grid-row:auto; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__price--seat,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__zone--action {
grid-column:1; grid-row:auto; justify-self:start; align-self:auto;
}
/* mobile shield: the 6-class shelf silhouettes are not media-scoped, so
the stacked mobile templates need the same :has-boosted twins */
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__zone--media),
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__zone--media) {
grid-template-columns:minmax(0,1fr) max-content; align-items:start;
}
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__zone--media) {
grid-template-columns:minmax(0,1fr); align-items:start;
}
/* stacked sheet reads type → price → title → description → Book:
the base sheet's __d{order:1} would otherwise push the description
below the Book affordance in the auto-flow collapse */
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__d { order:0; }
}
/* ═══ CHL:BP_SERVICES_V7_DIAL_REMAP v1 ═════════════════════════════════════
Operator-directed dial rotation for Services V7 Compare Sheet:
the aligned compare ROWS (formerly M) now answer S, the framed SHEET
(formerly L) now answers M, and the stacked DEFINITION CARDS (formerly S)
now answer L — a density ladder: densest scan at S, airiest reading at L.
Faithful re-seating of the three certified compositions; no new geometry.
Each tier re-declares every property the older tiers set, and the M/L
card templates carry :has(> zone--media) twins so the 6-class imageless
shelf silhouettes can never reclaim the grid. ═══ */
/* ── S = COMPARE ROWS (formerly M) ── */
.sbp-var--7 .sbp-fam--services .sbp-shopcard {
grid-template-columns:minmax(140px,22%) minmax(0,1fr) auto auto;
column-gap:20px; row-gap:0; align-items:start;
}
.sbp-var--7 .sbp-fam--services .sbp-shopcard__meta { order:0; grid-column:1; grid-row:1; }
.sbp-var--7 .sbp-fam--services .sbp-shopcard__t { grid-column:2; grid-row:1; }
.sbp-var--7 .sbp-fam--services .sbp-shopcard__d { order:0; grid-column:2; grid-row:2; -webkit-line-clamp:1; margin-top:2px; }
.sbp-var--7 .sbp-fam--services .sbp-shopcard__price--seat { grid-column:3; grid-row:1; justify-self:end; }
.sbp-var--7 .sbp-fam--services .sbp-shopcard__zone--action {
grid-column:4; grid-row:1 / span 2; align-self:center; justify-content:flex-end; padding-top:0;
}
/* ── M = COMPARE SHEET (formerly L) ── */
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shop__rail,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shop__rail--2,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shop__rail--1,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shop__rail--solo {
gap:0; border:1px solid var(--sbp-line); border-radius:var(--sbp-r-lg); overflow:hidden;
}
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard {
grid-template-columns:minmax(100px,18%) minmax(0,1fr) max-content max-content;
column-gap:22px; row-gap:4px; align-items:start;
border:0; border-radius:0; border-bottom:1px solid var(--sbp-line); padding:18px 20px;
}
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__zone--media) {
grid-template-columns:minmax(100px,18%) minmax(0,1fr) max-content max-content; align-items:start;
}
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard:last-child { border-bottom:0; }
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard:nth-child(odd) { background:color-mix(in srgb, var(--sbp-field-a) 45%, var(--sbp-card)); }
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard__meta {
order:0; grid-column:1; grid-row:1 / span 2; border-right:1px solid var(--sbp-line);
padding-right:16px; align-self:stretch; display:flex; align-items:center;
}
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard__t { grid-column:2; grid-row:1; overflow-wrap:anywhere; }
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard__d {
order:0; grid-column:2; grid-row:2; -webkit-line-clamp:2; margin-top:2px; overflow-wrap:anywhere;
}
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard__price--seat {
grid-column:3; grid-row:1 / span 2; align-self:center; justify-self:end;
}
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard__zone--action {
grid-column:4; grid-row:1 / span 2; align-self:center; justify-self:end; justify-content:flex-end; padding-top:0;
}
/* ── L = DEFINITION CARDS (formerly S) ── */
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shop__rail,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shop__rail--2,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shop__rail--1,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shop__rail--solo {
display:grid; grid-template-columns:minmax(0,1fr); gap:12px;
border:0; border-radius:0; overflow:visible;
}
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard {
grid-template-columns:minmax(0,1fr); column-gap:0; row-gap:4px; align-items:stretch;
background:var(--sbp-card); border:1px solid var(--sbp-line);
border-radius:12px; padding:16px 18px;
}
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__zone--media) {
grid-template-columns:minmax(0,1fr); align-items:stretch;
}
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:last-child { border-bottom:1px solid var(--sbp-line); }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:nth-child(odd) { background:var(--sbp-card); }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__meta {
order:-1; grid-column:auto; grid-row:auto; border-right:0; padding-right:0;
align-self:auto; display:block;
}
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__t { grid-column:auto; grid-row:auto; font-size:16.5px; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__d {
order:1; grid-column:auto; grid-row:auto; -webkit-line-clamp:2; font-size:13px; margin-top:4px;
}
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__price--seat {
grid-column:auto; grid-row:auto; justify-self:auto; align-self:auto;
}
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__zone--action {
grid-column:auto; grid-row:auto; justify-self:auto; align-self:auto;
justify-content:flex-start; padding-top:4px;
}
/* ── ≤760px collapse for all three tiers (re-asserted after the remap) ── */
@media (max-width:760px) {
.sbp-var--7 .sbp-fam--services .sbp-shopcard,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__zone--media),
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__zone--media) {
grid-template-columns:minmax(0,1fr); row-gap:4px; padding:14px 16px; align-items:start;
}
.sbp-var--7 .sbp-fam--services .sbp-shopcard__meta,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard__meta,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__meta {
order:-1; grid-column:1; grid-row:auto; border-right:0; padding-right:0; align-self:auto; display:block;
}
.sbp-var--7 .sbp-fam--services .sbp-shopcard__t,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard__t,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__t { grid-column:1; grid-row:auto; }
.sbp-var--7 .sbp-fam--services .sbp-shopcard__d,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard__d,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__d {
order:0; grid-column:1; grid-row:auto;
}
.sbp-var--7 .sbp-fam--services .sbp-shopcard__price--seat,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard__price--seat,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__price--seat {
grid-column:1; grid-row:auto; justify-self:start; align-self:auto;
}
.sbp-var--7 .sbp-fam--services .sbp-shopcard__zone--action,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard__zone--action,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard__zone--action {
grid-column:1; grid-row:auto; justify-self:start; align-self:auto; justify-content:flex-start; padding-top:2px;
}
}
/* ═══ CHL:BP_SERVICES_IMAGE_CONTRACT v1 ════════════════════════════════════
Purposeful record imagery for every Services composition. Images explain
the service — never a Shop cover treatment. Every rule is double-gated:
family (.sbp-fam--services) + image presence (:has an __img that is NOT
.is-empty), so imageless records keep their certified compositions and
collapse with no reserved rectangle. A broken URL degrades to the same
painted panel (background simply doesn't draw) — no browser broken-image
UI can appear because the renderer emits a background span, not ![]()
.
Scale ladders are per-variant and per-dial (S compact identifier →
M revealed → L fullest), never one universal size. ═══ */
.sbp-fam--services .sbp-shopcard__img {
background-size:cover; background-position:center;
}
/* ── V1 PRACTICE FRONT — photo-forward showcase; dial grows the stage ── */
.sbp-var--1 .sbp-fam--services .sbp-shopcard__img:not(.is-empty),
.sbp-fam--services .sbp-shopcard__img:not(.is-empty) { min-height:0; }
.sbp-var--1 .sbp-fam--services .sbp-shopcard__img:not(.is-empty) { max-height:180px; }
.sbp-med--m.sbp-var--1 .sbp-fam--services .sbp-shopcard__img:not(.is-empty) { max-height:230px; }
/* V1's price seat: the family static-seat law excludes V1, so the badge kept
the in-media absolute styling with NO positioned ancestor — it anchored to
the section and landed invisibly at its bottom-right (pre-existing latent).
Photo-forward V1 seats it as the proven overlay pill on the media corner. */
.sbp-var--1 .sbp-fam--services .sbp-shopcard { position:relative; }
.sbp-var--1 .sbp-fam--services .sbp-shopcard .sbp-shopcard__price--seat {
position:absolute; top:12px; right:12px; left:auto; bottom:auto;
}
/* ── V2 CONSULTATION LIST — restrained consultation portrait in the letter ── */
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) {
display:grid !important; grid-template-columns:52px minmax(0,1fr); column-gap:16px; align-items:start;
}
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img {
display:block; grid-column:1; grid-row:1 / span 2; width:52px; height:52px;
min-height:52px; max-height:52px; aspect-ratio:1; border-radius:999px;
}
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img .sbp-shopcard__ph { display:none; }
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__body { grid-column:2; }
.sbp-med--m.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) { grid-template-columns:64px minmax(0,1fr); }
.sbp-med--m.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img {
width:64px; height:64px; min-height:64px; max-height:64px;
}
/* L keeps the certified hanging-capability grid; the portrait sits under the
capability in the margin column. */
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) {
grid-template-columns:150px minmax(0,1fr); column-gap:26px;
}
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img {
grid-column:1; grid-row:2 / span 2; width:88px; height:88px;
min-height:88px; max-height:88px; border-radius:18px; margin-top:6px;
}
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta { grid-column:1; grid-row:1; }
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__body { grid-column:2; grid-row:1 / span 3; }
/* ── V3 CAPABILITY GRID — compact visual identifier; capability stays first ── */
.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) {
display:grid !important; grid-template-columns:44px minmax(0,1fr); column-gap:12px; align-items:start;
}
.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img {
display:block; grid-column:1; grid-row:1 / span 2; width:44px; height:44px;
min-height:44px; max-height:44px; border-radius:10px;
}
.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img .sbp-shopcard__ph { display:none; }
.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__body { grid-column:2; }
.sbp-med--m.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) { grid-template-columns:52px minmax(0,1fr); }
.sbp-med--m.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img {
width:52px; height:52px; min-height:52px; max-height:52px;
}
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) {
grid-template-columns:56px minmax(0,1fr) auto; align-items:center;
}
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img {
width:56px; height:56px; min-height:56px; max-height:56px; border-radius:12px; grid-row:1;
}
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__body { grid-column:2; }
/* L body is display:contents — place the children explicitly */
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img { grid-column:1; grid-row:1 / span 4; align-self:start; }
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta { grid-column:2; grid-row:1; }
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t { grid-column:2; grid-row:2; }
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d { grid-column:2; grid-row:3; }
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat { grid-column:2; grid-row:4; }
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action { grid-column:3; grid-row:1 / span 4; align-self:center; }
/* ── V4 PATHWAY — a waypoint chip that never obscures the spine ── */
.sbp-var--4 .sbp-fam--services .sbp-shopcard { position:relative; }
.sbp-var--4 .sbp-fam--services .sbp-shopcard__img:not(.is-empty) {
display:block; position:absolute; right:8px; top:10px; width:44px;
height:44px !important; min-height:44px !important; max-height:44px !important;
aspect-ratio:auto; border-radius:10px; overflow:hidden; border:1px solid var(--sbp-line);
}
.sbp-var--4 .sbp-fam--services .sbp-shopcard:not(:has(> .sbp-shopcard__img.is-empty)) .sbp-shopcard__t { padding-right:60px; }
.sbp-med--m.sbp-var--4 .sbp-fam--services .sbp-shopcard__img:not(.is-empty) {
position:absolute; right:12px; top:12px; width:72px;
height:72px !important; min-height:72px !important; max-height:72px !important;
}
.sbp-med--m.sbp-var--4 .sbp-fam--services .sbp-shopcard:not(:has(> .sbp-shopcard__img.is-empty)) .sbp-shopcard__t { padding-right:88px; }
/* L keeps its certified 88px chip (earlier zone) untouched. */
/* ── V6 BOOKING DESK — compact card imagery; footer contract protected ── */
.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) {
grid-template-columns:48px minmax(0,1fr) max-content;
}
.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img {
display:block; grid-column:1; grid-row:1 / span 3; width:48px; height:48px;
min-height:48px; max-height:48px; border-radius:12px;
}
.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img .sbp-shopcard__ph { display:none; }
.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta { grid-column:2; grid-row:1; }
.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t { grid-column:2; grid-row:2; }
.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d { grid-column:2; grid-row:3; }
.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat { grid-column:3; grid-row:1 / span 2; }
.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action { grid-column:3; grid-row:3; }
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) {
grid-template-columns:64px fit-content(140px) minmax(0,1fr) max-content max-content;
}
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img {
grid-column:1; grid-row:1 / span 2; width:56px; height:56px;
min-height:56px; max-height:56px; border-radius:14px;
}
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta { grid-column:2; grid-row:1; }
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t { grid-column:3; grid-row:1; }
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d { grid-column:3; grid-row:2; }
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat { grid-column:4; grid-row:1; }
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action { grid-column:5; grid-row:1; }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) {
grid-template-columns:minmax(0,1fr) max-content;
}
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img {
display:block; grid-column:2; grid-row:1 / span 3; justify-self:end;
width:88px; height:88px; min-height:88px; max-height:88px; border-radius:16px;
}
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta { grid-column:1; grid-row:1; }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t { grid-column:1; grid-row:2; }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d { grid-column:1; grid-row:3; }
/* ── V7 COMPARE SHEET (rows→S, sheet→M, cards→L) — comparison-safe thumbs ── */
.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) {
grid-template-columns:40px minmax(140px,22%) minmax(0,1fr) auto auto;
}
.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img {
display:block; grid-column:1; grid-row:1 / span 2; width:40px; height:40px;
min-height:40px; max-height:40px; border-radius:999px;
}
.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img .sbp-shopcard__ph { display:none; }
.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta { grid-column:2; grid-row:1; }
.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t { grid-column:3; grid-row:1; }
.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d { grid-column:3; grid-row:2; }
.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat { grid-column:4; grid-row:1; }
.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action { grid-column:5; grid-row:1 / span 2; }
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) {
grid-template-columns:48px minmax(100px,18%) minmax(0,1fr) max-content max-content;
}
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img {
grid-column:1; grid-row:1 / span 2; width:48px; height:48px;
min-height:48px; max-height:48px; border-radius:999px; align-self:center;
}
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta { grid-column:2; grid-row:1 / span 2; }
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t { grid-column:3; grid-row:1; }
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d { grid-column:3; grid-row:2; }
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat { grid-column:4; grid-row:1 / span 2; }
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action { grid-column:5; grid-row:1 / span 2; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img {
display:block; order:-2; grid-column:1; grid-row:auto; align-self:start;
width:72px; height:72px; min-height:72px; max-height:72px;
border-radius:16px; margin-bottom:6px;
}
/* V7-L definition cards: neutralise the S-row imaged placements (6-class)
so every child stacks in the single column by order */
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action {
grid-column:1; grid-row:auto; justify-self:start; align-self:auto;
}
/* V1-L editorial split: the pill rides the media column, clear of the title */
.sbp-med--l.sbp-var--1 .sbp-fam--services .sbp-shopcard .sbp-shopcard__price--seat { top:12px; left:12px; right:auto; }
/* V1 imageless silhouettes put the panel left/top — the pill rides the panel */
.sbp-var--1 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img.is-empty) .sbp-shopcard__price--seat { top:12px; left:12px; right:auto; }
/* V4-L: the description honours the certified 88px waypoint chip like the title does */
.sbp-med--l.sbp-var--4 .sbp-fam--services .sbp-shopcard:not(:has(> .sbp-shopcard__img.is-empty)) .sbp-shopcard__d { padding-right:104px; }
/* ── ≤760px — every variant collapses to a modest leading identifier ── */
@media (max-width:760px) {
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)),
.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)),
.sbp-med--m.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)),
.sbp-med--m.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)),
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)),
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) {
grid-template-columns:48px minmax(0,1fr);
}
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img,
.sbp-med--m.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img,
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img,
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img,
.sbp-med--m.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img {
grid-column:1; grid-row:1 / span 2; width:48px; height:48px; min-height:48px; max-height:48px; margin-top:0;
}
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta { grid-column:2; grid-row:1; }
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__body { grid-column:2; grid-row:2 / span 2; }
.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)),
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)),
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) {
grid-template-columns:48px minmax(0,1fr) max-content;
}
.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img,
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img,
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img {
grid-column:1; grid-row:1 / span 2; justify-self:start;
width:48px; height:48px; min-height:48px; max-height:48px;
}
.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta,
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta,
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta { grid-column:2; grid-row:1; }
.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat,
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat,
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat { grid-column:3; grid-row:1; justify-self:end; }
.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t,
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t,
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t { grid-column:2 / span 2; grid-row:2; }
.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d,
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d,
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d { grid-column:1 / span 3; grid-row:3; }
.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action,
.sbp-med--m.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action,
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action { grid-column:1 / span 3; grid-row:4; justify-content:flex-start; }
.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)),
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)),
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) {
grid-template-columns:minmax(0,1fr);
}
.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img {
order:-2; grid-column:1; grid-row:auto; align-self:start;
width:56px; height:56px; min-height:56px; max-height:56px; margin-bottom:4px;
}
.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta,
.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t,
.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d,
.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat,
.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action {
grid-column:1; grid-row:auto; justify-self:start; align-self:auto;
}
}
/* V2 bodies are display:contents — the text children must be seated in the
content column explicitly (auto-flow dropped the description under the
portrait); the L capability label then re-asserts its margin-column seat. */
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta,
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t,
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d,
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat,
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action {
grid-column:2; grid-row:auto;
}
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta { grid-column:1; grid-row:1; }
@media (max-width:760px) {
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta { grid-column:2; grid-row:1; }
}
/* ── ≤760px: the generic med editorial splits (minmax(280px,42%) floors)
must release IMAGED V1/V5 services cards — variants with their own imaged
mobile templates (V2/V3/V6/V7) keep theirs. Variant-scoped 7-class beats
the generic 6-class shelf splits. ── */
@media (max-width:760px) {
.sbp-med--m.sbp-var--1 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)),
.sbp-med--l.sbp-var--1 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)),
.sbp-med--m.sbp-var--5 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)),
.sbp-med--l.sbp-var--5 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
grid-template-columns:minmax(0,1fr);
}
.sbp-med--m.sbp-var--1 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) > .sbp-shopcard__img,
.sbp-med--l.sbp-var--1 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) > .sbp-shopcard__img,
.sbp-med--m.sbp-var--5 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) > .sbp-shopcard__img,
.sbp-med--l.sbp-var--5 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) > .sbp-shopcard__img {
height:auto; max-height:220px; min-height:0; aspect-ratio:16/10;
}
}
/* ═══ CHL:BP_SERVICES_V7S_PRICE_STACK v1 — operator-directed: on the V7
Small compare rows, price sits ABOVE Book in one right-aligned column
with breathing room, instead of side by side. M/L keep their certified
seats (their higher-specificity rules override these bare-S rules). ═══ */
.sbp-var--7 .sbp-fam--services .sbp-shopcard {
grid-template-columns:minmax(140px,22%) minmax(0,1fr) max-content;
}
.sbp-var--7 .sbp-fam--services .sbp-shopcard__price--seat {
grid-column:3; grid-row:1; justify-self:end; align-self:start; text-align:right;
}
.sbp-var--7 .sbp-fam--services .sbp-shopcard__zone--action {
grid-column:3; grid-row:2; justify-self:end; align-self:start;
justify-content:flex-end; padding-top:0; margin-top:6px;
}
.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) {
grid-template-columns:40px minmax(140px,22%) minmax(0,1fr) max-content;
}
.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat {
grid-column:4; grid-row:1; justify-self:end; align-self:start; text-align:right;
}
.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action {
grid-column:4; grid-row:2; justify-self:end; align-self:start;
justify-content:flex-end; padding-top:0; margin-top:6px;
}
/* ═══ CHL:BP_SERVICES_POST_IMAGE_LAYOUT v1 ═════════════════════════════════
Operator-screenshot corrective (authoritative over the earlier geometry
PASS). Root causes repaired here:
· V2/V3 bodies are display:contents — auto-flow dropped V3's description
into the leftover 44/52px image column; every child is now EXPLICITLY
seated per state.
· The legacy imageless zones' `display:none` price rules survived under
the imaged placements (V2-S, V3-S, V3-L had no visible price at all);
price display is now asserted wherever a seat exists.
· Book|price footers: one row, Book left / price right, shared vertical
centre — built with the same-cell trick (two items in one grid cell,
justified to opposite ends) so a hidden price collapses to nothing.
· V6-L gains the media/price rail; V7-M gains a baseline-true action
rail; V7-L returns to a compact aligned comparison sheet.
Scope: Services family + exact variant + exact dial, imaged/imageless
branches written out in full (no broad shields). ═══ */
/* ── V2 CONSULTATION LIST — price restored + Book|price footer ──────────── */
.sbp-var--2 .sbp-fam--services .sbp-shopcard .sbp-shopcard__price--seat {
display:block; position:static; margin:0; padding:0; background:transparent;
box-shadow:none; font-size:14px;
}
/* imaged S: 52px portrait col, content col2, explicit rows + footer */
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) { grid-template-rows:auto auto auto auto; }
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta { grid-column:2; grid-row:1; order:0; }
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t { grid-column:2; grid-row:2; }
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d { grid-column:2; grid-row:3; }
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action {
grid-column:2; grid-row:4; justify-self:start; align-self:center;
margin:10px 0 0; padding:0; min-height:0;
}
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat {
grid-column:2; grid-row:4; justify-self:end; align-self:center; margin:10px 0 0;
}
/* imaged M keeps the same seating (64px col comes from the earlier zone) */
.sbp-med--m.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta { grid-column:2; grid-row:1; }
.sbp-med--m.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action { grid-column:2; grid-row:4; justify-self:start; align-self:center; }
.sbp-med--m.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat { grid-column:2; grid-row:4; justify-self:end; align-self:center; display:block; }
/* imaged L: capability + portrait in the margin col; letter col gets the footer */
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) { grid-template-rows:auto auto auto; }
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta { grid-column:1; grid-row:1; }
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t { grid-column:2; grid-row:1; }
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d { grid-column:2; grid-row:2; }
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action {
grid-column:2; grid-row:3; justify-self:start; align-self:center; margin:12px 0 0; padding:0; min-height:0;
}
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat {
grid-column:2; grid-row:3; justify-self:end; align-self:center; display:block; margin:12px 0 0;
}
/* imageless V2 (ephemeral): letter stack + the same footer */
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img.is-empty) { display:grid !important; grid-template-columns:minmax(0,1fr); }
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img.is-empty) .sbp-shopcard__meta { grid-row:1; order:0; }
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img.is-empty) .sbp-shopcard__t { grid-row:2; }
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img.is-empty) .sbp-shopcard__d { grid-row:3; }
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img.is-empty) .sbp-shopcard__zone--action { grid-row:4; grid-column:1; justify-self:start; align-self:center; margin:10px 0 0; padding:0; min-height:0; }
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img.is-empty) .sbp-shopcard__price--seat { grid-row:4; grid-column:1; justify-self:end; align-self:center; margin:10px 0 0; }
/* ── V3 CAPABILITY GRID — S/M restacked (image, type, title, readable
description, footer); L keeps its good description + regains price ── */
.sbp-var--3 .sbp-fam--services .sbp-shopcard .sbp-shopcard__price--seat {
display:block; position:static; margin:0; padding:0; background:transparent;
box-shadow:none; font-size:13.5px;
}
.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) {
grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto auto auto;
column-gap:0; row-gap:0;
}
.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img {
grid-column:1; grid-row:1; width:44px; height:44px; min-height:44px; max-height:44px;
}
.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta { grid-column:1; grid-row:2; margin-top:8px; }
.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t { grid-column:1; grid-row:3; }
.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d {
grid-column:1; grid-row:4; width:100%; max-width:none; -webkit-line-clamp:2; margin-top:3px;
}
.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action {
grid-column:1; grid-row:5; justify-self:start; align-self:center; margin:9px 0 0; padding:0; min-height:0;
}
.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat {
grid-column:1; grid-row:5; justify-self:end; align-self:center; margin:9px 0 0;
}
.sbp-med--m.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) { grid-template-columns:minmax(0,1fr); }
.sbp-med--m.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img {
grid-column:1; grid-row:1; width:52px; height:52px; min-height:52px; max-height:52px;
}
.sbp-med--m.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta { grid-column:1; grid-row:2; }
.sbp-med--m.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t { grid-column:1; grid-row:3; }
.sbp-med--m.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d { grid-column:1; grid-row:4; -webkit-line-clamp:3; }
.sbp-med--m.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action { grid-column:1; grid-row:5; justify-self:start; align-self:center; }
.sbp-med--m.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat { grid-column:1; grid-row:5; justify-self:end; align-self:center; display:block; }
/* L: keep the certified 56px identifier + wide description; the price takes
an intentional seat under the description, aligned with the text column */
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img {
grid-column:1; grid-row:1 / span 4; width:56px; height:56px; min-height:56px; max-height:56px; align-self:start;
}
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d { grid-column:2; grid-row:3; -webkit-line-clamp:2; width:auto; }
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat {
display:block; grid-column:2; grid-row:4; justify-self:start; margin-top:4px;
}
/* imageless V3 tiles (ephemeral): price simply rejoins the flow */
.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img.is-empty) .sbp-shopcard__price--seat { display:block; order:4; margin-top:5px; }
/* ── V4 PATHWAY + V5 PRACTICE STORIES — one footer row: Book left, price
right, shared centre. Bodies are display:contents, so the footer lives
on the card grid: both fields share a far row (empty auto rows collapse
to zero height) and justify to opposite ends of the content column. ── */
/* !important: the V4 stone is display:flex !important (family zone) — the
footer needs a grid so Book and price can share one cell's two ends.
Grid keeps the counter, ::before numeral and absolute chip untouched. */
.sbp-var--4 .sbp-fam--services .sbp-shopcard {
display:grid !important; grid-template-columns:minmax(0,1fr);
}
/* V4-L only: the generic med--l editorial split (6-class :has) would seat
the title in a 104px second column now that the stone is a grid — the
pathway stays single-column at every dial (variant-scoped, no shield) */
.sbp-med--l.sbp-var--4 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
grid-template-columns:minmax(0,1fr);
}
/* the title row always clears the 72px waypoint chip, even with no
description (the footer could otherwise rise into the chip's corner) */
.sbp-med--m.sbp-var--4 .sbp-fam--services .sbp-shopcard:not(:has(> .sbp-shopcard__img.is-empty)) .sbp-shopcard__t { min-height:64px; }
.sbp-var--4 .sbp-fam--services .sbp-shopcard .sbp-shopcard__zone--action {
order:0; grid-column:1; grid-row:12; justify-self:start; align-self:center;
margin:10px 0 0; padding:0; min-height:0;
}
.sbp-var--4 .sbp-fam--services .sbp-shopcard .sbp-shopcard__price--seat {
order:0; grid-column:1; grid-row:12; justify-self:end; align-self:center;
position:static; margin:10px 0 0; padding:0; background:transparent; box-shadow:none;
}
/* V5's body is a grid ITEM (flex column) and the price sits beneath it —
flatten the body to contents and seat everything explicitly so the
divider-topped action row becomes the footer: Book left on the divider
row, price right on the same row. The portrait (card child, col 2) and
the story identity are untouched. */
.sbp-var--5 .sbp-fam--services .sbp-shopcard__body { display:contents; }
.sbp-var--5 .sbp-fam--services .sbp-shopcard .sbp-shopcard__meta { grid-column:1; grid-row:1; }
.sbp-var--5 .sbp-fam--services .sbp-shopcard .sbp-shopcard__t { grid-column:1; grid-row:2; }
.sbp-var--5 .sbp-fam--services .sbp-shopcard .sbp-shopcard__d { grid-column:1; grid-row:3; }
.sbp-var--5 .sbp-fam--services .sbp-shopcard .sbp-shopcard__zone--action {
grid-column:1; grid-row:4; justify-self:stretch; align-self:end;
}
.sbp-var--5 .sbp-fam--services .sbp-shopcard .sbp-shopcard__price--seat {
grid-column:1; grid-row:4; justify-self:end; align-self:end;
position:static; margin:0 0 1px; padding:0; background:transparent; box-shadow:none;
font-size:15px;
}
/* the portrait now rides all four content rows, so its med-size minimums
can never inflate the meta/title rows */
.sbp-var--5 .sbp-fam--services .sbp-shopcard__img:not(.is-empty) { grid-row:1 / span 4; }
/* ── V6-L — deliberate media/price rail: image, price directly beneath it,
Book anchored at the card's bottom-right ── */
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) {
grid-template-rows:auto auto minmax(0,1fr) auto;
}
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img {
grid-column:2; grid-row:1 / span 2; justify-self:end;
width:88px; height:88px; min-height:88px; max-height:88px;
}
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat {
grid-column:2; grid-row:3; justify-self:end; align-self:start;
width:88px; text-align:center; margin-top:6px;
}
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta { grid-column:1; grid-row:1; }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t { grid-column:1; grid-row:2; }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d { grid-column:1; grid-row:3; }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action {
grid-column:2; grid-row:4; justify-self:end; align-self:end;
}
/* long titles wrap in full — never premature truncation beside the rail */
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t {
display:block; -webkit-line-clamp:unset; overflow:visible; max-height:none;
}
/* ── V7-M — one right-side action rail: price then Book, shared baseline ── */
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard { align-items:start; }
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard .sbp-shopcard__price--seat {
grid-row:1; align-self:baseline; justify-self:end; margin:0; padding:0;
}
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard .sbp-shopcard__zone--action {
grid-row:1; align-self:baseline; justify-self:end; margin:0; padding:0; min-height:0;
}
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat { grid-column:4; grid-row:1; align-self:baseline; }
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action { grid-column:5; grid-row:1; align-self:baseline; }
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img { align-self:start; }
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta { align-self:start; }
/* ── V7-L — the compact aligned comparison sheet, restored ──────────────── */
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shop__rail,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shop__rail--2,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shop__rail--1,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shop__rail--solo {
display:grid; grid-template-columns:minmax(0,1fr); gap:0;
border:1px solid var(--sbp-line); border-radius:var(--sbp-r-lg); overflow:hidden;
}
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__zone--media) {
grid-template-columns:minmax(96px,13%) minmax(0,1fr) max-content max-content;
grid-template-rows:auto auto; column-gap:22px; row-gap:2px; align-items:start;
background:var(--sbp-card); border:0; border-radius:0;
border-bottom:1px solid var(--sbp-line); padding:16px 20px;
}
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:last-child { border-bottom:0; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:nth-child(odd) { background:var(--sbp-card); }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard .sbp-shopcard__meta,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta {
order:0; grid-column:1; grid-row:1; border-right:0; padding-right:0;
align-self:start; display:block;
}
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard > .sbp-shopcard__img,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img {
order:0; grid-column:1; grid-row:2; align-self:start; justify-self:start;
width:52px; height:52px; min-height:52px; max-height:52px;
border-radius:12px; margin:6px 0 0;
}
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard .sbp-shopcard__t,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t {
grid-column:2; grid-row:1; font-size:16.5px; align-self:start;
}
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard .sbp-shopcard__d,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d {
order:0; grid-column:2; grid-row:2; -webkit-line-clamp:2; font-size:13px;
margin-top:2px; align-self:start;
}
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard .sbp-shopcard__price--seat,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat {
grid-column:3; grid-row:1; align-self:baseline; justify-self:end;
margin:0; padding:0; position:static; display:block;
}
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard .sbp-shopcard__zone--action,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action {
grid-column:4; grid-row:1; align-self:baseline; justify-self:end;
margin:0; padding:0; min-height:0;
}
/* ── ≤760px — re-assert the certified stacks AFTER this zone's desktop
rules (V2/V3 stay stacks with their new footers; V6-L thumb stack
keeps its top-right price; V7-L collapses to the stacked list) ── */
@media (max-width:760px) {
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)),
.sbp-med--m.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)),
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) {
grid-template-columns:48px minmax(0,1fr); grid-template-rows:auto auto auto auto;
}
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img { grid-column:1; grid-row:1 / span 2; width:48px; height:48px; min-height:48px; max-height:48px; margin-top:0; }
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta,
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta { grid-column:2; grid-row:1; }
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t,
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t { grid-column:2; grid-row:2; }
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d,
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d { grid-column:1 / span 2; grid-row:3; }
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action,
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action { grid-column:1 / span 2; grid-row:4; justify-self:start; align-self:center; }
.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat,
.sbp-med--l.sbp-var--2 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat { grid-column:1 / span 2; grid-row:4; justify-self:end; align-self:center; }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) { grid-template-columns:48px minmax(0,1fr) max-content; grid-template-rows:auto auto auto auto; }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img { grid-column:1; grid-row:1 / span 2; justify-self:start; width:48px; height:48px; min-height:48px; max-height:48px; }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta { grid-column:2; grid-row:1; }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat { grid-column:3; grid-row:1; justify-self:end; align-self:start; width:auto; text-align:right; margin-top:0; }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t { grid-column:2 / span 2; grid-row:2; }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d { grid-column:1 / span 3; grid-row:3; }
.sbp-med--l.sbp-var--6 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action { grid-column:1 / span 3; grid-row:4; justify-self:start; align-self:start; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shop__rail,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shop__rail--2,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shop__rail--1,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shop__rail--solo { border:0; border-radius:0; overflow:visible; gap:12px; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__zone--media) {
grid-template-columns:minmax(0,1fr); grid-template-rows:none; row-gap:4px;
border:1px solid var(--sbp-line); border-radius:12px; padding:14px 16px;
}
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:last-child { border-bottom:1px solid var(--sbp-line); }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard .sbp-shopcard__meta,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta { grid-column:1; grid-row:auto; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard > .sbp-shopcard__img,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img { grid-column:1; grid-row:auto; margin:0 0 4px; order:-2; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard .sbp-shopcard__t,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t { grid-column:1; grid-row:auto; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard .sbp-shopcard__d,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d { grid-column:1; grid-row:auto; order:0; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard .sbp-shopcard__price--seat,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat { grid-column:1; grid-row:auto; justify-self:start; align-self:auto; }
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard .sbp-shopcard__zone--action,
.sbp-med--l.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action { grid-column:1; grid-row:auto; justify-self:start; align-self:auto; }
.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)),
.sbp-med--m.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)),
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) {
grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto auto auto;
}
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img { grid-column:1; grid-row:1; width:48px; height:48px; min-height:48px; max-height:48px; }
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta { grid-column:1; grid-row:2; margin-top:8px; }
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t { grid-column:1; grid-row:3; }
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d { grid-column:1; grid-row:4; width:100%; }
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action { grid-column:1; grid-row:5; justify-self:start; align-self:center; margin:9px 0 0; }
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat { grid-column:1; grid-row:5; justify-self:end; align-self:center; margin:9px 0 0; }
}
@media (max-width:760px) {
/* V3-L: the 2-up tile rail folds; tiles release their desktop min-width */
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shop__rail,
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shop__rail--2,
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shop__rail--1,
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shop__rail--solo { grid-template-columns:minmax(0,1fr); }
.sbp-var--3 .sbp-fam--services .sbp-shopcard,
.sbp-med--m.sbp-var--3 .sbp-fam--services .sbp-shopcard,
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard { min-width:0; max-width:none; }
/* V7 S/M: single-column stack; the flush-right price-over-Book grammar
survives (the CLM-0104 stack zone had no mobile collapse of its own) */
.sbp-var--7 .sbp-fam--services .sbp-shopcard,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard,
.sbp-var--7 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__zone--media),
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shop__rail .sbp-shopcard:has(> .sbp-shopcard__zone--media) {
grid-template-columns:minmax(0,1fr); grid-template-rows:none; row-gap:4px;
}
.sbp-var--7 .sbp-fam--services .sbp-shopcard > .sbp-shopcard__img,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard > .sbp-shopcard__img,
.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) > .sbp-shopcard__img {
grid-column:1; grid-row:auto; order:-2; align-self:start; justify-self:start;
width:48px; height:48px; min-height:48px; max-height:48px; margin:0 0 4px;
}
.sbp-var--7 .sbp-fam--services .sbp-shopcard .sbp-shopcard__meta,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard .sbp-shopcard__meta,
.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__meta {
grid-column:1; grid-row:auto; order:-1; border-right:0; padding-right:0; align-self:auto; display:block;
}
.sbp-var--7 .sbp-fam--services .sbp-shopcard .sbp-shopcard__t,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard .sbp-shopcard__t,
.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__t { grid-column:1; grid-row:auto; }
.sbp-var--7 .sbp-fam--services .sbp-shopcard .sbp-shopcard__d,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard .sbp-shopcard__d,
.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__d { grid-column:1; grid-row:auto; order:0; }
.sbp-var--7 .sbp-fam--services .sbp-shopcard .sbp-shopcard__price--seat,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard .sbp-shopcard__price--seat,
.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__price--seat {
grid-column:1; grid-row:auto; order:1; justify-self:end; align-self:auto; text-align:right; margin:2px 0 0;
}
.sbp-var--7 .sbp-fam--services .sbp-shopcard .sbp-shopcard__zone--action,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard .sbp-shopcard__zone--action,
.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action,
.sbp-med--m.sbp-var--7 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) .sbp-shopcard__zone--action {
grid-column:1; grid-row:auto; order:2; justify-self:end; align-self:auto; margin:6px 0 0;
}
}
/* ═══ CHL:BP_SERVICES_V3L_GUTTER v1 — surgical: the V3-S restack's
column-gap:0 (bare imaged selector) leaks into L, welding the content
column to the 56px identifier. L alone restores the media/content
gutter; S/M single-column stacks are untouched by construction. ═══ */
.sbp-med--l.sbp-var--3 .sbp-fam--services .sbp-shopcard:has(> .sbp-shopcard__img:not(.is-empty)) { column-gap:20px; }
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_ABOUT_PREMIUM_FAMILY v4 — About V4 Statement / V5 Cinematic Story
Panel / V6 Editorial Broadsheet / V7 Story Index. ONE authoritative zone,
replaced in place (no override sediment). v4 surgical pass 2026-08-17:
V1-V5 and the V7 masthead are FROZEN; V6 gains disciplined flow
(row-pinned CTAs, 58-65ch measures, full-width ruled notes shelf at the S
dial and at 4+ real highlights), V7's ledger becomes a surface-ruled
editorial register (card shell removed) with an L-dial two-column index at
5+ entries, and Text-on-image (sbp-olay--1) becomes functional for both:
kicker top-left + headline lower-left on the image over a restrained
scrim, masthead rows collapsing, automatic Off fallback without a photo
(desktop/tablet only — mobile keeps the linear Off order). Editor-only:
both-empty highlights compact to placeholder rows (focus-within restores
the detail field). About media stays HERO-CLASS: object-fit:cover always. LAWS unchanged: every rule double-scoped (.sbp-var--{4..7} +
About class), no bare .sbp-var--N, no .sbp-imgled, no !important, DOM
reading order untouched. On-image ink follows the olay/hero precedent
(warm-black scrim + #fff); surfaces use tokens.
═══════════════════════════════════════════════════════════════════════════ */
/* ── V4 · STATEMENT — centred typographic manifesto; image is a quiet proof
band BELOW the words (visual order via flex `order`; DOM order intact).
v2: explicit 20/22/24px dial radius on the media WRAPPER + soft shadow. */
.sbp-var--4 .sbp-sec--about .sbp-about { display: flex; flex-direction: column; align-items: center; gap: 26px; max-width: none; }
.sbp-var--4 .sbp-sec--about .sbp-about__body { width: 100%; max-width: 620px; }
.sbp-var--4 .sbp-sec--about .sbp-kicker { justify-content: center; }
.sbp-var--4 .sbp-sec--about .sbp-kicker::after { content: ""; flex: 0 0 auto; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.sbp-var--4 .sbp-sec--about .sbp-h2 { text-align: center; text-wrap: balance; font-size: calc(clamp(30px, 4vw, 44px) * var(--sbp-type-scale, 1)); line-height: 1.12; letter-spacing: -0.02em; }
.sbp-var--4 .sbp-sec--about .sbp-prose { margin-inline: auto; max-width: 58ch; }
.sbp-var--4 .sbp-sec--about .sbp-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 26px; width: 100%; max-width: 660px; margin-inline: auto; text-align: left; }
.sbp-var--4 .sbp-sec--about .sbp-check { flex: 0 1 300px; }
.sbp-var--4 .sbp-sec--about .sbp-btns { justify-content: center; }
.sbp-var--4 .sbp-sec--about .sbp-additem { align-self: center; }
/* V4-S (no dial class) — HORIZONTAL STATEMENT ROW (addendum, CLM-0111): the
S dial is a presentation size, never a mobile breakpoint. Populated
highlights sit in two balanced columns inside the statement plate; a lone
or odd-final item takes a deliberate full-width centred row. M/L keep
their accepted flex rows untouched (this scope excludes them). The
editor's clone template (last child) never counts or spans. */
.sbp-var--4:not(.sbp-med--m):not(.sbp-med--l) .sbp-sec--about .sbp-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 26px; align-items: start; }
.sbp-var--4:not(.sbp-med--m):not(.sbp-med--l) .sbp-sec--about .sbp-check { flex: none; }
.sbp-var--4:not(.sbp-med--m):not(.sbp-med--l) .sbp-sec--about .sbp-check:not([data-sbp-tpl]):last-child:nth-child(odd),
.sbp-var--4:not(.sbp-med--m):not(.sbp-med--l) .sbp-sec--about .sbp-check:not([data-sbp-tpl]):nth-child(odd):has(+ [data-sbp-tpl]:last-child) { grid-column: 1 / -1; width: 100%; max-width: 620px; justify-self: center; }
.sbp-editsec .sbp-var--4:not(.sbp-med--m):not(.sbp-med--l) .sbp-sec--about .sbp-additem { display: block; margin: 12px auto 0; }
.sbp-var--4 .sbp-sec--about .sbp-about__media { order: 9; width: min(100%, 620px); aspect-ratio: 16 / 7; border-radius: 20px; overflow: hidden; box-shadow: 0 18px 40px -30px rgba(var(--sbp-shadow-rgb, 32, 26, 20), .5); }
.sbp-var--4 .sbp-sec--about .sbp-about__media img,
.sbp-var--4 .sbp-sec--about .sbp-about__media .sbp-eimg { display: block; width: 100%; height: 100%; }
.sbp-var--4 .sbp-sec--about .sbp-about__media img,
.sbp-var--4 .sbp-sec--about .sbp-about__media .sbp-eimg img { aspect-ratio: auto; max-height: none; object-fit: cover; }
/* V4 dial — M: wider stage + deeper band (22px). L: full-bleed banner
silhouette, hairline-framed chip row, panoramic band (24px). */
.sbp-var--4.sbp-med--m .sbp-sec--about .sbp-about__body { max-width: 840px; }
.sbp-var--4.sbp-med--m .sbp-sec--about .sbp-h2 { font-size: calc(clamp(34px, 4.6vw, 52px) * var(--sbp-type-scale, 1)); }
.sbp-var--4.sbp-med--m .sbp-sec--about .sbp-checks { max-width: 900px; }
.sbp-var--4.sbp-med--m .sbp-sec--about .sbp-check { flex: 0 1 262px; }
.sbp-var--4.sbp-med--m .sbp-sec--about .sbp-about__media { width: min(100%, 840px); border-radius: 22px; }
.sbp-var--4.sbp-med--l .sbp-sec--about .sbp-about__body { max-width: 980px; }
.sbp-var--4.sbp-med--l .sbp-sec--about .sbp-h2 { font-size: calc(clamp(38px, 5.2vw, 58px) * var(--sbp-type-scale, 1)); }
.sbp-var--4.sbp-med--l .sbp-sec--about .sbp-prose { max-width: 62ch; }
.sbp-var--4.sbp-med--l .sbp-sec--about .sbp-checks { max-width: 980px; border-top: 1px solid var(--sbp-line); border-bottom: 1px solid var(--sbp-line); padding: 22px 0; }
.sbp-var--4.sbp-med--l .sbp-sec--about .sbp-check { flex: 0 1 288px; }
.sbp-var--4.sbp-med--l .sbp-sec--about .sbp-about__media { width: 100%; aspect-ratio: 21 / 9; margin-top: 8px; border-radius: 24px; }
/* ── V5 · CINEMATIC STORY PANEL — one large rounded image IS the composition.
S (base): poster stack — rounded panorama above, story below (readable
everywhere, no overlay). M/L (desktop): the words move INTO the image on
a directional warm-black scrim (olay grammar); highlights become
translucent chips. Public without a photo: a deep cinematic panel
(--sbp-deep-x surface) keeps the identity photo-free. Unmistakably not a
split: there is never a side-by-side image/copy pair here. */
.sbp-var--5 .sbp-sec--about .sbp-about { display: flex; flex-direction: column; gap: 22px; max-width: 860px; margin-inline: auto; }
.sbp-var--5 .sbp-sec--about .sbp-about__media { position: relative; width: 100%; aspect-ratio: 21 / 10; border-radius: 20px; overflow: hidden; box-shadow: 0 18px 40px -30px rgba(var(--sbp-shadow-rgb, 32, 26, 20), .5); }
.sbp-var--5 .sbp-sec--about .sbp-about__media img,
.sbp-var--5 .sbp-sec--about .sbp-about__media .sbp-eimg { display: block; width: 100%; height: 100%; }
.sbp-var--5 .sbp-sec--about .sbp-about__media img,
.sbp-var--5 .sbp-sec--about .sbp-about__media .sbp-eimg img { aspect-ratio: auto; max-height: none; object-fit: cover; }
.sbp-var--5 .sbp-sec--about .sbp-h2 { font-size: calc(clamp(26px, 3vw, 38px) * var(--sbp-type-scale, 1)); line-height: 1.14; }
.sbp-var--5 .sbp-sec--about .sbp-prose { max-width: 60ch; }
.sbp-var--5 .sbp-sec--about .sbp-checks { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 18px; }
.sbp-var--5 .sbp-sec--about .sbp-check { flex: 0 1 300px; grid-template-columns: 20px minmax(0, 1fr); gap: 9px; align-items: start; background: var(--sbp-acc-soft); border-radius: 14px; padding: 10px 16px 10px 12px; }
.sbp-var--5 .sbp-sec--about .sbp-check__mark { width: 20px; height: 20px; border-radius: 6px; }
.sbp-var--5 .sbp-sec--about .sbp-check__mark::before { font-size: 11px; }
.sbp-var--5 .sbp-sec--about .sbp-check__t { font-size: 14px; }
.sbp-var--5 .sbp-sec--about .sbp-check__d { font-size: 13px; line-height: 1.5; }
@media (min-width: 761px) {
.sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about,
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about { display: block; position: relative; max-width: 1120px; border-radius: 24px; overflow: hidden; background: var(--sbp-deep-x, #2b2119); box-shadow: 0 26px 60px -38px rgba(var(--sbp-shadow-rgb, 32, 26, 20), .55); }
.sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about__media,
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__media { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
/* Directional readability scrim — strong at the text edge, open at the
image edge (worst-case light photograph still reads AA with the .9→.75
floor across the copy zone; same warm black the olay overlay uses). */
.sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about__media::after,
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(20, 15, 10, .94) 0%, rgba(20, 15, 10, .85) 58%, rgba(20, 15, 10, .3) 80%, rgba(20, 15, 10, .03) 96%); }
.sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about__body,
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__body { position: relative; z-index: 1; max-width: 58%; padding: clamp(40px, 5vw, 68px) clamp(30px, 4vw, 56px); text-shadow: 0 1px 2px rgba(15, 11, 8, .45); }
.sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about__body .sbp-kicker,
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__body .sbp-kicker,
.sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about__body .sbp-h2,
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__body .sbp-h2,
.sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about__body .sbp-check__t,
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__body .sbp-check__t,
.sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about__body .sbp-check__mark,
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__body .sbp-check__mark { color: #fff; }
.sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about__body .sbp-prose,
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__body .sbp-prose { color: rgba(255, 255, 255, .92); }
.sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about__body .sbp-check__d,
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__body .sbp-check__d { color: rgba(255, 255, 255, .82); }
.sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about__body .sbp-check,
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__body .sbp-check { background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .26); }
.sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about__body .sbp-check__mark,
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__body .sbp-check__mark { background: rgba(255, 255, 255, .18); }
.sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about__body .sbp-btn--ghost,
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__body .sbp-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .66); }
/* Editor-only cosmetics: with no photo yet, the upload invite must not
lie across the dark panel as a light slab — it becomes a compact
dashed chip pinned to the exposed image side (the button itself still
spans the panel, so the whole right side stays clickable). */
.sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about__media .sbp-eimg__ph,
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__media .sbp-eimg__ph { position: absolute; top: 50%; right: 5%; left: auto; width: auto; max-width: 34%; transform: translateY(-50%); padding: 14px 20px; background: rgba(255, 255, 255, .1); border: 1px dashed rgba(255, 255, 255, .45); border-radius: 12px; color: #fff; }
/* MODE B — TWO OR MORE REAL HIGHLIGHTS (the editor's hidden clone
template never counts): the collection stops extending the narrative
rail and becomes a responsive glass shelf across the cinematic canvas.
The narrative + CTAs keep their column; the shelf spans the full
frame width below them. Order is visual only — DOM order untouched. */
.sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about__body:has(.sbp-check:not([data-sbp-tpl]) ~ .sbp-check:not([data-sbp-tpl])),
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__body:has(.sbp-check:not([data-sbp-tpl]) ~ .sbp-check:not([data-sbp-tpl])) { display: grid; grid-template-columns: minmax(0, 1fr); max-width: none; }
.sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about__body:has(.sbp-check:not([data-sbp-tpl]) ~ .sbp-check:not([data-sbp-tpl])) .sbp-kicker,
.sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about__body:has(.sbp-check:not([data-sbp-tpl]) ~ .sbp-check:not([data-sbp-tpl])) .sbp-h2,
.sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about__body:has(.sbp-check:not([data-sbp-tpl]) ~ .sbp-check:not([data-sbp-tpl])) .sbp-prose { max-width: min(60ch, 56%); }
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__body:has(.sbp-check:not([data-sbp-tpl]) ~ .sbp-check:not([data-sbp-tpl])) .sbp-kicker,
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__body:has(.sbp-check:not([data-sbp-tpl]) ~ .sbp-check:not([data-sbp-tpl])) .sbp-h2,
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__body:has(.sbp-check:not([data-sbp-tpl]) ~ .sbp-check:not([data-sbp-tpl])) .sbp-prose { max-width: min(60ch, 52%); }
.sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about__body:has(.sbp-check:not([data-sbp-tpl]) ~ .sbp-check:not([data-sbp-tpl])) .sbp-checks,
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__body:has(.sbp-check:not([data-sbp-tpl]) ~ .sbp-check:not([data-sbp-tpl])) .sbp-checks { order: 8; width: 100%; display: grid; gap: 12px; margin-top: 28px; }
.sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about__body:has(.sbp-check:not([data-sbp-tpl]) ~ .sbp-check:not([data-sbp-tpl])) .sbp-checks { grid-template-columns: repeat(auto-fit, minmax(max(250px, 40%), 1fr)); }
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__body:has(.sbp-check:not([data-sbp-tpl]) ~ .sbp-check:not([data-sbp-tpl])) .sbp-checks { grid-template-columns: repeat(auto-fit, minmax(max(220px, 23%), 1fr)); }
.sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about__body:has(.sbp-check:not([data-sbp-tpl]) ~ .sbp-check:not([data-sbp-tpl])) .sbp-check,
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__body:has(.sbp-check:not([data-sbp-tpl]) ~ .sbp-check:not([data-sbp-tpl])) .sbp-check { flex: none; }
.sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about__body:has(.sbp-check:not([data-sbp-tpl]) ~ .sbp-check:not([data-sbp-tpl])) .sbp-additem,
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__body:has(.sbp-check:not([data-sbp-tpl]) ~ .sbp-check:not([data-sbp-tpl])) .sbp-additem { order: 9; justify-self: start; }
/* Editor-only: in multi-highlight mode the body grid spans the whole
panel, which would wall off the image control. The container passes
clicks through; every real child (fields, chips, buttons) still
receives them. Public markup has no .sbp-editsec — untouched. */
.sbp-editsec .sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about__body:has(.sbp-check:not([data-sbp-tpl]) ~ .sbp-check:not([data-sbp-tpl])),
.sbp-editsec .sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__body:has(.sbp-check:not([data-sbp-tpl]) ~ .sbp-check:not([data-sbp-tpl])) { pointer-events: none; }
.sbp-editsec .sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about__body:has(.sbp-check:not([data-sbp-tpl]) ~ .sbp-check:not([data-sbp-tpl])) > *,
.sbp-editsec .sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__body:has(.sbp-check:not([data-sbp-tpl]) ~ .sbp-check:not([data-sbp-tpl])) > * { pointer-events: auto; }
/* L: grand cinema — deeper stage, larger voice, chips settle into a
hairline bottom rail. */
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__body { max-width: 52%; padding-block: clamp(64px, 8vw, 104px); }
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-h2 { font-size: calc(clamp(32px, 4vw, 50px) * var(--sbp-type-scale, 1)); }
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-checks { border-top: 1px solid rgba(255, 255, 255, .28); padding-top: 18px; margin-top: 24px; }
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__body .sbp-check { background: rgba(255, 255, 255, .1); }
}
/* V5 without a photo (public only — the editor always offers the slot):
the cinema goes dark — a deep rounded panel carries the story. */
.sbp-var--5 .sbp-sec--about .sbp-about--prose { display: block; max-width: 860px; margin-inline: auto; background: var(--sbp-deep-x, #2b2119); color: var(--sbp-deep-ink-x, #f5efe7); border-radius: 24px; padding: clamp(28px, 4.5vw, 56px); box-shadow: 0 22px 52px -36px rgba(var(--sbp-shadow-rgb, 32, 26, 20), .5); }
.sbp-var--5 .sbp-sec--about .sbp-about--prose .sbp-h2 { color: var(--sbp-deep-ink-x, #f5efe7); }
.sbp-var--5 .sbp-sec--about .sbp-about--prose .sbp-prose { color: color-mix(in srgb, var(--sbp-deep-ink-x, #f5efe7) 88%, var(--sbp-deep-x, #2b2119)); }
.sbp-var--5 .sbp-sec--about .sbp-about--prose .sbp-check { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); }
.sbp-var--5 .sbp-sec--about .sbp-about--prose .sbp-check__t { color: var(--sbp-deep-ink-x, #f5efe7); }
.sbp-var--5 .sbp-sec--about .sbp-about--prose .sbp-check__d { color: color-mix(in srgb, var(--sbp-deep-ink-x, #f5efe7) 78%, var(--sbp-deep-x, #2b2119)); }
.sbp-var--5 .sbp-sec--about .sbp-about--prose .sbp-check__mark { background: rgba(255, 255, 255, .14); color: var(--sbp-indicator, var(--sbp-deep-ink-x, #f5efe7)); }
.sbp-var--5 .sbp-sec--about .sbp-about--prose .sbp-btn--ghost { color: var(--sbp-deep-ink-x, #f5efe7); border-color: rgba(255, 255, 255, .5); }
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about--prose { padding: clamp(40px, 6vw, 80px); }
.sbp-tone--deep.sbp-var--5 .sbp-sec--about .sbp-about--prose { border: 1px solid rgba(255, 255, 255, .14); }
/* ── V6 · EDITORIAL BROADSHEET v6 — CONTENT-ADAPTIVE REBUILD.
ARCHITECTURE LAW: the composition is a flex flow, not an area grid —
the media column and a normal-flow text column. Every text element is
optional; publicly the renderer emits NOTHING for an empty field, so
absence costs zero space by construction (no reserved rows, columns,
dividers or overlay zones). Rules (h2 rule, notes divider) live on the
elements themselves and vanish with them. MEDIA LAW: fluid geometry —
percentage flex share per dial (S≈36% · M≈42% · L≈48%) with a single
restrained 4/3 editorial ratio; no fixed heights, cover + stored focal.
IMAGE-ONLY (public body has no element children): the photograph
becomes a centred 16/10 feature at a dial-scaled max width. TEXT-ONLY
(--prose): a refined editorial measure; HIGHLIGHTS-ONLY widens to a
full statement grid. TEXT-ON-IMAGE is a placement option only: overlay
and scrim exist only for text that exists; absent kicker promotes the
headline to the top inset; no text → clean image, no scrim. The
editor keeps its authoring superset (placeholders, compact empties,
Add-highlight in flow after the notes). Honesty Law unchanged: a real
photo alone is authored; all-empty stays private. */
/* VERTICAL-CENTRE LAW: the body is ONE auto-sized stack; centring is
mutual — a shorter stack centres against the image, a taller stack
grows the row and the image centres against it. No coordinates. */
.sbp-var--6 .sbp-sec--about .sbp-about { display: flex; align-items: center; gap: clamp(28px, 4vw, 52px); max-width: 1060px; margin-inline: auto; }
.sbp-var--6 .sbp-sec--about .sbp-about__media { flex: 0 1 36%; min-width: min(280px, 42%); aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; border: 1px solid var(--sbp-line); position: relative; }
.sbp-var--6 .sbp-sec--about .sbp-about__media img,
.sbp-var--6 .sbp-sec--about .sbp-about__media .sbp-eimg { display: block; width: 100%; height: 100%; }
.sbp-var--6 .sbp-sec--about .sbp-about__media img,
.sbp-var--6 .sbp-sec--about .sbp-about__media .sbp-eimg img { aspect-ratio: auto; max-height: none; object-fit: cover; }
.sbp-var--6 .sbp-sec--about .sbp-about__body { flex: 1 1 0; min-width: 0; }
.sbp-var--6 .sbp-sec--about .sbp-kicker { margin: 0 0 10px; }
.sbp-var--6 .sbp-sec--about .sbp-h2 { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--sbp-line); font-size: calc(clamp(26px, 3vw, 38px) * var(--sbp-type-scale, 1)); line-height: 1.12; }
.sbp-var--6 .sbp-sec--about .sbp-prose { max-width: 58ch; }
.sbp-var--6 .sbp-sec--about .sbp-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(240px, 46%), 1fr)); gap: 2px 32px; border-top: 1px solid var(--sbp-line); padding: 8px 0 0; margin-top: 18px; max-width: none; }
.sbp-var--6 .sbp-sec--about .sbp-about__body > .sbp-checks:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.sbp-var--6 .sbp-sec--about .sbp-check { grid-template-columns: 18px minmax(0, 1fr); gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--sbp-line); }
.sbp-var--6 .sbp-sec--about .sbp-check:last-child { border-bottom: 0; }
.sbp-var--6 .sbp-sec--about .sbp-check:not([data-sbp-tpl]):last-child:nth-child(odd),
.sbp-var--6 .sbp-sec--about .sbp-check:not([data-sbp-tpl]):nth-child(odd):has(+ [data-sbp-tpl]:last-child) { grid-column: 1 / -1; }
.sbp-var--6 .sbp-sec--about .sbp-check__mark { width: 16px; height: 16px; border-radius: 0; background: transparent; color: var(--sbp-indicator, var(--sbp-org)); }
.sbp-var--6 .sbp-sec--about .sbp-check__mark::before { font-size: 12px; }
.sbp-var--6 .sbp-sec--about .sbp-check__t { font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; }
.sbp-var--6 .sbp-sec--about .sbp-check__d { font-size: 13.5px; }
.sbp-var--6 .sbp-sec--about .sbp-btns { margin-top: 20px; }
.sbp-var--6 .sbp-sec--about .sbp-about__body > .sbp-btns:first-child { margin-top: 0; }
.sbp-var--6 .sbp-sec--about .sbp-additem { margin-top: 10px; }
/* Dial shares — larger through width and presence, never a taller slab. */
.sbp-var--6.sbp-med--m .sbp-sec--about .sbp-about { max-width: 1180px; }
.sbp-var--6.sbp-med--m .sbp-sec--about .sbp-about__media { flex-basis: 42%; min-width: min(320px, 46%); }
.sbp-var--6.sbp-med--m .sbp-sec--about .sbp-h2 { font-size: calc(clamp(28px, 3.4vw, 42px) * var(--sbp-type-scale, 1)); }
.sbp-var--6.sbp-med--l .sbp-sec--about .sbp-about { max-width: none; gap: clamp(32px, 4.5vw, 64px); }
.sbp-var--6.sbp-med--l .sbp-sec--about .sbp-about__media { flex-basis: 48%; min-width: min(360px, 50%); border-radius: 20px; }
.sbp-var--6.sbp-med--l .sbp-sec--about .sbp-h2 { font-size: calc(clamp(31px, 3.8vw, 48px) * var(--sbp-type-scale, 1)); }
.sbp-var--6.sbp-med--l .sbp-sec--about .sbp-prose { max-width: 56ch; }
.sbp-var--6.sbp-med--l .sbp-sec--about .sbp-check__t { font-size: 13px; }
/* IMAGE-ONLY (public): the photograph is the composition — centred,
cinematic 16/10, dial-scaled width. The empty body claims no space. */
.sbp-var--6 .sbp-sec--about .sbp-about:not(:has(.sbp-about__body > *)) .sbp-about__body { display: none; }
.sbp-var--6 .sbp-sec--about .sbp-about:has(.sbp-about__media):not(:has(.sbp-about__body > *)) { justify-content: center; }
.sbp-var--6 .sbp-sec--about .sbp-about:not(:has(.sbp-about__body > *)) .sbp-about__media { flex: 0 1 auto; width: min(100%, 880px); aspect-ratio: 16 / 10; }
.sbp-var--6.sbp-med--m .sbp-sec--about .sbp-about:not(:has(.sbp-about__body > *)) .sbp-about__media { width: min(100%, 980px); }
.sbp-var--6.sbp-med--l .sbp-sec--about .sbp-about:not(:has(.sbp-about__body > *)) .sbp-about__media { width: min(100%, 1080px); }
/* TEXT-ONLY (--prose, no media): refined editorial measure; a
highlights-only body widens into a full statement grid. */
.sbp-var--6 .sbp-sec--about .sbp-about--prose { max-width: 820px; }
.sbp-var--6.sbp-med--m .sbp-sec--about .sbp-about--prose { max-width: 900px; }
.sbp-var--6.sbp-med--l .sbp-sec--about .sbp-about--prose { max-width: 980px; }
.sbp-var--6 .sbp-sec--about .sbp-about--prose:not(:has(.sbp-prose)):not(:has(.sbp-h2)) { max-width: 1020px; }
@media (min-width: 761px) {
/* TEXT ON IMAGE — placement only, never a content requirement. The
overlay stack is top-anchored inside the media share; each element
overlays only if IT exists; the scrim exists only when text does. */
.sbp-olay--1.sbp-var--6 .sbp-sec--about .sbp-about:not(.sbp-about--prose) { position: relative; }
.sbp-olay--1.sbp-var--6 .sbp-sec--about .sbp-about:not(.sbp-about--prose) .sbp-kicker { position: absolute; z-index: 2; top: 18px; left: 20px; width: calc(36% - 40px); margin: 0; color: #fff; text-shadow: 0 1px 2px rgba(15, 11, 8, .5); }
.sbp-olay--1.sbp-var--6 .sbp-sec--about .sbp-about:not(.sbp-about--prose) .sbp-h2 { position: absolute; z-index: 2; top: 52px; left: 20px; width: calc(36% - 40px); margin: 0; padding: 0; border-bottom: 0; color: #fff; text-shadow: 0 1px 3px rgba(15, 11, 8, .55); font-size: calc(clamp(20px, 2.2vw, 30px) * var(--sbp-type-scale, 1)); line-height: 1.15; }
.sbp-olay--1.sbp-var--6 .sbp-sec--about .sbp-about:not(.sbp-about--prose):not(:has(.sbp-kicker)) .sbp-h2 { top: 18px; }
.sbp-olay--1.sbp-var--6.sbp-med--m .sbp-sec--about .sbp-about:not(.sbp-about--prose) .sbp-kicker,
.sbp-olay--1.sbp-var--6.sbp-med--m .sbp-sec--about .sbp-about:not(.sbp-about--prose) .sbp-h2 { width: calc(42% - 44px); }
.sbp-olay--1.sbp-var--6.sbp-med--l .sbp-sec--about .sbp-about:not(.sbp-about--prose) .sbp-kicker,
.sbp-olay--1.sbp-var--6.sbp-med--l .sbp-sec--about .sbp-about:not(.sbp-about--prose) .sbp-h2 { width: calc(48% - 48px); }
.sbp-olay--1.sbp-var--6 .sbp-sec--about .sbp-about:not(.sbp-about--prose):has(.sbp-kicker) .sbp-about__media::after,
.sbp-olay--1.sbp-var--6 .sbp-sec--about .sbp-about:not(.sbp-about--prose):has(.sbp-h2) .sbp-about__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(21, 17, 13, .68), rgba(21, 17, 13, .28) 34%, rgba(21, 17, 13, 0) 62%); }
/* Overlay text is positioned from the ROW top — when it exists the
image must sit at the row top so the insets land on the photograph;
the remaining right-hand flow stack still centres via align-items. */
.sbp-olay--1.sbp-var--6 .sbp-sec--about .sbp-about:not(.sbp-about--prose):has(.sbp-kicker) .sbp-about__media,
.sbp-olay--1.sbp-var--6 .sbp-sec--about .sbp-about:not(.sbp-about--prose):has(.sbp-h2) .sbp-about__media { align-self: flex-start; }
/* Image-only + olay: nothing to place — the mode above already renders
a clean centred photograph (no scrim rule can match). */
}
/* ── V7 · STORY INDEX v4 — the accepted ribbon masthead is FROZEN (aspect,
crop, cover, radius, hairline border, no pedestal). Below it: banner
kicker/title, narrative + CTAs left, and an EDITORIAL RULED LEDGER —
no enclosing card, no pill: a numbered register on the section surface
with a number gutter and hairline separators, top-aligned with the
narrative. 5+ entries at the L dial: a controlled two-column index
below the story (never squeezed into the rail). TEXT-ON-IMAGE mirrors
V6: kicker top-left, headline lower-left on the masthead scrim. */
.sbp-var--7 .sbp-sec--about .sbp-about { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; grid-template-areas: "media" "kicker" "title" "prose" "btns" "checks" "add"; align-content: start; align-items: start; max-width: 1120px; margin-inline: auto; }
.sbp-var--7 .sbp-sec--about .sbp-about:not(:has(.sbp-kicker)) { grid-template-areas: "media" "title" "prose" "btns" "checks" "add"; }
.sbp-var--7 .sbp-sec--about .sbp-about__body { display: contents; }
.sbp-var--7 .sbp-sec--about .sbp-about__media { grid-area: media; position: relative; width: 100%; aspect-ratio: 16 / 4.5; border-radius: 22px; overflow: hidden; margin-bottom: 4px; border: 1px solid var(--sbp-line); }
.sbp-var--7 .sbp-sec--about .sbp-about__media img,
.sbp-var--7 .sbp-sec--about .sbp-about__media .sbp-eimg { display: block; width: 100%; height: 100%; }
.sbp-var--7 .sbp-sec--about .sbp-about__media img,
.sbp-var--7 .sbp-sec--about .sbp-about__media .sbp-eimg img { aspect-ratio: auto; max-height: none; object-fit: cover; }
.sbp-var--7 .sbp-sec--about .sbp-kicker { grid-area: kicker; margin: 0; }
.sbp-var--7 .sbp-sec--about .sbp-h2 { grid-area: title; margin: 0; padding-bottom: 16px; border-bottom: 1px solid var(--sbp-line); font-size: calc(clamp(28px, 3.4vw, 42px) * var(--sbp-type-scale, 1)); line-height: 1.12; }
.sbp-var--7 .sbp-sec--about .sbp-prose { grid-area: prose; max-width: 66ch; }
.sbp-var--7 .sbp-sec--about .sbp-btns { grid-area: btns; margin-top: 10px; }
.sbp-var--7 .sbp-sec--about .sbp-checks { grid-area: checks; counter-reset: sbpav7; display: block; border: 0; border-radius: 0; background: transparent; padding: 0; margin-top: 2px; align-self: start; }
.sbp-var--7 .sbp-sec--about .sbp-check { counter-increment: sbpav7; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 9px 0 10px; border-bottom: 1px solid var(--sbp-line); }
.sbp-var--7 .sbp-sec--about .sbp-check:first-child { padding-top: 2px; }
.sbp-var--7 .sbp-sec--about .sbp-check:last-child { border-bottom: 0; }
.sbp-var--7 .sbp-sec--about .sbp-check__mark { background: transparent; color: var(--sbp-indicator, var(--sbp-org)); width: 34px; height: auto; border-radius: 0; justify-content: flex-start; }
.sbp-var--7 .sbp-sec--about .sbp-check__mark::before { content: counter(sbpav7, decimal-leading-zero); font-size: 12.5px; font-weight: 800; letter-spacing: .04em; }
.sbp-var--7 .sbp-sec--about .sbp-check__t { text-transform: uppercase; letter-spacing: .05em; font-size: 13px; }
.sbp-var--7 .sbp-sec--about .sbp-check__d { font-size: 13.5px; }
.sbp-var--7 .sbp-sec--about .sbp-additem { grid-area: add; justify-self: start; margin-top: 4px; }
@media (min-width: 761px) {
.sbp-var--7.sbp-med--m .sbp-sec--about .sbp-about,
.sbp-var--7.sbp-med--l .sbp-sec--about .sbp-about { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); gap: 18px clamp(28px, 4vw, 56px); grid-template-areas: "media media" "kicker kicker" "title title" "prose checks" "btns checks" ". add"; }
.sbp-var--7.sbp-med--m .sbp-sec--about .sbp-about:not(:has(.sbp-kicker)),
.sbp-var--7.sbp-med--l .sbp-sec--about .sbp-about:not(:has(.sbp-kicker)) { grid-template-areas: "media media" "title title" "prose checks" "btns checks" ". add"; }
.sbp-var--7.sbp-med--m .sbp-sec--about .sbp-about__media { aspect-ratio: 16 / 5; }
.sbp-var--7.sbp-med--l .sbp-sec--about .sbp-about { max-width: none; }
.sbp-var--7.sbp-med--l .sbp-sec--about .sbp-about__media { aspect-ratio: 16 / 6; border-radius: 24px; }
.sbp-var--7.sbp-med--l .sbp-sec--about .sbp-h2 { font-size: calc(clamp(32px, 4vw, 50px) * var(--sbp-type-scale, 1)); }
.sbp-var--7.sbp-med--l .sbp-sec--about .sbp-prose { max-width: 70ch; }
/* L · 5+ entries: two-column numbered index below the story — never
squeezed into the rail. Numbering and reading order run on. */
.sbp-var--7.sbp-med--l .sbp-sec--about .sbp-about:has(.sbp-check:not([data-sbp-tpl]):nth-child(5)) { grid-template-areas: "media media" "kicker kicker" "title title" "prose prose" "btns btns" "checks checks" "add add"; }
.sbp-var--7.sbp-med--l .sbp-sec--about .sbp-about:has(.sbp-check:not([data-sbp-tpl]):nth-child(5)):not(:has(.sbp-kicker)) { grid-template-areas: "media media" "title title" "prose prose" "btns btns" "checks checks" "add add"; }
.sbp-var--7.sbp-med--l .sbp-sec--about .sbp-about:has(.sbp-check:not([data-sbp-tpl]):nth-child(5)) .sbp-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 6px; }
/* TEXT ON IMAGE (image present): kicker top-left, headline lower-left on
the masthead; banner rows collapse; scrim guarantees contrast. */
.sbp-olay--1.sbp-var--7 .sbp-sec--about .sbp-about:not(.sbp-about--prose) { position: relative; grid-template-areas: "media" "prose" "btns" "checks" "add"; }
.sbp-olay--1.sbp-var--7.sbp-med--m .sbp-sec--about .sbp-about:not(.sbp-about--prose),
.sbp-olay--1.sbp-var--7.sbp-med--l .sbp-sec--about .sbp-about:not(.sbp-about--prose) { grid-template-areas: "media media" "prose checks" "btns checks" ". add"; }
.sbp-olay--1.sbp-var--7.sbp-med--l .sbp-sec--about .sbp-about:not(.sbp-about--prose):has(.sbp-check:not([data-sbp-tpl]):nth-child(5)) { grid-template-areas: "media media" "prose prose" "btns btns" "checks checks" "add add"; }
.sbp-olay--1.sbp-var--7 .sbp-sec--about .sbp-about:not(.sbp-about--prose) .sbp-kicker { grid-area: media; position: absolute; z-index: 2; top: 18px; left: 22px; right: 22px; margin: 0; color: #fff; text-shadow: 0 1px 2px rgba(15, 11, 8, .5); }
.sbp-olay--1.sbp-var--7 .sbp-sec--about .sbp-about:not(.sbp-about--prose) .sbp-h2 { grid-area: media; position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 16px; margin: 0; padding: 0; border-bottom: 0; color: #fff; text-shadow: 0 1px 3px rgba(15, 11, 8, .55); font-size: calc(clamp(24px, 2.6vw, 36px) * var(--sbp-type-scale, 1)); }
.sbp-olay--1.sbp-var--7 .sbp-sec--about .sbp-about:not(.sbp-about--prose) .sbp-about__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(21, 17, 13, .38), rgba(21, 17, 13, 0) 32%, rgba(21, 17, 13, 0) 50%, rgba(21, 17, 13, .72)); }
}
/* V7 without highlights (public): the ledger column must never survive as an
empty rail — the story and its CTAs take the full measure. */
.sbp-var--7 .sbp-sec--about .sbp-about:not(:has(.sbp-checks)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "kicker" "title" "prose" "btns"; }
/* V6/V7 without a photo (public only): no reserved image column or masthead
row; text-on-image falls back automatically (rules above are :not(--prose)). */
.sbp-var--6 .sbp-sec--about .sbp-about--prose { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "kicker" "title" "prose" "btns" "checks" "add"; max-width: 860px; }
.sbp-var--6 .sbp-sec--about .sbp-about--prose:not(:has(.sbp-kicker)) { grid-template-areas: "title" "prose" "btns" "checks" "add"; }
.sbp-var--6.sbp-med--m .sbp-sec--about .sbp-about--prose,
.sbp-var--6.sbp-med--l .sbp-sec--about .sbp-about--prose { grid-template-columns: minmax(0, 1.3fr) minmax(190px, 235px); grid-template-rows: auto auto auto 1fr auto; grid-template-areas: "kicker kicker" "title title" "prose checks" "btns checks" ". add"; max-width: 1080px; }
.sbp-var--6.sbp-med--m .sbp-sec--about .sbp-about--prose:not(:has(.sbp-kicker)),
.sbp-var--6.sbp-med--l .sbp-sec--about .sbp-about--prose:not(:has(.sbp-kicker)) { grid-template-rows: auto auto 1fr auto; grid-template-areas: "title title" "prose checks" "btns checks" ". add"; }
.sbp-var--6.sbp-med--m .sbp-sec--about .sbp-about--prose .sbp-checks,
.sbp-var--6.sbp-med--l .sbp-sec--about .sbp-about--prose .sbp-checks { display: block; border-top: 0; border-left: 1px solid var(--sbp-line); padding: 2px 0 2px 16px; margin-top: 3px; }
.sbp-var--7 .sbp-sec--about .sbp-about--prose { grid-template-areas: "kicker" "title" "prose" "btns" "checks" "add"; }
.sbp-var--7 .sbp-sec--about .sbp-about--prose:not(:has(.sbp-checks)) { grid-template-areas: "kicker" "title" "prose" "btns"; }
@media (min-width: 761px) {
.sbp-var--7.sbp-med--m .sbp-sec--about .sbp-about--prose,
.sbp-var--7.sbp-med--l .sbp-sec--about .sbp-about--prose { grid-template-areas: "kicker kicker" "title title" "prose checks" "btns checks" ". add"; }
}
/* ── V6/V7 EDITOR EMPTY HIGHLIGHTS — an empty saved/new item stays editable
but compacts to one placeholder row (~40px); its detail field returns
while the item is being edited (focus-within). Editor-only (.sbp-editsec
never exists publicly; the public renderer already drops both-empty
items, keeps single-field items). */
.sbp-editsec .sbp-var--4 .sbp-sec--about .sbp-check:not([data-sbp-tpl]):has(.sbp-check__t:empty):has(.sbp-check__d:empty):not(:focus-within),
.sbp-editsec .sbp-var--6 .sbp-sec--about .sbp-check:not([data-sbp-tpl]):has(.sbp-check__t:empty):has(.sbp-check__d:empty):not(:focus-within),
.sbp-editsec .sbp-var--7 .sbp-sec--about .sbp-check:not([data-sbp-tpl]):has(.sbp-check__t:empty):has(.sbp-check__d:empty):not(:focus-within) { padding-top: 6px; padding-bottom: 6px; }
.sbp-editsec .sbp-var--4 .sbp-sec--about .sbp-check:not([data-sbp-tpl]):has(.sbp-check__t:empty):has(.sbp-check__d:empty):not(:focus-within) .sbp-check__d,
.sbp-editsec .sbp-var--6 .sbp-sec--about .sbp-check:not([data-sbp-tpl]):has(.sbp-check__t:empty):has(.sbp-check__d:empty):not(:focus-within) .sbp-check__d,
.sbp-editsec .sbp-var--7 .sbp-sec--about .sbp-check:not([data-sbp-tpl]):has(.sbp-check__t:empty):has(.sbp-check__d:empty):not(:focus-within) .sbp-check__d { display: none; }
/* ── About V4-V7 on the DEEP band — light panel fills must never sit under
deep-band ink (text tokens flip light on deep). V5's dark surfaces are
deep-native; the V7 ledger is now surface-ruled (no fill to drop). */
.sbp-tone--deep.sbp-var--5 .sbp-sec--about .sbp-check { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); }
.sbp-tone--deep.sbp-var--5 .sbp-sec--about .sbp-check__mark { background: rgba(255, 255, 255, .14); color: var(--sbp-indicator, var(--sbp-deep-ink-x, #f5efe7)); }
/* ── About V4-V7 — small screens: every composition stacks to one honest
column; no sticky, no overlay, no text-on-image (falls back to Off),
no horizontal overflow. Count/olay area maps live in 761px+ media
queries above, so these single-column maps govern mobile untouched. */
@media (max-width: 760px) {
.sbp-var--4 .sbp-sec--about .sbp-about__body,
.sbp-var--4.sbp-med--m .sbp-sec--about .sbp-about__body,
.sbp-var--4.sbp-med--l .sbp-sec--about .sbp-about__body { max-width: 100%; }
.sbp-var--4 .sbp-sec--about .sbp-about__media,
.sbp-var--4.sbp-med--m .sbp-sec--about .sbp-about__media,
.sbp-var--4.sbp-med--l .sbp-sec--about .sbp-about__media { width: 100%; aspect-ratio: 4 / 3; margin-top: 0; border-radius: 18px; }
.sbp-var--5 .sbp-sec--about .sbp-about,
.sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about,
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about { gap: 18px; max-width: 100%; }
.sbp-var--5 .sbp-sec--about .sbp-about__media,
.sbp-var--5.sbp-med--m .sbp-sec--about .sbp-about__media,
.sbp-var--5.sbp-med--l .sbp-sec--about .sbp-about__media { aspect-ratio: 16 / 10; border-radius: 18px; }
.sbp-var--5 .sbp-sec--about .sbp-about--prose { padding: 22px 18px; border-radius: 18px; }
.sbp-var--6 .sbp-sec--about .sbp-about,
.sbp-var--6.sbp-med--m .sbp-sec--about .sbp-about,
.sbp-var--6.sbp-med--l .sbp-sec--about .sbp-about { flex-direction: column; align-items: stretch; gap: 18px; max-width: 100%; }
.sbp-var--6 .sbp-sec--about .sbp-about__media,
.sbp-var--6.sbp-med--m .sbp-sec--about .sbp-about__media,
.sbp-var--6.sbp-med--l .sbp-sec--about .sbp-about__media { flex: none; width: 100%; min-width: 0; aspect-ratio: 4 / 3; border-radius: 16px; }
.sbp-var--6 .sbp-sec--about .sbp-about:not(:has(.sbp-about__body > *)) .sbp-about__media,
.sbp-var--6.sbp-med--m .sbp-sec--about .sbp-about:not(:has(.sbp-about__body > *)) .sbp-about__media,
.sbp-var--6.sbp-med--l .sbp-sec--about .sbp-about:not(:has(.sbp-about__body > *)) .sbp-about__media { width: 100%; aspect-ratio: 16 / 10; }
.sbp-var--6 .sbp-sec--about .sbp-checks,
.sbp-var--6.sbp-med--m .sbp-sec--about .sbp-checks,
.sbp-var--6.sbp-med--l .sbp-sec--about .sbp-checks { grid-template-columns: minmax(0, 1fr); }
.sbp-var--6 .sbp-sec--about .sbp-btns { margin-top: 14px; }
.sbp-var--7 .sbp-sec--about .sbp-about__media { aspect-ratio: 16 / 6; border-radius: 18px; }
.sbp-var--7 .sbp-sec--about .sbp-checks { padding: 0; }
}
@media (max-width: 640px) {
.sbp-var--4 .sbp-sec--about .sbp-checks,
.sbp-var--4.sbp-med--m .sbp-sec--about .sbp-checks,
.sbp-var--4.sbp-med--l .sbp-sec--about .sbp-checks { padding: 0; border: 0; }
.sbp-var--4 .sbp-sec--about .sbp-check,
.sbp-var--4.sbp-med--m .sbp-sec--about .sbp-check,
.sbp-var--4.sbp-med--l .sbp-sec--about .sbp-check { flex-basis: 100%; }
.sbp-var--4:not(.sbp-med--m):not(.sbp-med--l) .sbp-sec--about .sbp-checks { grid-template-columns: minmax(0, 1fr); }
.sbp-var--5 .sbp-sec--about .sbp-check { flex-basis: 100%; }
}
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_MENU_PREMIUM_FAMILY v3 — the classy-restaurant convergence.
Seven structurally distinct identities over the ONE canonical Menu DOM:
V1 Bistro Board — a warm board card: two ruled category columns,
dotted leaders (the ONLY variant with leaders).
V2 Category Cards — independent white cards, one per category, with
tinted header bands that carry real authority.
V3 Tasting List — a centred, numbered-course prix-fixe ceremony.
V4 Grand Menu — open broadsheet: double-rule masthead, chip nav,
banded categories, two-page spread with book seam.
V5 Plated — photographed plates: featured dish + curated
supporting plates; text plates hug their content.
V6 Chef's Notes — serif kitchen journal: pen-stroke headings and
margin-note annotations beside each dish.
V7 Tariff Board — a coded ledger register: roman section numerals,
item codes, full-width rules, hard price column.
AUTHORITY: Menu Builder (business_menu_sections/_items) stays the ONLY
content source. Counters enumerate REAL groups/items in their real order
(operator-invited course numbers / item codes); no rule invents content.
SCOPING LAW: every rule is double-scoped — the wrapper's .sbp-var--N plus
a .sbp-menusec* / .sbp-menu__* / .sbp-sec--menu inner class. S is
CLASSLESS: S-specific rules use :not(.sbp-med--m):not(.sbp-med--l).
CONTAINER LAW: the menu shell (.sbp-sw) is the size container (sbpmenu);
ALL seven variants compose against its real inline size, so editor
canvas, draft preview and public page compose identically.
SHELL LAW: the shell reserves its own gutter (width: calc(100% − clamp))
so content can never touch the section boundary; legacy max-widths cap
first at wide viewports.
ORDER LAW: this zone sits at EOF, after the base grammar (~354), the
legacy variant treatments (~980-1262) and the dial ladder (~5109-5168);
redesigned variants override those explicitly in UNCONDITIONED rules.
═══════════════════════════════════════════════════════════════════════ */
/* ── shared: safe centred shell + honest-empty guards ────────────────────── */
.sbp-sec--menu .sbp-sw {
width: calc(100% - clamp(32px, 5vw, 76px));
margin-inline: auto;
container: sbpmenu / inline-size;
}
.sbp-sec--menu .sbp-menusec__price:empty { display: none; }
.sbp-sec--menu .sbp-menusec__row:has(.sbp-menusec__price:empty) .sbp-menu__dots { display: none; }
/* ── shared: category anchor targets + nav chips (V4 shows them) ─────────── */
.sbp-menusec__nav { display: none; }
.sbp-menusec__groupname[id] { scroll-margin-top: 96px; }
.sbp-menusec__navlink {
display: inline-flex; align-items: center;
padding: 7px 15px; border-radius: 999px;
border: 1px solid var(--sbp-line);
color: var(--sbp-ink); text-decoration: none;
font-size: 13px; font-weight: 700; letter-spacing: .02em;
background: transparent; white-space: nowrap;
}
.sbp-menusec__navlink:hover { background: var(--sbp-field-b); }
.sbp-menusec__navlink:focus-visible {
outline: 2px solid var(--sbp-indicator, var(--sbp-org-display));
outline-offset: 2px;
}
.sbp-menusec__groupname:target {
text-decoration: underline; text-decoration-thickness: 2px;
text-underline-offset: 6px;
}
/* ═══ V1 BISTRO BOARD — the house board ═══════════════════════════════════
One warm tinted board card holds the whole menu; categories flow in two
ruled columns; items keep the classic name···price dotted leader (V1's
exclusive signature). Convivial, compact, scannable. */
.sbp-var--1 .sbp-menusec__groups {
background: var(--sbp-field-b);
border: 1px solid var(--sbp-line); border-radius: 20px;
padding: clamp(20px, 3.4cqw, 34px) clamp(18px, 3.4cqw, 36px);
display: grid; grid-template-columns: minmax(0, 1fr);
gap: clamp(22px, 3.4cqw, 34px) clamp(36px, 5cqw, 60px);
max-width: none; margin-inline: auto;
}
@container sbpmenu (min-width: 720px) {
.sbp-var--1 .sbp-menusec__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sbp-var--1 .sbp-menusec__group { min-width: 0; }
.sbp-var--1 .sbp-menusec__groupname {
display: block; font-size: 13px; letter-spacing: .15em; margin: 0 0 14px;
padding-bottom: 9px; border-bottom: 3px double color-mix(in srgb, var(--sbp-indicator, var(--sbp-org-display)) 55%, var(--sbp-line));
}
.sbp-var--1 .sbp-menusec__groupname::after { display: none; }
.sbp-var--1 .sbp-menusec__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sbp-var--1 .sbp-menusec__thumb { flex-basis: 48px; width: 48px; height: 48px; border-radius: 10px; }
.sbp-var--1 .sbp-menusec__name { font-size: 15.5px; }
.sbp-var--1 .sbp-menusec__desc { font-size: 13.5px; max-width: 52ch; }
.sbp-var--1 .sbp-menusec__price { font-size: 14.5px; }
.sbp-tone--deep.sbp-var--1 .sbp-menusec__groups { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
/* M — the board breathes: larger plates, roomier rhythm */
.sbp-var--1.sbp-med--m .sbp-menusec__groups {
padding: clamp(24px, 4cqw, 42px) clamp(22px, 4cqw, 44px);
gap: clamp(26px, 4cqw, 40px) clamp(44px, 6cqw, 72px);
}
.sbp-var--1.sbp-med--m .sbp-menusec__list { gap: 15px; }
.sbp-var--1.sbp-med--m .sbp-menusec__thumb { flex-basis: 64px; width: 64px; height: 64px; }
.sbp-var--1.sbp-med--m .sbp-menusec__name { font-size: 16px; }
.sbp-var--1.sbp-med--m .sbp-menusec__desc { font-size: 14px; }
.sbp-var--1.sbp-med--m .sbp-menusec__price { font-size: 15px; }
.sbp-var--1.sbp-med--m .sbp-menusec__groupname { font-size: 13.5px; margin-bottom: 16px; }
/* L — the composed bistro menu board: deeper frame, grander rhythm.
Kills the legacy .sbp-med--l 780px single-column squeeze. */
.sbp-var--1.sbp-med--l .sbp-menusec__groups {
grid-template-columns: minmax(0, 1fr);
max-width: none; margin-inline: auto;
border-radius: 24px;
box-shadow: 0 24px 54px -38px rgba(32, 26, 20, .45);
padding: clamp(28px, 4.6cqw, 52px) clamp(26px, 4.6cqw, 54px);
gap: clamp(30px, 4.6cqw, 46px) clamp(52px, 7cqw, 88px);
}
@container sbpmenu (min-width: 720px) {
.sbp-var--1.sbp-med--l .sbp-menusec__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sbp-var--1.sbp-med--l .sbp-menusec__list { gap: 17px; }
.sbp-var--1.sbp-med--l .sbp-menusec__thumb { flex-basis: 72px; width: 72px; height: 72px; }
.sbp-var--1.sbp-med--l .sbp-menusec__name { font-size: 16.5px; }
.sbp-var--1.sbp-med--l .sbp-menusec__desc { font-size: 14.5px; }
.sbp-var--1.sbp-med--l .sbp-menusec__price { font-size: 15.5px; }
.sbp-var--1.sbp-med--l .sbp-menusec__groupname { font-size: 14px; letter-spacing: .17em; margin-bottom: 18px; }
.sbp-tone--deep.sbp-var--1.sbp-med--l .sbp-menusec__groups { box-shadow: 0 24px 54px -38px rgba(0, 0, 0, .6); }
/* ═══ V2 CATEGORY CARDS — independent category cards ══════════════════════
Each category is its own white card with a tinted header band of real
authority. No leaders here — stable name/price rows. */
.sbp-var--2 .sbp-menu__dots { display: none; }
.sbp-var--2 .sbp-menusec__row {
display: grid; grid-template-columns: minmax(0, 1fr) auto;
column-gap: 16px; align-items: baseline;
}
.sbp-var--2 .sbp-menusec__groups {
display: grid; grid-template-columns: minmax(0, 1fr);
gap: 18px; align-items: start; max-width: none; margin-inline: 0;
}
.sbp-var--2 .sbp-menusec__group {
min-width: 0; background: var(--sbp-card); border: 1px solid var(--sbp-line);
border-radius: 18px; overflow: hidden; padding: 0;
box-shadow: 0 16px 34px -26px rgba(32, 26, 20, .35);
}
.sbp-var--2 .sbp-menusec__groupname {
display: flex; align-items: center; gap: 12px;
margin: 0; padding: 13px 18px 12px;
background: var(--sbp-field-b);
border-bottom: 1px solid var(--sbp-line);
font-size: 13.5px; letter-spacing: .12em;
}
.sbp-var--2 .sbp-menusec__groupname::after {
content: ""; flex: 0 0 34px; height: 2px; border-radius: 2px;
background: color-mix(in srgb, var(--sbp-indicator, var(--sbp-org-display)) 45%, transparent);
}
.sbp-var--2 .sbp-menusec__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 8px 18px 16px; }
.sbp-var--2 .sbp-menusec__item { padding-block: 11px; }
.sbp-var--2 .sbp-menusec__item + .sbp-menusec__item { border-top: 1px solid color-mix(in srgb, var(--sbp-line) 72%, transparent); padding-top: 11px; }
.sbp-var--2 .sbp-menusec__thumb { flex-basis: 44px; width: 44px; height: 44px; border-radius: 10px; }
.sbp-var--2 .sbp-menusec__name { font-size: 15px; }
.sbp-var--2 .sbp-menusec__desc { font-size: 13.5px; max-width: none; }
.sbp-var--2 .sbp-menusec__price { font-size: 14.5px; }
.sbp-tone--deep.sbp-var--2 .sbp-menusec__group { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .16); }
.sbp-tone--deep.sbp-var--2 .sbp-menusec__groupname { background: rgba(255, 255, 255, .07); border-bottom-color: rgba(255, 255, 255, .14); }
@container sbpmenu (min-width: 760px) {
.sbp-var--2 .sbp-menusec__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* M — balanced card composition */
.sbp-var--2.sbp-med--m .sbp-menusec__groups { gap: 22px; }
.sbp-var--2.sbp-med--m .sbp-menusec__groupname { padding: 15px 21px 14px; font-size: 14px; }
.sbp-var--2.sbp-med--m .sbp-menusec__list { padding: 10px 21px 19px; }
.sbp-var--2.sbp-med--m .sbp-menusec__item { padding-block: 13px; }
.sbp-var--2.sbp-med--m .sbp-menusec__thumb { flex-basis: 52px; width: 52px; height: 52px; }
.sbp-var--2.sbp-med--m .sbp-menusec__name { font-size: 15.5px; }
.sbp-var--2.sbp-med--m .sbp-menusec__desc { font-size: 14px; }
.sbp-var--2.sbp-med--m .sbp-menusec__price { font-size: 15px; }
/* L — expressive arrangement: the first category leads full-width, its
list flowing in two columns inside the card */
.sbp-var--2.sbp-med--l .sbp-menusec__groups { grid-template-columns: minmax(0, 1fr); gap: 26px; max-width: none; margin-inline: 0; }
.sbp-var--2.sbp-med--l .sbp-menusec__groupname { padding: 17px 24px 16px; font-size: 14.5px; letter-spacing: .14em; }
.sbp-var--2.sbp-med--l .sbp-menusec__list { padding: 12px 24px 22px; }
.sbp-var--2.sbp-med--l .sbp-menusec__item { padding-block: 14px; }
.sbp-var--2.sbp-med--l .sbp-menusec__thumb { flex-basis: 56px; width: 56px; height: 56px; }
.sbp-var--2.sbp-med--l .sbp-menusec__name { font-size: 16px; }
.sbp-var--2.sbp-med--l .sbp-menusec__desc { font-size: 14.5px; }
.sbp-var--2.sbp-med--l .sbp-menusec__price { font-size: 15.5px; }
@container sbpmenu (min-width: 760px) {
.sbp-var--2.sbp-med--l .sbp-menusec__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sbp-var--2.sbp-med--l .sbp-menusec__group:first-child { grid-column: 1 / -1; }
.sbp-var--2.sbp-med--l .sbp-menusec__group:first-child .sbp-menusec__list {
grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px;
}
/* the two-column card list rules every row, including each column's first */
.sbp-var--2.sbp-med--l .sbp-menusec__group:first-child .sbp-menusec__item { border-top: 1px solid color-mix(in srgb, var(--sbp-line) 72%, transparent); padding-top: 14px; }
}
/* ═══ V3 TASTING LIST — the numbered prix-fixe ceremony ═══════════════════
One centred reading measure; each course opens with a small numeral and
a centred label; names centred, price set beneath in quiet letterspaced
caps; serif italic descriptions. No cards, no columns, no images. */
.sbp-var--3 .sbp-menusec__groups {
counter-reset: sbp3course;
display: block; max-width: 620px; margin-inline: auto;
background: none; border: 0; box-shadow: none;
}
.sbp-var--3 .sbp-menusec__group { counter-increment: sbp3course; }
.sbp-var--3 .sbp-menusec__group + .sbp-menusec__group { margin-top: clamp(34px, 5cqw, 54px); }
.sbp-var--3 .sbp-menusec__groupname {
display: block; text-align: center; margin: 0 0 6px;
font-size: 13.5px; letter-spacing: .18em;
}
.sbp-var--3 .sbp-menusec__groupname::before {
content: counter(sbp3course, decimal-leading-zero);
display: block; height: auto; background: none; flex: none;
font-family: Georgia, 'Times New Roman', serif; font-style: italic;
font-weight: 400; font-size: 15px; letter-spacing: .08em;
color: var(--sbp-indicator, var(--sbp-org-display));
margin: 0 0 7px;
}
.sbp-var--3 .sbp-menusec__groupname::after {
content: ""; display: block; flex: none;
width: 40px; height: 1px; margin: 12px auto 0;
background: color-mix(in srgb, var(--sbp-ink) 34%, transparent);
}
.sbp-var--3 .sbp-menusec__thumb { display: none; }
.sbp-var--3 .sbp-menu__dots { display: none; }
.sbp-var--3 .sbp-menusec__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 18px; }
.sbp-var--3 .sbp-menusec__item { display: block; text-align: center; padding-block: 13px; }
.sbp-var--3 .sbp-menusec__item + .sbp-menusec__item { border-top: 0; }
.sbp-var--3 .sbp-menusec__row { display: block; }
.sbp-var--3 .sbp-menusec__name { display: block; font-size: 16px; }
.sbp-var--3 .sbp-menusec__price {
display: block; margin-top: 4px;
font-size: 13px; font-weight: 700; letter-spacing: .12em;
color: var(--sbp-indicator, var(--sbp-org-display));
}
.sbp-var--3 .sbp-menusec__desc {
font-family: Georgia, 'Times New Roman', serif; font-style: italic;
font-size: 14px; line-height: 1.6; max-width: 46ch;
margin-inline: auto; margin-top: 5px;
}
.sbp-var--3 .sbp-menusec__written { text-align: center; margin-inline: auto; max-width: 58ch; }
.sbp-var--3 .sbp-menusec__cta { text-align: center; }
/* M — the classic tasting page: wider measure, larger voice, slower pacing */
.sbp-var--3.sbp-med--m .sbp-menusec__groups { max-width: 640px; }
.sbp-var--3.sbp-med--m .sbp-menusec__item { padding-block: 16px; }
.sbp-var--3.sbp-med--m .sbp-menusec__name { font-size: 17px; }
.sbp-var--3.sbp-med--m .sbp-menusec__price { font-size: 13px; }
.sbp-var--3.sbp-med--m .sbp-menusec__desc { font-size: 14.5px; }
.sbp-var--3.sbp-med--m .sbp-menusec__groupname { font-size: 14px; }
.sbp-var--3.sbp-med--m .sbp-menusec__group + .sbp-menusec__group { margin-top: clamp(40px, 6cqw, 62px); }
/* L — the ceremonial framed carte */
.sbp-var--3.sbp-med--l .sbp-menusec__groups {
max-width: 700px;
border: 1px solid var(--sbp-line); border-radius: 20px;
padding: clamp(30px, 4.6cqw, 52px) clamp(20px, 4.6cqw, 58px);
box-shadow: 0 0 0 5px color-mix(in srgb, var(--sbp-line) 28%, transparent);
}
.sbp-var--3.sbp-med--l .sbp-menusec__item { padding-block: 18px; }
.sbp-var--3.sbp-med--l .sbp-menusec__name { font-size: 18px; }
.sbp-var--3.sbp-med--l .sbp-menusec__price { font-size: 13.5px; }
.sbp-var--3.sbp-med--l .sbp-menusec__desc { font-size: 15px; }
.sbp-var--3.sbp-med--l .sbp-menusec__groupname { font-size: 14.5px; letter-spacing: .2em; }
.sbp-var--3.sbp-med--l .sbp-menusec__groupname::before { font-size: 16px; }
.sbp-var--3.sbp-med--l .sbp-menusec__group + .sbp-menusec__group { margin-top: clamp(44px, 6.6cqw, 70px); }
.sbp-tone--deep.sbp-var--3.sbp-med--l .sbp-menusec__groups {
border-color: rgba(255, 255, 255, .18);
box-shadow: 0 0 0 5px rgba(255, 255, 255, .06);
}
/* ═══ V4 GRAND MENU — the editorial broadsheet ════════════════════════════
Double-rule masthead, centred chip navigation, banded categories opened
by centred small-caps over a signature tick; stable name/price rows;
L opens the two-page spread with its book seam. */
.sbp-var--4 .sbp-sec--menu .sbp-head {
text-align: center;
border-bottom: 3px double color-mix(in srgb, var(--sbp-ink) 38%, var(--sbp-line));
padding-bottom: clamp(14px, 2cqw, 20px);
margin-bottom: clamp(14px, 2cqw, 20px);
}
.sbp-var--4 .sbp-sec--menu .sbp-head .sbp-kicker { justify-content: center; letter-spacing: .16em; }
.sbp-var--4 .sbp-sec--menu .sbp-head .sbp-lead { margin-inline: auto; }
.sbp-var--4 .sbp-menusec__nav {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 9px; margin-top: 2px;
}
.sbp-var--4 .sbp-menu__dots { display: none; }
.sbp-var--4 .sbp-menusec__row {
display: grid; grid-template-columns: minmax(0, 1fr) auto;
column-gap: 18px; align-items: baseline;
}
.sbp-var--4 .sbp-menusec__groups {
display: block; margin-top: clamp(18px, 2.6cqw, 26px);
max-width: none; margin-inline: 0;
background: none; border: 0; box-shadow: none; padding: 0;
}
.sbp-var--4 .sbp-menusec__group { border-top: 1px solid var(--sbp-line); padding-top: 24px; margin-top: 28px; background: none; box-shadow: none; }
.sbp-var--4 .sbp-menusec__group:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.sbp-var--4 .sbp-menusec__groupname {
display: block; text-align: center; background: none; border-bottom: 0; padding: 0;
font-size: 13.5px; letter-spacing: .16em; margin: 0 0 18px;
}
.sbp-var--4 .sbp-menusec__groupname::after {
content: ""; display: block; flex: none;
width: 44px; height: 2px; border-radius: 2px; margin: 10px auto 0;
background: color-mix(in srgb, var(--sbp-indicator, var(--sbp-org-display)) 40%, transparent);
}
.sbp-var--4 .sbp-menusec__list {
display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
max-width: 760px; margin-inline: auto; align-items: start; padding: 0;
}
.sbp-var--4 .sbp-menusec__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.sbp-var--4 .sbp-menusec__item:not(:has(.sbp-menusec__thumb)) { grid-template-columns: minmax(0, 1fr); }
.sbp-var--4 .sbp-menusec__item + .sbp-menusec__item { border-top: 0; padding-top: 0; }
.sbp-var--4 .sbp-menusec__thumb { flex: none; width: 52px; height: 52px; border-radius: 12px; }
.sbp-var--4 .sbp-menusec__name { font-size: 16px; }
.sbp-var--4 .sbp-menusec__desc { font-size: 14px; line-height: 1.55; max-width: 58ch; }
.sbp-var--4 .sbp-menusec__price { font-size: 15px; }
.sbp-var--4 .sbp-menusec__cta { text-align: center; }
/* M — balanced publication page */
.sbp-var--4.sbp-med--m .sbp-menusec__thumb { width: 64px; height: 64px; }
.sbp-var--4.sbp-med--m .sbp-menusec__name { font-size: 16.5px; }
.sbp-var--4.sbp-med--m .sbp-menusec__desc { font-size: 14.5px; }
.sbp-var--4.sbp-med--m .sbp-menusec__price { font-size: 15.5px; }
.sbp-var--4.sbp-med--m .sbp-menusec__groupname { font-size: 14px; }
.sbp-var--4.sbp-med--m .sbp-menusec__list { gap: 16px; }
.sbp-var--4.sbp-med--m .sbp-menusec__group { padding-top: 26px; margin-top: 32px; }
@container sbpmenu (min-width: 860px) {
.sbp-var--4.sbp-med--m .sbp-menusec__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 52px; max-width: none;
}
}
/* L — the premium menu spread: two ruled pages, never three columns */
.sbp-var--4.sbp-med--l .sbp-menusec__thumb { width: 76px; height: 76px; }
.sbp-var--4.sbp-med--l .sbp-menusec__name { font-size: 17.5px; }
.sbp-var--4.sbp-med--l .sbp-menusec__desc { font-size: 15px; line-height: 1.6; }
.sbp-var--4.sbp-med--l .sbp-menusec__price { font-size: 16.5px; }
.sbp-var--4.sbp-med--l .sbp-menusec__groupname { font-size: 15px; letter-spacing: .18em; }
.sbp-var--4.sbp-med--l .sbp-menusec__list { gap: 18px; }
.sbp-var--4.sbp-med--l .sbp-menusec__group { padding-top: 30px; margin-top: 36px; }
@container sbpmenu (min-width: 900px) {
.sbp-var--4.sbp-med--l .sbp-menusec__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 72px; max-width: none; position: relative;
}
.sbp-var--4.sbp-med--l .sbp-menusec__list::before {
content: ""; position: absolute; inset-block: 4px; left: 50%;
width: 1px; background: var(--sbp-line);
}
.sbp-tone--deep.sbp-var--4.sbp-med--l .sbp-menusec__list::before { background: rgba(255, 255, 255, .18); }
}
@container sbpmenu (max-width: 640px) {
.sbp-var--4 .sbp-menusec__nav {
flex-wrap: nowrap; justify-content: flex-start;
max-width: 100%; overflow-x: auto; padding-bottom: 6px;
-webkit-overflow-scrolling: touch;
}
.sbp-var--4 .sbp-menusec__navlink { font-size: 12.5px; padding: 6px 12px; }
.sbp-var--4 .sbp-menusec__group { padding-top: 18px; margin-top: 20px; }
}
/* ═══ V5 PLATED — the photographed service (v4 dial rotation + media law) ═
OPERATOR DIAL ROTATION (v4): the three certified v3 compositions move to
new dials — new S = old M (curated card grid), new M = old L (grand
feature + support grid), new L = old S (editorial banner + plate rail).
Toolbar labels and the global meaning of S/M/L are untouched; only which
V5 composition each dial selects has rotated.
MEDIA LAW (v4): every V5 photograph is an INSET PLATE — 12px radius,
fixed aspect, object-fit cover — so no image can distort its card, and
imageless items keep the certified hugging text-tile collapse. */
.sbp-var--5 .sbp-menu__dots { display: none; }
.sbp-var--5 .sbp-menusec__row {
display: grid; grid-template-columns: minmax(0, 1fr) auto;
column-gap: 16px; align-items: baseline;
}
.sbp-var--5 .sbp-menusec__groups {
display: grid; grid-template-columns: minmax(0, 1fr);
gap: clamp(26px, 4cqw, 40px); max-width: none; margin-inline: 0;
background: none; border: 0; box-shadow: none; padding: 0;
}
.sbp-var--5 .sbp-menusec__group { background: none; border: 0; box-shadow: none; padding: 0; }
.sbp-var--5 .sbp-menusec__groupname {
display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0;
font-size: 13px; letter-spacing: .13em; margin: 0 0 15px;
}
.sbp-var--5 .sbp-menusec__groupname::after {
content: ""; flex: 1 1 auto; height: 2px; border-radius: 2px;
background: color-mix(in srgb, var(--sbp-indicator, var(--sbp-org-display)) 32%, transparent);
}
.sbp-var--5 .sbp-menusec__list {
display: grid; grid-template-columns: minmax(0, 1fr);
gap: 14px; align-items: start; padding: 0;
}
.sbp-var--5 .sbp-menusec__item {
display: flex; align-items: stretch; gap: 0; min-width: 0;
background: var(--sbp-card); border: 1px solid var(--sbp-line);
border-radius: 16px; overflow: hidden; padding: 0;
}
.sbp-var--5 .sbp-menusec__body { flex: 1 1 auto; min-width: 0; align-self: center; padding: 13px 16px 14px; }
.sbp-var--5 .sbp-menusec__item:not(:has(.sbp-menusec__thumb)) {
background: var(--sbp-field-b); border-color: transparent;
}
.sbp-var--5 .sbp-menusec__cta { text-align: center; }
.sbp-tone--deep.sbp-var--5 .sbp-menusec__item { border-color: rgba(255, 255, 255, .16); }
.sbp-tone--deep.sbp-var--5 .sbp-menusec__item:not(:has(.sbp-menusec__thumb)) { background: rgba(255, 255, 255, .08); border-color: transparent; }
/* ── NEW S (old M anatomy) — curated grid of vertical plates ── */
.sbp-var--5 .sbp-menusec__item { flex-direction: column; align-items: stretch; }
.sbp-var--5 .sbp-menusec__thumb {
flex: 0 0 auto; order: 0;
width: calc(100% - 20px); height: auto; min-height: 0;
margin: 10px 10px 0; aspect-ratio: 4 / 3;
object-fit: cover; border-radius: 12px;
background: var(--sbp-field-b);
}
.sbp-var--5 .sbp-menusec__body { align-self: stretch; padding: 14px 17px 16px; }
.sbp-var--5 .sbp-menusec__name { font-size: 16.5px; }
.sbp-var--5 .sbp-menusec__desc { font-size: 14px; max-width: none; }
.sbp-var--5 .sbp-menusec__price { font-size: 15.5px; }
.sbp-var--5:not(.sbp-med--m):not(.sbp-med--l) .sbp-menusec__list { gap: 18px; }
/* S restraint: supporting plates crop to 16/9 so an all-imaged menu stays
compact at the S dial (the feature keeps its own treatment below) */
.sbp-var--5:not(.sbp-med--m):not(.sbp-med--l) .sbp-menusec__thumb { aspect-ratio: 16 / 9; }
/* S restraint: a photographed course packs three-across where the shell
affords it — the compact dial never towers when every dish is imaged.
(:has-gated, so imageless S geometry stays byte-identical to old M.) */
@container sbpmenu (min-width: 640px) {
.sbp-var--5:not(.sbp-med--m):not(.sbp-med--l) .sbp-menusec__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container sbpmenu (min-width: 1020px) {
.sbp-var--5:not(.sbp-med--m):not(.sbp-med--l) .sbp-menusec__list:has(.sbp-menusec__thumb) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container sbpmenu (min-width: 760px) {
.sbp-var--5:not(.sbp-med--m):not(.sbp-med--l) .sbp-menusec__group:first-child
.sbp-menusec__item:has(.sbp-menusec__thumb):not(:is(.sbp-menusec__item:has(.sbp-menusec__thumb) ~ .sbp-menusec__item)) {
grid-column: 1 / -1; flex-direction: row; align-items: stretch;
}
.sbp-var--5:not(.sbp-med--m):not(.sbp-med--l) .sbp-menusec__group:first-child
.sbp-menusec__item:has(.sbp-menusec__thumb):not(:is(.sbp-menusec__item:has(.sbp-menusec__thumb) ~ .sbp-menusec__item)) .sbp-menusec__thumb {
flex: 0 0 38%; width: 38%; margin: 10px 0 10px 10px; aspect-ratio: auto; min-height: 180px;
}
.sbp-var--5:not(.sbp-med--m):not(.sbp-med--l) .sbp-menusec__group:first-child
.sbp-menusec__item:has(.sbp-menusec__thumb):not(:is(.sbp-menusec__item:has(.sbp-menusec__thumb) ~ .sbp-menusec__item)) .sbp-menusec__body {
align-self: center; padding: 18px 22px;
}
.sbp-var--5:not(.sbp-med--m):not(.sbp-med--l) .sbp-menusec__group:first-child
.sbp-menusec__item:has(.sbp-menusec__thumb):not(:is(.sbp-menusec__item:has(.sbp-menusec__thumb) ~ .sbp-menusec__item)) .sbp-menusec__name {
font-size: 17.5px;
}
}
/* ── NEW M (old L anatomy) — the grand feature + three-across support ── */
.sbp-var--5.sbp-med--m .sbp-menusec__body { align-self: stretch; padding: 16px 19px 18px; }
.sbp-var--5.sbp-med--m .sbp-menusec__name { font-size: 17px; }
.sbp-var--5.sbp-med--m .sbp-menusec__desc { font-size: 14.5px; }
.sbp-var--5.sbp-med--m .sbp-menusec__price { font-size: 16px; }
.sbp-var--5.sbp-med--m .sbp-menusec__list { gap: 20px; }
.sbp-var--5.sbp-med--m .sbp-menusec__groupname { font-size: 13.5px; }
@container sbpmenu (min-width: 640px) {
.sbp-var--5.sbp-med--m .sbp-menusec__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container sbpmenu (min-width: 1020px) {
.sbp-var--5.sbp-med--m .sbp-menusec__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container sbpmenu (min-width: 760px) {
.sbp-var--5.sbp-med--m .sbp-menusec__group:first-child
.sbp-menusec__item:has(.sbp-menusec__thumb):not(:is(.sbp-menusec__item:has(.sbp-menusec__thumb) ~ .sbp-menusec__item)) {
grid-column: 1 / -1; flex-direction: row; align-items: stretch;
}
.sbp-var--5.sbp-med--m .sbp-menusec__group:first-child
.sbp-menusec__item:has(.sbp-menusec__thumb):not(:is(.sbp-menusec__item:has(.sbp-menusec__thumb) ~ .sbp-menusec__item)) .sbp-menusec__thumb {
flex: 0 0 44%; width: 44%; margin: 10px 0 10px 10px; aspect-ratio: auto; min-height: 230px;
}
.sbp-var--5.sbp-med--m .sbp-menusec__group:first-child
.sbp-menusec__item:has(.sbp-menusec__thumb):not(:is(.sbp-menusec__item:has(.sbp-menusec__thumb) ~ .sbp-menusec__item)) .sbp-menusec__body {
align-self: center; padding: 24px 28px;
}
.sbp-var--5.sbp-med--m .sbp-menusec__group:first-child
.sbp-menusec__item:has(.sbp-menusec__thumb):not(:is(.sbp-menusec__item:has(.sbp-menusec__thumb) ~ .sbp-menusec__item)) .sbp-menusec__name {
font-size: 19px;
}
.sbp-var--5.sbp-med--m .sbp-menusec__group:first-child
.sbp-menusec__item:has(.sbp-menusec__thumb):not(:is(.sbp-menusec__item:has(.sbp-menusec__thumb) ~ .sbp-menusec__item)) .sbp-menusec__desc {
font-size: 15px;
}
}
/* ── NEW L (old S anatomy) — the editorial banner + plate rail ── */
.sbp-var--5.sbp-med--l .sbp-menusec__list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.sbp-var--5.sbp-med--l .sbp-menusec__item { flex-direction: row; align-items: stretch; }
.sbp-var--5.sbp-med--l .sbp-menusec__thumb {
flex: 0 0 112px; order: 0;
width: 112px; height: auto; min-height: 0;
margin: 10px 0 10px 10px; aspect-ratio: 1 / 1; align-self: center;
object-fit: cover; border-radius: 12px;
}
.sbp-var--5.sbp-med--l .sbp-menusec__body { align-self: center; padding: 13px 16px 14px; }
.sbp-var--5.sbp-med--l .sbp-menusec__name { font-size: 16px; }
.sbp-var--5.sbp-med--l .sbp-menusec__desc { font-size: 13.5px; }
.sbp-var--5.sbp-med--l .sbp-menusec__price { font-size: 15px; }
@container sbpmenu (min-width: 640px) {
.sbp-var--5.sbp-med--l .sbp-menusec__group:first-child
.sbp-menusec__item:has(.sbp-menusec__thumb):not(:is(.sbp-menusec__item:has(.sbp-menusec__thumb) ~ .sbp-menusec__item)) {
flex-direction: column; align-items: stretch;
}
.sbp-var--5.sbp-med--l .sbp-menusec__group:first-child
.sbp-menusec__item:has(.sbp-menusec__thumb):not(:is(.sbp-menusec__item:has(.sbp-menusec__thumb) ~ .sbp-menusec__item)) .sbp-menusec__thumb {
flex: 0 0 auto; width: calc(100% - 20px); margin: 10px 10px 0;
aspect-ratio: 21 / 9; align-self: auto; min-height: 0;
}
.sbp-var--5.sbp-med--l .sbp-menusec__group:first-child
.sbp-menusec__item:has(.sbp-menusec__thumb):not(:is(.sbp-menusec__item:has(.sbp-menusec__thumb) ~ .sbp-menusec__item)) .sbp-menusec__body {
align-self: stretch; padding: 14px 17px 16px;
}
.sbp-var--5.sbp-med--l .sbp-menusec__group:first-child
.sbp-menusec__item:has(.sbp-menusec__thumb):not(:is(.sbp-menusec__item:has(.sbp-menusec__thumb) ~ .sbp-menusec__item)) .sbp-menusec__name {
font-size: 17.5px;
}
}
/* ═══ V6 CHEF'S NOTES — the annotated kitchen journal (v4 price track) ════
Serif italic headings under a short pen-stroke; each dish carries its
note as an ANNOTATION — indented with an accent rule at S; at M/L the
note sits in a margin column and every price rides ONE stable
max-content track at the body's right edge (the row dissolves with
display:contents), so no title, note, image or category can move a
price sideways. */
.sbp-var--6 .sbp-menu__dots { display: none; }
.sbp-var--6 .sbp-menusec__groups {
display: block; max-width: 680px; margin-inline: auto;
background: none; border: 0; box-shadow: none; padding: 0;
}
.sbp-var--6 .sbp-menusec__group { background: none; border: 0; box-shadow: none; padding: 0; }
.sbp-var--6 .sbp-menusec__group + .sbp-menusec__group { margin-top: clamp(30px, 4.4cqw, 48px); }
.sbp-var--6 .sbp-menusec__groupname {
display: block; background: none; border-bottom: 0; padding: 0;
font-family: Georgia, 'Times New Roman', serif;
font-style: italic; font-weight: 600; text-transform: none;
letter-spacing: .01em; font-size: 19px; color: var(--sbp-ink);
margin: 0 0 4px;
}
.sbp-var--6 .sbp-menusec__groupname::after {
content: ""; display: block; flex: none;
width: 56px; height: 2px; border-radius: 2px; margin: 9px 0 0;
background: color-mix(in srgb, var(--sbp-indicator, var(--sbp-org-display)) 55%, transparent);
}
.sbp-var--6 .sbp-menusec__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 18px; align-items: start; padding: 0; }
.sbp-var--6 .sbp-menusec__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 0; }
.sbp-var--6 .sbp-menusec__item + .sbp-menusec__item { border-top: 0; padding-top: 0; }
.sbp-var--6 .sbp-menusec__item:not(:has(.sbp-menusec__thumb)) { grid-template-columns: minmax(0, 1fr); }
.sbp-var--6 .sbp-menusec__thumb { flex: none; width: 60px; height: 60px; border-radius: 16px; margin-top: 3px; }
.sbp-var--6 .sbp-menusec__row {
display: grid; grid-template-columns: minmax(0, 1fr) auto;
column-gap: 20px; align-items: baseline;
}
.sbp-var--6 .sbp-menusec__name { font-size: 16.5px; }
.sbp-var--6 .sbp-menusec__price {
font-family: Georgia, 'Times New Roman', serif; font-style: italic;
font-weight: 600; font-size: 15.5px; letter-spacing: .02em;
}
.sbp-var--6 .sbp-menusec__desc {
font-family: Georgia, 'Times New Roman', serif; font-style: italic;
font-size: 14.5px; line-height: 1.62; max-width: 56ch;
margin-top: 7px; margin-left: 2px;
padding-left: 14px;
border-left: 2px solid color-mix(in srgb, var(--sbp-indicator, var(--sbp-org-display)) 34%, transparent);
}
.sbp-var--6 .sbp-menusec__written { max-width: 60ch; font-family: Georgia, 'Times New Roman', serif; font-style: italic; }
/* M — margin-note page on ONE shared price rail */
.sbp-var--6.sbp-med--m .sbp-menusec__groups { max-width: 860px; }
.sbp-var--6.sbp-med--m .sbp-menusec__thumb { width: 72px; height: 72px; }
.sbp-var--6.sbp-med--m .sbp-menusec__name { font-size: 17.5px; }
.sbp-var--6.sbp-med--m .sbp-menusec__desc { font-size: 15px; }
.sbp-var--6.sbp-med--m .sbp-menusec__price { font-size: 16px; }
.sbp-var--6.sbp-med--m .sbp-menusec__groupname { font-size: 20px; }
.sbp-var--6.sbp-med--m .sbp-menusec__list { gap: 24px; }
/* v5 surgical — the media track is part of the M grid even when a dish has
no photograph (no placeholder: reserved editorial space), and every row
centres image, title, note and price on one axis */
.sbp-var--6.sbp-med--m .sbp-menusec__item { grid-template-columns: 72px minmax(0, 1fr); align-items: center; }
.sbp-var--6.sbp-med--m .sbp-menusec__thumb { margin-top: 0; grid-column: 1; }
.sbp-var--6.sbp-med--m .sbp-menusec__body { grid-column: 2; }
/* L — richest journal page, same stable rail */
.sbp-var--6.sbp-med--l .sbp-menusec__groups { max-width: 940px; margin-inline: auto; }
.sbp-var--6.sbp-med--l .sbp-menusec__thumb { width: 84px; height: 84px; }
.sbp-var--6.sbp-med--l .sbp-menusec__name { font-size: 18.5px; }
.sbp-var--6.sbp-med--l .sbp-menusec__desc { font-size: 15.5px; line-height: 1.68; }
.sbp-var--6.sbp-med--l .sbp-menusec__price { font-size: 16.5px; }
.sbp-var--6.sbp-med--l .sbp-menusec__groupname { font-size: 22px; }
.sbp-var--6.sbp-med--l .sbp-menusec__groupname::after { width: 68px; }
.sbp-var--6.sbp-med--l .sbp-menusec__list { gap: 28px; margin-top: 22px; }
/* v5 surgical — same reserved-track + centring law at L */
.sbp-var--6.sbp-med--l .sbp-menusec__item { grid-template-columns: 84px minmax(0, 1fr); align-items: center; }
.sbp-var--6.sbp-med--l .sbp-menusec__thumb { margin-top: 0; grid-column: 1; }
.sbp-var--6.sbp-med--l .sbp-menusec__body { grid-column: 2; }
@container sbpmenu (min-width: 820px) {
.sbp-var--6.sbp-med--m .sbp-menusec__body,
.sbp-var--6.sbp-med--l .sbp-menusec__body {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(92px, max-content);
column-gap: clamp(24px, 3.2cqw, 44px);
align-items: center;
}
.sbp-var--6.sbp-med--m .sbp-menusec__row,
.sbp-var--6.sbp-med--l .sbp-menusec__row { display: contents; }
.sbp-var--6.sbp-med--m .sbp-menusec__name,
.sbp-var--6.sbp-med--l .sbp-menusec__name { grid-column: 1; grid-row: 1; }
.sbp-var--6.sbp-med--m .sbp-menusec__desc,
.sbp-var--6.sbp-med--l .sbp-menusec__desc { grid-column: 2; grid-row: 1; margin-top: 0; }
.sbp-var--6.sbp-med--m .sbp-menusec__price,
.sbp-var--6.sbp-med--l .sbp-menusec__price { grid-column: 3; grid-row: 1; text-align: right; }
}
/* ── editor-only: menu-item image capability disclosure (menu.php emits it
ONLY in edit mode, so draft preview and public page never see it) ── */
.sbp-menusec__manage {
margin-top: 20px; padding: 12px 16px;
display: flex; align-items: center; gap: 12px;
border: 1.5px dashed color-mix(in srgb, var(--sbp-acc) 34%, transparent);
border-radius: 12px;
background: color-mix(in srgb, var(--sbp-acc-soft) 45%, transparent);
font-size: 13.5px; line-height: 1.5; color: var(--sbp-mut);
}
.sbp-menusec__manage i { color: var(--sbp-acc); font-size: 16px; flex: 0 0 auto; }
.sbp-menusec__manage p { margin: 0; }
.sbp-menusec__manage a { font-weight: 700; color: var(--sbp-acc-ink); white-space: nowrap; }
/* ═══ V7 TARIFF BOARD — the coded ledger register ═════════════════════════
One disciplined register: roman section numerals, per-section item
codes, full-width hairline rules and a hard right price column.
No cards, no imagery — pure tabular confidence. */
.sbp-var--7 .sbp-menusec__thumb { display: none; }
.sbp-var--7 .sbp-menu__dots { display: none; }
.sbp-var--7 .sbp-menusec__groups {
counter-reset: sbp7sec;
display: block; max-width: 980px; margin-inline: auto;
background: none; border: 0; box-shadow: none; padding: 0;
margin-top: clamp(18px, 2.6cqw, 26px);
}
.sbp-var--7 .sbp-menusec__group {
counter-increment: sbp7sec; counter-reset: sbp7item;
background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0;
margin: 0;
}
.sbp-var--7 .sbp-menusec__group + .sbp-menusec__group { margin-top: clamp(26px, 3.6cqw, 40px); }
.sbp-var--7 .sbp-menusec__groupname {
display: flex; align-items: baseline; gap: 12px;
background: none; padding: 0 0 10px;
border-bottom: 2px solid color-mix(in srgb, var(--sbp-ink) 55%, var(--sbp-line));
font-size: 14px; letter-spacing: .15em; color: var(--sbp-ink);
margin: 0 0 2px;
}
.sbp-var--7 .sbp-menusec__groupname::before {
content: counter(sbp7sec, upper-roman) ".";
font-size: 13px; font-weight: 800; letter-spacing: .06em;
color: var(--sbp-indicator, var(--sbp-org-display));
font-variant-numeric: tabular-nums;
}
.sbp-var--7 .sbp-menusec__groupname::after { display: none; }
.sbp-var--7 .sbp-menusec__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; }
.sbp-var--7 .sbp-menusec__item {
counter-increment: sbp7item;
display: grid; grid-template-columns: auto minmax(0, 1fr);
column-gap: 16px; align-items: baseline;
padding-block: 10px;
}
.sbp-var--7 .sbp-menusec__item::before {
content: counter(sbp7item, decimal-leading-zero);
font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
color: var(--sbp-mut); font-variant-numeric: tabular-nums;
min-width: 22px;
}
.sbp-var--7 .sbp-menusec__item + .sbp-menusec__item { border-top: 1px solid var(--sbp-line); padding-top: 10px; }
.sbp-var--7 .sbp-menusec__row {
display: grid; grid-template-columns: minmax(0, 1fr) auto;
column-gap: 18px; align-items: baseline;
}
.sbp-var--7 .sbp-menusec__name { font-size: 14.5px; font-weight: 700; }
.sbp-var--7 .sbp-menusec__price { font-size: 15.5px; }
.sbp-var--7 .sbp-menusec__desc { font-size: 13.5px; line-height: 1.5; margin-top: 2px; max-width: 56ch; }
.sbp-tone--deep.sbp-var--7 .sbp-menusec__groupname { border-bottom-color: rgba(255, 255, 255, .4); }
.sbp-tone--deep.sbp-var--7 .sbp-menusec__item + .sbp-menusec__item { border-top-color: rgba(255, 255, 255, .14); }
/* M — the balanced tariff table */
.sbp-var--7.sbp-med--m .sbp-menusec__item { padding-block: 12px; }
.sbp-var--7.sbp-med--m .sbp-menusec__item + .sbp-menusec__item { padding-top: 12px; }
.sbp-var--7.sbp-med--m .sbp-menusec__name { font-size: 15.5px; }
.sbp-var--7.sbp-med--m .sbp-menusec__price { font-size: 16.5px; }
.sbp-var--7.sbp-med--m .sbp-menusec__desc { font-size: 13.5px; }
.sbp-var--7.sbp-med--m .sbp-menusec__groupname { font-size: 15px; padding-bottom: 12px; }
.sbp-var--7.sbp-med--m .sbp-menusec__groupname::before { font-size: 14px; }
.sbp-var--7.sbp-med--m .sbp-menusec__item::before { font-size: 12px; min-width: 25px; }
/* L — the complete ledger: deepest rules, grandest register */
.sbp-var--7.sbp-med--l .sbp-menusec__item { padding-block: 14px; column-gap: 20px; }
.sbp-var--7.sbp-med--l .sbp-menusec__item + .sbp-menusec__item { padding-top: 14px; }
.sbp-var--7.sbp-med--l .sbp-menusec__name { font-size: 16.5px; }
.sbp-var--7.sbp-med--l .sbp-menusec__price { font-size: 17.5px; }
.sbp-var--7.sbp-med--l .sbp-menusec__desc { font-size: 14px; }
.sbp-var--7.sbp-med--l .sbp-menusec__groupname {
font-size: 16px; letter-spacing: .18em; padding-bottom: 14px;
border-bottom-width: 3px; border-bottom-style: double;
}
.sbp-var--7.sbp-med--l .sbp-menusec__groupname::before { font-size: 15.5px; }
.sbp-var--7.sbp-med--l .sbp-menusec__item::before { font-size: 12.5px; min-width: 28px; }
.sbp-var--7.sbp-med--l .sbp-menusec__group + .sbp-menusec__group { margin-top: clamp(32px, 4.6cqw, 52px); }
/* long words can never push the page sideways in any composition */
.sbp-menusec__name, .sbp-menusec__desc, .sbp-menusec__groupname { overflow-wrap: break-word; }
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_RENTALS_PREMIUM_FAMILY v1 — seven hire-native compositions over the
vendor's real bookable_products (module_type=rental) records.
V1 Asset Cards · V2 Quick Hire List · V3 Featured + Fleet · V4 Spec
Comparator · V5 Rate Card · V6 Hire Catalogue · V7 Immersive Showcase.
LAWS OF THIS ZONE
· Scope: `.sbp-fam--rentals` is the section-type discriminator emitted by
_offerings.php — record_source reappropriation keeps this family's
composition, so nothing here may key on record kind.
· Composition responds to the REAL available width: `.sbp-sw` is an
inline-size container (`sbprent`) and every multi-column decision is an
@container query — the editor canvas, draft preview and public page
compose identically (the Menu-family canvas≠viewport law).
· S is implicit (no .sbp-med--* class); M/L are additive recompositions.
· DIAL RE-ASSERTION LAW: the PM_FINAL v1.9/v2.0 generic dial rules reach
(0,6,0)+ specificity via :has()/:not(:has()) — any card-level layout this
family needs at M/L is therefore re-asserted through BOTH image-state
qualifiers (`:has(> .sbp-shopcard__zone--media.is-empty)` and its :not),
which lands at (0,7,0) and wins without a single !important.
· The hire rate is the SEAT (`.sbp-shopcard__price--seat`, renderer
contract) with its truthful `.sbp-shopcard__unit`; the in-image badge
never renders for this family.
· Imageless records collapse honestly: media hidden in typographic
variants, the designed placeholder strip elsewhere — never a blank pane.
═══════════════════════════════════════════════════════════════════════════ */
/* ── FAMILY FOUNDATIONS (all variants) ─────────────────────────────────── */
.sbp-fam--rentals .sbp-sw { container: sbprent / inline-size; }
.sbp-fam--rentals .sbp-shopcard,
.sbp-fam--rentals .sbp-shopcard * { min-width: 0; }
.sbp-fam--rentals .sbp-shopcard__t,
.sbp-fam--rentals .sbp-shopcard__d,
.sbp-fam--rentals .sbp-shopcard__meta { overflow-wrap: break-word; }
.sbp-fam--rentals .sbp-shopcard:focus-visible { outline: 3px solid var(--sbp-focus, var(--sbp-acc)); outline-offset: -3px; }
/* the rate seat: in-flow typography, never the floating photo badge */
.sbp-fam--rentals .sbp-shopcard__price--seat {
position: static; padding: 0; border-radius: 0; background: transparent; box-shadow: none;
color: var(--sbp-acc-ink); font-weight: 800; font-size: 15px; line-height: 1.25;
}
.sbp-fam--rentals .sbp-shopcard__unit {
font-size: .72em; font-weight: 650; letter-spacing: .04em; color: var(--sbp-mut);
}
/* unavailable states keep their voice as quiet type, not a pill */
.sbp-fam--rentals .sbp-shopcard__price--seat.sbp-shopcard__price--sold-out,
.sbp-fam--rentals .sbp-shopcard__price--seat.sbp-shopcard__price--unavailable { color: var(--sbp-mut); }
/* description: the record's own words, quiet and clamped by default */
.sbp-fam--rentals .sbp-shopcard__d {
margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--sbp-mut); white-space: pre-line;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
/* meta = the hire location, small-caps register; empty meta leaves no hole */
.sbp-fam--rentals .sbp-shopcard__meta { text-transform: uppercase; letter-spacing: .07em; font-size: 11.5px; }
.sbp-fam--rentals .sbp-shopcard__meta:empty { display: none; min-height: 0; }
/* solo-record invite panel joins the family's tone */
.sbp-fam--rentals .sbp-shopinvite {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
padding: 26px; text-align: center; color: var(--sbp-mut);
border: 1.5px dashed color-mix(in srgb, var(--sbp-acc) 34%, transparent);
border-radius: var(--sbp-r-lg); background: color-mix(in srgb, var(--sbp-acc-soft) 40%, transparent);
}
.sbp-fam--rentals .sbp-shopinvite__icon { font-size: 22px; color: var(--sbp-acc); }
/* editor-only capability disclosure (menu-strip recipe) */
.sbp-fam--rentals .sbp-shop__manage {
margin-top: 20px; padding: 12px 16px;
display: flex; align-items: center; gap: 12px;
border: 1.5px dashed color-mix(in srgb, var(--sbp-acc) 34%, transparent);
border-radius: 12px;
background: color-mix(in srgb, var(--sbp-acc-soft) 45%, transparent);
font-size: 13.5px; line-height: 1.5; color: var(--sbp-mut);
}
.sbp-fam--rentals .sbp-shop__manage i { color: var(--sbp-acc); font-size: 16px; flex: 0 0 auto; }
.sbp-fam--rentals .sbp-shop__manage p { margin: 0; }
.sbp-fam--rentals .sbp-shop__manage a { font-weight: 700; color: var(--sbp-acc-ink); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
.sbp-fam--rentals .sbp-shopcard, .sbp-fam--rentals .sbp-shopcard * { transition: none; }
}
/* ═══ V1 ASSET CARDS — rentable-item cards with compact specifications ════
Media plate on top, rate seated under it, title · location · description ·
Reserve. S three-up compact · M two-up substantial · L two-up expansive. */
.sbp-var--1 .sbp-fam--rentals .sbp-shop__rail,
.sbp-var--1 .sbp-fam--rentals .sbp-shop__rail--2,
.sbp-var--1 .sbp-fam--rentals .sbp-shop__rail--1,
.sbp-var--1 .sbp-fam--rentals .sbp-shop__rail--solo {
display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch;
}
@container sbprent (min-width: 640px) {
.sbp-var--1 .sbp-fam--rentals .sbp-shop__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container sbprent (min-width: 1000px) {
.sbp-var--1 .sbp-fam--rentals .sbp-shop__rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sbp-var--1 .sbp-fam--rentals .sbp-shopcard__img { aspect-ratio: 4 / 3; max-height: 200px; }
.sbp-var--1 .sbp-fam--rentals .sbp-shopcard__price--seat { margin: 12px 17px 0; }
.sbp-var--1 .sbp-fam--rentals .sbp-shopcard__img.is-empty + .sbp-shopcard__price--seat { margin-top: 14px; }
/* M — two-up, deeper media, fuller description */
.sbp-med--m.sbp-var--1 .sbp-fam--rentals .sbp-shop__rail { gap: 20px; }
.sbp-med--m.sbp-var--1 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--m.sbp-var--1 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: flex; flex-direction: column; grid-template-columns: none;
}
.sbp-med--m.sbp-var--1 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__img.is-empty { height: auto; min-height: 96px; max-height: 96px; aspect-ratio: auto; }
@container sbprent (min-width: 1000px) {
.sbp-med--m.sbp-var--1 .sbp-fam--rentals .sbp-shop__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sbp-med--m.sbp-var--1 .sbp-fam--rentals .sbp-shopcard__img { max-height: 300px; min-height: 220px; }
.sbp-med--m.sbp-var--1 .sbp-fam--rentals .sbp-shopcard__body { padding: 18px 20px 19px; gap: 6px; }
.sbp-med--m.sbp-var--1 .sbp-fam--rentals .sbp-shopcard__t { font-size: 18px; }
.sbp-med--m.sbp-var--1 .sbp-fam--rentals .sbp-shopcard__d { -webkit-line-clamp: 3; font-size: 14px; }
.sbp-med--m.sbp-var--1 .sbp-fam--rentals .sbp-shopcard__price--seat { font-size: 16.5px; margin: 14px 20px 0; }
/* L — expansive two-up: tall plates, generous body, full spec read */
.sbp-med--l.sbp-var--1 .sbp-fam--rentals .sbp-shop__rail,
.sbp-med--l.sbp-var--1 .sbp-fam--rentals .sbp-shop__rail--2,
.sbp-med--l.sbp-var--1 .sbp-fam--rentals .sbp-shop__rail--1 { grid-template-columns: minmax(0, 1fr); gap: 26px; }
@container sbprent (min-width: 860px) {
.sbp-med--l.sbp-var--1 .sbp-fam--rentals .sbp-shop__rail,
.sbp-med--l.sbp-var--1 .sbp-fam--rentals .sbp-shop__rail--2,
.sbp-med--l.sbp-var--1 .sbp-fam--rentals .sbp-shop__rail--1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sbp-med--l.sbp-var--1 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--l.sbp-var--1 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: flex; flex-direction: column; grid-template-columns: none;
}
.sbp-med--l.sbp-var--1 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__img { height: auto; aspect-ratio: 16 / 10; max-height: 380px; min-height: 260px; }
.sbp-med--l.sbp-var--1 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__img.is-empty { height: auto; min-height: 110px; max-height: 110px; aspect-ratio: auto; }
.sbp-med--l.sbp-var--1 .sbp-fam--rentals .sbp-shopcard__body { padding: 22px 24px 23px; gap: 8px; }
.sbp-med--l.sbp-var--1 .sbp-fam--rentals .sbp-shopcard__t { font-size: 20px; }
.sbp-med--l.sbp-var--1 .sbp-fam--rentals .sbp-shopcard__d { -webkit-line-clamp: 4; font-size: 14.5px; }
.sbp-med--l.sbp-var--1 .sbp-fam--rentals .sbp-shopcard__price--seat { font-size: 18px; margin: 16px 24px 0; }
/* ═══ V2 QUICK HIRE LIST — fast scanning, immediate rate information ══════
A quiet ledger: no card chrome, hairline rows, name + location left, the
rate holding a hard right rail. S text-only · M adds a 64px plate · L an
88px plate and the description line. */
.sbp-var--2 .sbp-fam--rentals .sbp-shop__rail,
.sbp-var--2 .sbp-fam--rentals .sbp-shop__rail--2,
.sbp-var--2 .sbp-fam--rentals .sbp-shop__rail--1,
.sbp-var--2 .sbp-fam--rentals .sbp-shop__rail--solo {
display: block; max-width: 760px; margin-inline: auto;
}
.sbp-var--2 .sbp-fam--rentals .sbp-shopcard {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(88px, max-content);
align-items: center; column-gap: 18px; row-gap: 2px;
background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
border-top: 1px solid var(--sbp-line); padding: 14px 2px;
border-left: 0;
}
.sbp-var--2 .sbp-fam--rentals .sbp-shopcard:hover { border-left: 0; }
.sbp-var--2 .sbp-fam--rentals .sbp-shopcard:last-child { border-bottom: 1px solid var(--sbp-line); }
.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__img { display: none; }
.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__body { display: contents; }
.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__t { grid-column: 1; font-size: 15.5px; letter-spacing: -.01em; }
.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__d { display: none; }
.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__meta { grid-column: 1; }
.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__price--seat {
grid-column: 2; grid-row: 1; justify-self: end; text-align: right; font-size: 15.5px;
}
.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__unit { display: block; font-size: 11px; }
.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__zone--action { grid-column: 2; grid-row: 2; justify-self: end; margin: 0; padding: 0; min-height: 0; }
.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__go { font-size: 12.5px; }
.sbp-var--2 .sbp-fam--rentals .sbp-shopcard:hover .sbp-shopcard__t { color: var(--sbp-acc-ink); }
/* M — a small plate joins the row */
.sbp-med--m.sbp-var--2 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--m.sbp-var--2 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(92px, max-content);
align-items: center; column-gap: 16px; padding: 14px 2px;
}
.sbp-med--m.sbp-var--2 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__img {
display: block; grid-column: 1; grid-row: 1 / span 2; align-self: center;
width: 64px; height: 64px; min-height: 0; max-height: none; aspect-ratio: 1 / 1;
border-radius: 12px;
}
.sbp-med--m.sbp-var--2 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__img.is-empty { display: none; }
.sbp-med--m.sbp-var--2 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__t,
.sbp-med--m.sbp-var--2 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__meta { grid-column: 1 / 3; }
.sbp-med--m.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__t { grid-column: 2; font-size: 16.5px; }
.sbp-med--m.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__meta { grid-column: 2; }
.sbp-med--m.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__price--seat { grid-column: 3; font-size: 16.5px; }
.sbp-med--m.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__zone--action { grid-column: 3; }
/* L — a real plate and the description line joins */
.sbp-med--l.sbp-var--2 .sbp-fam--rentals .sbp-shop__rail,
.sbp-med--l.sbp-var--2 .sbp-fam--rentals .sbp-shop__rail--2,
.sbp-med--l.sbp-var--2 .sbp-fam--rentals .sbp-shop__rail--1 { display: block; max-width: 820px; }
.sbp-med--l.sbp-var--2 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--l.sbp-var--2 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: grid; grid-template-columns: 88px minmax(0, 1fr) minmax(96px, max-content);
align-items: center; column-gap: 18px; padding: 18px 2px;
}
.sbp-med--l.sbp-var--2 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__img {
display: block; grid-column: 1; grid-row: 1 / span 3; align-self: center;
width: 88px; height: 88px; min-height: 0; max-height: none; aspect-ratio: 1 / 1;
border-radius: 14px;
}
.sbp-med--l.sbp-var--2 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__img.is-empty { display: none; }
.sbp-med--l.sbp-var--2 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__t,
.sbp-med--l.sbp-var--2 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__d,
.sbp-med--l.sbp-var--2 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__meta { grid-column: 1 / 3; }
.sbp-med--l.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__t { grid-column: 2; font-size: 17.5px; }
.sbp-med--l.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__d { display: -webkit-box; grid-column: 2; -webkit-line-clamp: 2; }
.sbp-med--l.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__meta { grid-column: 2; }
.sbp-med--l.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__price--seat { grid-column: 3; grid-row: 1; justify-self: end; font-size: 18px; }
.sbp-med--l.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__zone--action { grid-column: 3; grid-row: 2 / span 2; justify-self: end; align-self: start; }
/* ═══ V3 FEATURED RENTAL + FLEET — one hero, supporting inventory ═════════
The first record (the manager's featured sort) leads as a split hero; the
rest form a compact fleet. S stacked hero + fleet list · M split hero +
two-up fleet · L deep hero + three-up fleet. */
.sbp-var--3 .sbp-fam--rentals .sbp-shop__rail,
.sbp-var--3 .sbp-fam--rentals .sbp-shop__rail--2,
.sbp-var--3 .sbp-fam--rentals .sbp-shop__rail--1,
.sbp-var--3 .sbp-fam--rentals .sbp-shop__rail--solo {
display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch;
}
@container sbprent (min-width: 560px) {
.sbp-var--3 .sbp-fam--rentals .sbp-shop__rail,
.sbp-var--3 .sbp-fam--rentals .sbp-shop__rail--2,
.sbp-var--3 .sbp-fam--rentals .sbp-shop__rail--1,
.sbp-var--3 .sbp-fam--rentals .sbp-shop__rail--solo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child { grid-column: 1 / -1; }
/* the fleet never inherits the generic "unpaired last card becomes a hero" */
.sbp-var--3 .sbp-fam--rentals .sbp-shop__rail .sbp-shopcard:last-child:nth-child(even) { grid-column: auto; }
.sbp-var--3 .sbp-fam--rentals .sbp-shop__rail .sbp-shopcard:last-child:nth-child(even) .sbp-shopcard__img { min-height: 0; }
/* hero anatomy */
.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child .sbp-shopcard__img { aspect-ratio: 16 / 9; max-height: 300px; }
.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child .sbp-shopcard__t { font-size: 19px; }
.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child .sbp-shopcard__d { -webkit-line-clamp: 3; }
.sbp-var--3 .sbp-fam--rentals .sbp-shopcard__price--seat { margin: 12px 17px 0; }
/* fleet anatomy: compact, no description */
.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:not(:first-child) .sbp-shopcard__img { aspect-ratio: 5 / 3; max-height: 130px; }
.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:not(:first-child) .sbp-shopcard__t { font-size: 14.5px; }
.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:not(:first-child) .sbp-shopcard__d { display: none; }
.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:not(:first-child) .sbp-shopcard__price--seat { font-size: 13.5px; margin: 10px 15px 0; }
.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:not(:first-child) .sbp-shopcard__body { padding: 12px 15px 13px; }
@container sbprent (min-width: 780px) {
.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child {
display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch;
}
.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child .sbp-shopcard__img {
grid-row: 1 / span 2; height: 100%; max-height: none; aspect-ratio: auto; min-height: 280px;
}
.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child .sbp-shopcard__img.is-empty { min-height: 220px; }
.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child .sbp-shopcard__price--seat { grid-column: 2; margin: 16px 20px 0; }
.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child .sbp-shopcard__body { grid-column: 2; padding: 10px 20px 18px; }
}
@container sbprent (min-width: 900px) {
.sbp-var--3 .sbp-fam--rentals .sbp-shop__rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child { grid-column: 1 / -1; }
}
/* M — hero deepens, fleet keeps pace */
.sbp-med--m.sbp-var--3 .sbp-fam--rentals .sbp-shop__rail { gap: 18px; }
.sbp-med--m.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--m.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child:not(:has(> .sbp-shopcard__zone--media.is-empty)) { display: flex; flex-direction: column; grid-template-columns: none; }
@container sbprent (min-width: 780px) {
.sbp-med--m.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--m.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: stretch;
}
.sbp-med--m.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__img { grid-row: 1 / span 2; height: 100%; max-height: none; aspect-ratio: auto; min-height: 340px; }
.sbp-med--m.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__img.is-empty { grid-row: 1 / span 2; height: 100%; max-height: none; aspect-ratio: auto; min-height: 240px; }
}
.sbp-med--m.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child .sbp-shopcard__t { font-size: 21px; }
.sbp-med--m.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child .sbp-shopcard__d { -webkit-line-clamp: 4; font-size: 14.5px; }
.sbp-med--m.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:not(:first-child) .sbp-shopcard__img { aspect-ratio: 4 / 3; max-height: 170px; min-height: 0; }
.sbp-med--m.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:not(:first-child):has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--m.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:not(:first-child):not(:has(> .sbp-shopcard__zone--media.is-empty)) { display: flex; flex-direction: column; grid-template-columns: none; }
.sbp-med--m.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__img.is-empty { height: auto; min-height: 96px; max-height: 96px; aspect-ratio: auto; }
/* L — a stage hero and a three-up fleet */
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shop__rail,
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shop__rail--2,
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shop__rail--1 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@container sbprent (min-width: 860px) {
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shop__rail,
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shop__rail--2,
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shop__rail--1 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child { grid-column: 1 / -1; }
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child:not(:has(> .sbp-shopcard__zone--media.is-empty)) { display: flex; flex-direction: column; grid-template-columns: none; }
/* narrow-container L: the generic v2.0 img un-capping (height:100%/max none)
must not reach the stacked hero — explicit aspect cap until the split fires */
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__img { height: auto; aspect-ratio: 16 / 9; max-height: 340px; min-height: 0; }
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__img.is-empty { height: auto; aspect-ratio: auto; max-height: 110px; min-height: 110px; }
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:not(:first-child):not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__img { height: auto; aspect-ratio: 4 / 3; max-height: 200px; min-height: 0; }
@container sbprent (min-width: 780px) {
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: stretch;
}
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__img { grid-row: 1 / span 2; height: 100%; max-height: none; aspect-ratio: auto; min-height: 420px; }
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__img.is-empty { grid-row: 1 / span 2; height: 100%; max-height: none; aspect-ratio: auto; min-height: 260px; }
}
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child .sbp-shopcard__t { font-size: 23px; }
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child .sbp-shopcard__d { -webkit-line-clamp: 5; font-size: 15px; }
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:first-child .sbp-shopcard__price--seat { font-size: 19px; }
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:not(:first-child):has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:not(:first-child):not(:has(> .sbp-shopcard__zone--media.is-empty)) { display: flex; flex-direction: column; grid-template-columns: none; }
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:not(:first-child) .sbp-shopcard__img { aspect-ratio: 4 / 3; max-height: 200px; min-height: 0; }
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__img.is-empty { height: auto; min-height: 96px; max-height: 96px; aspect-ratio: auto; }
/* ═══ V4 SPEC COMPARATOR — structured comparison without fake fields ══════
Side-by-side columns sharing aligned rows (subgrid where supported): name,
rate, location, the record's own description, action. Only fields the
record actually carries render; absent ones collapse. S typographic sheet ·
M adds a media strip · L widens the read. */
.sbp-var--4 .sbp-fam--rentals .sbp-shop__head { border-bottom: 3px double var(--sbp-line); padding-bottom: 14px; }
/* Comparator columns are CARDINALITY-DRIVEN (photos-adaptive precedent): the
record count decides the template so a lone orphan column can never dangle.
2→2 · 3→3 · 4→2×2 · 5/6→3. One template band at mid widths, mobile stacks. */
.sbp-var--4 .sbp-fam--rentals .sbp-shop__rail,
.sbp-var--4 .sbp-fam--rentals .sbp-shop__rail--2,
.sbp-var--4 .sbp-fam--rentals .sbp-shop__rail--1,
.sbp-var--4 .sbp-fam--rentals .sbp-shop__rail--solo {
display: grid; grid-template-columns: minmax(0, 1fr);
grid-auto-rows: auto; gap: 0; align-items: stretch;
}
@container sbprent (min-width: 480px) {
.sbp-var--4 .sbp-fam--rentals .sbp-shop__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container sbprent (min-width: 760px) {
.sbp-var--4 .sbp-fam--rentals .sbp-shop__rail:has(> .sbp-shopcard:nth-child(3):last-child),
.sbp-var--4 .sbp-fam--rentals .sbp-shop__rail:has(> .sbp-shopcard:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sbp-var--4 .sbp-fam--rentals .sbp-shopcard {
display: grid; grid-template-rows: subgrid; grid-row: span 5;
row-gap: 0; align-content: start;
background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
border-left: 1px solid var(--sbp-line); padding: 4px 16px 12px;
}
.sbp-var--4 .sbp-fam--rentals .sbp-shopcard:first-child { border-left: 0; padding-left: 2px; }
.sbp-var--4 .sbp-fam--rentals .sbp-shopcard__img { display: none; }
.sbp-var--4 .sbp-fam--rentals .sbp-shopcard__body { display: contents; }
.sbp-var--4 .sbp-fam--rentals .sbp-shopcard__t { grid-row: 1; font-size: 15px; padding-bottom: 8px; }
.sbp-var--4 .sbp-fam--rentals .sbp-shopcard__price--seat {
grid-row: 2; font-size: 17px; padding: 8px 0;
border-top: 1px solid var(--sbp-line);
}
.sbp-var--4 .sbp-fam--rentals .sbp-shopcard__unit { display: inline; }
.sbp-var--4 .sbp-fam--rentals .sbp-shopcard__meta { grid-row: 3; padding: 8px 0; border-top: 1px solid var(--sbp-line); }
.sbp-var--4 .sbp-fam--rentals .sbp-shopcard__meta:empty { display: block; min-height: 0; padding: 0; border-top: 0; }
.sbp-var--4 .sbp-fam--rentals .sbp-shopcard__d {
grid-row: 4; display: -webkit-box; -webkit-line-clamp: 4; font-size: 12.5px;
padding: 8px 0; border-top: 1px solid var(--sbp-line);
}
.sbp-var--4 .sbp-fam--rentals .sbp-shopcard__zone--action { grid-row: 5; margin-top: 0; padding-top: 10px; align-self: end; }
/* M — the compared items regain their faces: a plate row above each column */
.sbp-med--m.sbp-var--4 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--m.sbp-var--4 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: grid; grid-template-rows: subgrid; grid-row: span 6; grid-template-columns: none; align-content: start;
}
.sbp-med--m.sbp-var--4 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__img {
display: block; grid-row: 1; height: auto; aspect-ratio: 16 / 10; min-height: 0; max-height: 140px;
border-radius: 12px; margin-bottom: 10px;
}
.sbp-med--m.sbp-var--4 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__img.is-empty {
display: block; grid-row: 1; height: auto; aspect-ratio: 16 / 10; min-height: 0; max-height: 140px;
border-radius: 12px; margin-bottom: 10px;
}
.sbp-med--m.sbp-var--4 .sbp-fam--rentals .sbp-shopcard__t { grid-row: 2; font-size: 16px; }
.sbp-med--m.sbp-var--4 .sbp-fam--rentals .sbp-shopcard__price--seat { grid-row: 3; font-size: 18px; }
.sbp-med--m.sbp-var--4 .sbp-fam--rentals .sbp-shopcard__meta { grid-row: 4; }
.sbp-med--m.sbp-var--4 .sbp-fam--rentals .sbp-shopcard__d { grid-row: 5; -webkit-line-clamp: 5; font-size: 13px; }
.sbp-med--m.sbp-var--4 .sbp-fam--rentals .sbp-shopcard__zone--action { grid-row: 6; }
/* L — wider columns, the full specification breathes */
/* L keeps the same cardinality templates (inherited); only the read deepens */
.sbp-med--l.sbp-var--4 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--l.sbp-var--4 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: grid; grid-template-rows: subgrid; grid-row: span 6; grid-template-columns: none; align-content: start; padding: 4px 20px 16px;
}
.sbp-med--l.sbp-var--4 .sbp-fam--rentals .sbp-shopcard:first-child { padding-left: 2px; }
.sbp-med--l.sbp-var--4 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__img {
display: block; grid-row: 1; height: auto; aspect-ratio: 4 / 3; min-height: 0; max-height: 190px;
border-radius: 12px; margin-bottom: 12px;
}
.sbp-med--l.sbp-var--4 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__img.is-empty {
display: block; grid-row: 1; height: auto; aspect-ratio: 4 / 3; min-height: 0; max-height: 190px;
border-radius: 12px; margin-bottom: 12px;
}
.sbp-med--l.sbp-var--4 .sbp-fam--rentals .sbp-shopcard__t { grid-row: 2; font-size: 17.5px; }
.sbp-med--l.sbp-var--4 .sbp-fam--rentals .sbp-shopcard__price--seat { grid-row: 3; font-size: 20px; }
.sbp-med--l.sbp-var--4 .sbp-fam--rentals .sbp-shopcard__meta { grid-row: 4; }
.sbp-med--l.sbp-var--4 .sbp-fam--rentals .sbp-shopcard__d { grid-row: 5; -webkit-line-clamp: unset; display: block; font-size: 13.5px; }
.sbp-med--l.sbp-var--4 .sbp-fam--rentals .sbp-shopcard__zone--action { grid-row: 6; }
/* ═══ V5 RATE CARD — pricing-structure-led bands ══════════════════════════
(Renamed from "Availability Timeline": rental records carry no availability
dates — a timeline would fabricate data.) Every item is a full-width band
led by its rate block; the tinted rate panel carries price + unit as the
biggest type in the row. S compact bands · M roomier + plate · L deep
bands with a full media column. */
.sbp-var--5 .sbp-fam--rentals .sbp-shop__head .sbp-h2 { font-size: calc(clamp(25px, 2.7vw, 36px) * var(--sbp-type-scale, 1)); }
.sbp-var--5 .sbp-fam--rentals .sbp-shop__rail,
.sbp-var--5 .sbp-fam--rentals .sbp-shop__rail--2,
.sbp-var--5 .sbp-fam--rentals .sbp-shop__rail--1,
.sbp-var--5 .sbp-fam--rentals .sbp-shop__rail--solo {
display: flex; flex-direction: column; gap: 12px; max-width: 880px; margin-inline: auto;
}
.sbp-var--5 .sbp-fam--rentals .sbp-shopcard {
display: grid; grid-template-columns: clamp(96px, 18cqw, 150px) minmax(0, 1fr);
align-items: center; column-gap: clamp(14px, 3cqw, 26px);
border: 1px solid var(--sbp-line); border-radius: var(--sbp-r-lg); background: var(--sbp-card);
padding: 14px clamp(14px, 2.5cqw, 22px);
overflow: hidden;
}
.sbp-var--5 .sbp-fam--rentals .sbp-shopcard__img { display: none; }
.sbp-var--5 .sbp-fam--rentals .sbp-shopcard__price--seat {
grid-column: 1; grid-row: 1 / span 2; align-self: center; justify-self: stretch;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
text-align: center; padding: 12px 8px; border-radius: 12px;
background: color-mix(in srgb, var(--sbp-acc-soft) 60%, transparent);
font-size: 19px; line-height: 1.1;
}
.sbp-var--5 .sbp-fam--rentals .sbp-shopcard__unit { display: block; font-size: 10.5px; }
.sbp-var--5 .sbp-fam--rentals .sbp-shopcard__body { display: contents; }
.sbp-var--5 .sbp-fam--rentals .sbp-shopcard__t { grid-column: 2; grid-row: 1; font-size: 16px; align-self: end; }
.sbp-var--5 .sbp-fam--rentals .sbp-shopcard__meta { grid-column: 2; align-self: start; }
.sbp-var--5 .sbp-fam--rentals .sbp-shopcard__d { display: none; }
.sbp-var--5 .sbp-fam--rentals .sbp-shopcard__zone--action { grid-column: 2; margin: 0; padding: 0; min-height: 0; }
.sbp-var--5 .sbp-fam--rentals .sbp-shopcard__go { font-size: 12.5px; }
/* M — bands breathe, the description joins, a plate closes the row */
.sbp-med--m.sbp-var--5 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) {
display: grid; grid-template-columns: clamp(110px, 18cqw, 170px) minmax(0, 1fr); align-items: center; padding: 18px clamp(16px, 2.5cqw, 26px);
}
.sbp-med--m.sbp-var--5 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: grid; grid-template-columns: clamp(110px, 18cqw, 170px) minmax(0, 1fr) 128px; align-items: center; padding: 18px clamp(16px, 2.5cqw, 26px);
}
.sbp-med--m.sbp-var--5 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__img {
display: block; grid-column: 3; grid-row: 1 / span 3; align-self: center;
width: 128px; height: 96px; min-height: 0; max-height: none; aspect-ratio: auto; border-radius: 12px;
}
.sbp-med--m.sbp-var--5 .sbp-fam--rentals .sbp-shopcard__price--seat { grid-row: 1 / span 3; font-size: 22px; padding: 16px 10px; }
.sbp-med--m.sbp-var--5 .sbp-fam--rentals .sbp-shopcard__t { font-size: 17.5px; }
.sbp-med--m.sbp-var--5 .sbp-fam--rentals .sbp-shopcard__d { display: -webkit-box; grid-column: 2; -webkit-line-clamp: 2; font-size: 13.5px; }
/* L — deep bands: the rate panel becomes a monument, media a full column */
.sbp-med--l.sbp-var--5 .sbp-fam--rentals .sbp-shop__rail,
.sbp-med--l.sbp-var--5 .sbp-fam--rentals .sbp-shop__rail--2,
.sbp-med--l.sbp-var--5 .sbp-fam--rentals .sbp-shop__rail--1 { display: flex; flex-direction: column; gap: 18px; max-width: 980px; }
.sbp-med--l.sbp-var--5 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) {
display: grid; grid-template-columns: clamp(130px, 20cqw, 200px) minmax(0, 1fr); align-items: center; padding: 24px clamp(18px, 3cqw, 30px);
}
.sbp-med--l.sbp-var--5 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: grid; grid-template-columns: clamp(130px, 20cqw, 200px) minmax(0, 1fr) clamp(160px, 24cqw, 240px);
align-items: stretch; padding: 0; column-gap: 0;
}
.sbp-med--l.sbp-var--5 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__price--seat { margin: 24px 0 24px clamp(18px, 3cqw, 30px); }
.sbp-med--l.sbp-var--5 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__t { margin-top: 24px; }
.sbp-med--l.sbp-var--5 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__zone--action { margin-bottom: 24px; }
.sbp-med--l.sbp-var--5 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__img {
display: block; grid-column: 3; grid-row: 1 / span 4; height: 100%; min-height: 170px; max-height: none; aspect-ratio: auto; border-radius: 0;
}
.sbp-med--l.sbp-var--5 .sbp-fam--rentals .sbp-shopcard__price--seat { grid-row: 1 / span 3; font-size: 26px; padding: 20px 12px; }
.sbp-med--l.sbp-var--5 .sbp-fam--rentals .sbp-shopcard__unit { font-size: 11.5px; }
.sbp-med--l.sbp-var--5 .sbp-fam--rentals .sbp-shopcard__t { font-size: 19px; }
.sbp-med--l.sbp-var--5 .sbp-fam--rentals .sbp-shopcard__d { display: -webkit-box; grid-column: 2; -webkit-line-clamp: 3; font-size: 14px; }
.sbp-med--l.sbp-var--5 .sbp-fam--rentals .sbp-shopcard__body { display: contents; }
@container sbprent (max-width: 560px) {
.sbp-var--5 .sbp-fam--rentals .sbp-shopcard,
.sbp-med--m.sbp-var--5 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--m.sbp-var--5 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)),
.sbp-med--l.sbp-var--5 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--l.sbp-var--5 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 16px;
}
.sbp-var--5 .sbp-fam--rentals .sbp-shopcard__price--seat { align-self: flex-start; flex-direction: row; align-items: baseline; gap: 6px; padding: 8px 12px; margin: 0; }
.sbp-med--l.sbp-var--5 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__img { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; }
.sbp-med--l.sbp-var--5 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__t,
.sbp-med--l.sbp-var--5 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__zone--action { margin: 0; }
}
/* ═══ V6 HIRE CATALOGUE — magazine-like descriptions and imagery ══════════
An editorial read: alternating media/text spreads for photographed items,
full-measure ruled entries for the rest. The description is the point.
S stacked spreads · M alternating 45/55 · L 42/58 with an unclamped read. */
.sbp-var--6 .sbp-fam--rentals .sbp-shop__head { display: block; text-align: center; max-width: 640px; margin-inline: auto; }
.sbp-var--6 .sbp-fam--rentals .sbp-shop__head .sbp-kicker { justify-content: center; }
.sbp-var--6 .sbp-fam--rentals .sbp-shop__head .sbp-shop__intro { margin-inline: auto; }
.sbp-var--6 .sbp-fam--rentals .sbp-shop__rail,
.sbp-var--6 .sbp-fam--rentals .sbp-shop__rail--2,
.sbp-var--6 .sbp-fam--rentals .sbp-shop__rail--1,
.sbp-var--6 .sbp-fam--rentals .sbp-shop__rail--solo {
display: flex; flex-direction: column; gap: clamp(26px, 5cqw, 44px); max-width: 880px; margin-inline: auto;
}
.sbp-var--6 .sbp-fam--rentals .sbp-shopcard {
display: flex; flex-direction: column; gap: 0;
background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
border-top: 1px solid var(--sbp-line); padding-top: clamp(22px, 4cqw, 34px);
}
.sbp-var--6 .sbp-fam--rentals .sbp-shopcard:first-child { border-top: 0; padding-top: 0; }
.sbp-var--6 .sbp-fam--rentals .sbp-shopcard__img {
height: auto; aspect-ratio: 16 / 9; max-height: 320px; border-radius: var(--sbp-r-lg); margin-bottom: 16px;
}
.sbp-var--6 .sbp-fam--rentals .sbp-shopcard__img.is-empty { display: none; }
.sbp-var--6 .sbp-fam--rentals .sbp-shopcard__body { padding: 0; }
.sbp-var--6 .sbp-fam--rentals .sbp-shopcard__t { font-size: 20px; letter-spacing: -.015em; }
.sbp-var--6 .sbp-fam--rentals .sbp-shopcard__meta { order: -1; margin-bottom: 2px; }
.sbp-var--6 .sbp-fam--rentals .sbp-shopcard__d {
display: -webkit-box; -webkit-line-clamp: 4; font-size: 14.5px; line-height: 1.65; max-width: 62ch; margin-top: 6px;
color: var(--sbp-ink);
}
.sbp-var--6 .sbp-fam--rentals .sbp-shopcard__price--seat { order: 3; margin-top: 10px; font-size: 15.5px; }
.sbp-var--6 .sbp-fam--rentals .sbp-shopcard__zone--action { padding-top: 8px; min-height: 0; }
@container sbprent (min-width: 760px) {
.sbp-var--6 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); column-gap: clamp(20px, 3.5cqw, 34px); align-items: start;
}
.sbp-var--6 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__img {
grid-column: 1; grid-row: 1 / span 4; margin-bottom: 0; aspect-ratio: 4 / 3; max-height: 340px;
}
.sbp-var--6 .sbp-fam--rentals .sbp-shopcard:nth-child(even):not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__img { grid-column: 2; }
.sbp-var--6 .sbp-fam--rentals .sbp-shopcard:nth-child(even):not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__body,
.sbp-var--6 .sbp-fam--rentals .sbp-shopcard:nth-child(even):not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__price--seat { grid-column: 1; grid-row: auto; }
.sbp-var--6 .sbp-fam--rentals .sbp-shopcard:nth-child(even):not(:has(> .sbp-shopcard__zone--media.is-empty)) { grid-auto-flow: dense; }
.sbp-var--6 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__body { grid-column: 2; }
.sbp-var--6 .sbp-fam--rentals .sbp-shopcard:nth-child(even):not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__body { grid-column: 1; grid-row: 1; }
.sbp-var--6 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__price--seat { grid-column: 2; }
.sbp-var--6 .sbp-fam--rentals .sbp-shopcard:nth-child(even):not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__price--seat { grid-column: 1; }
}
/* M — the spread deepens and the read grows */
.sbp-med--m.sbp-var--6 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) { display: flex; flex-direction: column; grid-template-columns: none; }
.sbp-med--m.sbp-var--6 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__img.is-empty { display: none; }
.sbp-med--m.sbp-var--6 .sbp-fam--rentals .sbp-shopcard__t { font-size: 22px; }
.sbp-med--m.sbp-var--6 .sbp-fam--rentals .sbp-shopcard__d { -webkit-line-clamp: 6; font-size: 15px; }
.sbp-med--m.sbp-var--6 .sbp-fam--rentals .sbp-shopcard__price--seat { font-size: 16.5px; }
@container sbprent (min-width: 760px) {
.sbp-med--m.sbp-var--6 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: grid; grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
}
.sbp-med--m.sbp-var--6 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__img { aspect-ratio: 4 / 3; max-height: 420px; }
}
/* L — full editorial: unclamped description, deep plates */
.sbp-med--l.sbp-var--6 .sbp-fam--rentals .sbp-shop__rail,
.sbp-med--l.sbp-var--6 .sbp-fam--rentals .sbp-shop__rail--2,
.sbp-med--l.sbp-var--6 .sbp-fam--rentals .sbp-shop__rail--1 { display: flex; flex-direction: column; max-width: 980px; gap: clamp(32px, 6cqw, 56px); }
.sbp-med--l.sbp-var--6 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--l.sbp-var--6 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) { display: flex; flex-direction: column; grid-template-columns: none; }
.sbp-med--l.sbp-var--6 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__img.is-empty { display: none; }
/* narrow-container L: cap the stacked spread photo against the generic un-cap */
.sbp-med--l.sbp-var--6 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__img { height: auto; aspect-ratio: 16 / 9; max-height: 360px; min-height: 0; }
.sbp-med--l.sbp-var--6 .sbp-fam--rentals .sbp-shopcard__t { font-size: 24px; }
.sbp-med--l.sbp-var--6 .sbp-fam--rentals .sbp-shopcard__d { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: 15.5px; }
.sbp-med--l.sbp-var--6 .sbp-fam--rentals .sbp-shopcard__price--seat { font-size: 18px; }
@container sbprent (min-width: 760px) {
.sbp-med--l.sbp-var--6 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); column-gap: clamp(26px, 4cqw, 42px);
}
.sbp-med--l.sbp-var--6 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__img { height: auto; aspect-ratio: 3 / 4; max-height: 460px; min-height: 0; }
}
/* ═══ V7 IMMERSIVE RENTAL SHOWCASE — expressive imagery, clear hire CTA ═══
Every record is a stage: the photograph fills the card, the identity and
rate sit on a legible scrim, the action is a real pill. Imageless records
stand on a deep tonal field with the family glyph — designed, never blank.
S single stages · M staggered pair · L full-bleed monuments. */
.sbp-var--7 .sbp-fam--rentals .sbp-shop__head .sbp-h2 { font-size: calc(clamp(26px, 3vw, 40px) * var(--sbp-type-scale, 1)); }
.sbp-var--7 .sbp-fam--rentals .sbp-shop__rail,
.sbp-var--7 .sbp-fam--rentals .sbp-shop__rail--2,
.sbp-var--7 .sbp-fam--rentals .sbp-shop__rail--1,
.sbp-var--7 .sbp-fam--rentals .sbp-shop__rail--solo {
display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 3cqw, 26px);
}
.sbp-var--7 .sbp-fam--rentals .sbp-shopcard {
position: relative; display: flex; flex-direction: column; justify-content: flex-end;
min-height: 240px; aspect-ratio: 16 / 9; overflow: hidden; border: 0;
border-radius: calc(var(--sbp-r-lg) * 1.25);
}
.sbp-var--7 .sbp-fam--rentals .sbp-shopcard__img {
position: absolute; inset: 0; height: 100%; max-height: none; aspect-ratio: auto; z-index: 0;
}
.sbp-var--7 .sbp-fam--rentals .sbp-shopcard__img::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(15, 12, 8, 0) 34%, rgba(15, 12, 8, .38) 58%, rgba(15, 12, 8, .78) 100%);
}
.sbp-var--7 .sbp-fam--rentals .sbp-shopcard__img.is-empty {
background: radial-gradient(120% 120% at 18% 0%, color-mix(in srgb, var(--sbp-acc) 26%, var(--sbp-field-b)) 0%, var(--sbp-field-b) 58%);
}
.sbp-var--7 .sbp-fam--rentals .sbp-shopcard__img.is-empty::after {
background: linear-gradient(180deg, rgba(15, 12, 8, 0) 40%, rgba(15, 12, 8, .30) 66%, rgba(15, 12, 8, .62) 100%);
}
.sbp-var--7 .sbp-fam--rentals .sbp-shopcard__ph { position: absolute; top: 18px; left: 18px; opacity: .9; }
/* stage flow: the body dissolves so title · location · rate · action read in
order on the scrim; every staged line is its own positioned layer above
the absolute media. Card padding carries the inset. */
.sbp-var--7 .sbp-fam--rentals .sbp-shopcard { padding: clamp(16px, 3cqw, 26px); gap: 5px; }
.sbp-var--7 .sbp-fam--rentals .sbp-shopcard__body { display: contents; }
.sbp-var--7 .sbp-fam--rentals .sbp-shopcard__meta,
.sbp-var--7 .sbp-fam--rentals .sbp-shopcard__t,
.sbp-var--7 .sbp-fam--rentals .sbp-shopcard__price--seat,
.sbp-var--7 .sbp-fam--rentals .sbp-shopcard__zone--action { position: relative; z-index: 1; }
.sbp-var--7 .sbp-fam--rentals .sbp-shopcard__meta { order: 1; color: rgba(255, 255, 255, .82); }
.sbp-var--7 .sbp-fam--rentals .sbp-shopcard__t { order: 2; color: #fff; font-size: clamp(19px, 2.6cqw, 24px); text-wrap: balance; }
.sbp-var--7 .sbp-fam--rentals .sbp-shopcard__d { display: none; }
.sbp-var--7 .sbp-fam--rentals .sbp-shopcard__price--seat { order: 3; margin: 0; color: #fff; font-size: 17px; }
.sbp-var--7 .sbp-fam--rentals .sbp-shopcard__price--seat .sbp-shopcard__unit { color: rgba(255, 255, 255, .78); }
.sbp-var--7 .sbp-fam--rentals .sbp-shopcard__zone--action { order: 4; padding-top: 6px; min-height: 0; margin-top: 0; }
.sbp-var--7 .sbp-fam--rentals .sbp-shopcard__go {
display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
background: var(--sbp-org); color: var(--sbp-action-ink, #fff);
padding: 8px 16px; border-radius: 999px; font-size: 13px;
}
.sbp-var--7 .sbp-fam--rentals .sbp-shopcard:focus-visible { outline-offset: 3px; }
@container sbprent (min-width: 720px) {
.sbp-var--7 .sbp-fam--rentals .sbp-shop__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sbp-var--7 .sbp-fam--rentals .sbp-shopcard:first-child { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
}
/* M — deeper stages, pair rhythm holds */
.sbp-med--m.sbp-var--7 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--m.sbp-var--7 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: flex; flex-direction: column; grid-template-columns: none; min-height: 300px; aspect-ratio: 3 / 2;
}
.sbp-med--m.sbp-var--7 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__img.is-empty,
.sbp-med--m.sbp-var--7 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__img { position: absolute; inset: 0; height: 100%; max-height: none; min-height: 0; aspect-ratio: auto; }
.sbp-med--m.sbp-var--7 .sbp-fam--rentals .sbp-shopcard__t { font-size: clamp(21px, 3cqw, 27px); }
.sbp-med--m.sbp-var--7 .sbp-fam--rentals .sbp-shopcard__price--seat { font-size: 19px; }
/* L — full-bleed monuments, one per row */
.sbp-med--l.sbp-var--7 .sbp-fam--rentals .sbp-shop__rail,
.sbp-med--l.sbp-var--7 .sbp-fam--rentals .sbp-shop__rail--2,
.sbp-med--l.sbp-var--7 .sbp-fam--rentals .sbp-shop__rail--1 { grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 4cqw, 34px); }
.sbp-med--l.sbp-var--7 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--l.sbp-var--7 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: flex; flex-direction: column; grid-template-columns: none; min-height: 340px; aspect-ratio: 21 / 10; grid-column: auto;
}
.sbp-med--l.sbp-var--7 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty) .sbp-shopcard__img.is-empty,
.sbp-med--l.sbp-var--7 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__img { position: absolute; inset: 0; height: 100%; max-height: none; min-height: 0; aspect-ratio: auto; }
.sbp-med--l.sbp-var--7 .sbp-fam--rentals .sbp-shopcard__t { font-size: clamp(24px, 3.4cqw, 32px); }
.sbp-med--l.sbp-var--7 .sbp-fam--rentals .sbp-shopcard__d {
display: -webkit-box; -webkit-line-clamp: 2; order: 2; position: relative; z-index: 1;
color: rgba(255, 255, 255, .88); max-width: 58ch; font-size: 14.5px;
}
.sbp-med--l.sbp-var--7 .sbp-fam--rentals .sbp-shopcard__price--seat { font-size: 22px; }
@container sbprent (max-width: 719px) {
.sbp-med--l.sbp-var--7 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--l.sbp-var--7 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) { aspect-ratio: auto; min-height: 300px; }
}
/* ── FAMILY MOBILE LAW — true-mobile parity for every hire composition ──── */
@media (max-width: 760px) {
.sbp-var--2 .sbp-fam--rentals .sbp-shopcard,
.sbp-med--m.sbp-var--2 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--m.sbp-var--2 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)),
.sbp-med--l.sbp-var--2 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--l.sbp-var--2 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
grid-template-columns: minmax(0, 1fr) minmax(84px, max-content); column-gap: 12px;
}
.sbp-med--m.sbp-var--2 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__img,
.sbp-med--l.sbp-var--2 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) .sbp-shopcard__img { display: none; }
.sbp-med--m.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__t, .sbp-med--m.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__meta,
.sbp-med--l.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__t, .sbp-med--l.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__d,
.sbp-med--l.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__meta { grid-column: 1; }
.sbp-med--m.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__price--seat, .sbp-med--m.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__zone--action,
.sbp-med--l.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__price--seat, .sbp-med--l.sbp-var--2 .sbp-fam--rentals .sbp-shopcard__zone--action { grid-column: 2; }
.sbp-var--4 .sbp-fam--rentals .sbp-shop__rail,
.sbp-med--l.sbp-var--4 .sbp-fam--rentals .sbp-shop__rail { grid-template-columns: minmax(0, 1fr); }
.sbp-var--4 .sbp-fam--rentals .sbp-shopcard,
.sbp-med--m.sbp-var--4 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--m.sbp-var--4 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)),
.sbp-med--l.sbp-var--4 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--l.sbp-var--4 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: grid; grid-template-rows: none; grid-row: auto;
border-left: 0; border-top: 1px solid var(--sbp-line); padding: 14px 2px 16px;
}
.sbp-var--4 .sbp-fam--rentals .sbp-shopcard:first-child { border-top: 0; }
.sbp-var--4 .sbp-fam--rentals .sbp-shopcard__t,
.sbp-var--4 .sbp-fam--rentals .sbp-shopcard__price--seat,
.sbp-var--4 .sbp-fam--rentals .sbp-shopcard__meta,
.sbp-var--4 .sbp-fam--rentals .sbp-shopcard__d,
.sbp-var--4 .sbp-fam--rentals .sbp-shopcard__zone--action { grid-row: auto; border-top: 0; padding-top: 4px; padding-bottom: 4px; }
.sbp-var--3 .sbp-fam--rentals .sbp-shop__rail,
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shop__rail,
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shop__rail--2,
.sbp-med--l.sbp-var--3 .sbp-fam--rentals .sbp-shop__rail--1 { grid-template-columns: minmax(0, 1fr); }
.sbp-var--1 .sbp-fam--rentals .sbp-shop__rail { grid-template-columns: minmax(0, 1fr); }
.sbp-var--7 .sbp-fam--rentals .sbp-shopcard,
.sbp-med--m.sbp-var--7 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--m.sbp-var--7 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)),
.sbp-med--l.sbp-var--7 .sbp-fam--rentals .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--l.sbp-var--7 .sbp-fam--rentals .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
aspect-ratio: auto; min-height: 260px;
}
}
/* ═══ end CHL:BP_RENTALS_PREMIUM_FAMILY v1 ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_GALLERY_PREMIUM_FAMILY v1 — three new gallery compositions over the
vendor's own cards (V1-V4 shipped branches and their CSS byte-untouched).
V5 Narrative Masonry — flowing columns, images at their OWN aspect, no crop.
V6 Focus Viewer — one stage + thumbnail rail, driven entirely by native
radio state: keyboard-operable (arrow keys), zero JS, zero timers.
V7 Contact Sheet — ruled archival frames with counter numbering.
LAWS: composition responds to the REAL available width (container sbpgal,
registered ONLY for V5-V7 so the accepted V1-V4 canvases keep their exact
containment); S implicit, M/L additive; captions/alt/DOM order preserved;
no CSS-generated text (counters are presentational numbers, aria-hidden).
═══════════════════════════════════════════════════════════════════════════ */
.sbp-var--5 .sbp-sec--gallery .sbp-sw,
.sbp-var--6 .sbp-sec--gallery .sbp-sw,
.sbp-var--7 .sbp-sec--gallery .sbp-sw { container: sbpgal / inline-size; }
/* ── V5 NARRATIVE MASONRY ─────────────────────────────────────────────────── */
.sbp-var--5 .sbp-sec--gallery .sbp-galmasonry { columns: 240px; column-gap: 14px; }
.sbp-var--5 .sbp-sec--gallery .sbp-galmas__item {
margin: 0 0 14px; break-inside: avoid; min-width: 0;
border-radius: var(--sbp-r-lg); overflow: hidden;
background: var(--sbp-card); border: 1px solid var(--sbp-line);
}
/* ⛔ NO-COLLAPSE / NO-CLS LAW: `media` carries no width/height columns (schema
is untouchable), so a natural-aspect masonry image has NO intrinsic size
until it loads — the column flow collapsed to zero height (measured).
`aspect-ratio: auto 4/3` reserves a sane box BEFORE load and yields to the
image's OWN ratio once it arrives: full-frame, never cropped, no shift. */
.sbp-var--5 .sbp-sec--gallery .sbp-galmas__item img {
display: block; width: 100%; height: auto; aspect-ratio: auto 4 / 3; object-fit: cover;
}
.sbp-var--5 .sbp-sec--gallery .sbp-galmas__cap {
position: static; padding: 9px 12px 10px; font-size: 12.5px; color: var(--sbp-mut);
background: transparent; overflow-wrap: break-word;
}
/* M — wider column measure, roomier gaps */
.sbp-med--m.sbp-var--5 .sbp-sec--gallery .sbp-galmasonry { columns: 310px; column-gap: 18px; }
.sbp-med--m.sbp-var--5 .sbp-sec--gallery .sbp-galmas__item { margin-bottom: 18px; }
.sbp-med--m.sbp-var--5 .sbp-sec--gallery .sbp-galmas__cap { font-size: 13px; padding: 10px 14px 12px; }
/* L — grand plates, two generous columns at most */
.sbp-med--l.sbp-var--5 .sbp-sec--gallery .sbp-galmasonry { columns: 2 380px; column-gap: 24px; }
.sbp-med--l.sbp-var--5 .sbp-sec--gallery .sbp-galmas__item { margin-bottom: 24px; }
.sbp-med--l.sbp-var--5 .sbp-sec--gallery .sbp-galmas__cap { font-size: 13.5px; padding: 12px 16px 14px; }
/* ── V6 FOCUS VIEWER ──────────────────────────────────────────────────────
The thumb IS the radio (see gallery.php): `:checked` styles the control
itself, so the current-image highlight cannot desync from the stage.
Radios precede the stage in DOM (state selectors need the sibling order);
`order` puts the stage first visually. */
.sbp-var--6 .sbp-sec--gallery .sbp-head { display: block; text-align: center; max-width: 640px; margin-inline: auto; }
.sbp-var--6 .sbp-sec--gallery .sbp-head .sbp-kicker { justify-content: center; }
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus {
max-width: 980px; margin-inline: auto;
display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: flex-start;
}
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__stage { order: -1; flex: 1 0 100%; min-width: 0; }
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__frame {
display: none; margin: 0; flex-direction: column; gap: 0;
border-radius: var(--sbp-r-lg); overflow: hidden;
background: var(--sbp-field-b); border: 1px solid var(--sbp-line);
}
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__frame img {
display: block; width: 100%; aspect-ratio: 16 / 10; max-height: 440px; object-fit: contain;
}
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__frame .sbp-galitem__cap {
position: static; padding: 10px 14px; font-size: 13px; color: var(--sbp-mut);
background: var(--sbp-card); border-top: 1px solid var(--sbp-line); overflow-wrap: break-word;
}
/* the control, painted as its own thumbnail */
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__thumb {
appearance: none; -webkit-appearance: none; margin: 0; padding: 0;
flex: 0 0 auto; width: 64px; height: 64px; border-radius: 10px; cursor: pointer;
background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;
border: 2px solid transparent; opacity: .72;
}
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__thumb:hover { opacity: 1; }
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__thumb:checked { border-color: var(--sbp-acc); opacity: 1; }
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__thumb:focus-visible {
outline: 3px solid var(--sbp-focus, var(--sbp-acc)); outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__thumb { transition: opacity .15s ease, border-color .15s ease; }
}
/* stage state: Nth checked control reveals the Nth frame (registry caps cards
at 12; the degrade guard below covers any legacy row that exceeds it). */
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__thumb:nth-of-type(1):checked ~ .sbp-galfocus__stage .sbp-galfocus__frame:nth-child(1),
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__thumb:nth-of-type(2):checked ~ .sbp-galfocus__stage .sbp-galfocus__frame:nth-child(2),
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__thumb:nth-of-type(3):checked ~ .sbp-galfocus__stage .sbp-galfocus__frame:nth-child(3),
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__thumb:nth-of-type(4):checked ~ .sbp-galfocus__stage .sbp-galfocus__frame:nth-child(4),
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__thumb:nth-of-type(5):checked ~ .sbp-galfocus__stage .sbp-galfocus__frame:nth-child(5),
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__thumb:nth-of-type(6):checked ~ .sbp-galfocus__stage .sbp-galfocus__frame:nth-child(6),
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__thumb:nth-of-type(7):checked ~ .sbp-galfocus__stage .sbp-galfocus__frame:nth-child(7),
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__thumb:nth-of-type(8):checked ~ .sbp-galfocus__stage .sbp-galfocus__frame:nth-child(8),
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__thumb:nth-of-type(9):checked ~ .sbp-galfocus__stage .sbp-galfocus__frame:nth-child(9),
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__thumb:nth-of-type(10):checked ~ .sbp-galfocus__stage .sbp-galfocus__frame:nth-child(10),
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__thumb:nth-of-type(11):checked ~ .sbp-galfocus__stage .sbp-galfocus__frame:nth-child(11),
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__thumb:nth-of-type(12):checked ~ .sbp-galfocus__stage .sbp-galfocus__frame:nth-child(12) { display: flex; }
/* DEGRADE GUARD: a legacy row carrying more images than the contract's 12
would otherwise leave every frame hidden — a dead viewer. Beyond 12 the
composition falls back to an honest stacked gallery: everything visible. */
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus:has(.sbp-galfocus__frame:nth-child(13)) .sbp-galfocus__frame { display: flex; }
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus:has(.sbp-galfocus__frame:nth-child(13)) .sbp-galfocus__frame + .sbp-galfocus__frame { margin-top: 12px; }
/* M — deeper stage, larger thumbs */
.sbp-med--m.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__frame img { aspect-ratio: 3 / 2; max-height: 540px; }
.sbp-med--m.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__thumb { width: 78px; height: 78px; }
.sbp-med--m.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__frame .sbp-galitem__cap { font-size: 13.5px; }
/* L — cinematic stage, generous rail */
.sbp-med--l.sbp-var--6 .sbp-sec--gallery .sbp-galfocus { max-width: 1120px; gap: 12px; }
.sbp-med--l.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__frame img { aspect-ratio: 16 / 9; max-height: 640px; }
.sbp-med--l.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__thumb { width: 92px; height: 92px; border-radius: 12px; }
.sbp-med--l.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__frame .sbp-galitem__cap { font-size: 14px; padding: 12px 16px; }
@container sbpgal (max-width: 560px) {
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__frame img,
.sbp-med--m.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__frame img,
.sbp-med--l.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__frame img { aspect-ratio: 4 / 3; max-height: 360px; }
.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__thumb,
.sbp-med--m.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__thumb,
.sbp-med--l.sbp-var--6 .sbp-sec--gallery .sbp-galfocus__thumb { width: 54px; height: 54px; }
}
/* ── V7 EDITORIAL CONTACT SHEET ───────────────────────────────────────────── */
.sbp-var--7 .sbp-sec--gallery .sbp-head { border-bottom: 3px double var(--sbp-line); padding-bottom: 14px; margin-bottom: 22px; }
/* min() on every track floor: a fixed minmax floor wider than the container
overflows the safe shell at 320-390 (measured on the L sheet). */
.sbp-var--7 .sbp-sec--gallery .sbp-galsheet {
display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
gap: 18px; counter-reset: sbpsheet;
}
.sbp-var--7 .sbp-sec--gallery .sbp-galsheet__frame {
margin: 0; min-width: 0; counter-increment: sbpsheet;
border: 1px solid var(--sbp-line); border-radius: 4px; background: var(--sbp-card);
padding: 10px 10px 8px; display: flex; flex-direction: column; gap: 8px;
}
.sbp-var--7 .sbp-sec--gallery .sbp-galsheet__no {
font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--sbp-mut);
}
.sbp-var--7 .sbp-sec--gallery .sbp-galsheet__no::before { content: counter(sbpsheet, decimal-leading-zero); }
.sbp-var--7 .sbp-sec--gallery .sbp-galsheet__frame img {
display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 2px;
}
.sbp-var--7 .sbp-sec--gallery .sbp-galsheet__cap {
position: static; padding: 0 0 2px; font-size: 11.5px; letter-spacing: .02em;
color: var(--sbp-mut); background: transparent; overflow-wrap: break-word;
}
/* M — three-across substantial frames */
.sbp-med--m.sbp-var--7 .sbp-sec--gallery .sbp-galsheet { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 22px; }
.sbp-med--m.sbp-var--7 .sbp-sec--gallery .sbp-galsheet__frame { padding: 12px 12px 10px; }
.sbp-med--m.sbp-var--7 .sbp-sec--gallery .sbp-galsheet__frame img { aspect-ratio: 4 / 3; }
.sbp-med--m.sbp-var--7 .sbp-sec--gallery .sbp-galsheet__cap { font-size: 12.5px; }
/* L — plate frames, two-across editorial scale */
.sbp-med--l.sbp-var--7 .sbp-sec--gallery .sbp-galsheet { grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 26px; }
.sbp-med--l.sbp-var--7 .sbp-sec--gallery .sbp-galsheet__frame { padding: 14px 14px 12px; border-radius: 6px; }
.sbp-med--l.sbp-var--7 .sbp-sec--gallery .sbp-galsheet__frame img { aspect-ratio: 4 / 3; }
.sbp-med--l.sbp-var--7 .sbp-sec--gallery .sbp-galsheet__cap { font-size: 13px; }
.sbp-med--l.sbp-var--7 .sbp-sec--gallery .sbp-galsheet__no { font-size: 11.5px; }
/* editor-canvas hint moods for the new variants: the editable list simply
inherits each variant's density so the canvas FEELS like the choice.
(The edit list stays ONE list — the shipped WYSIWYG_GALLERY pattern.) */
/* The editor canvas is composed by starter-editor.css
(CHL:BP_GALLERY_CANVAS_PARITY v1). Three rules that set only
grid-template-columns lived here and were inert: that sheet sets the list's
display and won on source order, so they never composed anything. */
/* ── V2 EVEN GRID (public) — uniform frames; V1 keeps its editorial anchor ──
⛔ MEASURED: V1 and V2 rendered the SAME composition — both emitted
.sbp-galgrid and inherited the `:first-child { span 2 / span 2 }` anchor, so
the two pills were indistinguishable at every count. V2 now reads as its
name: an even grid of equal frames. V1's rules are byte-untouched, and the
n=1 solo-stage law still wins for both (hence :not([data-n="1"])). */
.sbp-var--2 .sbp-sec--gallery .sbp-galgrid:not([data-n="1"]) {
grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
grid-auto-rows: auto; gap: 8px;
}
.sbp-var--2 .sbp-sec--gallery .sbp-galgrid:not([data-n="1"]) .sbp-galitem { aspect-ratio: 1 / 1; }
.sbp-var--2 .sbp-sec--gallery .sbp-galgrid:not([data-n="1"]) .sbp-galitem:first-child,
.sbp-var--2 .sbp-sec--gallery .sbp-galgrid:not([data-n="1"]) .sbp-galitem:nth-child(2),
.sbp-var--2 .sbp-sec--gallery .sbp-galgrid:not([data-n="1"]) .sbp-galitem:nth-child(6n+4):not(:first-child) {
grid-column: auto; grid-row: auto;
}
.sbp-med--m.sbp-var--2 .sbp-sec--gallery .sbp-galgrid:not([data-n="1"]) { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); grid-auto-rows: auto; gap: 10px; }
.sbp-med--l.sbp-var--2 .sbp-sec--gallery .sbp-galgrid:not([data-n="1"]) { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); grid-auto-rows: auto; gap: 12px; }
/* ⛔ NARROW-WIDTH LADDER: with a 190px/230px floor a 326px shell fits one
column at BOTH M and L, so the two dials measured 326x326 and 326x326 — a
placebo step. Below 430px the ladder steps by column count instead, and L
deepens the frame so the largest setting still reads as the largest. */
@media (max-width: 430px) {
.sbp-var--2 .sbp-sec--gallery .sbp-galgrid:not([data-n="1"]) { grid-template-columns: repeat(auto-fill, minmax(min(100px, 100%), 1fr)); }
.sbp-med--m.sbp-var--2 .sbp-sec--gallery .sbp-galgrid:not([data-n="1"]) { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
.sbp-med--l.sbp-var--2 .sbp-sec--gallery .sbp-galgrid:not([data-n="1"]) { grid-template-columns: minmax(0, 1fr); }
.sbp-med--l.sbp-var--2 .sbp-sec--gallery .sbp-galgrid:not([data-n="1"]) .sbp-galitem { aspect-ratio: 4 / 5; }
}
/* ═══ end CHL:BP_GALLERY_PREMIUM_FAMILY v1 ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_MEMBERSHIPS_PREMIUM_FAMILY v1 — seven plan-native compositions over
the vendor's real subscription_products records.
V1 Tier Cards · V2 Simple Plan List · V3 Featured Membership ·
V4 Comparison Table · V5 Benefits Journey · V6 Member Path ·
V7 Pricing Stage.
LAWS (inherited from the Rentals zone, re-stated because they bite here too)
· Scope is `.sbp-fam--subscriptions`; composition follows the SECTION, never
the record kind, so a record_source reappropriation keeps this anatomy.
· Multi-column decisions are @container (sbpsub) queries — the editor canvas
is narrower than the viewport and must compose identically.
· S is implicit; M/L are additive. Any card-level M/L layout must be
re-asserted through BOTH image-state qualifiers to out-specify the
generic PM_FINAL v2.0 dial (`:has()` reaches 0,6,0).
· Price is the SEAT with its cadence unit; the in-image badge never renders.
· `features` render as a real ; a plan without them emits no list.
· Benefits and cadence are the vendor's own data — nothing is invented, and
a plan missing any optional field simply composes without it.
═══════════════════════════════════════════════════════════════════════════ */
/* ── FAMILY FOUNDATIONS ───────────────────────────────────────────────────── */
.sbp-fam--subscriptions .sbp-sw { container: sbpsub / inline-size; }
.sbp-fam--subscriptions .sbp-shopcard,
.sbp-fam--subscriptions .sbp-shopcard * { min-width: 0; }
/* ⛔ HOSTILE-WORD LAW: `break-word` wraps but does NOT shrink the element's
min-content size, so a single unbreakable word still forced the card wider
than its grid track (measured: V5 at 320, V7 at every dial). `anywhere`
participates in intrinsic sizing, so the track can actually shrink. */
.sbp-fam--subscriptions .sbp-shopcard__t,
.sbp-fam--subscriptions .sbp-shopcard__d,
.sbp-fam--subscriptions .sbp-shopcard__price--seat,
.sbp-fam--subscriptions .sbp-shopcard__trial,
.sbp-fam--subscriptions .sbp-shopcard__benefits li { overflow-wrap: anywhere; }
.sbp-fam--subscriptions .sbp-shopcard:focus-visible { outline: 3px solid var(--sbp-focus, var(--sbp-acc)); outline-offset: -3px; }
.sbp-fam--subscriptions .sbp-shopcard__price--seat {
position: static; padding: 0; border-radius: 0; background: transparent; box-shadow: none;
color: var(--sbp-acc-ink); font-weight: 800; font-size: 22px; line-height: 1.15;
}
.sbp-fam--subscriptions .sbp-shopcard__unit {
font-size: .58em; font-weight: 650; letter-spacing: .04em; color: var(--sbp-mut);
}
.sbp-fam--subscriptions .sbp-shopcard__meta { display: none; } /* the cadence lives on the price */
.sbp-fam--subscriptions .sbp-shopcard__d {
margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--sbp-mut); white-space: pre-line;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.sbp-fam--subscriptions .sbp-shopcard__benefits {
list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
font-size: 13px; color: var(--sbp-ink);
}
.sbp-fam--subscriptions .sbp-shopcard__benefits li { position: relative; padding-left: 20px; line-height: 1.45; }
.sbp-fam--subscriptions .sbp-shopcard__benefits li::before {
content: ""; position: absolute; left: 4px; top: .52em;
width: 7px; height: 7px; border-radius: 50%;
background: var(--sbp-indicator, var(--sbp-org-display));
}
.sbp-fam--subscriptions .sbp-shopcard__trial {
display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: 999px;
background: color-mix(in srgb, var(--sbp-acc-soft) 60%, transparent);
color: var(--sbp-acc-ink); font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
}
.sbp-fam--subscriptions .sbp-shopinvite {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
padding: 26px; text-align: center; color: var(--sbp-mut);
border: 1.5px dashed color-mix(in srgb, var(--sbp-acc) 34%, transparent);
border-radius: var(--sbp-r-lg); background: color-mix(in srgb, var(--sbp-acc-soft) 40%, transparent);
}
.sbp-fam--subscriptions .sbp-shop__manage {
margin-top: 20px; padding: 12px 16px; display: flex; align-items: center; gap: 12px;
border: 1.5px dashed color-mix(in srgb, var(--sbp-acc) 34%, transparent); border-radius: 12px;
background: color-mix(in srgb, var(--sbp-acc-soft) 45%, transparent);
font-size: 13.5px; line-height: 1.5; color: var(--sbp-mut);
}
.sbp-fam--subscriptions .sbp-shop__manage i { color: var(--sbp-acc); font-size: 16px; flex: 0 0 auto; }
.sbp-fam--subscriptions .sbp-shop__manage p { margin: 0; }
.sbp-fam--subscriptions .sbp-shop__manage a { font-weight: 700; color: var(--sbp-acc-ink); white-space: nowrap; }
/* ── V1 TIER CARDS — the plan ladder as cards ─────────────────────────────── */
/* ⛔ SEAT LAW (measured 2026-08-18, this file): the renderer emits
`__price--seat` as a SIBLING of `__body`, never a child of it. A composition
that orders or insets the price must therefore dissolve the body with
`display: contents` and own the padding at CARD level. Styling the seat as
if it lived inside the body put the price 1px from the card edge (title was
inset 21px) and ordered it after the entire body — `order` was resolving
against the card's children, not the body's. V2/V4/V5/V6 were already
correct because they dissolve the body; V1/V3/V7 now do the same. */
.sbp-var--1 .sbp-fam--subscriptions .sbp-shop__rail,
.sbp-var--1 .sbp-fam--subscriptions .sbp-shop__rail--2,
.sbp-var--1 .sbp-fam--subscriptions .sbp-shop__rail--1,
.sbp-var--1 .sbp-fam--subscriptions .sbp-shop__rail--solo {
display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch;
}
@container sbpsub (min-width: 620px) { .sbp-var--1 .sbp-fam--subscriptions .sbp-shop__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container sbpsub (min-width: 980px) { .sbp-var--1 .sbp-fam--subscriptions .sbp-shop__rail { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } }
.sbp-var--1 .sbp-fam--subscriptions .sbp-shopcard {
display: flex; flex-direction: column; padding: 20px 20px 18px; gap: 0;
}
.sbp-var--1 .sbp-fam--subscriptions .sbp-shopcard__img { display: none; }
.sbp-var--1 .sbp-fam--subscriptions .sbp-shopcard__body { display: contents; }
.sbp-var--1 .sbp-fam--subscriptions .sbp-shopcard__t { order: 1; font-size: 16.5px; }
.sbp-var--1 .sbp-fam--subscriptions .sbp-shopcard__price--seat { order: 2; margin: 10px 0 0; }
.sbp-var--1 .sbp-fam--subscriptions .sbp-shopcard__d { order: 3; margin-top: 10px; }
.sbp-var--1 .sbp-fam--subscriptions .sbp-shopcard__benefits {
order: 4; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sbp-line);
}
.sbp-var--1 .sbp-fam--subscriptions .sbp-shopcard__trial { order: 5; align-self: flex-start; margin-top: 12px; }
/* CTA floors: every tier in the ladder lands its action on the same baseline */
.sbp-var--1 .sbp-fam--subscriptions .sbp-shopcard__zone--action { order: 6; margin-top: auto; padding-top: 16px; }
.sbp-med--m.sbp-var--1 .sbp-fam--subscriptions .sbp-shopcard__price--seat { font-size: 26px; margin: 12px 0 0; }
.sbp-med--m.sbp-var--1 .sbp-fam--subscriptions .sbp-shopcard__t { font-size: 18px; }
.sbp-med--m.sbp-var--1 .sbp-fam--subscriptions .sbp-shopcard__d { -webkit-line-clamp: 4; font-size: 14px; margin-top: 12px; }
.sbp-med--m.sbp-var--1 .sbp-fam--subscriptions .sbp-shopcard__benefits { margin-top: 16px; padding-top: 16px; }
.sbp-med--l.sbp-var--1 .sbp-fam--subscriptions .sbp-shop__rail,
.sbp-med--l.sbp-var--1 .sbp-fam--subscriptions .sbp-shop__rail--2,
.sbp-med--l.sbp-var--1 .sbp-fam--subscriptions .sbp-shop__rail--1 { grid-template-columns: minmax(0, 1fr); gap: 22px; }
@container sbpsub (min-width: 760px) {
.sbp-med--l.sbp-var--1 .sbp-fam--subscriptions .sbp-shop__rail,
.sbp-med--l.sbp-var--1 .sbp-fam--subscriptions .sbp-shop__rail--2,
.sbp-med--l.sbp-var--1 .sbp-fam--subscriptions .sbp-shop__rail--1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sbp-med--l.sbp-var--1 .sbp-fam--subscriptions .sbp-shopcard__price--seat { font-size: 30px; margin: 14px 0 0; }
.sbp-med--l.sbp-var--1 .sbp-fam--subscriptions .sbp-shopcard__t { font-size: 20px; }
.sbp-med--l.sbp-var--1 .sbp-fam--subscriptions .sbp-shopcard__d { -webkit-line-clamp: 5; font-size: 14.5px; margin-top: 14px; }
.sbp-med--l.sbp-var--1 .sbp-fam--subscriptions .sbp-shopcard__benefits { font-size: 14px; gap: 8px; margin-top: 18px; padding-top: 18px; }
/* ── V2 SIMPLE PLAN LIST — a calm ledger of plans ─────────────────────────── */
.sbp-var--2 .sbp-fam--subscriptions .sbp-shop__rail,
.sbp-var--2 .sbp-fam--subscriptions .sbp-shop__rail--2,
.sbp-var--2 .sbp-fam--subscriptions .sbp-shop__rail--1,
.sbp-var--2 .sbp-fam--subscriptions .sbp-shop__rail--solo { display: block; max-width: 760px; margin-inline: auto; }
.sbp-var--2 .sbp-fam--subscriptions .sbp-shopcard {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(96px, max-content);
align-items: center; column-gap: 18px; row-gap: 2px;
background: transparent; border: 0; border-left: 0; border-radius: 0; box-shadow: none; overflow: visible;
border-top: 1px solid var(--sbp-line); padding: 16px 2px;
}
.sbp-var--2 .sbp-fam--subscriptions .sbp-shopcard:hover { border-left: 0; }
.sbp-var--2 .sbp-fam--subscriptions .sbp-shopcard:last-child { border-bottom: 1px solid var(--sbp-line); }
.sbp-var--2 .sbp-fam--subscriptions .sbp-shopcard__img { display: none; }
.sbp-var--2 .sbp-fam--subscriptions .sbp-shopcard__body { display: contents; }
.sbp-var--2 .sbp-fam--subscriptions .sbp-shopcard__t { grid-column: 1; font-size: 16px; }
.sbp-var--2 .sbp-fam--subscriptions .sbp-shopcard__d { grid-column: 1; -webkit-line-clamp: 1; font-size: 13px; }
.sbp-var--2 .sbp-fam--subscriptions .sbp-shopcard__benefits { display: none; }
.sbp-var--2 .sbp-fam--subscriptions .sbp-shopcard__trial { grid-column: 1; justify-self: start; margin-top: 6px; }
.sbp-var--2 .sbp-fam--subscriptions .sbp-shopcard__price--seat { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; font-size: 19px; }
.sbp-var--2 .sbp-fam--subscriptions .sbp-shopcard__unit { display: block; font-size: 11px; }
.sbp-var--2 .sbp-fam--subscriptions .sbp-shopcard__zone--action { grid-column: 2; justify-self: end; margin: 0; padding: 0; min-height: 0; }
.sbp-med--m.sbp-var--2 .sbp-fam--subscriptions .sbp-shopcard__benefits { display: flex; grid-column: 1; flex-flow: row wrap; gap: 4px 16px; margin-top: 8px; font-size: 12.5px; }
.sbp-med--m.sbp-var--2 .sbp-fam--subscriptions .sbp-shopcard__price--seat { font-size: 21px; }
.sbp-med--m.sbp-var--2 .sbp-fam--subscriptions .sbp-shopcard__t { font-size: 17.5px; }
.sbp-med--l.sbp-var--2 .sbp-fam--subscriptions .sbp-shop__rail,
.sbp-med--l.sbp-var--2 .sbp-fam--subscriptions .sbp-shop__rail--2,
.sbp-med--l.sbp-var--2 .sbp-fam--subscriptions .sbp-shop__rail--1 { display: block; max-width: 860px; }
.sbp-med--l.sbp-var--2 .sbp-fam--subscriptions .sbp-shopcard { padding: 22px 2px; }
.sbp-med--l.sbp-var--2 .sbp-fam--subscriptions .sbp-shopcard__benefits { display: flex; grid-column: 1; flex-direction: column; gap: 6px; margin-top: 10px; font-size: 13.5px; }
.sbp-med--l.sbp-var--2 .sbp-fam--subscriptions .sbp-shopcard__d { -webkit-line-clamp: 2; font-size: 14px; }
.sbp-med--l.sbp-var--2 .sbp-fam--subscriptions .sbp-shopcard__price--seat { font-size: 24px; }
.sbp-med--l.sbp-var--2 .sbp-fam--subscriptions .sbp-shopcard__t { font-size: 19px; }
/* ── V3 FEATURED MEMBERSHIP — flagship plan, supporting tiers ─────────────── */
.sbp-var--3 .sbp-fam--subscriptions .sbp-shop__rail,
.sbp-var--3 .sbp-fam--subscriptions .sbp-shop__rail--2,
.sbp-var--3 .sbp-fam--subscriptions .sbp-shop__rail--1,
.sbp-var--3 .sbp-fam--subscriptions .sbp-shop__rail--solo {
display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch;
}
@container sbpsub (min-width: 640px) { .sbp-var--3 .sbp-fam--subscriptions .sbp-shop__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container sbpsub (min-width: 940px) { .sbp-var--3 .sbp-fam--subscriptions .sbp-shop__rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard {
grid-column: auto; display: flex; flex-direction: column; padding: 18px 20px 18px; gap: 0;
}
.sbp-var--3 .sbp-fam--subscriptions .sbp-shop__rail .sbp-shopcard:last-child:nth-child(even) { grid-column: auto; }
/* the flagship: full-width, warmed by the accent, never a different component */
.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:first-child {
grid-column: 1 / -1;
border-color: color-mix(in srgb, var(--sbp-acc) 42%, var(--sbp-line));
box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .5);
background: linear-gradient(180deg, color-mix(in srgb, var(--sbp-acc-soft) 62%, var(--sbp-card)) 0%, var(--sbp-card) 62%);
}
.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard__img { display: none; }
.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard__body { display: contents; }
.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard__t { order: 1; font-size: 16px; }
.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard__price--seat { order: 2; margin: 8px 0 0; font-size: 20px; }
.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard__d { order: 3; -webkit-line-clamp: 2; margin-top: 8px; }
.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard__benefits {
order: 4; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sbp-line);
}
.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard__trial { order: 5; align-self: flex-start; margin-top: 10px; }
.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard__zone--action { order: 6; margin-top: auto; padding-top: 14px; }
.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:not(:first-child) .sbp-shopcard__benefits { display: none; }
.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:first-child .sbp-shopcard__t { font-size: 21px; }
.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:first-child .sbp-shopcard__price--seat { font-size: 30px; }
.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:first-child .sbp-shopcard__d { -webkit-line-clamp: 4; }
/* wide flagship: the CARD carries the two-column split (the body is dissolved) */
@container sbpsub (min-width: 760px) {
.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:first-child {
display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
column-gap: 32px; padding: 26px 28px; align-content: start;
}
.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:first-child .sbp-shopcard__t,
.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:first-child .sbp-shopcard__price--seat,
.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:first-child .sbp-shopcard__d,
.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:first-child .sbp-shopcard__trial,
.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:first-child .sbp-shopcard__zone--action { grid-column: 1; }
.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:first-child .sbp-shopcard__benefits {
grid-column: 2; grid-row: 1 / span 5; margin-top: 4px; padding-top: 0; border-top: 0;
padding-left: 32px; border-left: 1px solid var(--sbp-line); align-self: start;
}
.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:first-child .sbp-shopcard__zone--action { margin-top: 4px; }
}
.sbp-med--m.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:first-child .sbp-shopcard__price--seat { font-size: 34px; }
.sbp-med--m.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:first-child .sbp-shopcard__t { font-size: 23px; }
.sbp-med--m.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard__price--seat { font-size: 22px; }
.sbp-med--l.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:first-child .sbp-shopcard__price--seat { font-size: 40px; }
.sbp-med--l.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:first-child .sbp-shopcard__t { font-size: 26px; }
.sbp-med--l.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:first-child .sbp-shopcard__d { -webkit-line-clamp: 6; font-size: 15px; }
.sbp-med--l.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard__price--seat { font-size: 24px; }
/* ⛔ the flagship's wide split must out-specify the M/L dial re-assertion
below (which restates every V1/V3/V7 card as a flex column at 0,7,0), so it
is restated here per dial through both image-state qualifiers — 0,8,0. */
@container sbpsub (min-width: 760px) {
.sbp-med--m.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:first-child:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--m.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:first-child:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
column-gap: 32px; padding: 28px 30px; align-content: start;
}
.sbp-med--l.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:first-child:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--l.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:first-child:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
column-gap: 40px; padding: 34px 36px; align-content: start;
}
.sbp-med--l.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:first-child .sbp-shopcard__benefits { padding-left: 40px; }
}
/* ── V4 COMPARISON TABLE — aligned plan columns, real fields only ─────────── */
.sbp-var--4 .sbp-fam--subscriptions .sbp-shop__head { border-bottom: 3px double var(--sbp-line); padding-bottom: 14px; }
.sbp-var--4 .sbp-fam--subscriptions .sbp-shop__rail,
.sbp-var--4 .sbp-fam--subscriptions .sbp-shop__rail--2,
.sbp-var--4 .sbp-fam--subscriptions .sbp-shop__rail--1,
.sbp-var--4 .sbp-fam--subscriptions .sbp-shop__rail--solo {
display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 0; align-items: stretch;
}
@container sbpsub (min-width: 520px) { .sbp-var--4 .sbp-fam--subscriptions .sbp-shop__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container sbpsub (min-width: 820px) {
.sbp-var--4 .sbp-fam--subscriptions .sbp-shop__rail:has(> .sbp-shopcard:nth-child(3):last-child),
.sbp-var--4 .sbp-fam--subscriptions .sbp-shop__rail:has(> .sbp-shopcard:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sbp-var--4 .sbp-fam--subscriptions .sbp-shop__rail:has(> .sbp-shopcard:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard {
display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; align-content: start;
background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
border-left: 1px solid var(--sbp-line); padding: 4px 16px 14px;
}
.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard:first-child { border-left: 0; padding-left: 2px; }
.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard__img { display: none; }
.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard__body { display: contents; }
.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard__t { grid-row: 1; font-size: 15px; padding-bottom: 8px; }
.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard__price--seat { grid-row: 2; font-size: 21px; padding: 10px 0; border-top: 1px solid var(--sbp-line); }
.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard__d { grid-row: 3; -webkit-line-clamp: 3; font-size: 12.5px; padding: 8px 0; border-top: 1px solid var(--sbp-line); }
.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard__benefits { grid-row: 4; padding: 10px 0; border-top: 1px solid var(--sbp-line); font-size: 12.5px; }
.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard__trial { display: none; }
.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard__zone--action { grid-row: 5; margin-top: 0; padding-top: 10px; align-self: end; }
.sbp-med--m.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard__price--seat { font-size: 24px; }
.sbp-med--m.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard__t { font-size: 16.5px; }
.sbp-med--m.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard__benefits { font-size: 13px; }
.sbp-med--l.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard { padding: 4px 20px 18px; }
.sbp-med--l.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard:first-child { padding-left: 2px; }
.sbp-med--l.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard__price--seat { font-size: 28px; }
.sbp-med--l.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard__t { font-size: 18px; }
.sbp-med--l.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard__d { -webkit-line-clamp: unset; display: block; font-size: 13.5px; }
.sbp-med--l.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard__benefits { font-size: 13.5px; gap: 8px; }
/* ── V5 BENEFITS JOURNEY — full-width bands, each plan a stage ────────────── */
.sbp-var--5 .sbp-fam--subscriptions .sbp-shop__rail,
.sbp-var--5 .sbp-fam--subscriptions .sbp-shop__rail--2,
.sbp-var--5 .sbp-fam--subscriptions .sbp-shop__rail--1,
.sbp-var--5 .sbp-fam--subscriptions .sbp-shop__rail--solo {
display: flex; flex-direction: column; gap: 14px; max-width: 900px; margin-inline: auto;
}
.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard {
display: grid; grid-template-columns: clamp(104px, 20cqw, 168px) minmax(0, 1fr);
align-items: start; column-gap: clamp(16px, 3cqw, 28px);
border: 1px solid var(--sbp-line); border-radius: var(--sbp-r-lg); background: var(--sbp-card);
padding: 18px clamp(16px, 2.6cqw, 24px); overflow: hidden;
}
.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard__img { display: none; }
.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard__body { display: contents; }
.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard__price--seat {
grid-column: 1; grid-row: 1 / span 2; align-self: start; justify-self: stretch;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
text-align: center; padding: 14px 8px; border-radius: 12px;
background: color-mix(in srgb, var(--sbp-acc-soft) 60%, transparent); font-size: 22px;
}
.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard__unit { display: block; font-size: 10.5px; }
.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard__t { grid-column: 2; font-size: 17px; }
.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard__d { grid-column: 2; -webkit-line-clamp: 2; }
.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard__benefits { grid-column: 2; }
.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard__trial { grid-column: 2; justify-self: start; }
.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard__zone--action { grid-column: 2; margin: 0; padding-top: 10px; min-height: 0; }
.sbp-med--m.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard { padding: 22px clamp(18px, 2.8cqw, 28px); }
.sbp-med--m.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard__price--seat { font-size: 26px; padding: 18px 10px; }
.sbp-med--m.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard__t { font-size: 19px; }
.sbp-med--m.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard__benefits { font-size: 13.5px; }
.sbp-med--l.sbp-var--5 .sbp-fam--subscriptions .sbp-shop__rail,
.sbp-med--l.sbp-var--5 .sbp-fam--subscriptions .sbp-shop__rail--2,
.sbp-med--l.sbp-var--5 .sbp-fam--subscriptions .sbp-shop__rail--1 { display: flex; flex-direction: column; gap: 20px; max-width: 1000px; }
.sbp-med--l.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard { padding: 28px clamp(20px, 3cqw, 34px); grid-template-columns: clamp(130px, 22cqw, 200px) minmax(0, 1fr); }
.sbp-med--l.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard__price--seat { font-size: 32px; padding: 22px 12px; }
.sbp-med--l.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard__t { font-size: 21px; }
.sbp-med--l.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard__d { -webkit-line-clamp: 3; font-size: 14.5px; }
.sbp-med--l.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard__benefits { font-size: 14px; gap: 8px; }
@container sbpsub (max-width: 520px) {
.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard,
.sbp-med--m.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard,
.sbp-med--l.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard { display: flex; flex-direction: column; gap: 8px; }
.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard__price--seat { align-self: flex-start; flex-direction: row; align-items: baseline; gap: 6px; padding: 8px 14px; }
}
/* ── V6 MEMBER PATH — an ordered ascent with a connective spine ───────────── */
.sbp-var--6 .sbp-fam--subscriptions .sbp-shop__head { display: block; text-align: center; max-width: 640px; margin-inline: auto; }
.sbp-var--6 .sbp-fam--subscriptions .sbp-shop__head .sbp-kicker { justify-content: center; }
.sbp-var--6 .sbp-fam--subscriptions .sbp-shop__rail,
.sbp-var--6 .sbp-fam--subscriptions .sbp-shop__rail--2,
.sbp-var--6 .sbp-fam--subscriptions .sbp-shop__rail--1,
.sbp-var--6 .sbp-fam--subscriptions .sbp-shop__rail--solo {
display: flex; flex-direction: column; gap: 0; max-width: 720px; margin-inline: auto;
counter-reset: sbpsubstep; position: relative;
}
.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard {
position: relative; counter-increment: sbpsubstep;
display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; align-items: start;
background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
padding: 0 0 26px;
}
.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard::before {
content: counter(sbpsubstep); grid-column: 1; grid-row: 1 / span 6;
width: 38px; height: 38px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--sbp-card); border: 2px solid var(--sbp-indicator, var(--sbp-org-display));
color: var(--sbp-acc-ink); font-weight: 800; font-size: 14px; z-index: 1;
}
/* the spine: a hairline through the markers, never past the last one */
.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard:not(:last-child)::after {
content: ""; position: absolute; left: 18px; top: 38px; bottom: 0; width: 2px;
background: color-mix(in srgb, var(--sbp-indicator, var(--sbp-org-display)) 30%, transparent);
}
.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard__img { display: none; }
.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard__body { display: contents; }
.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard__t { grid-column: 2; font-size: 17px; }
.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard__price--seat { grid-column: 2; font-size: 18px; margin: 2px 0 4px; }
.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard__d { grid-column: 2; -webkit-line-clamp: 2; }
.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard__benefits { grid-column: 2; }
.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard__trial { grid-column: 2; justify-self: start; }
.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard__zone--action { grid-column: 2; margin: 0; padding-top: 8px; min-height: 0; }
.sbp-med--m.sbp-var--6 .sbp-fam--subscriptions .sbp-shop__rail { max-width: 800px; }
.sbp-med--m.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard { grid-template-columns: 52px minmax(0, 1fr); padding-bottom: 32px; }
.sbp-med--m.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard::before { width: 46px; height: 46px; font-size: 16px; }
.sbp-med--m.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard:not(:last-child)::after { left: 22px; top: 46px; }
.sbp-med--m.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard__t { font-size: 19px; }
.sbp-med--m.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard__price--seat { font-size: 21px; }
.sbp-med--l.sbp-var--6 .sbp-fam--subscriptions .sbp-shop__rail,
.sbp-med--l.sbp-var--6 .sbp-fam--subscriptions .sbp-shop__rail--2,
.sbp-med--l.sbp-var--6 .sbp-fam--subscriptions .sbp-shop__rail--1 { max-width: 880px; }
.sbp-med--l.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard { grid-template-columns: 64px minmax(0, 1fr); column-gap: 22px; padding-bottom: 40px; }
.sbp-med--l.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard::before { width: 56px; height: 56px; font-size: 18px; }
.sbp-med--l.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard:not(:last-child)::after { left: 27px; top: 56px; }
.sbp-med--l.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard__t { font-size: 22px; }
.sbp-med--l.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard__price--seat { font-size: 24px; }
.sbp-med--l.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard__d { -webkit-line-clamp: 3; font-size: 14.5px; }
.sbp-med--l.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard__benefits { font-size: 14px; gap: 8px; }
/* ── V7 PRICING STAGE — a deep-toned stage, price as monument ─────────────── */
.sbp-var--7 .sbp-fam--subscriptions .sbp-shop__head { display: block; text-align: center; max-width: 660px; margin-inline: auto; }
.sbp-var--7 .sbp-fam--subscriptions .sbp-shop__head .sbp-kicker { justify-content: center; }
.sbp-var--7 .sbp-fam--subscriptions .sbp-shop__head .sbp-h2 { font-size: calc(clamp(26px, 3vw, 40px) * var(--sbp-type-scale, 1)); }
.sbp-var--7 .sbp-fam--subscriptions .sbp-shop__rail,
.sbp-var--7 .sbp-fam--subscriptions .sbp-shop__rail--2,
.sbp-var--7 .sbp-fam--subscriptions .sbp-shop__rail--1,
.sbp-var--7 .sbp-fam--subscriptions .sbp-shop__rail--solo {
display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch;
padding: clamp(18px, 3cqw, 34px); border-radius: calc(var(--sbp-r-lg) * 1.2);
background: radial-gradient(120% 140% at 12% 0%, color-mix(in srgb, var(--sbp-acc) 20%, var(--sbp-field-b)) 0%, var(--sbp-field-b) 62%);
}
@container sbpsub (min-width: 620px) { .sbp-var--7 .sbp-fam--subscriptions .sbp-shop__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container sbpsub (min-width: 980px) { .sbp-var--7 .sbp-fam--subscriptions .sbp-shop__rail { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } }
.sbp-var--7 .sbp-fam--subscriptions .sbp-shopcard {
background: color-mix(in srgb, var(--sbp-card) 92%, transparent);
border: 1px solid color-mix(in srgb, var(--sbp-line) 70%, transparent);
border-radius: var(--sbp-r-lg); overflow: hidden;
display: flex; flex-direction: column; align-items: center; text-align: center;
padding: 24px 20px 22px; gap: 0;
}
.sbp-var--7 .sbp-fam--subscriptions .sbp-shopcard__img { display: none; }
.sbp-var--7 .sbp-fam--subscriptions .sbp-shopcard__body { display: contents; }
.sbp-var--7 .sbp-fam--subscriptions .sbp-shopcard__t { order: 1; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.sbp-var--7 .sbp-fam--subscriptions .sbp-shopcard__price--seat { order: 2; display: block; width: 100%; font-size: 34px; line-height: 1.05; margin: 12px 0 0; }
.sbp-var--7 .sbp-fam--subscriptions .sbp-shopcard__unit { display: block; font-size: 12px; }
.sbp-var--7 .sbp-fam--subscriptions .sbp-shopcard__d { order: 3; -webkit-line-clamp: 3; margin-top: 12px; }
/* benefits: the list block spans the card so its rule is full-bleed, but the
lines themselves stay left-read — centred bullet text is hard to scan */
.sbp-var--7 .sbp-fam--subscriptions .sbp-shopcard__benefits {
order: 4; align-self: stretch; align-items: flex-start; text-align: left;
margin-top: 14px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--sbp-line) 70%, transparent);
}
.sbp-var--7 .sbp-fam--subscriptions .sbp-shopcard__trial { order: 5; margin-top: 12px; }
.sbp-var--7 .sbp-fam--subscriptions .sbp-shopcard__zone--action { order: 6; margin-top: auto; padding-top: 16px; }
.sbp-var--7 .sbp-fam--subscriptions .sbp-shopcard__go {
display: inline-flex; align-items: center; gap: 7px;
background: var(--sbp-org); color: var(--sbp-action-ink, #fff);
padding: 9px 18px; border-radius: 999px; font-size: 13px;
}
.sbp-med--m.sbp-var--7 .sbp-fam--subscriptions .sbp-shopcard__price--seat { font-size: 40px; margin: 14px 0 0; }
.sbp-med--m.sbp-var--7 .sbp-fam--subscriptions .sbp-shopcard__t { font-size: 16px; }
.sbp-med--l.sbp-var--7 .sbp-fam--subscriptions .sbp-shop__rail,
.sbp-med--l.sbp-var--7 .sbp-fam--subscriptions .sbp-shop__rail--2,
.sbp-med--l.sbp-var--7 .sbp-fam--subscriptions .sbp-shop__rail--1 { gap: 20px; padding: clamp(24px, 4cqw, 48px); }
.sbp-med--l.sbp-var--7 .sbp-fam--subscriptions .sbp-shopcard__price--seat { font-size: 48px; margin: 16px 0 0; }
.sbp-med--l.sbp-var--7 .sbp-fam--subscriptions .sbp-shopcard__t { font-size: 17px; }
.sbp-med--l.sbp-var--7 .sbp-fam--subscriptions .sbp-shopcard__d { -webkit-line-clamp: 4; font-size: 14.5px; margin-top: 14px; }
.sbp-med--l.sbp-var--7 .sbp-fam--subscriptions .sbp-shopcard__benefits { font-size: 14px; gap: 8px; margin-top: 18px; padding-top: 18px; }
/* ── FAMILY MOBILE LAW ────────────────────────────────────────────────────── */
@media (max-width: 760px) {
.sbp-var--1 .sbp-fam--subscriptions .sbp-shop__rail,
.sbp-var--3 .sbp-fam--subscriptions .sbp-shop__rail,
.sbp-var--7 .sbp-fam--subscriptions .sbp-shop__rail { grid-template-columns: minmax(0, 1fr); }
.sbp-var--4 .sbp-fam--subscriptions .sbp-shop__rail { grid-template-columns: minmax(0, 1fr); }
.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard,
.sbp-med--m.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard,
.sbp-med--l.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard {
display: grid; grid-template-rows: none; grid-row: auto;
border-left: 0; border-top: 1px solid var(--sbp-line); padding: 14px 2px 16px;
}
.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard:first-child { border-top: 0; }
.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard__t,
.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard__price--seat,
.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard__d,
.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard__benefits,
.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard__zone--action { grid-row: auto; border-top: 0; padding-top: 4px; padding-bottom: 4px; }
.sbp-var--2 .sbp-fam--subscriptions .sbp-shopcard { grid-template-columns: minmax(0, 1fr) minmax(88px, max-content); column-gap: 12px; }
}
/* ═══ end CHL:BP_MEMBERSHIPS_PREMIUM_FAMILY v1 ═══ */
/* ── ⛔ DIAL RE-ASSERTION (the defect this zone was built to survive) ───────
MEASURED: every Memberships card is imageless, and the generic
PM_FINAL v2.0.2 rule turns an imageless card at M/L into a two-column grid
(`minmax(150px,36%) minmax(0,1fr)`) so the designed tone panel can sit
beside the content. This family hides the media zone entirely, so that
phantom column stole ~150px and squeezed the body to 94px — content then
overflowed its own card (V7 M/L, measured at 320/1280/1440).
The generic rule reaches (0,6,0) through `:has()`, so each composition
re-states its card geometry at M and L through BOTH image-state
qualifiers — (0,7,0) — which wins on specificity with no `!important`
and no reliance on source order. */
/* V1/V3/V7 dissolve the body (SEAT LAW), so the CARD owns padding and
alignment — both must be restated at (0,7,0) alongside the display fix. */
.sbp-med--m.sbp-var--1 .sbp-fam--subscriptions .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--m.sbp-var--1 .sbp-fam--subscriptions .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: flex; flex-direction: column; grid-template-columns: none; padding: 24px 24px 22px; gap: 0;
}
.sbp-med--l.sbp-var--1 .sbp-fam--subscriptions .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--l.sbp-var--1 .sbp-fam--subscriptions .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: flex; flex-direction: column; grid-template-columns: none; padding: 28px 28px 26px; gap: 0;
}
.sbp-med--m.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--m.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: flex; flex-direction: column; grid-template-columns: none; padding: 20px 22px 20px; gap: 0;
}
.sbp-med--l.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--l.sbp-var--3 .sbp-fam--subscriptions .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: flex; flex-direction: column; grid-template-columns: none; padding: 22px 24px 22px; gap: 0;
}
.sbp-med--m.sbp-var--7 .sbp-fam--subscriptions .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--m.sbp-var--7 .sbp-fam--subscriptions .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: flex; flex-direction: column; grid-template-columns: none;
align-items: center; text-align: center; padding: 28px 24px 26px; gap: 0;
}
.sbp-med--l.sbp-var--7 .sbp-fam--subscriptions .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--l.sbp-var--7 .sbp-fam--subscriptions .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: flex; flex-direction: column; grid-template-columns: none;
align-items: center; text-align: center; padding: 34px 28px 30px; gap: 0;
}
.sbp-med--m.sbp-var--2 .sbp-fam--subscriptions .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--m.sbp-var--2 .sbp-fam--subscriptions .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)),
.sbp-med--l.sbp-var--2 .sbp-fam--subscriptions .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--l.sbp-var--2 .sbp-fam--subscriptions .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(96px, max-content); align-items: center;
}
.sbp-med--m.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--m.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)),
.sbp-med--l.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--l.sbp-var--4 .sbp-fam--subscriptions .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: grid; grid-template-rows: subgrid; grid-row: span 5; grid-template-columns: none; align-content: start;
}
.sbp-med--m.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--m.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: grid; grid-template-columns: clamp(104px, 20cqw, 168px) minmax(0, 1fr); align-items: start;
}
.sbp-med--l.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--l.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: grid; grid-template-columns: clamp(130px, 22cqw, 200px) minmax(0, 1fr); align-items: start;
}
.sbp-med--m.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--m.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start;
}
.sbp-med--l.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--l.sbp-var--6 .sbp-fam--subscriptions .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start;
}
/* the generic imageless-card media panel must never reappear in this family */
.sbp-med--m .sbp-fam--subscriptions .sbp-shopcard .sbp-shopcard__img.is-empty,
.sbp-med--l .sbp-fam--subscriptions .sbp-shopcard .sbp-shopcard__img.is-empty { display: none; }
@container sbpsub (max-width: 520px) {
.sbp-med--m.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--m.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)),
.sbp-med--l.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard:has(> .sbp-shopcard__zone--media.is-empty),
.sbp-med--l.sbp-var--5 .sbp-fam--subscriptions .sbp-shopcard:not(:has(> .sbp-shopcard__zone--media.is-empty)) {
display: flex; flex-direction: column; gap: 8px;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CHL:BP_EVENTS_PREMIUM_FAMILY v1 — seven date-native compositions over the
vendor's real `events` records (published + upcoming only; the honesty
filter in sbp_offerings already refuses the past).
V1 Event Cards · V2 Agenda List · V3 Featured + Upcoming ·
V4 Chronological Timeline · V5 Poster Wall · V6 Editorial Programme ·
V7 Event Stage.
LAWS
· Scope `.sbp-fam--events`; composition follows the SECTION, not the kind.
· @container (sbpev) drives every multi-column decision — canvas ≠ viewport.
· S implicit; M/L additive, and every card-level M/L geometry is re-asserted
through BOTH image-state qualifiers to beat the generic PM_FINAL v2.0.2
imageless-card grid (which would otherwise steal a phantom media column).
· `overflow-wrap: anywhere` on text: `break-word` does not shrink min-content.
· Events NEVER show a price; "Sold out" is a state and may appear.
· The date plate is a real