/*	v14 page skeleton — the one clean layout (docs/feature-14.1-clean-layout.md).
	Three slots in a flex column: block-built header, block page content,
	block-built footer pinned to the viewport bottom on short pages.
	Nothing visual belongs here — bands, widths and colours are the theme's
	and the blocks' job; never add chrome styling to this sheet. */
#template-content						{ display:flex; flex-direction:column; min-height:100dvh; }
#main-content							{ flex:1 0 auto; }
#header, #footer						{ flex:none; }

/*	header_stick (theme, Design Studio Header pane): the SHELL pins.
	z-index above page content, below slideouts (1100) and modals (2000). */
#header.-stick							{ position:sticky; top:0; z-index:100; }

/*	Extend Behind The Page Header (Trinity pattern, shell half): a band
	marked -under-header pulls up by --blk-header-h (blocks.css); the
	SHELL supplies the var (measured on #header by default.js — a token
	could not be true at every viewport) and paints the header above the
	slid-under band. Give the header band a translucent background and
	the media shows through. Same stacking tier as -stick. */
/*	Positioned base so the under-header z-index bites. Never set position
	inside the :has() gate below — the ID inside :has() inflates its
	specificity to ~(2,2,1) and it would crush the theme's
	`#header { position:sticky }` (template.css loads after this sheet
	and wins the plain (1,0,0) contest, which is the intended order —
	the Ilkley sticky-loss, 2026-08-20). */
#header									{ position:relative; }
body:has(#main-content .blk-container.-under-header) #header	{ z-index:100; }
/*	Reserving the gutter stops the flicker loop on short pages: the pulled-up
	band can toggle the scrollbar, whose width flip rewraps the nav and
	changes the very header height the band is offset by. */
html:has(#main-content .blk-container.-under-header)	{ scrollbar-gutter:stable; }

/*	Furniture URLs (checkout, basket, search results) put platform markup
	straight into main; give it the theme's content width. Block pages are
	.blk-page bands and manage their own widths — excluded exactly.
	Same --theme-page-pad term as the width words (100%, not 100cqw —
	furniture is not inside .blk-page). */
#main-content > *:not(.blk-page)		{ width:min(var(--theme-content-w, 1140px), calc(100% - 2 * var(--theme-page-pad, 0px))); margin-left:auto; margin-right:auto; box-sizing:border-box; }