/* ==========================================================================
   Allure - storefront stylesheet
   Modelled on the APM Monaco boutique layout: white ground, hairline rules,
   wide-tracked uppercase micro-type, image-led grids.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
	--ink: #0d0d0d;
	--ink-2: #5c5c5c;
	--ink-3: #8c8c8c;
	--line: #e6e4e1;
	--line-2: #f1efec;
	--bg: #ffffff;
	--bg-soft: #f7f5f2;
	--bg-deep: #eeeae5;
	--sale: #9c1c1c;
	--emerald: #0e4b3a;
	--gold: #b3944f;
	--rose: #c08d7f;

	--font-display: "Jost", "Futura", "Century Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--wrap: 1440px;
	--gutter: 40px;
	--bar-h: 34px;
	--head-h: 74px;

	--ease: cubic-bezier(.22, .61, .36, 1);
	--dur: .45s;
}

@media (max-width: 1024px) {
	:root { --gutter: 24px; --head-h: 62px; }
}
@media (max-width: 600px) {
	:root { --gutter: 16px; }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* The off-canvas drawers park themselves past the right edge; clip (not
	   hidden) keeps them out of the scroll width without breaking sticky. */
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ink); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 .6em;
	letter-spacing: .01em;
	/* Wide tracking makes a single long product or collection name wider than a
	   phone; let it break rather than push the page sideways. */
	overflow-wrap: break-word;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.1em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

::selection { background: var(--ink); color: #fff; }

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

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--ink); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: 1760px; }
.wrap--narrow { max-width: 900px; }

.section { padding-block: clamp(48px, 6vw, 96px); }
.section--tight { padding-block: clamp(32px, 4vw, 60px); }
.section--soft { background: var(--bg-soft); }

.eyebrow {
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin: 0 0 14px;
	font-weight: 500;
}

.section-head { text-align: center; margin-bottom: clamp(28px, 3.5vw, 48px); }
.section-head h2 {
	font-size: clamp(22px, 2.5vw, 34px);
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 300;
	margin: 0;
}
.section-head p { color: var(--ink-2); margin-top: 12px; font-size: 14px; }

.section-head--row {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 16px 24px; text-align: left; flex-wrap: wrap;
}
.section-head--row h2 { font-size: clamp(20px, 2vw, 28px); overflow-wrap: anywhere; }

.link-underline {
	font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
	border-bottom: 1px solid var(--ink); padding-bottom: 3px; white-space: nowrap;
	transition: opacity .25s var(--ease);
}
.link-underline:hover { opacity: .55; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .woocommerce-message a.button,
.wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	background: var(--ink); color: #fff;
	border: 1px solid var(--ink); border-radius: 0;
	padding: 15px 34px;
	font-family: var(--font-display);
	font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
	line-height: 1; cursor: pointer;
	transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: #fff; color: var(--ink); border-color: var(--ink);
}

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }

.btn--light { background: #fff; color: var(--ink); border-color: #fff; }
.btn--light:hover { background: transparent; color: #fff; border-color: #fff; }

.btn--block { width: 100%; }

.woocommerce button.button:disabled,
.woocommerce button.button.alt:disabled { opacity: .4; padding: 15px 34px; }

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt { background: var(--ink); color: #fff; }
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { background: #fff; color: var(--ink); }

/* --------------------------------------------------------------------------
   5. Announcement bar
   -------------------------------------------------------------------------- */
.announce {
	background: var(--ink); color: #fff;
	min-height: var(--bar-h);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden; position: relative; z-index: 60;
}
/* The messages share a single grid cell, so they still cross-fade in place but
   the bar takes its height from the longest one. A fixed height cut the second
   line off every message once the Albanian copy wrapped at phone widths. */
.announce__track { display: grid; grid-template-areas: "msg"; width: 100%; }
.announce__item {
	grid-area: msg;
	display: flex; align-items: center; justify-content: center; gap: 10px;
	min-height: var(--bar-h);
	font-size: 11px; letter-spacing: .18em; text-transform: uppercase; line-height: 1.35;
	opacity: 0; transform: translateY(8px);
	transition: opacity .6s var(--ease), transform .6s var(--ease);
	padding: 5px 16px; text-align: center; text-wrap: balance;
}
.announce__item.is-active { opacity: 1; transform: none; }
.announce__item a { border-bottom: 1px solid rgba(255,255,255,.5); }
@media (max-width: 600px) {
	.announce__item { font-size: 10px; letter-spacing: .1em; gap: 6px; padding-inline: 12px; }
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: #fff;
	border-bottom: 1px solid var(--line);
	transition: box-shadow .3s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 1px 20px rgba(0,0,0,.05); }

.header-inner {
	height: var(--head-h);
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
	max-width: 1760px; margin-inline: auto; padding-inline: var(--gutter);
}

.brand { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.brand__mark {
	font-family: var(--font-display);
	font-size: clamp(19px, 1.8vw, 25px);
	letter-spacing: .34em;
	text-transform: uppercase;
	font-weight: 400;
	padding-left: .34em; /* optical balance for tracking */
}
.brand__sub {
	font-size: 8.5px; letter-spacing: .34em; text-transform: uppercase;
	color: var(--ink-3); margin-top: 5px; padding-left: .34em;
}
.brand img { max-height: 42px; width: auto; }

/* Primary navigation */
.nav-primary { justify-self: center; }
.nav-primary > ul {
	display: flex; align-items: center; gap: clamp(14px, 1.5vw, 26px);
	list-style: none; margin: 0; padding: 0;
}
.nav-primary > ul > li { position: static; }
.nav-primary > ul > li > a {
	display: flex; align-items: center; height: var(--head-h);
	font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
	font-weight: 400; color: var(--ink); position: relative; white-space: nowrap;
}
.nav-primary > ul > li > a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 22px;
	height: 1px; background: var(--ink);
	transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav-primary > ul > li:hover > a::after,
.nav-primary > ul > li.is-current > a::after { transform: scaleX(1); }
.nav-primary a.is-accent { color: var(--sale); }

/* Mega panel */
.mega {
	position: absolute; left: 0; right: 0; top: 100%;
	background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
	opacity: 0; visibility: hidden; pointer-events: none;
	transform: translateY(-8px);
	transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
	box-shadow: 0 24px 40px -28px rgba(0,0,0,.25);
}
.nav-primary > ul > li:hover > .mega,
.nav-primary > ul > li:focus-within > .mega {
	opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}
.mega__inner {
	max-width: 1760px; margin-inline: auto; padding: 44px var(--gutter) 48px;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 26%; gap: 40px;
}
.mega__col h4 {
	font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
	color: var(--ink-3); margin: 0 0 16px; font-weight: 500;
}
.mega__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.mega__col a {
	font-size: 13.5px; color: var(--ink); display: inline-block;
	transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.mega__col a:hover { opacity: .55; transform: translateX(3px); }
.mega__swatch { display: inline-flex; align-items: center; gap: 9px; }
.mega__swatch i {
	width: 13px; height: 13px; border-radius: 50%; display: inline-block;
	border: 1px solid rgba(0,0,0,.12);
}
.mega__promo { align-self: start; }
.mega__promo a { display: block; }
.mega__promo figure { margin: 0; overflow: hidden; background: var(--bg-soft); }
.mega__promo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .8s var(--ease); }
.mega__promo a:hover img { transform: scale(1.05); }
.mega__promo figcaption { margin-top: 12px; }
.mega__promo strong {
	display: block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
}
.mega__promo span { font-size: 12.5px; color: var(--ink-2); }

/* Header actions */
.header-actions {
	justify-self: end;
	display: flex; align-items: center; gap: clamp(10px, 1.2vw, 18px);
}
.icon-btn {
	width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
	position: relative; color: var(--ink); transition: opacity .25s var(--ease);
}
.icon-btn:hover { opacity: .55; }
.icon-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.25; }
.icon-btn__count {
	position: absolute; top: 3px; right: 1px;
	min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px;
	background: var(--ink); color: #fff;
	font-size: 9.5px; line-height: 16px; text-align: center; font-weight: 500;
}
.header-actions .locale {
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
	padding-right: 4px; white-space: nowrap;
}
.nav-toggle { display: none; }

@media (max-width: 1180px) {
	.nav-primary { display: none; }
	.nav-toggle { display: inline-flex; }
	.header-inner { grid-template-columns: auto minmax(0, 1fr) auto; }
	.brand { justify-self: center; grid-column: 2; text-align: center; align-items: center; }
	.nav-toggle { grid-column: 1; justify-self: start; }
	.header-actions { grid-column: 3; }
	.header-actions .locale { display: none; }
}

/* Four action icons, a burger and the wordmark do not fit a 320px phone at
   full size, and the bag was the one that fell off the right edge. */
@media (max-width: 430px) {
	.header-inner { gap: 8px; }
	.icon-btn { width: 32px; height: 32px; }
	.icon-btn svg { width: 18px; height: 18px; }
	.icon-btn__count { top: 1px; right: 0; }
	.header-actions { gap: 2px; }
	.brand__mark { font-size: 16px; letter-spacing: .2em; padding-left: .2em; }
	.brand__sub { font-size: 7.5px; letter-spacing: .2em; padding-left: .2em; margin-top: 4px; }
	.brand img { max-height: 34px; }
}

/* --------------------------------------------------------------------------
   7. Off-canvas drawers (mobile nav, cart, search)
   -------------------------------------------------------------------------- */
.scrim {
	position: fixed; inset: 0; background: rgba(13,13,13,.4);
	opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
	z-index: 90; backdrop-filter: blur(2px);
}
.scrim.is-open { opacity: 1; visibility: visible; }

.drawer {
	position: fixed; top: 0; bottom: 0; width: min(420px, 92vw);
	background: #fff; z-index: 100;
	display: flex; flex-direction: column;
	transition: transform .45s var(--ease);
}
.drawer--right { right: 0; transform: translateX(101%); }
.drawer--left { left: 0; transform: translateX(-101%); }
.drawer.is-open { transform: none; }

.drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 20px 24px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
/* The mini-cart wrapper is swapped wholesale by WooCommerce fragments, so it
   has to carry the column layout itself. */
.js-mini-cart { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.drawer__head h3 {
	margin: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500;
}
.drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 8px 24px 24px; }
.drawer__foot { flex: 0 0 auto; border-top: 1px solid var(--line); padding: 20px 24px 26px; }

/* Mobile nav list */
.mnav { list-style: none; margin: 0; padding: 0; }
.mnav li { border-bottom: 1px solid var(--line-2); }
.mnav > li > a,
.mnav__trigger {
	display: flex; align-items: center; justify-content: space-between; width: 100%;
	padding: 16px 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; text-align: left;
}
.mnav__trigger svg { width: 12px; height: 12px; transition: transform .3s var(--ease); stroke: currentColor; fill: none; }
.mnav__trigger[aria-expanded="true"] svg { transform: rotate(45deg); }
.mnav__sub { list-style: none; margin: 0; padding: 0 0 14px; display: none; }
.mnav__sub.is-open { display: block; }
.mnav__sub li { border: 0; }
.mnav__sub a { display: block; padding: 8px 0 8px 14px; font-size: 13.5px; color: var(--ink-2); }
.mnav__group {
	font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
	padding: 12px 0 4px 14px;
}

/* Search overlay */
.search-overlay {
	position: fixed; inset: 0; z-index: 105; background: #fff;
	opacity: 0; visibility: hidden; transform: translateY(-12px);
	transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
	padding-top: clamp(70px, 12vh, 140px);
}
.search-overlay.is-open { opacity: 1; visibility: visible; transform: none; }
.search-overlay__close { position: absolute; top: 22px; right: 22px; }
.search-overlay form { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--ink); }
.search-overlay input[type="search"] {
	/* min-width:0 - a text input's intrinsic size would otherwise stop the flex
	   row from shrinking, pushing the submit button off a narrow screen. */
	flex: 1; min-width: 0; border: 0; padding: 14px 0; font-family: var(--font-display);
	font-size: clamp(20px, 3vw, 34px); font-weight: 300; letter-spacing: .04em; background: transparent;
}
.search-overlay input[type="search"]:focus { outline: none; }
.search-overlay .hint { margin-top: 18px; font-size: 12px; color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; }
.search-overlay .suggest { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.search-overlay .suggest a {
	border: 1px solid var(--line); padding: 8px 16px; font-size: 12px;
	letter-spacing: .1em; text-transform: uppercase; transition: border-color .25s var(--ease);
}
.search-overlay .suggest a:hover { border-color: var(--ink); }

/* Mini cart */
.mini-cart__list { list-style: none; margin: 0; padding: 0; }
.mini-cart__list li { display: grid; grid-template-columns: 74px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line-2); }
.mini-cart__list img { width: 74px; height: 92px; object-fit: cover; background: var(--bg-soft); }
.mini-cart__list .name { font-size: 13.5px; line-height: 1.35; display: block; margin-bottom: 5px; }
.mini-cart__list .meta { font-size: 12px; color: var(--ink-3); }
.mini-cart__list .remove { font-size: 16px; color: var(--ink-3); line-height: 1; }
.mini-cart__list .remove:hover { color: var(--sale); }
.mini-cart__empty { padding: 60px 0; text-align: center; color: var(--ink-2); }
.mini-cart__total { display: flex; justify-content: space-between; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; }
.mini-cart__actions { display: grid; gap: 10px; }
.mini-cart__note { font-size: 11px; color: var(--ink-3); text-align: center; margin-top: 12px; }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--bg-deep); overflow: hidden; }
.hero__slides { position: relative; height: clamp(440px, 74vh, 760px); }
/* svh measures the viewport with the mobile browser chrome showing, so the
   slide does not overshoot the screen before the address bar collapses. */
@supports (height: 1svh) {
	.hero__slides { height: clamp(440px, 74svh, 760px); }
}
.hero__slide {
	position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease);
	display: grid; place-items: center;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__slide::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.16) 46%, rgba(0,0,0,0) 68%),
		linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.34) 100%);
}
@media (max-width: 900px) {
	.hero__slide::after { background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.12) 45%, rgba(0,0,0,.48) 100%); }
}
.hero__copy {
	position: relative; z-index: 2; text-align: left; color: #fff;
	justify-self: start;
	padding-left: clamp(24px, 7vw, 120px); padding-right: var(--gutter);
	max-width: min(600px, 52%);
	transform: translateY(14px); opacity: 0;
	transition: transform 1s var(--ease) .18s, opacity 1s var(--ease) .18s;
}
.hero__slide.is-active .hero__copy { transform: none; opacity: 1; }
.hero__copy .eyebrow { color: rgba(255,255,255,.82); }
.hero__copy h1 {
	font-size: clamp(30px, 4.6vw, 62px);
	font-weight: 300; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 16px;
	text-shadow: 0 2px 24px rgba(0,0,0,.3);
}
.hero__copy p { font-size: clamp(14px, 1.3vw, 17px); margin: 0 0 28px; max-width: 44ch; color: rgba(255,255,255,.9); }

