/* CURVELLAA — one thread.
 * Tokens first; every component reads them. The thread colour (--tc) is terracotta unless a
 * section or the hero colour switch changes it.
 */

@font-face { font-family: "Fraunces"; src: url(../fonts/fraunces-italic.woff2) format("woff2"); font-style: italic; font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(../fonts/fraunces.woff2) format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(../fonts/instrument-sans.woff2) format("woff2"); font-style: normal; font-weight: 400 700; font-display: swap; }

:root {
	--bg: #F3EBDD;
	--surface: #FAF5EC;
	--paper: #EFE5D3;
	--ink: #2B2117;
	--ink2: #4A3B2D;
	--muted: #6B5947;
	--line: #D6C4A8;
	--terra: #A94A28;
	--terra-d: #8A3A1D;
	--olive: #5A5D30;
	--olive-d: #3C3F1E;
	--milk: #F3EBDD;
	--ok: #3D6A34;
	--err: #A3311C;
	--tc: var(--terra);

	--serif: "Fraunces", "Iowan Old Style", Georgia, serif;
	--sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

	--rail: 0px;
	--top: 60px;
	--gut: clamp(16px, 3.4vw, 52px);
	--ease: cubic-bezier(.22, .8, .18, 1);
	--t: 1.5px;
	--chain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cellipse cx='7' cy='5' rx='5.4' ry='3' fill='none' stroke='%23A94A28' stroke-width='1.5'/%3E%3C/svg%3E");
	--chain-milk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cellipse cx='7' cy='5' rx='5.4' ry='3' fill='none' stroke='%23F3EBDD' stroke-width='1.5'/%3E%3C/svg%3E");
	--chain-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cellipse cx='7' cy='5' rx='5.4' ry='3' fill='none' stroke='%232B2117' stroke-width='1.5'/%3E%3C/svg%3E");
}
@media (min-width: 1024px) {
	:root { --rail: 78px; --top: 0px; }
}

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top) + 16px); }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 400 17px/1.6 var(--sans);
	font-feature-settings: "ss01", "tnum" 0;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--terra-d); }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
::selection { background: var(--terra); color: var(--milk); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--milk); padding: 10px 16px; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }

.main { margin-left: var(--rail); padding-top: var(--top); min-height: 60vh; outline: 0; }

/* ------------------------------------------------------------ buttons: a chain gets worked under every button on hover */
.btn, .button, button.button, .woocommerce a.button, input[type=submit].button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 26px;
	border: var(--t) solid var(--ink);
	border-radius: 0;
	background: transparent;
	color: var(--ink);
	font: 600 15px/1.1 var(--sans);
	letter-spacing: .02em;
	text-decoration: none;
	cursor: pointer;
	transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn::after, .button::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: -12px;
	height: 10px;
	background: var(--chain) repeat-x 0 50% / 14px 10px;
	clip-path: inset(0 100% 0 0);
	transition: clip-path .6s var(--ease);
	pointer-events: none;
}
.btn:hover::after, .btn:focus-visible::after, .button:hover::after { clip-path: inset(0 0 0 0); }
.btn:hover { color: var(--ink); }
.btn--accent, .button.alt, .single_add_to_cart_button, #place_order, .checkout-button {
	background: var(--terra);
	border-color: var(--terra);
	color: var(--milk) !important;
}
.btn--accent:hover, .button.alt:hover, .single_add_to_cart_button:hover, #place_order:hover, .checkout-button:hover { background: var(--terra-d); border-color: var(--terra-d); color: var(--milk); }
.btn--accent::after, .single_add_to_cart_button::after, #place_order::after, .checkout-button::after { background-image: var(--chain-ink); }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--milk); }
.btn--milk { background: var(--milk); color: var(--olive-d); border-color: var(--milk); }
.btn--milk:hover { background: var(--surface); color: var(--olive-d); }
.btn--milk::after { background-image: var(--chain-milk); }
.btn--small { min-height: 44px; padding: 0 16px; font-size: 14px; }
.btn--small::after { display: none; }
.btn__chain { display: none; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--terra-d); text-decoration: underline; text-underline-offset: .18em; font-size: inherit; }
.arrowlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--terra-d); text-decoration: none; }
.arrowlink .ico { width: 18px; transition: transform .3s var(--ease); }
.arrowlink:hover .ico { transform: translateX(4px); }
.ico { width: 22px; height: 22px; flex: none; }

/* ------------------------------------------------------------ rail (left vertical text rail; top bar on small screens) */
.rail {
	position: fixed;
	z-index: 60;
	inset: 0 0 auto 0;
	height: var(--top, 60px);
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 8px 0 14px;
	background: var(--bg);
	border-bottom: var(--t) solid var(--tc);
}
.rail__brand { display: flex; align-items: center; color: var(--ink); text-decoration: none; }
.rail__mark { display: none; }
.rail__word svg { height: 30px; width: auto; }
.rail__nav { display: none; }
.rail__tools { display: flex; align-items: center; }
.rail__tool { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); text-decoration: none; }
.rail__tool:hover { color: var(--terra); }
.rail__locale .cv-loc-label { display: none; }
.rail__account { display: none; }
.cart-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--terra); color: var(--milk); font: 700 11px/18px var(--sans); text-align: center; }
.cart-count:empty, .cart-count[data-n="0"] { display: none; }

@media (min-width: 1024px) {
	.rail {
		inset: 0 auto 0 0;
		width: var(--rail);
		height: auto;
		flex-direction: column;
		padding: 22px 0 16px;
		border-bottom: 0;
		border-right: var(--t) solid var(--tc);
	}
	.rail__mark { display: block; color: var(--terra); }
	.rail__mark svg { width: 44px; height: 44px; transition: transform .6s var(--ease); }
	.rail__brand:hover .rail__mark svg { transform: rotate(-28deg); }
	.rail__word { display: none; }
	.rail__nav { display: block; flex: 1; display: flex; align-items: center; }
	.rail__nav ul { list-style: none; display: flex; flex-direction: column; align-items: center; gap: clamp(2px, 1.1vh, 14px); }
	.rail__nav a {
		position: relative;
		display: block;
		padding: 7px 12px;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		font: 600 11.5px/1 var(--sans);
		letter-spacing: .17em;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--ink2);
		white-space: nowrap;
	}
	.rail__nav a::before {
		content: "";
		position: absolute;
		right: -2px;
		top: 8px;
		bottom: 8px;
		width: var(--t);
		background: var(--terra);
		transform: scaleY(0);
		transform-origin: bottom;
		transition: transform .4s var(--ease);
	}
	.rail__nav a:hover { color: var(--terra-d); }
	.rail__nav a:hover::before, .rail__nav a[aria-current]::before { transform: scaleY(1); }
	.rail__nav a[aria-current] { color: var(--terra-d); }
	.rail__nav a[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 11px; height: 7px; margin-left: -5px; border: var(--t) solid var(--terra); border-radius: 50%; }
	.rail__tools { flex-direction: column; gap: 2px; }
	.rail__locale { width: auto; height: auto; padding: 8px 0; gap: 6px; }
	.rail__locale .cv-loc-label { display: block; writing-mode: vertical-rl; transform: rotate(180deg); font: 600 11px/1 var(--sans); letter-spacing: .12em; }
	.rail__account { display: grid; }
	.rail__menu { display: none; }
}
@media (min-width: 1024px) and (max-height: 860px) {
	.rail { padding: 14px 0 8px; }
	.rail__mark svg { width: 36px; height: 36px; }
	.rail__account { display: none; }
	.rail__locale .cv-loc-label { display: none; }
	.rail__locale { width: 44px; height: 44px; padding: 0; }
}
@media (min-width: 1024px) and (max-height: 700px) {
	.rail__nav a { padding: 5px 10px; font-size: 10.5px; letter-spacing: .12em; }
}

/* masthead on inner pages */
.mast { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 22px var(--gut) 16px; border-bottom: var(--t) solid var(--line); }
.mast__logo { color: var(--ink); width: clamp(132px, 14vw, 190px); }
.mast__line { margin: 0; font: 600 11.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); text-align: right; }
@media (max-width: 1023px) { .mast { display: none; } }

