/* ============================================================
   UNRULED — component styles
   Tokens are defined in theme.json; this file only aliases them
   and builds components. Never hard-code a colour here.
   ============================================================ */

:root {
	--paper:      var(--wp--preset--color--paper);
	--paper-lift: var(--wp--preset--color--paper-lift);
	--ink:        var(--wp--preset--color--ink);
	--ink-soft:   var(--wp--preset--color--ink-soft);
	--ink-faint:  var(--wp--preset--color--ink-faint);

	--rule:      color-mix(in srgb, var(--ink) 13%, transparent);
	--rule-hard: color-mix(in srgb, var(--ink) 28%, transparent);

	--display: var(--wp--preset--font-family--display);
	--body:    var(--wp--preset--font-family--body);
	--mono:    var(--wp--preset--font-family--mono);

	--gut:  var(--wp--preset--spacing--30);
	--band: var(--wp--preset--spacing--50);

	--ease: cubic-bezier(.16, .84, .36, 1);

	--header-h: 66px;    /* the masthead; there is no utility strip */
}

body { -webkit-font-smoothing: antialiased; }   /* no overflow-x: hidden — Safari drew a hairline gutter with it, and nothing overflows any more */

/* The hidden attribute must win over any display: value set on the element
   (the drawers are display: flex when shown). */
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* WordPress's flow layout puts a block-gap margin (1rem) on every child after
   the first inside a group. These groups are laid out by this stylesheet with
   flex/grid and their own gaps, so that margin only knocks things off-centre —
   the language picker sat 7.5px low in its row, the wordmark likewise. */
.unr-mast > * + *,
.unr-sec > * + *,
.unr-sec-head > * + *,
.unr-plp-head > * + *,
.unr-plp-bar > * + *,
.unr-plp-bar__right > * + *,
.unr-plp-grid > * + *,
.unr-pdp > * + *,
.unr-pdp-gallery > * + *,
.unr-pdp-panel > * + *,
.unr-acc > * + * { margin-block-start: 0; }

/* Same margin between the top-level sections of the front page, PLP and PDP:
   a 16px paper strip above the ticker (read as lopsided padding), above the
   black night band, and between editorial frames meant to meet at a 2px
   gutter. Those templates use flow layout; page/single use constrained
   layout for prose, where the gap between title and body is wanted. */
main.is-layout-flow > * + * { margin-block-start: 0; }
/* And on <main> itself: every template starts main with either a full-bleed
   block (hero, slider, band) or a padded section, so the block-gap margin only
   ever shows as a strip of paper under the header. */
.wp-site-blocks > main,
.wp-site-blocks > .woocommerce { margin-block-start: 0; }   /* Woo wraps <main> in its own group */

/* The brand's own device: the wordmark's flipped R/E. */
.unr-mir { display: inline-block; transform: scaleX(-1); }

/* ---------- type roles ---------- */

.unr-mono,
.unr-eyebrow {
	font-family: var(--mono);
	font-size: var(--wp--preset--font-size--micro);
	text-transform: uppercase;
	font-weight: 400;
	margin: 0;
}
.unr-mono   { letter-spacing: .14em; }
.unr-eyebrow { letter-spacing: .2em; color: var(--ink-soft); }

.unr-stamp {
	font-family: var(--display);
	font-variation-settings: "wdth" 125, "wght" 750;
	text-transform: uppercase;
	line-height: .86;
	letter-spacing: -.02em;
	text-wrap: balance;
	margin: 0;
}

/* Underline that retracts on hover — the only link idiom on the site. */
.unr-lnk {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	display: inline-block;
	position: relative;
	padding-bottom: 5px;
}
.unr-lnk::after {
	content: "";
	position: absolute; left: 0; bottom: 0;
	width: 100%; height: 1px;
	background: currentColor;
	transform-origin: right;
	transition: transform .5s var(--ease);
}
.unr-lnk:hover::after { transform: scaleX(0); }

/* ---------- header ---------- */

/* A sticky element can only travel within its parent. The template-part
   wrapper around the header is exactly header-height, which pins the masthead
   in place — so the wrapper is dissolved and util + masthead sit in the page flow. */
.wp-block-template-part:has(> .unr-mast) { display: contents; }

.unr-mast {
	position: sticky; top: 0; z-index: 40;
	background: var(--paper);
	border-bottom: 1px solid var(--rule);
	/* minmax(0,1fr) keeps the two side columns equal regardless of content, so
	   the logo sits on the true centre line (plain 1fr lets the wider side win). */
	display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center; gap: 20px;
	padding: 0 var(--gut); height: 66px;
	transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
/* Slid out (set by main.js past half a viewport, scrolling down). */
.unr-mast.is-hidden { transform: translateY(-100%); }
/* The shop's sticky filter bar rides up to the edge while the header is away. */
.unr-plp-bar { transition: top .35s var(--ease); }
html.unr-header-hidden .unr-plp-bar { top: 0; }
.unr-mast nav ul {
	display: flex; gap: 26px; list-style: none; margin: 0; padding: 0;
}
.unr-mast nav a {
	font-family: var(--mono); font-size: 11px; letter-spacing: .15em;
	text-transform: uppercase; position: relative; padding: 6px 0;
	display: inline-block;
}
.unr-mast nav a::after {
	content: ""; position: absolute; left: 0; bottom: 2px;
	width: 100%; height: 1px; background: currentColor;
	transform: scaleX(0); transform-origin: left;
	transition: transform .45s var(--ease);
}
.unr-mast nav a:hover::after { transform: scaleX(1); }

/* The logo is the client's SVG, inlined with fill: currentColor so it takes
   the header's colour. The TM roundel is a dot at header size, so it is hidden
   there and shown in the footer and hero. */
.unr-mark { display: block; justify-self: center; color: inherit; }
.unr-mark .unr-logo { display: block; height: 22px; width: auto; }
.unr-mark .tm { display: none; }

.unr-tools { display: flex; gap: 22px; justify-content: flex-end; align-items: center; }
.unr-tools a, .unr-tools button {
	font-family: var(--mono); font-size: 11px; letter-spacing: .15em;
	text-transform: uppercase; background: none; border: 0; padding: 0;
	color: inherit; cursor: pointer;
}
.unr-bag { display: inline-flex; gap: 6px; align-items: baseline; }
.unr-tools .i { display: none; width: 20px; height: 20px; }

.unr-left { display: contents; }
.unr-search-m { display: none; }
.unr-burger {
	display: none; place-items: center; width: 40px; height: 40px; margin-left: -9px;
	border: 0; background: none; color: inherit; cursor: pointer;
}
.unr-burger svg { width: 22px; height: 22px; }

/* ---------- off-canvas menu (phones and tablets) ---------- */

.unr-menu-veil { position: fixed; inset: 0; z-index: 85; background: rgb(16 16 17 / .45); animation: unr-fade .3s var(--ease); }
@keyframes unr-fade { from { opacity: 0; } }
.unr-menu {
	position: fixed; top: 0; left: 0; bottom: 0; z-index: 86;
	width: min(420px, 100vw); background: var(--paper); color: var(--ink);
	display: flex; flex-direction: column; outline: none;
	animation: unr-menu-in .45s var(--ease);
}
@keyframes unr-menu-in { from { transform: translateX(-100%); } }
.unr-menu.is-leaving { transform: translateX(-100%); transition: transform .32s var(--ease); }
.unr-menu-top {
	display: flex; justify-content: space-between; align-items: center;
	height: var(--header-h); padding: 0 var(--gut); border-bottom: 1px solid var(--rule);
}
.unr-menu-close {
	display: inline-flex; align-items: center; gap: 8px;
	border: 0; background: none; color: var(--ink); cursor: pointer; padding: 0;
	font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
}
.unr-menu-close svg { width: 7px; height: 11px; }

.unr-menu-body { flex: 1; overflow-y: auto; scrollbar-width: none; padding: 18px var(--gut) 24px; display: flex; flex-direction: column; gap: 26px; }
.unr-menu-body::-webkit-scrollbar { display: none; }

.unr-menu-search { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--ink); padding: 6px 0; }
.unr-menu-search svg { width: 16px; height: 16px; flex: none; color: var(--ink-soft); }
.unr-menu-search input {
	flex: 1; min-width: 0; border: 0; background: none; padding: 8px 0; color: var(--ink);
	font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
}
.unr-menu-search input::placeholder { color: var(--ink-faint); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; }
.unr-menu-search input:focus { outline: none; }
.unr-menu-search input::-webkit-search-decoration, .unr-menu-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.unr-menu-primary ul, .unr-menu-sub, .unr-menu-secondary ul { list-style: none; margin: 0; padding: 0; }
.unr-menu-primary > ul > li {
	border-bottom: 1px solid var(--rule);
	opacity: 0; transform: translateY(10px);
	animation: unr-rise-in .5s var(--ease) forwards;
	animation-delay: calc(.08s + var(--i, 0) * .045s);
}
@keyframes unr-rise-in { to { opacity: 1; transform: none; } }
.unr-menu-primary a, .unr-menu-group summary {
	display: flex; justify-content: space-between; align-items: center;
	padding: 14px 0;
	font-family: var(--display); font-variation-settings: "wdth" 120, "wght" 720;
	font-size: clamp(26px, 7.5vw, 34px); line-height: 1; letter-spacing: -.02em; text-transform: uppercase;
	color: var(--ink);
}
.unr-menu-group summary { list-style: none; cursor: pointer; }
.unr-menu-group summary::-webkit-details-marker { display: none; }
.unr-menu-group summary svg { width: 8px; height: 12px; color: var(--ink-faint); transition: transform .25s var(--ease); }
.unr-menu-group[open] summary svg { transform: rotate(90deg); }
.unr-menu-sub { padding: 2px 0 14px; display: flex; flex-direction: column; gap: 2px; }
.unr-menu-sub a {
	display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
	padding: 6px 0; font: inherit; text-transform: none; letter-spacing: 0;
}
.unr-menu-sub img { grid-row: 1 / 3; width: 44px; height: 55px; object-fit: cover; background: var(--paper-lift); }
.unr-menu-sub span { font-family: var(--body); font-size: 14px; font-weight: 500; }
.unr-menu-sub small { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.unr-menu-sub a.unr-menu-sub-all { grid-template-columns: 1fr; padding-top: 10px; }
.unr-menu-sub-all span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; font-weight: 400; color: var(--ink-soft); }

.unr-menu-card { position: relative; display: block; flex: none; overflow: hidden; background: var(--ink); color: var(--paper-lift); }
.unr-menu-card img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 30%; display: block; opacity: .92; }
.unr-menu-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(12 12 13 / .05) 30%, rgb(12 12 13 / .72) 100%); }
.unr-menu-card-in { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 16px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.unr-menu-card-in .unr-eyebrow { color: rgb(244 242 239 / .78); }
.unr-menu-card-in strong {
	font-family: var(--display); font-variation-settings: "wdth" 122, "wght" 760;
	font-size: 28px; line-height: .9; letter-spacing: -.02em; text-transform: uppercase; font-weight: 400;
}
.unr-menu-card-in .unr-lnk { color: var(--paper-lift); margin-top: 4px; }

.unr-menu-secondary ul { display: flex; flex-direction: column; gap: 10px; }
.unr-menu-secondary a { font-size: var(--wp--preset--font-size--small); color: var(--ink-soft); }

.unr-menu-foot {
	border-top: 1px solid var(--rule); padding: 16px var(--gut) calc(16px + env(safe-area-inset-bottom));
	display: flex; flex-direction: column; gap: 14px;
	font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
}
.unr-menu-foot-in { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.unr-menu-foot .unr-lang summary { display: none; }
.unr-menu-foot .unr-lang ul { position: static; display: flex; gap: 22px; min-width: 0; padding: 0; background: none; border: 0; }
.unr-menu-foot .unr-lang li a { padding: 0; gap: 8px; }
.unr-menu-foot .unr-lang li a span { display: none; }
.unr-menu-foot .unr-lang li a[aria-current="true"] { box-shadow: inset 0 -1px 0 currentColor; padding-bottom: 3px; }
.unr-menu-foot-in > a { color: var(--ink-soft); }
.unr-menu-social { display: flex; gap: 22px; }
.unr-menu-social a { color: var(--ink-faint); }
html.unr-menu-open { overflow: hidden; }
@media (min-width: 1101px) { .unr-menu, .unr-menu-veil { display: none !important; } }

/* Language picker: a disclosure in the tools row. Opens without JS; main.js
   only closes it on outside click / Escape. Colours inherit, so it works
   over the transparent header in both ink and paper. */
/* The <details> must carry the same font metrics as the links beside it;
   inheriting the body's 15px line-height gave it a taller baseline strut, so
   "EN" sat a few pixels lower than SEARCH. */
.unr-lang {
	position: relative;
	display: flex; align-items: center;
	font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
	line-height: inherit;
}
.unr-lang summary {
	list-style: none; cursor: pointer;
	display: inline-flex; align-items: center; gap: 5px;
	font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.unr-lang summary::-webkit-details-marker { display: none; }
.unr-lang summary svg { width: 9px; height: 6px; transition: transform .25s var(--ease); }
.unr-lang[open] summary svg { transform: rotate(180deg); }
.unr-lang ul {
	position: absolute; top: calc(100% + 12px); right: -10px; z-index: 50;
	min-width: 148px; margin: 0; padding: 6px 0; list-style: none;
	background: var(--paper-lift); color: var(--ink);
	border: 1px solid var(--rule);
}
.unr-lang li a {
	display: flex; gap: 10px; align-items: baseline;
	padding: 9px 14px;
	font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
	color: var(--ink-soft);
}
.unr-lang li a span { font-family: var(--body); font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--ink-faint); }
.unr-lang li a:hover, .unr-lang li a[aria-current="true"] { color: var(--ink); }
.unr-lang li a[aria-current="true"] span { color: var(--ink-soft); }
.unr-bag .count { font-variant-numeric: tabular-nums; }
.unr-bag .count::before { content: "("; }
.unr-bag .count::after  { content: ")"; }

/* ---------- hero ---------- */

/* The hero is pinned (sticky at the top, beneath everything) while the page
   slides up over it, after about:blank; .unr-over carries the paper ground
   so the sections read as a sheet coming over the photo. */
.unr-hero {
	position: sticky; top: 0; z-index: 0; height: min(88vh, 780px); min-height: 460px;
	overflow: hidden; background: var(--ink);
	/* WebKit: a clipped box with a transforming child can leave a 1px seam at its
	   edge; its own layer, and media over-covering by a pixel, close it. */
	isolation: isolate; transform: translateZ(0);
}
.unr-over { position: relative; z-index: 1; background: var(--paper); }
.unr-foot { position: relative; z-index: 1; background: var(--paper); }   /* so the pinned hero never shows beneath the footer */
.unr-over > * + * { margin-block-start: 0; }
.unr-hero > img, .unr-hero > video {
	position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px);
	object-fit: cover; object-position: center 42%;
	animation: unr-settle 2.4s var(--ease) forwards;
	transform: scale(1.06);
}
@keyframes unr-settle { to { transform: scale(1); } }

.unr-hero::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg,
		rgb(12 12 13 / .46) 0%,
		rgb(12 12 13 / .06) 30%,
		rgb(12 12 13 / .16) 46%,
		rgb(12 12 13 / .58) 72%,
		rgb(12 12 13 / .86) 100%);
}

