html[data-pal="1"]{--a-l:#A74158;--a-d:#E58BA0}
html[data-pal="2"]{--a-l:#2F6B45;--a-d:#8CCB9E}
html[data-pal="3"]{--a-l:#A74129;--a-d:#F0A58E}
html[data-pal="4"]{--a-l:#6240A0;--a-d:#BBA3EA}
html[data-pal="5"]{--a-l:#7A5700;--a-d:#E8C45A}
html[data-pal="6"]{--a-l:#0A6E80;--a-d:#52C6D6}
html[data-pal="1"]:not([data-theme=dark]){--bg:#FBF7F2;--surface:#FFFDFB;--sunk-0:#F6E7E8;--line-0:#E9DCD6;--edge:#9A8A86;--ink:#2B2024;--ink-2:#6B5A5F}
html[data-pal="2"]:not([data-theme=dark]){--bg:#F4F6F0;--surface:#FCFDF9;--sunk-0:#E3EBDD;--line-0:#D3DCCB;--edge:#76866D;--ink:#1F2A22;--ink-2:#4F6054}
html[data-pal="3"]:not([data-theme=dark]){--bg:#FFF6EE;--surface:#FFFCF8;--sunk-0:#FBE6D6;--line-0:#EDD5C2;--edge:#9A8070;--ink:#35241C;--ink-2:#6F5445}
html[data-pal="4"]:not([data-theme=dark]){--bg:#F7F5FB;--surface:#FFFFFF;--sunk-0:#E9E4F4;--line-0:#DAD3EA;--edge:#7F789C;--ink:#231F33;--ink-2:#575071}
html[data-pal="5"]:not([data-theme=dark]){--bg:#FFFAEB;--surface:#FFFEF8;--sunk-0:#FBEFC6;--line-0:#EBDFB0;--edge:#8C8056;--ink:#2E2812;--ink-2:#625830}
html[data-pal="6"]:not([data-theme=dark]){--bg:#F2F7F8;--surface:#FCFEFE;--sunk-0:#DFECEE;--line-0:#CCDDE0;--edge:#6E8589;--ink:#13262A;--ink-2:#4A6266}
@media (prefers-color-scheme:dark){html[data-pal]:not([data-theme=light]){--bg:#0E1015;--surface:#161A21;--sunk-0:#1E232C;--line-0:#2A303A;--edge:#6E7785;--ink:#EEF1F5;--ink-2:#AEB6C2}}

html[data-fp="1"]{--serif:"Cormorant Garamond",Georgia,serif;--sans:Inter,system-ui,sans-serif}
html[data-fp="2"]{--serif:Fraunces,Georgia,serif;--sans:Inter,system-ui,sans-serif}
html[data-fp="3"]{--serif:"DM Serif Display",Georgia,serif;--sans:"DM Sans",system-ui,sans-serif}
html[data-fp="4"]{--serif:"Space Grotesk",system-ui,sans-serif;--sans:"IBM Plex Sans",system-ui,sans-serif}

.kv-art{position:relative;min-height:320px;border-radius:var(--r-card,10px);overflow:hidden;background:color-mix(in srgb,var(--accent) 12%,var(--surface,#fff));isolation:isolate}
.kv-art i{position:absolute;display:block;border-radius:50%;background:var(--accent);opacity:.85}
.kv-art i:nth-child(1){width:46%;aspect-ratio:1;left:10%;top:14%}
.kv-art i:nth-child(2){width:30%;aspect-ratio:1;right:12%;bottom:12%;background:color-mix(in srgb,var(--accent) 45%,var(--ink,#111));opacity:.75}
.kv-art i:nth-child(3){width:16%;aspect-ratio:1;right:22%;top:18%;background:color-mix(in srgb,var(--accent) 30%,var(--surface,#fff));opacity:1}
html[data-kv-art="2"] .kv-art{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,var(--surface,#fff)) 0 18px,color-mix(in srgb,var(--accent) 8%,var(--surface,#fff)) 18px 36px)}
html[data-kv-art="2"] .kv-art i{border-radius:var(--r-card,10px)}
html[data-kv-art="2"] .kv-art i:nth-child(1){width:52%;aspect-ratio:4/3;left:8%;top:12%}
html[data-kv-art="2"] .kv-art i:nth-child(2){width:38%;aspect-ratio:1;right:8%;bottom:10%}
html[data-kv-art="3"] .kv-art{background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--accent) 35%,transparent),transparent 60%),color-mix(in srgb,var(--accent) 6%,var(--surface,#fff))}
html[data-kv-art="3"] .kv-art i{border-radius:0;transform:rotate(45deg)}
html[data-kv-art="3"] .kv-art i:nth-child(1){width:34%;left:20%;top:22%}
html[data-kv-art="3"] .kv-art i:nth-child(2){width:24%;right:16%;bottom:16%}
html[data-kv-art="4"] .kv-art{background:var(--ink,#111)}
html[data-kv-art="4"] .kv-art i{border-radius:999px 999px 0 0;background:var(--accent);opacity:.9}
html[data-kv-art="4"] .kv-art i:nth-child(1){width:40%;aspect-ratio:2/3;left:12%;top:auto;bottom:0}
html[data-kv-art="4"] .kv-art i:nth-child(2){width:28%;aspect-ratio:2/3;right:14%;bottom:0;background:color-mix(in srgb,var(--accent) 55%,var(--surface,#fff))}
html[data-kv-art="4"] .kv-art i:nth-child(3){width:10%;right:40%;top:20%;border-radius:50%;background:var(--surface,#fff)}
/* the art panel stays drawn on first screens that hide a hero's non-image children (minimal, overlay, block, mosaic) */
html[data-l-fs] [data-sec=hero] .kv-art[data-hero-media] > i{display:block}
html[data-l-fs=minimal] .kv-art,html[data-l-fs=type] .kv-art{min-height:220px}
/* a nav whose links are a list: the sidebar first screen stacks them under the brand */
@media (min-width:960px){
html[data-l-fs=sidebar] [data-sec=nav] ul{display:grid;gap:12px;margin:0;padding:0;justify-items:start}
html[data-l-fs=sidebar] [data-sec=nav] > * > :first-child{margin:0}
}
/* TEXT-ONLY KITS (an art panel, no hero photo): two first screens get their own wireframe, so a text page reaches >= 6 distinct layouts
   mosaic = the art fills the whole hero behind the text; block = a two-column editorial (headline left, lede + actions right) over a full-width stat band */
html[data-l-fs=mosaic] [data-sec=hero]:has(.kv-art){position:relative;isolation:isolate;padding-block:clamp(5rem,11vw,9rem)}
html[data-l-fs=mosaic] [data-sec=hero]:has(.kv-art) :has(> [data-hero-text]){display:block}
html[data-l-fs=mosaic] [data-sec=hero] .kv-art[data-hero-media]{position:absolute;inset:0;z-index:-1;min-height:0;border-radius:0;opacity:.55}
html[data-l-fs=mosaic] [data-sec=hero]:has(.kv-art) [data-hero-text]{max-width:min(640px,100%)}
html[data-l-fs=block] [data-sec=hero]:has(.kv-art) .kv-art[data-hero-media]{display:none}
html[data-l-fs=block] [data-sec=hero]:has(.kv-art) :has(> [data-hero-text]){display:block}
html[data-l-fs=block] [data-sec=hero]:has(.kv-art) [data-hero-text]{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:clamp(24px,5vw,72px);align-items:end}
html[data-l-fs=block] [data-sec=hero]:has(.kv-art) [data-hero-text] > h1{grid-column:1;grid-row:1 / span 3;margin:0}
html[data-l-fs=block] [data-sec=hero]:has(.kv-art) [data-hero-text] > :not(h1):not(dl){grid-column:2}
html[data-l-fs=block] [data-sec=hero]:has(.kv-art) [data-hero-text] > dl{grid-column:1 / -1;margin-top:clamp(24px,4vw,48px);padding:clamp(16px,3vw,28px);border:0;border-radius:var(--r-card,10px);background:var(--accent);color:var(--on-accent,#fff)}
html[data-l-fs=block] [data-sec=hero]:has(.kv-art) [data-hero-text] > dl *{color:inherit}
@media (max-width:760px){html[data-l-fs=block] [data-sec=hero]:has(.kv-art) [data-hero-text]{grid-template-columns:minmax(0,1fr)}html[data-l-fs=block] [data-sec=hero]:has(.kv-art) [data-hero-text] > *{grid-column:1 !important;grid-row:auto !important}}
html[data-l-fs=mosaic] [data-sec=hero] .kv-art[data-hero-media]{inset:0;opacity:.3}
html[data-l-fs=mosaic] [data-sec=hero]:has(.kv-art) [data-hero-text]{padding:clamp(20px,3vw,36px);border-radius:var(--r-card,10px);background:color-mix(in srgb,var(--bg) 82%,transparent)}
/* any first screen that makes main a flex column: sections keep the full width (they shrank to their content) */
html[data-l-fs] [data-main] > section{width:100%;box-sizing:border-box}
/* the block first screen paints the hero in the accent: its links and small text use the on-accent colour */
html[data-l-fs=block] [data-sec=hero] a:not(.btn),html[data-l-fs=block] [data-sec=hero] .kicker,html[data-l-fs=block] [data-sec=hero] .lead,html[data-l-fs=block] [data-sec=hero] dt,html[data-l-fs=block] [data-sec=hero] dd{color:var(--on-accent,#fff)}

@media (min-width:960px){
html[data-l-app=rail] body{display:grid;grid-template-columns:260px minmax(0,1fr)}
html[data-l-app=rail] body > *{grid-column:2}
html[data-l-app=rail] body > [data-sec=nav]{grid-column:1;grid-row:1 / span 20;position:sticky;top:0;height:100vh;padding:32px 24px;border-right:1px solid var(--line);background:var(--surface);max-width:none}
html[data-l-app=statcol] [data-main]{grid-template-columns:300px minmax(0,1fr);align-items:start}
html[data-l-app=statcol] [data-main] > [data-sec=stats]{grid-column:1;grid-row:1 / span 2;position:sticky;top:16px}
html[data-l-app=statcol] [data-main] > [data-sec=stats] dl{grid-template-columns:minmax(0,1fr)}
html[data-l-app=statcol] [data-main] > :not([data-sec=stats]){grid-column:2}
html[data-l-app=wide] [data-main] > [data-sec=feature]{grid-template-columns:minmax(0,1fr)}
html[data-l-app=split] body > [data-sec=nav]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;align-items:end}
html[data-l-app=split] body > [data-sec=nav] > :nth-child(n+3){grid-column:2}
}
html[data-l-app=chartsfirst] [data-main] > [data-sec=feature]{order:-1}
html[data-l-app=tablefirst] [data-main] > [data-sec=list]{order:-1}
html[data-l-app=chartsfirst] [data-main],html[data-l-app=tablefirst] [data-main]{display:flex;flex-direction:column}
html[data-l-app=band] body > [data-sec=nav]{max-width:none;padding-inline:max(16px,calc((100vw - 1200px) / 2));background:var(--accent);color:var(--on-accent,#fff)}
html[data-l-app=band] body > [data-sec=nav] *{color:inherit}
html[data-l-app=band] [data-main] > [data-sec=stats] dl > div{padding:16px;border:1px solid var(--line);border-radius:var(--r-card,10px);background:var(--surface)}
@media (min-width:960px){
/* statright: the figures in a right-hand column; sbs: charts beside the table */
html[data-l-app=statright] [data-main]{grid-template-columns:minmax(0,1fr) 300px;align-items:start}
html[data-l-app=statright] [data-main] > [data-sec=stats]{grid-column:2;grid-row:1 / span 2;position:sticky;top:16px}
html[data-l-app=statright] [data-main] > [data-sec=stats] dl{grid-template-columns:minmax(0,1fr)}
html[data-l-app=statright] [data-main] > :not([data-sec=stats]){grid-column:1}
html[data-l-app=sbs] [data-main]{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}
html[data-l-app=sbs] [data-main] > [data-sec=stats]{grid-column:1 / -1}
html[data-l-app=sbs] [data-main] > [data-sec=feature]{grid-column:1;grid-template-columns:minmax(0,1fr)}
html[data-l-app=sbs] [data-main] > [data-sec=list]{grid-column:2}
}

html:not([data-kv-art]) .kv-art{display:none}
html:not([data-kv-art]) .hero-in{grid-template-columns:minmax(0,1fr)}

html[data-l-fs=folio] [data-sec=hero]:has(.kv-art) :has(> [data-hero-text]){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
html[data-l-fs=folio] [data-sec=hero] .kv-art[data-hero-media]{order:-1;align-self:stretch;min-height:clamp(380px,60vh,620px);margin-block:calc(-1 * var(--s-8,64px)) calc(-1 * var(--s-7,48px));margin-inline-start:calc(-1 * (var(--gutter,24px) + max(0px,(100vw - var(--page,1200px)) / 2)));border-radius:0 var(--r-card,10px) var(--r-card,10px) 0}
html[data-l-fs=folio] [data-sec=hero]:has(.kv-art) [data-hero-text]{padding-block:var(--s-5,24px)}
@media (max-width:760px){
html[data-l-fs=folio] [data-sec=hero]:has(.kv-art) :has(> [data-hero-text]){grid-template-columns:minmax(0,1fr);gap:var(--s-5,24px)}
html[data-l-fs=folio] [data-sec=hero] .kv-art[data-hero-media]{min-height:96px;height:96px;margin:calc(-1 * var(--s-8,64px)) calc(-1 * var(--gutter,16px)) 0;border-radius:0}
html[data-l-fs=folio] [data-sec=hero]:has(.kv-art) [data-hero-text]{padding-block:0}
}

html[data-l-pl] main[data-main]{row-gap:var(--s-5,24px)}
html[data-l-pl][data-l-fs=type] [data-sec=hero] h1,html[data-l-pl][data-l-fs=overlay] [data-sec=hero] h1,html[data-l-pl][data-l-fs=mosaic] [data-sec=hero] h1{max-width:none}
html[data-l-pl][data-l-fs=type] [data-sec=hero]::after{margin-top:var(--s-4,16px)}
html[data-l-pl][data-l-fs=overlay] [data-sec=hero] [data-hero-text],html[data-l-pl][data-l-fs=mosaic] [data-sec=hero]:has(.kv-art) [data-hero-text]{max-width:min(820px,100%);padding:var(--s-5,24px)}
html[data-l-pl][data-l-fs=block] [data-sec=hero] :has(> [data-hero-text]){min-height:0}
html[data-l-pl][data-l-fs=block] [data-sec=hero] [data-hero-text]{padding:var(--s-6,32px) clamp(24px,4vw,56px)}
html[data-l-pl][data-l-fs=minimal] [data-sec=nav] > *{padding-block:var(--s-4,16px) var(--s-2,8px)}
html[data-l-pl][data-l-fs=minimal] [data-sec=nav] > * > :first-child{font-size:clamp(1.4rem,1rem + 1.2vw,2rem)}
html[data-l-pl][data-l-fs=minimal] [data-sec=hero]{padding-bottom:var(--s-4,16px)}
html[data-l-pl][data-l-fs=minimal] [data-sec=hero] .kv-art[data-hero-media]{height:72px;min-height:0}
html[data-l-pl] [data-main] > [data-sec=list] [data-list]{min-width:0;max-width:100%}
/* where the products sit (>= 1000px; the side column = the page's [data-sec=feature], a shop's cart): grid = the kit's own (products, the side column right);
   wide = the shelf spans the page, the side column under it; feature / pairs = the side column on the LEFT; rows = the filters [data-filters] as a left rail,
   the list beside them, the side column under; rail = the shelf first (under the nav, above the hero), the side column after the hero */
@media (min-width:1000px){
html[data-l-pl=wide] main[data-main] > section[data-sec=list],html[data-l-pl=rows] main[data-main] > section[data-sec=list],html[data-l-pl=rail] main[data-main] > section[data-sec=list]{grid-column:1 / -1}
html[data-l-pl=wide] main[data-main] > section[data-sec=feature],html[data-l-pl=rows] main[data-main] > section[data-sec=feature],html[data-l-pl=rail] main[data-main] > section[data-sec=feature]{grid-column:1 / -1;grid-row:auto;position:static;width:min(100%,560px);justify-self:end}
html[data-l-pl=wide] [data-main] > [data-sec=list] [data-list]{grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr))}
html[data-l-pl=feature] body > main[data-main][data-main],html[data-l-pl=pairs] body > main[data-main][data-main]{grid-template-columns:300px minmax(0,1fr)}
html[data-l-pl=feature] main[data-main] > section[data-sec=list],html[data-l-pl=pairs] main[data-main] > section[data-sec=list]{grid-column:2;grid-row:2}
html[data-l-pl=feature] main[data-main] > section[data-sec=feature],html[data-l-pl=pairs] main[data-main] > section[data-sec=feature]{grid-column:1;grid-row:2}
html[data-l-pl=feature] main[data-main] > section[data-sec=hero],html[data-l-pl=pairs] main[data-main] > section[data-sec=hero]{grid-column:1 / -1;grid-row:1}
html[data-l-pl=rows] main[data-main] > section[data-sec=list]:has(> [data-filters]){display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:clamp(24px,3vw,40px);align-items:start}
html[data-l-pl=rows] main[data-main] > section[data-sec=list]:has(> [data-filters]) > *{grid-column:2}
html[data-l-pl=rows] main[data-main] > section[data-sec=list] > [data-filters]{grid-column:1;grid-row:1 / span 4;display:grid;gap:var(--s-3,12px);align-content:start;padding:var(--s-4,16px);border:1px solid var(--line);border-radius:var(--r-card,10px);background:var(--surface)}
html[data-l-pl=rows] main[data-main] > section[data-sec=list] > [data-filters] > *{flex:none}
html[data-l-pl=rail] main[data-main] > section[data-sec=list]{grid-row:1}
html[data-l-pl=rail] main[data-main] > section[data-sec=hero]{grid-column:1 / -1;grid-row:2}
html[data-l-pl=rail] main[data-main] > section[data-sec=feature]{grid-row:3}
}
html[data-l-pl=pairs] [data-main] > [data-sec=list] [data-list]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4,16px)}
html[data-l-pl=pairs] [data-main] > [data-sec=list] [data-item]{display:grid;grid-template-columns:minmax(0,24%) minmax(0,1fr) auto;column-gap:var(--s-4,16px);row-gap:var(--s-1,4px);align-content:start;align-items:end}
html[data-l-pl=pairs] [data-main] > [data-sec=list] [data-item] > [data-item-media]{grid-column:1;grid-row:1 / span 4;aspect-ratio:1;align-self:start}
html[data-l-pl=pairs] [data-main] > [data-sec=list] [data-item] > :not([data-item-media]){grid-column:2 / -1}
html[data-l-pl=pairs] [data-main] > [data-sec=list] [data-item] > :has(select):not([data-item-media]){grid-column:2}
html[data-l-pl=pairs] [data-main] > [data-sec=list] [data-item] > :is(button,.btn){grid-column:3}
html[data-l-pl=rail] [data-main] > [data-sec=list] [data-list]{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:clamp(150px,21%,180px);gap:var(--s-3,12px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:var(--s-4,16px);border-radius:var(--r-card,10px);background:var(--sunk-0,var(--sunk))}
html[data-l-pl=rail] [data-main] > [data-sec=list] [data-item]{scroll-snap-align:start}
html[data-l-pl=rail] [data-main] > [data-sec=list] [data-item-media]{aspect-ratio:1}
html[data-l-pl=feature] [data-main] > [data-sec=list] [data-list]{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:var(--s-4,16px);align-items:start}
html[data-l-pl=feature] [data-main] > [data-sec=list] [data-item]:first-child{grid-row:span 2}
html[data-l-pl=feature] [data-main] > [data-sec=list] [data-item]:first-child [data-item-media]{aspect-ratio:4/3}
html[data-l-pl=feature] [data-main] > [data-sec=list] [data-item]:not(:first-child) [data-item-media]{aspect-ratio:16/10}
html[data-l-pl=rows] [data-main] > [data-sec=list] [data-list]{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--line)}
html[data-l-pl=rows] [data-main] > [data-sec=list] [data-item]{display:grid;grid-template-columns:72px minmax(0,1fr) fit-content(300px) auto;column-gap:var(--s-4,16px);row-gap:2px;align-items:center;align-content:center;padding:10px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none}
html[data-l-pl=rows] [data-main] > [data-sec=list] [data-item] > [data-item-media]{grid-column:1;grid-row:1 / span 3;aspect-ratio:1;align-self:start}
html[data-l-pl=rows] [data-main] > [data-sec=list] [data-item] > :not([data-item-media]){grid-column:2}
html[data-l-pl=rows] [data-main] > [data-sec=list] [data-item] > :has(select):not([data-item-media]){grid-column:3;grid-row:1 / span 3}
html[data-l-pl=rows] [data-main] > [data-sec=list] [data-item] > :is(button,.btn){grid-column:4;grid-row:1 / span 3}
@media (max-width:599px){
html[data-l-pl=feature] [data-main] > [data-sec=list] [data-list]{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3,12px)}
html[data-l-pl=feature] [data-main] > [data-sec=list] [data-item]:first-child{grid-column:1 / -1;grid-row:auto}
html[data-l-pl=feature] [data-main] > [data-sec=list] [data-item]:first-child [data-item-media]{aspect-ratio:16/10}
html[data-l-pl=pairs] [data-main] > [data-sec=list] [data-list]{grid-template-columns:minmax(0,1fr)}
html[data-l-pl=pairs] [data-main] > [data-sec=list] [data-item] > :is(button,.btn,:has(select)):not([data-item-media]){grid-column:2 / -1}
html[data-l-pl=rail] [data-main] > [data-sec=list] [data-list]{grid-auto-columns:46%;padding:var(--s-3,12px)}
html[data-l-pl=rows] [data-main] > [data-sec=list] [data-item]{grid-template-columns:64px minmax(0,1fr)}
html[data-l-pl=rows] [data-main] > [data-sec=list] [data-item] > [data-item-media]{grid-row:1 / span 5}
html[data-l-pl=rows] [data-main] > [data-sec=list] [data-item] > :is(button,.btn,:has(select)):not([data-item-media]){grid-column:2;grid-row:auto;justify-self:start}
}
/* a catalogue page on a phone: the nav is one row (name left, actions right) whatever the nav chrome, so a split / minimal name never runs under the cart button */
@media (max-width:760px){
html[data-l-pl] [data-sec=nav] > *{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-2,8px) var(--s-3,12px);position:static}
html[data-l-pl] [data-sec=nav] > * > :is(:first-child,:last-child:not(:first-child)){grid-column:auto;grid-row:auto;position:static;justify-self:auto;text-align:left;min-width:0}
}
/* the shelf-first rail from 1000px (after the base rail rules, which it overrides): wider, shorter cards so the hero's h1 stays in the first screen */
@media (min-width:1000px){
html[data-l-pl=rail] [data-main] > [data-sec=list] [data-list]{grid-auto-columns:clamp(200px,20%,240px)}
html[data-l-pl=rail] [data-main] > [data-sec=list] [data-item-media]{aspect-ratio:16/9}
}
/* THE DRAWER (layouts round 3, 10-10): a side panel the kit's code marks data-kv-drawer=closed (a shop's EMPTY cart) shows only its .kv-tab button: a slim
   vertical tab in the panel's own place (right for grid, left for feature / pairs) from 1000px, nothing where the panel sits under the shelf (wide / rows / rail)
   and nothing on a phone (the header button opens it). Open = the full panel, placed as before. */
html[data-l-pl] [data-kv-drawer=closed] > :not(.kv-tab){display:none}
html[data-l-pl] [data-kv-drawer=open] > .kv-tab{display:none}
html[data-l-pl] [data-kv-drawer=closed]{padding:0;border:0;background:none;box-shadow:none}
@media (max-width:999px){html[data-l-pl] [data-kv-drawer=closed]{display:none}}
@media (min-width:1000px){
html[data-l-pl] [data-kv-drawer=closed] > .kv-tab{writing-mode:vertical-rl;min-height:140px;width:48px;padding:14px 0;gap:10px}
html[data-l-pl] body > main[data-main][data-main]:has(> [data-kv-drawer=closed]){grid-template-columns:minmax(0,1fr) 48px}
html[data-l-pl=feature] body > main[data-main][data-main]:has(> [data-kv-drawer=closed]),html[data-l-pl=pairs] body > main[data-main][data-main]:has(> [data-kv-drawer=closed]){grid-template-columns:48px minmax(0,1fr)}
html[data-l-pl=wide] [data-kv-drawer=closed],html[data-l-pl=rows] [data-kv-drawer=closed],html[data-l-pl=rail] [data-kv-drawer=closed]{display:none}
}
/* round 3: with the cart a slim tab the feature product gets a wider column: a shorter 16:10 picture keeps three prices in the first screen;
   the shelf-first rail under the minimal first screen drops the hero's art strip so the h1 stays in view */
@media (min-width:1000px){
html[data-l-pl=feature] [data-main] > [data-sec=list] [data-item]:first-child [data-item-media]{aspect-ratio:16/10}
html[data-l-pl=feature] [data-main] > [data-sec=list] [data-item]:not(:first-child) [data-item-media]{aspect-ratio:2/1}
html[data-l-pl=rail][data-l-fs=minimal] [data-sec=hero] [data-hero-media]{display:none}
}

/* HERO LINE ART CAP (K-HERO 10-12, the 3rd founder-visible case: "make a rolex watch store" x2, a cosmetics store on retail_store_v1's port): a hero
   whose media is a drawn <svg> (no photo) has no size of its own -- at width 100% of a stacked / full-width first screen it ran 900+ px tall, an outline
   cropped at the hero's edge or over the next section. On EVERY first screen (and the kit's own, no data-l-fs): the art stays in its media box (box clips, svg height 100% of a box with a set height, else its own ratio, the drawing
   scaled to fit at the svg's default meet), at most min(44vh,380px) tall; block = a centred panel in its column, the hero <= min(76vh,620px); overlay =
   a backdrop inside the hero, behind the text, at low opacity. Never sets display, so a first screen that hides the art keeps it hidden. */
html [data-sec=hero] [data-hero-media]:not(:has(img)){max-width:100%;overflow:hidden}
html [data-sec=hero] [data-hero-media]:not(:has(img)) > svg{width:100%;height:100%;max-width:100%;max-height:min(44vh,380px);margin-inline:auto;vertical-align:middle}
html[data-l-fs=block] [data-sec=hero]:has([data-hero-media] > svg):not(:has([data-hero-media] img)) :has(> [data-hero-text]){min-height:min(76vh,620px)}
html[data-l-fs=block] [data-sec=hero] [data-hero-media]:not(:has(img)):not(.kv-art){display:grid;place-items:center;height:auto;align-self:stretch;padding:clamp(16px,3vw,40px)}
html[data-l-fs=block] [data-sec=hero] [data-hero-media]:not(:has(img)) > svg{height:auto;max-height:min(56vh,460px)}
html[data-l-fs=overlay] [data-sec=hero]:has([data-hero-media] > svg):not(:has([data-hero-media] img)){min-height:min(70vh,620px);padding-block:clamp(1.5rem,4vw,3rem)}
html[data-l-fs=overlay] [data-sec=hero] [data-hero-media]:not(:has(img)){opacity:.18}
html[data-l-fs=overlay] [data-sec=hero] [data-hero-media]:not(:has(img)) > svg{height:100%;max-height:none}
@media (min-width:761px){html:is([data-l-fs=sidebar],[data-l-fs=folio]) [data-sec=hero]:has([data-hero-media] > svg):not(:has([data-hero-media] img)) :has(> [data-hero-text]){display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,56px);align-items:center}} /* sidebar / folio: the art beside the text (stacked under it the hero ran past the fold) */
/* VARIANT PORTS (L-SITES-C 10-11): fixes for the marked variant pages only. K-LAYOUT's runtime (tools/layout_marker_runtime.js, appended to a port's app.js)
   sets html[data-kv-port] under variety, so the listed kits' own pages never match these rules.
   - catalogue: a kicker before the h1 pushed the h1 into the button column and squeezed the lede to one word per line
   - the flex column of a first screen orders main's sections (order 5, the hero 0); a part that is not a section (a board / list wrapper div) kept order 0
     and jumped above the filters and headings it follows: it keeps its place among them
   - block: the kicker chip's house tint made the on-accent text vanish
   - phone: the split nav keeps the brand and the last item (actions) on one row, the middle items under them; the minimal nav's last item sits in the flow
     (absolute at the top right it covered the wordmark) */
:where(html[data-kv-port]) .kv-nav-in{display:contents} /* the runtime's inner wrapper of a flat header: no box until a shared nav rule (split / centered / minimal / sidebar / pill) lays it out */
html[data-kv-port] [data-sec=nav] > .kv-nav-in{flex:1 1 100%;min-width:0} /* boxed inside a flex header it takes the row (the centred minimal / split navs centred on the content width) */
html[data-kv-port][data-l-fs=catalogue] [data-sec=hero] [data-hero-text] > h1{grid-column:1}
html[data-kv-port][data-l-fs] [data-sec=hero]:has(> .kv-hero-in){grid-template-columns:minmax(0,1fr)} /* the runtime's hero wrapper is the hero's one child: a hero that is its own two-column grid kept every first screen in its left half */
@media (min-width:761px){html[data-kv-port][data-l-nav=split] [data-sec=nav] > * > :first-child:nth-last-child(2){grid-column:1 / 3;justify-self:start;min-width:0}} /* a two-part nav (brand block, actions): the centred brand column sized to a long tagline ran under the actions */
html[data-kv-port][data-l-fs] [data-main] > :not(section):not([data-sec=hero]){order:5}
html[data-kv-port][data-l-fs=block] [data-sec=hero] .kicker{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 45%,transparent)}
/* mosaic: a hero illustration that is not an <img> fills the collage frame (it sat in one small cell, the rest of the frame empty) */
html[data-kv-port][data-l-fs=mosaic] [data-sec=hero] [data-hero-media]:not(:has(img)):not(.kv-art) > :first-child{grid-column:1 / -1;grid-row:1 / -1;width:100%;height:100%;max-width:none;max-height:none;margin:0}
html[data-kv-port][data-l-fs=mosaic] [data-sec=hero] [data-hero-media]:not(:has(img)):not(.kv-art) svg{width:100%;height:100%}
/* minimal: a hero illustration that is not an <img> is a short wide band above the headline (full width at its own ratio it pushed the h1 below the fold) */
html[data-kv-port][data-l-fs=minimal] [data-sec=hero] [data-hero-media]:not(:has(img)):not(.kv-art){height:clamp(140px,26vh,260px);overflow:hidden}
html[data-kv-port][data-l-fs=minimal] [data-sec=hero] [data-hero-media]:not(:has(img)):not(.kv-art) > svg:first-child{width:100%;height:100%}
@media (max-width:760px){
html[data-kv-port][data-l-nav=split] [data-sec=nav] > *{grid-template-columns:minmax(0,1fr) auto}
html[data-kv-port][data-l-nav=split] [data-sec=nav] > * > :first-child{grid-column:1;justify-self:start}
html[data-kv-port][data-l-nav=split] [data-sec=nav] > * > :last-child:not(:first-child){grid-column:2;grid-row:1}
html[data-kv-port][data-l-nav=split] [data-sec=nav] > * > :not(:first-child):not(:last-child){grid-column:1 / -1;grid-row:2;justify-self:start}
html[data-kv-port][data-l-fs=minimal] [data-sec=nav] > * > :last-child:not(:first-child){position:static}
html[data-kv-port][data-l-nav=split] [data-sec=nav] > * > :first-child:nth-last-child(2) ~ :last-child{grid-column:1 / -1;grid-row:2;justify-self:start} /* a two-part nav (brand, links): the links take the next row (beside the brand they ran over it) */
}
/* VARIANT PORTS, apps (L-SITES-C 10-11): band = the accent header band: a kicker chip's house tint went white under the band's inherited white text;
   sbs = feature left, list right: a page with two feature parts (a toolbar + a panel) put the toolbar alone in the left column and the panel under the
   list: the first feature spans the row and the grid packs the second beside the list */
html[data-kv-port][data-l-app=band] body > [data-sec=nav] .kicker{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 45%,transparent)}
@media (min-width:960px){
html[data-kv-port][data-l-app=sbs] [data-main]{grid-auto-flow:row dense}
html[data-kv-port][data-l-app=sbs] [data-main] > [data-sec=feature]:has(~ [data-sec=feature]){grid-column:1 / -1}
}