/* ------------------------------------------------------------ popover + menu sheet */
.pop {
	position: fixed;
	z-index: 90;
	top: calc(var(--top) + 8px);
	right: 10px;
	left: 10px;
	max-width: 400px;
	margin-left: auto;
	padding: 22px 22px 18px;
	background: var(--surface);
	border: var(--t) solid var(--ink);
	box-shadow: 8px 8px 0 var(--terra);
}
@media (min-width: 1024px) {
	.pop { top: auto; bottom: 18px; left: calc(var(--rail) + 14px); right: auto; width: 380px; margin: 0; }
}
.pop__x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: 0; background: none; display: grid; place-items: center; }
.locale__label, .locale__ship label { display: block; margin: 0 0 8px; font: 600 11.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.locale__langs { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 18px; }
.locale__langs a { display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 0 10px; border: var(--t) solid var(--line); text-decoration: none; font-size: 15px; }
.locale__langs a b { font-size: 11.5px; letter-spacing: .1em; color: var(--muted); }
.locale__langs a[aria-current] { border-color: var(--terra); background: var(--bg); }
.locale__langs a[aria-current] b { color: var(--terra-d); }
.locale__row { display: flex; gap: 6px; }
.locale__row select { flex: 1; min-width: 0; min-height: 44px; padding: 0 10px; border: var(--t) solid var(--ink); background: var(--surface); border-radius: 0; }
.locale__hint { margin: 8px 0 0; font-size: 13px; color: var(--muted); }

.sheet {
	position: fixed;
	z-index: 95;
	inset: 0;
	overflow: auto;
	padding: 0 var(--gut) 40px;
	background: var(--olive-d);
	color: var(--milk);
}
.sheet__top { display: flex; justify-content: space-between; align-items: center; height: 60px; }
.sheet__logo svg { height: 30px; width: auto; color: var(--milk); }
.sheet__logo { --logo-thread: #D9A27F; }
.sheet__x { width: 44px; height: 44px; border: 0; background: none; color: var(--milk); display: grid; place-items: center; }
.sheet__nav { list-style: none; margin: 18px 0 26px; border-top: var(--t) solid rgba(243, 235, 221, .3); }
.sheet__nav a { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: var(--t) solid rgba(243, 235, 221, .3); font: italic 300 clamp(34px, 9vw, 52px)/1.05 var(--serif); text-decoration: none; color: var(--milk); }
.sheet__nav small { font: 600 11px/1 var(--sans); letter-spacing: .14em; opacity: .7; }
.sheet__nav a[aria-current] { color: #E7B08C; }
.sheet__help { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 26px; }
.sheet__help a { display: inline-block; padding: 8px 0; color: var(--milk); }
.sheet .locale { padding: 18px; background: var(--surface); color: var(--ink); }

/* ------------------------------------------------------------ shared section header */
.sec-h { position: relative; display: grid; gap: 10px; padding: 0 var(--gut); margin-bottom: clamp(28px, 5vw, 56px); max-width: 1180px; }
.sec-h__no { margin: 0; display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1 var(--sans); letter-spacing: .18em; color: var(--terra-d); }
.sec-h__no::before { content: ""; width: 24px; height: 14px; border: var(--t) solid currentColor; border-radius: 50%; }
.sec-h__t { font: italic 300 clamp(42px, 6.4vw, 104px)/.95 var(--serif); letter-spacing: -.015em; }
.sec-h__sub { max-width: 54ch; margin: 6px 0 0; color: var(--ink2); font-size: clamp(16px, 1.3vw, 19px); }
.sec-h--row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; max-width: none; }
.sec-h--row .sec-h__no { width: 100%; }
.sec-h--row .sec-h__t { flex: 1; }
.sec-h__more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; color: var(--terra-d); }
.sec-h--light .sec-h__no, .sec-h--light .sec-h__sub { color: inherit; }
.sec-h--light .sec-h__sub { color: inherit; }

/* thread divider crossing the page */
.tdiv { height: clamp(46px, 7vw, 80px); margin: clamp(20px, 5vw, 60px) 0; }
.tdiv svg { width: 100%; height: 100%; }
.tdiv path { fill: none; stroke: var(--tc); stroke-width: var(--t); vector-effect: non-scaling-stroke; }

/* chain svg used in footer / pages */
.chain { width: 100%; height: 12px; }
.chain ellipse { fill: none; stroke: currentColor; stroke-width: 1.3; vector-effect: non-scaling-stroke; }

/* ------------------------------------------------------------ hero: one thread crochets a top */
.hero {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "kick kick" "h h" "g g" "arch arch" "count count" "foot foot";
	gap: 0 14px;
	padding: 16px var(--gut) 30px;
	overflow: hidden;
	isolation: isolate;
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.hero__kicker { grid-area: kick; margin: 0 0 10px; font: 600 11px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.hero__h {
	grid-area: h;
	position: relative;
	z-index: 5;
	font: italic 300 clamp(52px, 15vw, 172px)/.86 var(--serif);
	letter-spacing: -.025em;
	font-variation-settings: "opsz" 144;
}
.hero__h span { display: block; }
.hero__l2 { padding-left: .9em; }
.hero__l3 { color: var(--terra); }
.hero__garment { grid-area: g; position: relative; z-index: 2; margin: 14px auto 0; aspect-ratio: 3 / 4; width: min(78vw, 420px); }
.hero__cut { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .9s var(--ease); }
.hero__cut.is-on { opacity: 1; }
.js .hero:not(.is-drawn) .hero__cut.is-on { opacity: .16; }
.js .hero:not(.is-drawn) .hero__cut:not(.is-on) { opacity: 0; }
.garment { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.garment__line { fill: none; stroke: var(--tc); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke .6s var(--ease); }
.garment__loops ellipse { fill: var(--bg); stroke: var(--tc); stroke-width: 1.6; vector-effect: non-scaling-stroke; transition: stroke .6s var(--ease); }
.hero.is-drawn .garment { opacity: .75; transition: opacity 1.2s var(--ease) .2s; }
.js .hero:not(.is-drawn):not(.is-drawing) .garment__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .hero:not(.is-drawn):not(.is-drawing) .garment__loops ellipse { opacity: 0; }
.hero.is-drawing .garment__line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cv-draw var(--dur, 3.4s) cubic-bezier(.5, .1, .4, 1) forwards; }
.hero.is-drawing .garment__loops ellipse { opacity: 0; transform-box: fill-box; transform-origin: center; animation: cv-loop .4s var(--ease) forwards; animation-delay: calc(var(--i) / var(--n) * var(--dur, 3.4s)); }
@keyframes cv-draw { to { stroke-dashoffset: 0; } }
@keyframes cv-loop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
.hero__notes { list-style: none; position: absolute; inset: 0; pointer-events: none; }
.hero__note { position: absolute; display: flex; align-items: center; gap: 6px; font: 500 11.5px/1.2 var(--sans); color: var(--ink2); white-space: nowrap; opacity: 0; transition: opacity .6s var(--ease); }
.hero.is-drawn .hero__note { opacity: 1; }
.hero__note b { font: italic 500 16px/1 var(--serif); color: var(--terra-d); }
.hero__note::before { content: ""; width: 24px; height: 0; border-top: 1px solid var(--ink2); }
.hero__note--1 { top: 5%; left: 68%; }
.hero__note--2 { top: 28%; right: 86%; flex-direction: row-reverse; }
.hero__note--3 { top: 84%; left: 66%; }
@media (max-width: 759px) { .hero__note--2 { display: none; } .hero__note--1 { left: 62%; } .hero__note--3 { left: 60%; } }
.hero__arch { grid-area: arch; position: relative; z-index: 3; margin: -30vw 0 0; display: grid; grid-template-columns: 1fr 34vw; align-items: end; gap: 10px; }
.hero__arch > img { grid-column: 2; grid-row: 1; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 999px 999px 0 0; border: 5px solid var(--surface); outline: var(--t) solid var(--ink); }
.tag {
	grid-column: 1;
	grid-row: 1;
	position: relative;
	justify-self: start;
	margin: 0 0 6px;
	padding: 10px 12px 10px 30px;
	background: var(--surface);
	border: var(--t) solid var(--ink);
	transform: rotate(-3deg);
}
.tag__hole { position: absolute; left: 10px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border: var(--t) solid var(--ink); border-radius: 50%; background: var(--bg); }
.tag__t { display: block; font: 600 10px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.tag__row { display: flex; flex-wrap: wrap; gap: 4px; }
.tag__c { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px 0 6px; border: var(--t) solid transparent; background: none; font: 500 14px/1 var(--sans); }
.tag__c i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); border: 1px solid rgba(43, 33, 23, .35); }
.tag__c[aria-pressed="true"] { border-color: var(--ink); }
.hero__count { grid-area: count; position: relative; z-index: 3; margin: 18px 0 0; display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; gap: 0 6px; }
.hero__count span { font: italic 400 18px/1 var(--serif); color: var(--terra-d); }
.hero__count b { font: 300 clamp(40px, 9vw, 64px)/1 var(--serif); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hero__count small { grid-column: 1 / -1; font: 600 10.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hero__foot { grid-area: foot; position: relative; z-index: 3; margin-top: 18px; }
.hero__sub { max-width: 46ch; color: var(--ink2); font-size: 16px; }
.hero__ctas { display: grid; gap: 22px; }
.hero__ctas .btn { width: 100%; }

@media (min-width: 760px) {
	.hero { grid-template-columns: repeat(8, 1fr); grid-template-areas: none; gap: 0 18px; }
	.hero__kicker { grid-area: auto; grid-column: 1 / -1; grid-row: 1; }
	.hero__garment { grid-area: auto; grid-column: 2 / 6; grid-row: 2 / 4; margin: 0; width: 100%; }
	.hero__h { grid-area: auto; grid-column: 1 / 7; grid-row: 4; margin-top: -16%; font-size: clamp(64px, 10.5vw, 160px); }
	.hero__arch { grid-area: auto; grid-column: 6 / 9; grid-row: 2 / 3; margin: 0; display: block; }
	.hero__arch > img { width: 100%; }
	.tag { position: absolute; left: -40%; bottom: 8%; margin: 0; }
	.tag__row { flex-wrap: nowrap; }
	.hero__count { grid-area: auto; grid-column: 1 / 3; grid-row: 2; align-self: start; margin: 0; }
	.hero__foot { grid-area: auto; grid-column: 6 / 9; grid-row: 3 / 5; align-self: end; margin: 0; }
}
@media (min-width: 1024px) {
	.hero { grid-template-columns: repeat(12, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; min-height: max(680px, min(100svh, 960px)); padding: 24px var(--gut) 28px; }
	.hero__kicker { grid-column: 1 / 7; grid-row: 1; }
	.hero__garment { grid-column: 4 / 9; grid-row: 1 / 3; align-self: start; justify-self: center; width: auto; height: min(58vh, 600px); margin-top: 1vh; }
	.hero__h { grid-column: 1 / 9; grid-row: 2 / 4; align-self: end; margin: 0; font-size: clamp(64px, 7.4vw, 148px); }
	.hero__arch { grid-column: 9 / 13; grid-row: 1 / 3; margin-top: 2vh; align-self: start; }
	.hero__arch > img { height: min(54vh, 540px); width: auto; max-width: 100%; margin-left: auto; }
	.tag { left: -24%; bottom: 7%; }
	.hero__foot { grid-column: 9 / 13; grid-row: 3; align-self: end; }
	.hero__count { grid-column: 1 / 4; grid-row: 1 / 3; align-self: center; margin-top: -4vh; }
}
@media (min-width: 1500px) {
	.hero__ctas { grid-template-columns: auto auto; justify-content: start; }
	.hero__ctas .btn { width: auto; }
}

/* ------------------------------------------------------------ stitch index */
.stx { padding: clamp(64px, 10vw, 140px) 0 clamp(40px, 6vw, 90px); }
.stx__list { list-style: none; display: grid; gap: 0 clamp(24px, 4vw, 64px); padding: 0 var(--gut); }
.stx__item a { display: grid; grid-template-columns: clamp(92px, 12vw, 150px) 1fr; grid-template-rows: auto auto 1fr auto; gap: 2px 22px; padding: 24px 0; border-top: var(--t) solid var(--ink); text-decoration: none; color: var(--ink); }
.stx__chart { grid-row: 1 / 5; color: var(--ink2); transition: color .3s var(--ease); }
.stx__chart .chart { width: 100%; height: auto; }
.stx__no { font: 600 12px/1 var(--sans); letter-spacing: .18em; color: var(--terra-d); }
.stx__name { font: italic 300 clamp(40px, 5vw, 76px)/1 var(--serif); }
.stx__line { color: var(--ink2); font-size: 15.5px; max-width: 46ch; }
.stx__count { font: 600 11.5px/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.stx__item a:hover .stx__chart { color: var(--terra); }
.stx__item a:hover .stx__name { color: var(--terra-d); }
@media (min-width: 900px) {
	.stx__list { grid-template-columns: 1fr 1fr; }
	.stx__item:nth-child(even) { transform: translateY(clamp(40px, 6vw, 96px)); }
	.stx { padding-bottom: clamp(100px, 12vw, 180px); }
}

/* chart drawing: marks appear in working order */
.chart { overflow: visible; }
.chart [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; }
.is-working .chart [pathLength], a:hover .chart [pathLength], .card__link:focus-visible .chart [pathLength] { animation: cv-work .5s var(--ease) both; animation-delay: calc(var(--i) * 14ms); }
@keyframes cv-work { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.chart .s-sl { fill: currentColor; }

/* ------------------------------------------------------------ stitch-chart cards */
.cards { list-style: none; }
.card { position: relative; }
.card__link { display: grid; grid-template-columns: 1fr 36%; grid-template-areas: "photo chart" "body body"; text-decoration: none; color: var(--ink); }
.card__photo { grid-area: photo; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper); border: var(--t) solid var(--ink); }
.card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s var(--ease), transform .8s var(--ease); }
.card__b { opacity: 0; }
.card__link:hover .card__b { opacity: 1; }
.card__link:hover .card__photo img { transform: scale(1.03); }
.card__chart {
	grid-area: chart;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 8px;
	margin: 14% 0 10% -1px;
	padding: 12px 12px 10px;
	background: var(--surface);
	border: var(--t) solid var(--ink);
	border-left: 0;
	background-image: repeating-linear-gradient(to bottom, transparent 0 17px, rgba(169, 74, 40, .14) 17px 18px);
	transform: rotate(1.6deg);
	transform-origin: left center;
	transition: transform .5s var(--ease);
	color: var(--ink2);
}
.card__chart::before { content: ""; position: absolute; left: -9px; top: 14px; width: 18px; height: 10px; border: var(--t) solid var(--terra); border-radius: 50%; background: var(--bg); }
.card__link:hover .card__chart { transform: rotate(0); color: var(--terra-d); }
.card__no { font: 600 11.5px/1 var(--sans); letter-spacing: .1em; color: var(--muted); }
.card__chart .chart { width: 100%; height: auto; max-height: 100%; }
.card__stitch { font: italic 400 15px/1.15 var(--serif); }
.card__body { grid-area: body; display: grid; gap: 6px; padding-top: 14px; }
.card__name { font: italic 400 clamp(21px, 1.8vw, 26px)/1.1 var(--serif); }
.card__link:hover .card__name { color: var(--terra-d); }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.card .price { font-weight: 600; font-size: 15.5px; }

.cards--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 14px; padding: 0 var(--gut); }
.cards--grid .card:nth-child(2n) { margin-top: 34px; }
@media (max-width: 699px) {
	.card__link { grid-template-columns: 1fr; grid-template-areas: "photo" "chart" "body"; }
	.card__chart { flex-direction: row; align-items: center; margin: -1px 0 0; padding: 6px 8px; border: var(--t) solid var(--ink); border-top: 0; transform: none; background-image: none; }
	.card__chart::before { display: none; }
	.card__chart .chart { width: 38px; height: 46px; flex: none; order: -1; }
	.card__stitch { font-size: 12.5px; flex: 1; }
	.card__no { display: none; }
	.card__name { font-size: 19px; }
	.card .om__t { display: none; }
}
@media (min-width: 700px) {
	.cards--grid { gap: 56px 34px; }
}
@media (min-width: 1280px) {
	.cards--grid { grid-template-columns: repeat(3, 1fr); gap: 72px 44px; }
	.cards--grid .card:nth-child(2n) { margin-top: 0; }
	.cards--grid .card:nth-child(3n+2) { margin-top: 72px; }
}
.cards--grid .card.is-hidden { display: none; }
.grid-empty { padding: 40px var(--gut); font: italic 300 28px/1.3 var(--serif); }

/* horizontal strips on the home page */
.strip { padding: clamp(40px, 6vw, 80px) 0; }
.strip__scroll { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--terra) transparent; padding-bottom: 10px; }
.cards--strip { display: flex; gap: clamp(18px, 2.5vw, 36px); width: max-content; padding: 0 var(--gut) 20px; }
.cards--strip .card { width: min(78vw, 420px); scroll-snap-align: start; }
.cards--strip .card:nth-child(even) { margin-top: 36px; }
.strip--dresses { background: var(--paper); }

/* openness meter: three loops */
.om { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: inherit; }
.om__loops { display: inline-flex; gap: 2px; }
.om__loops i { width: 14px; height: 9px; border: var(--t) solid currentColor; border-radius: 50%; opacity: .35; }
.om__loops i.is-on { opacity: 1; border-color: var(--tc); background: transparent; }
.om--1 .om__loops i.is-on { background: var(--tc); }
.om--2 .om__loops i.is-on { background: linear-gradient(90deg, var(--tc) 50%, transparent 50%); }

.dots { display: inline-flex; gap: 4px; }
.dots i { width: 13px; height: 13px; border-radius: 50%; background: var(--c); border: 1px solid rgba(43, 33, 23, .45); }

/* ------------------------------------------------------------ film */
.film { display: grid; background: var(--ink); color: var(--milk); }
.film__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.film__media video, .film__media img { width: 100%; height: 100%; object-fit: cover; }
.film__text { padding: clamp(36px, 6vw, 80px) var(--gut); align-self: center; }
.film__text .sec-h__no { color: #E7B08C; }
.film__h { margin: 14px 0 28px; font: italic 300 clamp(40px, 5.6vw, 88px)/.95 var(--serif); }
.film__steps { list-style: none; display: grid; gap: 0; border-top: var(--t) solid rgba(243, 235, 221, .35); }
.film__steps li { display: grid; grid-template-columns: 92px 1fr; align-items: baseline; gap: 14px; padding: 16px 0; border-bottom: var(--t) solid rgba(243, 235, 221, .35); }
.film__steps b { font: italic 400 26px/1 var(--serif); color: #E7B08C; }
@media (min-width: 900px) {
	.film { grid-template-columns: 7fr 5fr; }
	.film__media { aspect-ratio: auto; min-height: 560px; }
}

/* ------------------------------------------------------------ look (olive) */
.look { padding: clamp(70px, 9vw, 130px) 0; background: var(--olive); color: var(--milk); --tc: #E3A37E; }
.look a { color: var(--milk); }
.look .sec-h__no { color: #F6DECE; }
.look__grid { display: grid; gap: 34px; padding: 0 var(--gut); align-items: start; }
.look__photo { position: relative; margin: 0; }
.look__img { display: none; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 0 0; border: 6px solid var(--milk); }
.look__img.is-on { display: block; }
.look__photo figcaption { margin-top: 10px; font-size: 13.5px; max-width: 44ch; }
@media (min-width: 1024px) {
	.look__grid { grid-template-columns: 5fr 7fr; gap: clamp(40px, 5vw, 90px); }
	.look__photo { position: sticky; top: 24px; }
}
.look--inline, .look--pdp, .look--page { margin-top: clamp(50px, 7vw, 100px); }
.look--inline .lb, .look--pdp .lb, .look--page .lb { padding: 0 var(--gut); }

/* look builder */
.lb { display: grid; gap: 22px; }
.lb fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.lb legend { padding: 0; margin-bottom: 10px; font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .9; }
.lb__controls { display: grid; gap: 20px; }
.lb__fams { display: flex; flex-wrap: wrap; gap: 6px; }
.lb__fam input, .lb__col input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lb__fam span { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 12px 4px 6px; border: var(--t) solid rgba(243, 235, 221, .45); cursor: pointer; }
.lb__fam .chart { width: 30px; height: 38px; }
.lb__fam b { font: italic 400 18px/1 var(--serif); }
.lb__fam input:checked + span { background: var(--milk); color: var(--olive-d); border-color: var(--milk); }
.lb__fam input:focus-visible + span, .lb__col input:focus-visible + span { outline: 2px solid var(--milk); outline-offset: 2px; }
.lb__cols { display: flex; flex-wrap: wrap; gap: 6px; }
.lb__col span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 8px; border: var(--t) solid rgba(243, 235, 221, .45); cursor: pointer; }
.lb__col i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); border: 1px solid rgba(0, 0, 0, .25); }
.lb__col input:checked + span { border-color: var(--milk); box-shadow: inset 0 0 0 1px var(--milk); }
.lb__col.is-off span { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.lb__slots { list-style: none; position: relative; display: grid; gap: 10px; }
.lb__slots::before { content: ""; position: absolute; left: 13px; top: 20px; bottom: 20px; width: var(--t); background: var(--tc); }
.lb__slot { position: relative; display: grid; grid-template-columns: 28px 74px 1fr; grid-template-areas: "pick img info" "pick img size"; align-items: center; gap: 4px 14px; padding: 10px 12px 10px 0; background: rgba(243, 235, 221, .07); border: var(--t) solid rgba(243, 235, 221, .25); }
.lb__pick { grid-area: pick; position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 44px; }
.lb__pick input { appearance: none; width: 22px; height: 15px; margin: 0; border: var(--t) solid var(--tc); border-radius: 50%; background: var(--olive); cursor: pointer; }
.lb__pick input:checked { background: var(--tc); }
.lb__img { grid-area: img; }
.lb__img img { width: 74px; height: 98px; object-fit: cover; border: 3px solid var(--milk); }
.lb__info { grid-area: info; display: grid; gap: 2px; min-width: 0; }
.lb__kind { font: 600 11.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #E9E2CF; }
.lb__name { font: italic 400 20px/1.15 var(--serif); text-decoration: none; }
.lb__price { font-weight: 600; }
.lb__layer { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--milk); }
.lb__layer .om { --tc: var(--milk); }
.lb__size { grid-area: size; }
.lb__size select { min-height: 44px; min-width: 110px; padding: 0 10px; border: var(--t) solid rgba(243, 235, 221, .7); background: var(--olive-d); color: var(--milk); border-radius: 0; }
.lb__size select.is-missing { border-color: #F2B49A; box-shadow: 0 0 0 2px #F2B49A; }
.lb__slot.is-off { opacity: .5; }
.lb__foot { display: grid; gap: 18px; align-items: center; padding-top: 10px; }
.lb__total { margin: 0; display: flex; align-items: baseline; gap: 14px; }
.lb__total span { font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.lb__total b { font: italic 300 clamp(34px, 4vw, 48px)/1 var(--serif); }
.lb__msg { margin: 0; min-height: 1.4em; font-weight: 600; }
.lb__msg a { color: var(--milk); }
@media (min-width: 600px) {
	.lb__slot { grid-template-columns: 28px 74px 1fr auto; grid-template-areas: "pick img info size"; }
	.lb__foot { grid-template-columns: auto auto; justify-content: space-between; }
	.lb__msg { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ openness (terracotta) */
.open { padding: clamp(70px, 9vw, 130px) 0; background: var(--terra); color: var(--milk); --tc: var(--milk); }
.open .sec-h__no { color: var(--milk); }
.open__list { list-style: none; display: grid; gap: 50px; padding: 0 var(--gut); counter-reset: o; }
.open__item { display: grid; gap: 12px; align-content: start; }
.open__img img { width: min(240px, 60vw); aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 6px solid var(--milk); }
.open__item .om { font-size: 13px; }
.open__item .om__loops i { width: 22px; height: 14px; }
.open__def { margin: 6px 0 0; font: italic 300 clamp(26px, 2.4vw, 34px)/1.1 var(--serif); }
.open__tip { margin: 0; max-width: 40ch; }
.open__a { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; font-weight: 600; color: var(--milk); text-decoration: none; border-bottom: var(--t) solid var(--milk); width: max-content; }
.open__a:hover { color: var(--milk); }
@media (min-width: 900px) {
	.open__list { grid-template-columns: repeat(3, 1fr); gap: clamp(30px, 4vw, 70px); }
	.open__item:nth-child(2) { margin-top: 60px; }
	.open__item:nth-child(3) { margin-top: 120px; }
}

/* ------------------------------------------------------------ yarn */
.yarn { display: grid; gap: 30px; padding: clamp(70px, 9vw, 130px) var(--gut); align-items: center; }
.yarn__img { margin: 0; }
.yarn__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: var(--t) solid var(--ink); }
.yarn__h { margin: 12px 0 18px; font: italic 300 clamp(40px, 5vw, 76px)/1 var(--serif); }
.yarn__text p { max-width: 50ch; color: var(--ink2); }
.yarn__cols { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 26px; }
.yarn__cols li { display: inline-flex; align-items: center; gap: 8px; font: italic 400 19px/1 var(--serif); }
.yarn__cols i { width: 30px; height: 18px; border-radius: 50%; background: var(--c); border: 1px solid rgba(43, 33, 23, .4); }
@media (min-width: 900px) {
	.yarn { grid-template-columns: 7fr 5fr; gap: clamp(40px, 5vw, 90px); }
}

/* ------------------------------------------------------------ listing header + filters */
.lhead { display: grid; gap: 26px; padding: clamp(28px, 5vw, 70px) var(--gut) clamp(20px, 4vw, 50px); align-items: end; }
.lhead__kicker { margin: 0 0 12px; font: 600 11.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--terra-d); }
.lhead__h { font: italic 300 clamp(50px, 9vw, 150px)/.88 var(--serif); letter-spacing: -.02em; }
.lhead__desc { max-width: 54ch; margin-top: 18px; color: var(--ink2); }
.lhead__desc p:last-child { margin: 0; }
.lhead__art img { width: 100%; max-height: 520px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 0 0; border: var(--t) solid var(--ink); }
.lhead--fam .lhead__art { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; gap: 24px; align-items: end; padding: 24px; background: var(--surface); border: var(--t) solid var(--ink); background-image: repeating-linear-gradient(to bottom, transparent 0 23px, rgba(169, 74, 40, .14) 23px 24px); }
.lhead__chart { color: var(--terra-d); }
@media (min-width: 900px) {
	.lhead { grid-template-columns: 7fr 4fr; }
	.lhead__art img { max-height: 460px; }
}
.legend { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; font-size: 13.5px; }
.legend li { display: flex; align-items: center; gap: 6px; }
.legend svg { width: 22px; height: 22px; flex: none; }
.legend b { font-weight: 600; }

.filters { display: grid; gap: 10px; margin: 0 var(--gut) clamp(30px, 5vw, 56px); padding: 14px 0; border-top: var(--t) solid var(--ink); border-bottom: var(--t) solid var(--ink); }
.filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.filters__label { min-width: 74px; font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: var(--t) solid var(--line); background: var(--surface); text-decoration: none; font-size: 14.5px; color: var(--ink); }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-current], .chip[aria-pressed="true"] { background: var(--ink); color: var(--milk); border-color: var(--ink); --tc: var(--milk); }
.chip--stitch { font: italic 400 16px/1 var(--serif); }
.chip--col i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); border: 1px solid rgba(43, 33, 23, .35); }
.filters__count { margin: 0 0 0 auto; font-size: 13.5px; color: var(--muted); }
@media (max-width: 699px) {
	.filters__row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
	.filters__row .chips { flex-wrap: nowrap; }
	.chip { white-space: nowrap; }
	.filters__label { min-width: auto; }
	.filters__count { white-space: nowrap; }
}

/* ------------------------------------------------------------ product page: stacked cards */
.crumbs { padding: 18px var(--gut) 0; font-size: 13.5px; color: var(--muted); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "○"; margin-right: 6px; color: var(--terra); font-size: 10px; }
.crumbs a { color: var(--muted); }
.pdp { display: grid; gap: 34px; padding: 20px var(--gut) 0; }
.pdp__gallery { min-width: 0; }
.stack { position: relative; max-width: 640px; }
.stack__cards { list-style: none; position: relative; aspect-ratio: 3 / 4; margin: 0 30px 30px 0; touch-action: pan-y; user-select: none; }
.stack__card {
	--pos: var(--k);
	position: absolute;
	inset: 0;
	padding: 10px;
	background: var(--surface);
	border: var(--t) solid var(--ink);
	transform: translate(calc(min(var(--pos), 3) * 9px), calc(min(var(--pos), 3) * 8px)) rotate(calc(min(var(--pos), 3) * 1.3deg));
	z-index: calc(20 - var(--pos));
	transition: transform .55s var(--ease), opacity .4s var(--ease);
	cursor: grab;
}
.stack__card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.stack__card.is-gone { transform: translate(-30%, 4%) rotate(-9deg); opacity: 0; }
.stack__card[data-depth="4"], .stack__card[data-depth="5"], .stack__card[data-depth="6"], .stack__card[data-depth="7"], .stack__card[data-depth="8"] { opacity: 0; }
.stack__ctrl { display: flex; align-items: center; gap: 12px; }
.stack__btn { display: grid; place-items: center; width: 48px; height: 48px; border: var(--t) solid var(--ink); background: var(--surface); }
.stack__btn:hover { background: var(--ink); color: var(--milk); }
.stack__n { margin: 0; font: italic 400 20px/1 var(--serif); min-width: 64px; text-align: center; }
.stack__thumbs { list-style: none; display: flex; gap: 6px; margin-top: 14px; overflow-x: auto; padding: 2px; }
.stack__thumbs button { padding: 0; border: var(--t) solid var(--line); background: none; width: 58px; flex: none; }
.stack__thumbs button[aria-current="true"] { border-color: var(--terra); outline: 1px solid var(--terra); }
.stack__thumbs img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.pdp__photonote { margin-top: 12px; font-size: 13px; color: var(--muted); max-width: 60ch; }
.pdp__buy { align-self: start; }
.pdp__no { margin: 0 0 10px; font: 600 11.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--terra-d); }
.pdp__h { font: italic 300 clamp(42px, 5vw, 76px)/.95 var(--serif); letter-spacing: -.015em; }
.pdp__price { margin: 16px 0 14px; font-size: 22px; font-weight: 600; }
.pdp__lead { color: var(--ink2); }
.pdp__open { display: grid; gap: 8px; margin: 18px 0 22px; padding: 14px 16px; background: var(--surface); border: var(--t) solid var(--ink); border-left: 6px solid var(--terra); }
.pdp__open .om { font-size: 12.5px; }
.pdp__open .om__loops i { width: 20px; height: 13px; }
.pdp__open p { margin: 0; font-size: 15.5px; }
.sw { border: 0; margin: 0 0 18px; padding: 0; }
.sw legend { padding: 0; margin-bottom: 10px; font-size: 14.5px; }
.sw legend b { font-weight: 600; }
.sw legend .linkbtn { margin-left: 10px; font-size: 13.5px; }
.sw__c { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin: 0 6px 6px 0; padding: 0 14px 0 6px; border: var(--t) solid var(--line); background: var(--surface); }
.sw__c i { width: 32px; height: 32px; border-radius: 50%; background: var(--c); border: 1px solid rgba(43, 33, 23, .3); }
.sw__c[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sw__s { min-width: 54px; min-height: 48px; margin: 0 4px 6px 0; border: var(--t) solid var(--line); background: var(--surface); font-weight: 600; }
.sw__s[aria-pressed="true"] { background: var(--ink); color: var(--milk); border-color: var(--ink); }
.sw__s:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.sw.is-missing legend { color: var(--err); }
.js .pdp__form table.variations { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pdp__form table.variations { margin-bottom: 14px; }
.pdp__form table.variations th { text-align: left; font-weight: 600; padding-right: 10px; }
.pdp__form select { min-height: 44px; border: var(--t) solid var(--ink); background: var(--surface); padding: 0 10px; border-radius: 0; }
.pdp__form .woocommerce-variation-price, .pdp__form .woocommerce-variation-description { display: none; }
.pdp__form .woocommerce-variation-availability p { margin: 0 0 10px; font-size: 14px; }
.pdp__form .variations_button, .pdp__form form.cart:not(.variations_form) { display: flex; gap: 10px; align-items: stretch; }
.quantity input.qty { width: 74px; min-height: 52px; border: var(--t) solid var(--ink); background: var(--surface); text-align: center; font-weight: 600; border-radius: 0; }
.pdp__form .single_add_to_cart_button { flex: 1; }
.pdp__form .single_add_to_cart_button.disabled { background: #D9C7AE; border-color: #D9C7AE; color: var(--ink) !important; }
.buynotes { list-style: none; display: grid; gap: 10px; margin: 26px 0 0; padding: 18px 0 0; border-top: var(--t) solid var(--line); font-size: 14.5px; color: var(--ink2); }
.buynotes strong { display: block; font: 600 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
@media (min-width: 1024px) {
	.pdp { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 90px); }
	.pdp__buy { position: sticky; top: 24px; }
}

/* index-card stack */
.ic { padding: clamp(60px, 8vw, 110px) var(--gut) 0; }
.ic__tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 0 0 0 4px; position: relative; z-index: 2; }
.ic__tabs [role=tab] { flex: none; display: inline-flex; align-items: baseline; gap: 8px; min-height: 46px; padding: 0 16px; border: var(--t) solid var(--ink); border-bottom: 0; background: var(--paper); font: italic 400 17px/1 var(--serif); transform: translateY(calc(var(--t) * 1)); }
.ic__tabs [role=tab] small { font: 600 11.5px/1 var(--sans); letter-spacing: .1em; color: var(--muted); }
.ic__tabs [role=tab][aria-selected="true"] { background: var(--surface); color: var(--terra-d); position: relative; z-index: 2; }
.ic__stack { display: grid; grid-template-columns: minmax(0, 1fr); position: relative; margin: 0 40px 40px 0; }
@media (max-width: 699px) { .ic__stack { margin-right: 22px; } .ic__card { transform: translate(calc(min(var(--depth), 4) * 5px), calc(min(var(--depth), 4) * 6px)) !important; } }
.ic__card {
	grid-area: 1 / 1;
	--depth: var(--d);
	padding: clamp(22px, 3vw, 40px);
	background: var(--surface);
	border: var(--t) solid var(--ink);
	background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(169, 74, 40, .1) 31px 32px);
	transform: translate(calc(min(var(--depth), 4) * 10px), calc(min(var(--depth), 4) * 9px));
	z-index: calc(10 - var(--depth));
	transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.ic__card:not(.is-front) > * { visibility: hidden; }
.ic__card:nth-child(odd):not(.is-front) { background-color: var(--paper); }
.ic__card.is-front { box-shadow: 6px 6px 0 var(--terra); }
.ic__h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; font: italic 300 clamp(30px, 3.4vw, 46px)/1 var(--serif); }
.ic__h small { font: 600 11px/1 var(--sans); letter-spacing: .12em; color: var(--terra-d); }
.ic__cols { display: grid; gap: 26px; }
@media (min-width: 900px) {
	.ic__cols { grid-template-columns: 1.2fr 1fr 1fr; }
	.ic__cols--chart { grid-template-columns: minmax(180px, 280px) 1fr; }
}
.ic__chart { color: var(--terra-d); max-width: 280px; }
.ic__big { font: italic 300 clamp(24px, 2.4vw, 32px)/1.2 var(--serif); margin: 12px 0; }
.ticks { list-style: none; display: grid; gap: 8px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks .ico { width: 20px; height: 20px; margin-top: 3px; color: var(--terra); }
.facts { margin: 0; display: grid; gap: 10px; }
.facts div { display: grid; gap: 2px; }
.facts dt { font: 600 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; }
.scale { list-style: none; display: grid; gap: 10px; }
.scale li { display: grid; gap: 6px; padding: 14px; border: var(--t) solid var(--line); }
.scale li.is-this { border-color: var(--terra); background: var(--bg); }
.scale p { margin: 0; }
.scale__this { font: 600 11px/1 var(--sans) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--terra-d); }
@media (min-width: 760px) { .scale { grid-template-columns: repeat(3, 1fr); } }
.sizes { overflow-x: auto; }
.sizes table, .prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sizes caption { caption-side: bottom; text-align: left; padding-top: 12px; font-size: 13.5px; color: var(--muted); }
.sizes th, .sizes td, .prose th, .prose td { padding: 10px 12px; border-bottom: var(--t) solid var(--line); text-align: left; }
.sizes thead th, .prose thead th { font: 600 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; border-bottom-color: var(--ink); }
.sizes tbody th { font: italic 500 18px/1 var(--serif); }
.resp { margin-top: 18px; font-size: 13.5px; color: var(--muted); }

/* ------------------------------------------------------------ pages */
.sheet-page { display: grid; gap: 30px; padding: clamp(28px, 5vw, 70px) var(--gut) clamp(60px, 8vw, 110px); }
.sheet-page__card { align-self: start; padding: 24px; background: var(--surface); border: var(--t) solid var(--ink); background-image: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(169, 74, 40, .12) 27px 28px); }
.sheet-page__kicker { margin: 0 0 10px; font: 600 11px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--terra-d); }
.sheet-page__h { font: italic 300 clamp(38px, 4.6vw, 64px)/.98 var(--serif); letter-spacing: -.01em; }
.sheet-page__toc ol { list-style: none; margin: 22px 0 0; display: grid; gap: 2px; counter-reset: r; }
.sheet-page__toc li { counter-increment: r; }
.sheet-page__toc a { display: grid; grid-template-columns: 36px 1fr; padding: 6px 0; font-size: 14.5px; text-decoration: none; color: var(--ink2); }
.sheet-page__toc a::before { content: "r" counter(r); font: 600 10.5px/1.9 var(--sans); letter-spacing: .08em; color: var(--terra-d); }
.sheet-page__toc a:hover { color: var(--terra-d); }
.sheet-page__chain { margin: 20px 0 12px; color: var(--terra); }
.sheet-page__help { margin: 0; font-size: 14px; }
@media (min-width: 1024px) {
	.sheet-page { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); }
	.sheet-page__card { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow: auto; }
}
.prose { max-width: 72ch; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 2em 0 .5em; font: italic 300 clamp(28px, 2.8vw, 38px)/1.1 var(--serif); }
.prose h3 { margin: 1.6em 0 .4em; font: 600 18px/1.3 var(--sans); }
.prose ul, .prose ol { margin: 0 0 1.2em 1.2em; }
.prose ul { list-style: none; margin-left: 0; }
.prose ul > li { position: relative; padding-left: 26px; margin-bottom: .4em; }
.prose ul > li::before { content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 9px; border: var(--t) solid var(--terra); border-radius: 50%; }
.prose ol > li { margin-bottom: .4em; }
.prose a { color: var(--terra-d); }
.prose blockquote, .prose .box { margin: 1.4em 0; padding: 16px 20px; background: var(--surface); border: var(--t) solid var(--ink); border-left: 6px solid var(--terra); }
.prose .box p:last-child { margin: 0; }
.prose hr { border: 0; height: 12px; margin: 2em 0; background: var(--chain) repeat-x 0 50% / 14px 10px; }
.prose dl div { padding: 8px 0; border-bottom: var(--t) solid var(--line); display: grid; gap: 2px; }
.prose dt { font: 600 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.prose dd { margin: 0; }
.prose details { border-top: var(--t) solid var(--line); padding: 4px 0; }
.prose details:last-of-type { border-bottom: var(--t) solid var(--line); }
.prose summary { cursor: pointer; padding: 12px 0; font: italic 400 21px/1.3 var(--serif); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.prose summary::after { content: "+"; font: 300 26px/1 var(--sans); color: var(--terra); }
.prose details[open] summary::after { content: "–"; }
.prose summary::-webkit-details-marker { display: none; }

/* about */
.about__head { padding: clamp(30px, 6vw, 90px) var(--gut) clamp(30px, 5vw, 60px); max-width: 1200px; }
.about__h { font: italic 300 clamp(54px, 9vw, 150px)/.88 var(--serif); letter-spacing: -.02em; }
.about__lead { max-width: 56ch; margin-top: 24px; font-size: clamp(17px, 1.5vw, 21px); color: var(--ink2); }
.about__yarn, .about__film { display: grid; gap: 30px; padding: clamp(30px, 5vw, 70px) var(--gut); align-items: center; }
.about__yarn img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: var(--t) solid var(--ink); }
.about__yarn h2, .about__film h2, .about__stitches h2 { font: italic 300 clamp(34px, 4vw, 58px)/1 var(--serif); margin-bottom: 18px; }
.about__yarn p, .about__film p { color: var(--ink2); max-width: 52ch; }
.about__stitches { padding: clamp(50px, 7vw, 100px) var(--gut); background: var(--paper); }
.about__grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 0 30px; }
.about__grid a { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto 1fr; gap: 4px 18px; padding: 20px 0; border-top: var(--t) solid var(--ink); text-decoration: none; }
.about__grid .chart { grid-row: 1 / 3; color: var(--terra-d); }
.about__grid b { font: italic 400 22px/1.1 var(--serif); }
.about__grid span { font-size: 14.5px; color: var(--ink2); }
.about__film video, .about__film img { width: 100%; max-width: 440px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 999px 999px 0 0; border: 6px solid var(--surface); outline: var(--t) solid var(--ink); }
.about__open { list-style: none; display: grid; gap: 10px; margin: 0 0 18px; }
.about__open li { display: grid; gap: 4px; }
.about__more { padding: 0 var(--gut) 80px; }
@media (min-width: 900px) {
	.about__yarn { grid-template-columns: 7fr 5fr; }
	.about__film { grid-template-columns: 5fr 7fr; }
}

/* contact */
.contact { display: grid; gap: 30px; padding: clamp(28px, 5vw, 70px) var(--gut) clamp(60px, 8vw, 110px); }
.contact__card { padding: 24px; background: var(--surface); border: var(--t) solid var(--ink); align-self: start; }
.contact__card dl { margin: 22px 0 0; display: grid; gap: 14px; }
.contact__card dt { font: 600 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.contact__card dd { margin: 0; font-size: 17px; }
.contact__note { margin: 18px 0; font-size: 14px; color: var(--muted); }
.contact__img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; margin-top: 10px; }
@media (min-width: 1024px) { .contact { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); } }