.unr-hero-in {
	position: absolute; inset: auto 0 0 0; z-index: 2;
	padding: 0 var(--gut) clamp(26px, 4vw, 52px);
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 24px; flex-wrap: wrap;
	color: var(--paper-lift);
}
.unr-hero-in .unr-eyebrow { color: rgb(244 242 239 / .88); }

.unr-hero h1 { margin: 14px 0 0; overflow: hidden; line-height: 0; }
.unr-hero h1 .unr-logo {
	display: block; width: clamp(320px, 54vw, 900px); height: auto;   /* was 92vw / 1320px: too much wordmark on a wide screen */
	transform: translateY(105%);
	animation: unr-up .95s var(--ease) .15s forwards;
}
@keyframes unr-up { to { transform: translateY(0); } }

.unr-hero-cta {
	display: flex; flex-direction: column; gap: 12px;
	align-items: flex-start; padding-bottom: 6px;
}

/* ---------- transparent header over the hero ---------- */

/* Pull the hero up under the header; it then fills the viewport edge to edge.
   WordPress puts a block-gap margin on <main>; being the hero's parent, that
   margin collapses with the hero's negative one and leaves a paper strip, so
   it is zeroed here. */
body.unr-has-hero .wp-site-blocks > main { margin-block-start: 0; }
body.unr-has-hero .unr-hero {
	margin-top: calc(-1 * var(--header-h));
	height: min(100vh, 900px);
}

/* Solid only once the hero has scrolled out from under it — .is-solid is set in main.js. */
body.unr-has-hero .unr-mast:not(.is-solid) {
	background: transparent;
	border-color: transparent;
	color: var(--paper-lift);
}
body.unr-has-hero .unr-mast:not(.is-solid) :focus-visible { outline-color: var(--paper-lift); }

/* Same transparency over light imagery (the PDP), with ink type. */
body.unr-hero-ink .unr-mast:not(.is-solid) { color: var(--ink); }
body.unr-hero-ink .unr-mast:not(.is-solid) :focus-visible { outline-color: var(--ink); }

/* ---------- ticker ---------- */

.unr-ticker {
	position: relative; z-index: 1;   /* above the pinned hero, like .unr-over */
	border-bottom: 1px solid var(--rule);
	overflow: hidden; padding: 13px 0; background: var(--paper);
}
.unr-ticker-track {
	display: flex; gap: 44px; width: max-content;
	animation: unr-slide 34s linear infinite;
}
.unr-ticker-track span {
	font-family: var(--mono); font-size: 11px; letter-spacing: .24em;
	text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
}
@keyframes unr-slide { to { transform: translateX(-50%); } }

/* ---------- section chrome ---------- */

.unr-sec { padding: var(--band) var(--gut); }

.unr-sec-head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 20px; flex-wrap: wrap;
	padding-bottom: 22px; border-bottom: 1px solid var(--rule);
	margin-bottom: 34px;
}
.unr-sec-head:only-child { margin-bottom: 0; }
.unr-sec-head h2 {
	font-family: var(--display);
	font-variation-settings: "wdth" 120, "wght" 700;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--title);
	line-height: .92; letter-spacing: -.02em; margin: 6px 0 0;
}

/* ---------- product grid ---------- */

.unr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.unr-grid.is-3 { grid-template-columns: repeat(3, 1fr); }

/* Flat, like the shop grid: no card box, the tile sits on the page colour. */
.unr-card { background: none; }
.unr-card-fig {
	position: relative; aspect-ratio: 3 / 4; overflow: hidden;
	background: var(--paper-lift); display: block;
}
.unr-card-fig img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover;
	transition: opacity .55s var(--ease), transform 1.1s var(--ease);
}
.unr-card-fig .alt { opacity: 0; }
.unr-card:hover .alt { opacity: 1; }
.unr-card:hover .unr-card-fig img { transform: scale(1.035); }

.unr-tag {
	position: absolute; top: 10px; left: 10px; z-index: 2;
	font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em;
	text-transform: uppercase;
	background: var(--ink); color: var(--paper-lift);
	padding: 4px 8px;
}
/* A light chip, so it holds over black garments as well as grey seamless. */
.unr-tag.ghost { background: rgb(244 242 239 / .92); color: var(--ink); }
.unr-tag.is-right { left: auto; right: 10px; }

.unr-sizes {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	display: flex; gap: 1px;
	transform: translateY(101%);
	transition: transform .45s var(--ease);
}
.unr-card:hover .unr-sizes,
.unr-card:focus-within .unr-sizes { transform: translateY(0); }
.unr-sizes button {
	flex: 1; font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
	padding: 11px 0; border: 0; cursor: pointer;
	background: rgb(244 242 239 / .94); color: var(--ink);
	transition: background .2s var(--ease), color .2s var(--ease);
}
.unr-sizes button:hover { background: var(--ink); color: var(--paper-lift); }
.unr-sizes button[disabled] {
	color: var(--ink-faint); text-decoration: line-through; cursor: not-allowed;
}
.unr-sizes button[disabled]:hover { background: rgb(244 242 239 / .94); color: var(--ink-faint); }

/* Name over price, stacked. Side-by-side reads as the *next* card's price
   at a 2px gutter. */
/* Name left, price right, the Collection · Category line beneath, as the grid. */
.unr-card-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "axes axes"; column-gap: 12px; row-gap: 3px; padding: 12px 0 0; }
.unr-card-meta h3 {
	grid-area: name;
	font-family: var(--body); font-size: 12px;
	font-weight: 500; letter-spacing: .01em; line-height: 1.35;
	margin: 0; text-transform: none;
}
.unr-card-meta h3 a { color: var(--ink); text-decoration: none; }
.unr-card-meta .axes { grid-area: axes; }
.unr-card-meta .price { grid-area: price; align-self: start; margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .02em; line-height: 16.2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.unr-card-meta .axes {
	font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--ink-soft); margin: 0;
}
.unr-card-meta .price del { color: var(--ink-faint); margin-right: 8px; }
.unr-card-meta .price ins { text-decoration: none; }

/* ---------- product rail ---------- */

/* One row, scroll-snapped, bleeding to the right edge so the part-tile at the
   end says "there is more" without a scrollbar. Tile width is a fraction of
   the row so 4.3 show at desktop, 2.4 at tablet, 1.4 on a phone. */
.unr-rail {
	--unr-rail-n: 4.3; --unr-rail-gap: 12px;   /* the grid's gutter; flat tiles need it so one price is not read as the next name */
	display: flex; gap: var(--unr-rail-gap);
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	margin-right: calc(-1 * var(--gut));
	padding-right: var(--gut);
}
.unr-rail::-webkit-scrollbar { display: none; }
.unr-rail > .unr-card, .unr-rail > .unr-col {
	flex: 0 0 calc((100% - var(--unr-rail-gap) * 3) / var(--unr-rail-n));
	scroll-snap-align: start;
}
/* Collections as a rail: the tiles keep their 2px editorial gutter; three fit
   on desktop, so it only scrolls once a fourth collection exists. */
.unr-rail--cols { --unr-rail-n: 3; --unr-rail-gap: 2px; }
.unr-rail--cols > .unr-col { flex-basis: calc((100% - var(--unr-rail-gap) * 2) / var(--unr-rail-n)); }
.unr-rail:focus-visible { outline-offset: -2px; }

.unr-rail-nav { display: flex; align-items: center; gap: 18px; }
.unr-rail-nav button {
	width: 34px; height: 34px;
	border: 1px solid var(--rule-hard); border-radius: 50%;
	background: none; color: var(--ink); cursor: pointer;
	display: grid; place-items: center;
	transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
}
.unr-rail-nav button svg { width: 12px; height: 12px; display: block; }
.unr-rail-nav button:hover { background: var(--ink); color: var(--paper-lift); border-color: var(--ink); }
.unr-rail-nav button[disabled] { opacity: .3; cursor: default; }
.unr-rail-nav button[disabled]:hover { background: none; color: var(--ink); border-color: var(--rule-hard); }

/* ---------- night band ---------- */

.unr-night {
	background: var(--ink); color: var(--paper);
	display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
}
.unr-night figure { margin: 0; position: relative; min-height: 520px; }
.unr-night figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.unr-night-txt {
	padding: var(--band) clamp(24px, 5vw, 80px);
	display: flex; flex-direction: column; justify-content: center; gap: 20px;
}
.unr-night-txt .unr-eyebrow { color: rgb(230 227 222 / .62); }
.unr-night-txt h1,
.unr-night-txt h2 {
	font-family: var(--display);
	font-variation-settings: "wdth" 125, "wght" 780;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--display);
	line-height: .84; letter-spacing: -.028em; margin: 0;
}
.unr-night-txt p { margin: 0; max-width: 46ch; color: rgb(230 227 222 / .82); }
.unr-night-txt .lead { color: var(--paper); font-size: var(--wp--preset--font-size--large); }
.unr-night-txt .unr-lnk { color: var(--paper); align-self: flex-start; margin-top: 6px; }

/* Collection story: the manifesto as the last section of a collection page,
   text left and the tile image right, on the paper ground. */
.unr-cstory {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 96px); align-items: center;
	padding: var(--band) var(--gut); border-top: 1px solid var(--rule);
}
.unr-cstory__text { max-width: 560px; }
.unr-cstory__text .unr-eyebrow { margin: 0 0 18px; }
.unr-cstory__h {
	margin: 0 0 22px; font-family: var(--display); font-variation-settings: "wdth" 125, "wght" 780;
	font-size: clamp(40px, 5.2vw, 76px); line-height: .9; letter-spacing: -.03em; text-transform: uppercase;
}
.unr-cstory__h span { color: var(--ink-faint); }
.unr-cstory__text p { margin: 0 0 14px; max-width: 48ch; font-size: var(--wp--preset--font-size--small); line-height: 1.55; color: var(--ink-soft); }
.unr-cstory__text .unr-cstory__lede { font-size: var(--wp--preset--font-size--medium); line-height: 1.45; color: var(--ink); }
.unr-cstory__cta { margin: 24px 0 0 !important; }
.unr-cstory__media { margin: 0; overflow: hidden; background: var(--paper-lift); }
.unr-cstory__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.unr-plp-grid + .unr-cstory { margin-top: 0; }
@media (max-width: 1020px) {
	.unr-cstory { grid-template-columns: 1fr; gap: 32px; }
	.unr-cstory__media { order: -1; }
}

/* ---------- editorial split ---------- */

/* Made in Italy: statement left, layered photographs right. */
.unr-mii {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px clamp(40px, 6vw, 96px); align-items: center;
	padding: var(--band) var(--gut); border-top: 1px solid var(--rule);
}
.unr-mii__text { max-width: 520px; }
.unr-mii__text .unr-eyebrow { margin: 0 0 18px; }
.unr-mii__h {
	margin: 0 0 22px; font-family: var(--display); font-variation-settings: "wdth" 125, "wght" 780;
	font-size: clamp(36px, 4.6vw, 68px); line-height: .92; letter-spacing: -.03em; text-transform: uppercase;
}
.unr-mii__h span { color: var(--ink-faint); }
.unr-mii__lede { margin: 0 0 32px; max-width: 46ch; font-size: var(--wp--preset--font-size--medium); line-height: 1.45; color: var(--ink-soft); }
.unr-mii__facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.unr-mii__facts li { display: grid; grid-template-columns: 36px 150px minmax(0, 1fr); gap: 12px; align-items: baseline; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.unr-mii__facts .n { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; color: var(--ink-faint); }
.unr-mii__facts strong { font-family: var(--display); font-variation-settings: "wdth" 118, "wght" 700; font-size: 14px; letter-spacing: -.005em; text-transform: uppercase; font-weight: 400; }
.unr-mii__facts li > span:last-child { font-size: var(--wp--preset--font-size--small); color: var(--ink-soft); }
.unr-mii__cta { margin: 28px 0 0; }
.unr-mii__media { position: relative; padding: 0 0 72px 72px; }
.unr-mii__media figure { margin: 0; overflow: hidden; background: var(--paper-lift); }
.unr-mii__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.unr-mii__main { aspect-ratio: 4 / 5; }
.unr-mii__detail { position: absolute; left: 0; bottom: 0; width: 44%; aspect-ratio: 4 / 5; outline: 8px solid var(--paper); }
.unr-mii__detail figcaption { position: absolute; left: 12px; bottom: 10px; font-family: var(--mono); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--paper-lift); mix-blend-mode: difference; }
@media (max-width: 1020px) {
	.unr-mii { grid-template-columns: 1fr; gap: 40px; }
	.unr-mii__text { max-width: 560px; }
}
@media (max-width: 560px) {
	/* Phones: the campaign frame alone; the layered inset only works with room around it. */
	.unr-mii__media { padding: 0; }
	.unr-mii__detail { display: none; }
	.unr-mii__facts li { grid-template-columns: 30px minmax(0, 1fr); }
	.unr-mii__facts li > span:last-child { grid-column: 2; }
}

/* ---------- events + mixes ---------- */

.unr-culture {
	display: grid; grid-template-columns: 1.1fr 1fr;
	gap: clamp(28px, 4.5vw, 68px); align-items: start;
}

