/* SOKK — site components + WordPress/WooCommerce bridge.
 * Loads after sokk-base.css (the verbatim design reference). Every value here is
 * measured off the reference at 1440/768/390, not eyeballed.
 *
 * sokk-storefront (W5): the four global leaks in this sheet — body line-height, the
 * .wp-block-group margin reset, the WooCommerce → tokens bridge and the My Account /
 * checkout-step rules — are scoped to the canvas body or a SOKK container; each edit is
 * marked `sokk-storefront:` and keeps its specificity (see SCOPING.md). */

/* WP resets that fight the reference baseline */
.wp-site-blocks > * { margin-block: 0; }
/*
 * The reference's #root is a min-height:100vh flex column with the footer pushed to
 * the bottom (sokk-base.css:26 + marginTop:auto on the footer itself). The block
 * theme's equivalent root is .wp-site-blocks — without this, short pages (404, an
 * empty wishlist) float the footer mid-viewport. The header and overlay parts are
 * display:contents (below), so the flex items are the bars, <main> and the footer
 * part, which keeps its box and takes the auto margin.
 */
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > footer.wp-block-template-part { margin-top: auto; }
/* sokk-storefront: scoped to the canvas body (a classic theme owns <body> elsewhere); the block
   roots on Elementor pages get the same 1.6 from sokk-scope.css */
body:where(.sokk-canvas) { line-height: 1.6; }
:where(.sokk-canvas .wp-block-group, [class*="sokk-"] .wp-block-group) { margin-block: 0; } /* sokk-storefront: scoped */

/* block styles registered in functions.php */
/* the reference leaves eyebrows at the font's natural leading, not the body's 1.6 */
/* sokk-storefront: .eyebrow scoped like sokk-base.css does it (a host page may use the name); .is-style-eyebrow is opt-in */
.is-style-eyebrow, .eyebrow:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *) { line-height: normal; }
.is-style-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.is-style-ghost .wp-block-button__link { background: transparent; color: var(--ink); }
.is-style-ghost .wp-block-button__link:hover { background: var(--ink); color: var(--bg); }

/* ============================================================ announcement */
.sokk-announce {
	display: block; width: 100%; text-align: center;
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
	color: var(--muted); padding: 8px 0; border: 0; background: transparent;
}

/* ================================================================= header */
/*
 * The header template part wraps the announcement bar and the header bar, and a
 * sticky child can only travel inside its parent's box — that wrapper is only as
 * tall as the two bars, so the bar unstuck after ~30px. display:contents drops the
 * wrapper box so .sokk-header sticks against the page instead.
 *
 * It also keeps the glass backdrop-filter off the wrapper: backdrop-filter makes an
 * element a containing block, which would clip any position:fixed overlay rendered
 * inside the header to the header's own 95px box.
 */
header.wp-block-template-part { display: contents; }
/*
 * sokk-storefront: the Elementor Pro Theme Builder header. Elementor wraps the template
 * in <header class="elementor-location-header"> — static, and exactly as tall as the
 * announcement bar + the 64px bar inside it, so a sticky child had no room to travel and
 * nothing pinned on scroll. Stick the wrapper itself; the negative top lets the
 * announcement bar scroll away and pins only the 64px bar at 0, as on the prototype
 * (its <header> is sticky top:0 z-index:40 and the 30px bar above it is a sibling).
 * --sokk-announce-h is set by sokk.js initHeaderScroll from the bar's measured height
 * (32px desktop, ~48px at 390 where the text wraps); 32px is the fallback.
 */
header.elementor-location-header { position: sticky; top: calc(-1 * var(--sokk-announce-h, 32px)); z-index: 40; }
/* the nav links the mega menu marks as current (modules/elementor.php adds data-on) */
header.elementor-location-header nav a[data-on="true"] { color: var(--ink); }
/*
 * Same trap for the overlays template part (rendered as a bare div after the footer):
 * its wrapper must not box the fixed-position panels, or a transform/filter ancestor
 * would become their containing block and clip every drawer to a zero-height strip.
 */
div.wp-block-template-part { display: contents; }

.sokk-header {
	position: sticky; top: 0; z-index: 100;
	/* the reference bar is the page ground on every palette (flat black on Space Black); the
	   frosted white treatment is glass-only (sokk-base.css html[data-glass] .sokk-header) */
	background: var(--bg); border-bottom: 1px solid var(--line);
	transition: background .3s;
}
/*
 * Scroll state, from the reference bundle: opaque at rest, and only once the page has
 * scrolled past 12px does the bar go translucent and blurred (color-mix 86% of the
 * page ground + blur(12px), background transitioning over .3s). Two carve-outs the
 * reference also makes: an open mega panel keeps the bar opaque so the panel does not
 * float over a blurred strip, and the glass palette keeps its heavier constant frost —
 * there the !important chrome in sokk-base.css beat the inline scroll style too.
 */