/* looks page */
.looks { padding: clamp(60px, 8vw, 110px) var(--gut); }
.looks .sec-h__t { margin-bottom: 30px; }
.looks__fam { display: grid; gap: 14px; padding: 22px 0; border-top: var(--t) solid var(--ink); }
.looks__name { margin: 0; display: flex; align-items: center; gap: 12px; font: italic 400 28px/1 var(--serif); }
.looks__chart .chart { width: 40px; height: 50px; color: var(--terra-d); }
.looks__row { list-style: none; display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.looks__btn { display: grid; gap: 8px; padding: 10px; border: var(--t) solid var(--line); background: var(--surface); text-align: left; }
.looks__btn:hover { border-color: var(--ink); }
.looks__thumbs { display: flex; gap: 4px; }
.looks__thumbs img { width: 70px; height: 93px; object-fit: cover; }
.looks__label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.looks__label i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); border: 1px solid rgba(43, 33, 23, .35); }
.looks__label small { font-weight: 400; color: var(--muted); }

/* 404 */
.lost { padding: clamp(50px, 10vw, 140px) var(--gut); max-width: 900px; }
.lost__no { margin: 0; font: 600 12px/1 var(--sans); letter-spacing: .2em; color: var(--terra-d); }
.lost__h { margin: 12px 0 20px; font: italic 300 clamp(54px, 9vw, 140px)/.9 var(--serif); }
.lost__ctas { display: flex; flex-wrap: wrap; gap: 26px 14px; margin-top: 26px; }
.lost__chain { margin-top: 50px; color: var(--terra); max-width: 420px; }

