/*---------------- Blockbuilder design tokens (relative only — tenant CSS owns colour/type) ----------------*/
/* Accelerator tokens (Design Studio Advanced pane): what Small/Medium/
Large SPACING and the two width words MEAN for this site — themeable
per site via --theme-* (historic literals as fallbacks; an unset theme
is byte-identical). Blocks store the var reference, so a redefinition
re-styles every block that ever picked that word — retroactively, by
design. */
.blk-page { --blk-space-xs:var(--theme-space-xs, .5rem); --blk-space-s:var(--theme-space-s, 1rem); --blk-space-m:var(--theme-space-m, 1.75rem); --blk-space-l:var(--theme-space-l, 3rem); --blk-space-xl:var(--theme-space-xl, 5rem);
--blk-radius-s:var(--theme-radius-s, 4px); --blk-radius-m:var(--theme-radius-m, 10px); --blk-radius-l:var(--theme-radius-l, 20px);
--blk-content:min(var(--theme-content-w, 46rem), 100cqw); --blk-gap:var(--blk-space-m); --blk-rhythm:var(--blk-space-m);
container-type:inline-size; } /* 100cqw = the page column (the viewport on the clean shell) */
/*-- vertical rhythm: siblings breathe; grid/column cells manage their own flow.
Rhythm rides its OWN var: --blk-gap is also each block's cell/track gap,
so a child that sets its own Gap inline (a grid, a band tightening its
contents) shadows the inherited value — margin-top:var(--blk-gap) then
read the child's INNER gap for the space ABOVE it, and a Gap:None
wrapper could never make such a child sit flush. Container Gap sets
BOTH: --blk-gap for the cells, --blk-rhythm for the flow between
children; self-set cell gaps never leak into the rhythm. --*/
.blk-page .blk + .blk { margin-top:var(--blk-rhythm); }
/* No measure cap on text blocks — reading width is the CONTAINER's job
(Width = Reading); a second route here left text stopping at 46rem
inside full-width layouts (folder template, 2026-07-24). */
/* heading pairs stay deliberately tight — but they FOLLOW Gap Inside
downward (min), else a container's rhythm control looks dead on the
most common pairing (heading + text): flush means flush */
.blk-page .blk-heading + .blk { margin-top:min(var(--blk-rhythm), var(--blk-space-s)); }
/* Space After (theme, per heading level / named style): the heading OWNS
its trailing edge — --blk-sa is its margin and the next block's rhythm
stands down, so the theme's number is the whole distance whether the
container flows (margins collapse) or aligns (they add). The Middle /
Bottom trailing trim further down still wins a tie. Unset keeps the
pairing rule above. */
.blk-page .blk:is(.blk-heading, .blk-text).-sa { margin-bottom:var(--blk-sa); }
.blk-page :is(.blk-heading, .blk-text).-sa + .blk { margin-top:0; }
/* An empty choice-bound block (product page: no code, no stock message)
leaves a hidden .blk-slot so a later choice can swap its content in. The
rhythm passes over the slot: the next block spaces from the one before it
exactly as if the slot were absent. */
.blk-page .blk + .blk-slot + .blk { margin-top:var(--blk-rhythm); }
.blk-page .blk-heading + .blk-slot + .blk { margin-top:min(var(--blk-rhythm), var(--blk-space-s)); }
.blk-page :is(.blk-heading, .blk-text).-sa + .blk-slot + .blk { margin-top:0; }
.blk-page .blk-container:is(.-vmid, .-vbot) > :has(+ .blk-slot:last-child)
{ margin-bottom:0; }
/* Middle/Bottom mean what they say: the stack's trailing margin (a lone
hero h1's .8em base margin = 20px off-centre at 50px type) must not
count toward vertical centring — the pane said Middle, so render
middle. Top alignment keeps the margin: it reads as flow there. */
/* Placement: Overlay — the block leaves the flow and pins to a corner of
its container (badge over a photo, ribbon, play button). The container
that HOLDS an overlay becomes the positioning context via :has, so no
prop is needed on the parent. Offset still nudges from the corner. */
.blk-page .blk-container:has(> .-ovl) { position:relative; }
.blk-page .-ovl { position:absolute; z-index:2; margin:0 !important;
/* .blk-container is width:100% for the flow; an overlay sizes to its
own content instead (a badge, a ribbon), and a full-width overlay
band is said by giving the overlay a Width instead */
width:auto; }
.blk-page .-ovl-tl { top:0; left:0; }
.blk-page .-ovl-tr { top:0; right:0; }
.blk-page .-ovl-bl { bottom:0; left:0; }
.blk-page .-ovl-br { bottom:0; right:0; }
.blk-page .-ovl-c { top:50%; left:50%; translate:-50% -50%; }
/* A literal Gap Inside (None, or a custom length) is EXACT: the rhythm
owns margin-top between blocks, so a child's OWN bottom margin (a
heading's .8em) must not add to the gap the operator stated. Scoped to
the container that asked. */
.blk-page .blk-container.-flush > .blk:not(.-sa) { margin-bottom:0; } /* a themed Space After is deliberate, not a stray base margin */
.blk-page .blk-container.-vmid > :last-child,
.blk-page .blk-container.-vbot > :last-child
{ margin-bottom:0; }
/* Vertical Alignment = Fill: the children grow to the box's height (an
equal share each); a grid child then stretches its own row and slots */
.blk-page .blk-container.-vfill > .blk { flex:1 1 auto; min-height:0; }
/* a text block's last paragraph carries the theme's 1em bottom margin,
which collapses through the (paddingless) block and shows as dead
space at the foot of a padded container or slot — the card case. The
rhythm margin above the next block supplies the flow spacing. */
.blk-page .blk-text > :last-child { margin-bottom:0; }
/* lists keep the paragraph's rhythm below them (the base sheet gives
them a fraction of it) */
.blk-page .blk-text > ul,
.blk-page .blk-text > ol { margin-bottom:1em; }
/* an inline image in text (a bound legacy body holds camera-size photos)
never outgrows its block */
.blk-page :is(.blk-text, .blk-html) img { max-width:100%; height:auto; }
/* iframes in text never outgrow the column. A player pasted at a fixed size
keeps that width and shape (TextType::sizedFrames inlines both); one with
no size goes full width at 16:9. A padding-ratio wrapper (inline
padding-bottom or padding-top) already sizes its iframe, so the ratio
stands down there. */
.blk-page :is(.blk-text, .blk-html) iframe { max-width:100%; }
.blk-page :is(.blk-text, .blk-html) iframe:is([src*="youtube.com/embed"], [src*="youtube-nocookie.com/embed"], [src*="player.vimeo.com"], [src*="dailymotion.com/embed"], [src*="facebook.com/plugins/video"], [src*="fast.wistia"], [src*="loom.com/embed"], [src*="streamable.com"], [src*="rumble.com/embed"])
{ display:block; width:100%; height:auto; aspect-ratio:16 / 9; }
.blk-page :is(.blk-text, .blk-html) :is([style*="padding-bottom"], [style*="padding-top"]) > iframe
{ height:100%; aspect-ratio:auto; }
/* a sized player is a block, so its paragraph's alignment reaches it through its margins */
.blk-page :is(.blk-text, .blk-html) :is([style*="text-align:center"], [style*="text-align: center"], [align="center"]) > iframe
{ margin-inline:auto; }
.blk-page :is(.blk-text, .blk-html) :is([style*="text-align:right"], [style*="text-align: right"], [align="right"]) > iframe
{ margin-left:auto; }
/* Lists (theme element): every token chains to the base sheet's literal,
so an unset theme renders as it always has. An icon bullet is the
.thm-ic idea — a mask painted in the marker colour — hung in the indent;
unset, its mask is fully transparent and, being out of flow, it costs
the line nothing. Two vars ride with the icon: -native stands the
native bullet down, and -k (1) floors the indent at the icon's own
width, so it never hangs outside the block. A sized plain bullet rides
the same ::before (the theme's shape mask, -shape-k floor): a bigger
::marker glyph would grow the line and ride its baseline. */
.blk-page :is(.blk-text, .blk-html, .blk-sitemap) ul { list-style-type:var(--theme-list-icon-native, var(--theme-list-marker, square)); }
.blk-page :is(.blk-text, .blk-html, .blk-sitemap) :is(ul, ol) > li
{ position:relative; margin-left:var(--theme-list-indent, 1em); font-family:var(--theme-list-font, inherit); line-height:var(--theme-list-line-height, inherit);
& + li { margin-top:var(--theme-list-gap, 0); }
&::marker { color:var(--theme-list-marker-color); }
}
.blk-page :is(.blk-text, .blk-html) ol > li + li { margin-top:var(--theme-list-num-gap, var(--theme-list-gap, 0)); }
/* Marker Size is the bullet's: a number that size would tower off the
text's baseline. Numbers take their own type (the studio's Lists ›
Numbers); each unset var inherits the item's. */
.blk-page :is(.blk-text, .blk-html) ol > li::marker
{ color:var(--theme-list-num-color, var(--theme-list-marker-color)); font-family:var(--theme-list-num-font); font-size:var(--theme-list-num-size); font-weight:var(--theme-list-num-bold); font-style:var(--theme-list-num-italic); }
.blk-page :is(.blk-text, .blk-html, .blk-sitemap) ul > li
{ margin-left:max(var(--theme-list-indent, 1em), (var(--theme-list-marker-size, 1em) + 0.4em) * max(var(--theme-list-icon-k, 0), var(--theme-list-shape-k, 0)));
&::marker { font-size:var(--theme-list-marker-size); }
}
/* A numbered list's indent holds a one-digit number; "10." and "100."
would hang past the block's edge. Once the list is that long, its
indent widens to the number, and Indent still wins if set wider. */
.blk-page :is(.blk-text, .blk-html) ol:has(> li:nth-child(10)) > li
{ margin-left:max(var(--theme-list-indent, 1em), 1.7em); }
.blk-page :is(.blk-text, .blk-html) ol:has(> li:nth-child(100)) > li
{ margin-left:max(var(--theme-list-indent, 1em), 2.3em); }
.blk-page :is(.blk-text, .blk-html, .blk-sitemap) ul > li::before
{ content:''; position:absolute; --ic:var(--theme-list-marker-size, 1em); left:calc(-1 * var(--ic) - 0.4em); top:calc((1lh - var(--ic)) / 2); width:var(--ic); height:var(--ic); background:var(--theme-list-marker-color, currentColor); -webkit-mask:var(--theme-list-icon, var(--theme-list-sized-mask, linear-gradient(#0000, #0000))) center/contain no-repeat; mask:var(--theme-list-icon, var(--theme-list-sized-mask, linear-gradient(#0000, #0000))) center/contain no-repeat; }
/* grid/column cells sit side by side — no sibling rhythm. Carousel and
banner TRACK children too: slides ride the track (or stack, in fade/
banner mode) and the sibling margin pushed every slide after the first
down by --blk-gap — glaring once fade stacked them. .blk-page prefix +
last position so it beats BOTH (0,3,0) rules above */
.blk-page .blk-grid > .blk,
.blk-page .blk-columns > .blk,
.blk-page .blk-gallery-grid > .blk,
.blk-page .blk-car-track > .blk,
.blk-page .blk-banner-track > .blk { margin-top:0; }
/*---------------- Blockbuilder block primitives ----------------*/
/* Background focal points: inline styles set the --blk-bgpos vars; the
media query switches to the mobile point — which inline
background-position could never do. Harmless on blocks without a
background image. */
.blk-page .blk { background-position:var(--blk-bgpos,50% 50%); }
@media (max-width:768px) {
.blk-page .blk { background-position:var(--blk-bgpos-m,var(--blk-bgpos,50% 50%)); }
}
/* Parallax on touch: iOS sizes a fixed-attachment cover against the
viewport, not the band. Touch screens take the plain cover background;
!important because the attachment is inline. */
@media (hover:none), (pointer:coarse) {
.blk-page .blk[style*="background-attachment:fixed"] { background-attachment:scroll !important; }
}
/* Show On (device visibility): the renderer stamps data-blk-show on the
live render only — the editor canvas ghosts instead (block_editor.css).
display:none removes the box but the node is still a .blk sibling, so
.blk + .blk rhythm still lands on the next band (a desktop-only header
above a mobile-only one left an empty slice on the phone; reverse the
order and there is no predecessor). Zero the gap after a hidden Show On.
Columns keep their track template until they STACK (640cqw phones /
900cqw tablets) — Show On hides at 768px VIEWPORT, so a desktop-only
sidebar slot (the 270px nav column) was display:none while its track
still reserved space. Collapse the row to 1fr whenever a direct-child
slot is the one being hidden. Put Show On on the SLOT, not an inner
block, or the track cannot see it. */
@media (max-width:768px) {
.blk-page [data-blk-show='desk'] { display:none !important; }
.blk-page [data-blk-show='desk'] + .blk,
.blk-page [data-blk-show='desk'] + .blk-slot + .blk
{ margin-top:0; }
.blk-page .blk-columns:has(> [data-blk-show='desk']) { grid-template-columns:1fr; }
}
@media (min-width:769px) {
html:not(.nav-collapsed) .blk-page [data-blk-show='mob'],
:not(#header) > .blk-page [data-blk-show='mob']
{ display:none !important; }
html:not(.nav-collapsed) .blk-page [data-blk-show='mob'] + .blk,
:not(#header) > .blk-page [data-blk-show='mob'] + .blk,
:not(#header) > .blk-page [data-blk-show='mob'] + .blk-slot + .blk
{ margin-top:0; }
html:not(.nav-collapsed) .blk-page .blk-columns:has(> [data-blk-show='mob']),
:not(#header) > .blk-page .blk-columns:has(> [data-blk-show='mob'])
{ grid-template-columns:1fr; }
}
/* The collapsed header form: when the main nav no longer fits on one row
(nav_fit.js sets .nav-collapsed on , from 769px up), the HEADER
tree takes its phone Show On — Desktop Only hides, Mobile Only shows.
Page content and the footer keep the width rule above. A measurement
pass (.nav-fit-measure) shows the desktop bands again for its length
without hiding what is on screen, so nothing visible restarts. */
html.nav-collapsed:not(.nav-fit-measure) #header > .blk-page [data-blk-show='desk']
{ display:none !important; }
html.nav-collapsed:not(.nav-fit-measure) #header > .blk-page [data-blk-show='desk'] + .blk
{ margin-top:0; }
html.nav-collapsed:not(.nav-fit-measure) #header > .blk-page .blk-columns:has(> [data-blk-show='desk'])
{ grid-template-columns:1fr; }
/* Pin the box model — tenant stylesheets may or may not carry a global
border-box reset, and block behaviour must not vary by site. Blocks are
border-box, width words included: padding stays inside the box, so a
padded band never pokes past its column or the glass (the honest-box
ruling — see the Page/Wide/Reading rule below). */
.blk-page .blk { box-sizing:border-box; }
/* Responsive columns: --blk-cols is the CAP, --blk-colmin (when set) is
the drop point. The minmax track floor is EITHER the exact Nth share
(colmin unset/0 → exactly N columns, the original behaviour) OR the
minimum width — auto-fill then fits as many as space allows, never
more than N. The -0.5px guards float rounding at the exact-N width. */
.blk-grid { display:grid; gap:var(--blk-gap,1rem);
grid-template-columns:repeat(auto-fill, minmax(max(var(--blk-colmin,0px), calc((100% - (var(--blk-cols,2) - 1) * var(--blk-gap,1rem)) / var(--blk-cols,2) - 0.5px)), 1fr)); }
/* Fit Content: one row, each track only as wide as its own content —
a header cluster, a button pair, a payment-icon strip. The auto-fill
recipe above cannot express this (its track floor is a percentage
calc), hence a class rather than another --blk-cols value. Narrow
containers fall back to wrapping rather than overflowing. */
.blk-grid.-fit { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(min-content, max-content); justify-content:start; align-items:center; }
/* a sized image's min(width, 100%) cap drops out of shrink-to-fit sizing (a Fit track, an overlay), so the figure states the width itself */
.blk-grid.-fit > .blk-image[style*="--blk-imgmax"],
.blk-page :is(.-ovl > .blk-image, .blk-image.-ovl)[style*="--blk-imgmax"] { max-width:var(--blk-imgmax); }
/* The header is exempt: a phone header is always that narrow, and its
clusters (flag + search, menu + basket) are small by nature. */
@container (max-width:520px) {
.blk-grid.-fit:not(#header .blk-grid) { grid-auto-flow:row; grid-auto-columns:auto; }
}
.blk-columns { display:grid; grid-template-columns:var(--blk-cols-template,1fr 1fr); gap:var(--blk-gap,1rem);
/* tenant-proof (same defence as the img rule above): the legacy
Foundation grid in responsive.css carries
`[class*=column]+[class*=column]:last-child{float:right}`, and
`blk-columns` matches that attribute selector — so the SECOND and
last Columns block in any container floated right and shrink-wrapped
to its content (Holy Trinity's composed event card, 2026-08-28). */
float:none; }
/* …and it must WIN: the Foundation selector is (0,3,0) and ours is not,
so this is !important for the same reason the img rule above is —
legacy sheets tie or beat block selectors on load order. */
.blk-page .blk-columns { float:none !important; }
/* a track's floor is zero, not its content's min-content: a wide table or
a thumbs strip would otherwise grow its fr track past the row */
.blk-columns > * { min-width:0; }
/* Columns stacking — container queries against .blk-page (the page
column, not the viewport): a narrow band stacks even on wide screens.
Default stacks on phone widths; -stack-tablet earlier; -stack-never
opts out entirely. */
@container (max-width:640px) {
.blk-columns:not(.-stack-never) { grid-template-columns:1fr; }
/* Stacked Order: Right First — an alternating image|text / text|image
page stays image,text,image,text once stacked (designers' ask).
Order the SECOND track first; two-column rows only need the flip
on one child, and deeper tracks keep source order after it. */
.blk-columns.-stack-swap:not(.-stack-never) > .blk:first-child { order:1; }
}
@container (max-width:900px) {
.blk-columns.-stack-tablet { grid-template-columns:1fr; }
.blk-columns.-stack-tablet.-stack-swap > .blk:first-child { order:1; }
}
/* Column Rule: a line drawn in the GAP between tracks, on each item's
leading edge (::before = left, ::after = top), so tracks never move.
Weight / style / colour chain to the theme Divider tokens; Rule Length
is the line's run along the gap, centred on the item. Columns is
one row (every item but the first); Grid knows its count (-rnN), so
nth-child exempts the first column and the first row. */
.blk-columns.-rule, .blk-grid.-rule { --blk-rule:var(--blk-rule-w, var(--theme-divider-weight, 1px)) var(--blk-rule-style, solid) var(--blk-rule-c, var(--theme-divider-color, #ccc));
/* the pseudo lives on the ITEM, whose own --blk-gap (a slot's stacked
spacing) would otherwise be the one read — pin the track gap here */
--blk-rule-gap:var(--blk-gap, 1rem);
> * { position:relative; }
> *::before, > *::after { content:""; position:absolute; pointer-events:none; display:none; }
> *::before { top:50%; height:var(--blk-rule-len, 100%); left:calc(var(--blk-rule-gap) / -2); transform:translate(-50%, -50%); border-left:var(--blk-rule); }
> *::after { left:50%; width:var(--blk-rule-len, 100%); top:calc(var(--blk-rule-gap) / -2); transform:translate(-50%, -50%); border-top:var(--blk-rule); }
}
/* Content length: the line spans the item's content box — inset by its
own padding shorthand (--blk-pad0, emitted beside padding). Reset on
the item so an ancestor's value never inherits in. */
.blk-columns.-rule-fit, .blk-grid.-rule-fit {
> * { --blk-pad0:0; }
> *::before { inset:var(--blk-pad0); left:calc(var(--blk-rule-gap) / -2); right:auto; height:auto; transform:translateX(-50%); }
> *::after { inset:var(--blk-pad0); top:calc(var(--blk-rule-gap) / -2); bottom:auto; width:auto; transform:translateY(-50%); }
}
.blk-columns.-rule > * + *::before { display:block; }
.blk-grid.-rule:not(.-rule-rows) > *::before { display:block; }
.blk-grid.-rule-rows > *::after,
.blk-grid.-rule-both > *::after { display:block; }
.blk-grid.-rn1 > *::before,
.blk-grid.-rn2 > :nth-child(2n+1)::before,
.blk-grid.-rn3 > :nth-child(3n+1)::before,
.blk-grid.-rn4 > :nth-child(4n+1)::before,
.blk-grid.-rn5 > :nth-child(5n+1)::before,
.blk-grid.-rn6 > :nth-child(6n+1)::before { display:none; }
.blk-grid.-rn1 > :nth-child(-n+1)::after,
.blk-grid.-rn2 > :nth-child(-n+2)::after,
.blk-grid.-rn3 > :nth-child(-n+3)::after,
.blk-grid.-rn4 > :nth-child(-n+4)::after,
.blk-grid.-rn5 > :nth-child(-n+5)::after,
.blk-grid.-rn6 > :nth-child(-n+6)::after { display:none; }
/* stacked Columns: the separation is the point, so the rule turns
horizontal (between the stacked items); Swapped puts the DOM-first
item second, so the rule moves onto it */
@container (max-width:640px) {
.blk-columns.-rule:not(.-stack-never) > * + *::before { display:none; }
.blk-columns.-rule:not(.-stack-never) > * + *::after { display:block; }
.blk-columns.-rule.-stack-swap:not(.-stack-never) > :nth-child(2)::after { display:none; }
.blk-columns.-rule.-stack-swap:not(.-stack-never) > :first-child::after { display:block; }
}
@container (max-width:900px) {
.blk-columns.-rule.-stack-tablet > * + *::before { display:none; }
.blk-columns.-rule.-stack-tablet > * + *::after { display:block; }
.blk-columns.-rule.-stack-tablet.-stack-swap > :nth-child(2)::after { display:none; }
.blk-columns.-rule.-stack-tablet.-stack-swap > :first-child::after { display:block; }
}
.blk-container { margin-inline:auto; width:100%; }
/* inside a parent that sets Horizontal Alignment (flex + align-items),
the child container must not self-centre: flex auto margins absorb
free space BEFORE alignment gets a say, so a Reading-width container
ignored the parent's Left/Right. Alignment-parent decides. */
.blk-page .blk[style*="align-items"] > .blk-container { margin-inline:0; }
/* Full Bleed: break out of the page column to the viewport edge (the
full-width-gallery idea as a container option). 100vw includes the
scrollbar — pair with overflow-x:hidden on the page shell if a sliver
of horizontal scroll appears. */
/* Full (Bleed) RETIRED 2026-08-29 (operator: "clean clean clean"): it
resolved to width:100% in every context — at the top level, where
.blk-page is already viewport-wide on the clean shell, AND nested inside
a Page column, where it filled rather than broke out. That made it a
second way to say Section. The 100vw + negative-margin breakout it was
invented for was removed in v14 as damaging (Denmead phone footer,
2026-08-17). A strip that paints to the glass is a Section band with a
Page inner. */
/* Page / Wide / Reading: HONEST BOXES (operator ruling 2026-08-18 —
supersedes both the viewport-shrink model and the padding-outside-
the-column model; both fought the box). The width word IS the box:
background (colour or image) fills it edge to edge, padding insets
the content, border-box keeps the padding INSIDE the column so a
padded Page band on a phone is glass-wide, never overflowing. The
theme's Side Gutter (--theme-page-pad) is only the DEFAULT
padding-inline, and on PAGE ALONE (operator, after use 2026-08-19:
Page is the width that meets the glass; Wide/Reading usually nest
inside a Page band, where a second default compounded the inset) —
any explicit Padding on the container is an inline shorthand and
overrides it wholesale (padding:0 = truly none; 40px 0 MEANS zero
sides). Full and Section never take the default: Full is deliberate
glass paint, Section fills its parent and rides the parent's inset.
A to-the-glass colour strip is still Full wrapping Page. */
.blk-page .blk-container.-page,
.blk-page .blk-container.-reading { box-sizing:border-box; }
.blk-page .blk-container.-page { max-width:min(var(--theme-page-width, 100cqw), 100cqw); margin-inline:auto; padding-inline:var(--theme-page-pad, 0px); }
/* Background Video (Container): a muted looping layer under the children.
z-index:0 makes the container its own stacking context, so the -1 video
paints above the element's OWN background (colour/image = the poster
while frames load, and what reduced-motion visitors keep) and below
every child. Same focal vars as background images. */
.blk-container.-hasvid { position:relative; z-index:0;
> .blk-bgvid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--blk-bgpos,50% 50%); z-index:-1; pointer-events:none; }
}
@media (max-width:768px) {
.blk-container.-hasvid > .blk-bgvid { object-position:var(--blk-bgpos-m,var(--blk-bgpos,50% 50%)); }
}
/* Extend Behind The Page Header (Trinity pattern, block half): pull the
band up by the header's height so its media runs to the viewport top.
The SHELL completes it — default.js measures #header into
--blk-header-h on :root and site_shell.css stacks the header above
the slid-under band; a translucent header background lets the media
show through. Pages with no such band see no change (calc resolves
to 0). Frontend-only class: the editor canvas has no site header to
slide under. Scoped to #main-content: the compiled header/footer
fields are .blk-page trees too, and the flag on a band INSIDE the
header made it pull ITSELF up by its own height — off-screen, and a
feedback loop while its height was observed (Ilkley, 2026-08-20).
The pull engages only when the band actually LEADS with media — a
direct-child gallery (an empty bound banner renders nothing, so on
bannerless fleet pages the flag quietly stands down instead of
tucking the h1 under the header), the band's own background image,
or a video hero (-hasvid on the band itself or its direct child —
the video-hero-is-container pattern, Bellevue home), a direct-child
carousel or embed. Desktop Only (-uh-desk) pulls at the Show On
desktop width; phones keep the band below the header. */
#main-content .blk-container.-under-header:not(.-uh-desk):is(:has(> .blk-gallery-grid, > .blk-carousel, > .blk-embed, > .-hasvid), .-hasvid, [style*="background-image"])
{ margin-top:calc(0px - var(--blk-header-h, 0px)); }
@media (min-width:769px) {
#main-content .blk-container.-under-header.-uh-desk:is(:has(> .blk-gallery-grid, > .blk-carousel, > .blk-embed, > .-hasvid), .-hasvid, [style*="background-image"])
{ margin-top:calc(0px - var(--blk-header-h, 0px)); }
}
/* Pin While Scrolling (Interactions V2): the vnav pattern — a container
in a page-body column pins under the sticky header while its row's
neighbours scroll, and releases when its grid area runs out (native
sticky containment — no JS). --blk-stick-h is the STICKY header's
height (default.js; 0 when the header scrolls away, so the pin goes
to the glass top). On a direct columns child the slot must hug its
content or its grid area IS the full row and sticky has nowhere to
move. Live-only class: the editor canvas never traps blocks. */
#main-content .blk-container.-pin-scroll { position:sticky; top:calc(var(--blk-stick-h, 0px) + var(--blk-space-s, 12px)); }
.blk-columns > .-pin-scroll { align-self:start; }
/* When Pinned (Container, interactions family): the band's inline style
re-emits background/padding through --blk-bg/--blk-pad vars (fallback
chain to the --blk-*0 originals), and the pinned header redefines
them. Solid strips the alpha in CSS — relative color reads the
ORIGINAL value (a swatch var included), so a palette change keeps
both states honest; browsers without relative color simply keep the
translucent band. Compact swaps in the pre-computed 40%-vertical
shorthand. Only #header.is-stuck arms any of it: no sticky header,
no editor canvas, no page-body effect. */
/* the solid twin is a pre-computed LITERAL (--blk-bg-stuck from
ContainerType) — never a relative color: browsers refuse to
interpolate a transition into rgb(from var(...) ...) and the fade
wedged at the start value forever (Chrome + Firefox, 2026-08-20) */
#header.is-stuck [data-blk-stuck~="solid"] { --blk-bg:var(--blk-bg-stuck); }
#header.is-stuck [data-blk-stuck~="compact"] { --blk-pad:var(--blk-pad-stuck); }
/* the classic shrinking header shrinks its LOGO too: sized images in a
compact band scale to 75% of their own width (ImageType emits the
--blk-imgw0 pair; unsized images have no pair and are untouched) */
#header.is-stuck [data-blk-stuck~="compact"] .blk-image img
{ --blk-imgw:calc(var(--blk-imgw0, 100%) * 0.75); }
#header [data-blk-stuck] { transition:background-color 0.25s ease, padding 0.25s ease; }
#header [data-blk-stuck] .blk-image img { transition:max-width 0.25s ease; }
@media (prefers-reduced-motion: reduce) {
#header [data-blk-stuck],
#header [data-blk-stuck] .blk-image img
{ transition:none; }
}
/* Scroll Cue: the hero "more below" chevron — white over photography with
a gentle bob (stilled for reduced-motion visitors); blocks.js scrolls
to whatever follows the container (delegated click) */
.blk-container.-cue { position:relative; }
.blk-scroll-cue { position:absolute; left:50%; bottom:0.9em; z-index:1; width:2.6em; height:2.6em; margin-left:-1.3em; padding:0; border:0; background:transparent; cursor:pointer; color:#fff;
svg { width:100%; height:100%; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
animation:blk-cue-bob 2.2s ease-in-out infinite;
}
@keyframes blk-cue-bob { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(7px); } }
@media (prefers-reduced-motion: reduce) {
.blk-scroll-cue { animation:none; }
}
.blk-heading { scroll-margin-top:2rem; }
.blk-image { margin:0;
img { display:block; max-width:100%; height:auto; }
/* Media block, video src: the player sizes to the file's own frame once
metadata lands, capped by the figure — same rhythm as an image */
video { display:block; max-width:100%; height:auto; }
figcaption { font-size:0.9em; color:#666; padding-top:0.3em; }
/* Corners round the figure's box; with a caption underneath, that box
ends below the image, so the image wears the same radius itself */
&:has(> figcaption) > img,
&:has(> figcaption) > video { border-radius:inherit; }
/* a Max Width image is narrower than its figure, so Corners must
round the image itself */
&[style*="--blk-imgmax"] img,
&[style*="--blk-imgmax"] video { border-radius:inherit; }
}
/* Arc (Media block): the wrapper is the media's exact size; the media clips
to a pill on a box grown by the overshoot top and bottom, and the
wrapper's pseudo draws the SAME pill as a bordered box, so a Border on
the block becomes the line along the arc. Only the pseudo's arc-side
border paints; its straight edges sit outside the box. */
/* No clip-path: Safari rejects a negative inset(), which the overshoot
needs. The PILL is taller than the wrapper by the overshoot (d, a
fraction of the wrapper's height) and rounded; the wrapper's overflow
cuts its straight edges. Inside it the picture is painted as a cover
background at the offset that lines it up with the wrapper — top
d/(1+2d) of the pill, height 1/(1+2d) — so the in-flow only
holds the size (and the alt text). The ring is a pseudo on the pill's
padding box, so the border never shifts the picture. Video keeps the
media element itself inside the pill. */
.blk-arc { position:relative; display:block; width:fit-content; max-width:100%; overflow:clip;
> img { opacity:0; }
}
.blk-arc-pill { position:absolute; left:0; right:0; top:calc(-100% * var(--blk-arc-d)); bottom:calc(-100% * var(--blk-arc-d)); border-radius:var(--blk-arc-round); overflow:clip; pointer-events:none;
&::after { content:""; position:absolute; inset:0; border-radius:inherit; border:var(--blk-arc-bw,0) solid var(--blk-arc-bc,transparent); }
}
.blk-arc.-left .blk-arc-pill::after { border-right-width:0; }
.blk-arc.-right .blk-arc-pill::after { border-left-width:0; }
.blk-arc-pic { position:absolute; left:0; right:0; top:calc(100% * var(--blk-arc-d) / (1 + 2 * var(--blk-arc-d))); height:calc(100% / (1 + 2 * var(--blk-arc-d))); background:var(--blk-arc-src) var(--blk-bgpos, 50% 50%) / cover no-repeat; }
/* a video cannot be a background: the player itself sits in the pill at
the same offset (the placeholder tile in edit mode likewise) */
.blk-arc.-video { > video, > .blk-video-ph { opacity:0; } }
.blk-arc.-video .blk-arc-pill { pointer-events:auto;
> video, > .blk-video-ph { position:absolute; left:0; right:0; top:calc(100% * var(--blk-arc-d) / (1 + 2 * var(--blk-arc-d))); height:calc(100% / (1 + 2 * var(--blk-arc-d))); width:100%; object-fit:cover; }
}
/* Mixed media: a video tile IS an image tile — same figure, same chrome,
same sort/selection — presenting its poster with a play badge over it.
The badge stays clickable (blocks.js uses it as a lightbox hit target,
the only one a poster-less tile has), and the dark plate stands in when
the video has no poster at all. */
.blk-image.-video { position:relative;
/* poster-tile form only (gallery tiles, and the Media block in edit mode
where a live player would swallow the selection click) — a figure that
holds a real player letterboxes itself and must not get a plate */
&:not(:has(video)) { background:#1a1a1a; }
&:not(:has(img)):not(:has(video)) { min-height:8rem; }
.blk-video-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; background:rgba(0,0,0,0.6); color:#fff; display:flex; align-items:center; justify-content:center;
svg { width:28px; height:28px; margin-left:3px; }
}
}
/* tenant-proof: sites commonly declare img{width:100%} (Warwick does, at
several specificities, loading after this file), and inside a
fit-content context (container Horizontal Alignment) 100% of a
shrink-to-fit parent is cyclic → the image collapses to 0 and
vanishes. Blocks own their image sizing — !important because tenant
selectors can tie and win on load order; the gallery tile rule below
re-asserts width:100% the same way for uniform tiles. */
.blk-page .blk-image img:not(figcaption img) { width:auto !important; }
/* …and SVGs exported without width/height have NO intrinsic width, so a
fit-content figure still collapses them to 0 (rasters survive on their
natural size). Under content alignment the image FIGURE keeps full
width instead of shrink-wrapping, and the img aligns itself with auto
margins — same visual result, no intrinsic-size dependence. */
/* Columns excluded: align-items there is Vertical Alignment, and a
stretched figure grows to the row height */
.blk-page .blk[style*="align-items"]:not(.blk-columns) > .blk-image { align-self:stretch; }
/* Track-based blocks have no content width to shrink to — auto-fill and
the 100% in the track calc both need a definite inline size — so they
keep the full row under content alignment; so do embeds and players,
whose frame would fall back to the browser's 300px. A Fit grid's tracks
and a Hug list's cards are their content, so those shrink and take the
parent's alignment like any block. */
.blk-page .blk[style*="align-items"] > .blk-grid:not(.-fit),
.blk-page .blk[style*="align-items"] > .blk-columns,
.blk-page .blk[style*="align-items"] > .blk-gallery-grid,
.blk-page .blk[style*="align-items"] > :is(.blk-folder-list, .blk-related-list):not(.-hug),
.blk-page .blk[style*="align-items"] > :is(.blk-embed, .blk-video, .blk-cs-events) { align-self:stretch; }
/* horizontal centring of an image keys on the CONTENT alignment the
operator set, which in a stacked container is align-items. In a ROW
container align-items is the VERTICAL axis, so these must not fire
there — valign:center was sliding logos to the middle of their
column (13.4) */
.blk-page .blk[style*="flex-direction:column"][style*="align-items:center"] > .blk-image img { margin-inline:auto; }
.blk-page .blk[style*="flex-direction:column"][style*="align-items:flex-end"] > .blk-image img { margin-left:auto; }
/* a card's image figure is capped at its Max Width (the figure is the box), so the figure itself takes the alignment */
.blk-page .blk-card .blk[style*="flex-direction:column"][style*="align-items:center"] > .blk-image[style*="--blk-imgmax"] { width:100%; margin-inline:auto; }
.blk-page .blk-card .blk[style*="flex-direction:column"][style*="align-items:flex-end"] > .blk-image[style*="--blk-imgmax"] { width:100%; margin-left:auto; margin-right:0; }
/* Divider: wrapper block (padding sits AROUND the line) + inner
carrying line/weight/colour/width inline from prepare(). */
/* full width even in shrink-to-fit contexts (halign:center columns): an
hr has no intrinsic width, so Full/Half rendered ZERO wide there and
only the explicit Short survived (Denmead home, 2026-08-17) */
.blk-page .blk-divider { width:100%; }
.blk-divider hr { margin:0; height:0; }
/* CONTENT dividers (the inline editor's hr): the theme's Divider element
is the default look; the Divider BLOCK's inline styles override
per-instance. Same token chain both ways — studio default, block
overrides (operator ruling 2026-08-17, the Table Style pattern). */
.blk-page .blk-text hr,
.blk-page .blk-html hr { border:0; height:0; border-top:var(--theme-divider-weight,1px) var(--theme-divider-style,solid) var(--theme-divider-color,#ccc); margin:var(--theme-divider-space,16px) 0; }
/* Inline content icons:
— an atom the inline editors insert from the theme Icons palette
(icon-before-text rows: the FontAwesome-prefixed contact links no
vocabulary could say). Painted through a mask, so the icon takes the
surrounding text size and, unless the theme says otherwise, its colour:
a named style's Icon Colour (--tic-color, set on the style's rule and
inherited) wins, then the Body Text Icon Colour, then the text. A
palette swap rethemes every use already in content. Monochrome by
design — a multi-colour glyph belongs in an Image block. */
.blk-page .thm-ic { display:inline-block; width:1em; height:1em; vertical-align:-0.125em; background:var(--tic-color, var(--theme-icon-color, currentColor)); -webkit-mask:var(--tic) center/contain no-repeat; mask:var(--tic) center/contain no-repeat; margin-right:0.35em; }
/* The hanging icon gutter is an OPT-IN para-style recipe (icon_hang →
the theme emits it under .thm-ps-pN), never inferred from content
shape — an implicit :has rule bent Capel's CENTRED footer line
(operator 2026-08-26). The fixed atom margin above is what makes the
opted-in gutter exact: atomTidy strips the stored nbsp at frontend
render, so icon 1em + the style's 0.55em = a deterministic 1.55em. */
/* An icon row: a list item whose leading icon is its marker
(site_convert fa_icons), so it takes no bullet and no indent. */
.blk-page :is(.blk-text, .blk-html, .blk-cap-html) li.thm-ic-row { list-style:none; margin-left:0;
&::before { content:none; }
}
/*-- body grids (site_convert body_grids): a page body is HTML in one Text
block, so a legacy grid stays in it as body classes. A column takes its
twelfths per breakpoint — -sN from phones up, -mN from 769px, -lN from
1025px, each falling back to the size below — and -c centres a narrow
one. A -flex row sets its items on one line, centred on each other. --*/
.blk-page :is(.blk-text, .blk-html, .blk-cap-html) .thm-row { display:flex; flex-wrap:wrap; margin-inline:-0.9375em;
&.-flex { align-items:center; margin-inline:0;
> :not(.thm-col) { flex:0 1 auto; min-width:0; }
/* button sets side by side: the wrapper's own 30px, between them */
&:has(> .thm-btn-wrapper) { column-gap:30px; }
}
}
.blk-page :is(.blk-text, .blk-html, .blk-cap-html) .thm-col { --cs:initial; --cm:initial; --cl:initial; box-sizing:border-box; min-width:0; padding-inline:0.9375em; width:calc(100% * var(--cs, 12) / 12); /* initial: a nested column never inherits its parent's twelfths */
&.-c { margin-inline:auto; }
&.-s1 { --cs:1; } &.-s2 { --cs:2; } &.-s3 { --cs:3; } &.-s4 { --cs:4; } &.-s5 { --cs:5; } &.-s6 { --cs:6; }
&.-s7 { --cs:7; } &.-s8 { --cs:8; } &.-s9 { --cs:9; } &.-s10 { --cs:10; } &.-s11 { --cs:11; } &.-s12 { --cs:12; }
&.-m1 { --cm:1; } &.-m2 { --cm:2; } &.-m3 { --cm:3; } &.-m4 { --cm:4; } &.-m5 { --cm:5; } &.-m6 { --cm:6; }
&.-m7 { --cm:7; } &.-m8 { --cm:8; } &.-m9 { --cm:9; } &.-m10 { --cm:10; } &.-m11 { --cm:11; } &.-m12 { --cm:12; }
&.-l1 { --cl:1; } &.-l2 { --cl:2; } &.-l3 { --cl:3; } &.-l4 { --cl:4; } &.-l5 { --cl:5; } &.-l6 { --cl:6; }
&.-l7 { --cl:7; } &.-l8 { --cl:8; } &.-l9 { --cl:9; } &.-l10 { --cl:10; } &.-l11 { --cl:11; } &.-l12 { --cl:12; }
@media (min-width:769px) { width:calc(100% * var(--cm, var(--cs, 12)) / 12); }
@media (min-width:1025px) { width:calc(100% * var(--cl, var(--cm, var(--cs, 12))) / 12); }
}
/* Video: responsive embed — aspect-ratio inline from prepare() */
.blk-video { position:relative; overflow:hidden;
iframe { display:block; width:100%; height:100%; border:0; }
}
/* Image Shape: cover-crop to --blk-shape, filling the column so a row of
shaped images lines up; the focal point steers the crop through the
--blk-bgpos the banner reads. Gallery tiles keep the gallery's rule. */
.blk-page .blk-image.-shaped > img,
.blk-page .blk-image.-shaped > .blk-arc > img { width:100% !important; aspect-ratio:var(--blk-shape); object-fit:cover; object-position:var(--blk-bgpos, 50% 50%); } /* !important: the tenant-proof width:auto above */
.blk-page .blk-image.-shaped > .blk-arc { width:100%; } /* a shaped image fills the column; its arc wrapper must too */
/* Image Shape = Fill: the picture takes the box it sits in (a stretched
slot, or a Fill container's share), cover-cropped; the arc wrapper
follows the figure so the arc runs the full height */
.blk-page .blk-image.-fill { height:100%; flex:1 1 auto; min-height:0; }
.blk-page .blk-image.-fill > img,
.blk-page .blk-image.-fill > .blk-arc > img { width:100% !important; height:100%; object-fit:cover; object-position:var(--blk-bgpos, 50% 50%); }
.blk-page .blk-image.-fill > .blk-arc { width:100%; height:100%; }
/* Max Height: the picture narrows to stand no taller than the cap. A
shaped picture keeps its column width and crops (or contains) to it. */
.blk-page .blk-image.-maxh > img,
.blk-page .blk-image.-maxh > .blk-arc > img { max-height:var(--blk-img-maxh); }
.blk-page .blk-image.-maxh:not(.-shaped, .-fill) > img { width:auto !important; max-width:100%; height:auto; }
/* Fit Contain: the whole picture inside the shaped (or filled) box */
.blk-page .blk-image.-contain > img,
.blk-page .blk-image.-contain > .blk-arc > img { object-fit:contain; }
/* Image Mask: the picture cover-crops to the SVG's proportions and shows
through its filled area; the focal point steers the crop as for Shape */
.blk-page .blk-image.-masked > img { width:100% !important; aspect-ratio:var(--blk-mask-ar); object-fit:cover; object-position:var(--blk-bgpos, 50% 50%);
-webkit-mask-image:var(--blk-mask); -webkit-mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-image:var(--blk-mask); mask-size:100% 100%; mask-repeat:no-repeat; }
/* Gallery: grid of Image children; --blk-thumb (aspect + cover-crop) makes
uniform tiles; lightbox chrome lives in blocks.js */
.blk-gallery-grid { display:grid; gap:var(--blk-gap,1rem);
grid-template-columns:repeat(auto-fill, minmax(max(var(--blk-colmin,0px), calc((100% - (var(--blk-cols,3) - 1) * var(--blk-gap,1rem)) / var(--blk-cols,3) - 0.5px)), 1fr));
.blk-image img:not(figcaption img) { width:100% !important; aspect-ratio:var(--blk-thumb, auto); object-fit:cover; }
&[data-gal-lightbox] .blk-image img,
&[data-gal-lightbox] .blk-image .blk-video-play { cursor:zoom-in; }
/* tile chrome — the gallery's Image Padding/Border/Corners settings,
uniform across bound tiles and static Image children. !important:
a static child's own appearance renders as INLINE style, which
would win per property and break the uniform-tiles ruling — the
panel no longer offers per-image appearance in galleries, and this
keeps legacy stored values from competing either (2026-07-28) */
.blk-image { padding:var(--blk-tile-pad,0) !important; border:var(--blk-tile-border,none) !important; border-radius:var(--blk-tile-radius,0) !important; box-shadow:var(--blk-tile-shadow,none) !important; overflow:hidden;
/* a row stretches every tile to its tallest, so an uncaptioned
tile's box ends below its image: the image wears the corners */
> img, > video { border-radius:inherit; }
> figcaption { padding-inline:calc(var(--blk-tile-radius, 0px) * 0.3); }
}
}
/* Thumbnail gallery: main image + strip (bottom, or left like a product
page). Source figures stay hidden — main is a clone, so caption and
tile-chrome styling apply to it automatically. */
.blk-gallery-grid.-thumbs { display:block;
.blk-tg-src { display:none; }
.blk-tg-main { position:relative;
.blk-image img { width:100% !important; aspect-ratio:auto; object-fit:contain; max-height:70vh; }
}
.blk-tg-strip { display:flex; justify-content:var(--blk-tg-align, flex-start); gap:8px; margin-top:10px; overflow-x:auto; scrollbar-width:thin; }
.blk-tg-thumb { flex:0 0 auto; width:var(--blk-tg-thumb-w, 64px); height:auto; aspect-ratio:var(--blk-tg-thumb-ar, 1); padding:0; border:2px solid transparent; border-radius:6px; background:none; cursor:pointer; overflow:hidden;
img { width:100%; height:100%; object-fit:cover; display:block; }
&:hover { border-color:#9fb3cd; }
&.-on { border-color:#2b6cb0; }
}
}
/* Stage Height: every picture whole on a stage of one height */
.blk-gallery-grid.-thumbs[style*="--blk-tg-stage-h"] .blk-tg-main .blk-image img { height:var(--blk-tg-stage-h); max-height:none; object-fit:contain; }
.blk-gallery-grid.-thumbs.-thumbs-left { display:grid; grid-template-columns:calc(var(--blk-tg-thumb-w, 64px) + 12px) minmax(0,1fr); gap:10px; align-items:start;
.blk-tg-strip { grid-row:1; grid-column:1; flex-direction:column; margin-top:0; overflow-x:hidden; overflow-y:auto; max-height:70vh; }
.blk-tg-main { grid-row:1; grid-column:2; }
}
/* Gallery captions: display is a GALLERY setting; per-image data supplies
only the text. Over-image: caption on a translucent strip along the
bottom; -scrim-auto starts dark and blocks.js reclassifies per image
from the bottom-strip luminance (-cap-light / -cap-dark on the figure —
the adaptive treatment designers hand-build with custom classes). */
.blk-gallery-grid.-cap-none .blk-image figcaption { display:none; }
.blk-gallery-grid.-cap-over .blk-image { position:relative;
figcaption { position:absolute; left:var(--blk-cap-inset, 0); right:var(--blk-cap-inset, 0); bottom:var(--blk-cap-inset, 0); margin:0; padding:var(--blk-cap-pad, 0.45em 0.7em); border-radius:var(--blk-cap-radius, 0); font-size:0.85em; line-height:1.35; }
}
.blk-gallery-grid.-cap-over.-scrim-dark .blk-image figcaption,
.blk-gallery-grid.-cap-over.-scrim-auto .blk-image figcaption { background:rgba(18,20,24,0.55); color:#fff; }
.blk-gallery-grid.-cap-over.-scrim-light .blk-image figcaption { background:rgba(255,255,255,0.72); color:#1f2329; }
.blk-gallery-grid.-cap-over.-scrim-none .blk-image figcaption { background:none; color:#fff; }
/* per-figure auto verdicts — after the scrim defaults so they win the tie */
.blk-gallery-grid.-cap-over .blk-image.-cap-dark figcaption { background:rgba(18,20,24,0.55); color:#fff; }
.blk-gallery-grid.-cap-over .blk-image.-cap-light figcaption { background:rgba(255,255,255,0.72); color:#1f2329; }
/* Where the over-image caption sits (gallery prop caption_pos). Bottom is
the default and needs no rule. Top anchors the same full-width strip to
the top edge; Centre floats it instead — the scrim shrinks to a rounded
backdrop behind the TEXT rather than banding the image. Banner slides
are .blk-image figures inside the gallery, so both land on them too;
the scrim/auto rules above still supply the colours. */
.blk-gallery-grid.-cap-over.-cap-top .blk-image figcaption
{ top:var(--blk-cap-inset, 0); bottom:auto; }
.blk-gallery-grid.-cap-over.-cap-center .blk-image figcaption
{ top:50%; bottom:auto; left:50%; right:auto; transform:translate(-50%,-50%); width:max-content; max-width:82%; text-align:center; border-radius:var(--blk-cap-radius, 6px); }
/* Caption Colour fills the caption over any contrast strip (Contrast still
sets its text). Caption Width: Hug fits the words, a measured width boxes
them; either centres across the image, the Inset keeping only its distance
from the top or bottom edge. */
.blk-gallery-grid.-cap-over.-cap-bg .blk-image figcaption { background:var(--blk-cap-bg); }
.blk-gallery-grid.-cap-over.-cap-text .blk-image figcaption { color:var(--blk-cap-color); }
.blk-gallery-grid.-cap-over:is(.-capw-hug, .-capw-len) .blk-image figcaption
{ left:0; right:0; margin-inline:auto; max-width:calc(100% - 30px); box-sizing:border-box; }
.blk-gallery-grid.-cap-over.-capw-hug .blk-image figcaption { width:max-content; }
/* auto margins already centre a Hug / measured caption across; Centre lifts it only */
.blk-gallery-grid.-cap-over.-cap-center:is(.-capw-hug, .-capw-len) .blk-image figcaption { transform:translateY(-50%); }
.blk-gallery-grid.-cap-over.-capw-len .blk-image figcaption { width:var(--blk-cap-w); }
/* a Description caption is page content, so it reads at body size, not a title caption's 0.85em */
.blk-gallery-grid.-cap-over .blk-image figcaption.blk-cap-html { font-size:inherit; }
/* an image in a Description caption is content, sized by its own width: the image-block rules skip it (:not(figcaption img)) */
.blk-page figcaption.blk-cap-html img { max-width:100%; height:auto; }
.blk-gallery-grid.-cap-over.-capa-center .blk-image figcaption { text-align:center; }
.blk-gallery-grid.-cap-over.-capa-right .blk-image figcaption { text-align:right; }
/* a caption is its own box: a Description's lone grid column (the box the
source drew) fills it rather than narrowing the words inside it */
.blk-page .blk-cap-html .thm-row:has(> .thm-col:only-child) { margin-inline:0;
> .thm-col { width:100%; margin-inline:0; padding-inline:0; }
}
/* the caption box is the edge: its content's first and last margins sit inside the padding, not added to it */
.blk-page .blk-cap-html :is(h1, h2, h3, h4, h5, h6, p, ul, ol, div, .thm-row, .thm-col):first-child { margin-top:0; }
.blk-page .blk-cap-html :is(h1, h2, h3, h4, h5, h6, p, ul, ol, div, .thm-row, .thm-col):last-child { margin-bottom:0; }
/* a Description caption's headings, paragraphs and links wear the caption's text colour */
.blk-gallery-grid.-cap-over .blk-cap-html :is(h1, h2, h3, h4, h5, h6, p, a:not(.thm-btn))
{ color:inherit; }
/* Banner only: the dots overlay the band's bottom edge, so a bottom caption
would sit under them. Dots sit at bottom:0.9em and are 0.65em across —
about 1.6em of band is theirs, and captions render at 0.85em, so 2.2em of
caption padding (≈1.9em of band) clears them. Keyed on a BUILT dot, so a
dots-off banner (and a single-slide one) keeps the tighter caption. */
.blk-gallery-grid.-banner:has(.blk-car-dot):not(.-cap-top):not(.-cap-center) figcaption
{ padding-bottom:2.2em; }
/* Gallery carousel layout: the image list on the carousel track — full
snap cells, image centred at natural size (contain within 75vh) */
.blk-gallery-grid.-carousel { display:block;
/* slides centre their image vertically — shorter images sit middle
of the track, not pinned to the top */
/* Columns = images per view (default 3, like the grid); 1 restores the
classic one-image carousel */
.blk-car-track > .blk { flex:0 0 max(var(--blk-colmin, 0px), calc((100% - (var(--blk-cols, 1) - 1) * var(--blk-gap, 0rem)) / var(--blk-cols, 1))); min-width:0; scroll-snap-align:start; scroll-snap-stop:always; margin:0; display:flex; flex-direction:column; justify-content:center; }
.blk-image img:not(figcaption img) { margin-inline:auto; aspect-ratio:var(--blk-thumb, auto); object-fit:var(--blk-thumb-fit, contain); max-height:75vh; }
}
/* Gallery banner layout: the image list as full-width bands that CROSSFADE
into one another — a slideshow, not a scrolling track (operator ruling:
"banners rotate by fading one to another"). Slides stack absolutely and
only .-on is opaque, so auto-play, arrows and dots all fade alike; the
markup is .blk-banner / .blk-banner-track precisely so initCarousel (which
binds .blk-carousel) never scrolls these slides. Slides cover-crop to
--blk-banner-h around each media row's own focal point (--blk-bgpos,
50% 50% when the row has none) — one focal per row, no separate mobile
point (ruling: content on the row). Video rows play muted-looping,
cropped the same way; blocks.js pauses the ones that are faded out. */
.blk-gallery-grid.-banner { display:block;
.blk-banner { position:relative; }
/* the band height lives on the TRACK now that slides stack: an inset-0
slide has no height of its own to give the band. (height, NOT
min-height: a Static-source banner's slides are the block's own Image
children, each holding a real at width:100% whose natural height
— a 4:3 photo across a 1100px band is ~820px — always exceeded the
setting, so the band sized to the photo and the Height control did
nothing. A bound row is an empty figure carrying a background-image,
which is why the same control worked there.) */
.blk-banner-track { position:relative; overflow:hidden; height:var(--blk-banner-h,420px); }
.blk-banner-track > .blk { position:absolute; inset:0; margin:0; opacity:0; transition:opacity .8s ease;
background-size:var(--blk-banner-fit, cover); background-repeat:no-repeat; background-position:var(--blk-bgpos,50% 50%); }
/* no-JS (or pre-bind) fallback: with nothing marked active the band would
read blank, so slide 1 shows until blocks.js claims the gallery. Bound
slides also carry -on server-side; static children can't, hence this. */
&:not([data-banner-bound]) .blk-banner-track > .blk:first-child { opacity:1; }
.blk-banner-track > .blk.-on { opacity:1; }
/* …and with the band definite, a static child's image cover-crops into it
exactly like a bound row. Width is left to the gallery tile rule's
!important 100% (a plain width here would lose to .blk-page's). */
.blk-banner-track > .blk img:not(figcaption img) { height:100%; object-fit:var(--blk-banner-fit, cover); object-position:var(--blk-bgpos,50% 50%); }
.blk-banner-track > .blk.-video video { position:absolute; inset:0; width:100%; height:100%; object-fit:var(--blk-banner-fit, cover); object-position:var(--blk-bgpos,50% 50%); }
figcaption { position:absolute; left:0; right:0; bottom:0; margin:0; padding:12px 16px; color:#fff;
background:linear-gradient(transparent,rgba(0,0,0,0.55)); }
/* dots overlay the band (there is no strip below a full-bleed banner to
sit in) and go light-on-dark to read against photography */
.blk-car-dots { position:absolute; left:0; right:0; bottom:0.9em; z-index:1; padding-top:0; }
.blk-car-dot { background:rgba(255,255,255,0.55); box-shadow:0 1px 3px rgba(0,0,0,0.35);
&.-on { background:#fff; }
}
}
/* a visitor who asked for less motion gets the slideshow without the
dissolve — navigation still works, it just cuts */
@media (prefers-reduced-motion: reduce) {
.blk-gallery-grid.-banner .blk-banner-track > .blk { transition:none; }
.blk-carousel.-fade .blk-car-track > .blk-car-slide { transition:none; }
}
/* Waterfall: CSS-columns masonry — images keep their heights and flow
down each column. WYSIWYG: the editor renders it too (editor-only
children span all columns via column-span in block_editor.css). */
/* columns shorthand takes BOTH: min width + max count — the same colmin
setting drives waterfall responsiveness natively */
.blk-gallery-grid.-waterfall { display:block; columns:var(--blk-colmin,auto) var(--blk-cols,3); column-gap:var(--blk-gap,1rem);
> .blk { break-inside:avoid; margin:0 0 var(--blk-gap,1rem); }
.blk-image img { aspect-ratio:auto; }
}
.blk-lightbox { position:fixed; inset:0; z-index:9999; background:rgba(10,12,16,0.92); display:flex; align-items:center; justify-content:center;
img { max-width:92vw; max-height:88vh; display:block; box-shadow:0 8px 40px rgba(0,0,0,0.5); }
video { max-width:92vw; max-height:88vh; display:block; box-shadow:0 8px 40px rgba(0,0,0,0.5); }
iframe { width:min(92vw, 88vh * 16 / 9); aspect-ratio:16 / 9; border:0; display:block; box-shadow:0 8px 40px rgba(0,0,0,0.5); }
button { position:absolute; border:0; background:rgba(255,255,255,0.12); color:#fff; cursor:pointer; border-radius:50%; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
svg { width:22px; height:22px; }
&:hover { background:rgba(255,255,255,0.25); }
}
.blk-lb-close { top:18px; right:18px; }
.blk-lb-prev { left:18px; top:50%; transform:translateY(-50%); }
.blk-lb-next { right:18px; top:50%; transform:translateY(-50%); }
.blk-lb-count { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,0.8); font-size:13px; }
}
/* Button: call-to-action link. Every look comes from the THEME's button
tokens (Design Studio Buttons pane + its per-variant panes) with the
historic literals as fallbacks — an unset theme renders
byte-identically to before. Typography and shape (font, size, weight,
transform, tracking, border width, radius) are ONE set for every
variant; colours are per variant, and Outline / Outline Light / Text
chain to the Filled / Light pair when unset so a brand recolour
ripples every variant. Size variants multiply the theme size (a bare
em there would ignore it). */
/* .thm-video: a body frame box at 16:9 plus 30px, the player or map filling
it (the legacy .video-container / .map-container; body_video). */
.blk-page :is(.blk-text, .blk-html) .thm-video { position:relative; height:0; padding-bottom:56.25%; padding-top:30px; overflow:hidden;
> :is(iframe, object, embed) { position:absolute; top:0; left:0; width:100%; height:100%; }
}
/* .thm-btn-wrapper: an in-body button set on its own line, centred with
space above and below (the legacy .button-cta-wrapper; cta_class). */
.blk-page :is(.blk-text, .blk-html, .blk-cap-html) .thm-btn-wrapper { display:block; text-align:center; margin:30px 0;
&.-left { text-align:left; }
&.-right { text-align:right; }
&.-mb0 { margin-bottom:0; }
}
/* .thm-btn: the IN-BODY CTA class (third want: Capel, NF, Crawley all
carry .button-cta pills in body HTML that our bound bodies rendered
as text links). A link the inline content marks thm-btn dresses as
the theme button — same tokens, same variants; site_convert's
cta_class step rewrites legacy button-cta tokens to it. */
.blk-btn,
.blk-page a.thm-btn { display:inline-block; padding:var(--theme-btn-pad-y, 0.65em) var(--theme-btn-pad-x, 1.6em); border:var(--theme-btn-border-width, 2px) var(--theme-btn-border-style, solid) var(--theme-btn-bg, #2d2d2d); border-radius:var(--theme-btn-radius, 6px); background:var(--theme-btn-bg, #2d2d2d); color:var(--theme-btn-text, #fff); font-family:var(--theme-btn-font, inherit); font-size:var(--theme-btn-size, 1em); font-weight:var(--theme-btn-bold, 600); text-transform:var(--theme-btn-transform, inherit); letter-spacing:var(--theme-btn-letter-spacing, inherit); text-decoration:none; line-height:1.3; cursor:pointer;
transition:background-color .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease, box-shadow .25s ease;
/* the admin prefixes the theme sheet, so its Body Link rule arrives as
`.template a` (0,1,1) and outranks a bare `.blk-btn` (0,1,0) on the
resting colour, weight and underline; nested, the base reads (0,2,1).
Elements stay on the base rule (an submit keeps its fill). */
&:where(a) { color:var(--theme-btn-text, #fff); font-weight:var(--theme-btn-bold, 600); text-decoration:none; }
/* hover: the fade is the default; --theme-btn-hover-fx = 1 (Recolour)
stops it and the per-variant hover colours take over, each falling
back to the variant's resting colour */
/* !important, the tenant-proof idiom: the theme's Body Link pane emits
`a:hover{text-decoration:underline}`, which outranks the resting
`.blk-btn` — unprefixed on the front end (0,1,1) and `.template
a:hover` in the admin canvas (0,2,1), so no plain selector here wins
in both. A button is not a prose link in any state. The Text variant
re-asserts its own underline below, also !important. */
&:hover { opacity:calc(1 - 0.15 * (1 - var(--theme-btn-hover-fx, 0))); background:var(--theme-btn-hover-bg, var(--theme-btn-bg, #2d2d2d)); border-color:var(--theme-btn-hover-bg, var(--theme-btn-bg, #2d2d2d)); color:var(--theme-btn-hover-text, var(--theme-btn-text, #fff)); text-decoration:none !important; }
&.-light { background:var(--theme-btn-light-bg, #fff); border-color:var(--theme-btn-light-text, #2d2d2d); color:var(--theme-btn-light-text, #2d2d2d);
&:hover { background:var(--theme-btn-light-hover-bg, var(--theme-btn-light-bg, #fff)); border-color:var(--theme-btn-light-hover-text, var(--theme-btn-light-text, #2d2d2d)); color:var(--theme-btn-light-hover-text, var(--theme-btn-light-text, #2d2d2d)); }
}
&:is(.-outline, .-outline-light) { border-width:var(--theme-btn-outline-border-width, var(--theme-btn-border-width, 2px)); }
&.-outline { background:none; border-color:var(--theme-btn-outline-border, var(--theme-btn-bg, #2d2d2d)); color:var(--theme-btn-outline-text, var(--theme-btn-bg, #2d2d2d));
&:hover { background:var(--theme-btn-outline-hover-bg, none); border-color:var(--theme-btn-outline-border, var(--theme-btn-bg, #2d2d2d)); color:var(--theme-btn-outline-hover-text, var(--theme-btn-outline-text, var(--theme-btn-bg, #2d2d2d))); }
}
/* white-on-photo CTAs (earned at the THIRD want: Crawley, St Martin's,
Holy Trinity hero pills) — Outline in the LIGHT colours by default. */
&.-outline-light { background:none; border-color:var(--theme-btn-outline-light-border, var(--theme-btn-light-bg, #fff)); color:var(--theme-btn-outline-light-text, var(--theme-btn-light-bg, #fff));
&:hover { background:var(--theme-btn-outline-light-hover-bg, none); border-color:var(--theme-btn-outline-light-border, var(--theme-btn-light-bg, #fff)); color:var(--theme-btn-outline-light-hover-text, var(--theme-btn-outline-light-text, var(--theme-btn-light-bg, #fff))); }
}
/* Small and Large: the studio's Small / Large Buttons sections, each
falling back to the historic ratio of the button size; Small may
harden its weight */
&.-sm { padding:var(--theme-btn-sm-pad-y, 0.45em) var(--theme-btn-sm-pad-x, 1.1em); font-size:var(--theme-btn-sm-size, calc(var(--theme-btn-size, 1em) * 0.9)); font-weight:var(--theme-btn-sm-bold, var(--theme-btn-bold, 600)); }
&.-lg { padding:var(--theme-btn-lg-pad-y, 0.85em) var(--theme-btn-lg-pad-x, 2.2em); font-size:var(--theme-btn-lg-size, calc(var(--theme-btn-size, 1em) * 1.15)); }
/* the underlined-link look: own colour / weight / underline
(btn_txt_*; weight falls back to the shared button weight). AFTER
the sizes: Small / Large change a text button's type size only — it
has no inline box, so its text lines up with the copy around it. */
&.-text { background:none; border-color:transparent; border-inline-width:0; padding-inline:0; color:var(--theme-btn-txt-color, inherit); font-size:var(--theme-btn-txt-size, var(--theme-btn-size, 1em)); font-weight:var(--theme-btn-txt-bold, var(--theme-btn-bold, 600)); text-transform:var(--theme-btn-txt-transform, var(--theme-btn-transform, inherit)); text-decoration:var(--theme-btn-txt-underline, underline);
&.-sm { font-size:var(--theme-btn-sm-size, calc(var(--theme-btn-txt-size, var(--theme-btn-size, 1em)) * 0.9)); }
&.-lg { font-size:var(--theme-btn-lg-size, calc(var(--theme-btn-txt-size, var(--theme-btn-size, 1em)) * 1.15)); }
&:hover { background:none; border-color:transparent; color:var(--theme-btn-txt-hover-color, var(--theme-btn-txt-color, inherit)); text-decoration:var(--theme-btn-txt-underline, underline) !important; }
}
/* Width = Full Width (Button block, form Submit): the column's width */
&.-full { display:block; width:100%; box-sizing:border-box; text-align:center; }
}
/* Table block: tabular data in the theme's Table Style; a wide table
scrolls inside its own box on a narrow screen, never the page */
.blk-table-scroll { overflow-x:auto; max-width:100%; }
.blk-table .thm-table { min-width:100%; }
.blk-tcell.-left { text-align:left; }
.blk-tcell.-center { text-align:center; }
.blk-tcell.-right { text-align:right; }
/* Carousel: native CSS scroll-snap — swipe/momentum/keyboard from the
browser; blocks.js adds dots, arrow paging and optional auto-advance.
Slides are full-width snap cells and hold any blocks. */
.blk-carousel { position:relative; }
.blk-car-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none;
&::-webkit-scrollbar { display:none; }
}
/* multi-across (2026-07-27): --blk-cols slides per view (1 = classic full-
width); the same columns/gap/colmin vocabulary as the grid. Arrows and
auto-advance page by view width and WRAP — the infinite feel for free. */
.blk-car-track { gap:var(--blk-gap, 0px); }
/* Ticker auto-play: a continuous glide — snap would fight the per-frame
scroll, and the glide IS the navigation, so the nav chrome goes */
.blk-carousel.-ticker .blk-car-track { scroll-snap-type:none; }
.blk-carousel.-ticker .blk-car-arrow,
.blk-carousel.-ticker .blk-car-dots { display:none; }
/* Fade auto-play (single-column hero slideshows): slides GRID-STACK in one
cell — in flow, unlike the banner's absolute slides, so the track takes
the tallest slide's height (composed slides have no fixed band height) —
and cross-fade by opacity; blocks.js moves the -on class with the same
engine as the banner. First slide shows until JS binds (no-JS fallback). */
.blk-carousel.-fade .blk-car-track { display:grid; overflow:visible; scroll-snap-type:none;
> .blk-car-slide { grid-area:1/1; opacity:0; transition:opacity .8s ease; pointer-events:none; }
> .blk-car-slide.-on { opacity:1; pointer-events:auto; }
}
.blk-carousel.-fade:not([data-car-bound]) .blk-car-track > .blk-car-slide:first-child { opacity:1; pointer-events:auto; }
/* fade heroes wear their dots ON the image, banner-style (the strip below
otherwise breaks the block's bottom edge — and its rounded corners —
away from the picture), light-on-dark to read against photography */
.blk-carousel.-fade .blk-car-dots { position:absolute; left:0; right:0; bottom:0.9em; z-index:1; padding-top:0; }
.blk-carousel.-fade .blk-car-dot { background:rgba(255,255,255,0.55); box-shadow:0 1px 3px rgba(0,0,0,0.35);
&.-on { background:#fff; }
}
.blk-car-track > .blk-car-slide { flex:0 0 max(var(--blk-colmin, 0px), calc((100% - (var(--blk-cols, 1) - 1) * var(--blk-gap, 0rem)) / var(--blk-cols, 1))); min-width:0; scroll-snap-align:start; scroll-snap-stop:always; margin-top:0; box-sizing:border-box; }
/* chrome chains the studio's Carousel element (--theme-car-*) with the
historic literals as fallbacks — the Table Style pattern. The glyph keeps
its share of the box (1.4/2.6 of the historic size), so one Size field
drives both. */
.blk-car-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:1; width:var(--theme-car-arrow-size, 2.6em); height:var(--theme-car-arrow-size, 2.6em); padding:0; border:0; border-radius:var(--theme-car-arrow-radius, 50%); background:var(--theme-car-arrow-bg, rgba(255,255,255,0.85)); color:var(--theme-car-arrow-color, #333); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,0.25); display:flex; align-items:center; justify-content:center;
svg { width:calc(var(--theme-car-arrow-size, 2.6em) * 0.54); height:calc(var(--theme-car-arrow-size, 2.6em) * 0.54); }
&.-prev { left:0.6em; }
&.-next { right:0.6em; }
&:hover { background:var(--theme-car-arrow-hover-bg, #fff); }
}
/* arrows reveal on hover where hover exists; touch devices keep them
visible (no hover to reveal with) — applies to the carousel track and
the thumbnail gallery's main image alike. Show Arrows = Always sets the
resting opacity to 1: a var carrying the NUMBER, since CSS cannot branch
a media block on a word (the btn_hover_fx flag precedent). */
@media (hover:hover) {
.blk-car-arrow { opacity:var(--theme-car-arrow-always, 0); transition:opacity 0.15s ease; }
.blk-carousel:hover .blk-car-arrow,
.blk-banner:hover .blk-car-arrow,
.blk-tg-main:hover .blk-car-arrow,
.blk-car-arrow:focus-visible { opacity:1; }
}
.blk-car-dots { display:flex; justify-content:center; gap:0.55em; padding-top:0.8em; }
.blk-car-dot { width:0.65em; height:0.65em; padding:0; border:0; border-radius:50%; background:var(--theme-car-dot-color, #c9c9c9); cursor:pointer; transition:background .15s ease;
&.-on { background:var(--theme-car-dot-on-color, #555); }
}
/* Accordion: native details/summary — zero JS; exclusive-open via the
shared name attribute. Card tab chrome (2026-08-25, the Phoenix FAQ):
the ITEM is the card — question row + open answer as one box — via the
shared --blk-tile-* vars (fallbacks ARE the historic look: 1px #ddd,
square, transparent). Gap rides a dedicated --blk-acc-gap (never
--blk-gap — that inherits from ancestor containers); -split switches
off the joined-stack border collapse. */
.blk-accordion { display:flex; flex-direction:column; gap:var(--blk-acc-gap,0px); }
.blk-accordion .blk-accitem + .blk-accitem { margin-top:0; }
.blk-accordion:not(.-split) .blk-accitem + .blk-accitem { border-top:0; }
details.blk-accitem { border:var(--blk-tile-border,1px solid #ddd); border-radius:var(--blk-tile-radius,0); background:var(--blk-tile-bg,transparent); color:var(--blk-tile-color,inherit); box-shadow:var(--blk-tile-shadow,none); padding:var(--blk-tile-pad,0);
/* slide-open (2026-08-26, the source jQuery-slide look with zero JS):
modern engines animate ::details-content height; others snap open
exactly as before — progressive enhancement, reduced-motion stilled */
interpolate-size:allow-keywords;
&::details-content { block-size:0; overflow-y:clip; transition:block-size .28s ease, content-visibility .28s allow-discrete; }
&[open]::details-content { block-size:auto; }
/* Title Bar Background paints CLOSED items only — an open item joins
its content (the North Finchley tab-accordion look) */
&:not([open]) > summary { background:var(--blk-acc-title-bg,transparent); }
summary { padding:0.8em 1em; cursor:pointer; list-style:none; display:flex; align-items:center; gap:0.6em;
&:not([class*="thm-ps-"]) { font-weight:600; } /* a default: a named Title Style decides its own weight */
&::before { content:''; width:0.55em; height:0.55em; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform .18s ease; flex:0 0 auto; }
&::-webkit-details-marker { display:none; }
}
&[open] > summary::before { transform:rotate(45deg); }
.blk-accitem-body { padding:0.3em 1em 1em; }
}
/* Look: Rows — flush items between divider lines (the theme Divider,
or the item Border when set); the title and answer sit on the text edge */
.blk-accordion.-rows details.blk-accitem { border:0; border-bottom:var(--blk-tile-border, var(--theme-divider-weight,1px) var(--theme-divider-style,solid) var(--theme-divider-color,#ddd)); border-radius:0; box-shadow:none;
&:first-child { border-top:var(--blk-tile-border, var(--theme-divider-weight,1px) var(--theme-divider-style,solid) var(--theme-divider-color,#ddd)); }
summary { padding-inline:0; }
.blk-accitem-body { padding-inline:0; }
}
/* icon variants (Card tab): Right moves the glyph to a ::after pushed to
the far edge; Plus swaps the chevron for +/− text glyphs. */
.blk-accordion.-ic-right details.blk-accitem summary::before { content:none; }
.blk-accordion.-ic-right details.blk-accitem summary::after { content:''; width:0.55em; height:0.55em; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform .18s ease; flex:0 0 auto; margin-left:auto; }
.blk-accordion.-ic-right details.blk-accitem[open] > summary::after { transform:rotate(45deg); }
.blk-accordion.-ic-plus details.blk-accitem summary::before { content:'+'; width:auto; height:auto; border:0; transform:none; font-size:1.2em; line-height:1; font-weight:400; }
.blk-accordion.-ic-plus details.blk-accitem[open] > summary::before { content:'−'; transform:none; }
.blk-accordion.-ic-plus.-ic-right details.blk-accitem summary::after { content:'+'; width:auto; height:auto; border:0; transform:none; font-size:1.2em; line-height:1; font-weight:400; }
.blk-accordion.-ic-plus.-ic-right details.blk-accitem[open] > summary::after { content:'−'; transform:none; }
/* Caret: the small filled dropdown triangle (North Finchley) — down when
closed, flipped when open */
.blk-accordion.-ic-caret details.blk-accitem summary::before,
.blk-accordion.-ic-caret.-ic-right details.blk-accitem summary::after { content:''; width:0; height:0; border:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid currentColor; transform:none; transition:transform .18s ease; }
.blk-accordion.-ic-caret details.blk-accitem[open] > summary::before,
.blk-accordion.-ic-caret.-ic-right details.blk-accitem[open] > summary::after { transform:rotate(180deg); }
.blk-accordion.-ic-caret.-ic-right details.blk-accitem summary::before { content:none; }
@media (prefers-reduced-motion: reduce) {
details.blk-accitem summary::before,
details.blk-accitem::details-content,
.blk-accordion.-ic-right details.blk-accitem summary::after { transition:none; }
}
/* Tabs: bar + one panel. Critical layout owned under .blk-page — tenants
style tab bars; we keep flex, gaps, and panel stack intact. */
.blk-page .blk-tabs { display:block; }
.blk-page .blk-tabs-bar { display:flex; flex-wrap:wrap; gap:0.25em 0.5em; margin:0 0 1em; padding:0; border-bottom:1px solid #ddd; list-style:none; }
.blk-page .blk-tabs-btn { appearance:none; -webkit-appearance:none; font:inherit; cursor:pointer; margin:0 0 -1px; padding:0.55em 0.95em; border:1px solid transparent; border-bottom-color:#ddd; border-radius:4px 4px 0 0; background:transparent; color:inherit;
&.-on { border-color:#ddd; border-bottom-color:#fff; background:#fff; font-weight:600; }
}
.blk-page .blk-tabs > .blk-tab { margin-top:0; }
.blk-page .blk-tabs > .blk-tab[hidden] { display:none !important; }
/*---------------- Phase 4 — product / folder module blocks ----------------*/
/* Product price: size segments match .blk-btn; strike RRP/orig when on offer.
Tenant CSS owns brand colour; we only set layout + offer chrome. */
.blk-page .blk-prod-price { line-height:1.3;
&.-sm .price { font-size:0.9em; }
&.-lg .price { font-size:1.35em; font-weight:600; }
.price { font-size:1.15em; font-weight:600; }
.price-orig .amount { text-decoration:line-through; opacity:0.7; margin-right:0.5em; }
.price-rrp .amount { text-decoration:line-through; opacity:0.55; font-size:0.9em; }
.price-pack { margin-left:0.35em; font-size:0.6em; font-weight:400; opacity:0.75; }
.price-saving { color:var(--theme-offer-text, #c62828); font-size:0.9em; }
.price-both { display:flex; flex-wrap:wrap; gap:0.35em 1em; }
.vat-status,.vat-label { font-size:0.85em; opacity:0.75; }
}
/* Buy: a themed