html:not([data-glass="1"]) .sokk-header.is-scrolled:not([data-mega="true"]) {
	background: color-mix(in srgb, var(--bg) 86%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
/* glass chrome, applied to the bar itself now that the wrapper has no box */
html[data-glass="1"] .sokk-header {
	-webkit-backdrop-filter: blur(30px) saturate(190%);
	backdrop-filter: blur(30px) saturate(190%);
	background: rgba(255, 255, 255, .85);
	border-bottom: 1px solid rgba(255, 255, 255, .6);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 -1px 0 rgba(0, 0, 0, .04) inset,
		0 10px 30px -18px rgba(30, 50, 90, .35);
}
/* direct child only: the mega panel nests its own .wrap, and a descendant selector
   here forced the bar's three columns and 64px height onto it */
.sokk-header > .wrap {
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px;
}
.sokk-nav { display: flex; align-items: center; gap: 26px; }
.sokk-nav a {
	font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--muted); padding: 1px 6px 3px; position: relative;
}
.sokk-nav a::after {
	content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 1px;
	background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.sokk-nav a:hover { color: var(--ink); }
.sokk-nav a:hover::after { transform: scaleX(1); }

.sokk-logo {
	display: inline-flex; align-items: baseline; gap: 2px; justify-self: center;
	font-family: var(--sans); font-weight: 700; font-size: 26px; line-height: 1;
	letter-spacing: -.01em; text-transform: uppercase; color: var(--ink); padding: 1px 6px;
}
.sokk-logo .reg { font-family: var(--mono); font-size: .28em; letter-spacing: 0; color: var(--muted); transform: translateY(-1.6em); }

.sokk-hd-tools { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.sokk-hd-ico {
	display: flex; align-items: center; gap: 7px; padding: 1px 6px;
	background: none; border: 0; color: var(--ink); cursor: pointer; line-height: 1;
}
.sokk-hd-ico:hover { opacity: .55; }
.sokk-hd-ico .mono { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; }
.sokk-hd-ico .mono.dim { color: var(--muted); letter-spacing: .02em; }
.sokk-hd-ico svg { display: block; }
/* sized on the element like the reference, so each icon keeps its own scale
   (19px for the tools, 17px for the globe beside its country label) */
.sokk-hd-badged { position: relative; }
.sokk-hd-count {
	position: absolute; top: -7px; right: -9px; min-width: 15px; height: 15px; padding: 0 3px;
	border-radius: 8px; background: var(--ink); color: var(--bg);
	font-family: var(--mono); font-size: 9px; line-height: 1;
	display: flex; align-items: center; justify-content: center;
}
.sokk-hd-count[hidden] { display: none; }
.sokk-burger {
	display: none; background: none; border: 0; color: var(--ink); cursor: pointer;
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}

/* ------------------------------------------------------------- mega menu
   Geometry taken from the reference: a panel hanging off the header's bottom edge,
   three columns at 1fr 1fr 2fr. */
.sokk-nav a[data-on="true"] { color: var(--ink); }
.sokk-header[data-mega="true"] { background: var(--bg); backdrop-filter: none; }
.sokk-mega-panel {
	position: absolute; left: 0; right: 0; top: 100%; z-index: 39;
	/* the reference's panel runs at the body's 16px / normal: that strut gives the eyebrows
	   an ~18px line box, and the link stack sits 28px per row under it. The header's 1.6
	   (block header, or the sokk-scope class on the Theme Builder one) would otherwise
	   inherit and drop the whole stack 4px and stretch every row to 22.4. */
	font-size: 16px; line-height: normal;
	background: var(--bg); border-bottom: 1px solid var(--line);
	box-shadow: 0 24px 44px -30px rgba(0,0,0,.35);
	opacity: 0; pointer-events: none; transform: translateY(-8px);
	transition: transform .22s ease, opacity .22s ease;
}
.sokk-mega-panel[hidden] { display: none; }
.sokk-mega-panel[data-open="true"] { opacity: 1; pointer-events: auto; transform: translateY(0); }
/* frosted like the bar it hangs from (the prototype's glass `header > div` rule) */
html[data-glass="1"] .sokk-mega-panel { -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); }
.sokk-mega { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: clamp(24px, 4vw, 72px); padding: 32px var(--gut) 40px; }
.sokk-mega-links { display: flex; flex-direction: column; gap: 11px; margin-top: 18px; }
/* the reference's links are bare <button>s: `normal` leading (17px line, 28px pitch with the
   11px gap) and the UA 1px 6px padding that insets the text 6px */
.sokk-mega-links a { text-align: left; font-size: 14px; line-height: normal; padding: 1px 6px; color: var(--muted); }
.sokk-mega-links a:hover { color: var(--ink); }
.sokk-mega-links .sokk-mega-all { font-size: 15px; font-weight: 500; color: var(--ink); }
/* the reference's note keeps its paragraph bottom margin — the base reset drops it,
   which pulled "Shop now" 14px closer than it sits there */
.sokk-mega-note { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 18px 0 14px; max-width: 240px; }
/* the reference's ShopNow span: DM Mono 11px/.12em uppercase ink with a resting 1px
   underline (border, 2px under), inset 6px by its <button> wrapper; not .link-u's hover line */
.sokk-mega-shop {
	display: inline-block; margin: 16px 0 0 6px; padding: 0 0 2px; border-bottom: 1px solid currentColor;
	font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; line-height: normal; color: var(--ink);
}
.sokk-mega-shop::after { display: none; }
.sokk-mega-products { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* the reference builds these cards as <button>, so the tile sits inside the UA's
   1px 6px padding — the same quirk the rail cards have */
.sokk-mega-products a { display: block; padding: 1px 6px; }
.sokk-mega-products .tile { aspect-ratio: 4/5; }
/* line-height: normal, not the body's 1.6 — the reference's caption is a bare flex row
   and inheriting the body value made every panel 4.8px taller */
.sokk-mega-caption { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; line-height: normal; }
.sokk-mega-caption span { font-size: 13px; font-weight: 500; color: var(--ink); }
.sokk-mega-caption .mono { font-size: 12px; font-weight: 400; }
@media (max-width: 760px) { .sokk-mega-panel { display: none; } }
@media (prefers-reduced-motion: reduce) { .sokk-mega-panel { transition: opacity .22s ease; transform: none; } }

/* ------------------------------------------- mobile menu disclosures */
.sokk-menu-group { border-bottom: 1px solid var(--line); }
.sokk-menu-toggle {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
	background: none; border: 0; cursor: pointer; color: var(--ink); text-align: left;
	font-size: 34px; line-height: .92; font-weight: 700; letter-spacing: -.025em;
	text-transform: uppercase; padding: 10px 0;
}
.sokk-menu-caret { font-size: 20px; font-weight: 400; color: var(--muted); transition: transform .25s ease; }
.sokk-menu-group[data-open="true"] .sokk-menu-caret { transform: rotate(45deg); }
.sokk-menu-sub { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 16px; }
.sokk-menu-sub[hidden] { display: none; }
.sokk-menu-sub a { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.sokk-menu-sub a:hover { color: var(--ink); }
/* the links row already carries the rule, so the plain items keep theirs */
.sokk-menu-links > .sokk-menu-group + a { border-top: 0; }
/* the reference keeps the desktop nav down to 760px — collapsing at 900 put us a
   whole breakpoint out of step with it at tablet widths */
@media (max-width: 760px) {
	.sokk-nav, .sokk-hd-ico.hide-mob { display: none !important; }
	.sokk-burger { display: block; }
	.sokk-header > .wrap { grid-template-columns: 1fr auto 1fr; }
}

/* ================================================================== hero */
/* --line ground: it shows in the corners the 22px glass tile radius leaves open */
.sokk-hero { position: relative; overflow: hidden; background: var(--line); }
/* the reference's slides sit on a flex track that translates between them (.6s); the
   stacked `hidden` slides stay supported for the markup that still ships them */
.sokk-hero-track { display: flex; height: 100%; touch-action: pan-y; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.sokk-hero-slide { position: relative; flex: 0 0 100%; overflow: hidden; height: clamp(440px, 78vh, 820px); }
.sokk-hero-slide[hidden] { display: none; }
.sokk-hero-slide .tile { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
/* the reference darkens each slide with a gradient scrim between the tile and the copy
   (14% at the top, clear at 42%, 48% at the foot) — without it the lower half read ~35 RGB
   points lighter and the copy / CTA sat on an un-darkened ground. The tile is z auto with
   isolation, the body is z-index 4, so 3 lands the scrim between them. */
.sokk-hero-slide::before {
	content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,.14), transparent 42%, rgba(0,0,0,.48));
}
.sokk-hero-body {
	position: relative; z-index: 4; height: 100%;
	display: flex; flex-direction: column; justify-content: flex-end;
	/* 54px floor: at 390 a bare 6vw (23px) put the arrow row on the paragraph's second line */
	padding-bottom: clamp(54px, 6vw, 104px); max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut);
}
.sokk-hero-body .eyebrow { color: rgba(255,255,255,.85); letter-spacing: .16em; margin-bottom: 13px; }
/* measured against the reference at 1440: 101px type on a 96px leading, wrapping
   inside the 600px copy column so "THE CONSIDERED SOCK." breaks over three lines */
.sokk-hero-body h1, .sokk-hero-body h2 {
	color: #fff; font-size: clamp(40px, 7vw, 116px); line-height: .95; letter-spacing: -.025em;
	text-transform: uppercase; font-weight: 700; margin: 0; text-wrap: balance;
	/* the reference's copy column is 600px wide and the h1 never shrinks below its
	   longest word, so "CONSIDERED" decides the wrap (664px at 1440, two lines at 900) */
	max-width: 600px; min-width: min-content;
}
.sokk-hero-body p { color: rgba(255,255,255,.9); font-size: 14.5px; line-height: 1.5; max-width: 420px; margin: 13px 0 0; }
/* the reference wraps the label in a bare <button> (margin-top 4px + the UA's 1px 6px
   padding), so the label is inset 6px and its underline sits 35.5px under the paragraph */
.sokk-hero-cta {
	display: inline-block; width: fit-content; margin: 19px 0 0 6px; color: #fff;
	font-family: var(--mono); font-size: 11px; line-height: normal; letter-spacing: .12em; text-transform: uppercase;
	padding-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,.9);
}
.sokk-hero-dots { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; gap: 9px; z-index: 6; }
.sokk-hero-dots button { height: 3px; width: 16px; background: rgba(255,255,255,.5); border: 0; padding: 0; transition: width .3s, background .3s; }
.sokk-hero-dots button[data-on="true"] { width: 30px; background: #fff; }
/* the row sits 28px up / 28.8px in at 1440 and 16/16 on a phone (not on the gutter) */
.sokk-hero-arrows {
	position: absolute; right: clamp(16px, 2vw, 40px); bottom: clamp(16px, 2vw, 28px); z-index: 6;
	display: flex; align-items: center; gap: 10px;
}
/* a white .4 hairline and no hover change, as measured */
.sokk-hero-arrows button {
	width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,.26); color: #fff; border: 1px solid rgba(255,255,255,.4); font-family: var(--mono); font-size: 17px;
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.sokk-hero-count { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: rgba(255,255,255,.85); margin-left: 4px; }
@media (max-width: 760px) { .sokk-hero-count { display: none; } }

/* ====================================================== category row */
.catrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--line); }
.catrow > a { display: block; background: var(--bg); padding: 1px 6px; color: inherit; }
.catrow .tile { aspect-ratio: 4/5; }
/* the reference caption strip measures 68px tall: 12 + a 38px content row + 18 */
.catrow-cap { padding: 12px 14px 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 68px; }
.catrow-cap .eyebrow { letter-spacing: .16em; }
.catrow-cap .link-u { font-size: 11px; }
@media (max-width: 760px) { .catrow { grid-template-columns: repeat(2, 1fr) !important; } }

/* ================================================== editorial banners */
.sokk-banner, .split-banners > a { position: relative; }
.sokk-banner > .tile, .split-banners > a > .tile { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
/* the two bands are not the same height on the reference: the full-bleed cashmere
   banner is a flat 640px at every width — measured, it does not shrink on mobile —
   while the split pair is 660 side by side and 72vw once stacked */
.sokk-banner-inner { position: relative; z-index: 4; min-height: 640px; display: flex; align-items: flex-end; }
.split-banners .sokk-banner-inner { min-height: clamp(430px, 45.85vw, 660px); }
.sokk-banner-body { display: flex; flex-direction: column; gap: 12px; padding: 2.6vw; max-width: 540px; }
.sokk-banner-body .eyebrow { color: rgba(255,255,255,.82); letter-spacing: .14em; }
.sokk-banner-body h2 {
	color: #fff; font-size: clamp(28px, 3vw, 46px); line-height: 1; letter-spacing: -.025em;
	text-transform: uppercase; font-weight: 700; margin: 0;
}
.sokk-banner-body p { color: rgba(255,255,255,.86); font-size: clamp(13px, .95vw, 15px); line-height: 1.5; margin: 0; max-width: 380px; }
.sokk-banner-body .sokk-hero-cta { margin-top: 0; }

.split-banners { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--line); }
.split-banners > a { display: block; color: inherit; position: relative; }
/* stacked, each band is 72vw tall on the reference — sokk-base.css only targets the
   <button> markup the prototype used, so restate it for our anchors */
@media (max-width: 900px) {
	.split-banners { grid-template-columns: 1fr; }
	/* 72vw, but never below 340 — at 390 that floor is what keeps the band readable */
	.split-banners > a .sokk-banner-inner { min-height: max(72vw, 340px); }
}

/* ========================================================= product rail */
/* the reference frames the band with a hairline top and bottom against the banners / manifesto */
.sokk-rail-section { background: var(--raise); border-block: 1px solid var(--line); padding: clamp(40px, 5vw, 72px) 0; }
.sokk-rail-head { display: flex; align-items: center; justify-content: space-between; position: relative; }
.sokk-rail-head .eyebrow { position: absolute; left: 50%; transform: translateX(-50%); letter-spacing: .2em; }
/* on a phone the reference's 80px spacer is display:none, so the label sits flush left */
@media (max-width: 760px) { .sokk-rail-head .eyebrow { position: static; transform: none; } }
.sokk-rail-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* no fill: the reference's buttons are transparent over the section's own --raise */
.sokk-rail-nav button {
	width: 34px; height: 34px; border: 1px solid var(--line); background: none;
	color: var(--ink); font-family: var(--mono); font-size: 13px;
}
.rail {
	display: grid; grid-auto-flow: column; grid-auto-columns: 220px; gap: clamp(12px, 1.5vw, 20px);
	overflow-x: auto; padding: 0 var(--gut) 6px; scroll-snap-type: x mandatory;
	margin-top: 26px; /* measured gap between the label row and the cards */
}
.rail > * { scroll-snap-align: start; }
/* the rail card is a plain button on the reference: no colourway cross-fade on hover */
.rail .sokk-card-alt { display: none; }

/* =========================================================== product card */
/* No horizontal padding on the grid: there the cell IS the card, so the tile runs the
   full column width (325px at 1440). In the rail the reference used an unstyled
   <button>, whose default 1px/6px padding insets the tile to 208px inside a 220px
   cell — so that inset belongs to the rail only. */
.sokk-card { display: block; color: inherit; position: relative; }
.rail .sokk-card { padding: 1px 6px; }
.sokk-card .tile { aspect-ratio: 4/5; }
/* the grid clips the media, as the reference's role=button wrapper round the tile does
   (it keeps the hover colourway's 1.03 zoom inside the column, and cuts the tile's glass
   shadow at its foot there too); the rail's <button> never clipped, so its tiles keep the
   0 18px 50px -28px shadow falling under them */
.sokk-card-media { position: relative; overflow: hidden; }
.rail .sokk-card-media { overflow: visible; }
/* the second colourway, revealed on hover — opacity is quick, the zoom is slow */
.sokk-card-alt {
	position: absolute; inset: 0; opacity: 0; transform: scale(1);
	transition: opacity .45s ease, transform 4s ease; pointer-events: none;
}
.sokk-card:hover .sokk-card-alt { opacity: 1; transform: scale(1.03); }
.sokk-card-alt .tile { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
@media (prefers-reduced-motion: reduce) {
	.sokk-card-alt { transition: opacity .2s ease; }
	.sokk-card:hover .sokk-card-alt { transform: none; }
}
/* the grid caption, measured off the reference's ProductCard: a 13px gap under the tile,
   name and price top-aligned (both start on the same y), and every mono line at its
   natural leading rather than the 1.6 the block roots carry */
.sokk-card-cap { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-top: 13px; }
.sokk-card-cap.is-rail { align-items: flex-start; padding-top: 12px; }
/* the name column once the colour sub-line moves in beside the price (inc/helpers.php) */
.sokk-card-col { display: block; min-width: 0; }
.sokk-card-lines { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sokk-card-lines .eyebrow { font-size: 9.5px; letter-spacing: .14em; }
.sokk-card-name { display: block; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.sokk-card-price { font-family: var(--mono); font-size: 13px; letter-spacing: .02em; line-height: normal; flex: none; color: var(--ink); white-space: nowrap; }
/* block, so its own 11px `normal` line box sizes the sub-line instead of the scope's 22.4px strut */
.sokk-card-meta { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .03em; line-height: normal; color: var(--muted); padding-top: 4px; }
/* 18px chips (the base size) 7px apart, 11px under the sub-line */
.sokk-card-chips { display: flex; gap: 7px; padding-top: 11px; }
.sokk-card-chips .chip { cursor: default; }
/* the New Arrivals rail caption is its own recipe: category label 10px/.1em, a 13.5px
   medium name on a tight leading, and a 12.5px price */
.rail .sokk-card-lines { gap: 4px; }
.rail .sokk-card-lines .eyebrow { font-size: 10px; letter-spacing: .1em; }
.rail .sokk-card-name { font-size: 13.5px; font-weight: 500; line-height: 1.25; letter-spacing: 0; }
.rail .sokk-card-price { font-size: 12.5px; letter-spacing: .02em; line-height: normal; }
/* ------------------------------------------------------------ quick add */
.sokk-card-quick {
	position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 5;
	opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s;
	pointer-events: none;
}
/* only where a pointer can actually hover — on touch there is nothing to reveal it */
@media (hover: hover) {
	.sokk-card:hover .sokk-card-quick,
	.sokk-card-quick:focus-within { opacity: 1; transform: none; pointer-events: auto; }
}
/* the strip is the page ground (--bg), not --raise: 36px tall at rest, 38 for "Sold out" */
.sokk-quick-open {
	display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px;
	padding: 11px 14px; line-height: normal; border: 0; cursor: pointer;
	background: var(--bg); color: var(--ink);
	font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.sokk-card-soldout .sokk-quick-open { padding: 12px 14px; }
.sokk-quick-plus { transition: transform .25s; }
.sokk-card-quick[data-open="true"] .sokk-quick-plus { transform: rotate(45deg); }
/* Opened, the reference REPLACES the strip with a size panel (padding 9px 10px): a
   'Select size' / ✕ header row and five plain square buttons — not the glass .size-pill.
   .sokk-quick-panel / .sokk-quick-size are the markup inc/helpers.php renders for it; the
   .sokk-quick-sizes + .size-pill.sm rules below it keep the older markup working. */
.sokk-card-quick[data-open="true"] .sokk-quick-open { display: none; }
.sokk-quick-panel { padding: 9px 10px; background: var(--bg); }
.sokk-quick-panel[hidden] { display: none; }
.sokk-quick-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding-inline: 2px; }
/* natural leading: the .sokk-plp root's 1.6 would stretch the 9.5px label to a 15px line
   box and float it 2px above the ✕ (the reference's span is a 12px line at the row's middle) */
.sokk-quick-panel-head span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; line-height: normal; color: var(--muted); }
.sokk-quick-panel-head button { font-family: var(--mono); font-size: 11px; color: var(--muted); background: none; border: 0; cursor: pointer; }
.sokk-quick-panel .sokk-quick-sizes { display: flex; gap: 5px; padding: 0; border: 0; background: none; }
.sokk-quick-size {
	flex: 1; height: 34px; font-family: var(--mono); font-size: 11px; letter-spacing: 0;
	border: 1px solid var(--line); border-radius: 0; background: var(--bg); color: var(--ink); cursor: pointer;
	transition: background .15s, color .15s;
}
.sokk-quick-size:hover:not([disabled]) { background: var(--ink); color: var(--bg); }
.sokk-quick-size[disabled] { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.sokk-quick-sizes { display: flex; gap: 6px; padding: 8px; background: var(--raise); border-top: 1px solid var(--line); }
.sokk-quick-sizes[hidden] { display: none; }
.sokk-quick-sizes .size-pill.sm { flex: 1; min-width: 0; height: 34px; font-size: 11px; padding: 0 6px; }
/* 'Added ✓': centred on the same strip ground, the '+' gone */
.sokk-card-quick[data-done="true"] .sokk-quick-open { justify-content: center; padding: 12px 14px; background: var(--bg); color: var(--ink); }
.sokk-card-quick[data-done="true"] .sokk-quick-plus { display: none; }

/* the tag badge sits on the page ground (--bg), 12px in, 21px tall at its natural leading */
.sokk-badge {
	position: absolute; top: 12px; left: 12px; z-index: 5;
	font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; line-height: normal;
	background: var(--bg); color: var(--ink); padding: 4px 8px;
}
/* 32px hit box, 17px heart with the reference's drop shadow so it reads on a pale tile */
.sokk-wish {
	position: absolute; top: 8px; right: 8px; z-index: 6;
	width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;
	background: transparent; border: 0; color: var(--ink); cursor: pointer;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); transition: transform .15s;
}
.sokk-wish svg { width: 17px; height: 17px; }
.sokk-wish[data-on="true"] svg { fill: currentColor; }
.sokk-soldout {
	position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,.28); color: #fff;
	font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}

/* =================================================== product listing (PLP) */
/* head section 56px / 22px at 1440 (28 / 22 on a phone), grid section 120px under */
.sokk-plp { padding-block: clamp(28px, 4vw, 56px) clamp(56px, 8vw, 120px); }
.sokk-plp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 22px; }
/* Children size to their text, not to the column. On the reference the heading box is
   exactly as wide as "EVERY SOCK" (705px at 1440); stretching it let the blurb beside
   it squeeze the words onto three lines at 768. */
.sokk-plp-title { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
/* the reference's eyebrow is an inline span in a 17px line box, which is what puts the
   h1 31px below the section's content edge */
.sokk-plp-title .eyebrow { line-height: 17px; }
.sokk-plp-title .display {
	font-size: clamp(40px, 8vw, 112px); line-height: .92; letter-spacing: -.025em;
	text-transform: uppercase; font-weight: 700; margin: 0;
}
/* 320px wide and flush with the h1's bottom edge; the reference keeps 320 on phones too */
.sokk-plp-blurb { max-width: 320px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* The toolbar band: sticky under the 64px header bar, frosted 88% of the page ground,
   hairlines top and bottom, 58px min-height (60 with the borders). The chip group wraps
   and the control group drops to its own line on a phone, exactly as the reference's
   flex-wrap row does — no column stacking needed. `top` equals the chrome's stuck
   height: the prototype pins only its 64px bar (the announcement bar scrolls away), and
   so does ours once header.elementor-location-header sticks with its negative top. */
.sokk-plp-bar {
	position: sticky; top: 64px; z-index: 20;
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
	gap: 16px; min-height: 60px; padding-block: 10px; /* 58 + the two hairlines (border-box) */
}
/* .sokk-plp-bar is the .wrap (max-width 1480), so above 1480 the frost and borders stop at
   the wrap edge. Once the toolbar renderers wrap it in .sokk-plp-band the band carries the
   sticky / frost / borders full-bleed and the bar inside is a plain row. */
.sokk-plp-band {
	position: sticky; top: 64px; z-index: 20;
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.sokk-plp-band .sokk-plp-bar { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; min-height: 58px; }
/* the category chips wrap inside the band instead of scrolling off the phone edge */
.sokk-plp-bar .sokk-chips { flex: 1 1 auto; flex-wrap: wrap; overflow: visible; }
/* the grid sits 28px under the band (the reference's grid-section padding-top); the
   :has() form finds the grid wrap whether or not inc/archive.php has classed it yet */
.sokk-plp-grid, .sokk-plp > .wrap:has(> .pgrid, > .sokk-plp-empty) { padding-top: 28px; }
.sokk-chips { display: flex; gap: 8px; overflow-x: auto; }
/* category chips: 12px/.06em on their natural leading (36px tall), transparent with the
   --line hairline in both states, ink text; active inverts to ink/bg and keeps the --line
   border. No hover state — the reference has none. */
.sokk-chip {
	flex: none; padding: 9px 16px; border: 1px solid var(--line); background: transparent;
	font-family: var(--mono); font-size: 12px; line-height: normal; letter-spacing: .06em; text-transform: uppercase;
	color: var(--ink); white-space: nowrap; transition: .2s;
}
.sokk-chip[data-on="true"] { background: var(--ink); color: var(--bg); }
/* measured off the reference: .06em tracking, room for the drawn caret on the right */
.sokk-sort-wrap { position: relative; display: inline-block; }
.sokk-sort select {
	appearance: none; -webkit-appearance: none;
	border-radius: 0; border: 1px solid var(--line); background: var(--raise); color: var(--ink);
	font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
	padding: 9px 30px 9px 14px; cursor: pointer;
}
.sokk-sort-caret {
	position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
	pointer-events: none; font-size: 10px;
}
/* ------------------------------------------------------- filter drawer */
.sokk-plp-controls { display: flex; align-items: center; gap: 12px; flex: none; }
/* Filter: an ink-bordered transparent button, 11px/.06em on its natural leading (34px
   tall); the count is plain text inside the label — 'Filter (2) +' */
.sokk-filter-btn {
	display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px;
	border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer;
	font-family: var(--mono); font-size: 11px; line-height: normal; letter-spacing: .06em; text-transform: uppercase;
}
/* the count span the older toolbar markup still prints: plain text, parenthesised */
.sokk-filter-count { display: inline; font: inherit; letter-spacing: inherit; background: none; color: inherit; padding: 0; }
.sokk-filter-count::before { content: "("; }
.sokk-filter-count::after { content: ")"; }
/* the '+' turns 45° while the drawer is open. The drawer is printed in wp_footer, after
   the toolbar's ancestors, so a sibling combinator never reaches the button: key off the
   open drawer from <body>, or off the data-open sokk.js mirrors onto the opener. */
.sokk-filter-plus { transition: transform .2s; }
body:has(#sokk-filter-panel[data-open="true"]) .sokk-filter-plus,
.sokk-filter-btn[data-open="true"] .sokk-filter-plus { transform: rotate(45deg); }

/* the drawer: 92% up to 400px, a --line hairline on its left edge, .4s slide */
#sokk-filter-panel { background: rgba(0,0,0,.4); }
#sokk-filter-panel .sokk-panel-body { width: min(400px, 92%); border-left: 1px solid var(--line); transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.sokk-filter-groups { flex: 1; overflow-y: auto; padding: 22px var(--gut); display: flex; flex-direction: column; gap: 28px; }
.sokk-filter-group { display: flex; flex-direction: column; gap: 14px; }
.sokk-filter-group .sokk-chips { flex-wrap: wrap; overflow: visible; }
/* option pills are a size down from the category chips: 11.5px/.05em, 8px 14px (33px tall) */
.sokk-filter-group .sokk-chip { font-size: 11.5px; letter-spacing: .05em; padding: 8px 14px; line-height: normal; background: transparent; color: var(--ink); border-color: var(--line); }
.sokk-filter-group .sokk-chip[data-on="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
/* footer: Clear (a ghost .btn, only with active filters) LEFT of 'Show N styles' in one row */
.sokk-filter-foot { padding: 16px var(--gut) 20px; border-top: 1px solid var(--line); display: flex; flex-direction: row; align-items: center; gap: 10px; }
.sokk-filter-clear { flex: none; }
@media (max-width: 900px) { .sokk-plp-controls { justify-content: space-between; } }

/* 'Showing N of M styles': 18px under the grid, natural leading, .02em */
/* the (rare) server swap of the grid on a filtered landing: dim while the new cards arrive */
.sokk-plp-grid[aria-busy="true"] { opacity: .5; transition: opacity .15s; }
.sokk-plp-count {
	text-align: center; padding: 0; margin: 18px 0 11px;
	font-family: var(--mono); font-size: 11px; letter-spacing: .02em; line-height: normal; color: var(--muted);
}
/* 'No matches.' at 28px with a ghost .sm button 14px under it, 60px of air above and below */
.sokk-plp-empty { text-align: center; padding: 60px 0; display: flex; flex-direction: column; align-items: center; gap: 0; color: var(--muted); }
.sokk-plp-empty .display { font-size: 28px; line-height: .92; letter-spacing: -.025em; text-transform: uppercase; font-weight: 700; margin: 0; color: var(--ink); }
.sokk-plp-empty p { margin: 0; color: var(--muted); font-size: 14px; }
.sokk-plp-empty .btn { margin-top: 14px; }

/* ------------------------------------------------------------- wishlist
   Values measured off the reference's #/wishlist. The count sits where the
   collection page keeps its blurb — bottom-aligned against the display title. */
.sokk-wish-count { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
/* the wishlist head is its own recipe on the reference: a 14px flex row under the eyebrow,
   112px display, the count's 16px line box flush with the h1's bottom edge */
.sokk-plp[data-sokk-wishlist-page] .sokk-plp-title { gap: 14px; }
.sokk-plp[data-sokk-wishlist-page] .sokk-plp-title .display { font-size: clamp(40px, 8vw, 112px); }
.sokk-plp[data-sokk-wishlist-page] .sokk-wish-count { margin: 0; line-height: normal; }
.sokk-wish-empty { text-align: center; padding: clamp(40px, 8vw, 90px) 0; }
.sokk-wish-empty[hidden] { display: none; }
.sokk-wish-empty svg { display: block; margin: 0 auto 18px; color: var(--faint); }
.sokk-wish-empty .display { font-size: clamp(24px, 3vw, 40px); margin: 0; }
.sokk-wish-hint { color: var(--muted); font-size: 14px; line-height: normal; margin: 8px 0 14px; }
.sokk-wish-empty .btn { margin-top: 22px; }
/* the reference hides the sort on phones only (its wrap is .hide-mob, 760px) */
@media (max-width: 760px) { .sokk-sort { display: none; } }

/* ============================================== product detail page (PDP) */
/* no page padding-bottom: the reviews / pairs sections carry their own 140px tails */
.sokk-pdp-page { padding-block: 18px 0; }
/* Breadcrumb, as the reference actually renders it: an 11px/.06em muted mono line whose
   'Home' and category crumbs are bare <button>s — UA 13.333px, no tracking, 1px 6px
   padding, the category capitalised — with literal ' / ' separators and the product name
   in ink. Nothing is uppercased. */
.sokk-crumbs { display: flex; align-items: baseline; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; line-height: normal; text-transform: none; color: var(--muted); padding-bottom: 18px; }
.sokk-crumbs a { color: inherit; font-size: 13.333px; letter-spacing: normal; padding: 1px 6px; line-height: normal; }
.sokk-crumbs a:nth-of-type(2) { text-transform: capitalize; }
.sokk-crumbs > span:last-child { color: var(--ink); }
.sokk-crumbs a:hover { color: var(--ink); }

/* the reference splits 814 / 488 at 1440 with a 4vw gap — the gallery is markedly
   wider than the info column, not the even split it looks like at a glance */
.pdp { display: grid; grid-template-columns: 1.668fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
/* the gallery slide is a 4/5 letterbox in --line with square corners that clips the
   rounded, shadowed tile inside it (so the shadow never shows under the gallery) */
.pdp-media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--line); }
.pdp-media .tile { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
/* The gallery rail only renders once a product has real gallery images. The rail is
   an inner element on purpose — sokk-base.css carries a dead column-reverse rule for
   .pdp-gallery below 560px, so the gallery itself must stay a block box. The counter
   pins to the gallery, and base only styles the rail/slides inside its phone query. */
.pdp-gallery { position: relative; }
.pdp-media-rail { display: flex; flex-direction: column; gap: 12px; }
.pdp-slide-media img, .pdp-slide-media video { width: 100%; display: block; }
/* width comes from the grid column now (488px at 1440) — an extra max-width here just
   made the info block narrower than the reference's */
/* The column is a plain block with the reference's per-block margins (badge → h1 10,
   → price 12, → rating 12, → blurb 20, → Colour 28, → Size 26, → hint 10, → actions 24,
   → trust 16, → accordions 30), not a uniform flex gap — a flex gap kept an empty hint's
   slot and put the same 14px between blocks the reference spaces from 10 to 30. */
.pdp-info { position: sticky; top: 84px; display: block; }
/* sokk/pdp-info's "Follows the page as it scrolls: Never". Two classes beat one, so this wins
   over the rule above without !important; the phone breakpoints below and in sokk-base.css
   already force static and are unaffected. */
.pdp-info.is-static { position: static; }
/* the tag badge is ink on the reference (inline colour); the field-head eyebrows stay muted.
   There it is an inline span on the column's 16px strut — a 17px line box with the 11px text
   3px down — where the 14px root here gave a 15px one and sat the h1 / price / rating 2px high */
.pdp-info > .eyebrow { display: block; padding-top: 3px; color: var(--ink); }
.pdp-info .display { font-size: clamp(34px, 4.5vw, 60px); line-height: .92; letter-spacing: -.025em; text-transform: uppercase; font-weight: 700; margin: 10px 0 0; }
.pdp-price-row { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.pdp-price { font-family: var(--mono); font-size: 18px; letter-spacing: .02em; line-height: normal; color: var(--ink); }
.pdp-denier { font-size: 11px; letter-spacing: .02em; line-height: normal; color: var(--muted); }
/* '3-Pack' beside the price: a bordered mono chip (inc/single-product.php .pdp-pack) */
.pdp-pack { font-size: 11px; letter-spacing: .02em; line-height: normal; color: var(--muted); border: 1px solid var(--line); padding: 3px 8px; }
/* the reference's rating is a <button>: its UA 1px 6px padding insets the stars 6px */
/* block-level like the reference's flex <button> (shrink-wrapped): inline-flex sat the 17px row
   in an anonymous line box 2px taller, pushing the blurb down by that much */
.pdp-rating { display: flex; width: fit-content; align-items: center; gap: 8px; padding: 1px 6px; margin-top: 12px; }
.pdp-rating .mono { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.pdp-blurb { margin: 20px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
/* 2.18.0 Good for / Not for (inc/single-product.php sokk_pdp_fit_html): printed only while the
   switch is on and the product has a line. pdp-suits-*, not pdp-fit (the review fit verdict's).
   Logical properties only, so RTL needs no rule of its own; the label never takes a colon. */
.pdp-suits { margin: 14px 0 0; display: grid; gap: 6px; }
.pdp-suits-line { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--muted); }
.pdp-suits-icon { flex: none; margin-top: 3.5px; color: var(--ink); }
.pdp-suits-label { flex: none; min-width: 5.5em; font-family: var(--mono); font-size: 11px; line-height: 21px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
[dir="rtl"] .pdp-suits-label { letter-spacing: 0; } /* spacing would break the joins of Arabic script */
.pdp-suits-body { min-width: 0; overflow-wrap: anywhere; }
.pdp-suits-alt { margin-inline-start: .6em; }
.pdp-suits-alt a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
/* off canvas sokk-scope.css (c) takes every SOKK link's underline away at (1,1,2); this one keeps it */
html body:not(.sokk-canvas) .pdp-suits-alt :is(#sokk-tiebreak, a) { text-decoration: underline; }

.pdp-field { display: block; padding-top: 0; margin-top: 28px; }
.pdp-field + .pdp-field { margin-top: 26px; }
.pdp-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pdp-field-head .mono { font-size: 11px; letter-spacing: .02em; color: var(--muted); }
.pdp-field-head .link-u { font-size: 11px; color: var(--muted); }
.pdp-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pdp-chips .chip { width: 28px; height: 28px; }
.pdp-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
/* the reference dims and strikes a sold-out size rather than drawing over it */
.size-pill[disabled], .size-pill[data-stock="false"] {
	opacity: .4; text-decoration: line-through; cursor: not-allowed;
}
/* the reference removes the hint from the DOM once a size is picked; an emptied one
   here must not keep its slot */
.pdp-hint { font-size: 11px; letter-spacing: .02em; color: var(--faint); margin: 10px 0 0; }
.pdp-hint:empty { display: none; }
.pdp-hint[data-error="true"] { color: var(--accent); }
.pdp-hint.is-out { color: var(--muted); }

.pdp-actions { display: flex; gap: 10px; align-items: stretch; padding-top: 0; margin-top: 24px; }
.pdp-actions .btn { flex: 1; }
.pdp-actions .btn[data-done="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.pdp-wish {
	position: static; width: 54px; height: auto; flex: none;
	border: 1px solid var(--ink); background: transparent; color: var(--ink);
	display: flex; align-items: center; justify-content: center;
	transition: background .2s, color .2s;
	/* the card heart's drop shadow (above) would draw a dark rim around this bordered
	   square — the reference's PDP button carries none */
	filter: none;
}
.pdp-wish[data-on="true"] { background: var(--ink); color: var(--bg); }
/* the ported glass rules key off the reference's aria-label="wishlist"; ours is the
   more descriptive "Add to wishlist", so alias the class into the same treatment */
html[data-glass="1"] .pdp-wish {
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.32)) !important;
	-webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%);
	border: 1px solid rgba(255,255,255,.7) !important;
	box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 22px -12px rgba(30,50,90,.35);
}
html[data-glass="1"] .pdp-wish[data-on="true"] {
	background: linear-gradient(180deg, #3a93ff, #0071e3) !important;
	border-color: rgba(255,255,255,.4) !important;
	box-shadow: 0 6px 16px -6px rgba(0,113,227,.7);
	color: #fff !important;
}
.pdp-wish svg { width: 18px; height: 18px; }
.pdp-restock { display: flex; gap: 10px; margin-top: 10px; }
.pdp-restock[hidden] { display: none; }
.pdp-restock input {
	flex: 1; background: var(--raise); border: 1px solid var(--line); padding: 12px 14px;
	font-family: var(--mono); font-size: 12px; color: var(--ink); outline: none;
}
/* no flex-wrap: at 390 the reference's three spans shrink and wrap inside themselves */
.pdp-trust { display: flex; gap: 18px; margin-top: 16px; color: var(--muted); }
.pdp-trust .mono { font-size: 10px; letter-spacing: .05em; }

/* ------------------------------------------------ optional selling aids
   None of these render unless the shop switches them on under
   WooCommerce → Settings → SOKK → Conversion, so the default storefront is
   unchanged from the design it was built against. */
.pdp-bundle { display: flex; align-items: baseline; gap: 8px; font-size: 11px; letter-spacing: .04em; color: var(--ink); margin: 0; }
.pdp-bundle span { color: var(--faint); }
.pdp-bundle[hidden] { display: none; } /* r291: sokk.js hides it while a pre-order size that earns no bundle discount is chosen */
.pdp-taxline { font-size: 10px; letter-spacing: .05em; color: var(--muted); margin: 0; }
.pdp-fit { display: flex; align-items: baseline; gap: 8px; font-size: 11px; letter-spacing: .04em; color: var(--ink); margin: 0; }
.pdp-fit span { color: var(--faint); }

/* ------------------------------------- opt-in only: every selector below is a class
   the render emits ONLY once a merchant sets the matching block attribute, so none of
   them can reach a default page. Shipping the knob without the rule ships a broken knob,
   which is why they land with the knob rather than after it. */
.pdp-price-was { font-size: 11px; color: var(--muted); }
.pdp-price-unit { font-size: 11px; color: var(--muted); }
.pdp-chips .chip-round { border-radius: 50%; }
.pdp-chips .chip-square { border-radius: 2px; }
.pdp-note { color: var(--muted); font-size: 11px; margin: 8px 0 0; }
.pdp-qty {
	width: 62px; border: 1px solid var(--line); background: transparent; color: inherit;
	text-align: center; font: inherit;
}
.pdp-restock { flex-wrap: wrap; }
.pdp-restock-consent {
	flex: 1 0 100%; display: flex; align-items: center; gap: 8px;
	font-size: 11px; color: var(--muted); order: 1;
}
.pdp-restock-consent input { width: auto; }
/* sokk/pdp-restock introText: a line above the email field. order:-1 puts it over the
   row rather than beside it, the way .pdp-restock-consent order:1 puts itself under. */
.pdp-restock-intro { flex: 1 0 100%; order: -1; margin: 0; font-size: 11px; color: var(--muted); }

/* ------------------------------------------------ contract A.10, the three rules no
   other ledger claimed. Same discipline as the block above: every selector names a class
   the render emits only once a merchant sets the matching attribute, or a track rule
   whose default rendering is unchanged. */

/* sokk/pdp-price-row's `prefix` and `suffix` — emitted only when non-empty */
.pdp-price-prefix, .pdp-price-suffix { font-size: 11px; color: var(--muted); }

/* sokk/pdp-grid's allowedBlocks is wider than gallery + info (contract C.2). Anything
   else dropped in becomes a full-width row under the two cells rather than being squeezed
   into a 1.668fr/1fr track it was never sized for. The shipped tree has exactly two
   children, both named in the :not(), so this rule matches nothing on a default page. */
.pdp > :not(.pdp-gallery):not(.pdp-info) { grid-column: 1 / -1; }

/* sokk/pdp-grid emits `is-single` when it has exactly one rendered child, so the dead
   second column collapses instead of leaving a gap. The shipped tree always has two, so
   the class never appears on a default page. */
.pdp.is-single { grid-template-columns: 1fr; }

/* the stacked variant, from sokk/pdp-trust's layout knob; absent by default */
.pdp-trust.is-column { flex-direction: column; gap: 8px; }

/* the knit close-up: scale the tile inside a clipped frame, so its gradients
   magnify with it rather than the whole box growing */
[data-pdp-zoom] { cursor: zoom-in; overflow: hidden; }
[data-pdp-zoom] .tile { transition: transform .45s cubic-bezier(.2,.7,.2,1); transform-origin: center; }
[data-pdp-zoom][data-zoomed="true"] { cursor: zoom-out; }
[data-pdp-zoom][data-zoomed="true"] .tile { transform: scale(2.6); }
@media (prefers-reduced-motion: reduce) {
	[data-pdp-zoom] .tile { transition: none; }
}

/* the multi-buy chip sits with the sizes but reads as an offer, not a size */
.sokk-quick-multi { min-width: 0; padding: 0 9px; border-color: var(--ink); background: var(--ink); color: var(--bg); }
.sokk-quick-multi:hover { background: transparent; color: var(--ink); }

/* clickable swatches need a pointer and a selected state; the decorative spans keep
   neither, so nothing changes when the setting is off */
.sokk-card-chips button.chip { cursor: pointer; padding: 0; }

/* accordions: a --line hairline above each panel only (none under the last), 16px rows,
   12px/.08em ink labels with a 16px ink '+' that turns 45° over .3s */
.pdp-accordions { display: flex; flex-direction: column; padding-top: 0; margin-top: 30px; }
.pdp-acc { border-top: 1px solid var(--line); }
.pdp-acc summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; cursor: pointer; list-style: none; }
.pdp-acc summary::-webkit-details-marker { display: none; }
.pdp-acc summary .eyebrow { font-size: 12px; letter-spacing: .08em; color: var(--ink); }
.pdp-acc-mark { font-family: var(--mono); font-size: 16px; color: var(--ink); line-height: normal; transition: transform .3s; }
.pdp-acc[open] .pdp-acc-mark { transform: rotate(45deg); }
.pdp-acc-body { padding-bottom: 18px; font-size: 14px; line-height: 1.6; color: var(--muted); }
/* the Material line's first sentence is ink on the reference (inc/single-product.php wraps it) */
.pdp-acc-ink { color: var(--ink); }

/* Pairs with: a 110px gap over the heading, a 140px tail under the cards; Reviews: a
   full-width hairline, 72px under it, the same 140px tail (the phone query below halves
   both). The heading row is centred, 48px display, a muted 'More everyday →' link. */
.sokk-pairs { padding-top: clamp(48px, 7vw, 110px); padding-bottom: clamp(56px, 9vw, 140px); }
/* Recently viewed: the LAST section, 90px of air both sides, a 44px heading; the rail is
   flush with the wrap (no gutter inset, no button padding) and its cards fill the row */
.sokk-recent { padding-block: clamp(40px, 6vw, 90px); }
.sokk-recent[hidden] { display: none; }
.sokk-recent .sokk-pairs-head { align-items: center; gap: 14px; padding-bottom: 24px; }
.sokk-recent .sokk-pairs-head .display, .sokk-recent .display { font-size: clamp(24px, 3.4vw, 44px); line-height: .92; }
.sokk-recent .link-u { color: var(--muted); padding: 1px 6px 3px; }
.sokk-recent .rail { grid-auto-columns: minmax(220px, 1fr); gap: clamp(12px, 1.5vw, 20px); padding: 0 0 6px; margin-top: 0; scroll-snap-type: x mandatory; }
.sokk-recent .rail .sokk-card { padding: 0; }
.sokk-pairs-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 26px; }
.sokk-pairs-head .display { font-size: clamp(26px, 4vw, 48px); line-height: .92; letter-spacing: -.025em; text-transform: uppercase; font-weight: 700; margin: 0; }
.sokk-pairs-head .link-u { color: var(--muted); padding: 1px 6px 3px; line-height: normal; }
/* Reviews summary: the h2 lives inside the 320px left column; under it a rating row of
   the 40px average beside stacked stars + count, then the histogram (24px labels, 4px bars) */
.sokk-reviews-grid { display: grid; grid-template-columns: 320px 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.sokk-reviews-summary { display: block; }
.sokk-reviews-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.sokk-reviews-avg { font-size: 40px; line-height: .92; font-weight: 700; letter-spacing: -.025em; text-transform: uppercase; }
.sokk-reviews-count { display: block; font-size: 11px; letter-spacing: .02em; line-height: normal; color: var(--muted); margin-top: 4px; }
.sokk-reviews-bars { display: flex; flex-direction: column; gap: 7px; padding-top: 0; margin-top: 20px; }
.sokk-reviews-bar { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: center; font-size: 11px; line-height: normal; color: var(--muted); }
.sokk-bar { display: block; height: 4px; background: var(--line); }
.sokk-bar > span { display: block; height: 100%; background: var(--ink); }
.sokk-reviews-list { display: flex; flex-direction: column; }
/* every block closes with a hairline and the first opens with one: 5 lines for 4 reviews */
.sokk-review { border-bottom: 1px solid var(--line); padding: 20px 0; }
.sokk-review:first-child { border-top: 1px solid var(--line); }
.sokk-review-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* the reference's star: an outline with a solid copy clipped to the fraction earned,
   so 4.3 shows a partial fifth star instead of rounding */
.sokk-stars { display: inline-flex; gap: 2px; color: var(--ink); line-height: 0; }
.sokk-star { position: relative; display: inline-block; width: var(--star, 14px); height: var(--star, 14px); line-height: 0; }
.sokk-star svg { width: 100%; height: 100%; display: block; }
.sokk-star > span { position: absolute; inset: 0; overflow: hidden; }
.sokk-star > span svg { width: var(--star, 14px); height: var(--star, 14px); max-width: none; }
.sokk-review-fit { font-size: 10.5px; letter-spacing: .02em; line-height: normal; color: var(--faint); }
/* the scoped h3 rule (.92 leading, uppercase) leaks into the title otherwise */
.sokk-review-title { font-size: 15px; font-weight: 600; line-height: normal; letter-spacing: 0; text-transform: none; margin: 12px 0 0; }
.sokk-review-body { margin: 8px 0 10px; font-size: 14px; line-height: 1.6; color: var(--muted); }
/* the reference's byline is two bare 11px spans on the block's 16px strut: a 17px line with
   the text 3px down. The p is 11px itself, so pad its 14px line box to the same 17px. */
.sokk-review-by { margin: 0; padding-top: 3px; font-size: 11px; letter-spacing: .02em; line-height: normal; color: var(--ink); }
.sokk-review-by span { color: var(--faint); }
/* Slice 05: the tail regions became blocks, so the two review columns can now be
   reordered, and either can be deleted. A fixed `320px 1fr` grid renders both of those
   wrong — drag the cards above the summary and six review cards are crushed into 320px.
   Sizing the first track to its content and putting the width on the summary itself
   keeps the shipped rendering identical and survives every rearrangement. */
.sokk-reviews-grid { grid-template-columns: auto 1fr; }
.sokk-reviews-summary { width: 320px; }
.sokk-reviews-list { min-width: 0; }
/* the third track only exists when the count span does — a bare `auto` track would still
   cost the row one 10px gap and narrow the bars on every default page */
.sokk-reviews-bar:has(.sokk-reviews-barn) { grid-template-columns: 26px 1fr auto; }
.sokk-reviews-barn { text-align: right; }
.sokk-reviews-empty, .sokk-recent-empty, .sokk-reviews-more { font-size: 11px; letter-spacing: .06em; color: var(--muted); margin: 0; }
.sokk-reviews-cta { font-size: 11px; margin-left: 12px; }
/* the reference's .split2 collapses at 900 with a 32px gap */
@media (max-width: 900px) { .sokk-reviews-grid { grid-template-columns: 1fr; gap: 32px; } .sokk-reviews-summary { width: auto; } }

.sokk-reviews { border-top: 1px solid var(--line); padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(56px, 9vw, 140px); }
.sokk-reviews .display { font-size: clamp(26px, 2.8vw, 40px); line-height: .92; letter-spacing: -.025em; text-transform: uppercase; font-weight: 700; margin: 0; }
/* the h2 printed above the grid (older markup) keeps its 24px gap; inside the summary it has none */
.sokk-reviews > .wrap > .display, .sokk-reviews > .display { margin-bottom: 24px; }
@media (max-width: 900px) {
	.pdp { grid-template-columns: 1fr !important; }
	.pdp-info { position: static !important; }
}
/* the phone `.section` padding (clamp(40px,12vw,72px)) the reference applies to both tails */
@media (max-width: 760px) {
	.sokk-pairs { padding-top: 48px; padding-bottom: clamp(40px, 12vw, 72px); }
	.sokk-reviews { padding-bottom: clamp(40px, 12vw, 72px); }
}

/* ------------------------------------------- optional storefront review form
   Nothing below reaches a default page: the opener and the sheet only render once
   WooCommerce → Settings → SOKK → Reviews switches the form on (inc/reviews.php). The
   sheet takes the size-guide card's shape (#sokk-size-panel: 520px --raise card, 16px
   backdrop padding, mono head row over a 28px display title); the inputs are the
   restock field's (mono 12px on --raise inside a --line hairline) and the fit pills are
   the PDP's own .size-pill, so the form reads as the page it sits on. */
.sokk-review-notice { display: inline-block; margin-left: 12px; font-size: 11px; letter-spacing: .04em; color: var(--muted); }
#sokk-review-panel.sokk-sheet { align-items: center; justify-content: center; padding: 16px; }
#sokk-review-panel .sokk-panel-body {
	height: auto; max-height: calc(100vh - 32px); overflow: auto; width: 100%; max-width: 520px; margin: 0; padding: clamp(22px, 3vw, 34px);
	background: var(--raise); border: 1px solid var(--line); opacity: 1; transform: translateY(-14px); transition: transform .3s;
}
#sokk-review-panel[data-open="true"] .sokk-panel-body { transform: none; }
#sokk-review-panel .sokk-panel-head { padding: 0; border-bottom: 0; margin-bottom: 18px; }
#sokk-review-panel .sokk-panel-head button { color: var(--ink); font-size: 12px; padding: 1px 6px; }
.sokk-review-form-title { font-size: 28px; line-height: .92; letter-spacing: -.025em; text-transform: uppercase; font-weight: 700; margin: 0 0 8px; }
.sokk-review-form-product { margin: 0 0 20px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sokk-review-form { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; }
.sokk-review-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.sokk-review-form legend { padding: 0; }
.sokk-review-field { display: flex; flex-direction: column; gap: 7px; }
.sokk-review-field > .mono, .sokk-review-form legend.mono { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sokk-review-form input[type="text"], .sokk-review-form input[type="email"], .sokk-review-form textarea {
	width: 100%; background: var(--raise); border: 1px solid var(--line); border-radius: 0; padding: 12px 14px;
	font-family: var(--mono); font-size: 12px; color: var(--ink); outline: none; box-sizing: border-box;
}
.sokk-review-form input:focus, .sokk-review-form textarea:focus { border-color: var(--ink); }
.sokk-review-form textarea { min-height: 110px; resize: vertical; font-family: var(--sans); font-size: 14px; line-height: 1.5; }
.sokk-review-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* the star picker: five outline stars; the ones up to the chosen (or hovered) one fill */
.sokk-review-stars-row { display: flex; gap: 4px; line-height: 0; }
.sokk-review-star { position: relative; display: inline-block; width: 26px; height: 26px; cursor: pointer; color: var(--ink); }
.sokk-review-star input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sokk-review-star svg { width: 100%; height: 100%; display: block; }
.sokk-review-stars-pick[data-rating="1"] .sokk-review-star:nth-child(-n+1) svg,
.sokk-review-stars-pick[data-rating="2"] .sokk-review-star:nth-child(-n+2) svg,
.sokk-review-stars-pick[data-rating="3"] .sokk-review-star:nth-child(-n+3) svg,
.sokk-review-stars-pick[data-rating="4"] .sokk-review-star:nth-child(-n+4) svg,
.sokk-review-stars-pick[data-rating="5"] .sokk-review-star:nth-child(-n+5) svg { fill: currentColor; }
.sokk-review-stars-pick[data-hover] .sokk-review-star svg { fill: none; }
.sokk-review-stars-pick[data-hover="1"] .sokk-review-star:nth-child(-n+1) svg,
.sokk-review-stars-pick[data-hover="2"] .sokk-review-star:nth-child(-n+2) svg,
.sokk-review-stars-pick[data-hover="3"] .sokk-review-star:nth-child(-n+3) svg,
.sokk-review-stars-pick[data-hover="4"] .sokk-review-star:nth-child(-n+4) svg,
.sokk-review-stars-pick[data-hover="5"] .sokk-review-star:nth-child(-n+5) svg { fill: currentColor; }
.sokk-review-star:has(input:focus-visible) { outline: 1px solid var(--ink); outline-offset: 2px; }
/* the fit pills: a label wearing the PDP's .size-pill, lit by data-on like the size row */
.sokk-review-fit-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sokk-review-fit-pill { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px; cursor: pointer; font-size: 11px; }
.sokk-review-fit-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sokk-review-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.sokk-review-consent input { margin: 2px 0 0; width: auto; }
.sokk-review-form-msg { margin: 0; font-size: 11px; letter-spacing: .04em; color: var(--muted); }
.sokk-review-form-msg[data-ok="true"] { color: var(--ink); }
.sokk-review-form [hidden] { display: none; }
@media (max-width: 640px) { .sokk-review-form-row { grid-template-columns: 1fr; } #sokk-review-panel.sokk-sheet { padding: 16px; } }

/* ------------------------------------------------ review photos and videos
   Nothing here touches a card without media: the strip, the has-media class and the
   chip row only print for a review whose `sokk_media` meta names attachments
   (inc/reviews.php). The strip sits between the body and the byline — the body keeps
   its 10px bottom margin, the strip adds its own 12px below — 72px tiles with the
   product tiles' soft radius (scaled down from 22px on a 4:5 card to 8px here), a video
   tile shows its first frame under a play glyph. The lightbox is a fixed dark scrim
   above the sheets (z 300 → 320) with the panels' .35s fade. */
.sokk-review-media { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.sokk-review-thumb {
	position: relative; display: block; width: 72px; height: 72px; overflow: hidden; border-radius: 8px;
	background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
	transition: border-color .2s, transform .2s;
}
.sokk-review-thumb:hover { border-color: var(--ink); }
.sokk-review-thumb:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.sokk-review-thumb img, .sokk-review-thumb video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sokk-review-thumb video { background: #1d1d1f; pointer-events: none; }
.sokk-review-play {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
	color: #fff; background: rgba(0,0,0,.18);
}
.sokk-review-play svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
/* the chips: a mono row above the first card; the card below it opens with the hairline
   the :first-child rule would have drawn */
.sokk-reviews-filter { display: flex; align-items: center; gap: 10px; padding: 0 0 12px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.sokk-reviews-filter button { background: none; border: 0; padding: 0; margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--muted); cursor: pointer; }
.sokk-reviews-filter button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.sokk-reviews-filter + .sokk-review { border-top: 1px solid var(--line); }
.sokk-reviews-list[data-filter="media"] .sokk-review:not(.sokk-review-has-media) { display: none; }
.sokk-reviews-list[data-filter="media"] .sokk-review-has-media { border-top: 1px solid var(--line); margin-top: -1px; }
/* the lightbox */
.sokk-lightbox[hidden] { display: none; }
.sokk-lightbox {
	position: fixed; inset: 0; z-index: 320; display: flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,.88); opacity: 0; transition: opacity .35s ease; padding: 56px 64px;
}
.sokk-lightbox[data-open="true"] { opacity: 1; }
.sokk-lightbox-stage { margin: 0; max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; }
.sokk-lightbox-stage img, .sokk-lightbox-stage video {
	display: block; max-width: min(100%, 1200px); max-height: calc(100vh - 112px); width: auto; height: auto;
	object-fit: contain; border-radius: 10px; background: #000; box-shadow: 0 30px 90px -30px rgba(0,0,0,.8);
}
.sokk-lightbox-stage video { width: min(100%, 960px); }
.sokk-lightbox button { background: none; border: 0; color: #fff; cursor: pointer; padding: 0; }
.sokk-lightbox button:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }
.sokk-lightbox-close { position: absolute; top: 18px; right: 22px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 6px; opacity: .85; }
.sokk-lightbox-close:hover { opacity: 1; }
.sokk-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); }
.sokk-lightbox-nav:hover { background: rgba(255,255,255,.18); }
.sokk-lightbox-nav svg { width: 22px; height: 22px; }
.sokk-lightbox-nav[hidden] { display: none; }
.sokk-lightbox-prev { left: 14px; }
.sokk-lightbox-next { right: 14px; }
.sokk-lightbox-count { position: absolute; bottom: 18px; left: 0; right: 0; margin: 0; text-align: center; font-size: 11px; letter-spacing: .08em; color: rgba(255,255,255,.7); }
@media (max-width: 640px) {
	.sokk-lightbox { padding: 56px 8px; }
	.sokk-lightbox-stage img, .sokk-lightbox-stage video { max-height: calc(100vh - 120px); }
	.sokk-lightbox-nav { width: 38px; height: 38px; }
	.sokk-lightbox-prev { left: 6px; }
	.sokk-lightbox-next { right: 6px; }
}
/* the sheet's picker: preview tiles ahead of two dashed "add" tiles, the same 72px */
.sokk-review-media-opt { text-transform: none; letter-spacing: .02em; color: var(--faint); margin-left: 4px; }
.sokk-review-media-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.sokk-review-media-tile, .sokk-review-media-add {
	position: relative; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; box-sizing: border-box;
	background: var(--surface); border: 1px solid var(--line);
}
.sokk-review-media-tile img, .sokk-review-media-tile video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sokk-review-media-tile video { background: #1d1d1f; pointer-events: none; }
.sokk-review-media-remove {
	position: absolute; top: 0; right: 0; width: 20px; height: 20px; border: 0; padding: 0; cursor: pointer;
	background: rgba(0,0,0,.65); color: #fff; font-size: 11px; line-height: 20px; border-radius: 0 0 0 8px;
}
.sokk-review-media-add {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer;
	border-style: dashed; color: var(--muted); transition: border-color .2s, color .2s;
}
.sokk-review-media-add:hover, .sokk-review-media-add:has(input:focus-visible) { border-color: var(--ink); color: var(--ink); }
.sokk-review-media-add svg { width: 22px; height: 22px; }
.sokk-review-media-add .mono { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }
.sokk-review-media-add input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sokk-review-media-hint, .sokk-review-media-msg { margin: 0; font-size: 10.5px; letter-spacing: .02em; line-height: 1.5; color: var(--faint); }
.sokk-review-media-msg { color: var(--ink); }
.sokk-review-media-pick { gap: 8px; }
.sokk-review-progress { position: relative; height: 4px; background: var(--line); border-radius: 2px; overflow: visible; margin-top: 2px; }
.sokk-review-progress > span { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 2px; transition: width .2s; }
.sokk-review-progress > em { position: absolute; right: 0; top: 8px; font-style: normal; font-size: 10px; letter-spacing: .06em; color: var(--muted); }
.sokk-review-progress:not([hidden]) { margin-bottom: 14px; }

/* ---------------------------------------- the PDP in parts ([sokk_pdp part="…"])
   modules/elementor.php renders each region of the page above without the article frame,
   wrapped in .sokk-pdp-part.sokk-pdp-part-<part>, one Elementor Shortcode widget each
   (ref/TB-EDITABLE.md). The wrapper is the SOKK root the scoped sheets need in place of
   article.sokk-pdp-page (sokk-scope.css lists it with the frame's leading), and the rules
   below restate the buy-box rhythm that is written against .pdp-info's children — the
   values are the ones above, unchanged; every other margin already sits on the region
   itself (.pdp-price-row, .pdp-rating, .pdp-blurb, .pdp-field, .pdp-actions, .pdp-trust,
   .pdp-accordions) and collapses through the widget wrappers, which are plain blocks. */
.sokk-pdp-part-badge > .eyebrow { display: block; padding-top: 3px; color: var(--ink); }
.sokk-pdp-part-title .display { font-size: clamp(34px, 4.5vw, 60px); line-height: .92; letter-spacing: -.025em; text-transform: uppercase; font-weight: 700; margin: 10px 0 0; }
/* Size right after Colour: `.pdp-field + .pdp-field`'s 26px, across the two widgets */
.elementor-widget-shortcode:has(.sokk-pdp-part-colour > .pdp-field) + .elementor-widget-shortcode .sokk-pdp-part-size > .pdp-field { margin-top: 26px; }
/* Elementor's own widget spacing (.elementor-widget:not(:last-child), the kit's "space between
   widgets") and widget width must not add to the rhythm or narrow a part */
.elementor-widget-shortcode:has(> .elementor-shortcode > .sokk-pdp-part),
.elementor-widget-shortcode:has(> .elementor-shortcode > .sokk-plp-part),
.elementor-widget-shortcode:has(> .elementor-widget-container > .elementor-shortcode > .sokk-pdp-part),
.elementor-widget-shortcode:has(> .elementor-widget-container > .elementor-shortcode > .sokk-plp-part) { margin: 0; max-width: 100%; }

/* --------------------------------------- the listing in parts ([sokk_plp part="…"])
   head / toolbar / grid render outside section.sokk-plp, each in .sokk-plp-part.sokk-plp-
   part-<part> — the SOKK root in its place (sokk-scope.css gives it the section's 14px/1.6).
   The section's padding-block (.sokk-plp above) is the composition container's, not a
   part's: the archive template's outer section carries it (ref/TB-EDITABLE.md), so no part
   adds air of its own. The toolbar band keeps its own sticky / frost / hairline rules. */
/* position:sticky is bounded by the containing block, which for a widget is the widget's own
   box — the band could never leave it. Outside the editor the toolbar's wrappers therefore
   generate no box (display:contents), so the band sticks within the container that holds
   the toolbar AND the grid, as it sticks within section.sokk-plp on the block route. */
body:not(.elementor-editor-active) .sokk-plp-part-toolbar,
body:not(.elementor-editor-active) .elementor-widget-shortcode:has(> .elementor-shortcode > .sokk-plp-part-toolbar),
body:not(.elementor-editor-active) .elementor-widget-shortcode:has(> .elementor-shortcode > .sokk-plp-part-toolbar) > .elementor-shortcode,
body:not(.elementor-editor-active) .elementor-widget-shortcode:has(> .elementor-widget-container > .elementor-shortcode > .sokk-plp-part-toolbar),
body:not(.elementor-editor-active) .elementor-widget-shortcode:has(> .elementor-widget-container > .elementor-shortcode > .sokk-plp-part-toolbar) > .elementor-widget-container,
body:not(.elementor-editor-active) .elementor-widget-shortcode:has(> .elementor-widget-container > .elementor-shortcode > .sokk-plp-part-toolbar) > .elementor-widget-container > .elementor-shortcode { display: contents; }

/* ======================================================== editorial pages */
.sokk-page { padding-top: clamp(28px, 3vw, 48px); }
.sokk-page-head { display: flex; flex-direction: column; gap: 12px; padding-bottom: clamp(28px, 4vw, 56px); }
.sokk-page-head .display { font-size: clamp(44px, 8.9vw, 128px); line-height: .92; letter-spacing: -.025em; text-transform: uppercase; font-weight: 700; margin: 0; }
.sokk-page-intro { max-width: 560px; margin: 0; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; color: var(--muted); }
.sokk-page-body { padding-top: clamp(36px, 5vw, 72px); }
/* 3 columns at desktop, 2 at tablet, 1 on phones — the reference steps down rather
   than dropping straight to a single column, so auto-fit rather than a media query */
.sokk-page-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(24px, 3vw, 48px); }
.sokk-page-num { font-size: 11px; color: var(--muted); }
.sokk-page-block .display { font-size: 22px; line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; font-weight: 700; margin: 16px 0 14px; }
.sokk-page-block p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.sokk-faqs { max-width: 760px; }
.sokk-faq-q { font-size: 15px; letter-spacing: -.01em; }
.sokk-stores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); }
.sokk-store { background: var(--bg); padding: clamp(20px, 2.4vw, 34px); }
.sokk-store .display { font-size: 22px; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; font-weight: 700; margin: 0 0 10px; }
.sokk-store p { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.sokk-store-hours { font-size: 11.5px; letter-spacing: .04em; color: var(--faint); }
.sokk-contact { max-width: 520px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 900px) {
	.sokk-stores { grid-template-columns: 1fr; }
}

/* ============================================================= manifesto */
.sokk-manifesto { text-align: center; }
.sokk-manifesto h2 {
	font-size: clamp(26px, 2.6vw, 40px); line-height: 1.18; letter-spacing: -.02em;
	font-weight: 700; text-transform: uppercase; max-width: 900px; margin: 0 auto; text-wrap: balance;
}
.sokk-manifesto .btn { margin-top: 34px; }

/* ================================================================= footer */
/* top padding measured at 96px against the reference; the tail below the legal line
   is deeper than it looks — 108px, not the 40 I first assumed */
.sokk-footer { background: var(--footer-bg); color: #F5F5F7; padding-block: clamp(56px, 7vw, 96px) 98px; }
.sokk-footer a, .sokk-footer button { color: inherit; text-decoration: none; }
.sokk-footer-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; flex-wrap: wrap; padding-bottom: 56px; }
/* the reference's curve is not a plain vw: 40px at 390, 61 at 768, 104 at 1440 */
.sokk-footer-display {
	font-size: clamp(40px, calc(12px + 6.4vw), 104px); line-height: .92; letter-spacing: -.025em;
	text-transform: uppercase; font-weight: 700; margin: 0; color: #fff;
}
/* the column shrinks to its copy under a 340px cap (314.2px at 1440 — a fixed 314 was
   0.2px short and wrapped the one-line blurb onto two) */
.sokk-news { display: flex; flex-direction: column; gap: 16px; width: auto; max-width: 340px; }
.sokk-news .eyebrow { color: rgba(255,255,255,.6); }
.sokk-news p { font-size: 14px; line-height: 1.5; margin: 0; color: #F5F5F7; opacity: .8; }
.sokk-news form { display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.4); }
.sokk-news input {
	flex: 1; background: none; border: 0; color: #F5F5F7; padding: 10px 0;
	font-family: var(--mono); font-size: 13px; outline: none;
}
.sokk-news input::placeholder { color: rgba(255,255,255,.45); }
/* the arrow is a bare <button> on the reference: the UA's 1px 6px padding */
.sokk-news button { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; background: none; border: 0; padding: 1px 6px; cursor: pointer; }

.sokk-footer-cols { display: flex; flex-wrap: wrap; gap: 40px 80px; padding-top: 48px; }
.sokk-footer-col { display: flex; flex-direction: column; gap: 12px; }
.sokk-footer-col .eyebrow { color: rgba(255,255,255,.5); }
/* the reference renders these as buttons, whose 1px default padding shows up in the
   column height — match it so the block lines up */
.sokk-footer-col a { font-size: 14px; line-height: 1.35; color: rgba(255,255,255,.6); padding-block: 1px; }
.sokk-footer-col a:hover { color: #fff; }
.sokk-footer-col.is-index { margin-left: auto; }
.sokk-footer-col.is-index a { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); }

.sokk-footer-bar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 32px; margin-top: 40px; border-top: 1px solid rgba(255,255,255,.12); }
.sokk-footer-bar .eyebrow { color: rgba(255,255,255,.6); }
.sokk-region-btn {
	display: flex; align-items: center; gap: 9px; padding: 8px 13px;
	border: 1px solid rgba(255,255,255,.28); background: none; cursor: pointer;
	font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: rgba(255,255,255,.9);
	transition: border-color .2s;
}
.sokk-region-btn:hover { border-color: rgba(255,255,255,.7); }
.sokk-region-btn span { color: rgba(255,255,255,.55); }
/* The LANGUAGE select (a plugin addition, kept) is the Region button's twin: transparent,
   square, the same .28 hairline, mono 11.5px/.04em, 8px 13px, with a drawn caret in place
   of the UA arrow. --sokk-caret is shared with the glass exemption in sokk-base.css. The
   form and the select may shrink (min-width 0) so a long native name cannot push the
   footer bar past a 390px viewport. */
.sokk-lang {
	display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 100%;
	--sokk-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='rgba(255,255,255,.9)'/%3E%3C/svg%3E");
}
.sokk-lang .eyebrow { color: rgba(255,255,255,.6); }
.sokk-lang select {
	appearance: none; -webkit-appearance: none; border-radius: 0; min-width: 0; max-width: 100%;
	border: 1px solid rgba(255,255,255,.28); background: var(--sokk-caret) no-repeat right 12px center; color: rgba(255,255,255,.9);
	font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; line-height: normal; padding: 8px 30px 8px 13px; cursor: pointer;
	min-height: 33px; text-overflow: ellipsis; /* the Region button's 33px */
}
.sokk-lang select option { color: #1D1D1F; }
.sokk-theme { display: flex; align-items: center; gap: 16px; margin: 0 auto; }
.sokk-theme-chips { display: flex; align-items: center; gap: 10px; }
/* on the Elementor footer .sokk-theme stands alone (no .sokk-footer-bar), so its eyebrow
   and chips carry the dark-footer values themselves: a .6 white eyebrow, borderless 26px
   chips ringed by an inset .25 white hairline (a shadow, so the glass chip's own inset
   highlight / drop shadow is replaced rather than stacked), the selected one a 2px
   footer-ground gap inside a 3.5px .9 white ring. The glass chip rule in sokk-base.css is
   html[data-glass] .chip (0,2,1), so the same values are restated under that guard. */
.sokk-theme .eyebrow { color: rgba(255,255,255,.6); }
.sokk-theme-chips .chip, html[data-glass="1"] .sokk-theme-chips .chip { width: 26px; height: 26px; border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.sokk-theme-chips .chip[data-on="true"], html[data-glass="1"] .sokk-theme-chips .chip[data-on="true"] { box-shadow: 0 0 0 2px var(--footer-bg, #15151F), 0 0 0 3.5px rgba(255,255,255,.9); }
.sokk-palette-label { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: rgba(255,255,255,.5); }
/* margin, not padding — the reference's legal line is a bare 14px row */
.sokk-footer-legal { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 34px; font-family: var(--mono); font-size: 11px; line-height: normal; letter-spacing: .06em; color: rgba(255,255,255,.5); }
@media (max-width: 900px) {
	.sokk-theme { margin: 0; }
	.sokk-footer-col.is-index { margin-left: 0; }
}

/* ------------------------------------------------------- search sheet */
/* The full-width top sheet of the reference (.glass-sheet: x0 y0 w100% max-height 86vh),
   not a centred 460px card. Two classes on every selector, so these beat the equal-order
   generics for [data-sokk-panel] .sokk-panel-body / .sokk-sheet further down whichever
   prints first. Head row: a muted 'Search' eyebrow + ink 'Close ✕', 18px above the input
   row, which is a 22px magnifier + a 34px Archivo field over a 1.5px ink rule. */
.sokk-sheet.sokk-search { align-items: flex-start; justify-content: center; padding: 0; background: rgba(0,0,0,.4); }
.sokk-sheet.sokk-search .sokk-panel-body {
	margin: 0; width: 100%; max-width: none; height: auto; max-height: 86vh; border-radius: 0; overflow-y: auto;
	transform: translateY(-14px); opacity: 0; transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .01s;
	background: var(--raise);
}
.sokk-sheet.sokk-search[data-open="true"] .sokk-panel-body { transform: none; opacity: 1; }
.sokk-sheet.sokk-search .sokk-panel-body { border: 0; border-bottom: 1px solid var(--line); }
.sokk-sheet.sokk-search .sokk-panel-head { padding: 22px var(--gut) 0; border-bottom: 0; margin-bottom: 18px; }
.sokk-sheet.sokk-search .sokk-panel-head .display { font: 400 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sokk-search .sokk-panel-head button { color: var(--ink); }
.sokk-search-form { display: flex; align-items: center; gap: 14px; margin: 0 var(--gut); padding: 0 0 12px; border-bottom: 1.5px solid var(--ink); }
.sokk-search-form svg { width: 22px; height: 22px; color: var(--muted); flex: none; }
.sokk-search-form input {
	flex: 1; width: auto; border: 0; background: none; color: var(--ink);
	font-family: var(--sans); font-size: clamp(20px, 3vw, 34px); font-weight: 400; letter-spacing: 0; padding: 1px 2px; outline: none;
}
.sokk-search-form input::placeholder { color: var(--faint); }
/* type="search" for the phone keyboard, but the reference's field is a text input: no UA ✕ */
.sokk-search-form input::-webkit-search-cancel-button, .sokk-panel-intro input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
/* 'Popular' 26px under the rule, its chips 14px under that, wrapping, 10px apart */
.sokk-search-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 26px var(--gut) 0; }
.sokk-search-meta .eyebrow { letter-spacing: .1em; }
.sokk-search .sokk-chips { gap: 10px; flex-wrap: wrap; overflow: visible; }
.sokk-search .sokk-chip { font-size: 12px; letter-spacing: .05em; color: var(--ink); background: transparent; border: 1px solid var(--line); padding: 9px 16px; }
.sokk-search-results { padding: 0 var(--gut) 28px; overflow-y: auto; }
.sokk-search-results .pgrid { grid-template-columns: repeat(4, 1fr); }
.sokk-search-empty { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); padding-bottom: 20px; }
@media (max-width: 760px) { .sokk-search-results .pgrid { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------- mobile menu */
/* The reference's drawer: an 82% (max 360px) panel on the left over a .4 scrim, padded
   22px 16px as one column — a 22px logo + ink 'Close ✕' row with no divider (28px under
   it), the categories as 34px display rows over --line hairlines, no carets or sub-links,
   and the meta links pushed to the foot. The doubled class outranks the later generic
   [data-sokk-panel] .sokk-panel-body width. */
[data-sokk-panel].sokk-menu { background: rgba(0,0,0,.4); }
/* the reference's scrim carries the glass `header > div` blur, so the .68 panel body sits on a
   frosted page rather than showing the cards through it (this scrim has no filtered ancestor,
   so the blur takes effect here, unlike inside the bar) */
html[data-glass="1"] .sokk-menu { -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); }
.sokk-menu.sokk-menu .sokk-panel-body {
	width: 82%; max-width: 360px; margin: 0 auto 0 0; height: 100%; padding: 22px var(--gut); gap: 4px;
	transform: translateX(-100%); transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.sokk-menu[data-open="true"] .sokk-panel-body { transform: none; }
.sokk-menu .sokk-panel-head { padding: 0; border-bottom: 0; margin-bottom: 28px; }
.sokk-menu .sokk-logo { font-size: 22px; }
.sokk-menu .sokk-panel-head button { color: var(--ink); }
.sokk-menu-links { display: flex; flex-direction: column; padding: 0; }
.sokk-menu-links a, .sokk-menu-toggle {
	font-size: 34px; line-height: .92; font-weight: 700; letter-spacing: -.025em;
	text-transform: uppercase; padding: 10px 0; color: var(--ink);
}
.sokk-menu-links > a { border-bottom: 1px solid var(--line); }
.sokk-menu-links > a:last-child { border-bottom: 0; }
.sokk-menu-caret { display: none; }
.sokk-menu-meta { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding: 0; margin-top: auto; }
/* every row is a full-width button on the reference (UA 1px 6px 3px, text-align left), so
   the <a> rows here take the same inset and the text lines up at x22 */
.sokk-menu-meta .link-u { width: 100%; padding: 1px 6px 3px; text-align: left; color: var(--muted); background: none; border: 0; cursor: pointer; }

/* ------------------------------------------------------------ bag drawer */
/* The line list is the one flexible region of the drawer (flex:1). The min-height keeps
   it from collapsing under the fixed blocks around it — the curated set + Pairs well +
   footer once squeezed it to 32px — and the set block below is the one that gives way
   instead (it scrolls inside itself). 8px 40px padding, as on the reference. */
.sokk-cart-body { flex: 1 1 auto; min-height: 140px; overflow-y: auto; padding: 8px var(--gut); }
.sokk-cart-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.sokk-cart-line .tile { aspect-ratio: 4/5; }
.sokk-cart-name { font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.sokk-cart-attrs { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: var(--muted); padding-top: 4px; }
.sokk-cart-price { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
/* the empty state is centred: 'Empty.' at 26px, the line 14px around it, a ghost .sm button */
.sokk-cart-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; padding: 64px 0; color: var(--muted); }
.sokk-cart-empty .display { font-size: 26px; line-height: .92; letter-spacing: -.025em; text-transform: uppercase; font-weight: 700; margin: 0; color: var(--ink); }
.sokk-cart-empty p { margin: 14px 0; color: var(--muted); font-size: 14px; }
.sokk-cart-empty .btn { margin-top: 12px; }
.sokk-cart-loading { font-size: 12px; letter-spacing: .06em; color: var(--faint); }
/* `display:flex` outranks the UA rule for [hidden], so an empty bag kept showing
   its Checkout button. State the hidden case back. */
.sokk-cart-foot[hidden], .sokk-cart-notes[hidden] { display: none; }
/* The footer is the reference's 214px strip: bundle strip (or nudge) → Subtotal row →
   fine print → Checkout → Continue shopping, spaced by their own margins, not a flex gap. */
.sokk-cart-foot { flex: none; padding: 16px var(--gut) 22px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0; }
.sokk-cart-notes { display: flex; flex-direction: column; gap: 6px; font-size: 11px; letter-spacing: .04em; color: var(--muted); margin-bottom: 10px; }
.sokk-cart-win { color: var(--ink); }
.sokk-cart-sums { display: flex; flex-direction: column; gap: 5px; font-size: 12px; letter-spacing: .02em; color: var(--muted); margin-bottom: 8px; }
.sokk-cart-sums:empty { display: none; }
.sokk-cart-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sokk-cart-sum.is-off { color: var(--ink); }
/* '✓ Bundle · 3+ pairs   −$8': a --surface strip with a --line border, 8px above the total */
.sokk-bundle-strip { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 8px 11px; background: var(--surface); border: 1px solid var(--line); }
.sokk-bundle-strip[hidden] { display: none; }
.sokk-bundle-strip span:first-child { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.sokk-bundle-strip span:last-child { font-size: 12px; }
.sokk-bundle-nudge { font-size: 10.5px; color: var(--accent); letter-spacing: .02em; margin: 0 0 10px; }
.sokk-bundle-nudge[hidden] { display: none; }
.sokk-cart-total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 0; border-top: 0; margin-bottom: 4px; }
.sokk-cart-total .eyebrow, .sokk-cart-total-label { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; text-transform: none; color: var(--muted); }
.sokk-cart-total [data-cart-total] { font-size: 15px; }
.sokk-cart-fineprint { font-size: 10px; letter-spacing: .02em; color: var(--faint); margin: 0 0 14px; }
.sokk-cart-view { align-self: center; color: var(--muted); margin-top: 14px; padding: 1px 6px 3px; }

/* sokk-storefront: bag lines at reference parity (ref/spec/05 §CartLine) — tile or photo,
   name + "Bone · Size M" + line total, a − / qty / + stepper, Edit / Remove and the inline
   colour + size editor; the footer's "Checkout — $X" amount; the toast's tile and its
   "Pairs well" row. Drawn by renderCart / cartLineHtml / showToast in assets/js/sokk.js. */
/* align-items stretch: the main column fills the 72x90 tile's height, and its
   space-between pins the stepper row to the tile's foot (the generic rule above starts it) */
.sokk-cart-line[data-cart-line] { grid-template-columns: 72px 1fr; gap: 14px; padding: 16px 0; align-items: stretch; }
.sokk-cart-line[data-cart-line][hidden] { display: none; }
.sokk-cart-line[data-busy="true"] { opacity: .55; }
.sokk-cart-thumb .tile { aspect-ratio: 4/5; }
.sokk-cart-thumb .sokk-thumb-img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.sokk-cart-main { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.sokk-cart-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.sokk-cart-head { min-width: 0; }
.sokk-cart-line[data-cart-line] .sokk-cart-attrs { padding-top: 3px; }
.sokk-cart-note { font-size: 10px; letter-spacing: .04em; color: var(--faint); padding-top: 3px; }
.sokk-cart-note[hidden] { display: none; }
.sokk-cart-ctl { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.sokk-cart-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--line); }
.sokk-cart-qty button {
	width: 32px; height: 30px; background: none; border: 0; color: var(--ink); cursor: pointer;
	font-family: var(--mono); font-size: 13px; line-height: 1; display: grid; place-items: center;
}
.sokk-cart-qty button[disabled] { cursor: default; opacity: .5; }
.sokk-cart-qty span { width: 24px; text-align: center; font-size: 12px; align-self: center; }
.sokk-cart-links { display: flex; align-items: center; gap: 14px; }
/* Edit / Remove keep .link-u's own 10px/.1em and the UA button padding (1px 6px 3px) */
.sokk-cart-links .link-u { background: none; border: 0; cursor: pointer; font-size: 10px; color: var(--muted); }
/* the inline variant editor sits between the name row and the stepper (sokk.js orders it) */
.sokk-cart-editor { display: flex; flex-direction: column; gap: 9px; margin-top: 11px; }
.sokk-cart-editor[hidden] { display: none; }
.sokk-cart-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sokk-cart-chips .chip { width: 18px; height: 18px; cursor: pointer; padding: 0; }
.sokk-cart-sizes { display: flex; gap: 5px; }
/* plain square 28px buttons, not the glass .size-pill (.sokk-cart-size is what
   sokk.js paintLineEditor emits; the .size-pill line keeps the older markup working) */
.sokk-cart-sizes .size-pill { flex: 1; min-width: 0; height: 28px; font-size: 10.5px; padding: 0 4px; }
.sokk-cart-sizes .sokk-cart-size {
	flex: 1; min-width: 0; height: 28px; font: 10.5px var(--mono); border: 1px solid var(--line);
	background: var(--bg); color: var(--ink); border-radius: 0; padding: 0; cursor: pointer;
}
.sokk-cart-sizes .sokk-cart-size[data-on="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.sokk-cart-sizes .sokk-cart-size[disabled] { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.sokk-cart-sums[hidden] { display: none; }
/* toast row 1: tile | '✓ Added to bag' eyebrow, name, variant | ✕ — 14px 16px, a hairline
   under it (none when no Pairs well row follows) */
.sokk-toast-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.sokk-toast:has([data-toast-pairs][hidden]) .sokk-toast-row { border-bottom: 0; }
.sokk-toast-tile { width: 40px; flex: none; }
.sokk-toast-tile[hidden] { display: none; }
.sokk-toast-tile .tile { aspect-ratio: 4/5; }
.sokk-toast-tile .sokk-thumb-img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.sokk-toast-item { flex: 1; min-width: 0; display: block; }
.sokk-toast-item .eyebrow { display: block; font-size: 10px; letter-spacing: .1em; color: var(--muted); }
.sokk-toast [data-toast-close] { flex: none; background: none; border: 0; font-size: 12px; color: var(--muted); cursor: pointer; }
/* toast row 2, 'Pairs well': one 60px row, no divider, 30×38 thumb, 'name · price' on one
   line, a square 'Add' outline button; no swatches */
.sokk-toast-pairs { display: flex; flex-direction: column; gap: 0; padding: 11px 16px; border-top: 0; }
.sokk-toast-pairs[hidden] { display: none; }
.sokk-toast-pairs-head { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.sokk-toast .sokk-xs, .sokk-toast .sokk-xs:last-child { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; }
.sokk-toast .sokk-xs-title { flex: 1 1 0; min-width: 0; }
.sokk-toast .sokk-xs-media { width: 30px; height: 38px; }
.sokk-toast .sokk-xs-swatches, .sokk-toast .sokk-xs-meta { display: none; }
.sokk-toast .sokk-xs-name { font-size: 12.5px; font-weight: 400; }
.sokk-toast .sokk-xs-add { border-radius: 0; width: auto; height: auto; padding: 6px 10px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; align-self: center; }
.sokk-toast .sokk-xs-add:hover { background: transparent; color: var(--ink); }
/* the toast's picker spans the whole row (326px under tile, name and ✕, as measured on the
   reference: 61x28 buttons, 9px under the tile): the info column dissolves into the row
   (display: contents) so the size row can wrap under it as a full-width flex line */
.sokk-toast .sokk-xs { flex-wrap: wrap; row-gap: 0; }
.sokk-toast .sokk-xs-info { display: contents; }
.sokk-toast .sokk-xs-name { flex: 1 1 0; min-width: 0; }
.sokk-toast .sokk-xs-sizes { flex: 1 1 100%; order: 1; }
.sokk-toast .sokk-xs-sizes .size-pill, .sokk-toast .sokk-xs-size { height: 28px; }
.sokk-toast .sokk-xs-sizes .size-pill:hover:not([disabled]), .sokk-toast .sokk-xs-size:hover:not([disabled]) { --sokk-xs-bg: var(--bg); background: var(--bg); color: var(--ink); }
/* the full-bleed flat 'View bag' button (not a .btn, so no glass pill) */
.sokk-toast-view {
	display: block; width: 100%; padding: 13px; background: var(--ink); color: var(--bg);
	font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
	text-align: center; border: 0; border-radius: 0; text-decoration: none;
}

/* ------------------------------------------------ ladders (spend / bundle)
   One shape, two uses: a 2px rule with the milestones pinned on it at their own
   positions, so the bar stays correct when the shop changes the thresholds. */
/* `display` on a class beats the UA rule for [hidden]; state it back, or a hidden
   ladder stays laid out — the same trap that once left an invisible click shield
   over the whole page. */
.sokk-ladder[hidden], .sokk-giftwrap[hidden], .sokk-xs-sizes[hidden] { display: none; }
.sokk-ladder { display: flex; flex-direction: column; gap: 8px; }
/* the reward meter, at the reference's geometry: copy 10px over a 3px track (fill .45s),
   8px milestone dots (locked: page ground with an inset 1.5px --line ring; unlocked: ink),
   then a 9.5px label row 9px under the track — '✓ Free shipping' ink, the rest faint */
.sokk-ladder-reward { flex: none; padding: 14px var(--gut); border-bottom: 1px solid var(--line); gap: 0; }
.sokk-ladder-say { font-size: 11px; letter-spacing: .02em; color: var(--muted); margin: 0; }
.sokk-ladder-reward .sokk-ladder-say { margin: 0 0 10px; }
.sokk-ladder-say b { color: var(--ink); font-weight: 400; }
/* not `.sokk-bar` — that is the review distribution bar, and reusing it here
   quietly restyled every rating histogram on the site */
.sokk-ladder-bar { position: relative; height: 2px; background: var(--line); }
.sokk-ladder-reward .sokk-ladder-bar { height: 3px; }
.sokk-ladder-bar > span:first-child { display: block; height: 100%; background: var(--ink); transition: width .35s cubic-bezier(.22,1,.36,1); }
.sokk-ladder-reward .sokk-ladder-bar > span:first-child { transition: width .45s; }
.sokk-ladder-pins { position: absolute; inset: 0; pointer-events: none; }
.sokk-ladder-pins i {
	position: absolute; top: 50%; left: var(--pin, 0); width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
	border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1px var(--line);
}
.sokk-ladder-pins i[data-on="true"] { background: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.sokk-ladder-reward .sokk-ladder-pins i { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line); }
.sokk-ladder-reward .sokk-ladder-pins i[data-on="true"] { background: var(--ink); box-shadow: none; }
.sokk-reward-labels { display: flex; justify-content: space-between; margin-top: 9px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .03em; text-transform: uppercase; color: var(--faint); }
.sokk-reward-labels:empty { display: none; }
.sokk-reward-labels span[data-on="true"] { color: var(--ink); }
/* labels hang from their own pin; the two ends are pulled inside the track so the
   row never overflows the drawer */
.sokk-ladder-legend { position: relative; height: 12px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.sokk-ladder-legend span { position: absolute; top: 0; left: var(--pin, 0); transform: translateX(-50%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sokk-ladder-legend span[data-edge="first"] { transform: none; }
.sokk-ladder-legend span[data-edge="last"] { transform: translateX(-100%); }
.sokk-ladder-legend span[data-on="true"] { color: var(--ink); }
.sokk-ladder-bundle { gap: 7px; }
.sokk-ladder-bundle .eyebrow { font-size: 10px; }

/* ------------------------------------------------ 'Pairs well' + the curated set
   The reference's cross-sell block, measured: 13px 40px 2px over a hairline; head row
   4px over the rows — 'Pairs well' eyebrow + a faint 10px/.04em hint; each row 11px 0
   with a --line hairline under EVERY row (85px): a 50×62 thumb, a 13.5px medium name that
   ellipsises, 'White · $32' on one mono line, a 16px chip row 9px under, and a square
   'Add +' outline button (10.5px/.08em, 7px 12px) with no hover fill. The curated-set
   block (section.sokk-crosssell.sokk-cart-set, sokk.js renderCartSet) shares every one of
   these rules so it reads in the same language; being the drawer's one optional block it
   is also the one that gives way when the viewport is short — the 100× flex-shrink
   makes it absorb the squeeze first, down to its head + one row, and it scrolls inside
   itself rather than pushing the footer off-screen or crushing the line list. */
.sokk-crosssell { flex: none; padding: 13px var(--gut) 2px; border-top: 1px solid var(--line); }
.sokk-cart-set { flex: 0 100 auto; min-height: 96px; overflow-y: auto; }
.sokk-crosssell-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.sokk-crosssell-hint { font-size: 10px; letter-spacing: .04em; color: var(--faint); }
.sokk-xs { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--line); }
.sokk-xs:last-child { border-bottom: 1px solid var(--line); }
.sokk-xs-media { flex: none; display: block; width: 50px; height: 62px; position: relative; overflow: hidden; }
.sokk-xs-media .tile { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.sokk-xs-info { flex: 1; min-width: 0; display: block; }
.sokk-xs-name { display: block; font-size: 13.5px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sokk-xs-meta { display: block; margin-top: 2px; font-size: 11px; letter-spacing: .02em; color: var(--muted); }
/* the separator when the JS prints colour and price as bare spans */
.sokk-xs-meta > span + .sokk-xs-price::before { content: " · "; }
.sokk-xs-price { color: var(--muted); white-space: nowrap; }
.sokk-xs-price s { color: var(--faint); padding-left: 4px; }
.sokk-xs-swatches { display: flex; gap: 6px; margin-top: 9px; }
.sokk-xs-swatches .chip { width: 16px; height: 16px; }
/* open: the size row REPLACES the chip row (margin-top 9, gap 5, full width) - five flat
   square buttons (flex:1, 30px, mono 10.5px, --line hairline on the page ground, invert on
   hover), not the glass .size-pill. .sokk-xs-size is what sokk.js paintXsSizes emits; the
   .size-pill lines keep the older markup on the same footing. */
.sokk-xs-sizes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; padding: 0; }
.sokk-xs[data-open="true"] .sokk-xs-swatches { display: none; }
.sokk-xs-sizes .size-pill, .sokk-xs-size {
	flex: 1; min-width: 0; height: 30px; padding: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em; line-height: normal;
	border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 0; box-shadow: none;
	-webkit-backdrop-filter: none; backdrop-filter: none; cursor: pointer; transition: background .15s, color .15s;
}
/* --sokk-xs-bg carries the invert through the glass exemption in sokk-base.css */
.sokk-xs-sizes .size-pill:hover:not([disabled]), .sokk-xs-size:hover:not([disabled]) { --sokk-xs-bg: var(--ink); border-color: var(--line); background: var(--ink); color: var(--bg); }
.sokk-xs-sizes .size-pill[disabled], .sokk-xs-size[disabled] { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.sokk-xs-add {
	flex: none; align-self: flex-start; width: auto; height: auto; padding: 7px 12px;
	border: 1px solid var(--ink); background: transparent; color: var(--ink); border-radius: 0;
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; line-height: normal; cursor: pointer;
	display: grid; place-items: center; transition: background .2s ease, color .2s ease;
}
.sokk-xs-add:hover { background: transparent; color: var(--ink); }
/* open (size row shown): the control is a plain '✕' - 12px muted, no border, the UA 1px 6px */
.sokk-xs[data-open="true"] .sokk-xs-add { border: 0; padding: 1px 6px; background: transparent; color: var(--muted); font-size: 12px; letter-spacing: .02em; text-transform: none; }
/* ...and leaves the flow (top-right of the row, where it already sat), so the size row can
   run the full 298px under the name like the reference's; the toast keeps it inline */
.sokk-xs { position: relative; }
.sokk-xs[data-open="true"] .sokk-xs-add { position: absolute; top: 11px; right: 0; }
.sokk-toast .sokk-xs[data-open="true"] .sokk-xs-add { position: static; }
/* the curated set's '✓ in your bag' mark, in the Add button's slot */
.sokk-xs-done { flex: none; align-self: flex-start; width: 14px; padding: 7px 0; font-size: 13px; color: var(--ink); text-align: center; }
.sokk-cart-set-say { font-size: 10.5px; letter-spacing: .02em; color: var(--muted); margin: 10px 0 6px; }

/* ------------------------------------------------------------- gift wrap */
.sokk-giftwrap { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 11px; letter-spacing: .04em; }
.sokk-giftwrap input { width: 14px; height: 14px; accent-color: var(--ink); margin: 0; flex: none; }
.sokk-giftwrap-label { flex: 1; color: var(--ink); }
.sokk-giftwrap-price { color: var(--muted); white-space: nowrap; }

/* ---------------------------------------------------- newsletter modal */
/* The reference's .news-modal: a 720px two-column card centred in the viewport (16px
   backdrop padding) — a knit tile fills the left half (min-height 280), the copy column
   is padded 40px; ✕ ink at top 16 / right 18; 46px display 12px under the eyebrow; 14px
   copy 14px under; the form 20px under with 12px between its rows; 'No thanks' left-
   aligned 14px under the button. The doubled class outranks the sheet generics below. */
.sokk-sheet.sokk-news-modal { align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.5); }
.sokk-sheet.sokk-news-modal .sokk-panel-body {
	position: relative; margin: auto; width: 100%; max-width: 720px; height: auto; max-height: none;
	padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; background: var(--raise);
	transform: translateY(14px); opacity: 0;
	transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .25s;
}
.sokk-sheet.sokk-news-modal[data-open="true"] .sokk-panel-body { transform: none; opacity: 1; }
.sokk-news-tile { position: relative; min-height: 280px; }
.sokk-news-tile .tile { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; border-radius: 0; box-shadow: none; }
.sokk-news-copy { position: relative; padding: clamp(26px, 3vw, 40px); }
/* the older single-column markup (no tile / copy wrappers) keeps the same padding */
.sokk-sheet.sokk-news-modal .sokk-panel-body:not(:has(> .sokk-news-copy)) { grid-template-columns: 1fr; max-width: 420px; padding: clamp(26px, 3vw, 40px); }
.sokk-news-modal .display { font-size: clamp(30px, 4vw, 46px); line-height: .98; letter-spacing: -.025em; text-transform: uppercase; font-weight: 700; margin: 12px 0 0; }
.sokk-news-modal p { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.sokk-news-modal form { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; padding: 0; }
.sokk-news-modal input { border: 1px solid var(--line); background: var(--raise); color: var(--ink); padding: 13px 14px; font-family: var(--mono); font-size: 13px; }
.sokk-news-x { position: absolute; top: 16px; right: 18px; font-family: var(--mono); font-size: 13px; color: var(--ink); background: none; border: 0; cursor: pointer; }
.sokk-news-no { display: inline-block; align-self: flex-start; margin-top: 14px; color: var(--muted); background: none; border: 0; cursor: pointer; }
@media (max-width: 640px) { .sokk-sheet.sokk-news-modal .sokk-panel-body { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- size guide */
/* The reference's size-guide modal: a 520px card centred in the viewport (16px backdrop
   padding, auto height), 34px padding, --raise ground with a --line border even under
   glass. Head row 18px over the 28px 'Find your size' h2, 16px over the table: 13.5px
   Archivo cells, 10.5px bold mono headers over an INK rule, 12px 8px cells over --line
   rules with a 600 first column; the note 13px 16px under. The per-product chart content
   (modules/size-charts.php) sits inside untouched. */
#sokk-size-panel.sokk-sheet { align-items: center; justify-content: center; padding: 16px; }
#sokk-size-panel .sokk-panel-body {
	height: auto; max-height: none; width: 100%; max-width: 520px; margin: 0; padding: clamp(22px, 3vw, 34px);
	background: var(--raise); border: 1px solid var(--line); opacity: 1; transform: translateY(-14px); transition: transform .3s;
}
#sokk-size-panel[data-open="true"] .sokk-panel-body { transform: none; }
#sokk-size-panel .sokk-panel-head { padding: 0; border-bottom: 0; margin-bottom: 18px; }
#sokk-size-panel .sokk-panel-head .display { font: 400 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
#sokk-size-panel .sokk-panel-head button { color: var(--ink); font-size: 12px; padding: 1px 6px; }
.sokk-size-title { font-size: 28px; line-height: .92; letter-spacing: -.025em; text-transform: uppercase; font-weight: 700; margin: 0 0 16px; }
#sokk-size-panel .sokk-size-body { padding: 0; gap: 0; }
/* the eyebrow the older markup prints in place of the h2 keeps 16px under it */
#sokk-size-panel .sokk-size-body > .eyebrow { display: block; margin-bottom: 16px; }
.sokk-size-body { padding: 0 40px 28px; display: flex; flex-direction: column; gap: 14px; }
.sokk-size-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-family: var(--sans); }
.sokk-size-table th, .sokk-size-table td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--line); line-height: normal; }
.sokk-size-table thead th {
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--muted); font-weight: 700; padding: 10px 8px; border-bottom: 1px solid var(--ink);
}
.sokk-size-table tbody th { font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink); width: auto; }
.sokk-size-table tbody td { color: var(--ink); font-family: var(--sans); font-size: 13.5px; }
.sokk-size-note { margin: 16px 0 13px; font-size: 13px; line-height: 1.5; color: var(--muted); }
@media (max-width: 640px) { .sokk-size-body { padding-inline: 22px; } #sokk-size-panel.sokk-sheet { padding: 16px; } }

/* --------------------------------------------------------------- toast */
/* the reference's [role=status]: a flat --bg card with a --line border and a deep shadow,
   no radius, no padding (its rows pad themselves), 24px off the corner (12 on a phone),
   above the open drawer (z 310 > 300 — a live toast keeps floating over the bag) */
.sokk-toast {
	position: fixed; right: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); z-index: 310;
	width: min(360px, calc(100vw - 24px)); padding: 0; display: block;
	background: var(--bg); border: 1px solid var(--line); box-shadow: 0 14px 44px rgba(0,0,0,.2); border-radius: 0;
	animation: toastIn .38s cubic-bezier(.2,.7,.2,1) both;
}
.sokk-toast[hidden] { display: none; }
/* flat under glass too — the reference's toast never takes the glass-card skin the
   older markup still carries (same !important weight as the skin it undoes) */
html[data-glass="1"] .sokk-toast.glass-card {
	background: rgba(246,247,251,.96) !important; /* 2.9.1: opaque enough to read — the glass --bg is 68% */ border: 1px solid var(--line); border-radius: 0;
	box-shadow: 0 14px 44px rgba(0,0,0,.2); -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* the older head-row markup: eyebrow + ✕ over the item row */
.sokk-toast-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 0; }
.sokk-toast-head .eyebrow { font-size: 10px; letter-spacing: .1em; color: var(--muted); }
.sokk-toast-head button { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; }
.sokk-toast-name { display: block; font-size: 13.5px; font-weight: 500; letter-spacing: -.01em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sokk-toast-variant { display: block; font-size: 10.5px; letter-spacing: 0; color: var(--muted); }

/* ============================================================ cookie bar */
/* 340px max, 24px off the corner (12 on a phone), 18px 20px padding, a --line border and
   the reference's own shadow over the glass-card one; both .sm buttons share the row */
.sokk-cookie {
	position: fixed; left: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); z-index: 200;
	width: auto; max-width: 340px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px;
	border: 1px solid var(--line); box-shadow: 0 16px 40px -16px rgba(0,0,0,.35);
}
.sokk-cookie p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink); }
.sokk-cookie .row { display: flex; gap: 10px; }
.sokk-cookie .row .btn { flex: 1; }

/* ================================================================ panels */
/*
 * [hidden] must win here. Both this rule and the UA's [hidden]{display:none} are a
 * single attribute selector, so ours — loading later — would otherwise take a closed
 * overlay and leave it as a full-viewport, fully transparent shield that swallows
 * every click on the page. Invisible in screenshots, fatal in use.
 */
[data-sokk-panel][hidden] { display: none; }
[data-sokk-panel] {
	position: fixed; inset: 0; z-index: 300; display: flex;
	background: rgba(0,0,0,.45); opacity: 0; transition: opacity .35s ease;
}
[data-sokk-panel][data-open="true"] { opacity: 1; }
/* the right-hand drawer (the reference's <aside>): 92% up to 440px, .42s slide */
[data-sokk-panel] .sokk-panel-body {
	background: var(--bg); width: 92%; max-width: 440px; margin-left: auto; height: 100%;
	display: flex; flex-direction: column; transform: translateX(100%); transition: transform .42s cubic-bezier(.2,.7,.2,1);
}
[data-sokk-panel][data-open="true"] .sokk-panel-body { transform: none; }
/* the frost the reference's glass `aside` rule gives the right-hand drawers: the page
   behind is blurred and saturated through a white gradient, with a specular inset edge.
   (sokk-base.css retargeted that rule to .sokk-header only.) The centred sheets keep
   their own glass-card skin. */
html[data-glass="1"] :is(#sokk-cart-panel, #sokk-filter-panel) .sokk-panel-body {
	-webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
	background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
	box-shadow: inset 1px 1px 0 rgba(255,255,255,.8), 0 30px 90px -30px rgba(30,50,90,.45);
}
/* head row: 20px 40px (61px tall), a 22px display title, an ink 'Close ✕' — the values
   the bag and filter drawers measure; the sheets restate their own below */
.sokk-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 20px var(--gut); border-bottom: 1px solid var(--line); }
.sokk-panel-head .display { font-size: 22px; line-height: .92; font-weight: 700; text-transform: uppercase; letter-spacing: -.025em; }
.sokk-panel-head button { background: none; border: 0; color: var(--ink); cursor: pointer; font-size: 12px; letter-spacing: .02em; }
/* the Ship-to sheet's Close is the one muted Close (an inline var(--muted) on the reference) */
#sokk-region-panel .sokk-panel-head button { color: var(--muted); }
/* 'Bag (3)': the count is a nested 13px muted mono span inside the display title */
.sokk-cart-count { font-family: var(--mono); font-size: 13px; letter-spacing: .02em; color: var(--muted); }

/* centred sheet variant (region picker) rather than the right-hand drawer: the card sits
   clamp(16px,9vh,120px) from the top (81px at 900 tall), 460 wide, capped at 78vh, with a
   --line border and its overflow clipped to the corners */
.sokk-sheet { align-items: flex-start; justify-content: center; padding: clamp(16px, 9vh, 120px) 16px; }
.sokk-sheet .sokk-panel-body {
	margin: 0; width: min(460px, 100%); max-width: none; max-height: 78vh; border: 1px solid var(--line); overflow: hidden;
	transform: translateY(16px) scale(.98); opacity: 0;
	transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .25s;
}
.sokk-sheet[data-open="true"] .sokk-panel-body { transform: none; opacity: 1; }
/* the region, account and size-guide cards keep the --line hairline under glass too (the
   reference sets it inline, over the glass-card skin's white edge) */
html[data-glass="1"] :is(#sokk-region-panel, #sokk-account-panel, #sokk-size-panel) .sokk-panel-body { border-color: var(--line); }
/* the sheet's head is one block with the intro: title 22px 40px 0, no divider under it —
   the hairline sits under the search input instead */
.sokk-sheet .sokk-panel-head { padding: 22px var(--gut) 0; border-bottom: 0; }
.sokk-sheet .sokk-panel-head .display { font-size: 24px; }
.sokk-panel-intro { padding: 8px var(--gut) 16px; display: flex; flex-direction: column; gap: 16px; border-bottom: 1px solid var(--line); }
.sokk-panel-intro p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.sokk-panel-intro .sokk-detected { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.sokk-panel-intro input {
	width: 100%; padding: 11px 14px; border: 1px solid var(--line); background: var(--raise);
	font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; color: var(--ink); outline: none;
}
/* the reference's onFocus / onBlur swap the hairline to ink and back (no focus ring) */
.sokk-panel-intro input:focus { border-color: var(--ink); }
.sokk-region-list { overflow-y: auto; padding: 8px 0; flex: 1; min-height: 0; }
/* rows 13px 40px (16 on a phone via --gut): a 24px-wide 10.5px muted code, a 14.5px name
   (600 when selected), the currency 12px muted, and the ✓ in its own 14px slot; the
   selected row sits on --surface */
.sokk-region-row {
	display: flex; width: 100%; gap: 16px; padding: 13px var(--gut); background: transparent;
	border: 0; cursor: pointer; text-align: left; color: var(--ink);
}
.sokk-region-row:hover { background: var(--raise); }
.sokk-region-row[data-on="true"] { background: var(--surface); }
.sokk-region-row[data-on="true"] .sokk-region-name { font-weight: 600; }
.sokk-region-row[hidden] { display: none; }
.sokk-region-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sokk-region-code { font-size: 10.5px; letter-spacing: .08em; color: var(--muted); width: 24px; flex: none; }
.sokk-region-name { font-size: 14.5px; }
.sokk-region-cur { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .02em; color: var(--muted); white-space: nowrap; }
.sokk-region-check { width: 14px; display: flex; justify-content: center; font: 400 13.33px var(--sans); color: var(--ink); }

/* Account sheet — the reference's card: 420 wide, content-sized, 38px padding, --raise
   with a --line border, 72px from the top of a 900px viewport (clamp(16px,8vh,120px)).
   Signed out: a 'SOKK Members' / ink 'Close ✕' head (24px under), two flex:1 tabs on a
   1px rule (24px under), an 18px-gap form of underlined 15px fields with 10.5px mono
   labels, 'Forgot password?' 11px muted underlined, the .btn.block 4px under, and a
   12px/18px muted note 18px under that. */
.sokk-sheet.sokk-account { padding: clamp(16px, 8vh, 120px) 16px; }
.sokk-account .sokk-panel-body {
	width: min(420px, 100%); height: auto; max-height: none; padding: clamp(24px, 3vw, 38px);
	background: var(--raise); border: 1px solid var(--line); overflow: visible;
}
.sokk-account-head { margin-bottom: 24px; }
.sokk-account-head button { background: none; border: 0; color: var(--ink); cursor: pointer; font-size: 12px; letter-spacing: .02em; }
.sokk-account-tabs { display: flex; margin-bottom: 24px; }
.sokk-account-tabs button {
	flex: 1; background: none; border: 0; border-bottom: 1px solid transparent; padding: 1px 6px 12px;
	font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); cursor: pointer;
}
.sokk-account-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.sokk-account form { display: flex; flex-direction: column; gap: 18px; }
.sokk-account form p { margin: 0; }
.sokk-account label { display: block; font: 400 10.5px var(--mono); line-height: 17px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sokk-account label input, .sokk-account form .input {
	width: 100%; margin-top: 4px; padding: 9px 0; font: 400 15px var(--sans); color: var(--ink);
	background: transparent; border: 0; border-bottom: 1px solid var(--line); outline: none;
	/* no border-radius here: the glass input skin (sokk-base.css) rounds these to 13px and
	   the reference lets it; the UA default is already square for the other palettes */
}
/* the reference's link is a <button>: the UA 1px 6px inset it 6px */
.sokk-account-forgot { font: 400 11px var(--mono); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; padding: 1px 6px; }
.sokk-account form .btn { margin-top: 4px; }
.sokk-account-note { margin: 18px 0 12px; font-size: 12px; line-height: 1.5; color: var(--muted); }
/* the reference's 'Create an account' is an inline <button> at the UA's 13.33px / 1px 6px,
   ink, underlined — not the note's 12px muted prose */
.sokk-account-note a { color: var(--ink); font-size: 13.3333px; padding: 1px 6px; text-decoration: underline; text-underline-offset: 3px; }
.sokk-account-hi { font-size: clamp(28px, 4vw, 44px); line-height: 1; margin: 0; }
.sokk-account-email { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.sokk-account-rows { display: flex; flex-direction: column; margin-top: 24px; border-top: 1px solid var(--line); }
.sokk-account-row { gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); text-align: left; color: var(--ink); }
.sokk-account-row-label { display: block; font-size: 15px; font-weight: 500; }
.sokk-account-row-sub { display: block; font-size: 12px; color: var(--muted); }
.sokk-account-arrow { color: var(--muted); }
.sokk-account-out, .sokk-account-in { margin-top: 22px; }
.sokk-account-blurb { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* ================================================ WooCommerce → tokens */
/* sokk-storefront: this bridge is scoped to the canvas / SOKK containers so WooCommerce markup
   rendered by the host theme (a surface switched off in sokk_canvas_surfaces, Shoptimizer's
   own cart / mini-cart, an Elementor Woo widget) keeps the host's styling. The hook element
   (.woocommerce is usually <body>) may itself be the canvas body, hence the self-or-inside
   form; :where() keeps every specificity as it was. */
.woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) ul.products li.product { text-align: left; margin-bottom: 8px; }
.woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) ul.products li.product .woocommerce-loop-product__title { font-weight: 400; text-transform: none; letter-spacing: -.01em; font-size: 14px; padding: 10px 0 2px; color: var(--ink); }
.woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) ul.products li.product a img, .woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) ul.products li.product img { aspect-ratio: 4/5; object-fit: cover; width: 100%; margin: 0; background: var(--line); }
.woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) ul.products li.product .button, .woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) ul.products li.product .added_to_cart { display: none !important; }
.woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) ul.products li.product .price, .woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) div.product p.price, .woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) div.product span.price { font-family: var(--mono); color: var(--ink); font-size: 13px; }
.woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) a.button, .woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) button.button, .woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) input.button, .woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) #respond input#submit, .woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) a.button.alt, .woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) button.button.alt {
	border-radius: 0; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
	padding: 13px 22px; background: var(--ink); color: var(--bg); border: 1px solid var(--ink); transition: background .25s, color .25s;
}
.woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) a.button:hover, .woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) button.button:hover, .woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) input.button:hover, .woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) a.button.alt:hover, .woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) button.button.alt:hover { background: transparent; color: var(--ink); }
.woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) span.onsale { border-radius: 0; background: var(--ink); color: var(--bg); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; line-height: 1; min-width: 0; min-height: 0; padding: 7px 10px; }
.woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) .star-rating span::before { color: var(--ink); }
/* text fields at the reference's 15px Archivo / 12px 14px (42px tall), no UA focus ring —
   its onFocus turns the border ink; under glass the pill's white border wins, as there.
   The square corners are the non-glass palettes' only: the glass pill's 13px radius
   (sokk-base.css) must keep winning on the canvas, so it is guarded rather than reset. */
.woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) form .form-row input.input-text, .woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) form .form-row textarea, .woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) form .form-row select, .woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) .quantity .qty {
	border: 1px solid var(--line); background: var(--raise); color: var(--ink); padding: 12px 14px; font: 15px var(--sans); outline: none;
}
html:not([data-glass="1"]) .woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) form .form-row input.input-text, html:not([data-glass="1"]) .woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) form .form-row textarea, html:not([data-glass="1"]) .woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) form .form-row select, html:not([data-glass="1"]) .woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) .quantity .qty { border-radius: 0; }
html[data-glass="1"] .sokk-canvas .woocommerce form .form-row input.input-text, html[data-glass="1"] .sokk-canvas .woocommerce form .form-row textarea, html[data-glass="1"] .sokk-canvas .woocommerce-checkout select { border-radius: 13px; }
.sokk-canvas .woocommerce form .form-row input.input-text:focus, .sokk-canvas .woocommerce form .form-row textarea:focus { outline: none; border-color: var(--ink); }
.woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) nav.woocommerce-pagination ul, .woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) nav.woocommerce-pagination ul li { border: none; }
.woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) nav.woocommerce-pagination ul li a, .woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) nav.woocommerce-pagination ul li span { font-family: var(--mono); letter-spacing: .06em; }
.woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) nav.woocommerce-pagination ul li span.current { background: var(--ink); color: var(--bg); }
:where(.sokk-canvas,[class*="sokk-"]) .wc-block-components-product-price, :where(.sokk-canvas,[class*="sokk-"]) .wp-block-woocommerce-product-price { font-family: var(--mono); font-size: 13px; }
:where(.sokk-canvas,[class*="sokk-"]) .wp-block-woocommerce-product-image img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
:where(.sokk-canvas,[class*="sokk-"]) .wc-block-breadcrumbs { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
:where(.sokk-canvas,[class*="sokk-"]) .wc-block-breadcrumbs a { color: inherit; text-decoration: none; }
:where(.sokk-canvas,[class*="sokk-"]) .wc-block-catalog-sorting select, .woocommerce-ordering:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) select { border-radius: 0; border: 1px solid var(--line); background: var(--raise); font-family: var(--mono); font-size: 12px; padding: 9px 12px; }
:where(.sokk-canvas,[class*="sokk-"]) .wc-block-components-button, :where(.sokk-canvas,[class*="sokk-"]) .wc-block-components-button:not(.is-link) {
	border-radius: 0 !important; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
	background: var(--ink); color: var(--bg); border: 1px solid var(--ink);
}
:where(.sokk-canvas,[class*="sokk-"]) .wc-block-components-button:hover { background: transparent; color: var(--ink); }
:where(.sokk-canvas,[class*="sokk-"]) .wc-block-components-quantity-selector { border-radius: 0; border: 1px solid var(--line); }
:where(.sokk-canvas,[class*="sokk-"]) .wc-block-cart-item__product .wc-block-components-product-name { font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
:where(.sokk-canvas,[class*="sokk-"]) .wc-block-components-totals-item, :where(.sokk-canvas,[class*="sokk-"]) .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--mono); }
:where(.sokk-canvas,[class*="sokk-"]) .wc-block-components-sidebar, :where(.sokk-canvas,[class*="sokk-"]) .wc-block-components-sidebar .wc-block-components-panel { background: var(--surface); }
/* The checkout summary is a card that clears the header, like the reference's.
   Woo's own rule is `@container (min-width:700px){ .wc-block-checkout__sidebar{ top:24px } }`,
   written for a page whose header scrolls away. Ours does not — .sokk-header above is
   sticky at top:0 — so the summary slid under it and lost its first 60px on every scroll.
   84px is the same offset .pdp-info already uses for the same reason. Border and padding
   bring it to the reference's glass-card treatment, which we had only the background of.
   NOT changed: Woo drops to one column at a 700px CONTAINER query where the reference
   uses a 900px media query. Moving that means overriding a container query whose layout
   rules I have not read end to end, and a half-understood override of the checkout grid
   is worse than a 200px difference in where it stacks. */