.unr-event { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--ink); display: block; }
.unr-event img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; opacity: .88;
	transition: transform 1.2s var(--ease), opacity .6s var(--ease);
}
.unr-event:hover img { transform: scale(1.05); opacity: 1; }
.unr-event::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg,
		rgb(12 12 13 / .52) 0%, rgb(12 12 13 / .10) 30%,
		rgb(12 12 13 / .42) 66%, rgb(12 12 13 / .84) 100%);
}
.unr-event-in {
	position: relative; z-index: 2; height: 100%; box-sizing: border-box;   /* padding inside the tile, or the last line is clipped */
	padding: clamp(20px, 2.6vw, 34px);
	display: flex; flex-direction: column; justify-content: space-between;
	color: var(--paper-lift);
}
.unr-event-in .unr-eyebrow { color: rgb(244 242 239 / .75); }
.unr-event-in h3 {
	font-family: var(--display);
	font-variation-settings: "wdth" 120, "wght" 750;
	text-transform: uppercase;
	font-size: clamp(22px, 3.2vw, 42px);
	line-height: .9; letter-spacing: -.02em;
	margin: 0 0 14px; max-width: 16ch;
}
.unr-event-in .unr-lnk { color: var(--paper-lift); }
.unr-event-when {
	display: flex; gap: 18px; flex-wrap: wrap;
	font-family: var(--mono); font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .15em; text-transform: uppercase;
	color: rgb(244 242 239 / .8);
}

.unr-mixes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.unr-mixes li { border-bottom: 1px solid var(--rule); }
.unr-mixes a {
	display: grid; grid-template-columns: auto 1fr auto;
	align-items: center; gap: 16px; padding: 17px 2px;
	transition: padding-left .4s var(--ease);
}
.unr-mixes a:hover { padding-left: 12px; }
.unr-play {
	width: 26px; height: 26px; flex: none;
	border: 1px solid var(--rule-hard); border-radius: 50%;
	display: grid; place-items: center;
	transition: background .3s var(--ease), border-color .3s var(--ease);
}
.unr-play::before {
	content: "";
	border-left: 5px solid var(--ink);
	border-top: 3.5px solid transparent;
	border-bottom: 3.5px solid transparent;
	margin-left: 2px;
	transition: border-left-color .3s var(--ease);
}
.unr-mixes a:hover .unr-play { background: var(--ink); border-color: var(--ink); }
.unr-mixes a:hover .unr-play::before { border-left-color: var(--paper); }
.unr-mix-t { font-size: 14px; font-weight: 500; }
.unr-mix-t small {
	display: block; font-family: var(--mono); font-size: 10px;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--ink-soft); font-weight: 400; margin-top: 3px;
}
.unr-mix-len {
	font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
}

/* The homepage tile plays the latest mix; the side column carries the line and the list. */
.unr-mixtile { cursor: pointer; }
.unr-mixtile__play {
	display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0;
	font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}
.unr-mixtile .unr-play { width: 34px; height: 34px; border-color: rgb(244 242 239 / .7); }
.unr-mixtile .unr-play::before { border-left-color: var(--paper-lift); border-left-width: 7px; border-top-width: 5px; border-bottom-width: 5px; }
.unr-mixtile:hover .unr-play, .unr-mixtile.is-playing .unr-play { background: var(--paper-lift); border-color: var(--paper-lift); }
.unr-mixtile:hover .unr-play::before, .unr-mixtile.is-playing .unr-play::before { border-left-color: var(--ink); }
.unr-mixside__lede { margin: 0 0 clamp(20px, 2.4vw, 32px); max-width: 44ch; font-size: var(--wp--preset--font-size--large); line-height: 1.35; }
.unr-mixside__more { margin: 20px 0 0; }
.unr-mixes a.is-playing .unr-play { background: var(--ink); border-color: var(--ink); }
.unr-mixes a.is-playing .unr-play::before { border-left-color: var(--paper); }

/* ---------- mixes page (night ground) ---------- */
.unr-mixpage { background: var(--ink); color: var(--paper); }
.unr-mx { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; }
body.unr-has-hero .unr-mx { margin-top: calc(-1 * var(--header-h)); }
.unr-mx__fig { position: relative; margin: 0; min-height: 560px; overflow: hidden; background: #0c0c0d; }
.unr-mx__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.unr-mx__fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(12 12 13 / .5) 0%, rgb(12 12 13 / 0) 26%); }   /* keeps the header legible */
.unr-mx__txt {
	display: flex; flex-direction: column; justify-content: space-between; gap: clamp(40px, 7vh, 88px);
	padding: calc(var(--header-h) + clamp(28px, 6vh, 72px)) clamp(24px, 5vw, 80px) clamp(32px, 6vh, 64px);
}
.unr-mx .unr-eyebrow { color: rgb(230 227 222 / .62); }
.unr-mx h1 {
	margin: 14px 0 20px; font-family: var(--display); font-variation-settings: "wdth" 125, "wght" 780;
	font-size: clamp(44px, 5.8vw, 100px); line-height: .86; letter-spacing: -.03em; text-transform: uppercase; text-wrap: balance;
}
.unr-mx .lead { margin: 0; max-width: 40ch; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.35; color: rgb(230 227 222 / .82); }
.unr-mx__now { padding-top: 24px; border-top: 1px solid rgb(230 227 222 / .2); }
.unr-mx__now h2 {
	margin: 12px 0 12px; font-family: var(--display); font-variation-settings: "wdth" 120, "wght" 750;
	font-size: clamp(26px, 3vw, 46px); line-height: .92; letter-spacing: -.02em; text-transform: uppercase;
}
.unr-mx__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-family: var(--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: .15em; text-transform: uppercase; color: rgb(230 227 222 / .7); font-variant-numeric: tabular-nums; }
.unr-mx__desc { margin: 14px 0 0; max-width: 46ch; color: rgb(230 227 222 / .82); }
.unr-mx__act { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 26px; }
.unr-mx__play {
	display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 28px 0 16px;
	background: var(--paper-lift); color: var(--ink);
	font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
	transition: background .25s var(--ease);
}
.unr-mx__play:hover { background: #fff; }
.unr-mx__play .unr-play { border-color: var(--ink); background: var(--ink); }
.unr-mx__play .unr-play::before { border-left-color: var(--paper-lift); }
.unr-mx__act .unr-lnk { color: var(--paper); }
.unr-mx__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 26px 0 0; padding: 0; list-style: none; }
.unr-mx__tags li { padding: 6px 10px; border: 1px solid rgb(230 227 222 / .24); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgb(230 227 222 / .78); }

.unr-mx-list { padding: clamp(48px, 7vw, 96px) var(--gut) 0; }
.unr-mx-list__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.unr-mx-list__head h2 { margin: 0; font-family: var(--display); font-variation-settings: "wdth" 120, "wght" 750; font-size: clamp(22px, 2.4vw, 34px); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
.unr-mx-list__head .unr-eyebrow { color: rgb(230 227 222 / .62); }
.unr-mixes--night, .unr-mixes--night li { border-color: rgb(230 227 222 / .18); }
.unr-mixes--night a { color: var(--paper); padding-block: 20px; }
.unr-mixes--night .unr-play { border-color: rgb(230 227 222 / .4); }
.unr-mixes--night .unr-play::before { border-left-color: var(--paper); }
.unr-mixes--night a:hover .unr-play, .unr-mixes--night a.is-playing .unr-play { background: var(--paper); border-color: var(--paper); }
.unr-mixes--night a:hover .unr-play::before, .unr-mixes--night a.is-playing .unr-play::before { border-left-color: var(--ink); }
.unr-mixes--night .unr-mix-t { font-size: 16px; }
.unr-mixes--night .unr-mix-t small, .unr-mixes--night .unr-mix-len { color: rgb(230 227 222 / .62); }

.unr-mx-follow {
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 18px 40px;
	padding: clamp(40px, 6vw, 80px) var(--gut);
}
.unr-mx-follow p { margin: 0; max-width: 48ch; font-size: var(--wp--preset--font-size--large); line-height: 1.35; color: rgb(230 227 222 / .82); }
.unr-mx-follow .unr-lnk { color: var(--paper); }

/* docked player: Mixcloud's 60px mini widget and a close button */
.unr-player {
	position: fixed; inset: auto 0 0 0; z-index: 70; display: flex; align-items: stretch;
	background: #0c0c0d; border-top: 1px solid rgb(230 227 222 / .16);
	animation: unr-player-in .45s var(--ease);
}
.unr-player[hidden] { display: none; }
.unr-player__frame { flex: 1; min-width: 0; height: 60px; }
.unr-player__frame iframe { display: block; width: 100%; height: 60px; border: 0; }
.unr-player__x { flex: none; width: 52px; display: grid; place-items: center; background: none; border: 0; border-left: 1px solid rgb(230 227 222 / .16); color: var(--paper); cursor: pointer; }
.unr-player__x svg { width: 12px; height: 12px; }
.unr-player__x:hover { background: rgb(230 227 222 / .08); }
html.unr-playing body { padding-bottom: 60px; }
@keyframes unr-player-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .unr-player { animation: none; } }

@media (max-width: 820px) {
	.unr-mx { grid-template-columns: 1fr; min-height: 0; }
	.unr-mx__fig { min-height: 0; width: 100%; height: min(125vw, 68svh); }   /* 4:5 until the screen is short */
	.unr-mx__txt { padding: clamp(28px, 6vw, 44px) var(--gut) 40px; gap: 36px; }
	.unr-mx h1 { font-size: clamp(32px, 10.2vw, 60px); }
	.unr-mx__play { flex: 1 1 100%; box-sizing: border-box; justify-content: center; padding: 0 20px; }
	.unr-mixtile { aspect-ratio: 1 / 1; }   /* room for the title, the meta line and Play */
	.unr-mx-follow { flex-direction: column; }
}

/* ---------- collections ---------- */

.unr-col { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--ink); display: block; }
.unr-col img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; transition: transform 1.3s var(--ease);
}
.unr-col:hover img { transform: scale(1.045); }
.unr-col::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg,
		rgb(12 12 13 / 0) 30%, rgb(12 12 13 / .34) 62%, rgb(12 12 13 / .82) 100%);
}
.unr-col-in {
	position: absolute; inset: auto 0 0 0; z-index: 2;
	padding: clamp(16px, 2vw, 26px); color: var(--paper-lift);
}
.unr-col-in h3 {
	font-family: var(--display);
	font-variation-settings: "wdth" 125, "wght" 780;
	text-transform: uppercase;
	font-size: clamp(22px, 2.9vw, 40px);
	line-height: .9; letter-spacing: -.02em; margin: 0 0 6px;
}
.unr-col-in p {
	margin: 0; font-family: var(--mono); font-size: 10px;
	letter-spacing: .16em; text-transform: uppercase;
	color: rgb(244 242 239 / .78);
}

/* ---------- signup ---------- */

.unr-signup {
	border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
	padding: var(--band) var(--gut);
	display: grid; grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 5vw, 80px); align-items: center;
}
.unr-signup h2 {
	font-family: var(--display);
	font-variation-settings: "wdth" 125, "wght" 780;
	text-transform: uppercase;
	font-size: clamp(30px, 5vw, 66px);
	line-height: .85; letter-spacing: -.026em; margin: 0;
}
.unr-signup > div > p { margin: 14px 0 0; color: var(--ink-soft); max-width: 42ch; }
.unr-field { display: flex; border-bottom: 1px solid var(--ink); }
.unr-field input {
	flex: 1; min-width: 0; background: none; border: 0; padding: 12px 0;
	font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--ink);
}
.unr-field input::placeholder {
	color: var(--ink-faint); text-transform: uppercase;
	letter-spacing: .14em; font-size: 11px;
}
.unr-field input:focus { outline: none; }
.unr-field:focus-within { box-shadow: 0 1px 0 var(--ink); }
.unr-field button {
	font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
	text-transform: uppercase; padding: 0 0 0 18px;
	background: none; border: 0; color: inherit; cursor: pointer;
}
.unr-signup small {
	display: block; margin-top: 12px;
	font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--ink-soft);
}

/* ---------- footer ---------- */

.unr-foot { padding: var(--band) var(--gut) 28px; border-top: 1px solid var(--rule); }
.unr-foot > * + * { margin-block-start: 0; }

/* Five columns, after Represent: brand + email capture, then four link lists. */
.unr-foot-grid {
	display: grid; grid-template-columns: 1.7fr repeat(4, 1fr);
	gap: clamp(28px, 4vw, 64px);
	padding-bottom: clamp(36px, 5vw, 64px);
}
.unr-foot-brand { display: flex; flex-direction: column; gap: 18px; max-width: 380px; }
.unr-foot-mark { margin: 0; line-height: 0; }
.unr-foot-mark .unr-logo { display: block; width: clamp(180px, 16vw, 240px); height: auto; }
.unr-foot-tag { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--ink-soft); line-height: 1.55; }
.unr-foot-join { margin-top: 6px; }
/* The homepage already carries the full "Get in first" strip just above the footer. */
.unr-foot-join__lede { margin: 0 0 10px; font-family: var(--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }

/* A column is a <details>: open on desktop (set by main.js), a closed accordion on phones. */
.unr-foot-col summary {
	list-style: none; cursor: default;
	font-family: var(--mono); font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint);
	margin: 0 0 14px; pointer-events: none;
	display: flex; justify-content: space-between; align-items: center;
}
.unr-foot-col summary::-webkit-details-marker { display: none; }
.unr-foot-col summary::after { content: "+"; font-size: 14px; line-height: 1; color: var(--ink); display: none; }
.unr-foot-col[open] summary::after { content: "\2212"; }
.unr-foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.unr-foot-col a { font-size: var(--wp--preset--font-size--small); color: var(--ink-soft); transition: color .25s var(--ease); }
.unr-foot-col a:hover { color: var(--ink); }

