/* PRISMELLEA — concept: prism split. One beam (one bag) splits into five coloured steps. */

@font-face { font-family: "Bricolage"; src: url(../fonts/bricolage-latin.woff2) format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage"; src: url(../fonts/bricolage-latin-ext.woff2) format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument"; src: url(../fonts/instrument-latin.woff2) format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument"; src: url(../fonts/instrument-latin-ext.woff2) format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Mono"; src: url(../fonts/dmmono-400-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "DM Mono"; src: url(../fonts/dmmono-400-latin-ext.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+1E00-1E9F; }
@font-face { font-family: "DM Mono"; src: url(../fonts/dmmono-500-latin.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }

:root {
	--bg: #fbf4ec;
	--surface: #fffaf4;
	--ink: #1e1631;
	--ink2: #43395a;
	--muted: #62587a;
	--line: #e6d9ca;
	--stage: #1e1631;
	--stage2: #2b2147;
	--on-stage: #fbf4ec;
	--on-stage-muted: #c9bfdc;
	--accent: #ff4f64;
	--accent-deep: #b8213a;
	--s0: #f6c9a8;
	--s1: #7fe0c9;
	--s2: #9db4ff;
	--s3: #cfa2ff;
	--s4: #ffa9b9;
	--s5: #ffd86b;
	--ok: #1f7a52;
	--err: #b42330;
	--spectrum: linear-gradient(90deg, var(--s1) 0 20%, var(--s2) 20% 40%, var(--s3) 40% 60%, var(--s4) 60% 80%, var(--s5) 80% 100%);
	--ff-d: "Bricolage", "Arial Narrow", system-ui, sans-serif;
	--ff-t: "Instrument", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ff-m: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	--r: 22px;
	--r-sm: 14px;
	--gut: clamp(16px, 4vw, 48px);
	--max: 1440px;
	--ease: cubic-bezier(.22, .8, .18, 1);
	--fs-hero: clamp(52px, 9.4vw, 152px);
	--fs-h1: clamp(40px, 6vw, 92px);
	--fs-h2: clamp(32px, 4.3vw, 64px);
	--fs-h3: clamp(22px, 2.1vw, 30px);
	--head-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--ff-t); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--ff-d); font-weight: 750; line-height: 1.02; letter-spacing: -.025em; margin: 0 0 .4em; text-wrap: balance; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--s3); color: var(--ink); }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; }
.skip:focus { top: 12px; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); letter-spacing: -.015em; }
.lede { font-size: clamp(17px, 1.35vw, 20px); color: var(--ink2); max-width: 46ch; }
.eyebrow { font: 500 12px/1.2 var(--ff-m); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 34px; height: 6px; border-radius: 3px; background: var(--spectrum); flex: none; }
.eyebrow--stage { color: var(--on-stage-muted); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); display: inline-block; }
.eyebrow .dot + * { margin: 0; }
.ico { flex: none; }

/* ---------- Buttons: the spectrum hairline lights up from left to right ---------- */
.btn { --b: var(--ink); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 1.5px solid var(--b); background: transparent; color: var(--ink); font: 600 15px/1.1 var(--ff-t); letter-spacing: .01em; text-decoration: none; overflow: hidden; isolation: isolate; transition: transform .25s var(--ease), background-color .25s, color .25s; white-space: nowrap; }
.btn::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 3px; border-radius: 2px; background: var(--spectrum); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); z-index: -1; }
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }
.btn:active { transform: translateY(1px); }
.btn .ico { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover .ico--arrow { transform: translateX(4px); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn--accent:hover { background: #ff6878; }
.btn--ink { background: var(--ink); color: var(--bg); }
.btn--ink:hover { background: var(--stage2); }
.btn--line { background: transparent; }
.btn--line:hover { background: var(--surface); }
.btn--stage { --b: rgba(251, 244, 236, .5); color: var(--on-stage); }
.btn--stage:hover { background: rgba(251, 244, 236, .08); }
.btn--lg { min-height: 56px; padding: 14px 28px; font-size: 16px; }
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: 14px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: inherit; position: relative; text-decoration: none; }
.icon-btn:hover { background: rgba(30, 22, 49, .06); }
.icon-btn--line { border: 1.5px solid var(--line); }
.link-btn { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.pill-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 10px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); font: 500 13px/1 var(--ff-m); letter-spacing: .04em; }
.pill-btn .ico { width: 18px; height: 18px; }

/* ---------- Spectrum band (data-driven: lights one segment per compartment) ---------- */
.band { display: inline-grid; grid-template-columns: repeat(5, 1fr); gap: 3px; width: 72px; height: 8px; vertical-align: middle; }
.band i { border-radius: 3px; background: var(--line); }
.band[data-lit="1"] i:nth-child(-n+1), .band[data-lit="2"] i:nth-child(-n+2), .band[data-lit="3"] i:nth-child(-n+3), .band[data-lit="4"] i:nth-child(-n+4), .band[data-lit="5"] i:nth-child(-n+5) { background: var(--seg); }
.band i:nth-child(1) { --seg: var(--s1); } .band i:nth-child(2) { --seg: var(--s2); } .band i:nth-child(3) { --seg: var(--s3); } .band i:nth-child(4) { --seg: var(--s4); } .band i:nth-child(5) { --seg: var(--s5); }
.band[data-lit="-1"] { grid-template-columns: 1fr; width: 24px; }
.band[data-lit="-1"] i { background: var(--s0); }
.band[data-lit="-1"] i:not(:first-child) { display: none; }
.band[data-lit="0"] i { background: transparent; border: 1.5px solid var(--s4); }

/* ---------- Announcement + header ---------- */
.announce { background: var(--stage); color: var(--on-stage); position: relative; }
.announce::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--spectrum); }
.announce__text { margin: 0; padding: 9px var(--gut) 11px; text-align: center; font: 500 12px/1.4 var(--ff-m); letter-spacing: .06em; }
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(251, 244, 236, .92); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.site-head.is-stuck { border-color: var(--line); box-shadow: 0 8px 30px -22px rgba(30, 22, 49, .4); }
.site-head__inner { display: flex; align-items: center; gap: 12px; height: var(--head-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.logo-mark { width: 38px; height: 38px; border-radius: 10px; }
.wordmark { height: 15px; width: auto; }
.brand__word { height: 15px; }
.main-nav { display: none; margin-left: 18px; }
.main-nav ul { list-style: none; display: flex; align-items: center; gap: 2px; }
.main-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 11px; border-radius: 999px; font-size: 14.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.main-nav a i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.main-nav a:hover { background: rgba(30, 22, 49, .06); }
.main-nav__sep { width: 1px; height: 22px; background: var(--line); margin: 0 6px; }
.head-tools { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.head-tools .pill-btn { margin-right: 4px; }
.head-account { display: none; }
.head-cart__n { position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--accent); color: var(--ink); font: 500 11px/19px var(--ff-m); text-align: center; display: none; }
.has-cart .head-cart__n { display: block; }
.head-burger { margin-left: -10px; }
.pop { position: relative; }
.pop__panel { position: absolute; right: 0; top: calc(100% + 10px); width: 280px; padding: 18px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r); box-shadow: 0 30px 60px -30px rgba(30, 22, 49, .45); z-index: 60; }
.pop__label { font: 500 11px/1 var(--ff-m); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.pop__list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 16px; }
.pop__list:last-child { margin-bottom: 0; }
.pop__list a { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); text-decoration: none; font-size: 14px; }
.pop__list a[aria-current] { border-color: var(--ink); background: var(--bg); box-shadow: inset 0 -3px 0 var(--accent); }
.pop__list--cur { grid-template-columns: repeat(3, 1fr); }
.pop__list--cur a { flex-direction: column; align-items: flex-start; gap: 2px; font-family: var(--ff-m); }
.pop__list--cur span { color: var(--muted); font-size: 12px; }
.search-panel { border-top: 1px solid var(--line); background: var(--bg); padding: 16px 0; }
.search-form { display: flex; gap: 10px; }
.search-form input[type=search] { flex: 1; min-width: 0; height: 52px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--surface); padding: 0 22px; font-size: 16px; }
.drawer { position: fixed; inset: 0; z-index: 80; background: rgba(30, 22, 49, .5); }
.drawer__panel { position: absolute; inset: 0 auto 0 0; width: min(420px, 92vw); background: var(--bg); overflow-y: auto; padding: 18px var(--gut) 40px; animation: drawer-in .35s var(--ease); }
@keyframes drawer-in { from { transform: translateX(-30px); opacity: 0; } }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.drawer__word { height: 16px; }
.drawer__cats { list-style: none; display: grid; gap: 8px; margin-bottom: 24px; }
.drawer__cats a { display: grid; gap: 2px; padding: 16px 18px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--c) 34%, var(--bg)); text-decoration: none; border-left: 8px solid var(--c); }
.drawer__cats span { font: 700 21px/1.1 var(--ff-d); letter-spacing: -.01em; }
.drawer__cats small { color: var(--ink2); font-size: 13px; }
.drawer__links { list-style: none; display: grid; margin-bottom: 26px; border-top: 1px solid var(--line); }
.drawer__links a { display: block; padding: 14px 2px; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 500; }
.chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip-list a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); text-decoration: none; font-size: 14px; }
.chip-list a[aria-current] { border-color: var(--ink); background: var(--ink); color: var(--bg); }