:where(.sokk-canvas,[class*="sokk-"]) .wc-block-checkout__sidebar { top: 84px; border: 1px solid var(--line); padding: 22px 24px; }
:where(.sokk-canvas,[class*="sokk-"]) .wc-block-components-text-input input, :where(.sokk-canvas,[class*="sokk-"]) .wc-block-components-combobox .components-combobox-control__input { border-radius: 0 !important; border-color: var(--line) !important; background: var(--raise); }
:where(.sokk-canvas,[class*="sokk-"]) .wc-block-components-notice-banner { border-radius: 0; }
:where(.sokk-canvas,[class*="sokk-"]) .wc-block-mini-cart__drawer { background: var(--bg); }
:where(.sokk-canvas,[class*="sokk-"]) .wp-block-woocommerce-add-to-cart-form select, :where(.sokk-canvas,[class*="sokk-"]) .wp-block-woocommerce-add-to-cart-form .qty { border-radius: 0; border: 1px solid var(--line); background: var(--raise); padding: 11px 13px; font-family: var(--mono); }
.woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) div.product .woocommerce-tabs ul.tabs li a { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ink); }
.woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) div.product .woocommerce-tabs ul.tabs::before, .woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) div.product .woocommerce-tabs ul.tabs li { border-color: var(--line); border-radius: 0; background: transparent; }
.woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) table.shop_table, .woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) table.shop_table td, .woocommerce:where(.sokk-canvas,[class*="sokk-"],[class*="sokk-"] *) table.shop_table th { border-radius: 0; border-color: var(--line); }