.unr-foot-lang {
	display: flex; align-items: center; gap: 22px;
	padding: 18px 0; border-top: 1px solid var(--rule);
	font-family: var(--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: .16em; text-transform: uppercase;
}
.unr-foot-lang span { color: var(--ink-faint); }
.unr-foot-lang nav { display: flex; gap: 18px; }
.unr-foot-lang a { color: var(--ink-soft); padding-bottom: 2px; }
.unr-foot-lang a:hover, .unr-foot-lang a[aria-current="true"] { color: var(--ink); box-shadow: inset 0 -1px 0 currentColor; }

.unr-foot-base {
	border-top: 1px solid var(--rule); padding-top: 18px;
	display: flex; justify-content: space-between; align-items: baseline; gap: 16px 32px; flex-wrap: wrap;
}
.unr-foot-base nav { display: flex; gap: 20px; flex-wrap: wrap; }
.unr-foot-base nav a {
	font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.unr-foot-base nav a:hover { color: var(--ink); }
.unr-legal { margin: 0; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; color: var(--ink-faint); line-height: 1.8; }
.unr-legal a { color: inherit; }
.unr-legal a:hover { color: var(--ink); }

/* ---------- PLP ---------- */

.unr-plp-head {
	padding: var(--band) var(--gut) 0;
	display: flex; flex-direction: column; gap: 10px;
}
.unr-plp-head h1 {
	font-family: var(--display);
	font-variation-settings: "wdth" 125, "wght" 780;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--display);
	line-height: .84; letter-spacing: -.028em; margin: 0;
}
.unr-plp-head .desc { margin: 0; color: var(--ink-soft); max-width: 56ch; }
/* Category head: title left, intro and sub-categories right, on a rule.
   The title is smaller than the collection manifesto's so the intro can
   carry some of the weight. */
.unr-plp-head--cat { gap: 10px; padding: 28px var(--gut) 26px; border-bottom: 1px solid var(--rule); }
.unr-plp-head--cat h1 { font-size: clamp(40px, 5vw, 72px); line-height: .9; }
.unr-plp-head--cat .desc { margin-top: 6px; font-size: 15px; line-height: 1.5; max-width: 52ch; }
.unr-plp-head--cat .unr-plp-sub { margin-top: 10px; }
.unr-plp-head--cat .desc p { margin: 0; }
.unr-plp-sub { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.unr-plp-sub a { position: relative; padding-bottom: 3px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-soft); }
.unr-plp-sub a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.unr-plp-sub a:hover, .unr-plp-sub a[aria-current="page"] { color: var(--ink); }
.unr-plp-sub a[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 820px) {
	.unr-plp-head--cat { padding-bottom: 20px; }
	.unr-plp-head--cat .desc { font-size: 14px; }
}

.unr-plp-bar {
	position: sticky; top: 66px; z-index: 30;
	background: var(--paper);
	border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
	margin: clamp(28px, 4vw, 52px) 0 0;
	padding: 0 var(--gut);
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; height: 48px;
}
.unr-filters { display: flex; gap: 22px; flex-wrap: wrap; }
.unr-filters a, .unr-filters button {
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em;
	text-transform: uppercase; color: var(--ink-soft);
	background: none; border: 0; padding: 0; cursor: pointer;
	transition: color .25s var(--ease);
}
.unr-filters a:hover, .unr-filters button:hover { color: var(--ink); }
.unr-filters [aria-current="true"] { color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); }
.unr-plp-bar__right { display: flex; align-items: center; gap: 22px; flex: none; }

/* The one bar: title + count, one row of section links, Filter & sort. It
   follows the header (or the manifesto band) directly; no head above it. */
.unr-plp-bar--one { margin: 0; gap: 32px; height: 52px; }
.unr-plp-bar__title { display: flex; align-items: baseline; gap: 12px; flex: none; }
.unr-plp-bar__title h1 {
	margin: 0; font-family: var(--display); font-variation-settings: "wdth" 120, "wght" 740;
	font-size: 20px; line-height: 1; letter-spacing: -.01em; text-transform: uppercase;
}
.unr-search-page .unr-plp-bar__title h1 { text-transform: none; font-family: var(--body); font-weight: 500; font-size: 15px; }
.unr-plp-bar__count { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.unr-plp-bar--one .unr-filters { flex: 1; min-width: 0; }
.unr-plp-bar__filter {
	display: inline-flex; align-items: center; gap: 10px; flex: none; margin-left: auto;
	padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer;
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
}
.unr-plp-bar__filter svg { width: 16px; height: 12px; }
.unr-plp-bar__n { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--ink); color: var(--paper-lift); font-size: 9px; letter-spacing: 0; }
.unr-search-page .unr-plp-bar--one { margin-top: clamp(28px, 4vw, 52px); }

/* Filter & sort drawer */
.unr-plp-drawer .unr-drawer-body { gap: 30px; }
.unr-plpf h3 { margin: 0 0 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 400; color: var(--ink-soft); }
.unr-plpf ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.unr-plpf li { margin: 0; }
.unr-plpf ul a { display: flex; align-items: baseline; gap: 10px; color: var(--ink-soft); font-size: 14px; text-decoration: none; }
.unr-plpf ul a::before { content: ""; width: 14px; height: 14px; flex: none; border: 1px solid var(--ink); background: var(--paper-lift); align-self: center; }
.unr-plpf ul a[aria-current="true"] { color: var(--ink); }
.unr-plpf ul a[aria-current="true"]::before { background: var(--ink); box-shadow: inset 0 0 0 3px var(--paper-lift); }
.unr-plpf ul a small { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.unr-plpf__sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.unr-plpf__sizes a { display: grid; place-items: center; min-width: 52px; height: 40px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--rule-hard); color: var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.unr-plpf__sizes a:hover { border-color: var(--ink); }
.unr-plpf__sizes a[aria-current="true"] { background: var(--ink); color: var(--paper-lift); border-color: var(--ink); }
.unr-plpf__clear { margin: 0; }
html.unr-drawer-open { overflow: hidden; }
.unr-count {
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em;
	text-transform: uppercase; color: var(--ink-faint);
	font-variant-numeric: tabular-nums; flex: none;
}
.unr-plp-grid { padding: 12px var(--gut) var(--band); }
/* On a collection page the bar follows the black band directly. */
.unr-night + .unr-plp-bar { margin-top: 0; border-top: 0; }

/* ---------- PDP ---------- */

/* Two viewport-height rows, after Represent. Row one: the slider beside the
   buy panel. Row two: key points beside the turnaround. The media column is
   sized from the viewport height at the photos' 3:4 ratio, so a whole frame
   fits with nothing cropped and nothing to scroll for, at any screen. */
/* The media column is the viewport height times the photo's ratio
   (--unr-ratio, set per product in <head>), capped at half: a whole frame fits
   with nothing cropped or covered. 3:4 photos -> 600px at 1440x900; 4:5 photos
   with headroom -> the half split, and then the transparent header
   (body.unr-has-hero, off by default) can run the slide to the top edge. */
:root { --unr-vh: calc(100dvh - var(--header-h)); --unr-ratio: .75; }
.unr-pdp {
	display: grid;
	grid-template-columns: min(50%, calc(var(--unr-vh) * var(--unr-ratio))) 1fr;
	gap: 2px; align-items: stretch;   /* the panel fills the row, floor to ceiling */
}
body.unr-has-hero .unr-pdp {
	margin-top: calc(-1 * var(--header-h));
	grid-template-columns: 1fr 1fr;
}

/* slider */
.unr-slider { position: relative; height: var(--unr-vh); background: var(--paper-lift); }
body.unr-has-hero .unr-slider[data-hero] { height: 100dvh; }
.unr-slider-track {
	display: flex; height: 100%;
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scrollbar-width: none;
}
.unr-slider-track::-webkit-scrollbar { display: none; }
.unr-slider-track:focus-visible { outline-offset: -2px; }
.unr-slide { flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: start; }
.unr-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; cursor: zoom-in; }

/* Represent's shots are white where the header crosses them; ours can have the
   model's head there. A soft light scrim under the header keeps the ink nav
   legible without reading as a bar. Inline slider only, not the lightbox. */
body.unr-has-hero .unr-slider[data-hero]::before {
	content: ""; position: absolute; inset: 0 0 auto 0; z-index: 1; pointer-events: none;
	height: calc(var(--header-h) + 40px);
	background: linear-gradient(180deg, rgb(230 227 222 / .78) 0%, rgb(230 227 222 / .5) 55%, rgb(230 227 222 / 0) 100%);
}

/* Bare glyphs on the photo, no chip — as on Represent. The hit area stays 40px. */
.unr-slider-btn {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 40px; height: 40px; border: 0; border-radius: 0;
	background: none; color: var(--ink); cursor: pointer;
	display: grid; place-items: center;
	opacity: 0; transition: opacity .3s var(--ease);
}
.unr-slider-btn svg { width: 14px; height: 14px; }
.unr-slider-btn.is-prev { left: 14px; }
.unr-slider-btn.is-next { right: 14px; }
.unr-slider:hover .unr-slider-btn,
.unr-slider:focus-within .unr-slider-btn { opacity: 1; }
.unr-slider-btn:hover { opacity: .6; }
.unr-slider-btn[disabled] { opacity: 0 !important; pointer-events: none; }
/* Counter and model line as two quiet chips over the foot of the image (after Represent). */
.unr-slider-meta {
	position: absolute; left: 14px; bottom: 14px; z-index: 2;
	display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px;
	max-width: calc(100% - 76px);   /* clear of the full-screen button */
	pointer-events: none;
}
.unr-slider-count, .unr-slider-model {
	margin: 0; padding: 8px 11px; display: flex; align-items: center;
	background: rgb(244 242 239 / .74); color: var(--ink-soft);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.unr-slider-count {
	font-family: var(--mono); font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .15em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.unr-slider-model { font-size: 12px; line-height: 1.25; }

.unr-slider-expand {
	position: absolute; right: 14px; bottom: 12px; z-index: 2;
	width: 34px; height: 34px; border: 0; border-radius: 0;
	background: none; color: var(--ink); cursor: pointer;
	display: grid; place-items: center;
	transition: opacity .25s var(--ease);
}
.unr-slider-expand svg { width: 14px; height: 14px; }
.unr-slider-expand:hover { opacity: .6; }

/* lightbox: the same slider, full screen, on ink, images contained */
.unr-lightbox {
	border: 0; padding: 0; margin: 0;
	width: 100vw; height: 100dvh; max-width: none; max-height: none;
	background: var(--ink); color: var(--paper-lift);
}
.unr-lightbox::backdrop { background: var(--ink); }
.unr-lightbox .unr-slider { height: 100dvh; background: var(--ink); }
.unr-lightbox .unr-slide img { object-fit: contain; object-position: center; cursor: default; }
.unr-lightbox .unr-slider-btn { opacity: 1; color: var(--paper-lift); }
.unr-lightbox .unr-slider-btn:hover { opacity: .6; }
.unr-lightbox .unr-slider-count, .unr-lightbox .unr-slider-model { background: rgb(244 242 239 / .1); color: rgb(244 242 239 / .78); }
.unr-lightbox-close {
	position: absolute; top: 16px; right: 16px; z-index: 3;
	width: 40px; height: 40px; border: 0; border-radius: 50%;
	background: rgb(244 242 239 / .12); color: var(--paper-lift); cursor: pointer;
	display: grid; place-items: center;
	transition: background .25s var(--ease), color .25s var(--ease);
}
.unr-lightbox-close svg { width: 12px; height: 12px; }
.unr-lightbox-close:hover { background: var(--paper-lift); color: var(--ink); }
html.unr-lightbox-open { overflow: hidden; }

/* buy panel: ordinary page flow, no inner scroller (an inner scroller
   chained scrolls — a few pixels inside the panel, then the page). If the
   panel is taller than the viewport the page scrolls and the gallery sticks. */
/* Shorter than the column (big screens, a piece with few rows): centre it
   vertically like Represent rather than leaving the air at the bottom.
   `safe` so a taller panel still starts at the top and scrolls. */
.unr-pdp-panel { background: var(--paper-lift); display: flex; flex-direction: column; justify-content: safe center; }
.unr-slider[data-hero] { position: sticky; top: var(--header-h); }
/* At load the panel sits under the transparent header; once it sticks at the
   masthead the extra padding reads as the same air Represent leaves. */
body.unr-has-hero .unr-slider[data-hero] { top: 0; }
body.unr-has-hero .unr-pdp-panel__in { padding-top: calc(var(--header-h) + clamp(20px, 4vh, 48px)); }
.unr-pdp-panel__in {
	max-width: 620px;
	padding: clamp(36px, 6vh, 72px) clamp(24px, 4vw, 64px) clamp(28px, 4vh, 48px);
	margin: 0 auto;
	display: flex; flex-direction: column; gap: 22px;
}
.unr-pdp-panel__in > * + * { margin-block-start: 0; }
.unr-pdp-panel h1 {
	font-family: var(--display);
	font-variation-settings: "wdth" 118, "wght" 720;
	text-transform: uppercase;
	font-size: clamp(26px, 3vw, 42px);
	line-height: .92; letter-spacing: -.02em; margin: 0;
}
.unr-pdp-price {
	font-family: var(--mono); font-size: 16px;
	font-variant-numeric: tabular-nums; margin: 0;
}
.unr-pdp-price small {
	display: block; font-size: 9.5px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--ink-soft); margin-top: 5px;
}
.unr-pdp-desc { margin: 0; color: var(--ink-soft); max-width: 46ch; }
.unr-pdp-desc p { margin: 0 0 10px; }
.unr-pdp-desc p:last-child { margin-bottom: 0; }

/* Woo's variations form, restyled around the swatch row main.js inserts. */
.unr-visually-hidden {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.unr-pdp-panel .variations { width: 100%; border-collapse: collapse; margin: 0; }
.unr-pdp-panel .variations th,
.unr-pdp-panel .variations td { padding: 0; text-align: left; vertical-align: top; }
.unr-pdp-panel .variations th.label[hidden] { display: none; }
.unr-pdp-panel .variations th.label {
	display: block; padding-bottom: 10px;
	font-family: var(--mono); font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); font-weight: 400;
}
.unr-pdp-panel .variations label { font: inherit; }
.unr-pdp-panel .reset_variations {
	display: inline-block; margin-top: 10px;
	font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--ink-soft);
}
.unr-pdp-panel .single_variation_wrap { margin-top: 0; }
/* Woo's variation box is empty here (price and availability are hidden) but
   still carries a 16px bottom margin once a size is chosen — so the gap above
   the countdown used to grow on selection. */