@media (min-width: 700px) {
	.head-account { display: inline-grid; }
	.wordmark, .brand__word { height: 17px; }
}
@media (min-width: 1240px) {
	.main-nav { display: block; }
	.head-burger { display: none; }
}

/* ---------- Hero: dark stage, light split into five beams into the open bag ---------- */
.hero { position: relative; background: var(--stage); color: var(--on-stage); overflow: hidden; padding: clamp(28px, 5vw, 72px) 0 0; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 78% 40%, rgba(157, 180, 255, .18), transparent 70%), radial-gradient(40% 50% at 10% 90%, rgba(255, 169, 185, .12), transparent 70%); z-index: -2; }
.hero__beams { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__beams svg { width: 100%; height: 100%; }
.beam-in-unused { stroke-dasharray: 700; stroke-dashoffset: 700; animation: beam-draw 1s .2s var(--ease) forwards; }
.beam-fan path { opacity: 0; transform-origin: 640px 340px; transform: scaleX(.2); animation: beam-fan 1.1s calc(1s + var(--i) * .09s) var(--ease) forwards; mix-blend-mode: screen; }
.prism { fill: rgba(251, 244, 236, .16); stroke: var(--on-stage); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
@keyframes beam-draw { to { stroke-dashoffset: 0; } }
@keyframes beam-fan { to { opacity: .34; transform: scaleX(1); } }
.hero__grid { display: grid; gap: 28px; position: relative; }
.kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font: 500 12px/1.3 var(--ff-m); letter-spacing: .12em; text-transform: uppercase; color: var(--on-stage-muted); margin: 0 0 22px; }
.kicker__chip { padding: 6px 10px; border-radius: 999px; background: rgba(251, 244, 236, .1); color: var(--on-stage); border: 1px solid rgba(251, 244, 236, .2); }
.hero__title { font-size: var(--fs-hero); line-height: .9; letter-spacing: -.045em; margin: 0 0 26px; font-weight: 780; }
.hero__l1, .hero__l2 { display: block; }
.hero__l2 { padding-left: .62em; background: linear-gradient(90deg, var(--s1), var(--s2) 30%, var(--s3) 55%, var(--s4) 78%, var(--s5)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.hero__sub { font-size: clamp(17px, 1.4vw, 21px); color: var(--on-stage-muted); max-width: 40ch; margin-bottom: 30px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.hero__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; font: 500 12px/1.4 var(--ff-m); letter-spacing: .06em; color: var(--on-stage-muted); }
.hero__facts li { display: flex; align-items: center; gap: 8px; }
.hero__facts li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--s5); }
.hero__facts li:nth-child(2)::before { background: var(--s2); }
.hero__facts li:nth-child(3)::before { background: var(--s1); }
.hero__frame { position: relative; margin: 0; }
.hero__media { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; background: var(--stage2); box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .7); }
.hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { opacity: 0; transition: opacity .8s; }
.hero__video.is-on { opacity: 1; }
.hero__zip { position: absolute; left: 14%; right: 14%; top: -7px; height: 14px; z-index: 2; background: repeating-linear-gradient(90deg, var(--on-stage) 0 6px, transparent 6px 12px); -webkit-mask: linear-gradient(180deg, #000 50%, transparent 50%), linear-gradient(180deg, transparent 50%, #000 50%); mask: linear-gradient(180deg, #000 50%, transparent 50%); opacity: .9; border-radius: 2px; }
.hero__zip::after { content: ""; position: absolute; right: -26px; top: -6px; width: 22px; height: 26px; border-radius: 8px; background: var(--accent); box-shadow: inset 0 -6px 0 rgba(30, 22, 49, .18); }
.hero__tags { list-style: none; display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 2px; scrollbar-width: none; }
.hero__tags::-webkit-scrollbar { display: none; }
.hero__tag { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--c); color: var(--ink); font: 600 14px/1 var(--ff-t); }
.hero__tag b { font: 500 11px/1 var(--ff-m); background: var(--ink); color: var(--c); border-radius: 999px; padding: 5px 7px; }
.hero__rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 36px; padding-bottom: 0; }
.hero__rail a { position: relative; display: grid; gap: 2px; padding: 16px 14px 18px; text-decoration: none; color: var(--on-stage); background: rgba(251, 244, 236, .04); border-top: 4px solid var(--c); transition: background .25s; }
.hero__rail a:hover { background: rgba(251, 244, 236, .1); }
.hero__rail b { font: 500 12px/1 var(--ff-m); color: var(--c); }
.hero__rail span { font: 700 18px/1.1 var(--ff-d); }
.hero__rail small { font-size: 12.5px; color: var(--on-stage-muted); }

@media (min-width: 700px) {
	.hero__media { aspect-ratio: 16 / 11; }
	.hero__rail { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 1000px) {
	.hero { padding-top: clamp(40px, 5vw, 80px); }
	.hero__grid { grid-template-columns: repeat(12, 1fr); align-items: center; gap: 0; min-height: min(78vh, 760px); }
	.hero__copy { grid-column: 1 / 7; grid-row: 1; position: relative; z-index: 2; padding-right: 20px; }
	.hero__frame { grid-column: 6 / 13; grid-row: 1; transform: rotate(-2deg); margin-right: calc(var(--gut) * -1.5); margin-bottom: -40px; }
	.hero__media { aspect-ratio: 16 / 12; }
	.hero__tags { position: absolute; inset: 0; padding: 0; overflow: visible; pointer-events: none; }
	.hero__tag { position: absolute; transform: rotate(2deg); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55); animation: tag-in .6s calc(1.6s + var(--d, 0s)) var(--ease) both; }
	.hero__tag--1 { left: 6%; top: 10%; --d: 0s; }
	.hero__tag--2 { left: 58%; top: 7%; --d: .08s; }
	.hero__tag--3 { left: 2%; top: 64%; --d: .16s; }
	.hero__tag--4 { left: 38%; top: 82%; --d: .24s; }
	.hero__tag--5 { left: 72%; top: 66%; --d: .32s; }
	.hero__rail { margin-top: 70px; }
	.hero__rail a { padding: 20px 18px 24px; }
}
@keyframes tag-in { from { opacity: 0; transform: translateY(10px) rotate(2deg); } }