/* EU withdrawal CTA (kept from the previous build — statutory, not part of the reference) */
.sokk-eu-cta { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.16); margin-top: 36px; padding-top: 28px; }
.sokk-eu-cta a { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255,255,255,.55); padding: 10px 16px; transition: background .2s, color .2s; }
.sokk-eu-cta a span { opacity: .6; letter-spacing: .04em; }
.sokk-eu-cta a:hover { background: #fff; color: var(--footer-bg); }
.sokk-eu-cta small { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: rgba(255,255,255,.5); }

/* -------------------------------------------- PDP sticky bar (phone only)
   The bar and spacer are laid out by sokk-base.css, which is the reference's own
   stylesheet; these are the parts inside it that the reference sets inline. */
.pdp-stickybar-info { min-width: 0; }
.pdp-stickybar-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp-stickybar-meta { font-size: 12px; color: var(--muted); }
.pdp-stickybar .btn { flex: none; }

/* ------------------------------------------------------------------- 404
   Centred, with the display line at the reference's clamp. */
/* the reference's section runs at 16px / normal (an ~18px eyebrow line box); the h1, p
   and .btn set their own sizes, so only the eyebrow strut is affected */
.sokk-404 { text-align: center; padding: clamp(56px, 10vw, 140px) 0; font-size: 16px; line-height: normal; }
.sokk-404 .display { font-size: clamp(64px, 18vw, 260px); margin: 10px 0 0; line-height: .92; text-transform: uppercase; font-weight: 700; letter-spacing: -.025em; }
/* natural leading and the UA's 15px bottom margin: with the row's 26px that is the
   reference's 41px from the copy to the buttons */
.sokk-404 p { color: var(--muted); font-size: 15px; line-height: normal; margin: 8px 0 15px; }
.sokk-404-actions { display: flex; gap: 12px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }

/* ------------------------------------------------- withdrawal region gate
   The non-EU state, verbatim from the reference's #/withdraw. */
/* 16px / `normal` leading: the eyebrow's line box is ~17px on the reference (a 16px strut), not
   the scope's 22.4px, which sat the h1 / copy / buttons 5px low; the p restates its own 1.6 below */
.sokk-withdraw-gate { padding-top: clamp(28px, 4vw, 64px); padding-bottom: clamp(48px, 7vw, 110px); font-size: 16px; line-height: normal; }
.sokk-withdraw-gate .display { font-size: clamp(40px, 8vw, 104px); margin: 16px 0 0; line-height: .92; text-transform: uppercase; font-weight: 700; letter-spacing: -.025em; }
.sokk-withdraw-gate p { max-width: 600px; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; color: var(--muted); margin: 22px 0 0; }
.sokk-withdraw-gate p strong { color: var(--ink); }
.sokk-withdraw-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

/* ------------------------------------------------- withdrawal page layout
   The EU page's two-column grid, verbatim from the reference's #/withdraw: a
   minmax(0,1fr) main column beside a fixed 300px aside that sticks below the
   header. The pattern also carries .split2, whose sokk-base.css override
   collapses the grid at 900px, exactly as the reference collapses. .sokk-measure
   is the intro's 600px measure, carried over from the retired assets/sokk.css. */
.sokk-withdraw-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.sokk-withdraw-aside { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 96px; }
.sokk-withdraw-footnote { padding: 0 4px; }
.sokk-measure { max-width: 600px; }

/* --------------------------------------------------- account, signed out
   The reference's hero, rendered by the sokk/account-gate block. The shortcode's
   own login form is suppressed on this page (sokk-core inc/account.php); signing
   in goes through the account sheet, or wp-login.php without JavaScript. */
/* 160px of air above AND below (the reference's section.wrap), the eyebrow on its
   natural line box so the h1 lands 30px under it, .92 leading, 15px copy at normal */
/* 16px / normal like the 404: the reference's section strut gives the inline eyebrow a 17px
   line box (at 14px it is 15, and the h1 / button / section end 2px short) */
.sokk-account-hero { text-align: center; padding: clamp(64px, 12vw, 160px) 0; font-size: 16px; line-height: normal; }
.sokk-account-hero .display { font-size: clamp(36px, 6vw, 80px); margin: 16px 0 0; line-height: .92; text-transform: uppercase; font-weight: 700; letter-spacing: -.025em; }
/* 15px under the copy: the reference keeps the UA 1em bottom margin, and the inline-flex
   button below does not collapse it (button 39px under the copy, section 544px at 1440) */
.sokk-account-hero p { color: var(--muted); font-size: 15px; line-height: normal; margin: 14px 0 15px; }
.sokk-account-hero .btn { margin-top: 24px; }

/* ---------------------------------------------------- account, signed in
   The reference's account chrome, from its inline styles: the greeting header,
   the tab bar stuck under the 64px header bar, and the overview cards. The
   markup behind these is classic-template overrides in the theme's
   woocommerce/myaccount/ — WooCommerce 10.9.4 has no My Account blocks. */
.sokk-acct-head { padding-top: clamp(28px, 4vw, 56px); padding-bottom: 20px; }
.sokk-acct-head-row { align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.sokk-acct-hi { font-size: clamp(30px, 5vw, 68px); line-height: 1; margin: 0; }
.sokk-acct-out { color: var(--muted); }
.sokk-acct-tabs {
	border-top: 1px solid var(--line); position: sticky; top: 64px; z-index: 20;
	background: color-mix(in srgb, var(--bg) 90%, transparent);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sokk-acct-tabs ul { list-style: none; margin-block: 0; padding-block: 0; display: flex; gap: 4px; overflow-x: auto; }
.sokk-acct-tabs ul li a {
	font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--muted); text-decoration: none; display: block; padding: 16px 14px;
	border-bottom: 1.5px solid transparent; white-space: nowrap;
}
.sokk-acct-tabs ul li.is-active a { color: var(--ink); border-bottom-color: var(--ink); }
/* the shortcode's content box doubles as the reference's content section: .wrap's
   measure plus the overview's own vertical paddings */
:where(.sokk-canvas,[class*="sokk-"]) .woocommerce-MyAccount-content { max-width: var(--maxw); margin: 0 auto; width: 100%; padding: 32px var(--gut) clamp(56px, 8vw, 120px); } /* sokk-storefront: scoped */
.sokk-acct-overview { display: grid; gap: 14px; }
.sokk-acct-stat { display: block; text-align: left; border: 1px solid var(--line); background: var(--surface); padding: 20px 22px; color: var(--ink); }
.sokk-acct-stat-v { font-size: 30px; margin-top: 10px; }
.sokk-acct-stat-sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.sokk-acct-latest { border: 1px solid var(--line); background: var(--surface); padding: 22px 24px; }
.sokk-acct-latest-head { margin-bottom: 16px; }
.sokk-acct-latest-head .link-u { color: var(--muted); }
.sokk-acct-empty { margin: 0; font-size: 13.5px; color: var(--muted); }
.sokk-acct-orders { display: grid; gap: 12px; }
.sokk-acct-order {
	display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
	border: 1px solid var(--line); background: var(--surface); padding: 18px 20px; color: var(--ink);
}
.sokk-acct-order-tiles { display: flex; gap: 8px; }
.sokk-acct-order-tile { width: 46px; height: 56px; position: relative; }
.sokk-acct-order-tile .tile { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.sokk-acct-order-mid { display: block; min-width: 0; }
.sokk-acct-order-id { display: block; font-size: 12px; }
.sokk-acct-order-meta { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.sokk-acct-order-end { display: block; text-align: right; }
.sokk-acct-order-status { display: inline-block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border: 1px solid var(--line); }
.sokk-acct-order-status.is-done { color: var(--muted); }
.sokk-acct-order-total { display: block; font-size: 13px; margin-top: 8px; }

/* the reference's empty bag, on the cart page (checkout redirects here when empty) */
.sokk-empty-bag { text-align: center; padding: clamp(64px, 12vw, 160px) 0; }
.sokk-empty-bag .display { font-size: clamp(36px, 6vw, 80px); margin: 0; line-height: .95; text-transform: uppercase; font-weight: 700; letter-spacing: -.025em; }
.sokk-empty-bag .btn { margin-top: 22px; display: inline-block; }
/* the same 22px when the button is a core button (the seeded state, once editable) */
.sokk-empty-bag .wp-block-buttons { margin-top: 22px; }

/* ------------------------------------------------- order confirmation
   The reference caps the receipt column at 720px inside .wrap and lets the
   status block's plain h1/p carry the display face; the card itself styles
   inline, mirroring the reference's own inline styles. */
.sokk-receipt { max-width: 720px; padding-top: clamp(32px, 5vw, 72px); padding-bottom: clamp(56px, 8vw, 120px); }
.sokk-receipt .wc-block-order-confirmation-status h1 {
	font-size: clamp(40px, 7vw, 88px); margin: 14px 0 0;
	font-weight: 700; line-height: .92; letter-spacing: var(--disp-track, -.025em); text-transform: uppercase; text-wrap: balance;
}
.sokk-receipt .wc-block-order-confirmation-status p { color: var(--muted); font-size: 15px; margin: 14px 0 0; }
/* the 48×60 line-item tile — the reference absolutely fills a fixed box, so the
   4/5 aspect the tile carries everywhere else does not apply here */
.sokk-receipt-media { width: 48px; height: 60px; flex: none; position: relative; }
.sokk-receipt-media .tile { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }

/* --------------------------------------------------- listing pagination
   The page links are chips (Stage 4 borrowed .sokk-chips/.sokk-chip whole),
   so height, border, background and the inverted current state all stay as
   the filter chips draw them — only what a page row needs differs: it sits
   centred under the count line, wraps instead of scrolling, and each link
   is at least square so a digit is as easy to hit as a word. The invisible
   ::after stretches the touch target to 44px without moving the drawn box,
   and the row gap keeps two rows' targets from meeting. aria-current is the
   state selector here, not only data-on, so the marked-up current page and
   the painted one can never drift apart. Everything is scoped to the nav. */
.sokk-plp-pages {
	justify-content: center; flex-wrap: wrap; overflow: visible;
	gap: 14px 10px; margin-top: clamp(24px, 3vw, 40px);
}
.sokk-plp-pages .sokk-chip {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px;
}
.sokk-plp-pages .sokk-chip::after {
	content: ""; position: absolute; left: 0; right: 0; top: 50%;
	transform: translateY(-50%); height: 44px;
}
.sokk-plp-pages .sokk-chip[aria-current="page"] {
	background: var(--ink); border-color: var(--ink); color: var(--bg); cursor: default;
}

/* ------------------------------------------------------- checkout page head
 * The reference opens checkout with a back link and a display-scale "Checkout":
 *   <button class="link-u" style="color:var(--muted)">← Continue shopping</button>
 *   <h1 class="display" style="font-size:clamp(34px,6vw,72px);margin-top:16px">Checkout</h1>
 * We had neither, and no way back off the page at all. It lives in page-checkout.html as
 * ordinary blocks so a merchant can retitle it or repoint the link.
 *
 * No empty-bag guard is needed here, which is worth writing down because it is not
 * obvious: woocommerce/page-content-wrapper replaces everything inside it with the
 * empty-cart state, and the head sits inside that wrapper, so the server drops it before
 * it is ever styled. Measured on both states through one channel — 1 occurrence with a
 * bag, 0 without. An earlier version of this rule carried a :has() guard for a case that
 * cannot happen.
 */
.sokk-checkout-head { padding-top: clamp(24px, 3vw, 44px); padding-bottom: 14px; }
.sokk-checkout-head p { margin: 0; }
/* an <a> where the reference has a <button>: restate the UA 1px 6px 3px so the arrow starts at x46 */
.sokk-checkout-head a { color: var(--muted); }
.sokk-checkout-head .link-u { display: inline-block; padding: 1px 6px 3px; line-height: normal; }
.sokk-checkout-head h1 { font-size: clamp(34px, 6vw, 72px); margin-top: 16px; }

/* ------------------------------------------------------- classic checkout form
 * The weltley checkout renders WooCommerce's classic form (the classic-shortcode block), so
 * the .wc-block-* rules above never match it. These map its fields onto the reference's:
 *
 *  - labels: 10.5px/.1em uppercase mono, muted, 6px over the field, no asterisk and no
 *    '(optional)';
 *  - the field grid: a wrapping 12px-gap flex row, half fields flex 1 1 0 (385px each at
 *    1440), no Woo row padding / floats / clearfix pseudo;
 *  - selects: the native control (modules/canvas.php dequeues selectWoo) restyled like the
 *    inputs with a drawn ▼ at right 14px, and the 'Prices shown in USD' hint the country
 *    field prints under itself;
 *  - Payment: Woo's tinted #payment box, its padded list and the grey notice banner all
 *    flattened to the page; 'Place order' is a .btn.block inside the summary card.
 */
.sokk-canvas .woocommerce-checkout .form-row label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); line-height: 1.25; margin: 0 0 6px; }
.sokk-canvas .woocommerce-checkout .form-row label .required, .sokk-canvas .woocommerce-checkout .form-row label .optional { display: none; }
.sokk-canvas .woocommerce-checkout .woocommerce-billing-fields__field-wrapper, .sokk-canvas .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { display: flex; flex-wrap: wrap; gap: 12px; }
.sokk-canvas .woocommerce-checkout .form-row { position: relative; padding: 0; margin: 0; float: none; width: 100%; flex: 1 1 100%; }
.sokk-canvas .woocommerce-checkout .form-row-first, .sokk-canvas .woocommerce-checkout .form-row-last { flex: 1 1 0; width: auto; }
.sokk-canvas .woocommerce-checkout .form-row::after, .sokk-canvas .woocommerce-checkout .form-row::before { content: none; }
.sokk-canvas .woocommerce-checkout .form-row .woocommerce-input-wrapper { display: block; }
.sokk-canvas .woocommerce-checkout .form-row input.input-text, .sokk-canvas .woocommerce-checkout .form-row select { width: 100%; }
/* .form-row in the selector: (0,3,1) so this outranks the (0,2,2) bridge rule's 12px 14px
   padding - the value must stop short of the ▼ (the box is the inputs' 42px, as measured
   on the reference's select: 781x42, 12px 38px 12px 14px, at the font's natural leading —
   a 19px line made it 45) */
.sokk-canvas .woocommerce-checkout .form-row select {
	appearance: none; -webkit-appearance: none; width: 100%; font: 15px var(--sans); line-height: normal; color: var(--ink);
	padding: 12px 38px 12px 14px; border: 1px solid var(--line); background: var(--raise); cursor: pointer;
}
/* bottom 12px centres the glyph on the 42px select (its ink rows 18–23 of 42, as on the
   reference's top:50% chevron); 15 was tuned to the taller 45px box */
.sokk-canvas .woocommerce-checkout .form-row:has(> select, .woocommerce-input-wrapper > select)::after {
	content: "▼"; position: absolute; right: 14px; bottom: 12px; font-size: 11px; color: var(--muted); pointer-events: none;
}
/* the hint sits under the select, so the caret must not centre on it: 12px + the hint's
   6px margin + its 11-12px line (sokk-checkout.css restates this at a higher specificity) */
.sokk-canvas .woocommerce-checkout .form-row:has(.sokk-co-prices)::after { bottom: 30px; }
.sokk-co-prices { display: block; font-size: 10.5px; line-height: normal; color: var(--faint); letter-spacing: .02em; margin-top: 6px; }
.sokk-canvas .woocommerce-privacy-policy-text p { font: 10.5px var(--mono); color: var(--faint); letter-spacing: .02em; margin: 12px 0 0; }
.sokk-canvas #payment { background: transparent; border-radius: 0; padding: 0; }
.sokk-canvas #payment ul.payment_methods { padding: 0; border: 0; }
.sokk-canvas #payment ul.payment_methods li { line-height: normal; }
.sokk-canvas #payment .woocommerce-info, .sokk-canvas .woocommerce-notices-wrapper .woocommerce-info { background: transparent; border: 0; padding: 0; margin: 0; color: var(--muted); font: 11px var(--mono); }
.sokk-canvas #payment .woocommerce-info::before { display: none; }
.sokk-canvas #payment div.payment_box { background: transparent; border-radius: 0; padding: 0; margin: 12px 0 0; }
.sokk-canvas #payment div.payment_box::before { display: none; }
.sokk-canvas #payment div.payment_box .form-row, .sokk-canvas .wc-payment-form .form-row { margin-bottom: 12px; }
.sokk-canvas .wc-stripe-elements-field, .sokk-canvas .wc-payment-form .form-row input { border: 1px solid var(--line); background: var(--raise); padding: 12px 14px; font: 15px var(--sans); color: var(--ink); border-radius: 0; }
.sokk-canvas .place-order { padding: 0; margin: 0; }
.sokk-co-summary .btn, .sokk-canvas .place-order .btn { width: 100%; margin-top: 18px; float: none; padding: 15px 26px; }
.sokk-canvas .woocommerce-checkout #place_order { float: none; width: 100%; margin-top: 18px; }

/* ---------------------------------------------------- checkout step numbers
 * showFormStepNumbers (set on the checkout block, seed step 8) gives WooCommerce's own
 * numbering, which renders the digit as " 1." absolutely positioned in the left margin.
 * The reference draws it in a 24px ink-bordered circle — mono 11px, centred.
 *
 * The selector is Woo's own, repeated exactly: theirs is (0,3,0) and sets border, radius
 * and content, so a plainer selector loses those three and keeps only the box — which is
 * how the first attempt at this rule produced a 24px square with no border. Repeating it
 * also keeps counter-increment on the rule that owns it; moving that to a different
 * selector stops the numbers counting.
 *
 * Positioning is left as Woo has it (absolute, centred on left:-24px) rather than
 * re-invented, so the circle sits in the margin the form already reserves.
 */
:where(.sokk-canvas,[class*="sokk-"]) .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title::before { /* sokk-storefront: scoped, specificity unchanged */
	content: counter(checkout-step);
	counter-increment: checkout-step;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 1px solid var(--ink);
	border-radius: 50%;
	background: transparent;
	font-family: var(--mono);
	font-size: 11px;
	line-height: 1;
}

/* ------------------------------------------------------------- pre-order lines
 * Three rules for the pre-order module (modules/preorder.php, 2.4.0), which is off by
 * default: nothing on a stock page carries these classes, so the storefront is unchanged
 * until a merchant puts a product on pre-order. Everything else that module draws reuses
 * classes that are already here — .pdp-hint, .pdp-price-was, .sokk-co-note, .sokk-badge.
 *
 * The PDP line is written by assets/js/sokk-preorder.js under the price row (the ship
 * promise belongs with the price, not with the hint below the sizes, which is why it does
 * not simply inherit .pdp-hint's 10px top margin), and the merchant's own note is a second
 * line inside it. The checkout note is the mixed-bag sentence at the top of step 3.
 */
.pdp-preorder { margin-top: 6px; }
.pdp-preorder-note { display: block; color: var(--faint); }
.sokk-co-note.is-preorder { margin-bottom: 10px; }

/* 2.8.0 product video (ref/r28/PLAN.md C10)
   Printed only when a product carries a video (modules/product-video.php); nothing above
   this block changed. The PDP slide keeps the photos' 4:5 frame: poster (an <img> or the
   knit tile) and the <video> both fill it absolutely, the video fades in once it is
   actually playing ([data-on], set by assets/js/sokk-video.js) and is never display:none,
   so IntersectionObserver and play() always see a real box. Every PDP rule is scoped
   .pdp-slide-video … (0,2,0+) and sits after .sokk-review-thumb (0,1,0), whose box the
   full-screen link borrows for the review lightbox. The expand link is PHYSICAL top-right
   (the mobile counter is physical top-left and sokk-rtl.css does not flip it); Pause and
   Sound are logical bottom-start, stacked, so they mirror in RTL. */
.pdp-slide-video { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--line); }
.pdp-slide-video .pdp-video-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.pdp-slide-video > .tile { position: absolute; inset: 0; aspect-ratio: auto; width: 100%; height: 100%; }
.pdp-slide-video .pdp-video-el {
	position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; aspect-ratio: auto;
	object-fit: cover; background: transparent; opacity: 0; transition: opacity .3s ease;
}
.pdp-slide-video[data-on] .pdp-video-el { opacity: 1; }
.pdp-slide-video .pdp-video-play {
	position: absolute; top: 50%; left: 50%; z-index: 5; width: 56px; height: 56px; margin: -28px 0 0 -28px; padding: 0;
	display: flex; align-items: center; justify-content: center; box-sizing: border-box;
	border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; cursor: pointer;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s, transform .2s;
}
.pdp-slide-video .pdp-video-play:hover { background: rgba(0,0,0,.6); transform: scale(1.04); }
/* focus: the white ring plus a dark one around it, so one of the two reads on any cover
   or frame (a light knit tile, a pressed white pill) */
.pdp-slide-video .pdp-video-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(0,0,0,.6); }
.pdp-slide-video .pdp-video-play svg { width: 24px; height: 24px; margin-inline-start: 3px; }
.pdp-slide-video[data-mode="auto"] .pdp-video-play,
.pdp-slide-video[data-on] .pdp-video-play { display: none; }
.pdp-slide-video .pdp-video-pause,
.pdp-slide-video .pdp-video-sound {
	position: absolute; inset-block-end: 12px; inset-inline-start: 12px; z-index: 6; box-sizing: border-box;
	height: 30px; margin: 0; padding: 0 12px; line-height: 28px; white-space: nowrap;
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
	color: #fff; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.5); border-radius: 15px; cursor: pointer;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s;
}
.pdp-slide-video .pdp-video-sound { inset-block-end: 50px; }
.pdp-slide-video .pdp-video-pause[aria-pressed="true"],
.pdp-slide-video .pdp-video-sound[aria-pressed="true"] { background: #fff; color: #1d1d1f; border-color: #fff; }
.pdp-slide-video .pdp-video-pause:focus-visible,
.pdp-slide-video .pdp-video-sound:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(0,0,0,.6); }
.pdp-slide-video .pdp-video-pause[hidden],
.pdp-slide-video .pdp-video-sound[hidden] { display: none; }
/* once the shopper turns the sound on the browser's own controls appear along the foot:
   the two pills step up above them (a browser without :has() just overlaps) */