.unr-pdp-panel .single_variation { margin: 0 !important; }
/* Woo marks the size picker up as a table; flatten it so the cell is exactly
   the swatch row with no line box of its own (that was a phantom 16px). */
.unr-pdp-panel .variations,
.unr-pdp-panel .variations tbody,
.unr-pdp-panel .variations tr,
.unr-pdp-panel .variations td.value { display: block; font-size: 0; line-height: 0; padding: 0 !important; }   /* Woo: 16px bottom padding */
.unr-pdp-panel .unr-swatch-row { font-size: 11px; line-height: normal; }
.unr-pdp-panel .woocommerce-variation-price { display: none; }  /* the panel price stays */
.unr-pdp-panel .woocommerce-variation-availability .stock { margin: 0 0 12px; }
.unr-pdp-panel .single_add_to_cart_button.disabled,
.unr-pdp-panel .single_add_to_cart_button[disabled] {
	background: var(--ink-faint); border-color: var(--ink-faint); color: var(--paper-lift); cursor: not-allowed;
}

.unr-swatch-row { display: flex; gap: 2px; flex-wrap: wrap; }
.unr-swatch-row button {
	min-width: 64px; padding: 12px 14px; height: 40px;
	font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
	background: var(--paper); color: var(--ink);
	border: 1px solid transparent; cursor: pointer;
	transition: background .2s var(--ease), color .2s var(--ease);
}
.unr-swatch-row button:hover { border-color: var(--rule-hard); }
.unr-swatch-row button[aria-pressed="true"] { background: var(--ink); color: var(--paper-lift); }
.unr-swatch-row button[disabled] {
	color: var(--ink-faint); text-decoration: line-through; cursor: not-allowed;
}
.unr-swatch-row button[disabled]:hover { border-color: transparent; }

.unr-pdp-panel form.cart { display: flex; flex-direction: column; gap: 14px; margin: 0; }
/* One piece at a time reads better here. !important because Woo's variation
   script re-shows the quantity with an inline style once a size is chosen. */
.unr-pdp-panel .quantity { display: none !important; }
.unr-pdp-panel .woocommerce-variation-add-to-cart { display: flex; }
.unr-pdp-panel .woocommerce-variation-add-to-cart .single_add_to_cart_button { flex: 1; }
.unr-pdp-panel .single_add_to_cart_button {
	width: 100%; padding: 18px 0;
	font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
	text-transform: uppercase;
	background: var(--ink); color: var(--paper-lift);
	border: 1px solid var(--ink); cursor: pointer;
	transition: background .25s var(--ease), color .25s var(--ease);
}
.unr-pdp-panel .single_add_to_cart_button:hover { background: transparent; color: var(--ink); }
.unr-pdp-panel .stock { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.unr-pdp-panel .stock.out-of-stock { color: var(--ink-soft); }

.unr-pdp-panel .wp-block-woocommerce-product-meta,
.unr-pdp-panel .product_meta {
	font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--ink-soft);
}

/* ---------- buy panel (after Represent) ---------- */

/* Represent's content column is 472px inside the 720px half — roughly 124px
   either side. Same proportion here, scaling down with the viewport. */
.unr-buy {
	position: relative; display: flex; flex-direction: column; gap: 22px;
	flex: 1 0 auto; justify-content: safe center;   /* fills the column; a short panel sits centred, a tall one starts at the top */
	box-sizing: border-box; width: 100%; max-width: calc(568px + 2 * clamp(24px, 4vw, 48px)); margin-inline: auto;   /* 568px of content plus the side padding, as before */
	padding: clamp(36px, 6vh, 72px) clamp(24px, 4vw, 48px);   /* symmetric top / bottom */
}
body.unr-has-hero .unr-buy { padding-top: calc(var(--header-h) + clamp(28px, 5vh, 56px)); }
/* The size line carries stock; Woo's own availability and reset link duplicate it. */
.unr-pdp-panel .woocommerce-variation-availability,
.unr-pdp-panel .reset_variations { display: none !important; }
.unr-buy-crumbs, .unr-buy-crumbs a, .unr-buy-crumbs nav {
	font-family: var(--mono); font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 0;
}
.unr-buy-crumbs .sep { margin: 0 6px; color: var(--ink-faint); }
.unr-buy-crumbs nav { display: block; }