@media (max-width: 900px) {
	.hero__copy {
		justify-self: center; text-align: center; max-width: 100%;
		padding-inline: max(24px, var(--gutter));
	}
	.hero__copy p { margin-inline: auto; }
}

.hero__dots { position: absolute; bottom: 26px; left: 0; right: 0; display: flex; justify-content: center; gap: 9px; z-index: 3; }
.hero__dots button {
	width: 30px; height: 2px; background: rgba(255,255,255,.45); transition: background .3s var(--ease);
}
.hero__dots button.is-active { background: #fff; }

.hero__arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 46px; height: 46px; display: grid; place-items: center; color: #fff;
	opacity: .8; transition: opacity .25s var(--ease);
}
.hero__arrow:hover { opacity: 1; }
.hero__arrow--prev { left: 10px; }
.hero__arrow--next { right: 10px; }
.hero__arrow svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.2; }
@media (max-width: 780px) { .hero__arrow { display: none; } }

/* --------------------------------------------------------------------------
   9. Category rail
   -------------------------------------------------------------------------- */
/* One column per category, so the row stays centred whatever the count is. */
.cat-rail {
	display: grid; grid-template-columns: repeat(var(--cat-count, 6), 1fr);
	gap: clamp(12px, 1.6vw, 26px); justify-content: center;
}
.cat-rail a { display: block; text-align: center; }
.cat-rail figure { margin: 0 0 14px; overflow: hidden; background: var(--bg-soft); border-radius: 50%; }
.cat-rail img { aspect-ratio: 1; object-fit: cover; width: 100%; transition: transform .8s var(--ease); }
.cat-rail a:hover img { transform: scale(1.07); }
.cat-rail span {
	font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; display: block;
}
@media (max-width: 900px) { .cat-rail { grid-template-columns: repeat(3, 1fr); row-gap: 26px; } }
@media (max-width: 460px) { .cat-rail { grid-template-columns: repeat(2, 1fr); } }
/* A last row holding a single tile centres itself rather than hanging left. */
@media (max-width: 900px) { .cat-rail > a:last-child:nth-child(3n + 1) { grid-column: 2; } }
@media (max-width: 460px) { .cat-rail > a:last-child:nth-child(2n + 1) { grid-column: 1 / -1; justify-self: center; width: 50%; } }

/* --------------------------------------------------------------------------
   10. Product grid & card
   -------------------------------------------------------------------------- */
/* Only the list itself is a grid - `related products` and `up-sells products`
   are <section> elements that share the .products class. */
ul.products {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: clamp(18px, 2vw, 34px) clamp(12px, 1.4vw, 24px);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { ul.products, ul.products.columns-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { ul.products, ul.products.columns-5, ul.products.columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* WooCommerce's float clearfix would otherwise occupy the first and last grid cells. */
ul.products::before, ul.products::after,
.woocommerce ul.products::before, .woocommerce ul.products::after,
.woocommerce-page ul.products::before, .woocommerce-page ul.products::after {
	content: none !important; display: none !important;
}

/* Related / up-sell sections need to clear the floated gallery + summary. */
.woocommerce div.product .related.products,
.woocommerce div.product .up-sells.products,
.woocommerce .cross-sells.products { clear: both; display: block; }

li.product { position: relative; margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important; }

.card__media {
	position: relative; display: block; overflow: hidden; background: var(--bg-soft);
	aspect-ratio: 4/5;
}
.card__link { position: absolute; inset: 0; z-index: 1; display: block; }
.card__media img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0;
	transition: opacity .6s var(--ease), transform 1.2s var(--ease);
}
.card__media .card__img--alt { opacity: 0; }
li.product:hover .card__media .card__img--alt { opacity: 1; }
li.product:hover .card__media img { transform: scale(1.04); }

.card__badges { position: absolute; top: 12px; left: 12px; z-index: 2; display: grid; gap: 6px; justify-items: start; }
.badge {
	font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
	padding: 5px 9px; background: #fff; color: var(--ink); line-height: 1;
}
.badge--sale { background: var(--sale); color: #fff; }
.badge--new { background: var(--ink); color: #fff; }
.badge--soldout { background: rgba(255,255,255,.92); color: var(--ink-2); }

.card__wish {
	position: absolute; top: 10px; right: 10px; z-index: 2;
	width: 34px; height: 34px; display: grid; place-items: center;
	background: rgba(255,255,255,.86); border-radius: 50%;
	opacity: 0; transform: translateY(-4px);
	transition: opacity .3s var(--ease), transform .3s var(--ease), background .25s;
}
li.product:hover .card__wish { opacity: 1; transform: none; }
.card__wish svg { width: 16px; height: 16px; stroke: var(--ink); fill: none; stroke-width: 1.3; }
.card__wish.is-on svg { fill: var(--sale); stroke: var(--sale); }

.card__quick {
	position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
	opacity: 0; transform: translateY(10px);
	transition: opacity .35s var(--ease), transform .35s var(--ease);
}
li.product:hover .card__quick { opacity: 1; transform: none; }
.card__quick .button,
.card__quick .added_to_cart {
	width: 100%; background: #fff; color: var(--ink); border-color: #fff;
	padding: 13px 14px; font-size: 11px; letter-spacing: .14em;
}
.card__quick .button:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.card__quick .added_to_cart { display: none; }
/* Touch devices get no hover, so both controls stay on. They must keep their
   absolute placement: .card__media is an aspect-ratio box holding only
   positioned children, so a static .card__quick lands on top of the picture. */
@media (hover: none) {
	.card__quick { opacity: 1; transform: none; }
	.card__wish { opacity: 1; transform: none; }
}

.card__body { padding-top: 14px; text-align: left; }
.card__collection {
	font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
	display: block; margin-bottom: 6px;
}
.card__title {
	font-size: 13.5px; line-height: 1.4; margin: 0 0 7px; font-weight: 400;
	font-family: var(--font-body); letter-spacing: .01em;
}
.card__title a { display: block; }
li.product:hover .card__title a { text-decoration: underline; text-underline-offset: 3px; }

.card__price { font-size: 13.5px; letter-spacing: .02em; display: flex; align-items: baseline; gap: 8px; }
.card__price del { color: var(--ink-3); opacity: 1; font-size: 12.5px; }
.card__price ins { text-decoration: none; color: var(--sale); }
.card__price .amount { font-variant-numeric: tabular-nums; }

.card__swatches { display: flex; gap: 6px; margin-top: 9px; }
.card__swatches i {
	width: 12px; height: 12px; border-radius: 50%; display: block;
	border: 1px solid rgba(0,0,0,.14);
}

.card__rating { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--ink-3); }
.card__rating .stars { color: var(--gold); letter-spacing: 1px; font-size: 11px; }

/* Horizontal carousel variant */
.rail { position: relative; }
.rail__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.rail__viewport::-webkit-scrollbar { display: none; }
.rail__track {
	--rail-gap: clamp(12px, 1.4vw, 24px);
	/* A fixed track size is what makes the row overflow and scroll - minmax(0, x)
	   would let the tracks shrink to fit instead. */
	display: grid; grid-auto-flow: column;
	grid-auto-columns: calc((100% - 3 * var(--rail-gap)) / 4);
	gap: var(--rail-gap);
	list-style: none; margin: 0; padding: 0;
}
.rail__track > li { scroll-snap-align: start; }
@media (max-width: 1100px) { .rail__track { grid-auto-columns: calc((100% - 2 * var(--rail-gap)) / 3); } }
@media (max-width: 760px) { .rail__track { grid-auto-columns: calc((100% - var(--rail-gap)) / 2); } }
@media (max-width: 480px) { .rail__track { grid-auto-columns: 76%; } }

.rail__nav { display: flex; gap: 8px; }
.rail__nav button {
	width: 40px; height: 40px; border: 1px solid var(--line); display: grid; place-items: center;
	transition: border-color .25s var(--ease), background .25s var(--ease), color .25s;
}
.rail__nav button:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.rail__nav button:disabled { opacity: .3; pointer-events: none; }
.rail__nav svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.3; }

/* --------------------------------------------------------------------------
   11. Editorial blocks
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.split--reverse .split__media { order: 2; }
.split__media { position: relative; min-height: clamp(320px, 42vw, 620px); overflow: hidden; background: var(--bg-soft); }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__copy {
	display: flex; flex-direction: column; justify-content: center;
	padding: clamp(36px, 6vw, 96px); background: var(--bg-soft);
}
.split__copy h2 {
	font-size: clamp(24px, 3vw, 42px); font-weight: 300; letter-spacing: .1em;
	text-transform: uppercase; margin: 0 0 20px;
}
.split__copy p { color: var(--ink-2); max-width: 46ch; }
.split__copy .btn { align-self: flex-start; margin-top: 14px; }
@media (max-width: 900px) {
	.split { grid-template-columns: 1fr; }
	.split--reverse .split__media { order: 0; }
	.split__media { min-height: 340px; }
}

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 24px); }
.tiles--2 { grid-template-columns: repeat(2, 1fr); }
.tile { position: relative; display: block; overflow: hidden; background: var(--bg-soft); }
.tile img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform 1s var(--ease); }
.tile:hover img { transform: scale(1.05); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.5) 100%); }
.tile__copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(18px, 2vw, 30px); color: #fff; }
.tile__copy h3 {
	font-size: clamp(15px, 1.5vw, 20px); letter-spacing: .16em; text-transform: uppercase;
	font-weight: 400; margin: 0 0 6px;
}
.tile__copy span { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; border-bottom: 1px solid rgba(255,255,255,.6); padding-bottom: 2px; }
@media (max-width: 860px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tiles, .tiles--2 { grid-template-columns: 1fr; } }

/* Service strip */
.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; text-align: center; }
.services > div { padding: 8px 10px; }
.services svg { width: 26px; height: 26px; margin: 0 auto 14px; stroke: var(--ink); fill: none; stroke-width: 1.1; }
.services h4 { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 8px; font-weight: 500; }
.services p { font-size: 12.5px; color: var(--ink-2); margin: 0; }
@media (max-width: 860px) { .services { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; } }

/* Instagram strip */
.iggrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.iggrid a { position: relative; display: block; overflow: hidden; background: var(--bg-soft); }
.iggrid img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .8s var(--ease); }
.iggrid a:hover img { transform: scale(1.08); }
.iggrid a::after {
	content: ""; position: absolute; inset: 0; background: rgba(13,13,13,.28);
	opacity: 0; transition: opacity .3s var(--ease);
}
.iggrid a:hover::after { opacity: 1; }
@media (max-width: 860px) { .iggrid { grid-template-columns: repeat(3, 1fr); } }