/* ---------- Section rhythm ---------- */
section { position: relative; }
.sec-head { margin-bottom: clamp(28px, 4vw, 52px); max-width: 760px; }
.sec-head .h2 { margin-bottom: .25em; }
.sec-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; max-width: none; flex-wrap: wrap; }
.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Step Builder ---------- */
.builder { padding: clamp(80px, 9vw, 140px) 0 clamp(60px, 7vw, 110px); background: var(--bg); }
.builder__grid { display: grid; gap: 40px; }
.builder__steps { border: 0; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.step-chip { position: relative; }
.step-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.step-chip span { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 8px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); font-weight: 600; transition: background .25s, border-color .25s; }
.step-chip b { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); font: 500 12px/1 var(--ff-m); border: 1.5px solid var(--line); transition: background .25s; }
.step-chip input:checked + span { background: color-mix(in srgb, var(--c) 45%, var(--surface)); border-color: var(--ink); }
.step-chip input:checked + span b { background: var(--c); border-color: var(--ink); }
.step-chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; }
.builder__viz { background: var(--surface); border: 1.5px solid var(--line); border-radius: calc(var(--r) + 8px); padding: clamp(18px, 3vw, 34px); }
.bagmap { width: 100%; max-width: 520px; margin: 0 auto 18px; overflow: visible; }
.bagmap__shell { fill: var(--bg); stroke: var(--ink); stroke-width: 2.5; }
.bagmap__zip { fill: var(--accent); }
.bagmap__prep { fill: none; stroke: var(--line); stroke-width: 16; stroke-linecap: round; transition: stroke .35s; }
.bagmap__prep.on { stroke: var(--s0); }
.bagmap__cell rect { fill: transparent; stroke: var(--line); stroke-width: 2; stroke-dasharray: 6 6; transition: fill .35s var(--ease), stroke .35s; }
.bagmap__cell text { font: 500 18px var(--ff-m); fill: var(--muted); }
.bagmap__cell.on rect { fill: var(--c); stroke: var(--ink); stroke-dasharray: none; }
.bagmap__cell.on text { fill: var(--ink); }
.builder__out { font: 500 13px/1.5 var(--ff-m); letter-spacing: .02em; color: var(--ink2); margin: 0 0 16px; min-height: 2.6em; }
.builder__picks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.builder__pick:nth-child(n+3) .card__body { display: none; }
@media (min-width: 700px) { .builder__picks { grid-template-columns: repeat(3, 1fr); } .builder__pick:nth-child(n+3) .card__body { display: grid; } }
@media (min-width: 1000px) {
	.builder__grid { grid-template-columns: 5fr 7fr; align-items: start; gap: 56px; }
	.builder__copy { position: sticky; top: calc(var(--head-h) + 40px); }
	.builder__viz { margin-top: -110px; position: relative; z-index: 3; box-shadow: 0 40px 80px -50px rgba(30, 22, 49, .45); }
}

/* ---------- Cards ---------- */
.card { position: relative; min-width: 0; }
.card__link { display: grid; gap: 14px; text-decoration: none; color: var(--ink); }
.card__media { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--r); overflow: hidden; background: var(--surface); }
.card__media::after { content: ""; position: absolute; inset: auto 0 0; height: 5px; background: var(--c); transform: scaleY(0); transform-origin: bottom; transition: transform .35s var(--ease); }
.card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s, transform .8s var(--ease); }
.card__img--alt { opacity: 0; }
.card__kind { position: absolute; left: 12px; top: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 250, 244, .9); font: 500 11px/1.2 var(--ff-m); letter-spacing: .06em; text-transform: uppercase; }
.card__body { display: grid; gap: 6px; }
.card__steps { display: flex; align-items: center; gap: 10px; }
.card__steps small { font: 500 11.5px/1 var(--ff-m); color: var(--muted); letter-spacing: .03em; }
.card__name { font: 650 18px/1.2 var(--ff-d); letter-spacing: -.01em; }
.card__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card__price { font-weight: 600; font-size: 16px; }
.card__dots { display: flex; gap: 4px; }
.card__dots i { width: 13px; height: 13px; border-radius: 50%; background: var(--dot); box-shadow: inset 0 0 0 1.5px rgba(30, 22, 49, .18); }
@media (hover: hover) {
	.card__link:hover .card__img--alt { opacity: 1; }
	.card__link:hover .card__img { transform: scale(1.03); }
	.card__link:hover .card__media::after { transform: scaleY(1); }
	.card__link:hover .card__name { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
}

/* ---------- Shelf (categories, staggered) ---------- */
.shelf { padding: clamp(60px, 7vw, 110px) 0; background: var(--surface); border-block: 1px solid var(--line); }
.shelf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tile { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--ink); background: color-mix(in srgb, var(--c) 40%, var(--bg)); min-width: 0; }
.tile__media { aspect-ratio: 4 / 3; overflow: hidden; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.tile:hover .tile__media img { transform: scale(1.04); }
.tile__body { position: relative; display: grid; align-content: start; gap: 4px; padding: 14px 16px 18px; border-top: 6px solid var(--c); }
.tile__count { font: 500 11px/1 var(--ff-m); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.tile__name { font: 750 clamp(19px, 2vw, 30px)/1.05 var(--ff-d); letter-spacing: -.02em; }
.tile__line { font-size: 14px; color: var(--ink2); display: none; }
.tile__go { position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--c); display: none; place-items: center; }
.tile--1 { grid-column: 1 / -1; }
.tile--1 .tile__media { aspect-ratio: 16 / 10; }
@media (min-width: 900px) {
	.shelf__grid { grid-template-columns: 1.45fr 1fr 1fr; grid-template-rows: auto auto; gap: 18px; align-items: start; }
	.tile--1 { grid-column: 1; grid-row: 1 / 3; }
	.tile--1 .tile__media { aspect-ratio: 4 / 4.6; }
	.tile--2 { margin-top: 64px; }
	.tile--3 { margin-top: 0; }
	.tile--4 { margin-top: 0; }
	.tile--5 { margin-top: -48px; }
	.tile__line { display: block; }
	.tile__go { display: grid; }
	.tile__body { padding: 20px 22px 26px; min-height: 140px; }
}

/* ---------- Rail ---------- */
.rail-sec { padding: clamp(70px, 8vw, 120px) 0; overflow: hidden; }
.rail-ctrl { display: flex; align-items: center; gap: 8px; }
.rail-ctrl .icon-btn { display: none; }
@media (hover: hover) and (min-width: 700px) { .rail-ctrl .icon-btn { display: inline-grid; } }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 72vw); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gut) 18px; scroll-padding-inline: var(--gut); scrollbar-width: thin; scrollbar-color: var(--ink) transparent; overscroll-behavior-x: contain; }
.rail__item { scroll-snap-align: start; }
@media (min-width: 700px) { .rail { grid-auto-columns: minmax(250px, 34vw); } }
@media (min-width: 1100px) { .rail { grid-auto-columns: calc((min(100vw, var(--max)) - var(--gut) * 2 - 48px) / 4); padding-inline: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); } }

/* ---------- Flat-lay explainer (stage) ---------- */
.flat { background: var(--stage); color: var(--on-stage); padding: clamp(70px, 8vw, 130px) 0; overflow: hidden; }
.flat::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23fbf4ec' fill-opacity='.08'/%3E%3C/svg%3E"); pointer-events: none; }
.flat__grid { display: grid; gap: 40px; position: relative; }
.flat__media { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 3 / 4; background: var(--stage2); }
.flat__img { width: 100%; height: 100%; object-fit: cover; }
.hot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); background: var(--c); color: var(--ink); font: 500 12px/1 var(--ff-m); box-shadow: 0 0 0 6px rgba(30, 22, 49, .25); transition: transform .25s var(--ease), box-shadow .25s; }
.hot::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--c); opacity: .7; animation: ping 2.4s var(--ease) infinite; }
.hot.is-on, .hot:hover { transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 0 8px rgba(251, 244, 236, .35); }
@keyframes ping { 70%, 100% { transform: scale(1.5); opacity: 0; } }
.flat__copy .h2 { color: var(--on-stage); }
.flat__list { list-style: none; counter-reset: s; display: grid; gap: 8px; margin: 26px 0 30px; }
.flat__list li { counter-increment: s; display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 16px; background: rgba(251, 244, 236, .05); border: 1.5px solid rgba(251, 244, 236, .1); color: var(--on-stage); transition: background .25s, border-color .25s; }
.flat__list li::before { content: "0" counter(s); display: grid; place-items: center; height: 36px; border-radius: 999px; background: var(--c); color: var(--ink); font: 500 13px/1 var(--ff-m); }
.flat__list li.is-on { background: rgba(251, 244, 236, .12); border-color: var(--c); }
.flat__buy { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.flat__price { font: 700 30px/1 var(--ff-d); }
@media (min-width: 900px) {
	.flat__grid { grid-template-columns: 6fr 5fr; align-items: center; gap: 70px; }
	.flat__media { transform: rotate(1.5deg); margin-left: -20px; }
}

/* ---------- Colourways ---------- */
.colours { padding: clamp(80px, 9vw, 140px) 0; }
.colours__grid { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.swatch a { display: grid; gap: 8px; text-decoration: none; }
.swatch__img { display: block; aspect-ratio: 1; border-radius: 50% 50% var(--r) var(--r); overflow: hidden; background: var(--sw); border: 1.5px solid rgba(30, 22, 49, .1); }
.swatch__img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform .8s var(--ease); }
.swatch a:hover .swatch__img img { transform: scale(1.06) rotate(-2deg); }
.swatch__name { font: 700 19px/1.1 var(--ff-d); display: flex; align-items: center; gap: 8px; }
.swatch__name::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1.5px rgba(30, 22, 49, .25); }
.swatch__n { font: 500 12px/1 var(--ff-m); color: var(--muted); }
@media (min-width: 900px) {
	.colours__grid { grid-template-columns: repeat(6, 1fr); gap: 18px; align-items: start; }
	.swatch:nth-child(even) { margin-top: 60px; }
	.swatch--6 .swatch__img img { mix-blend-mode: normal; }
}