.pdp-slide-video:has(> .pdp-video-el[controls]) .pdp-video-pause { inset-block-end: 64px; }
.pdp-slide-video:has(> .pdp-video-el[controls]) .pdp-video-sound { inset-block-end: 102px; }
.pdp-slide-video .pdp-video-expand,
.pdp-slide-video .pdp-video-expand:hover,
.pdp-slide-video .pdp-video-expand:focus-visible {
	position: absolute; top: 12px; right: 12px; left: auto; bottom: auto; z-index: 6;
	width: 36px; height: 36px; box-sizing: border-box; padding: 0; overflow: visible;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid transparent; border-color: transparent; border-radius: 50%;
	background: rgba(0,0,0,.45); color: #fff; transform: none; outline-color: #fff;
}
.pdp-slide-video .pdp-video-expand:hover { background: rgba(0,0,0,.6); }
.pdp-slide-video .pdp-video-expand:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(0,0,0,.6); }
.pdp-slide-video .pdp-video-expand svg { width: 16px; height: 16px; }
.sokk-sr-only {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* cards (grid variant only; the rail never gets the badge): a small play disc in the
   bottom inline-end corner, under the hover quick-add strip (z 5) that covers it on hover;
   the optional hover preview sits above the tile and the colourway layer, below the
   sold-out scrim, the badge, the strips and the heart. Neither takes a pointer. */
.sokk-card-play {
	position: absolute; inset-block-end: 12px; inset-inline-end: 12px; z-index: 4; pointer-events: none;
	width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
	border-radius: 50%; background: rgba(0,0,0,.45); color: #fff;
}
.sokk-card-play svg { width: 13px; height: 13px; margin-inline-start: 2px; }
.sokk-card-play--bare { display: none; }
.sokk-card-video {
	position: absolute; inset: 0; z-index: 3; display: block; width: 100%; height: 100%;
	object-fit: cover; pointer-events: none; opacity: 0; transition: opacity .25s ease;
}
.sokk-card-video[data-on] { opacity: 1; }
html[data-glass="1"] .sokk-card-video { border-radius: 22px; }
@media (prefers-reduced-motion: reduce) {
	.pdp-slide-video .pdp-video-el, .sokk-card-video { transition: none; }
	.pdp-slide-video .pdp-video-play { transition: none; }
	.pdp-slide-video .pdp-video-play:hover { transform: none; }
}

/* ---- 2.11.0 delivery estimate (modules/delivery-estimate.php) ---- */
/* Two mono lines under add-to-bag, in the taxline slot: the estimated range and the country
   (a button that opens the region panel), then the dispatch window and Express, muted, in the
   .pdp-taxline family. A dated block renders invisible (.is-pending keeps its space, so nothing
   moves) until assets/js/sokk-delivery.js has written the dates; the script also hides it
   ([hidden]) while a pre-order or sold-out size is chosen. Dates and prices sit in <bdi>, so
   right-to-left pages need no rule of their own. */
.pdp-delivery { margin: 14px 0 0; font-size: 11px; letter-spacing: .04em; line-height: 1.6; color: var(--ink); }
.pdp-delivery.is-pending { visibility: hidden; }
/* while pending, an empty date range holds about the room its dates will take, so filling it in
   rarely changes how the lines wrap (the block keeps its height) */
.pdp-delivery.is-pending [data-sokk-range] { display: inline-block; min-width: 12ch; }
.pdp-delivery[hidden], .pdp-delivery [hidden] { display: none; }
.pdp-delivery .pdp-delivery-l1, .pdp-delivery .pdp-delivery-l2 { margin: 0; }
.pdp-delivery .pdp-delivery-l2 { font-size: 10px; letter-spacing: .05em; color: var(--muted); }
.pdp-delivery .pdp-delivery-cc {
	display: inline; width: auto; min-width: 0; min-height: 0; margin: 0; padding: 0;
	font: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; text-transform: none;
	text-align: inherit; white-space: normal; color: inherit; background: none; border: 0; border-radius: 0;
	box-shadow: none; transition: none; cursor: pointer;
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.pdp-delivery .pdp-delivery-cc:hover, .pdp-delivery .pdp-delivery-cc:focus { color: var(--accent); background: none; }
.pdp-delivery .pdp-delivery-cc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 479px) {
	.pdp-delivery .pdp-delivery-exp { display: block; }
	.pdp-delivery .pdp-delivery-sep { display: none; }
}
/* ---- end delivery estimate ---- */

/* ---- 2.12.0 card rules (WooCommerce → Settings → SOKK → Merchandising → Product cards) ---- */
/* Every rule here hangs off [data-card-rules], which inc/helpers.php sokk_product_card() and sokk.js
   cardHtml() print only while the "Card rules" master switch is on: with it off nothing below matches
   and every card renders exactly as before. The card becomes a flex column filling its grid cell (the
   cell is already as tall as its row), the name stops at two lines and the fact line sits at the foot
   in a fixed two-line slot, so every card of a row ends on the same line. No wrapper element: sokk.js
   initFilterDrawer selects `.pgrid > .sokk-card[data-plp-id]`. */
.sokk-card[data-card-rules] { display: flex; flex-direction: column; height: 100%; }
.sokk-card[data-card-rules] > * { flex-shrink: 0; }
.sokk-card[data-card-rules] .sokk-card-name {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
	overflow: hidden; overflow-wrap: anywhere;
}
/* the fact line ("84% Nylon · 20D"): the colour line's mono 11px in --muted, an explicit leading so
   the two-line slot is the same height whatever font the language falls back to; empty, it keeps
   its room. <bdi> inside keeps a Latin run in its order on right-to-left pages. overflow-wrap:anywhere
   (here and on the name): a long unspaced run wraps instead of widening its grid column. */
.sokk-card[data-card-rules] .sokk-card-fact {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
	margin-top: auto; padding-top: 8px; min-height: calc(8px + 2.8em); box-sizing: border-box;
	font-family: var(--mono); font-size: 11px; letter-spacing: .03em; line-height: 1.4; color: var(--muted);
	overflow-wrap: anywhere;
}
/* one badge word, never over the heart (32px at 8px in): long words end in an ellipsis. Rail and
   search-sheet cards carry no heart, so only the 12px insets are kept there. Position: the
   .sokk-badge rules above and their right-to-left twin in sokk-rtl.css. unicode-bidi:plaintext:
   the word takes its direction from its own first letter, so a Latin campaign word such as
   "3 for 2" keeps its order on a right-to-left page (it read "for 2 3") and an Arabic word stays
   right-to-left. */
.sokk-card[data-card-rules] .sokk-badge { max-width: calc(100% - 56px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
.sokk-card[data-card-rules]:not(:has(.sokk-wish)) .sokk-badge { max-width: calc(100% - 24px); }
/* phones: tighter tracking and padding, so a 14-character word (the longest a badge may be, PLAN R3)
   fits whole on a 2-up card from 360px up -- 14 x (6px + .03em) + 12px = 100.2px under the 102px the
   heart leaves on a 158px card (at the .12em above it needs 116.8px, so it fits only from 390px).
   One width for every card on a phone (grid, rail, search sheet), so badges side by side match. */
@media (max-width: 480px) {
	.sokk-card[data-card-rules] .sokk-badge { letter-spacing: .03em; padding-inline: 6px; }
}
/* sold out on a phone or any touch screen: the "Sold out — view" strip stays shown at the foot of
   the tile (there is no hover to reveal it) -- unless the SOLD OUT badge already says it. With a
   hover pointer on a wide screen it stays the hover strip. */
@media (max-width: 760px), (hover: none) {
	.sokk-card[data-card-rules]:not([data-badge="sold-out"]) .sokk-card-soldout {
		display: block !important; opacity: 1; transform: none; pointer-events: none;
	}
	.sokk-card[data-card-rules]:not([data-badge="sold-out"]) .sokk-card-soldout .sokk-quick-open { padding: 10px 8px; text-align: center; }
	/* a video's play disc keeps its corner free */
	.sokk-card[data-card-rules] .sokk-card-media:has(> .sokk-card-play:not(.sokk-card-play--bare)) > .sokk-card-soldout { inset-inline-end: 48px; }
}
/* ---- end card rules ---- */

/* ---- 2.12.0 traffic meter: banner sentence and "Cookie settings" link (modules/meter.php) ---- */
/* The sentence is the bar's second <p> (styled by .sokk-cookie p); it sits closer to the first. */
.sokk-cookie-note:is(p) { margin-top: -6px; }
/* the plugin's own small line under the footer, printed only while the meter is on and the
   [sokk_cookie_settings] shortcode is not on the page */
.sokk-cookie-settings-row {
	text-align: center; padding: 12px 16px 20px;
	font-family: var(--mono); font-size: 11px; letter-spacing: .06em; line-height: 1.5; color: var(--muted);
}
.sokk-cookie-settings { color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* ---- end traffic meter ---- */

/* ---- 2.13.0 review cards: the drawn shield, the "How we check reviews" line and its page (modules/reviews-display.php) ---- */
/* the shield before "Verified buyer" (setting "Shield and text"): 12px, blue (owner D26), on the text's
   baseline; the logical margin keeps it on the word's side in Arabic, Hebrew and Persian */
.sokk-review-shield { width: 12px; height: 12px; vertical-align: -2px; margin-inline-end: 3px; color: #2563eb; }
/* the byline may now carry country, source, incentive and date: let it wrap between the parts on a phone */
.sokk-review-by:has(.sokk-review-country, .sokk-review-source, .sokk-review-incentive, .sokk-review-date) { overflow-wrap: anywhere; }
/* the line under the Reviews heading: the opener's 11px mono, muted, close under the heading */
.sokk-reviews-policy { margin: 10px 0 0; font-size: 11px; letter-spacing: .02em; line-height: normal; }
.sokk-reviews-policy .link-u { color: var(--muted); }
/* above the grid (no summary column), the heading's 24px gap moves under the line */
.sokk-reviews > .wrap > .display:has(~ .sokk-reviews-policy) { margin-bottom: 0; }
.sokk-reviews > .wrap > .sokk-reviews-policy { margin-bottom: 24px; }
/* the page text of [sokk_review_policy]: a readable measure and paragraph rhythm */
.sokk-review-policy { max-width: 680px; }
.sokk-review-policy p { margin: 0 0 1em; line-height: 1.6; }
/* ---- end review cards ---- */