/* Newsletter */
.newsletter { text-align: center; }
.newsletter form { display: flex; gap: 0; max-width: 520px; margin: 24px auto 0; border-bottom: 1px solid var(--ink); }
.newsletter input[type="email"] {
	flex: 1; border: 0; background: transparent; padding: 14px 4px; font-family: var(--font-body); font-size: 14px;
}
.newsletter input[type="email"]:focus { outline: none; }
.newsletter button { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 0 6px; }
.newsletter .small { font-size: 11.5px; color: var(--ink-3); margin-top: 14px; }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); background: #fff; }
.footer-top { padding-block: clamp(44px, 5vw, 76px); }
.footer-cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: clamp(24px, 3vw, 48px); }
.footer-brand .brand__mark { font-size: 22px; }
.footer-brand p { font-size: 13px; color: var(--ink-2); margin-top: 16px; max-width: 30ch; }
.footer-col h4 { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 18px; font-weight: 500; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-col a { font-size: 13px; color: var(--ink-2); transition: color .25s var(--ease); }
.footer-col a:hover { color: var(--ink); }
.socials { display: flex; gap: 14px; margin-top: 22px; }
.socials a { width: 20px; height: 20px; color: var(--ink); transition: opacity .25s var(--ease); }
.socials a:hover { opacity: .5; }
.socials svg { width: 20px; height: 20px; fill: currentColor; }
@media (max-width: 1000px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer-cols { grid-template-columns: 1fr; } }

.footer-bottom {
	border-top: 1px solid var(--line); padding-block: 22px;
	display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.footer-bottom p, .footer-bottom ul { margin: 0; font-size: 11.5px; color: var(--ink-3); }
.footer-bottom ul { list-style: none; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.pay { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pay span {
	border: 1px solid var(--line); padding: 4px 8px; font-size: 9.5px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   13. Shop / archive
   -------------------------------------------------------------------------- */
.page-hero { padding-block: clamp(28px, 4vw, 52px) clamp(20px, 2.4vw, 30px); text-align: center; }
.page-hero h1 {
	font-size: clamp(24px, 3vw, 40px); font-weight: 300; letter-spacing: .14em; text-transform: uppercase; margin: 0;
}
.page-hero p { color: var(--ink-2); max-width: 60ch; margin: 14px auto 0; font-size: 14px; }
.page-hero .count { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-top: 12px; }

/* Campaign picture above a collection archive. */
.page-banner { margin: 0; position: relative; overflow: hidden; background: var(--bg-soft); }
.page-banner img {
	display: block; width: 100%; height: clamp(200px, 32vw, 460px); object-fit: cover; object-position: center 40%;
}

.crumbs { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding-block: 16px; }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--ink); }
.woocommerce .woocommerce-breadcrumb { margin: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.woocommerce .woocommerce-breadcrumb a { color: var(--ink-3); }

.shop-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(24px, 3vw, 52px); align-items: start; }
/* Grid items default to min-width:auto, so one stubborn child - WooCommerce's
   pagination row - could widen the column past the viewport and drag the whole
   catalogue off screen. */
.shop-layout > * { min-width: 0; }
@media (max-width: 1000px) {
	.shop-layout { grid-template-columns: minmax(0, 1fr); }
	.shop-sidebar { display: none; }
	/* In the narrow layout the rail is an inline panel above the grid, so it
	   must not keep the sticky behaviour it has as a desktop column. */
	.shop-sidebar.is-open { display: block; position: static; margin-bottom: 28px; }
}

.shop-sidebar { position: sticky; top: calc(var(--head-h) + 18px); }
.facet { border-bottom: 1px solid var(--line); padding-block: 20px; }
.facet:first-child { padding-top: 0; }
.facet__head {
	display: flex; align-items: center; justify-content: space-between; width: 100%;
	font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
}
.facet__head svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.4; transition: transform .3s var(--ease); }
.facet__head[aria-expanded="true"] svg { transform: rotate(45deg); }
.facet__body { padding-top: 16px; display: grid; gap: 10px; }
.facet__body[hidden] { display: none; }
.facet__body a, .facet__body label { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 9px; cursor: pointer; }
.facet__body a:hover, .facet__body label:hover { color: var(--ink); }
.facet__body a.is-active { color: var(--ink); font-weight: 500; }
.facet__body .swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.14); flex: 0 0 auto; }
.facet__body .count { margin-left: auto; font-size: 11px; color: var(--ink-3); }