/* ---------- Spa collage ---------- */
.spa { padding: clamp(60px, 7vw, 110px) 0; background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--s0) 30%, var(--bg))); }
.spa__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; align-items: start; }
.spa__copy { grid-column: 1 / -1; }
.spa__copy .lede { margin-bottom: 24px; }
.spa__a, .spa__b, .spa__c { border-radius: var(--r); overflow: hidden; }
.spa__a img, .spa__b img, .spa__c img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }
.spa__a { grid-column: 1 / 5; }
.spa__b { grid-column: 5 / 7; margin-top: 40%; }
.spa__c { grid-column: 2 / 6; margin-top: -14%; }
.spa__c img { aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
	.spa__grid { grid-template-columns: repeat(12, 1fr); gap: 20px; }
	.spa__copy { grid-column: 1 / 5; grid-row: 1; align-self: center; }
	.spa__a { grid-column: 5 / 9; grid-row: 1 / 3; }
	.spa__b { grid-column: 9 / 12; grid-row: 1; margin-top: 80px; }
	.spa__c { grid-column: 8 / 13; grid-row: 2; margin-top: -60px; }
}

/* ---------- Materials + film ---------- */
.made { padding: clamp(70px, 8vw, 120px) 0; }
.made__grid { display: grid; gap: 34px; }
.made__film { margin: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; background: var(--stage2); position: relative; }
.made__film video { width: 100%; height: 100%; object-fit: cover; }
.made__film::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--spectrum); }
.made__list { display: grid; margin: 26px 0; border-top: 1.5px solid var(--ink); }
.made__list div { display: grid; grid-template-columns: 130px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.made__list dt { font: 500 12px/1.6 var(--ff-m); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.made__list dd { margin: 0; }
.made__note { font-size: 15px; color: var(--ink2); padding: 14px 16px; border-radius: var(--r-sm); background: var(--surface); border-left: 5px solid var(--accent); }
@media (min-width: 900px) { .made__grid { grid-template-columns: 5fr 6fr; gap: 80px; align-items: center; } .made__film { aspect-ratio: 4 / 5; } }

/* ---------- Promise strip ---------- */
.promise { background: var(--stage); color: var(--on-stage); padding: 34px 0; }
.promise__grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.promise__item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid rgba(251, 244, 236, .12); text-decoration: none; color: inherit; }
.promise__item .ico { width: 26px; height: 26px; color: var(--s5); margin-top: 2px; }
.promise__item:nth-child(2) .ico { color: var(--s1); } .promise__item:nth-child(3) .ico { color: var(--s2); } .promise__item:nth-child(4) .ico { color: var(--s4); }
.promise__item p { margin: 0; display: grid; gap: 2px; }
.promise__item b { font: 700 18px/1.2 var(--ff-d); }
.promise__item span { color: var(--on-stage-muted); font-size: 14.5px; }
.promise__item--link:hover b { text-decoration: underline; }
@media (min-width: 700px) { .promise__grid { grid-template-columns: repeat(2, 1fr); column-gap: 30px; } }
@media (min-width: 1100px) { .promise__grid { grid-template-columns: repeat(4, 1fr); } .promise__item { border-bottom: 0; border-left: 1px solid rgba(251, 244, 236, .12); padding: 6px 22px; } .promise__item:first-child { border-left: 0; padding-left: 0; } }

/* ---------- Footer ---------- */
.site-foot { background: var(--stage); color: var(--on-stage); padding-bottom: 28px; overflow: hidden; }
.foot-steps { display: grid; grid-template-columns: repeat(6, 1fr); }
.foot-steps span { display: flex; flex-direction: column; gap: 2px; padding: 10px 10px 12px; background: var(--c); color: var(--ink); font: 600 12px/1.1 var(--ff-t); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.foot-steps b { font: 500 11px/1 var(--ff-m); opacity: .75; }
.foot-grid { display: grid; gap: 34px; padding-top: 56px; padding-bottom: 30px; }
.foot-intro p { color: var(--on-stage-muted); max-width: 40ch; margin: 18px 0; }
.foot-contact { list-style: none; display: grid; gap: 10px; }
.foot-contact li { display: flex; gap: 10px; align-items: center; }
.foot-contact .ico { width: 18px; height: 18px; color: var(--s2); }
.foot-contact a { text-decoration: none; }
.foot-contact a:hover { text-decoration: underline; }
.foot-col h2 { font: 500 12px/1 var(--ff-m); letter-spacing: .14em; text-transform: uppercase; color: var(--on-stage-muted); margin-bottom: 16px; }
.foot-col ul { list-style: none; display: grid; gap: 4px; }
.foot-col a, .foot-col .link-btn { display: inline-block; padding: 6px 0; text-decoration: none; color: var(--on-stage); font-size: 15px; text-align: left; }
.foot-col a:hover, .foot-col .link-btn:hover { text-decoration: underline; }
.foot-word { position: relative; padding-top: 18px; padding-bottom: 18px; }
.foot-word__svg { width: 100%; height: auto; color: var(--on-stage); opacity: .96; }
.foot-word__beam { position: absolute; left: var(--gut); right: var(--gut); top: 50%; height: 18%; transform: translateY(-50%) skewY(-2deg); background: var(--spectrum); mix-blend-mode: multiply; opacity: .95; }
.foot-base { display: grid; gap: 16px; border-top: 1px solid rgba(251, 244, 236, .14); padding-top: 22px; }
.foot-legal { font-size: 13px; color: var(--on-stage-muted); margin: 0; max-width: 90ch; }
.foot-meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.foot-cur { margin: 0; font: 500 12px/1.4 var(--ff-m); color: var(--on-stage-muted); }
.pay-marks { list-style: none; display: flex; gap: 6px; flex-wrap: wrap; }
.pay-marks li { padding: 5px 10px; border-radius: 6px; background: var(--on-stage); color: var(--ink); font: 600 11px/1 var(--ff-t); }
@media (max-width: 699px) { .foot-steps span { font-size: 0; } .foot-steps b { font-size: 11px; opacity: 1; } }
@media (min-width: 800px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; } }

/* ---------- Consent ---------- */
.consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; }
.consent__box { max-width: 460px; background: var(--surface); color: var(--ink); border: 1.5px solid var(--ink); border-radius: var(--r); padding: 20px; box-shadow: 0 30px 60px -20px rgba(30, 22, 49, .5); position: relative; overflow: hidden; }
.consent__box::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--spectrum); }
.consent__title { font: 750 20px/1.1 var(--ff-d); margin: 4px 0 8px; }
.consent__text { font-size: 14.5px; color: var(--ink2); margin-bottom: 14px; }
.consent__prefs { display: grid; gap: 10px; margin-bottom: 14px; }
.toggle { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); }
.toggle input { width: 20px; height: 20px; accent-color: var(--ink); grid-row: span 2; }
.toggle span { font-weight: 600; font-size: 14.5px; }
.toggle small { color: var(--muted); font-size: 12.5px; grid-column: 2; }
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.consent__actions .btn { width: 100%; }