.unr-buy-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.unr-buy-head h1 {
	font-family: var(--display); font-variation-settings: "wdth" 118, "wght" 720;
	text-transform: uppercase; font-size: clamp(22px, 2.2vw, 30px);
	line-height: .95; letter-spacing: -.02em; margin: 0;
}
.unr-buy-price { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; margin: 0; white-space: nowrap; }
.unr-buy-price del { color: var(--ink-faint); margin-right: 8px; }
.unr-buy-price ins { text-decoration: none; }
.unr-buy-col { margin: -12px 0 0; font-family: var(--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.unr-buy-col a { box-shadow: inset 0 -1px 0 currentColor; margin-right: 8px; }

.unr-buy-fit { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: var(--wp--preset--font-size--small); }
.unr-buy-fit p { margin: 0; }
.unr-buy-fit strong { font-weight: 600; margin-right: 6px; }
.unr-buy-fit span { color: var(--ink-soft); }
.unr-link {
	background: none; border: 0; padding: 0 0 2px; cursor: pointer; color: var(--ink-soft);
	font-family: var(--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: .14em; text-transform: uppercase;
	box-shadow: inset 0 -1px 0 currentColor; white-space: nowrap;
}
.unr-link:hover { color: var(--ink); }

.unr-size-line { margin: 0; font-size: var(--wp--preset--font-size--small); display: flex; gap: 10px; align-items: baseline; }
.unr-size-line strong { font-weight: 600; }
.unr-size-line .is-ok { color: #2f7a3a; }
.unr-size-line .is-out, .unr-size-line .is-muted { color: var(--ink-soft); }
.unr-size-line.is-nudge { animation: unr-nudge .9s var(--ease); }
@keyframes unr-nudge { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

.unr-dispatch { margin: 0 0 12px; font-size: var(--wp--preset--font-size--small); color: var(--ink-soft); }
.unr-dispatch .t { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }

/* Express checkout slot. The demo Apple Pay look-alike uses Apple's
   white-outline button style, so the ink Add to cart stays the primary action;
   Stripe's real element replaces it. */
.unr-express { margin-top: 8px; }
.unr-applepay {
	width: 100%; height: 56px; border: 2px solid var(--ink); cursor: pointer;
	background: var(--paper); color: var(--ink);
	transition: background .2s var(--ease);
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 17px; letter-spacing: -.01em;
}
.unr-applepay:hover { background: var(--paper-lift); }
.unr-applepay__with { font-weight: 400; margin-right: 2px; }
.unr-applepay__logo { width: 19px; height: 19px; margin-top: -3px; }
.unr-applepay__pay { font-weight: 600; font-size: 20px; }
.unr-express-note {
	margin: 8px 0 0; text-align: center;
	font-family: var(--mono); font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.unr-pdp-panel .woocommerce-variation-add-to-cart { flex-wrap: wrap; }
.unr-pdp-panel .woocommerce-variation-add-to-cart .unr-express { flex-basis: 100%; }

.unr-buy-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.unr-buy-rows li { border-bottom: 1px solid var(--rule); }
.unr-buy-rows button {
	width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px;
	padding: 13px 0; background: none; border: 0; cursor: pointer; color: var(--ink); text-align: left;
	font-size: var(--wp--preset--font-size--small);
}
.unr-buy-rows svg { width: 7px; height: 11px; flex: none; color: var(--ink-faint); }
.unr-buy-rows button:hover svg { color: var(--ink); }

.unr-buy-foot {
	margin-top: auto; padding-top: 18px; border-top: 1px solid var(--rule);
	display: flex; justify-content: space-between; gap: 16px;
	position: sticky; bottom: 0; background: var(--paper-lift); z-index: 3;
	padding-bottom: 4px;
}
.unr-buy-foot button {
	background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); text-align: left; white-space: nowrap;
	font-family: var(--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: .15em; text-transform: uppercase;
}
.unr-buy-foot b { display: inline-block; width: 14px; font-weight: 400; }

.unr-prose { color: var(--ink-soft); font-size: var(--wp--preset--font-size--small); max-width: 52ch; }
.unr-prose p { margin: 0 0 10px; }
.unr-prose p:last-child { margin-bottom: 0; }
.unr-prose strong { color: var(--ink); font-weight: 600; }
.unr-bullets { margin: 0; padding: 0 0 0 14px; color: var(--ink-soft); font-size: var(--wp--preset--font-size--small); display: grid; gap: 8px; }
.unr-bullets li::marker { color: var(--ink-faint); }

/* The theme's own ink button: sticky bar, size-drawer add, anywhere else. */
.unr-add {
	padding: 17px 24px; border: 1px solid var(--ink); cursor: pointer;
	background: var(--ink); color: var(--paper-lift);
	font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
	transition: background .25s var(--ease), color .25s var(--ease);
}
.unr-add:hover { background: transparent; color: var(--ink); }

/* phones: sticky buy bar (desktop never shows it) */
.unr-stickybar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
	display: none; align-items: center; gap: 14px;
	padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
	background: var(--paper-lift); border-top: 1px solid var(--rule);
	animation: unr-bar-in .3s var(--ease);
}
@keyframes unr-bar-in { from { transform: translateY(100%); } }
.unr-stickybar__meta { flex: 1; min-width: 0; }
.unr-stickybar__name {
	margin: 0; font-size: var(--wp--preset--font-size--small); font-weight: 600;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.unr-stickybar__sub {
	margin: 2px 0 0; font-family: var(--mono); font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}
.unr-stickybar__price { color: var(--ink); }
.unr-stickybar__btn { width: auto; flex: none; padding: 15px 22px; }
@media (max-width: 820px) {
	.unr-stickybar:not([hidden]) { display: flex; }
}

/* ---------- cart drawer (after Represent) ---------- */

.unr-cart-veil { position: fixed; inset: 0; z-index: 90; background: rgb(16 16 17 / .45); }
.unr-cart {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 91;
	width: min(440px, 100vw); background: var(--paper-lift); color: var(--ink);
	display: flex; flex-direction: column; outline: none;
	animation: unr-slide-in .4s var(--ease);
}
.unr-cart-head {
	display: flex; justify-content: space-between; align-items: center;
	padding: 14px 8px 14px 24px; border-bottom: 1px solid var(--rule);
}
.unr-cart-head h2 {
	margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 400;
}
.unr-cart-head sup { font-size: 8px; letter-spacing: 0; margin-left: 3px; vertical-align: top; }
/* Same close for every drawer (product details, size chart, shipping, filter). */
.unr-drawer-close,
.unr-cart-close {
	width: 40px; height: 40px; border: 0; background: none; color: var(--ink); cursor: pointer;
	display: grid; place-items: center;
}
.unr-drawer-close svg, .unr-cart-close svg { width: 12px; height: 12px; display: block; }

.unr-cart-body { flex: 1; overflow-y: auto; scrollbar-width: none; padding: 16px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.unr-cart-body::-webkit-scrollbar { display: none; }

.unr-cart-ship p { margin: 8px 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.unr-cart-ship.is-unlocked p { color: #2f7a3a; }
.unr-cart-bar { height: 2px; background: var(--rule); overflow: hidden; }
.unr-cart-bar span { display: block; height: 100%; width: 0; background: var(--ink); transition: width .5s var(--ease); }
.unr-cart-ship.is-unlocked .unr-cart-bar span { background: #2f7a3a; }

.unr-cart-summary { background: var(--paper); padding: 12px 12px 10px; }
.unr-cart-summary p { margin: 0; display: flex; justify-content: space-between; font-size: 12px; line-height: 2; }
.unr-cart-summary p span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.unr-cart-summary .note { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.6; margin-top: 4px; }
.unr-cart-summary .is-free { color: #2f7a3a; }

.unr-cart-fold { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.unr-cart-fold summary {
	list-style: none; cursor: pointer; padding: 12px 0;
	display: flex; justify-content: space-between; align-items: center;
	font-size: 12px;
}
.unr-cart-fold summary::-webkit-details-marker { display: none; }
.unr-cart-fold summary::after { content: "\203A"; font-size: 16px; line-height: 1; transition: transform .25s var(--ease); }
.unr-cart-fold[open] summary::after { transform: rotate(90deg); }
.unr-cart-fold .unr-prose { padding: 0 0 14px; font-size: 12px; }

.unr-cart-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.unr-cart-item {
	display: grid; grid-template-columns: 110px 1fr; gap: 12px;
	padding: 14px 0; border-bottom: 1px solid var(--rule);
	transition: opacity .25s var(--ease);
}
.unr-cart-item.is-busy { opacity: .5; pointer-events: none; }
.unr-cart-item-img { display: block; aspect-ratio: 4 / 5; background: var(--paper); overflow: hidden; }
.unr-cart-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.unr-cart-item-body { display: flex; flex-direction: column; min-width: 0; }
.unr-cart-item-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.unr-cart-item-name { font-size: 12px; font-weight: 500; }
.unr-cart-item-price { font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.unr-cart-item-var { margin: 6px 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.unr-cart-item-bottom { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.unr-qty { display: inline-flex; align-items: center; gap: 2px; }
.unr-qty button {
	width: 24px; height: 24px; border: 0; background: none; color: var(--ink); cursor: pointer;
	font-size: 15px; line-height: 1; display: grid; place-items: center;
}
.unr-qty button:hover { color: var(--ink-soft); }
.unr-qty [data-qty-value] { min-width: 24px; text-align: center; font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.unr-cart-item-remove { width: 24px; height: 24px; border: 0; background: none; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.unr-cart-item-remove svg { width: 11px; height: 11px; }
.unr-cart-item-remove:hover { color: var(--ink-soft); }

.unr-cart-empty { padding: 28px 0; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.unr-cart-empty p { margin: 0; color: var(--ink-soft); }

.unr-cart-rail { margin-top: 8px; }
.unr-cart-rail h3 { margin: 0 0 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 400; }
.unr-cart-rail-track {
	display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
	margin-right: -24px; padding-right: 24px; scroll-snap-type: x mandatory;
}
.unr-cart-rail-track::-webkit-scrollbar { display: none; }
.unr-cart-tile { flex: 0 0 168px; scroll-snap-align: start; }
.unr-cart-tile > a { display: block; aspect-ratio: 4 / 5; background: var(--paper); overflow: hidden; }
.unr-cart-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.unr-cart-tile-meta { display: flex; justify-content: space-between; align-items: center; padding: 8px 2px 0; }
.unr-cart-tile-meta p { margin: 0; font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.unr-cart-tile-meta button, .unr-cart-tile-meta a {
	width: 24px; height: 24px; border: 1px solid var(--rule-hard); border-radius: 50%; background: none; color: var(--ink);
	display: grid; place-items: center; font-size: 15px; line-height: 1; cursor: pointer;
	transition: background .2s var(--ease), color .2s var(--ease);
}
.unr-cart-tile-meta button:hover, .unr-cart-tile-meta a:hover { background: var(--ink); color: var(--paper-lift); }
.unr-cart-tile-meta button.is-done { background: var(--ink); color: var(--paper-lift); }
.unr-cart-tile-name { margin: 4px 2px 0; font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.unr-cart-foot { border-top: 1px solid var(--rule); padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); background: var(--paper-lift); }
.unr-cart-total { margin: 0 0 10px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.unr-cart-total span:last-child { font-variant-numeric: tabular-nums; }
.unr-cart-checkout { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; text-align: center; }
.unr-cart-checkout svg { width: 11px; height: 13px; }
.unr-cart-checkout[aria-disabled="true"] { background: var(--ink-faint); border-color: var(--ink-faint); pointer-events: none; }
.unr-cart-pay { margin: 10px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.unr-cart-pay span {
	font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--ink-soft); border: 1px solid var(--rule); padding: 3px 6px;
}
html.unr-cart-open { overflow: hidden; }
/* Bag link in the header: a brief pulse when something is added. */
.unr-bag.is-bump { animation: unr-bump .45s var(--ease); }
@keyframes unr-bump { 30% { transform: translateY(-3px); } }

/* drawers */
.unr-drawer-veil { position: fixed; inset: 0; z-index: 80; background: rgb(16 16 17 / .45); }
.unr-drawer {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 81;
	width: min(540px, 100vw); background: var(--paper-lift); color: var(--ink);
	display: flex; flex-direction: column; outline: none;
	animation: unr-slide-in .4s var(--ease);
}
@keyframes unr-slide-in { from { transform: translateX(100%); } }
.unr-drawer-head {
	display: flex; justify-content: space-between; align-items: center;
	padding: 22px clamp(20px, 3vw, 32px) 18px; border-bottom: 1px solid var(--rule);
}
.unr-drawer-head h2 { font-size: var(--wp--preset--font-size--medium); font-weight: 600; margin: 0; }
.unr-drawer-body { padding: clamp(20px, 3vw, 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 22px; }
.unr-drawer-guide { margin: 0; background: var(--paper-lift); }
.unr-drawer-guide img { display: block; width: 100%; height: auto; }
.unr-drawer-fit { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--ink-soft); }
.unr-drawer-fit strong { color: var(--ink); font-weight: 600; margin-right: 6px; }
.unr-drawer-note { margin: 0; color: var(--ink-soft); font-size: var(--wp--preset--font-size--small); }
.unr-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.unr-chart-head p { margin: 0; font-weight: 600; font-size: var(--wp--preset--font-size--small); }
.unr-unit { display: flex; gap: 12px; }
.unr-unit button {
	background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-faint);
	font-family: var(--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: .14em; text-transform: uppercase;
}
.unr-unit button[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -1px 0 currentColor; }
.unr-chart table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.unr-chart th, .unr-chart td { padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--rule); }
.unr-chart tbody th { text-align: left; font-weight: 500; color: var(--ink-soft); }
.unr-chart thead th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; font-weight: 400; color: var(--ink-soft); }
.unr-chart .is-on { background: var(--paper); color: var(--ink); font-weight: 600; }
.unr-drawer-add { margin: 4px 0; }
.unr-drawer-fold { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.unr-drawer-fold summary {
	list-style: none; cursor: pointer; padding: 16px 0;
	display: flex; justify-content: space-between; align-items: center;
	font-size: var(--wp--preset--font-size--small); font-weight: 600;
}
.unr-drawer-fold summary::-webkit-details-marker { display: none; }
.unr-drawer-fold summary::after { content: "+"; font-weight: 400; }
.unr-drawer-fold[open] summary::after { content: "\2212"; }
.unr-drawer-fold p { margin: 0 0 16px; color: var(--ink-soft); font-size: var(--wp--preset--font-size--small); }
html.unr-drawer-open { overflow: hidden; }

/* accordion */
.unr-acc { border-top: 1px solid var(--rule); }
.unr-acc details { border-bottom: 1px solid var(--rule); }
.unr-acc summary {
	list-style: none; cursor: pointer; padding: 16px 0;
	display: flex; justify-content: space-between; align-items: center;
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em;
	text-transform: uppercase;
}
.unr-acc summary::-webkit-details-marker { display: none; }
.unr-acc summary::after { content: "+"; font-size: 14px; line-height: 1; }
.unr-acc details[open] summary::after { content: "\2212"; }
.unr-acc .body { padding: 0 0 18px; color: var(--ink-soft); margin: 0; max-width: 46ch; }
.unr-acc .body p { margin: 0 0 10px; }
.unr-acc .body p:last-child { margin-bottom: 0; }

/* story: key points beside the turnaround */
.unr-story {
	display: grid;
	grid-template-columns: 1fr min(50%, calc(var(--unr-vh) * var(--unr-ratio)));
	gap: 2px; margin-top: 2px;
}
body.unr-has-hero .unr-story { grid-template-columns: 1fr 1fr; }
.unr-story-txt {
	padding: var(--band) clamp(24px, 5vw, 80px);
	display: flex; flex-direction: column; justify-content: center; gap: 22px;
	background: var(--paper);
}
.unr-story-txt h2 {
	font-family: var(--display);
	font-variation-settings: "wdth" 122, "wght" 760;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--title);
	line-height: .9; letter-spacing: -.024em; margin: 0; max-width: 14ch;
}
.unr-points { margin: 0; display: grid; gap: 16px; max-width: 46ch; }
.unr-points > div { padding-top: 14px; border-top: 1px solid var(--rule); }
.unr-points dt {
	font-family: var(--mono); font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px;
}
.unr-points dd { margin: 0; }
.unr-story-note {
	margin: 4px 0 0; max-width: 42ch;
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; line-height: 1.7;
	color: var(--ink-soft);
}
/* Grid items default to min-width:auto, which lets a 1200px GIF push its
   column past the viewport on phones; both PDP grids size from the track. */
.unr-pdp > *, .unr-story > * { min-width: 0; }
.unr-story-media { height: var(--unr-vh); background: var(--paper-lift); overflow: hidden; width: 100%; }
body.unr-has-hero .unr-story-media { height: 100dvh; }
.unr-story-media img, .unr-story-media video {
	width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}

/* ---------- scroll reveal ---------- */

.unr-rise { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.unr-rise.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */

@media (max-width: 1020px) {
	.unr-grid, .unr-grid.is-3 { grid-template-columns: repeat(2, 1fr); }
	.unr-rail { --unr-rail-n: 2.4; }
	.unr-rail--cols { --unr-rail-n: 2.2; }
	.unr-culture { grid-template-columns: 1fr; }
	.unr-pdp, .unr-story,
	body.unr-has-hero .unr-pdp, body.unr-has-hero .unr-story { grid-template-columns: 1fr; }
	/* Not sticky on phones — but it must stay positioned: it is the anchor for
	   its own counter and expand button. */
	.unr-slider[data-hero] { position: relative; top: auto; }
	.unr-buy { padding-top: clamp(28px, 5vh, 48px) !important; padding-bottom: clamp(28px, 5vh, 48px) !important; }
	/* Phones, measured off Represent: gallery is full width at
	   100svh - 112px (700px tall on a 375x812 phone), image object-cover,
	   header transparent over it; the panel follows in normal flow. The story
	   media is a fixed 4:5, text stacked and centred beneath it. */
	.unr-slider { height: calc(100svh - 112px); }
	.unr-lightbox .unr-slider { height: 100dvh; }
	body.unr-has-hero .unr-pdp { margin-top: calc(-1 * var(--header-h)); }
	body.unr-has-hero .unr-slider[data-hero] { height: calc(100svh - 112px); }
	body.unr-has-hero .unr-pdp-panel__in { padding-top: clamp(28px, 5vh, 48px); }
	.unr-story-media,
	body.unr-has-hero .unr-story-media { height: auto; aspect-ratio: 4 / 5; order: -1; }
	.unr-story-txt { padding: clamp(40px, 8vh, 72px) var(--gut); text-align: center; align-items: center; }
	.unr-story-txt h2 { max-width: none; }
	.unr-points { text-align: center; }
}
/* Tablets in portrait (iPad Pro is 1024 wide) do not fit the six links either:
   the off-canvas menu, icons and the phone-style bag apply up to 1100px. */
@media (max-width: 1100px) {
	/* The six links do not fit; the theme's own off-canvas menu takes over. */
	.unr-mast .wp-block-navigation { display: none; }
	.unr-burger { display: grid; }
	/* Icons for Search and Bag, as Represent does; the count rides the bag. */
	.unr-tools { gap: 14px; }
	.unr-tools .t { display: none; }
	.unr-tools .i { display: block; }
	/* Left: burger + search; right: account + bag. Both pairs are 20px icons
	   at the same gap, so the wordmark sits centred between equal weights. */
	.unr-left { display: flex; align-items: center; gap: 14px; }
	.unr-burger { margin-right: -9px; }
	.unr-search-m { display: grid; place-items: center; width: 20px; height: 20px; color: inherit; }
	.unr-search-m svg { width: 20px; height: 20px; }
	.unr-tools .unr-lang, .unr-tools a[aria-label="Search"] { display: none; }
	.unr-tools { gap: 14px; }
	/* Bag: 20px glyph in a 12px-padded tap box whose right padding is pulled
	   back over the gutter, so the glyph sits on the gutter line. The count is a
	   12px ink bubble on the glyph's top-right corner, flush with its right edge
	   so nothing hangs past the gutter, and hidden at zero. */
	/* The tap box ends exactly on the viewport edge (its right padding is the
	   gutter): 12px overshot the 10.72px gutter and widened the page by a pixel. */
	.unr-tools .unr-bag { position: relative; align-items: center; gap: 0; padding: 12px var(--gut) 12px 12px; margin: -12px calc(-1 * var(--gut)) -12px -12px; }
	.unr-bag .count {
		position: absolute; top: 6px; right: var(--gut); width: 12px; height: 12px;
		display: grid; place-items: center; border-radius: 50%;
		background: var(--ink); color: var(--paper-lift);
		font-size: 8px; letter-spacing: 0; line-height: 1; font-weight: 500;
	}
	body.unr-has-hero:not(.unr-hero-ink) .unr-mast:not(.is-solid) .unr-bag .count { background: var(--paper-lift); color: var(--ink); }
	.unr-bag .count.is-empty { display: none; }
	.unr-bag .count::before, .unr-bag .count::after { content: none; }
	/* Footer: brand and join form across the top, the four link columns
	   beneath (five across broke into two ragged rows on an iPad); the legal
	   line under the policy links, not beside them. */
	.unr-foot-grid { grid-template-columns: repeat(4, 1fr); }
	.unr-foot-brand { grid-column: 1 / -1; max-width: 420px; margin-bottom: 8px; }
	.unr-foot-base { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 820px) {
	:root { --header-h: 58px; }
	/* iOS zooms into any field under 16px on focus; 16px everywhere stops it
	   (account, search, coupon, join form, addresses). Labels stay as they are. */
	input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea { font-size: 16px !important; }
	.unr-fld label { font-size: 15px; }
	.unr-fld input:focus ~ label, .unr-fld input:not(:placeholder-shown) ~ label,
	.unr-fld:has(input:focus) label, .unr-fld:has(input:not(:placeholder-shown)) label { transform: translateY(-14px) scale(.7); }
	.unr-hero h1 .unr-logo { width: 92vw; }
	.unr-mast { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); height: 58px; gap: 12px; }
	.unr-mark .unr-logo { height: 17px; }

	/* Shop filter bar: chips scroll sideways in one row; count and sort beneath. */
	.unr-plp-bar { height: auto; flex-wrap: wrap; gap: 10px 0; padding: 10px var(--gut) 12px; }
	.unr-plp-bar--one { gap: 10px 0; padding: 12px var(--gut); }
	.unr-plp-bar__title { flex: 1; }
	.unr-plp-bar__filter { margin-left: 0; }
	.unr-plp-bar--one .unr-filters { order: 3; flex: none; }
	.unr-filters {
		width: 100%; flex-wrap: nowrap; gap: 18px;
		overflow-x: auto; scrollbar-width: none; white-space: nowrap;
		margin-right: calc(-1 * var(--gut)); padding-right: var(--gut);
	}
	.unr-filters::-webkit-scrollbar { display: none; }
	.unr-plp-bar__right { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; }
	.unr-plp-bar .wc-block-catalog-sorting,
	.unr-plp-bar .woocommerce-ordering,
	.unr-plp-bar select { max-width: 100%; min-width: 0; }


	.unr-night { grid-template-columns: 1fr; }
	.unr-night figure { min-height: 64vw; }
	.unr-signup { grid-template-columns: 1fr; }
	.unr-plp-bar { top: 58px; }
}
@media (max-width: 560px) {
	/* Phones: brand block on top, then the four columns as closed accordions. */
	.unr-foot-grid { grid-template-columns: 1fr; gap: 0; padding-bottom: 0; }
	.unr-foot-brand { padding-bottom: 28px; max-width: none; }
	.unr-foot-col { border-top: 1px solid var(--rule); }
	.unr-foot-col summary { margin: 0; padding: 18px 0; pointer-events: auto; cursor: pointer; color: var(--ink); font-size: 11px; }
	.unr-foot-col summary::after { display: block; }
	.unr-foot-col ul { padding: 0 0 18px; }
	.unr-foot-lang { border-top: 1px solid var(--rule); }
	.unr-foot-base { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
	.unr-foot-base nav { justify-content: center; }
	.unr-rail { --unr-rail-n: 1.4; }
	.unr-rail--cols { --unr-rail-n: 1.4; }
	/* Rails are swiped on phones; the arrows only add clutter. */
	.unr-rail-nav [data-rail-prev], .unr-rail-nav [data-rail-next] { display: none; }
	/* svh: the hero ends above Safari's toolbar rather than under it, and the
	   copy gets real air beneath it (26px read as touching the edge). */
	.unr-hero { height: 78svh; }
	.unr-hero-in { padding-bottom: 48px; gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.unr-hero h1 .unr-logo { transform: none; }
	.unr-rise { opacity: 1; transform: none; }
}

/* ============================================================
   WooCommerce block output, mapped onto the card design.
   Woo's legacy stylesheets are dequeued in functions.php, so
   these selectors are styled from scratch rather than overridden.
   ============================================================ */

/* Flat grid: no cards, tiles on the page colour with real gutters between
   them (a 1px hairline read as cramped once the photos fill the tile). */
.wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px 12px !important;   /* Woo's layout styles set 1.25rem */
	list-style: none;
	margin: 0;
	padding: 0;
}
.wc-block-product-template.columns-3 { grid-template-columns: repeat(3, 1fr); }

.wc-block-product {
	background: var(--paper);
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "img img" "name price" "sw sw";
	align-content: start; align-items: start;
	column-gap: 12px;
	margin: 0 !important;
	padding: 0;
	width: auto !important;   /* Woo's flex layout sets an inline-ish width */
}

/* Image */
.wc-block-product .wc-block-components-product-image {
	grid-area: img;
	margin: 0;
	position: relative;
	overflow: hidden;
	background: var(--paper);
}
.wc-block-product .wc-block-components-product-image img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	transition: transform 1.1s var(--ease);
}
.wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.035); }
/* Second photo on hover (pointer devices only). */
.wc-block-product .wc-block-components-product-image a { position: relative; display: block; }
.wc-block-product .unr-tile-alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s var(--ease), transform 1.1s var(--ease); }
@media (hover: hover) { .wc-block-product:hover .unr-tile-alt { opacity: 1; } }

/* Stock badge, driven off the classes Woo already puts on the <li>. */
.wc-block-product.outofstock .wc-block-components-product-image::after,
.wc-block-product.onbackorder .wc-block-components-product-image::after {
	position: absolute; top: 10px; left: 10px; z-index: 2;
	font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em;
	text-transform: uppercase;
	background: rgb(244 242 239 / .92); color: var(--ink);
	padding: 4px 8px;
}
.wc-block-product.outofstock  .wc-block-components-product-image::after { content: "Sold out"; }
.wc-block-product.onbackorder .wc-block-components-product-image::after { content: "Pre-order"; }

.wc-block-product.product_tag-limited-edition .wc-block-components-product-image::before {
	content: "Limited edition";
	position: absolute; top: 10px; right: 10px; z-index: 2;
	font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em;
	text-transform: uppercase;
	background: var(--ink); color: var(--paper-lift);
	padding: 4px 8px;
}

/* Name left, price right, one line under the image (hairlines keep the
   columns apart now, so the neighbour's price cannot be misread). */
.wc-block-product .wp-block-post-title {
	grid-area: name;
	font-family: var(--body);
	font-size: 12px;
	font-weight: 500; line-height: 1.35; letter-spacing: .01em;
	text-transform: none;
	margin: 12px 0 0;
}
.wc-block-product .wp-block-post-title a { display: block; color: var(--ink); text-decoration: none; }   /* inline-block left a phantom line under the name */
.wc-block-product .wc-block-components-product-price {
	grid-area: price; align-self: start;
	font-family: var(--mono); font-size: 11px; letter-spacing: .02em;
	font-variant-numeric: tabular-nums; white-space: nowrap;
	margin: 0; display: block; line-height: 16.2px; color: var(--ink);   /* same row height as the name, so the swatches sit tight under both */
}
/* Woo wraps the price in its own block div, which is the actual grid item;
   it carried a bottom margin that pushed the swatch row down. */
.wc-block-product .wp-block-woocommerce-product-price { grid-area: price; margin: 12px 0 0 !important; padding: 0; }
.wc-block-product .wc-block-components-product-price del { color: var(--ink-faint); margin-right: 8px; }
.wc-block-product .wc-block-components-product-price ins { text-decoration: none; }

/* Pagination */
.wp-block-query-pagination {
	display: flex; gap: 18px; justify-content: center;
	padding: var(--band) 0 0;
	font-family: var(--mono); font-size: 11px;
	letter-spacing: .15em; text-transform: uppercase;
}
.wp-block-query-pagination a { color: var(--ink-soft); }
.wp-block-query-pagination a:hover { color: var(--ink); }
.wp-block-query-pagination .current { box-shadow: inset 0 -1px 0 var(--ink); }

/* Sorting select + results count in the sticky bar */
.unr-plp-bar select {
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em;
	text-transform: uppercase; color: var(--ink);
	/* Own caret, hugging the text: the native one sits at the far edge of a
	   fixed-width control and leaves a gap after short labels. */
	width: auto; max-width: 100%; appearance: none; -webkit-appearance: none;
	text-align: right; text-align-last: right; direction: rtl;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23101011' stroke-width='1.1'><path d='m1 1 4 4 4-4'/></svg>") no-repeat right center / 10px 6px;
	border: 0; padding: 0 16px 0 0; cursor: pointer;
}
.unr-plp-bar select option { direction: ltr; text-align: left; }
.unr-plp-bar .woocommerce-result-count { margin: 0; }

/* Breadcrumbs */
.wc-block-breadcrumbs { margin: 0; }
.wc-block-breadcrumbs a { color: var(--ink-soft); }
.wc-block-breadcrumbs a:hover { color: var(--ink); }

/* PDP: gallery + add-to-cart form */

.unr-pdp-panel form.cart { display: flex; flex-direction: column; gap: 14px; margin: 0; }
/* One piece at a time reads better here. !important because Woo's variation
   script re-shows the quantity with an inline style once a size is chosen. */
.unr-pdp-panel .quantity { display: none !important; }
.unr-pdp-panel .woocommerce-variation-add-to-cart { display: flex; }
.unr-pdp-panel .woocommerce-variation-add-to-cart .single_add_to_cart_button { flex: 1; }
.unr-pdp-panel .single_add_to_cart_button {
	width: 100%; padding: 18px 0;
	font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
	text-transform: uppercase;
	background: var(--ink); color: var(--paper-lift);
	border: 1px solid var(--ink); cursor: pointer;
	transition: background .25s var(--ease), color .25s var(--ease);
}
.unr-pdp-panel .single_add_to_cart_button:hover { background: transparent; color: var(--ink); }
.unr-pdp-panel .stock { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.unr-pdp-panel .stock.out-of-stock { color: var(--ink-soft); }

.unr-pdp-panel .wp-block-woocommerce-product-meta,
.unr-pdp-panel .product_meta {
	font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--ink-soft);
}

@media (max-width: 1020px) {
	.wc-block-product-template,
	.wc-block-product-template.columns-3 { grid-template-columns: repeat(2, 1fr); gap: 22px 8px !important; }
}

/* PDP block gallery + the legacy tab list product-details still emits. */

.unr-acc .wc-tabs,
.unr-acc ul.tabs {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 22px;
	border-bottom: 1px solid var(--rule);
}
.unr-acc .wc-tabs li a,
.unr-acc ul.tabs li a {
	display: inline-block; padding: 14px 0;
	font-family: var(--mono); font-size: 10.5px;
	letter-spacing: .15em; text-transform: uppercase;
	color: var(--ink-soft);
}
.unr-acc .wc-tabs li.active a,
.unr-acc ul.tabs li.active a { color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); }

.unr-acc .woocommerce-Tabs-panel { padding: 18px 0 0; }
.unr-acc .woocommerce-Tabs-panel h2 { display: none; }  /* the tab already names it */
.unr-acc .woocommerce-Tabs-panel p { margin: 0 0 12px; color: var(--ink-soft); max-width: 46ch; }

/* Phones: two badges on a narrow tile stack instead of overlapping. Sits after
   the WooCommerce layer above, which would otherwise win on source order. */
@media (max-width: 820px) {
	.wc-block-product.product_tag-limited-edition .wc-block-components-product-image::before,
	.unr-tag.is-right { top: auto; bottom: 10px; right: auto; left: 10px; }
}

/* Grid tile colour bars (after about:blank): 16x4 in the colour, one per
   colourway, tight under the name; no state, the bars are the information. */
.wc-block-product .unr-swatches { grid-area: sw; display: flex; gap: 3px; margin: 3px 0 0; padding: 0; list-style: none; }
.wc-block-product .unr-swatches li { margin: 0; }
/* The hairline sits outside the bar, not inside it: an inset edge ate two of
   the white bar's four pixels and made it look shorter than the black. */
.wc-block-product .unr-swatches { gap: 4px; }
.wc-block-product .unr-swatches a { display: block; width: 16px; height: 4px; background: var(--c); box-shadow: 0 0 0 1px rgb(16 16 17 / .12); }

/* ---------- colourways on the PDP (after about:blank): 48x64 thumbs, the
   current one underlined, the underline follows the hover, the label reads
   the hovered colour ---------- */

.unr-colours { margin: 0; }   /* the panel's 22px gap above and below, nothing extra */
.unr-colours__row { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.unr-colours__row li { margin: 0; }
.unr-colours__row a { position: relative; display: block; width: 48px; padding-bottom: 5px; }
.unr-colours__row img { display: block; width: 48px; height: 64px; object-fit: cover; background: var(--paper-lift); }
.unr-colours__row a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); opacity: 0; transition: opacity .2s var(--ease); }
.unr-colours__row a[aria-current="page"]::after { opacity: 1; }
.unr-colours__row:hover a[aria-current="page"]::after { opacity: 0; }
.unr-colours__row a:hover::after { opacity: 1 !important; }
.unr-colours__out { position: absolute; left: 0; right: 0; top: 0; height: 64px; background: linear-gradient(to top right, transparent calc(50% - .5px), var(--ink-faint) calc(50% - .5px), var(--ink-faint) calc(50% + .5px), transparent calc(50% + .5px)); }
.unr-colours__label { margin: 4px 0 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-soft); }
.unr-colours__label .v { color: var(--ink); }

/* ---------- search overlay ---------- */

.unr-srch-veil { position: fixed; inset: 0; z-index: 88; background: rgb(16 16 17 / .35); animation: unr-fade .25s var(--ease); }
.unr-srch {
	position: fixed; left: 0; right: 0; top: 0; z-index: 89; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
	background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--rule);
	animation: unr-srch-in .35s var(--ease);
}
@keyframes unr-srch-in { from { opacity: 0; transform: translateY(-12px); } }
.unr-srch.is-leaving { opacity: 0; transform: translateY(-8px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
html.unr-search-open { overflow: hidden; }
.unr-srch__top { display: flex; align-items: center; gap: 24px; height: var(--header-h); padding: 0 var(--gut); border-bottom: 1px solid var(--rule); }
.unr-srch__form { position: relative; display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; height: 100%; }
.unr-srch__glass { width: 20px; height: 20px; flex: none; color: var(--ink-soft); }
.unr-srch__input {
	flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: var(--ink); outline: none;
	font-family: var(--body); font-size: 20px; letter-spacing: -.01em;
}
.unr-srch__input::placeholder { color: var(--ink-faint); }
.unr-srch__input::-webkit-search-decoration, .unr-srch__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.unr-srch__clear { display: grid; place-items: center; width: 28px; height: 28px; border: 0; background: none; color: var(--ink-soft); cursor: pointer; }
.unr-srch__clear svg { width: 12px; height: 12px; }
.unr-srch__close { border: 0; background: none; padding: 0; color: var(--ink); cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; }
.unr-srch__body { max-width: 1240px; margin: 0 auto; padding: 28px var(--gut) 40px; }
.unr-srch__sec + .unr-srch__sec { margin-top: 32px; }
.unr-srch__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0 0 14px; }
.unr-srch__row .unr-srch__h { margin: 0; }
.unr-srch__h { margin: 0 0 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 400; color: var(--ink-soft); }
.unr-srch__h span { color: var(--ink-faint); }
.unr-srch__all { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.unr-srch__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.unr-srch__chips li { margin: 0; }
.unr-srch__chips button, .unr-srch__chips a {
	display: inline-flex; align-items: baseline; gap: 8px; height: 36px; padding: 0 14px; box-sizing: border-box;
	border: 1px solid var(--rule-hard); background: none; color: var(--ink); cursor: pointer; text-decoration: none;
	font-family: var(--body); font-size: 13px; line-height: 34px; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.unr-srch__chips button:hover, .unr-srch__chips a:hover, .unr-srch__chips a.is-active { border-color: var(--ink); background: var(--paper-lift); }
.unr-srch__chips small { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.unr-srch__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.unr-srch__tile { margin: 0; }
.unr-srch__tile a { display: block; color: var(--ink); text-decoration: none; }
.unr-srch__tile img, .unr-srch__noimg { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper-lift); margin: 0 0 10px; transition: opacity .2s var(--ease); }   /* height:auto, or the image's 800px attribute wins */
.unr-srch__tile a:hover img, .unr-srch__tile a.is-active img { opacity: .85; }
.unr-srch__tile a.is-active { outline: 1px solid var(--ink); outline-offset: 4px; }
.unr-srch__name { display: block; font-size: 13px; font-weight: 500; line-height: 1.3; }
.unr-srch__meta { display: block; margin-top: 2px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.unr-srch__price { display: block; margin-top: 4px; font-size: 13px; font-variant-numeric: tabular-nums; }
.unr-srch__tile.is-out img { opacity: .6; }
.unr-srch__tile.is-out .unr-srch__price { color: var(--ink-faint); }
.unr-srch__none h2 { font-family: var(--display); font-variation-settings: "wdth" 118, "wght" 700; font-size: 20px; letter-spacing: -.01em; text-transform: uppercase; color: var(--ink); }
.unr-srch__none p { margin: -4px 0 14px; font-size: 13px; color: var(--ink-soft); }
.unr-search-page .unr-plp-head h1 { text-transform: none; }
.unr-search-none { max-width: 480px; padding: 24px 0 40px; font-size: 14px; color: var(--ink-soft); }
.unr-search-none p { margin: 0 0 10px; }
@media (max-width: 820px) {
	.unr-srch { bottom: 0; max-height: none; }
	.unr-srch__top { gap: 16px; }
	.unr-srch__input { font-size: 17px; }
	.unr-srch__body { padding: 20px var(--gut) 40px; }
	.unr-srch__grid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
	.unr-srch__sec + .unr-srch__sec { margin-top: 26px; }
}

/* ---------- /collections/: an editorial index ---------- */

.unr-plp-bar--cidx { border-top: 0; }
/* The frame keeps the photo's 4:5 at column width; stretching it to the
   text column's height forced the browser to blow the image up. */
.unr-chap { display: grid; grid-template-columns: 1fr 1fr; align-items: start; border-bottom: 1px solid var(--rule); scroll-margin-top: var(--header-h); }
.unr-chap__frame { position: sticky; top: var(--header-h); display: block; overflow: hidden; background: var(--paper-lift); }
.unr-chap__frame img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.4s var(--ease); }
.unr-chap__frame:hover img { transform: scale(1.03); }
.unr-chap__num { position: absolute; left: 16px; top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--paper-lift); mix-blend-mode: difference; }
.unr-chap__body { position: relative; }
.unr-chap__in { position: sticky; top: var(--header-h); box-sizing: border-box; padding: clamp(32px, 5vw, 72px) clamp(20px, 5vw, 80px) 48px; }
.unr-chap.is-flip .unr-chap__frame { order: 2; }
.unr-chap__in > .unr-eyebrow { margin: 0 0 14px; }
.unr-chap__in h2 { margin: 0; }
.unr-chap__in h2 a {
	font-family: var(--display); font-variation-settings: "wdth" 125, "wght" 780;
	font-size: clamp(48px, 7vw, 108px); line-height: .86; letter-spacing: -.03em; text-transform: uppercase; color: var(--ink); text-decoration: none;
}
.unr-chap__tag { margin: 16px 0 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.3; color: var(--ink); }
.unr-chap__copy { margin: 14px 0 0; max-width: 46ch; font-size: var(--wp--preset--font-size--small); line-height: 1.55; color: var(--ink-soft); }
.unr-chap__cta { margin: 22px 0 0; }
.unr-chap__rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 36px 0 0; padding: 28px 0 0; border-top: 1px solid var(--rule); list-style: none; }
.unr-chap__rail li { margin: 0; }
.unr-chap__rail a { display: block; color: var(--ink); text-decoration: none; }
.unr-chap__rail img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper-lift); margin: 0 0 8px; transition: opacity .25s var(--ease); }   /* height:auto, or the 800px attribute wins */
.unr-chap__rail a:hover img { opacity: .85; }
.unr-chap__rail .n { display: block; font-size: 12px; font-weight: 500; line-height: 1.3; }
.unr-chap__rail .p { display: block; margin-top: 2px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-soft); }
@media (max-width: 900px) {
	.unr-chap { grid-template-columns: 1fr; }
	.unr-chap.is-flip .unr-chap__frame { order: 0; }
	.unr-chap__in { position: static; padding: 26px var(--gut) 40px; }
	.unr-chap__frame { position: static; }
	.unr-chap__rail { grid-template-columns: repeat(2, 1fr); gap: 16px 10px; }
	.unr-cidx-jump a { font-size: 16px; }
}

/* ---------- information pages: side nav + prose ---------- */

.unr-info { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px 80px; max-width: 1120px; margin: 0 auto; padding: clamp(36px, 5vw, 64px) var(--gut) var(--band); }
.unr-info__side { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
.unr-info__side .unr-eyebrow { margin: 0 0 16px; }
.unr-info__nav { display: flex; flex-direction: column; gap: 10px; }
.unr-info__nav a { position: relative; display: inline-block; align-self: flex-start; padding-bottom: 2px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; }
.unr-info__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.unr-info__nav a:hover, .unr-info__nav a[aria-current="page"] { color: var(--ink); }
.unr-info__nav a[aria-current="page"]::after { transform: scaleX(1); }
.unr-info__updated { margin: 24px 0 0; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.unr-info__body { max-width: 68ch; }
.unr-info__body > * + * { margin-block-start: 0; }
.unr-info__body h1 { margin: 0 0 28px; font-family: var(--display); font-variation-settings: "wdth" 122, "wght" 760; font-size: clamp(36px, 4.5vw, 56px); line-height: .95; letter-spacing: -.025em; text-transform: uppercase; }
.unr-info__body .entry-content { max-width: none; margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); }
.unr-info__body .entry-content > * { margin: 0 0 14px; }
.unr-info__body .entry-content h2 { margin: 34px 0 10px; font-family: var(--display); font-variation-settings: "wdth" 118, "wght" 700; font-size: 18px; line-height: 1.15; letter-spacing: -.01em; text-transform: uppercase; }
.unr-info__body .entry-content h2:first-child { margin-top: 0; }
.unr-info__body .entry-content h3 { margin: 24px 0 8px; font-size: 15px; font-weight: 600; }
.unr-info__body .entry-content a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.unr-info__body .entry-content ul, .unr-info__body .entry-content ol { padding-left: 18px; }
.unr-info__body .entry-content li { margin: 0 0 6px; }
.unr-info__body .entry-content li::marker { color: var(--ink-faint); }
.unr-info__body .entry-content strong { font-weight: 600; }
.unr-info__body .entry-content table { width: 100%; border-collapse: collapse; font-size: 14px; }
.unr-info__body .entry-content th, .unr-info__body .entry-content td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.unr-info__body .entry-content th { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 400; color: var(--ink-soft); }
@media (max-width: 820px) {
	/* Phones: the side nav becomes one scrolling row under the header, as the
	   shop bar's filters do; the current page is scrolled into view by main.js. */
	.unr-info { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 0; }
	.unr-info__side { position: static; min-width: 0; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut); border-bottom: 1px solid var(--rule); }
	.unr-info__body { min-width: 0; max-width: none; }
	.unr-info__side .unr-eyebrow { display: none; }
	.unr-info__nav { flex-direction: row; flex-wrap: nowrap; gap: 0 22px; height: 46px; align-items: center; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.unr-info__nav::-webkit-scrollbar { display: none; }
	.unr-info__nav a { flex: none; align-self: auto; white-space: nowrap; }
	.unr-info__nav a:last-child { padding-right: var(--gut); }
	.unr-info__updated { display: none; }
	.unr-info__body h1 { margin-top: 8px; }
}

/* FAQ accordions (core details block, styled like the footer's) */
.unr-info__body .entry-content .unr-faq { margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.unr-info__body .entry-content .unr-faq:last-of-type { border-bottom: 1px solid var(--rule); }
.unr-info__body .entry-content .unr-faq summary {
	display: flex; justify-content: space-between; align-items: center; gap: 24px;
	padding: 18px 0; cursor: pointer; list-style: none;
	font-family: var(--body); font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--ink);
}
.unr-info__body .entry-content .unr-faq summary::-webkit-details-marker { display: none; }
.unr-info__body .entry-content .unr-faq summary::after {
	content: ""; flex: none; width: 10px; height: 10px;
	background: linear-gradient(var(--ink), var(--ink)) center / 10px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1px 10px no-repeat;
	transition: transform .3s var(--ease);
}
.unr-info__body .entry-content .unr-faq[open] summary::after { transform: rotate(45deg); }
.unr-info__body .entry-content .unr-faq > p { margin: -6px 0 18px; max-width: 60ch; color: var(--ink-soft); }

/* ---------- about page ---------- */

.unr-about > * + * { margin-block-start: 0; }
/* Image hero, as the homepage: the campaign frame full-bleed under the
   transparent header, the statement at its foot. */
.unr-ahero {
	position: relative; height: min(88vh, 820px); min-height: 480px;
	overflow: hidden; background: var(--ink); color: var(--paper-lift);
}
/* Under the transparent header: needs the body class's weight to beat WP's first-child margin reset. */
body.unr-has-hero .unr-ahero { margin-top: calc(-1 * var(--header-h)); }
.unr-ahero img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; object-position: center 35%; }
.unr-ahero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(12 12 13 / .42) 0%, rgb(12 12 13 / .05) 32%, rgb(12 12 13 / .2) 55%, rgb(12 12 13 / .82) 100%); }
.unr-ahero__in { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 0 var(--gut) clamp(28px, 4vw, 52px); }
.unr-ahero__in .unr-eyebrow { margin: 0 0 14px; color: rgb(244 242 239 / .88); }
.unr-ahero__in h1 {
	margin: 0 0 14px; font-family: var(--display); font-variation-settings: "wdth" 125, "wght" 780;
	font-size: clamp(52px, 9vw, 136px); line-height: .84; letter-spacing: -.035em; text-transform: uppercase;
}
.unr-ahero__lede { margin: 0; max-width: 34ch; font-size: clamp(16px, 1.5vw, 22px); line-height: 1.3; color: rgb(244 242 239 / .86); }
/* ---------- events (coming soon) ---------- */
/* The About hero at full height, darker for the night, with one button and one link. */
.unr-ev { height: min(92svh, 900px); min-height: 560px; }
.unr-ev img { object-position: center 45%; }
.unr-ev::after { background: linear-gradient(180deg, rgb(12 12 13 / .5) 0%, rgb(12 12 13 / .22) 34%, rgb(12 12 13 / .5) 62%, rgb(12 12 13 / .9) 100%); }
.unr-ev .unr-ahero__lede { max-width: 36ch; }
.unr-ev__act { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: clamp(24px, 3vw, 40px); }
.unr-ev__btn {
	display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 54px; padding: 0 28px;
	background: var(--paper-lift); color: var(--ink);
	font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
	transition: background .25s var(--ease);
}
.unr-ev__btn:hover { background: #fff; }
.unr-ev__act .unr-lnk { color: var(--paper-lift); }
.unr-ev__act .unr-lnk::after { background: currentColor; }
.unr-events .unr-sec { padding-top: var(--band) !important; }   /* the mixes section carries no top padding of its own */
@media (max-width: 820px) {
	.unr-ev { height: 84svh; min-height: 560px; }
	.unr-ev__btn { flex: 1 1 100%; }
}

/* ---------- 404 ---------- */
/* The About hero, with the message, a search field and the routes back in.
   The light "lost in the crowd" frame leans on the hero's bottom gradient. */
.unr-nf { height: min(82vh, 760px); min-height: 520px; }
.unr-nf img { object-position: center 40%; }
.unr-nf .unr-ahero__lede { max-width: 40ch; }
.unr-nf__act { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px clamp(28px, 4vw, 56px); margin-top: clamp(24px, 3vw, 40px); }
.unr-nf__search {
	position: relative; display: flex; align-items: center; gap: 10px;
	width: min(100%, 360px); padding-bottom: 9px; margin: 0;
	border-bottom: 1px solid rgb(244 242 239 / .55); color: var(--paper-lift);
	transition: border-color .2s var(--ease);
}
.unr-nf__search:hover, .unr-nf__search:focus-within { border-color: var(--paper-lift); }
.unr-nf__search svg { width: 16px; height: 16px; flex: none; }
.unr-nf__search input {
	flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; color: inherit;
	font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; outline: none; border-radius: 0;
}
.unr-nf__search input::placeholder { color: rgb(244 242 239 / .7); }
.unr-nf__search input::-webkit-search-cancel-button, .unr-nf__search input::-webkit-search-decoration { -webkit-appearance: none; }
.unr-nf__routes { display: flex; flex-wrap: wrap; gap: 6px clamp(18px, 2vw, 28px); }
.unr-nf__routes .unr-lnk { color: var(--paper-lift); }
.unr-nf__routes .unr-lnk::after { background: currentColor; }
.unr-404 .unr-sec { border-top: 0; }
@media (max-width: 820px) {
	.unr-nf { height: 78svh; min-height: 560px; }
	.unr-nf__act { flex-direction: column; align-items: stretch; gap: 20px; }
	.unr-nf__search { width: 100%; }
}

.unr-about__chap {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 80px); align-items: center;
	padding: clamp(32px, 4.5vw, 64px) var(--gut); border-top: 1px solid var(--rule);
}
.unr-about__chap:first-of-type { border-top: 0; }
.unr-about__fig img { max-height: 78vh; }
.unr-about__chap.is-flip .unr-about__fig { order: -1; }
.unr-about__text { max-width: 520px; }
.unr-about__text .unr-eyebrow { margin: 0 0 18px; }
.unr-about__text h2 {
	margin: 0 0 20px; font-family: var(--display); font-variation-settings: "wdth" 122, "wght" 760;
	font-size: clamp(32px, 4vw, 56px); line-height: .92; letter-spacing: -.03em; text-transform: uppercase;
}
.unr-about__text p { margin: 0 0 14px; max-width: 46ch; font-size: var(--wp--preset--font-size--small); line-height: 1.55; color: var(--ink-soft); }
.unr-about__text .lead { font-size: var(--wp--preset--font-size--medium); line-height: 1.4; color: var(--ink); }
.unr-about__cta { margin-top: 24px !important; }
.unr-about__fig { margin: 0; overflow: hidden; background: var(--paper-lift); }
.unr-about__fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.unr-about__close { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: clamp(40px, 6vw, 80px) var(--gut); border-top: 1px solid var(--rule); }
.unr-about__co p { margin: 0 0 14px; font-size: var(--wp--preset--font-size--small); line-height: 1.6; }
.unr-about__co .unr-eyebrow { margin: 0 0 16px; }
.unr-about__co a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.unr-about__legal { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.unr-about__next { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.unr-about__next .unr-eyebrow { margin: 0 0 12px; }
.unr-about__next a {
	font-family: var(--display); font-variation-settings: "wdth" 122, "wght" 760;
	font-size: clamp(28px, 3.2vw, 44px); line-height: 1; letter-spacing: -.025em; text-transform: uppercase; color: var(--ink); text-decoration: none;
	transition: color .2s var(--ease);
}
.unr-about__next a:hover { color: var(--ink-faint); }
@media (max-width: 1020px) {
	.unr-about__chap, .unr-about__close { grid-template-columns: 1fr; gap: 24px; }
	.unr-ahero { height: 78svh; min-height: 420px; }
	.unr-ahero__in { padding-bottom: 40px; }
	.unr-about__chap.is-flip .unr-about__fig { order: 0; }
	.unr-about__fig { order: -1; }
}