.shop-toolbar {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding-block: 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
	margin-bottom: clamp(20px, 2.4vw, 34px); flex-wrap: wrap;
}
.shop-toolbar .woocommerce-result-count { margin: 0; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.shop-toolbar .woocommerce-ordering { margin: 0; }
.shop-toolbar select {
	border: 0; background: transparent; font-family: var(--font-body); font-size: 11.5px;
	letter-spacing: .12em; text-transform: uppercase; padding: 6px 22px 6px 0; cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230d0d0d' stroke-width='1.2'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right center;
}
.filter-toggle { display: none; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; align-items: center; gap: 8px; }
.filter-toggle svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.3; }
@media (max-width: 1000px) { .filter-toggle { display: inline-flex; } }

/* The sort options are long sentences, so the select carries a wide intrinsic
   size; give it its own full-width row rather than let it set the toolbar's. */
.shop-toolbar .woocommerce-result-count,
.shop-toolbar .woocommerce-ordering { min-width: 0; max-width: 100%; }
.shop-toolbar select { max-width: 100%; }
@media (max-width: 600px) {
	.shop-toolbar { gap: 12px 16px; }
	.shop-toolbar .woocommerce-ordering { flex: 1 0 100%; }
	.shop-toolbar select { width: 100%; }
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip {
	display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line);
	padding: 6px 12px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.chip a { color: var(--ink-3); font-size: 13px; line-height: 1; }
.chip a:hover { color: var(--sale); }

.subcat-pills { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-bottom: clamp(22px, 2.6vw, 36px); }
.subcat-pills a {
	border: 1px solid var(--line); padding: 9px 18px; font-size: 11.5px;
	letter-spacing: .12em; text-transform: uppercase; transition: all .25s var(--ease);
}
.subcat-pills a:hover, .subcat-pills a.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }

/* Pagination */
.woocommerce nav.woocommerce-pagination { margin: clamp(36px, 4vw, 64px) 0 0; text-align: center; }
/* A 42-page catalogue lists a dozen links; without wrapping the row is ~420px
   wide and refuses to shrink. */
.woocommerce nav.woocommerce-pagination ul { border: 0; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	min-width: 40px; height: 40px; line-height: 38px; padding: 0 12px;
	border: 1px solid var(--line); font-size: 12.5px; color: var(--ink);
	transition: border-color .25s var(--ease), background .25s var(--ease), color .25s;
}
.woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Notices */
.woocommerce-notices-wrapper:empty { display: none; }

/* Message then action, with the glyph in a gutter of its own. WooCommerce prints
   the message as a bare text node - no element, sometimes after the action link -
   so it can only be positioned by the flow it sits in: a track-based layout gives
   that anonymous item a cell by auto-placement, and the 26px glyph track is where
   it lands, one character per line. Flex leaves it where the markup puts it, the
   order below sends the action to the end, and the glyph stays out of the flow so
   a long message never breaks to the line below it. */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	position: relative;
	display: flex; flex-wrap: wrap; align-items: center;
	column-gap: 18px; row-gap: 12px;
	border: 1px solid var(--line); border-left: 2px solid var(--ink); border-radius: 2px;
	background: #fff; box-shadow: 0 18px 40px -30px rgba(0, 0, 0, .55);
	font-size: 14px; line-height: 1.45; color: var(--ink);
	padding: 18px 20px 18px 58px; margin: 0 0 30px; list-style: none;
	animation: allure-notice .45s var(--ease) both;
}

/* WooCommerce clears its own float with an ::after, which in a flex container
   would count as an item and pull a gap along behind the message. */
.woocommerce-message::after, .woocommerce-info::after, .woocommerce-error::after { display: none; }

/* Buttons and the bare anchors checkout uses for "log in" and "add a coupon":
   last in the row, hard right, and on their own line when the message is long.
   WooCommerce's own `.woocommerce a.button { margin: 0 }` outweighs a selector
   made of classes alone, so the button cases name their element too. */
.woocommerce-message > a, .woocommerce-message > a.button, .woocommerce-message > button.button,
.woocommerce-info > a, .woocommerce-info > a.button, .woocommerce-info > button.button,
.woocommerce-error > a, .woocommerce-error > a.button, .woocommerce-error > button.button {
	order: 1; margin-left: auto; white-space: nowrap;
}

.woocommerce-message > .button,
.woocommerce-info > .button,
.woocommerce-error > .button { padding: 12px 22px; font-size: 10.5px; }

/* A round glyph in place of WooCommerce's default pseudo-element, parked in the
   left gutter and lined up with the first line of the message. */
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before {
	content: ""; display: block; width: 26px; height: 26px;
	position: absolute; left: 20px; top: 15px; right: auto; bottom: auto;
	margin: 0; padding: 0; font-size: 0;
	border-radius: 50%; background-color: var(--ink);
	background-repeat: no-repeat; background-position: center; background-size: 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}
.woocommerce-info::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7.4v.2'/%3E%3C/svg%3E");
}
.woocommerce-error {
	border-left-color: var(--sale);
}
.woocommerce-error::before {
	background-color: var(--sale);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 7v6.5M12 16.6v.2'/%3E%3C/svg%3E");
}

/* An error list keeps one glyph for the block, and one line per error. Notices
   are printed inside .entry-content, whose editorial list rules would otherwise
   pull the list out from under its own glyph and space the lines twice - hence
   the doubled selectors, which have to out-weigh `.entry-content ul`. */
.entry-content ul.woocommerce-error,
ul.woocommerce-error { padding-left: 58px; }
.entry-content .woocommerce-error li,
.woocommerce-error li { list-style: none; flex: 1 1 100%; margin: 0; }

@keyframes allure-notice {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   14. Single product
   -------------------------------------------------------------------------- */
.woocommerce div.product { margin-top: 8px; }
.woocommerce div.product .product_title {
	font-size: clamp(22px, 2.4vw, 32px); font-weight: 300; letter-spacing: .06em; margin: 0 0 14px;
}
.single-product .product-collection {
	font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px;
}
.woocommerce div.product p.price, .woocommerce div.product span.price {
	font-size: 20px; color: var(--ink); font-weight: 400; margin-bottom: 6px;
}
.woocommerce div.product p.price del { color: var(--ink-3); font-size: 16px; }
.woocommerce div.product p.price ins { color: var(--sale); text-decoration: none; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--ink-2); font-size: 14px; margin-block: 18px 24px; }