/* ---------- Archive ---------- */
.arch-head { background: color-mix(in srgb, var(--c) 30%, var(--bg)); padding: 22px 0 0; overflow: hidden; }
.arch-head__grid { display: grid; gap: 24px; align-items: end; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 500 12px/1.4 var(--ff-m); letter-spacing: .04em; color: var(--ink2); margin-bottom: 18px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.arch-head__title { font-size: var(--fs-h1); letter-spacing: -.04em; margin-bottom: 14px; }
.arch-head__line { color: var(--ink2); max-width: 52ch; }
.arch-head__count { font: 500 12px/1 var(--ff-m); letter-spacing: .1em; text-transform: uppercase; display: inline-flex; gap: 8px; align-items: center; }
.arch-head__count::before { content: ""; width: 26px; height: 6px; border-radius: 3px; background: var(--spectrum); }
.arch-head__media { border-radius: var(--r) var(--r) 0 0; overflow: hidden; aspect-ratio: 16 / 9; }
.arch-head__media img { width: 100%; height: 100%; object-fit: cover; }
.arch-cats { display: flex; gap: 8px; overflow-x: auto; padding-top: 16px; padding-bottom: 16px; scrollbar-width: none; background: var(--bg); position: relative; }
.arch-cats::-webkit-scrollbar { display: none; }
.arch-cats a { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); text-decoration: none; font-size: 14px; font-weight: 500; }
.arch-cats a i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.arch-cats a[aria-current] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (min-width: 900px) {
	.arch-head { padding-top: 34px; }
	.arch-head__grid { grid-template-columns: 7fr 5fr; gap: 40px; }
	.arch-head__copy { padding-bottom: 40px; }
	.arch-head__media { aspect-ratio: 4 / 3; transform: rotate(1.5deg) translateY(14px); border-radius: var(--r); }
	.arch-cats { margin-top: 0; }
}
.arch { padding-top: 8px; padding-bottom: clamp(60px, 7vw, 110px); }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 28px; padding: 18px 0 26px; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.filters__group { border: 0; padding: 0; margin: 0; min-width: 0; }
.filters legend, .filters__sort label { font: 500 11px/1 var(--ff-m); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; display: block; padding: 0; }
.filters__swatches, .filters__steps { display: flex; flex-wrap: wrap; gap: 6px; }
.fsw, .fstep { position: relative; }
.fsw input, .fstep input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.fsw__dot { display: block; width: 36px; height: 36px; border-radius: 50%; background: var(--dot); box-shadow: inset 0 0 0 1.5px rgba(30, 22, 49, .2); border: 3px solid var(--bg); outline: 1.5px solid transparent; }
.fsw__all, .fstep span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); font-size: 13.5px; font-weight: 500; background: var(--surface); }
.fsw input:checked + .fsw__dot { outline-color: var(--ink); }
.fsw input:checked + .fsw__all, .fstep input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.fsw input:focus-visible + span, .fstep input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.filters__sort { margin-left: auto; }
.filters__sort select { height: 44px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); padding: 0 38px 0 16px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231e1631' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; font-size: 14px; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 14px; }
.grid__story { grid-column: 1 / -1; margin: 0; position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 10; }
.grid__story img { width: 100%; height: 100%; object-fit: cover; }
.grid__story figcaption { position: absolute; left: 14px; bottom: 14px; right: 14px; max-width: 420px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--surface); font-size: 15px; border-left: 6px solid var(--c); }
@media (min-width: 900px) {
	.grid { grid-template-columns: repeat(3, 1fr); gap: 44px 22px; }
	.grid > .card:nth-child(3n+2) { margin-top: 36px; }
	.grid__story { grid-column: span 2; aspect-ratio: auto; min-height: 100%; }
	.grid--4 { grid-template-columns: repeat(4, 1fr); }
	.grid--4 > .card:nth-child(3n+2) { margin-top: 0; }
	.grid--4 > .card:nth-child(even) { margin-top: 36px; }
}
.pager { margin-top: 50px; }
.pager ul { list-style: none; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pager a, .pager span { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); text-decoration: none; font: 500 14px/1 var(--ff-m); }
.pager .current { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.empty { text-align: center; padding: 40px 0 20px; display: grid; justify-items: center; gap: 10px; }
.empty img { width: 220px; border-radius: var(--r); }

/* ---------- Product page ---------- */
.pdp { padding: 18px 0 clamp(60px, 7vw, 100px); }
.pdp__grid { display: grid; gap: 30px; }
.gallery { min-width: 0; }
.gallery__main { position: relative; border-radius: var(--r); overflow: hidden; background: var(--surface); }
.gallery__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { margin: 0; scroll-snap-align: start; aspect-ratio: 3 / 4; }
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery__band { position: absolute; left: 14px; bottom: 14px; padding: 8px 10px; border-radius: 999px; background: rgba(255, 250, 244, .92); display: flex; }
.gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.gallery__thumb { flex: none; width: 66px; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: var(--surface); }
.gallery__thumb[aria-selected="true"] { border-color: var(--ink); }
.gallery__thumb img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.buy__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 14px; font: 500 12px/1.3 var(--ff-m); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.buy__cat { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 45%, var(--bg)); color: var(--ink); }
.buy__cat i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.buy__title { font-size: clamp(34px, 4vw, 58px); letter-spacing: -.035em; margin-bottom: 12px; }
.buy__price { font: 700 clamp(26px, 2.4vw, 34px)/1 var(--ff-d); margin-bottom: 18px; }
.buy__intro { color: var(--ink2); }
.buy__intro p { margin-bottom: .6em; }
.buy__form { margin: 22px 0 18px; display: grid; gap: 18px; }
.buy__colours { border: 0; padding: 0; margin: 0; }
.buy__colours legend { font-size: 15px; margin-bottom: 10px; padding: 0; }
.buy__swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.csw { position: relative; }
.csw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.csw span:not(.sr) { display: block; width: 44px; height: 44px; border-radius: 50%; background: var(--dot); border: 4px solid var(--bg); box-shadow: inset 0 0 0 1.5px rgba(30, 22, 49, .2); outline: 2px solid var(--line); transition: outline-color .2s; }
.csw input:checked + span { outline-color: var(--ink); }
.csw input:focus-visible + span { outline: 3px solid var(--accent); }
.buy__row { display: flex; gap: 10px; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--ink); border-radius: 999px; height: 56px; flex: none; }
.qty__btn { width: 44px; height: 100%; border: 0; background: none; font-size: 20px; border-radius: 999px; }
.qty input { width: 34px; border: 0; background: none; text-align: center; font: 500 16px var(--ff-m); -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buy__add { flex: 1; }
.buy__notes { list-style: none; display: grid; gap: 10px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink2); }
.buy__notes li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; }
.buy__notes .ico { width: 20px; height: 20px; color: var(--ink); }
.buy__styling { font-size: 13px; color: var(--muted); margin-top: 14px; }
@media (min-width: 1000px) {
	.pdp__grid { grid-template-columns: 7fr 5fr; gap: 56px; align-items: start; }
	.gallery { display: grid; grid-template-columns: 78px 1fr; gap: 14px; position: sticky; top: calc(var(--head-h) + 16px); }
	.gallery__thumbs { grid-column: 1; grid-row: 1; flex-direction: column; margin: 0; }
	.gallery__thumb { width: 78px; }
	.gallery__main { grid-column: 2; grid-row: 1; }
	.buy__sticky { position: sticky; top: calc(var(--head-h) + 16px); }
}
.pdp-detail { display: grid; gap: 40px; margin-top: clamp(50px, 6vw, 90px); }
.where { list-style: none; display: grid; gap: 8px; margin: 18px 0 22px; }
.where__row { display: grid; grid-template-columns: 58px 1fr; gap: 14px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line); border-left: 6px solid var(--c, var(--line)); }
.where__num { display: grid; place-items: center; height: 36px; border-radius: 999px; background: var(--c, var(--bg)); font: 500 13px/1 var(--ff-m); border: 1.5px solid rgba(30, 22, 49, .12); }
.feat { list-style: none; display: grid; gap: 8px; }
.feat li { display: flex; gap: 10px; align-items: flex-start; }
.feat .ico { width: 20px; height: 20px; color: var(--ok); margin-top: 3px; }
.spec { display: grid; margin: 18px 0 24px; border-top: 1.5px solid var(--ink); }
.spec div { display: grid; grid-template-columns: 130px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.spec dt { font: 500 12px/1.6 var(--ff-m); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.spec dd { margin: 0; font-size: 15px; }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 54px; font-weight: 600; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font: 400 24px/1 var(--ff-m); transition: transform .25s; }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc details p { color: var(--ink2); font-size: 15px; padding-bottom: 16px; margin: 0; }
@media (min-width: 900px) { .pdp-detail { grid-template-columns: 1fr 1fr; gap: 70px; } }
.pdp-set { margin-top: clamp(60px, 7vw, 110px); }

/* ---------- Pages: docs, story, guide, contact, 404 ---------- */
.doc__head { background: var(--stage); color: var(--on-stage); padding: clamp(40px, 6vw, 90px) 0 clamp(36px, 5vw, 70px); position: relative; }
.doc__head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--spectrum); }
.doc__title { font-size: var(--fs-h1); letter-spacing: -.04em; margin: 0; }
.doc__date { margin: 16px 0 0; font: 500 12px/1 var(--ff-m); letter-spacing: .08em; color: var(--on-stage-muted); }
.doc__grid { display: grid; gap: 30px; padding-top: 40px; padding-bottom: 80px; }
.doc__toc { font-size: 14px; }
.doc__toc-title { font: 500 11px/1 var(--ff-m); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.doc__toc ol { list-style: none; display: grid; gap: 2px; border-left: 2px solid var(--line); }
.doc__toc a { display: flex; gap: 10px; padding: 7px 12px; text-decoration: none; color: var(--ink2); margin-left: -2px; border-left: 2px solid transparent; }
.doc__toc a span { font: 500 11px/1.9 var(--ff-m); color: var(--muted); }
.doc__toc a:hover, .doc__toc a.is-on { color: var(--ink); border-left-color: var(--accent); }
@media (min-width: 1000px) { .doc__grid { grid-template-columns: 280px minmax(0, 760px); gap: 70px; } .doc__toc { position: sticky; top: calc(var(--head-h) + 30px); align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; } }
.doc--plain .doc__body { padding: 40px 0 80px; }
.prose { max-width: 760px; font-size: 17px; }
.prose--wide { max-width: 880px; }
.prose h2 { font-size: clamp(24px, 2.4vw, 34px); margin: 2em 0 .6em; padding-top: .6em; border-top: 1px solid var(--line); }
.prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.prose h3 { font-size: 20px; margin: 1.6em 0 .5em; letter-spacing: -.01em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.prose li { margin-bottom: .4em; }
.prose a { color: var(--accent-deep); }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 15px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font: 500 12px/1.4 var(--ff-m); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.prose blockquote { margin: 0 0 1.2em; padding: 16px 20px; border-radius: var(--r-sm); background: var(--surface); border-left: 5px solid var(--s2); }
.prose .callout { padding: 18px 20px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--s5) 35%, var(--bg)); margin: 0 0 1.4em; }
.prose details { border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 0 18px; margin-bottom: 10px; background: var(--surface); }
.prose summary { cursor: pointer; font-weight: 600; min-height: 54px; display: flex; align-items: center; }
.prose details[open] { padding-bottom: 6px; }
.prose dl { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; border-top: 1.5px solid var(--ink); }
.prose dt, .prose dd { padding: 12px 0; border-bottom: 1px solid var(--line); margin: 0; }
.prose dt { font: 500 12px/1.7 var(--ff-m); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-right: 12px; }
.story-hero, .guide-hero { background: var(--stage); color: var(--on-stage); padding: clamp(50px, 7vw, 110px) 0; overflow: hidden; }
.story-hero__grid { display: grid; gap: 30px; align-items: center; }
.story-hero__title, .guide-hero__title { font-size: var(--fs-h1); letter-spacing: -.04em; }
.story-hero .lede, .guide-hero .lede { color: var(--on-stage-muted); }
.story-hero__img { margin: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 3 / 4; max-height: 70vh; }
.story-hero__img img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .story-hero__grid { grid-template-columns: 7fr 4fr; gap: 70px; } }
.story-block { padding: clamp(60px, 7vw, 110px) 0; border-bottom: 1px solid var(--line); }
.story-block__grid { display: grid; gap: 24px; position: relative; }
.story-block__num { font: 780 clamp(80px, 12vw, 190px)/.8 var(--ff-d); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.story-block__img { margin: 0; border-radius: var(--r); overflow: hidden; }
.story-block__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.story-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.story-steps li { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--c); font-weight: 600; font-size: 14px; }
.story-steps b { font: 500 11px/1 var(--ff-m); background: var(--ink); color: var(--c); padding: 5px 7px; border-radius: 999px; }
@media (min-width: 900px) {
	.story-block__grid { grid-template-columns: 2fr 5fr 6fr; gap: 50px; align-items: center; }
	.story-block--flip .story-block__img { order: -1; grid-column: 2 / 3; }
	.story-block--flip .story-block__grid { grid-template-columns: 2fr 5fr 6fr; }
	.story-block--flip .story-block__num { order: -2; }
	.story-block--flip .story-block__copy { grid-column: 3; }
}
.story-honest { background: color-mix(in srgb, var(--s2) 30%, var(--bg)); padding: clamp(60px, 7vw, 110px) 0; }
.story-honest__grid { display: grid; gap: 26px; }
.story-honest ul { list-style: none; display: grid; gap: 14px; }
.story-honest li { padding: 18px 20px; border-radius: var(--r-sm); background: var(--surface); border: 1.5px solid var(--line); }
@media (min-width: 900px) { .story-honest__grid { grid-template-columns: 1fr 1.3fr; align-items: start; gap: 60px; } .story-honest .btn { grid-column: 2; justify-self: start; } }
.guide-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.guide-jump a { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 6px 16px 6px 6px; border-radius: 999px; background: var(--c); color: var(--ink); text-decoration: none; font-weight: 600; }
.guide-jump b { font: 500 11px/1 var(--ff-m); background: var(--ink); color: var(--c); padding: 7px 8px; border-radius: 999px; }
.guide-step { padding: clamp(50px, 6vw, 100px) 0; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 28%, var(--bg)) 0 12px, var(--bg) 12px); border-bottom: 1px solid var(--line); }
.guide-step:nth-of-type(even) { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 28%, var(--bg)) 0 12px, var(--surface) 12px); }
.guide-step__grid { display: grid; gap: 22px; }
.guide-step__num { font: 780 clamp(90px, 14vw, 220px)/.8 var(--ff-d); letter-spacing: -.06em; color: var(--c); -webkit-text-stroke: 1.5px var(--ink); }
.guide-step__note { font: 500 12px/1 var(--ff-m); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.guide-step__img { margin: 0; border-radius: var(--r); overflow: hidden; }
.guide-step__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 900px) { .guide-step__grid { grid-template-columns: 3fr 5fr 5fr; gap: 50px; align-items: center; } }
.guide-end { padding: clamp(60px, 7vw, 110px) 0; text-align: left; }
.guide-end__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.contact { padding: clamp(30px, 5vw, 70px) 0 clamp(60px, 7vw, 110px); }
.contact__grid { display: grid; gap: 30px; }
.contact__card { background: var(--stage); color: var(--on-stage); border-radius: calc(var(--r) + 8px); padding: clamp(24px, 4vw, 46px); position: relative; overflow: hidden; }
.contact__title { font-size: var(--fs-h1); letter-spacing: -.04em; }
.contact__lede { color: var(--on-stage-muted); }
.contact__list { list-style: none; display: grid; gap: 16px; margin: 26px 0; }
.contact__list li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; }
.contact__list .ico { color: var(--s1); margin-top: 3px; }
.contact__list span { display: block; font: 500 11px/1.4 var(--ff-m); letter-spacing: .12em; text-transform: uppercase; color: var(--on-stage-muted); }
.contact__list a { color: var(--on-stage); font-size: 18px; font-weight: 600; text-decoration: none; word-break: break-word; }
.contact__list a:hover { text-decoration: underline; }
.contact__list address { font-style: normal; }
.contact__small { font-size: 13px; color: var(--on-stage-muted); }
.contact__band .band { width: 140px; height: 12px; margin-top: 10px; }
.contact__links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; font-size: 15px; }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 5fr 6fr; gap: 60px; align-items: start; } .contact__card { position: sticky; top: calc(var(--head-h) + 20px); } }
.nf { display: grid; gap: 30px; align-items: center; padding-top: clamp(40px, 6vw, 90px); padding-bottom: clamp(60px, 7vw, 110px); }
.nf__img { margin: 0; border-radius: var(--r); overflow: hidden; max-width: 520px; }
.nf .search-form { margin: 24px 0; max-width: 520px; }
@media (min-width: 900px) { .nf { grid-template-columns: 5fr 6fr; gap: 70px; } }