/* ------------------------------------------------------------ footer: poster wall */
.poster { position: relative; margin-left: var(--rail); margin-top: clamp(60px, 8vw, 110px); background: var(--ink); color: var(--milk); overflow: hidden; }
.poster__thread { position: absolute; left: 0; right: 0; top: 18px; height: 120px; pointer-events: none; }
.poster__thread svg { width: 100%; height: 100%; }
.poster__thread path { fill: none; stroke: #C86A45; stroke-width: 2; vector-effect: non-scaling-stroke; }
.poster__wall { position: relative; display: grid; gap: 22px; padding: 90px var(--gut) 40px; }
.pst { position: relative; margin: 0; padding: 24px; color: var(--ink); background: var(--surface); box-shadow: 0 1px 0 rgba(0, 0, 0, .3); transform: rotate(var(--r, 0deg)); }
.pst a { color: inherit; }
.pst__h { margin-bottom: 12px; display: flex; align-items: center; gap: 8px; font: italic 400 26px/1.1 var(--serif); }
.pst__tag { margin: 0 0 6px; font: 600 11.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.pst__list { list-style: none; display: grid; gap: 0; }
.pst__list a { display: block; padding: 7px 0; text-decoration: none; border-bottom: 1px solid rgba(43, 33, 23, .18); }
.pst__list a:hover { color: var(--terra-d); }
.pst__small { font-size: 13.5px; opacity: .85; margin: 6px 0 0; }
.pst--brand { --r: -1.2deg; background: var(--terra); color: var(--milk); padding: clamp(26px, 4vw, 48px); }
.pst__logo svg { width: 100%; max-width: 640px; color: var(--milk); }
.pst__logo { --logo-thread: var(--ink); }
.pst__claim { margin: 20px 0 14px; font: italic 300 clamp(26px, 3vw, 40px)/1.1 var(--serif); }
.pst__chain { color: var(--milk); max-width: 360px; }
.pst--help { --r: 1.6deg; background-image: repeating-linear-gradient(to bottom, transparent 0 33px, rgba(169, 74, 40, .16) 33px 34px); }
.pst--help::before, .pst--photo::before { content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 24px; margin-left: -45px; background: rgba(243, 235, 221, .55); transform: rotate(-4deg); }
.pst__wd { font-weight: 600; color: var(--terra-d) !important; }
.pst--photo { --r: 2.6deg; padding: 10px 10px 14px; }
.pst--photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pst--photo figcaption { margin-top: 10px; font: italic 400 15px/1.2 var(--serif); }
.pst--contact { --r: -2deg; background: var(--olive); color: var(--milk); }
.pst--contact p { margin: 0 0 8px; }
.pst--contact a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; text-decoration: none; font-size: 16.5px; word-break: break-all; }
.pst--legal { --r: .8deg; background: var(--milk); padding-left: 52px; }
.pst--legal::before { content: ""; position: absolute; left: 18px; top: 26px; width: 14px; height: 14px; border-radius: 50%; border: var(--t) solid var(--ink); background: var(--ink); box-shadow: inset 0 0 0 3px var(--milk); }
.pst--pay { --r: -.8deg; background: var(--surface); border: 2px dashed var(--terra); }
.pst--pay p { font-size: 14px; margin: 0; }
.pay { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pay li { padding: 5px 10px; border: var(--t) solid var(--ink); font: 700 12px/1 var(--sans); letter-spacing: .06em; }
.pst--locale { --r: 1.8deg; background: var(--terra-d); color: var(--milk); }
.pst__loc { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border: var(--t) solid var(--milk); background: none; color: var(--milk); font-weight: 600; letter-spacing: .06em; }
.pst__loc .cv-loc-label { display: inline; writing-mode: horizontal-tb; transform: none; font-size: 15px; }
.poster__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding: 20px var(--gut) 26px; border-top: 1px solid rgba(243, 235, 221, .22); font-size: 13px; opacity: .85; }
.poster__base p { margin: 0; }
@media (min-width: 760px) {
	.poster__wall { grid-template-columns: repeat(6, 1fr); }
	.pst--brand { grid-column: 1 / 7; }
	.pst--help { grid-column: 1 / 4; }
	.pst--photo { grid-column: 4 / 7; grid-row: span 2; }
	.pst--contact { grid-column: 1 / 4; }
	.pst--legal { grid-column: 1 / 4; }
	.pst--pay { grid-column: 4 / 7; }
	.pst--locale { grid-column: 1 / 7; }
}
@media (min-width: 1200px) {
	.poster__wall { grid-template-columns: repeat(12, 1fr); gap: 26px; padding-top: 110px; }
	.pst--brand { grid-column: 1 / 7; grid-row: 1 / 3; align-self: start; }
	.pst--help { grid-column: 7 / 10; grid-row: 1; margin-top: 20px; }
	.pst--photo { grid-column: 10 / 13; grid-row: 1 / 3; margin-top: -30px; }
	.pst--contact { grid-column: 7 / 10; grid-row: 2; margin-top: -10px; }
	.pst--legal { grid-column: 1 / 5; grid-row: 3; margin-top: -40px; }
	.pst--pay { grid-column: 5 / 9; grid-row: 3; }
	.pst--locale { grid-column: 9 / 13; grid-row: 3; align-self: start; margin-top: 30px; }
}

/* cookie note */
.cookie { position: fixed; z-index: 80; left: calc(var(--rail) + 12px); right: 12px; bottom: 12px; max-width: 460px; display: flex; gap: 14px; align-items: center; padding: 12px 14px; font-size: 13px; background: var(--surface); border: var(--t) solid var(--ink); box-shadow: 5px 5px 0 var(--olive); }
.cookie p { margin: 0; }

/* ------------------------------------------------------------ WooCommerce: notices, cart, checkout, account */
.shop-page { padding: clamp(24px, 4vw, 60px) var(--gut) clamp(60px, 8vw, 110px); }
.shop-page__head { margin-bottom: 26px; }
.shop-page__h { font: italic 300 clamp(44px, 6vw, 92px)/.95 var(--serif); }
.shop-page__sub { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; color: var(--muted); font-size: 14.5px; }
.woocommerce-notices-wrapper:empty { display: none; }
.notices-wrap { padding: 0 var(--gut); }
.notices-wrap .woocommerce-notices-wrapper { padding-top: 16px; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, .cv-collect, .wc-block-components-notice-banner {
	list-style: none;
	margin: 0 0 22px;
	padding: 14px 18px;
	background: var(--surface);
	border: var(--t) solid var(--ink);
	border-left: 6px solid var(--olive);
	font-size: 15px;
}
.woocommerce-error { border-left-color: var(--err); }
.woocommerce-error li { margin: 0; }
.woocommerce-message .button, .woocommerce-info .button { min-height: 40px; margin-left: 12px; padding: 0 14px; float: right; }
.woocommerce-message .button::after, .woocommerce-info .button::after { display: none; }
.cv-collect { border-left-color: var(--terra); }
.cv-tax, .cv-duties { font-size: 13.5px; color: var(--muted); }
.cv-cur { font-size: .78em; font-weight: 600; letter-spacing: .06em; opacity: .75; }

table.shop_table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
table.shop_table th, table.shop_table td { padding: 14px 10px; border-bottom: var(--t) solid var(--line); text-align: left; vertical-align: middle; }
table.shop_table thead th { font: 600 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; border-bottom-color: var(--ink); }
.woocommerce-cart-form .product-thumbnail img { width: 72px; aspect-ratio: 3 / 4; object-fit: cover; border: var(--t) solid var(--ink); }
.woocommerce-cart-form .product-name a { font: italic 400 20px/1.2 var(--serif); text-decoration: none; }
.woocommerce-cart-form .product-remove a { display: grid; place-items: center; width: 36px; height: 36px; border: var(--t) solid var(--line); text-decoration: none; font-size: 20px; }
.woocommerce-cart-form .actions { text-align: right; }
.woocommerce-cart-form .actions .button { min-height: 44px; }
.woocommerce-cart-form .coupon { display: none; }
.cart-collaterals { margin-top: 30px; display: flex; justify-content: flex-end; }
.cart_totals { width: 100%; max-width: 520px; padding: 24px; background: var(--surface); border: var(--t) solid var(--ink); }
.cart_totals h2, #order_review_heading, .woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-additional-fields h3, .woocommerce-order-details__title, .woocommerce-customer-details h2, .woocommerce-column__title { margin: 0 0 14px; font: italic 300 32px/1.1 var(--serif); }
.wc-proceed-to-checkout .checkout-button { width: 100%; margin-top: 18px; }
.woocommerce-shipping-methods { list-style: none; }
.woocommerce-shipping-destination, .woocommerce-shipping-calculator { font-size: 14px; }
@media (max-width: 760px) {
	table.shop_table_responsive thead { display: none; }
	table.shop_table_responsive tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: var(--t) solid var(--line); padding: 10px 0; }
	table.shop_table_responsive td { border: 0; padding: 6px 4px; }
	table.shop_table_responsive td::before { content: attr(data-title); display: block; font: 600 10.5px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
	table.shop_table_responsive td.product-remove::before, table.shop_table_responsive td.product-thumbnail::before, table.shop_table_responsive td.actions::before { display: none; }
	table.shop_table_responsive td.product-name, table.shop_table_responsive td.actions { grid-column: 1 / -1; }
}

form.checkout { display: grid; gap: 30px; }
@media (min-width: 1024px) {
	form.checkout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
	form.checkout > .cv-collect { grid-column: 1 / -1; }
	#order_review_heading { grid-column: 2; grid-row: 1; }
	#customer_details { grid-column: 1; grid-row: 1 / 3; }
	#order_review { grid-column: 2; grid-row: 2; position: sticky; top: 24px; }
}
#order_review { padding: 22px; background: var(--surface); border: var(--t) solid var(--ink); }
.woocommerce form .form-row { display: grid; gap: 6px; margin: 0 0 16px; }
.woocommerce form .form-row label { font-size: 14px; font-weight: 600; }
.woocommerce form .form-row .required { color: var(--err); text-decoration: none; }
.woocommerce form .form-row .optional { font-weight: 400; color: var(--muted); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .tv-form input, .cv-form input, .cv-form textarea, .woocommerce-input-wrapper select, .select2-container .select2-selection {
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	border: var(--t) solid var(--ink);
	border-radius: 0;
	background: var(--surface);
}
.woocommerce form .form-row textarea, .cv-form textarea { min-height: 140px; }
.woocommerce form .form-row input:focus, .woocommerce form .form-row textarea:focus, .cv-form input:focus, .cv-form textarea:focus { outline: 2px solid var(--terra); outline-offset: 1px; }
.woocommerce form .form-row.woocommerce-invalid input { border-color: var(--err); }
@media (min-width: 700px) {
	.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
	.form-row-wide, #billing_address_1_field, #billing_address_2_field, #shipping_address_1_field, #shipping_address_2_field, #billing_country_field, #shipping_country_field, #billing_email_field { grid-column: 1 / -1; }
}
.select2-container .select2-selection { display: flex; align-items: center; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; }
#payment { margin-top: 18px; }
#payment ul.payment_methods { list-style: none; display: grid; gap: 8px; margin-bottom: 14px; }
#payment ul.payment_methods > li { padding: 12px; border: var(--t) solid var(--line); }
#payment .payment_box { margin-top: 8px; font-size: 14px; color: var(--ink2); }
#payment .place-order { display: grid; gap: 14px; }
#place_order { width: 100%; min-height: 58px; font-size: 16.5px; }
.woocommerce-terms-and-conditions-wrapper { font-size: 14px; }
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox { display: flex; gap: 10px; align-items: flex-start; }
.woocommerce-terms-and-conditions-wrapper input[type=checkbox] { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--terra); flex: none; }
.woocommerce-privacy-policy-text p { font-size: 13.5px; color: var(--muted); }
.woocommerce-account .woocommerce { display: grid; gap: 30px; }
@media (min-width: 900px) { .woocommerce-account.logged-in .woocommerce { grid-template-columns: 240px 1fr; } }
.woocommerce-form-login .woocommerce-form-login__rememberme { display: flex; gap: 8px; align-items: center; margin: 8px 0 14px; }
.woocommerce-form-login .button, .woocommerce-form-register .button { margin-top: 6px; }
.u-columns h2 { font: italic 300 30px/1.1 var(--serif); margin-bottom: 12px; }
.woocommerce-MyAccount-navigation ul { list-style: none; border-top: var(--t) solid var(--ink); }
.woocommerce-MyAccount-navigation a { display: block; padding: 12px 0; border-bottom: var(--t) solid var(--line); text-decoration: none; }
.woocommerce-MyAccount-navigation .is-active a { color: var(--terra-d); font-weight: 600; }
.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword { max-width: 480px; padding: 24px; background: var(--surface); border: var(--t) solid var(--ink); }
.u-columns { display: grid; gap: 30px; }
@media (min-width: 900px) { .u-columns { grid-template-columns: 1fr 1fr; } }
.woocommerce-order-overview { list-style: none; display: grid; gap: 8px; padding: 18px; background: var(--surface); border: var(--t) solid var(--ink); }
.woocommerce-thankyou-order-received { font: italic 300 28px/1.2 var(--serif); }
.cart-empty { font: italic 300 30px/1.2 var(--serif); }
.return-to-shop { margin-top: 26px; }

/* forms from the core plugin (contact, withdrawal) */
.cv-form { display: grid; gap: 4px; max-width: 640px; }
.cv-field { display: grid; gap: 6px; margin: 0 0 14px; }
.cv-field label { font-size: 14.5px; font-weight: 600; }
.cv-optional { font-weight: 400; color: var(--muted); }
.cv-hp { position: absolute; left: -9999px; }
.cv-form__legal { font-size: 13.5px; color: var(--muted); }
.cv-form__row { display: flex; flex-wrap: wrap; gap: 26px 12px; }
.cv-notice { padding: 14px 18px; border: var(--t) solid var(--ink); border-left: 6px solid var(--olive); background: var(--surface); }
.cv-notice--err { border-left-color: var(--err); }
.cv-steps { list-style: none; display: flex; gap: 8px; margin-bottom: 18px; }
.cv-steps li { padding: 6px 12px; border: var(--t) solid var(--line); font-size: 13.5px; }
.cv-steps li.is-current { border-color: var(--ink); background: var(--ink); color: var(--milk); }
.cv-summary dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.cv-summary dd { margin: 0; }

/* ------------------------------------------------------------ motion preferences */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
	.hero.is-drawing .garment__line { stroke-dashoffset: 0; }
	.hero.is-drawing .garment__loops ellipse { opacity: 1; }
	.hero.is-drawing .hero__cut.is-on { opacity: 1; }
}

/* sprite charts draw as a whole */
.chart--use use { stroke-dasharray: 1; stroke-dashoffset: 0; }
.card__link:hover .chart--use use, .card__chart.is-working .chart--use use { animation: cv-work .9s var(--ease) both; }

/* grids never grow past the viewport because of a wide child */
.sheet-page, .contact, .filters, .pdp, .lhead, .yarn, .about__yarn, .about__film, .film, .look__grid { grid-template-columns: minmax(0, 1fr); }
.filters__row, .prose { min-width: 0; }
@media (max-width: 699px) {
	.prose table { display: block; overflow-x: auto; white-space: nowrap; }
}
@media (min-width: 900px) {
	.lhead { grid-template-columns: 7fr 4fr; }
	.yarn, .about__yarn { grid-template-columns: 7fr 5fr; }
	.about__film { grid-template-columns: 5fr 7fr; }
	.film { grid-template-columns: 7fr 5fr; }
}
@media (min-width: 1024px) {
	.sheet-page { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
	.contact { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); }
	.pdp { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.look__grid { grid-template-columns: 5fr 7fr; }
}
/* scroll rows contain their absolutely positioned screen-reader text */
.filters__row, .strip__scroll, .stack__thumbs, .ic__tabs, .looks__row, .sizes { position: relative; }

.stack__card img:not([src]) { visibility: hidden; }