.woocommerce div.product div.images { margin-bottom: 0; }
.woocommerce div.product div.images img { background: var(--bg-soft); }
.woocommerce div.product div.summary { margin-bottom: 0; }
@media (min-width: 900px) {
	.woocommerce div.product div.images { width: 56%; }
	.woocommerce div.product div.summary { width: 40%; padding-top: 8px; }
}
/* Wrap the gallery thumbs and cap them at a quarter of the column, so any
   number of them stays inside the page instead of running off a phone.
   The selectors mirror WooCommerce's own, which set li { width: 25% }. */
.woocommerce div.product div.images .flex-control-thumbs {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin: 10px 0 0; padding: 0; list-style: none;
}
.woocommerce div.product div.images .flex-control-thumbs li {
	width: 84px; max-width: calc((100% - 24px) / 4); margin: 0; float: none;
}
.woocommerce div.product div.images .flex-control-thumbs img { width: 100%; height: auto; }

.woocommerce div.product form.cart { margin-bottom: 26px; }
.woocommerce div.product form.cart div.quantity { margin-right: 10px; }
.woocommerce .quantity .qty {
	width: 78px; height: 51px; border: 1px solid var(--line); text-align: center;
	font-family: var(--font-body); font-size: 14px;
}
.woocommerce div.product form.cart .button { flex: 1; min-height: 51px; }
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.woocommerce div.product form.cart .variations { width: 100%; }
.woocommerce div.product form.cart table.variations { border: 0; margin-bottom: 14px; }
.woocommerce div.product form.cart table.variations td { padding: 6px 0; }
.woocommerce div.product form.cart table.variations label {
	font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
}
.woocommerce div.product form.cart select {
	border: 1px solid var(--line); padding: 12px 14px; font-family: var(--font-body); font-size: 13.5px;
	min-width: 200px; max-width: 100%;
}

/* Stack the variation rows and let the picker fill the column on phones. */
@media (max-width: 600px) {
	.woocommerce div.product form.cart table.variations,
	.woocommerce div.product form.cart table.variations tbody,
	.woocommerce div.product form.cart table.variations tr,
	.woocommerce div.product form.cart table.variations th,
	.woocommerce div.product form.cart table.variations td { display: block; width: 100%; }
	.woocommerce div.product form.cart table.variations td.label { padding-bottom: 2px; }
	.woocommerce div.product form.cart select { min-width: 0; width: 100%; }
	.woocommerce div.product form.cart .reset_variations { display: inline-block; margin-top: 6px; font-size: 12px; }
}

.product-usp { list-style: none; margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.product-usp li { display: flex; gap: 12px; font-size: 13px; color: var(--ink-2); align-items: flex-start; }
.product-usp svg { width: 17px; height: 17px; flex: 0 0 auto; stroke: var(--ink); fill: none; stroke-width: 1.2; margin-top: 1px; }

.woocommerce div.product .product_meta { font-size: 12px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 18px; margin-top: 20px; }
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 6px; }
.woocommerce div.product .product_meta a { color: var(--ink-2); }

.woocommerce div.product .woocommerce-tabs { padding-top: clamp(40px, 5vw, 72px); }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 28px; border-bottom: 1px solid var(--line); display: flex; gap: 30px; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none; border: 0; border-radius: 0; margin: 0; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 0 0 14px; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
	font-weight: 400; color: var(--ink-3); border-bottom: 1px solid transparent; margin-bottom: -1px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ink); border-bottom-color: var(--ink); }
/* Three uppercase tab labels overrun a phone; scroll the strip sideways
   rather than wrap it into a ragged two-line row. */
@media (max-width: 720px) {
	.woocommerce div.product .woocommerce-tabs ul.tabs {
		gap: 22px; flex-wrap: nowrap; overflow-x: auto;
		scrollbar-width: none; -ms-overflow-style: none;
	}
	.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
	.woocommerce div.product .woocommerce-tabs ul.tabs li { flex: 0 0 auto; }
	.woocommerce div.product .woocommerce-tabs ul.tabs li a { white-space: nowrap; }
}

.woocommerce div.product .woocommerce-tabs .panel { margin: 0; padding: 0; max-width: 820px; }
.woocommerce div.product .woocommerce-tabs .panel h2 { display: none; }
.woocommerce table.shop_attributes { border: 0; width: 100%; }
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td { border: 0; border-bottom: 1px solid var(--line-2); padding: 12px 0; font-size: 13.5px; font-style: normal; }
.woocommerce table.shop_attributes th { font-weight: 500; letter-spacing: .06em; width: 220px; }
.woocommerce table.shop_attributes td p { margin: 0; }
@media (max-width: 600px) {
	.woocommerce table.shop_attributes th { width: 42%; padding-right: 12px; }
}

.woocommerce .related, .woocommerce .up-sells { padding-top: clamp(46px, 5vw, 80px); }
.woocommerce .related > h2, .woocommerce .up-sells > h2, .woocommerce .cross-sells > h2 {
	font-size: clamp(18px, 2vw, 26px); font-weight: 300; letter-spacing: .14em;
	text-transform: uppercase; text-align: center; margin-bottom: 34px;
}