/* ---------- Forms (theme + WooCommerce) ---------- */
.pris-form { display: grid; gap: 16px; }
.pris-field { margin: 0; display: grid; gap: 6px; }
.pris-field label, .woocommerce form .form-row label { font-size: 14px; font-weight: 600; }
.pris-field input, .pris-field select, .pris-field textarea,
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce .quantity .qty, #coupon_code {
	width: 100%; min-height: 50px; border-radius: 14px; border: 1.5px solid #cdbfae; background: var(--surface); padding: 12px 16px; font-size: 16px; transition: border-color .2s, box-shadow .2s;
}
.pris-field textarea, .woocommerce form .form-row textarea { min-height: 130px; resize: vertical; }
.pris-field input:focus, .pris-field select:focus, .pris-field textarea:focus, .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--s2) 60%, transparent); }
.pris-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pris-form__note { font-size: 13.5px; color: var(--muted); margin: 0; }
.pris-form .btn { justify-self: start; }
.pris-form-status { padding: 16px 18px; border-radius: var(--r-sm); margin-bottom: 18px; font-weight: 500; }
.pris-form-status--ok { background: color-mix(in srgb, var(--s1) 40%, var(--bg)); border-left: 5px solid var(--ok); }
.pris-form-status--err { background: color-mix(in srgb, var(--s4) 40%, var(--bg)); border-left: 5px solid var(--err); }