.woocommerce .star-rating { color: var(--gold); font-size: 12px; }
.woocommerce .woocommerce-product-rating { margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.woocommerce .woocommerce-product-rating .woocommerce-review-link { font-size: 12px; color: var(--ink-3); }

.woocommerce span.onsale {
	background: var(--sale); color: #fff; border-radius: 0; min-width: auto; min-height: auto;
	padding: 6px 11px; font-size: 10px; letter-spacing: .14em; font-weight: 500; line-height: 1;
	top: 12px; left: 12px; right: auto; margin: 0;
}

/* --------------------------------------------------------------------------
   15. Cart / checkout / account
   -------------------------------------------------------------------------- */
.woocommerce table.shop_table { border: 0; border-collapse: collapse; }
.woocommerce table.shop_table th {
	font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
	border-bottom: 1px solid var(--ink); padding: 14px 12px;
}
.woocommerce table.shop_table td { border-top: 0; border-bottom: 1px solid var(--line-2); padding: 20px 12px; font-size: 14px; }
.woocommerce table.shop_table_responsive tr td::before { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.woocommerce-cart table.cart img { width: 84px; height: auto; background: var(--bg-soft); }
.woocommerce table.cart td.actions { padding-inline: 0; }
.woocommerce table.cart td.actions .coupon { display: flex; gap: 10px; align-items: stretch; float: none; }
.woocommerce table.cart td.actions .coupon .input-text {
	width: 240px; max-width: 100%; border: 1px solid var(--line); border-radius: 0;
	padding: 13px 14px; font-family: var(--font-body); font-size: 14px;
}
.woocommerce table.cart td.actions .coupon .input-text:focus { outline: none; border-color: var(--ink); }
.woocommerce table.cart td.actions > .button { float: right; }

/* The coupon field plus its button need ~400px; below that they have to stack,
   or the pair widens the whole cart table past the viewport. */
@media (max-width: 640px) {
	.woocommerce table.cart td.actions .coupon { flex-wrap: wrap; gap: 8px; }
	.woocommerce table.cart td.actions .coupon .input-text,
	.woocommerce table.cart td.actions .coupon .button { width: 100%; float: none; }
	.woocommerce table.cart td.actions > .button { float: none; width: 100%; margin-top: 10px; }
	.woocommerce table.shop_table_responsive tr td { padding: 10px 0; }
	.woocommerce table.shop_table_responsive tr td.actions { padding-top: 18px; }
	.woocommerce-cart table.cart img { width: 64px; }
}

.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; }
.woocommerce .cart-collaterals .cart_totals > h2, .woocommerce-checkout h3, .woocommerce-account h2 {
	font-size: 13px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; margin-bottom: 18px;
}
.woocommerce form .form-row { padding: 0; margin: 0 0 16px; }
.woocommerce form .form-row label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 7px; display: block; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .select2-container .select2-selection--single,
.woocommerce-page form .form-row input.input-text {
	border: 1px solid var(--line); border-radius: 0; padding: 13px 14px;
	font-family: var(--font-body); font-size: 14px; height: auto; line-height: 1.4;
}
.woocommerce .select2-container .select2-selection--single { height: 47px; display: flex; align-items: center; }
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { outline: none; border-color: var(--ink); }
.woocommerce #payment, .woocommerce-checkout #payment { background: var(--bg-soft); border-radius: 0; }
.woocommerce #payment div.payment_box { background: #fff; }
.woocommerce #payment div.payment_box::before { display: none; }
.woocommerce-checkout-review-order-table tfoot th, .woocommerce-checkout-review-order-table tfoot td { border-bottom: 1px solid var(--line-2); }
.woocommerce .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--line-2); }
.woocommerce .woocommerce-MyAccount-navigation li a { display: block; padding: 13px 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.woocommerce .woocommerce-MyAccount-navigation li.is-active a { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------------------
   16. Order confirmation
   -------------------------------------------------------------------------- */
/* The confirmation is printed inside .entry-content by the checkout shortcode,
   so the editorial type rules have to be lifted off it first. */
.entry-content .order-confirm { font-size: 15px; line-height: 1.6; color: var(--ink); }
.entry-content .order-confirm ul,
.entry-content .order-confirm ol { padding-left: 0; margin: 0; list-style: none; }
.entry-content .order-confirm li { margin-bottom: 0; }
.entry-content .order-confirm a { border-bottom: 0; }
.entry-content .order-confirm .link-underline { border-bottom: 1px solid var(--ink); }

.order-confirm { max-width: 1120px; margin-inline: auto; padding-bottom: clamp(40px, 5vw, 72px); }

.order-confirm__hero { text-align: center; padding-block: clamp(30px, 4vw, 56px) clamp(24px, 3vw, 40px); }
.order-confirm__mark {
	width: 62px; height: 62px; margin: 0 auto 24px;
	display: grid; place-items: center;
	border: 1px solid var(--line); border-radius: 50%; background: var(--bg-soft);
}
.order-confirm__mark svg { width: 24px; height: 24px; stroke: var(--emerald); fill: none; stroke-width: 1.1; }
.order-confirm__mark--alert svg { stroke: var(--sale); }
.order-confirm__hero .eyebrow { margin-bottom: 12px; }
.order-confirm h1 {
	font-size: clamp(23px, 3vw, 38px); font-weight: 300; letter-spacing: .14em;
	text-transform: uppercase; margin: 0;
}
.order-confirm__lede { color: var(--ink-2); font-size: 14px; max-width: 52ch; margin: 16px auto 0; }

/* Fulfilment rail. Each step draws the hairline either side of its own dot, so
   the line fills up to the stage the order is standing on. */
.order-steps {
	display: grid; grid-template-columns: repeat(4, 1fr);
	margin: clamp(26px, 3.2vw, 44px) 0 clamp(30px, 3.8vw, 52px) !important;
}
.order-step {
	position: relative; text-align: center; padding-top: 28px;
	font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.order-step::before,
.order-step::after { content: ""; position: absolute; top: 6px; height: 1px; background: var(--line); }
.order-step::before { left: 0; right: 50%; }
.order-step::after { left: 50%; right: 0; }
.order-step:first-child::before,
.order-step:last-child::after { display: none; }
.order-step.is-done::before,
.order-step.is-done::after,
.order-step.is-current::before { background: var(--ink); }
.order-step__dot {
	position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--line); background: #fff;
}
.order-step.is-done .order-step__dot { background: var(--ink); border-color: var(--ink); }
.order-step.is-current .order-step__dot {
	background: var(--ink); border-color: var(--ink);
	outline: 1px solid var(--ink); outline-offset: 3px;
}
.order-step.is-done { color: var(--ink-2); }
.order-step.is-current { color: var(--ink); font-weight: 500; }

.order-status-note {
	text-align: center; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--ink-3); margin: 24px 0 30px;
}

.order-confirm__grid {
	display: grid; grid-template-columns: minmax(0, 1fr) 330px;
	gap: clamp(28px, 3.4vw, 56px); align-items: start;
}
.order-confirm__side { display: grid; gap: 14px; position: sticky; top: calc(var(--head-h) + 18px); }

.order-confirm .order-confirm__title {
	font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
	margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ink);
}

.order-lines { border-bottom: 1px solid var(--line); }
.order-line {
	display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 18px;
	align-items: center; padding: 18px 0; border-top: 1px solid var(--line-2);
}
.order-line:first-child { border-top: 0; padding-top: 4px; }
.order-line__media { background: var(--bg-soft); }
.order-line__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.order-line__collection {
	display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
	color: var(--ink-3); margin-bottom: 6px;
}
.order-line__name { display: block; font-size: 14.5px; line-height: 1.45; }
a.order-line__name { transition: opacity .25s var(--ease); }
a.order-line__name:hover { opacity: .6; }
.order-line__qty {
	display: block; margin-top: 7px; font-size: 11px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--ink-3);
}
.order-line .wc-item-meta { margin: 7px 0 0 !important; font-size: 12.5px; color: var(--ink-2); }
.order-line .wc-item-meta li { display: flex; gap: 6px; }
.order-line .wc-item-meta p { margin: 0; }
.order-line__total { font-size: 14px; white-space: nowrap; }

.order-totals { margin: 20px 0 0; display: grid; gap: 11px; }
.order-totals__row { display: flex; justify-content: space-between; gap: 20px; font-size: 13.5px; color: var(--ink-2); }
.order-totals__row dt,
.order-totals__row dd { margin: 0; }
.order-totals__row dd { text-align: right; }
.order-totals__row small { display: block; font-size: 11px; color: var(--ink-3); letter-spacing: .02em; }
.order-totals__row.is-grand {
	border-top: 1px solid var(--line); margin-top: 6px; padding-top: 15px;
	color: var(--ink); align-items: center;
}
.order-totals__row.is-grand dt { text-transform: uppercase; font-size: 11.5px; letter-spacing: .18em; }
.order-totals__row.is-grand dd { font-size: 19px; font-weight: 400; font-family: var(--font-display); }

.order-note,
.order-gateway {
	margin-top: 24px; padding: 18px 20px; background: var(--bg-soft);
	font-size: 13.5px; line-height: 1.7; color: var(--ink-2);
}
.order-note p,
.order-gateway p { margin: 0; }
.order-note p { margin-top: 6px; color: var(--ink); }
.order-gateway h2 { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 8px; color: var(--ink); }

.order-confirm__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.order-confirm__hero .order-confirm__actions { justify-content: center; margin-top: 26px; }