/* ---------- WooCommerce flow ---------- */
.flow { padding-top: clamp(26px, 4vw, 54px); padding-bottom: clamp(60px, 7vw, 110px); }
.flow__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1.5px solid var(--ink); }
.flow__title { font-size: var(--fs-h2); letter-spacing: -.035em; margin: 0; }
.flow__steps { list-style: none; display: flex; gap: 6px; flex-wrap: wrap; }
.flow__steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1.5px solid var(--line); font-size: 13.5px; font-weight: 500; color: var(--muted); }
.flow__steps b { font: 500 11px/1 var(--ff-m); padding: 6px 7px; border-radius: 999px; background: var(--line); color: var(--ink); }
.flow__steps li[aria-current] { color: var(--ink); border-color: var(--ink); }
.flow__steps li[aria-current] b { background: var(--accent); }
.notices { margin-top: 14px; }
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 16px 18px; margin: 0 0 22px; border-radius: var(--r-sm); background: var(--surface); border: 1.5px solid var(--line); border-left: 6px solid var(--s2); font-size: 15px; }
.woocommerce-message { border-left-color: var(--ok); }
.woocommerce-error { border-left-color: var(--err); display: block; }
.woocommerce-error li { margin: 2px 0; }
.woocommerce-message .button, .woocommerce-info .button { order: 2; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce .button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--ink); color: var(--bg); font: 600 15px/1.1 var(--ff-t); text-decoration: none; cursor: pointer; }
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--stage2); }
.woocommerce button.button:disabled, .woocommerce button.button[disabled] { opacity: .45; cursor: not-allowed; }
.woocommerce a.button.alt, .woocommerce button.button.alt, #place_order, .checkout-button { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--ink) !important; min-height: 58px; font-size: 16px; width: 100%; }
.woocommerce a.button.alt:hover, #place_order:hover { background: #ff6878 !important; }
.pris-notice { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 14px 18px; margin-bottom: 14px; border-radius: var(--r-sm); background: var(--surface); border: 1.5px solid var(--line); font-size: 14.5px; color: var(--ink2); }
.pris-notice p { margin: 0; }
.pris-notice__tag { font: 500 11px/1 var(--ff-m); letter-spacing: .1em; text-transform: uppercase; padding: 6px 8px; border-radius: 999px; background: var(--s2); color: var(--ink); margin-top: 2px; }
.pris-notice--duties .pris-notice__tag { background: var(--s5); }
.pris-cart-duties, .pris-checkout-legal { font-size: 13.5px; color: var(--ink2); }
.pris-checkout-legal a, .pris-cart-duties a, .pris-notice a { color: var(--accent-deep); }
.pris-total-note td { font-size: 12.5px; color: var(--muted); padding-top: 0 !important; border: 0 !important; }