.order-panel { border: 1px solid var(--line); padding: 22px 22px 24px; }
.order-panel--accent,
.order-panel--soft { background: var(--bg-soft); border-color: transparent; }
.order-confirm .order-panel__title {
	font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
	margin: 0 0 14px; padding: 0; border: 0;
}
.order-panel__icon svg { width: 20px; height: 20px; stroke: var(--ink); fill: none; stroke-width: 1.2; margin-bottom: 12px; }
.order-panel__label {
	display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
	color: var(--ink-3); margin-bottom: 7px;
}
.order-panel__lead { font-family: var(--font-display); font-size: 18px; font-weight: 300; letter-spacing: .06em; margin: 0 0 8px; }
.order-panel__note { font-size: 12.5px; line-height: 1.7; color: var(--ink-2); margin: 0; }
.order-panel address { font-style: normal; font-size: 13.5px; line-height: 1.8; color: var(--ink-2); }
.order-panel__line { display: block; }
.order-panel--soft .link-underline { display: inline-block; margin-top: 14px; }

.order-facts { margin: 0; display: grid; gap: 12px; }
.order-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.order-facts dt { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.order-facts dd { margin: 0; font-size: 13.5px; text-align: right; }

.order-reassure {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 32px;
	margin: clamp(34px, 4.2vw, 60px) 0 0 !important; padding-top: clamp(22px, 2.8vw, 32px);
	border-top: 1px solid var(--line);
}
.order-reassure li { display: flex; gap: 12px; align-items: flex-start; font-size: 12.5px; color: var(--ink-2); }
.order-reassure svg { width: 17px; height: 17px; flex: 0 0 auto; stroke: var(--ink); fill: none; stroke-width: 1.2; margin-top: 1px; }

@media (max-width: 920px) {
	.order-confirm__grid { grid-template-columns: minmax(0, 1fr); }
	.order-confirm__side { position: static; }
}

/* Four tracked-out labels across a phone would each break to three lines, so
   the rail turns on its side. */
@media (max-width: 620px) {
	.order-steps { grid-template-columns: 1fr; }
	.order-step { text-align: left; padding: 0 0 20px 28px; }
	.order-step:last-child { padding-bottom: 0; }
	.order-step::before { top: 0; bottom: 0; left: 6px; right: auto; width: 1px; height: auto; }
	.order-step::after { display: none; }
	.order-step:first-child::before { display: block; top: 8px; }
	.order-step:last-child::before { bottom: auto; height: 8px; }
	.order-step__dot { top: 1px; left: 0; transform: none; }
}

@media (max-width: 700px) {
	.order-reassure { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
	.order-line { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
	.order-line__total { grid-column: 2; text-align: right; margin-top: -4px; }
	.order-confirm__actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   17. Static pages / editorial
   -------------------------------------------------------------------------- */
.entry-content { font-size: 15.5px; line-height: 1.8; color: #2b2b2b; }
.entry-content h2 { font-size: clamp(20px, 2.2vw, 28px); letter-spacing: .08em; text-transform: uppercase; font-weight: 300; margin-top: 2em; }
.entry-content h3 { font-size: 17px; letter-spacing: .04em; margin-top: 1.8em; }
.entry-content a { border-bottom: 1px solid var(--line); }
.entry-content a:hover { border-color: var(--ink); }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li { margin-bottom: .5em; }
.entry-content blockquote {
	margin: 2em 0; padding: 4px 0 4px 28px; border-left: 2px solid var(--ink);
	font-size: 18px; font-weight: 300; font-style: normal; color: var(--ink);
}
.entry-content table { width: 100%; border-collapse: collapse; margin: 1.6em 0; }
.entry-content th, .entry-content td { border-bottom: 1px solid var(--line); padding: 12px 10px; text-align: left; font-size: 14px; }
.entry-content th { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.entry-content pre { overflow-x: auto; }
.entry-content, .entry-content li { overflow-wrap: break-word; }

/* allure_wrap_content_tables() puts every editorial table in one of these, so a
   size chart scrolls on a phone instead of stretching the page. */
.table-scroll { overflow-x: auto; margin: 1.6em 0; -webkit-overflow-scrolling: touch; }
.table-scroll > table { margin: 0; min-width: 320px; }

.store-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 30px 0; }
.store-cards article { border: 1px solid var(--line); padding: 26px 24px; }
.store-cards h3 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 12px; }
.store-cards p { font-size: 13.5px; color: var(--ink-2); margin: 0 0 6px; }
@media (max-width: 860px) { .store-cards { grid-template-columns: 1fr; } }

.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-size: 14px; letter-spacing: .04em; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 18px; line-height: 1; color: var(--ink-3); }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: 14px 0 0; color: var(--ink-2); font-size: 14px; }

/* Blog */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 40px); }
@media (max-width: 900px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .post-grid { grid-template-columns: 1fr; } }
.post-card figure { margin: 0 0 16px; overflow: hidden; background: var(--bg-soft); aspect-ratio: 4/3; }
.post-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.post-card:hover img { transform: scale(1.05); }
.post-card time { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.post-card h3 { font-size: 17px; font-weight: 400; margin: 8px 0 8px; letter-spacing: .02em; }
.post-card p { font-size: 13.5px; color: var(--ink-2); margin: 0; }

.pagination-basic { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 50px; }
.pagination-basic .page-numbers {
	min-width: 40px; height: 40px; line-height: 38px; padding: 0 12px; text-align: center;
	border: 1px solid var(--line); font-size: 12.5px;
}
.pagination-basic .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }

@media (max-width: 480px) {
	.woocommerce nav.woocommerce-pagination ul li a,
	.woocommerce nav.woocommerce-pagination ul li span,
	.pagination-basic .page-numbers {
		min-width: 34px; height: 34px; line-height: 32px; padding: 0 8px; font-size: 12px;
	}
}

/* 404 */
.error-404 { text-align: center; padding-block: clamp(60px, 10vw, 140px); }
.error-404 .code { font-size: clamp(70px, 12vw, 150px); font-weight: 200; letter-spacing: .1em; line-height: 1; margin: 0 0 10px; }

/* --------------------------------------------------------------------------
   18. Utilities
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
	.reveal { opacity: 1; transform: none; }
	html { scroll-behavior: auto; }
}

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   19. Demo notice
   -------------------------------------------------------------------------- */
.demo-note {
	position: fixed; inset: 0; z-index: 130;
	display: grid; place-items: center; padding: 20px;
	opacity: 0; visibility: hidden;
	transition: opacity .35s var(--ease), visibility .35s;
}
.demo-note.is-open { opacity: 1; visibility: visible; }
.demo-note__scrim { position: absolute; inset: 0; background: rgba(13, 13, 13, .55); backdrop-filter: blur(2px); }
.demo-note__box {
	position: relative; width: min(520px, 100%);
	background: var(--bg); border: 1px solid var(--line);
	padding: clamp(34px, 5vw, 52px) clamp(24px, 4vw, 48px);
	text-align: center;
	transform: translateY(14px);
	transition: transform .45s var(--ease);
}
.demo-note.is-open .demo-note__box { transform: none; }
.demo-note__close { position: absolute; top: 10px; right: 10px; }
.demo-note__box h2 {
	font-family: var(--font-display); font-size: clamp(18px, 2.4vw, 26px); font-weight: 300;
	letter-spacing: .14em; text-transform: uppercase; margin: 10px 0 14px;
}
.demo-note__box p { color: var(--ink-2); margin: 0 auto; max-width: 42ch; }
.demo-note__ok { margin-top: 26px; }

body.has-demo-note { overflow: hidden; }