/* cart */
.woocommerce-cart-form { margin-bottom: 30px; }
table.shop_table { width: 100%; border-collapse: collapse; border: 0; font-size: 15px; }
table.shop_table th { font: 500 11px/1.3 var(--ff-m); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 10px 8px; border-bottom: 1.5px solid var(--ink); }
table.shop_table td { padding: 16px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.shop_table td.product-thumbnail img { width: 76px; border-radius: 12px; }
table.shop_table td.product-name a { font: 650 17px/1.25 var(--ff-d); text-decoration: none; }
table.shop_table td.product-name dl.variation { display: flex; gap: 6px; margin: 6px 0 0; font-size: 13px; color: var(--muted); }
table.shop_table td.product-name dl.variation dd, table.shop_table td.product-name dl.variation p { margin: 0; }
table.shop_table .product-remove a.remove { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line); text-decoration: none; font-size: 20px; color: var(--ink); }
table.shop_table .product-remove a.remove:hover { background: var(--err); color: #fff; border-color: var(--err); }
.woocommerce .quantity .qty { width: 80px; min-height: 44px; text-align: center; }
table.shop_table td.actions { padding-top: 20px; }
.coupon { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.coupon label { display: none; }
#coupon_code { width: auto; flex: 1; min-width: 160px; }
td.actions > .button { float: right; }
.cart-collaterals .cart_totals { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r); padding: 22px; }
.cart_totals h2 { font-size: 24px; }
.cart_totals table.shop_table th { border-bottom: 1px solid var(--line); text-transform: none; letter-spacing: 0; font: 600 15px var(--ff-t); color: var(--ink); width: 40%; }
.woocommerce-shipping-methods { list-style: none; }
.woocommerce-shipping-destination, .woocommerce-shipping-calculator { font-size: 13.5px; color: var(--muted); }
.wc-proceed-to-checkout { padding-top: 14px; }
.cart-empty { font: 700 26px/1.2 var(--ff-d); }
.return-to-shop { margin-top: 20px; }
@media (max-width: 767px) {
	table.shop_table_responsive thead { display: none; }
	table.shop_table_responsive tr { display: grid; grid-template-columns: 76px 1fr auto; gap: 4px 14px; padding: 14px 0; border-bottom: 1px solid var(--line); position: relative; }
	table.shop_table_responsive td { border: 0; padding: 0; display: block; }
	table.shop_table_responsive td.product-remove { position: absolute; right: 0; top: 14px; }
	table.shop_table_responsive td.product-thumbnail { grid-row: span 3; }
	table.shop_table_responsive td.product-name { padding-right: 40px; }
	table.shop_table_responsive td.product-price { display: none; }
	table.shop_table_responsive td.product-quantity::before, table.shop_table_responsive td.product-subtotal::before { content: attr(data-title) ": "; font: 500 11px var(--ff-m); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
	table.shop_table_responsive td.actions { grid-column: 1 / -1; display: grid; gap: 10px; }
	td.actions > .button { float: none; width: 100%; }
	.cart_totals table.shop_table_responsive tr { display: flex; justify-content: space-between; grid-template-columns: none; }
	.cart_totals table.shop_table_responsive td::before { display: none; }
}
@media (min-width: 900px) {
	.woocommerce-cart .flow__body > .woocommerce { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
	.woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }
	.cart-collaterals { position: sticky; top: calc(var(--head-h) + 20px); }
}
/* checkout */
.woocommerce-form-coupon-toggle .woocommerce-info, .woocommerce-form-login-toggle .woocommerce-info { border-left-color: var(--s3); }
form.checkout_coupon, form.woocommerce-form-login { padding: 18px; border: 1.5px dashed var(--line); border-radius: var(--r-sm); margin-bottom: 20px; }
.woocommerce form .form-row { margin: 0 0 14px; padding: 0; }
.woocommerce form .form-row .required { color: var(--err); text-decoration: none; }
.woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-additional-fields h3, #order_review_heading { font-size: 24px; margin: 0 0 16px; }
.col2-set .col-1, .col2-set .col-2 { width: 100%; }
#ship-to-different-address { font: 600 16px var(--ff-t); }
#ship-to-different-address label { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.woocommerce-checkout-review-order { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r); padding: 20px; }
.woocommerce-checkout-review-order-table td, .woocommerce-checkout-review-order-table th { padding: 12px 6px; }
.woocommerce-checkout-review-order-table .product-name { font-size: 14.5px; }
.woocommerce-checkout-review-order-table tfoot th { text-transform: none; letter-spacing: 0; font: 600 15px var(--ff-t); color: var(--ink); border-bottom: 1px solid var(--line); }
.woocommerce-checkout-review-order-table .order-total td, .woocommerce-checkout-review-order-table .order-total th { font: 700 20px var(--ff-d); }
#payment { margin-top: 16px; }
#payment ul.payment_methods { list-style: none; display: grid; gap: 8px; margin-bottom: 16px; }
#payment ul.payment_methods > li { padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); }
#payment .payment_box { font-size: 14px; color: var(--ink2); padding-top: 8px; }
.woocommerce-terms-and-conditions-wrapper { font-size: 14px; margin: 10px 0 14px; }
.woocommerce-terms-and-conditions-checkbox-text { line-height: 1.5; }
.woocommerce-form__label-for-checkbox { display: flex !important; gap: 10px; align-items: flex-start; }
.woocommerce-form__label-for-checkbox input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ink); flex: none; }
.woocommerce-privacy-policy-text { font-size: 13px; color: var(--muted); }
@media (min-width: 1000px) {
	form.checkout.woocommerce-checkout { display: grid; grid-template-columns: 1fr 420px; gap: 0 48px; align-items: start; }
	form.checkout > .col2-set { grid-column: 1; grid-row: 1 / span 3; }
	#order_review_heading, #order_review { grid-column: 2; }
	#order_review { position: sticky; top: calc(var(--head-h) + 20px); }
	.woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
	.woocommerce-billing-fields__field-wrapper .form-row-wide, .woocommerce-shipping-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; }
	.woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
}
.select2-container .select2-selection--single { height: 50px !important; border-radius: 14px !important; border: 1.5px solid #cdbfae !important; background: var(--surface) !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 48px !important; padding-left: 16px !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px !important; right: 8px !important; }
.select2-dropdown { border: 1.5px solid var(--ink) !important; border-radius: 14px !important; overflow: hidden; }
/* account / thank-you */
.woocommerce-MyAccount-navigation ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.woocommerce-MyAccount-navigation a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); text-decoration: none; font-size: 14.5px; }
.woocommerce-MyAccount-navigation .is-active a { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.woocommerce-account .u-columns { display: grid; gap: 30px; }
@media (min-width: 900px) { .woocommerce-account .u-columns { grid-template-columns: 1fr 1fr; gap: 50px; } }
.woocommerce-form-login, .woocommerce-form-register { background: var(--surface); border: 1.5px solid var(--line) !important; border-style: solid !important; border-radius: var(--r) !important; padding: 24px !important; }
.woocommerce-order-overview { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 20px 0 30px; }
.woocommerce-order-overview li { padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); font-size: 13px; color: var(--muted); }
.woocommerce-order-overview strong { display: block; color: var(--ink); font-size: 16px; margin-top: 4px; }
.woocommerce-thankyou-order-received { font: 700 26px/1.2 var(--ff-d); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	.beam-in { stroke-dashoffset: 0; }
	.beam-fan path { opacity: .34; transform: none; }
	.js .reveal { opacity: 1; transform: none; }
	.hot::after { display: none; }
}
@media print {
	.announce, .site-head, .site-foot, .consent, .drawer { display: none !important; }
	body { background: #fff; }
}
.cur-code { font: 500 .62em/1 var(--ff-m); letter-spacing: .04em; opacity: .7; vertical-align: .12em; }
/* header fit on small screens */
.drawer__search { margin-bottom: 18px; }
.drawer__search input[type=search] { height: 48px; font-size: 16px; }
.head-search { display: none; }
@media (max-width: 459px) {
	.site-head .logo-mark { display: none; }
	.wordmark, .brand__word { height: 13px; }
	.site-head__inner { gap: 6px; }
	.pill-btn { padding: 0 10px; gap: 6px; font-size: 12px; }
	.pill-btn .ico { display: none; }
}
@media (min-width: 700px) { .head-search { display: inline-grid; } }
@media (max-width: 999px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } }
.hero__grid > * { min-width: 0; }
.lang-de .hero__title, .lang-da .hero__title, .lang-sv .hero__title { font-size: clamp(42px, 6.6vw, 112px); hyphens: auto; overflow-wrap: break-word; }
.lang-de .arch-head__title, .lang-de .buy__title, .lang-de .doc__title { hyphens: auto; overflow-wrap: break-word; }
.foot-word .foot-word__svg { height: auto; width: 100%; }
.builder__pick:nth-child(n+3) .card__body { display: grid; }
.pris-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231e1631' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.doc__grid > * { min-width: 0; }
.prose td, .prose th { overflow-wrap: anywhere; }
@media (max-width: 599px) { .prose table { font-size: 13.5px; } .prose th, .prose td { padding: 8px 6px; } }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { clip: auto; width: auto; height: auto; padding: 8px 12px; background: var(--ink); color: var(--bg); z-index: 100; }
.woocommerce form .password-input { position: relative; display: block; }
.show-password-input { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e1631' stroke-width='1.7'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 20px no-repeat; }
.show-password-input.display-password { opacity: .5; }
.woocommerce-form-login__rememberme { display: inline-flex; gap: 8px; align-items: center; margin-right: 14px; }
.woocommerce-LostPassword { margin-top: 12px; }
.woocommerce-message:focus, .woocommerce-info:focus, .woocommerce-error:focus { outline: 2px solid var(--line); outline-offset: 2px; }
.consent__actions [data-consent-settings], .consent__actions [data-consent-save] { grid-column: 1 / -1; order: 3; }
@media (max-width: 767px) {
	table.shop_table_responsive td.product-name { grid-column: 2 / 4; }
	table.shop_table_responsive td.product-quantity { grid-column: 2; }
	table.shop_table_responsive td.product-quantity::before { display: none; }
	table.shop_table_responsive td.product-subtotal { grid-column: 3; align-self: center; text-align: right; }
	table.shop_table_responsive td.product-subtotal::before { display: block; }
	.cart_totals table.shop_table_responsive tr { border-bottom: 1px solid var(--line); padding: 12px 0; gap: 12px; }
	.cart_totals table.shop_table_responsive th, .cart_totals table.shop_table_responsive td { border: 0 !important; padding: 0; }
	.cart_totals table.shop_table_responsive td { text-align: right; }
}