/* =========================================================================
   SKINLUX - Editorial Apothecary
   Cream canvas · espresso serif · hairline gold. Nothing decorative that a
   photograph could do better.
   ========================================================================= */

:root {
	--sx-cream:     var(--wp--preset--color--base, #FAF7F2);
	--sx-sand:      var(--wp--preset--color--sand, #F1EAE0);
	--sx-linen:     var(--wp--preset--color--linen, #FFFFFF);
	--sx-ink:       var(--wp--preset--color--contrast, #4A3B33);
	--sx-bark:      var(--wp--preset--color--bark, #2A211C);
	--sx-stone:     var(--wp--preset--color--stone, #8A7B70);
	--sx-line:      var(--wp--preset--color--line, #E3D9CC);
	--sx-gold:      var(--wp--preset--color--accent, #B8894A);
	--sx-gold-soft: var(--wp--preset--color--accent-soft, #C9A05C);
	--sx-champagne: var(--wp--preset--color--champagne, #EAD3A0);

	--sx-display: var(--wp--preset--font-family--display, "Cormorant Garamond", Georgia, serif);
	--sx-body:    var(--wp--preset--font-family--body, Manrope, system-ui, sans-serif);

	--sx-ease:   cubic-bezier(.22, .61, .36, 1);
	--sx-ease-a: cubic-bezier(.65, 0, .35, 1);
	--sx-header-h: 5.75rem;
}

/* ---------- Foundations ------------------------------------------------- */

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--sx-header-h) + 1.5rem);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-variant-numeric: oldstyle-nums proportional-nums;
	overflow-x: clip;
}

/* Prices, quantities and any tabular figure need lining numerals. */
.price, .woocommerce-Price-amount, .quantity, .sx-num, table td, table th {
	font-variant-numeric: lining-nums tabular-nums;
}

h1, h2, h3, h4 { font-variant-numeric: lining-nums; text-wrap: balance; }
p, li { text-wrap: pretty; }

::selection { background: var(--sx-champagne); color: var(--sx-bark); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--sx-gold);
	outline-offset: 3px;
	border-radius: 1px;
}

.skip-link:focus {
	position: fixed !important;
	inset: 1rem auto auto 1rem;
	z-index: 999;
	padding: .875rem 1.5rem;
	background: var(--sx-ink);
	color: var(--sx-cream);
	font: 600 .75rem/1 var(--sx-body);
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* Editorial link underline that draws in from the left. */
.sx-prose a,
.wp-block-post-content a:not(.wp-element-button):not(.wp-block-button__link) {
	background-image: linear-gradient(var(--sx-gold), var(--sx-gold));
	background-size: 100% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	padding-bottom: 2px;
	transition: background-size .4s var(--sx-ease), color .25s var(--sx-ease);
}
.sx-prose a:hover,
.wp-block-post-content a:not(.wp-element-button):hover {
	background-size: 0 1px;
	background-position: 100% 100%;
}

/* That underline is for prose. A product card's link wraps the image, the
   category and the title, so inside post content - the featured row on the
   homepage, or any [products] shortcode - the gradient painted a gold rule
   right across the bottom of the card, reading as a divider under the price.
   Needs three classes to outweigh the rule above, whose two :not() arguments
   each count towards its specificity. */
.wp-block-post-content .woocommerce ul.products a,
.wp-block-post-content .woocommerce ul.products a:hover {
	background-image: none;
	padding-bottom: 0;
}

/* The same leak, in a second place: a link that wraps a picture, and a heading
   acting as a title link, are not prose either. It drew a rule straight under
   each collection tile and under every tile heading. Four classes so this wins
   on its own weight rather than on being written later in the file. */
.wp-block-post-content .wp-block-column .wp-block-image.sx-tile a,
.wp-block-post-content .wp-block-column .wp-block-image.sx-tile a:hover,
.wp-block-post-content .wp-block-columns .wp-block-column .wp-block-heading a,
.wp-block-post-content .wp-block-columns .wp-block-column .wp-block-heading a:hover {
	background-image: none;
	padding-bottom: 0;
}

/* ---------- Button hover -------------------------------------------------- */

/* A colour sweeps across from the left and the label changes with it.

   The sweep is a pseudo-element scaled on the X axis, which the compositor
   handles on its own: no layout, no repaint, and it reverses cleanly when the
   pointer leaves. Scaling is why it is a separate layer rather than an animated
   background-position, which would repaint every frame.

   The label's colour is held back a moment so it flips once the sweep is most
   of the way across, rather than turning while it still sits on the old
   background. */
.wp-element-button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	--sx-wipe-bg: var(--sx-cream);
	--sx-wipe-fg: var(--sx-ink);
	--sx-wipe-speed: .34s;
	--sx-wipe-ease: cubic-bezier(.45, 0, .15, 1);
	transition:
		color var(--sx-wipe-speed) var(--sx-wipe-ease) .06s,
		border-color var(--sx-wipe-speed) var(--sx-wipe-ease);
}

/* A button that is already light reveals espresso instead of cream. */
.wp-element-button.has-background {
	--sx-wipe-bg: var(--sx-ink);
	--sx-wipe-fg: var(--sx-cream);
}

.wp-element-button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--sx-wipe-bg);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--sx-wipe-speed) var(--sx-wipe-ease);
}

/* WordPress emits its colour classes as `.has-bark-color{color:… !important}`,
   so a button carrying one ignored the hover colour entirely: the sweep ran
   underneath a label that never moved off bark, which on espresso is close to
   invisible. Matching !important is the only thing that outranks it. */
.wp-element-button:hover,
.wp-element-button:focus-visible { color: var(--sx-wipe-fg) !important; }

.wp-element-button:hover::after,
.wp-element-button:focus-visible::after { transform: scaleX(1); }

/* Buttons that are not filled surfaces keep their own treatment. */
.skinlux-card__action .button::after,
.woocommerce-MyAccount-content .woocommerce-Button::after {
	content: none;
}
/* The buttons that keep their own treatment need the same weight, both to beat
   the colour classes and to outrank the sweep's rule above. */
.wp-block-button.is-style-underline .wp-block-button__link:hover,
.skinlux-card__action .button:hover,
.woocommerce-MyAccount-content .woocommerce-Button:hover { color: var(--sx-gold) !important; }

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-element-button::after { transition: none; }
}

/* ---------- Named block styles ------------------------------------------ */

.wp-block-group.is-style-framed {
	border: 1px solid var(--sx-line);
	padding: var(--wp--preset--spacing--40);
}

.wp-block-group.is-style-inset {
	background: var(--sx-sand);
	padding: var(--wp--preset--spacing--40);
}

.wp-block-columns.is-style-ruled > .wp-block-column + .wp-block-column {
	border-left: 1px solid var(--sx-line);
	padding-left: var(--wp--preset--spacing--40);
}
@media (max-width: 781px) {
	.wp-block-columns.is-style-ruled > .wp-block-column + .wp-block-column {
		border-left: 0;
		border-top: 1px solid var(--sx-line);
		padding: var(--wp--preset--spacing--30) 0 0;
	}
}

.wp-block-image.is-style-arch img {
	border-radius: 50vw 50vw 0 0;
}

.wp-block-image.is-style-framed img {
	border: 1px solid var(--sx-line);
	padding: .75rem;
	background: var(--sx-linen);
}

.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--sx-ink);
	border-color: var(--sx-ink);
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background: var(--sx-ink);
	color: var(--sx-cream);
	border-color: var(--sx-ink);
}

.wp-block-button.is-style-underline .wp-block-button__link {
	background: transparent;
	border: 0;
	color: var(--sx-ink);
	padding: 0 0 .5rem;
	border-bottom: 1px solid var(--sx-gold);
}
/* This style's ::after is the arrow, not a sweep, so it has to undo the
   positioning the sweep rule sets on every button's ::after. */
.wp-block-button.is-style-underline .wp-block-button__link::after {
	content: " →";
	position: static;
	inset: auto;
	z-index: auto;
	background: none;
	transform: none;
	transition: transform .35s var(--sx-ease);
	display: inline-block;
}
.wp-block-button.is-style-underline .wp-block-button__link:hover {
	background: transparent;
	color: var(--sx-gold);
}
.wp-block-button.is-style-underline .wp-block-button__link:hover::after { transform: translateX(4px); }

.wp-block-separator.is-style-gold-rule {
	border: 0;
	height: 1px;
	width: min(6rem, 40%);
	background: var(--sx-gold);
	opacity: 1;
}

/* Echoes the gold dot in the wordmark. */
.wp-block-separator.is-style-gold-dot {
	border: 0;
	height: 1px;
	background: var(--sx-line);
	width: min(22rem, 80%);
	position: relative;
	opacity: 1;
	overflow: visible;
}
.wp-block-separator.is-style-gold-dot::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	translate: -50% -50%;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--sx-gold);
	box-shadow: 0 0 0 5px var(--sx-cream);
}

.wp-block-heading.is-style-eyebrow {
	font-family: var(--sx-body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--sx-gold);
	line-height: 1.4;
}

.wp-block-heading.is-style-numbered {
	counter-increment: sx-chapter;
	display: flex;
	align-items: baseline;
	gap: 1rem;
}
.wp-block-heading.is-style-numbered::before {
	content: counter(sx-chapter, decimal-leading-zero);
	font-family: var(--sx-body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--sx-gold);
	flex: none;
}
body { counter-reset: sx-chapter; }

.wp-block-list.is-style-checklist {
	list-style: none;
	padding-left: 0;
}
.wp-block-list.is-style-checklist li {
	position: relative;
	padding-left: 1.75rem;
}
.wp-block-list.is-style-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: .6rem;
	height: .32rem;
	border-left: 1.5px solid var(--sx-gold);
	border-bottom: 1.5px solid var(--sx-gold);
	rotate: -45deg;
}

.wp-block-list.is-style-spec {
	list-style: none;
	padding-left: 0;
	border-top: 1px solid var(--sx-line);
}
.wp-block-list.is-style-spec li {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	padding: .875rem 0;
	border-bottom: 1px solid var(--sx-line);
	font-size: var(--wp--preset--font-size--small);
}
.wp-block-list.is-style-spec li strong {
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--sx-stone);
	flex: none;
}

.wp-block-quote.is-style-editorial {
	text-align: center;
	max-width: 34ch;
	margin-inline: auto;
}
.wp-block-quote.is-style-editorial::before {
	content: "";
	display: block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--sx-gold);
	margin: 0 auto 2rem;
}
.wp-block-quote.is-style-editorial cite {
	display: block;
	margin-top: 1.75rem;
	font-family: var(--sx-body);
	font-size: var(--wp--preset--font-size--micro);
	font-style: normal;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sx-stone);
}

/* ---------- Announcement bar -------------------------------------------- */

.sx-announce {
	background: var(--sx-bark);
	color: var(--sx-champagne);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 500;
	text-align: center;
	padding: .7rem 1rem;
}
.sx-announce a { color: inherit; border-bottom: 1px solid currentColor; }

/* Each clause stays whole. Without this the line breaks wherever it likes,
   which most often lands between the amount and the currency symbol. */
.sx-announce__item { white-space: nowrap; }
.sx-announce__sep { margin-inline: .8em; opacity: .55; }

/* Below this the bar cannot hold both clauses on one line, and a two-line
   announcement bar costs more vertical room than the second clause is worth.
   The delivery promise is the one that sells, so it is the one that stays. */
@media (max-width: 720px) {
	.sx-announce {
		font-size: .6875rem;
		letter-spacing: .1em;
		padding: .6rem .75rem;
	}
	.sx-announce__sep,
	.sx-announce__item--secondary { display: none; }
}

@media (max-width: 380px) {
	.sx-announce { font-size: .625rem; letter-spacing: .07em; }
}

/* ---------- Site scaffolding -------------------------------------------- */

/* The announcement bar, header, main and footer each own their vertical
   rhythm, so the root block gap between them contributes nothing - it only
   shows up as a band of page background, most visibly as a cream stripe where
   a dark section meets the dark footer. */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ---------- Header ------------------------------------------------------ */

.sx-header {
	position: sticky;
	top: 0;
	/* Above WooCommerce's gallery zoom trigger, which it positions at z-index 99
	   in the root stacking context. At 90 that magnifier painted over the sticky
	   header on a scrolled product page, and over the whole mobile nav drawer,
	   where it also stayed clickable. The drawer is a child of this element, so
	   it inherits the win rather than needing a z-index race of its own.
	   Stays below the skip link (999) and the consent banner (99999). */
	z-index: 120;
	background: color-mix(in srgb, var(--sx-cream) 88%, transparent);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color .4s var(--sx-ease), background .4s var(--sx-ease);
}
.sx-header.is-scrolled {
	border-bottom-color: var(--sx-line);
	background: color-mix(in srgb, var(--sx-cream) 96%, transparent);
}

.sx-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	min-height: var(--sx-header-h);
}

.sx-header__brand { grid-column: 2; justify-self: center; }
.sx-header__brand .custom-logo { height: clamp(40px, 5.6vw, 60px); width: auto; display: block; }
.sx-header__nav  { grid-column: 1; }
.sx-header__util { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 1.25rem; }

/* Grid children default to min-width:auto, which lets a wide child push the
   whole row past the viewport instead of shrinking.

   The block gap has to go too: WordPress treats this group as a flow container
   and gives every child after the first a 24px margin-block-start. In a
   centred grid row that margin is split, dropping the wordmark and the
   utilities 12px below the navigation. */
.sx-header__inner > * {
	min-width: 0;
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Shortcodes in a template part come back wrapped in a paragraph by wpautop.
   Left alone it is an empty box in the flow, which pushed the navigation about
   12px below the wordmark and the utilities either side of it. */
.sx-header__nav p,
.sx-header__util p { margin: 0; display: contents; }

/* Removing the paragraph's box is not enough on its own: WordPress gives every
   child after the first a block-gap top margin, and that selector still matches
   whether or not the paragraph generates a box. The margin is what actually
   held the navigation 12px below the wordmark. */
.sx-header__nav > * { margin-block: 0; }

/* Primary navigation.

   A branch is a native <details>, so the open state, the keyboard handling and
   the accessible name are all the browser's. The script layer only adds the two
   things <details> will not do by itself: open on hover for a mouse, and close
   on Escape or on a click elsewhere. */

.sx-nav__list,
.sx-nav__sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sx-nav__list {
	display: flex;
	align-items: center;
	gap: 2rem;
}

.sx-nav__item { position: relative; }

.sx-nav__link {
	/* A <summary> is content-box, so the padding below would otherwise be added
	   on top of the 100% width the panel rows use and push the chevron out past
	   the panel's own edge, where it is clipped. */
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-family: var(--sx-body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sx-ink);
	position: relative;
	padding-block: .25rem;
	background: none;
	border: 0;
	cursor: pointer;
	white-space: nowrap;
}

/* Both the marker box and the ::marker itself, because Safari draws one and
   Chromium the other. */
.sx-nav__link--branch { list-style: none; }
.sx-nav__link--branch::-webkit-details-marker { display: none; }
.sx-nav__link--branch::marker { content: ""; }

/* The sliding gold underline belongs to the bar, not to the panels inside it. */
.sx-nav__list > .sx-nav__item > .sx-nav__link::after,
.sx-nav__list > .sx-nav__item > .sx-nav__disclosure > .sx-nav__link::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	background: var(--sx-gold);
	scale: 0 1;
	transform-origin: left;
	transition: scale .35s var(--sx-ease);
}
.sx-nav__list > .sx-nav__item > .sx-nav__link:hover::after,
.sx-nav__list > .sx-nav__item > .sx-nav__link.is-current::after,
.sx-nav__list > .sx-nav__item > .sx-nav__disclosure > .sx-nav__link:hover::after,
.sx-nav__list > .sx-nav__item > .sx-nav__disclosure[open] > .sx-nav__link::after { scale: 1 1; }

.sx-nav__chevron {
	width: .4rem;
	height: .4rem;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	rotate: 45deg;
	translate: 0 -.12rem;
	opacity: .65;
	transition: rotate .3s var(--sx-ease), translate .3s var(--sx-ease);
}
.sx-nav__disclosure[open] > .sx-nav__link > .sx-nav__chevron {
	rotate: -135deg;
	translate: 0 .06rem;
}

/* The panel is a sheet of the page, not a floating card: hairline edge, no
   radius, and only enough shadow to lift it off a photograph. Its left offset
   matches the link padding inside it, so the first item's text sits on the same
   vertical as the bar label that opened it. */
.sx-nav__panel {
	position: absolute;
	top: calc(100% + 1.15rem);
	left: -1.5rem;
	min-width: 16.5rem;
	padding-block: .35rem;
	background: var(--sx-cream);
	border: 1px solid var(--sx-line);
	box-shadow: 0 14px 36px rgba(42, 33, 28, .08);
	z-index: 100;
}

/* A second level flies out beside its parent rather than pushing the first
   level down, so the shop menu stays one glance rather than two. */
.sx-nav__panel .sx-nav__panel {
	top: -.35rem;
	left: 100%;
	margin-left: 1px;
}

/* The gap between the bar and the panel would otherwise drop a hover-opened
   menu the moment the pointer crossed it. */
.sx-nav__list > .sx-nav__item > .sx-nav__disclosure > .sx-nav__panel::before {
	content: "";
	position: absolute;
	inset: -1.15rem 0 100% 0;
}

.sx-nav__sublist .sx-nav__item { position: relative; }

/* Rows are separated by the same hairline the assurance strip and the FAQ use,
   rather than being blocks that fill on hover. */
.sx-nav__sublist .sx-nav__item + .sx-nav__item { border-top: 1px solid var(--sx-line); }

.sx-nav__sublist .sx-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: .9rem 1.5rem;
	letter-spacing: .12em;
	color: var(--sx-stone);
	transition: color .25s var(--sx-ease);
}

/* A gold dot marks the row under the pointer: the same mark the wordmark and
   the editorial quote carry, and quiet enough not to turn the menu into a grid
   of filled buttons. */
.sx-nav__sublist .sx-nav__link::before {
	content: "";
	position: absolute;
	left: .6rem;
	top: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--sx-gold);
	translate: 0 -50%;
	opacity: 0;
	transition: opacity .25s var(--sx-ease);
}
.sx-nav__sublist .sx-nav__link:hover,
.sx-nav__sublist .sx-nav__disclosure[open] > .sx-nav__link {
	background: none;
	color: var(--sx-ink);
}
.sx-nav__sublist .sx-nav__link:hover::before,
.sx-nav__sublist .sx-nav__disclosure[open] > .sx-nav__link::before { opacity: 1; }
.sx-nav__sublist .sx-nav__link.is-current { color: var(--sx-gold); }
/* A second-level chevron points at where its panel actually goes, which is out
   to the right, and keeps pointing there while the panel is open. */
.sx-nav__sublist .sx-nav__chevron { rotate: -45deg; translate: 0 0; }
.sx-nav__sublist .sx-nav__disclosure[open] > .sx-nav__link > .sx-nav__chevron { rotate: -45deg; }

/* Cart */
.skinlux-cart {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--sx-ink);
	line-height: 1;
}
.skinlux-cart:hover { color: var(--sx-gold); }
.skinlux-cart__count {
	font-family: var(--sx-body);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .04em;
	font-variant-numeric: lining-nums tabular-nums;
	min-width: 1.15rem;
	height: 1.15rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--sx-gold);
	color: var(--sx-cream);
	transition: opacity .3s var(--sx-ease), scale .3s var(--sx-ease-a);
}
.skinlux-cart__count.is-empty { opacity: 0; scale: .6; }

/* Language switcher */
.sx-lang {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.sx-lang__item { color: var(--sx-stone); transition: color .25s var(--sx-ease); }
.sx-lang__item:hover { color: var(--sx-ink); }
.sx-lang__item.is-current { color: var(--sx-ink); }
.sx-lang__sep { color: var(--sx-line); }

/* Mobile drawer trigger */
.sx-burger {
	display: none;
	width: 24px;
	height: 24px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--sx-ink);
}
.sx-burger span {
	display: block;
	height: 1px;
	background: currentColor;
	transition: translate .3s var(--sx-ease), rotate .3s var(--sx-ease), opacity .2s;
}
.sx-burger span + span { margin-top: 6px; }
.sx-burger[aria-expanded="true"] span:nth-child(1) { translate: 0 7px; rotate: 45deg; }
.sx-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sx-burger[aria-expanded="true"] span:nth-child(3) { translate: 0 -7px; rotate: -45deg; }

@media (max-width: 900px) {
	.sx-burger { display: block; }
	.sx-header__inner { grid-template-columns: auto 1fr auto; }
	.sx-header__nav { grid-column: 1; }
	.sx-header__brand { grid-column: 2; }
	.sx-header__util { grid-column: 3; }
	.sx-header__util { gap: .9rem; }
}

/* Below this the three utilities plus the wordmark no longer fit on one line.
   Search moves into the navigation overlay, which already carries one. */
@media (max-width: 600px) {
	.sx-header__util { gap: .7rem; }
	.sx-lang { gap: .35rem; letter-spacing: .08em; }
	.sx-header__inner { min-height: 4.5rem; }
}

/* ---------- Section rhythm ---------------------------------------------- */

/* Two of these in a row used to put 144px + a 24px block gap + 144px between
   their contents, which read as a hole rather than as air. The gap goes, and
   the padding steps down one notch: still generous, about a third less. */
.sx-section {
	padding-block: var(--wp--preset--spacing--50);
	margin-block: 0;
}
.sx-section--tight { padding-block: var(--wp--preset--spacing--40); }

.sx-eyebrow {
	font-family: var(--sx-body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--sx-gold);
}

/* Espresso gold goes muddy against a dimmed photograph. Inside a cover the
   eyebrow steps up to the softer gold, the same lift the footer uses. */
.wp-block-cover .sx-eyebrow { color: var(--sx-gold-soft); }

/* ---------- Product card ------------------------------------------------ */

/* Product grid.
   Column count is driven by the `columns-N` class WooCommerce puts on the list,
   so the shop archive and a hand-placed [products columns="3"] row can differ
   without touching CSS. Mobile first, widening at each breakpoint. */
.woocommerce ul.products,
ul.products,
.wc-block-product-template,
.sx-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--sx-cols, 2), minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--40);
	row-gap: var(--wp--preset--spacing--60);
}

@media (min-width: 900px) {
	.woocommerce ul.products,
	ul.products,
	.wc-block-product-template,
	.sx-grid { --sx-cols: 3; }
}

@media (min-width: 1200px) {
	.woocommerce ul.products.columns-4,
	ul.products.columns-4 { --sx-cols: 4; }

	.woocommerce ul.products.columns-5,
	ul.products.columns-5 { --sx-cols: 5; }
}

/* WooCommerce adds a float clearfix to the product list. In a grid container
   those pseudo-elements become grid items and shunt the first row across by a
   cell, so they have to go. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce .products ul::before,
.woocommerce .products ul::after {
	content: none;
	display: none;
}

.woocommerce ul.products li.product,
ul.products li.product {
	position: relative;
	margin: 0;
	padding: 0;
	width: auto;
	float: none;
	text-align: center;
	display: flex;
	flex-direction: column;
}

/* Push the price to the bottom of every card so a two-line product name never
   knocks the prices in a row out of alignment. */
.woocommerce ul.products li.product .price,
ul.products li.product .price { margin-top: auto; }

ul.products li.product a.woocommerce-LoopProduct-link {
	display: block;
	position: relative;
}

/* Square, on a panel of its own.

   `cover` is right for the current lifestyle placeholders, which are scenes and
   would letterbox badly if contained. When SKINLUX's own packshots land, shot on
   a plain ground, switch this one line to `contain` and the linen panel behind
   becomes the product's backdrop instead of a colour nothing ever shows. */
ul.products li.product img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--sx-linen);
	transition: scale 1.2s var(--sx-ease), opacity .5s var(--sx-ease);
}

ul.products li.product:hover img { scale: 1.045; }

/* The classification, set small and quiet above the name. */
.skinlux-card__cat {
	margin: 1.5rem 0 .5rem;
	font-family: var(--sx-body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sx-stone);
}

/* The name is set in the display serif, as CLAUDE.md describes product titles
   and as the product page already sets its own. The card had drifted to the
   same letterspaced caps the navigation uses, which left nothing on the page
   speaking in the brand's actual voice until you opened a product. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--sx-display);
	font-size: var(--wp--preset--font-size--lead);
	/* Cormorant is a light-bodied old style: 400 reads thin at card size, where
	   the name has to hold its own against the photograph above it. */
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sx-ink);
	margin: 0 0 .7rem;
	padding: 0;
	line-height: 1.25;
	transition: color .3s var(--sx-ease);
}
ul.products li.product:hover .woocommerce-loop-product__title { color: var(--sx-gold); }

ul.products li.product .price {
	font-family: var(--sx-body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--sx-gold);
	display: block;
	margin: 0;
	padding-top: .15rem;
}
ul.products li.product .price del { color: var(--sx-stone); opacity: 1; margin-right: .4rem; }
ul.products li.product .price ins { text-decoration: none; }

ul.products li.product .star-rating { margin: .5rem auto 0; color: var(--sx-gold); font-size: .7rem; }

/* Add-to-cart reveals on hover for pointers, always present for keyboards. */
/* This is invisible until the card is hovered, but it still holds its place in
   the flow, so every card carried a band of dead space under its price whether
   or not anyone ever saw the button. The room is still reserved, because
   releasing it would make the grid jump on hover, but only as much as the label
   actually needs. */
.skinlux-card__action {
	margin-top: .55rem;
	opacity: 0;
	translate: 0 6px;
	transition: opacity .35s var(--sx-ease), translate .35s var(--sx-ease);
}
li.product:hover .skinlux-card__action,
li.product:focus-within .skinlux-card__action { opacity: 1; translate: 0 0; }

@media (hover: none) {
	.skinlux-card__action { opacity: 1; translate: 0 0; }
}

/* No rule under this label. Sitting a gold hairline directly beneath a gold
   price read as a stray divider belonging to the price rather than as a
   control, so the action is carried by weight and colour alone. */
.skinlux-card__action .button {
	font-family: var(--sx-body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	background: none;
	border: 0;
	color: var(--sx-stone);
	padding: 0;
	border-radius: 0;
	cursor: pointer;
	transition: color .25s var(--sx-ease);
}
.skinlux-card__action .button:hover { color: var(--sx-gold); background: none; }
/* WooCommerce's own appended link is what changed the card's height. The
   button becomes the cart link instead, so this one is redundant. Hidden at
   WooCommerce's own selector weight, or it wins and reappears. */
.woocommerce ul.products li.product .skinlux-card__action .added_to_cart,
.skinlux-card__action .added_to_cart { display: none; }

/* Sale badge.

   WooCommerce pins its own badge to the top right at
   `.woocommerce ul.products li.product .onsale`, which outweighs a plainer
   selector, so these have to carry the same `.woocommerce` prefix to win. Top
   left is where both reference storefronts put it, and it keeps the badge off
   the corner where a wishlist or quick-view control usually lands. */
.woocommerce ul.products li.product .onsale,
.woocommerce div.product .onsale,
ul.products li.product .onsale,
.single-product div.product .onsale {
	position: absolute;
	inset: .875rem auto auto .875rem;
	right: auto;
	z-index: 2;
	background: var(--sx-bark);
	color: var(--sx-champagne);
	font-family: var(--sx-body);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: .4rem .7rem;
	border-radius: 0;
	margin: 0;
	min-height: 0;
	min-width: 0;
	line-height: 1;
}

/* ---------- Shop archive ------------------------------------------------ */

.woocommerce-products-header { text-align: center; padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40); }
.woocommerce-products-header__title {
	font-family: var(--sx-display);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
}

.skinlux-crumb {
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sx-stone);
	text-align: center;
	padding-block: 1.5rem 0;
}
.skinlux-crumb a { color: var(--sx-stone); }
.skinlux-crumb a:hover { color: var(--sx-gold); }
.skinlux-crumb__sep { margin-inline: .55rem; color: var(--sx-line); }

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

.skinlux-shop-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	border-block: 1px solid var(--sx-line);
	padding-block: 1rem;
	margin-bottom: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sx-stone);
}
.woocommerce-result-count { margin: 0; }
.woocommerce-ordering { min-width: 0; max-width: 100%; }

/* Selects.

   A native select drags in the operating system's own control: a grey well, a
   system arrow and a font that belongs to nothing else on the page. The list it
   drops is the browser's and cannot be styled, but the closed state is the part
   that sits in the layout, so that is the part worth owning. `appearance: none`
   strips the chrome; the chevron is the same mark the navigation draws, as an
   inline SVG so it costs no request and inherits no colour surprises. */
.woocommerce-ordering select,
.woocommerce form .form-row select,
.woocommerce select.orderby,
.sx-select {
	appearance: none;
	-webkit-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' fill='none'%3E%3Cpath d='M1 1.2 5 5.2 9 1.2' stroke='%23B8894A' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .1rem center;
	background-size: .6rem auto;
	padding-right: 1.6rem;
	cursor: pointer;
	max-width: 100%;
	text-overflow: ellipsis;
}

.woocommerce-ordering select {
	font-family: var(--sx-body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	border: 0;
	border-bottom: 1px solid var(--sx-line);
	border-radius: 0;
	background-color: transparent;
	color: var(--sx-ink);
	padding-block: .35rem;
	transition: border-color .3s var(--sx-ease), color .3s var(--sx-ease);
}
.woocommerce-ordering select:hover,
.woocommerce-ordering select:focus { border-bottom-color: var(--sx-gold); color: var(--sx-gold); }

/* Inside a bordered form field the chevron sits in from the edge instead. */
.woocommerce form .form-row select {
	background-position: right .9rem center;
	padding-right: 2.4rem;
}

/* Some browsers paint the highlight of a focused option with the UA accent. */
.woocommerce-ordering select option,
.woocommerce form .form-row select option {
	font-family: var(--sx-body);
	letter-spacing: 0;
	text-transform: none;
	color: var(--sx-ink);
	background: var(--sx-linen);
}

/* The count and the sort control will not sit side by side on a phone. */
@media (max-width: 600px) {
	.skinlux-shop-bar {
		flex-direction: column;
		align-items: flex-start;
		gap: .6rem;
	}
}

.woocommerce-pagination { text-align: center; margin-top: var(--wp--preset--spacing--60); }
.woocommerce-pagination ul { list-style: none; display: inline-flex; gap: .25rem; padding: 0; margin: 0; border: 0; }
.woocommerce-pagination ul li { border: 0; }
.woocommerce-pagination a, .woocommerce-pagination span {
	display: grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: .08em;
	border: 1px solid transparent;
}
.woocommerce-pagination span.current { border-color: var(--sx-gold); color: var(--sx-gold); }
.woocommerce-pagination a:hover { border-color: var(--sx-line); }

/* ---------- Single product ---------------------------------------------- */

.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}
@media (max-width: 900px) {
	.single-product div.product { grid-template-columns: 1fr; }
}

.single-product .woocommerce-product-gallery { position: relative; }

/* The same square the cards use, so a product does not change shape on the way
   to its own page. WooCommerce is asked for a 1200px square file as well; the
   ratio is held here too because the current placeholder originals are only
   720px wide, and WordPress will not upscale to make the cropped file. */
.single-product .woocommerce-product-gallery__image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--sx-linen);
}
.single-product .flex-control-thumbs {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
	gap: .5rem;
	padding: .5rem 0 0;
	margin: 0;
}

/* WooCommerce floats these at a fixed 25% for its own four-across strip. Inside
   a grid that collapses them to a quarter of one cell, which is how a 76px rail
   ended up holding 19px thumbnails. */
.single-product.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li,
body.single-product .woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li {
	width: auto;
	float: none;
	margin: 0;
	list-style: none;
}
.single-product .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--sx-linen);
}
.single-product .flex-control-thumbs img { opacity: .55; transition: opacity .3s var(--sx-ease); cursor: pointer; }
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover { opacity: 1; }

.single-product .product_title {
	font-family: var(--sx-display);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	line-height: 1.05;
	margin: 0 0 1rem;
}

.single-product .summary > .price {
	font-family: var(--sx-body);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 500;
	color: var(--sx-gold);
	margin: 0 0 1.5rem;
}
.single-product .summary > .price del { color: var(--sx-stone); margin-right: .5rem; }
.single-product .summary > .price ins { text-decoration: none; }

.single-product .woocommerce-product-details__short-description {
	color: var(--sx-stone);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.75;
	border-top: 1px solid var(--sx-line);
	padding-top: 1.5rem;
	margin-bottom: 2rem;
}

.single-product form.cart { display: flex; flex-wrap: wrap; gap: .75rem; align-items: stretch; margin-bottom: 2rem; }

/* The quantity field has to out-specify legacy-template.css, which pads it to
   .9rem 1.1rem through a `div.product form.cart div.quantity .input-text`
   selector. An input is content-box by default, so that padding was adding
   itself on top of the min-height and pushing the whole row to 114px. */
.woocommerce div.product form.cart div.quantity { display: flex; }
.woocommerce div.product form.cart div.quantity .qty {
	box-sizing: border-box;
	width: 4.5rem;
	min-height: 3.25rem;
	align-self: stretch;
	text-align: center;
	border: 1px solid var(--sx-line);
	border-radius: 0;
	background: transparent;
	font-family: var(--sx-body);
	font-size: var(--wp--preset--font-size--small);
	padding: 0 .5rem;
	color: var(--sx-ink);
}
.single-product form.cart button[type="submit"],
.woocommerce .button.alt,
.wc-block-components-button:not(.is-link) {
	flex: 1 1 12rem;
	background: var(--sx-ink);
	color: var(--sx-cream);
	border: 1px solid var(--sx-ink);
	border-radius: 0;
	font-family: var(--sx-body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 1.05rem 2.25rem;
	cursor: pointer;
	transition: background .3s var(--sx-ease), border-color .3s var(--sx-ease), color .3s var(--sx-ease);
}
.single-product form.cart button[type="submit"]:hover,
.woocommerce .button.alt:hover,
.wc-block-components-button:not(.is-link):hover {
	background: var(--sx-gold);
	border-color: var(--sx-gold);
	color: var(--sx-cream);
}

.single-product .stock {
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sx-stone);
	margin: 0 0 1.25rem;
}
.single-product .stock.out-of-stock { color: #A6392E; }

.single-product .product_meta {
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sx-stone);
	border-top: 1px solid var(--sx-line);
	padding-top: 1.5rem;
	display: grid;
	gap: .5rem;
}
.single-product .product_meta a { color: var(--sx-stone); }
.single-product .product_meta a:hover { color: var(--sx-gold); }

/* Delivery and returns, at the moment the decision is made. Quiet enough not to
   compete with the button directly above it. */
.skinlux-reassurance {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	gap: .55rem;
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sx-stone);
}
.skinlux-reassurance li {
	position: relative;
	padding-left: 1.5rem;
}
.skinlux-reassurance li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .34em;
	width: .55rem;
	height: .3rem;
	border-left: 1.5px solid var(--sx-gold);
	border-bottom: 1.5px solid var(--sx-gold);
	rotate: -45deg;
}

/* Tabs → hairline-underlined labels. WooCommerce's own rules for these are
   deeply specific (grey pills with rounded corners), so these have to match
   its selector weight to win. */
.woocommerce-tabs { grid-column: 1 / -1; margin-top: var(--wp--preset--spacing--30); }

/* The tabs run the full measure below both columns. Parking them in the
   right-hand column kept the description narrow but left a tall well of
   whitespace under the gallery, which read as a broken layout rather than as
   air. Full width also gives the description its own horizontal rule of tab
   labels, which is the arrangement every reference storefront uses.

   The panel keeps its own measure so the prose never runs to 78rem. */

/* Vertical thumbnail rail beside the main image.

   Scoped with :has() because WooCommerce only prints the rail when a product
   has gallery images beyond the main one. Without the guard, a single-image
   product would reserve an empty column beside its photograph. */
@media (min-width: 901px) {
	.single-product .woocommerce-product-gallery:has(.flex-control-thumbs) {
		display: grid;
		grid-template-columns: 5.25rem minmax(0, 1fr);
		gap: .75rem;
		align-items: start;
	}
	.single-product .woocommerce-product-gallery:has(.flex-control-thumbs) .flex-control-thumbs {
		grid-column: 1;
		grid-row: 1;
		grid-template-columns: 1fr;
		padding: 0;
	}
	.single-product .woocommerce-product-gallery:has(.flex-control-thumbs) .woocommerce-product-gallery__wrapper {
		grid-column: 2;
		grid-row: 1;
	}
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 2.25rem;
	padding: 0;
	margin: 0 0 2.5rem;
	border-bottom: 1px solid var(--sx-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	content: none;
	display: none;
	border: 0;
	box-shadow: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	background-color: transparent;
	border-radius: 0;
	box-shadow: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0 0 1rem;
	font-family: var(--sx-body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sx-stone);
	border-bottom: 1px solid transparent;
	margin-bottom: -1px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--sx-ink);
	border-bottom-color: var(--sx-gold);
}
.woocommerce-tabs .panel { max-width: 42rem; }
.woocommerce-tabs .panel h2 { display: none; }

/* An empty pagination wrapper should not reserve a screen of whitespace. */
.woocommerce-pagination:empty { display: none; margin: 0; }

.related.products, .upsells.products {
	grid-column: 1 / -1;
	border-top: 1px solid var(--sx-line);
	padding-top: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--50);
}
.related.products > h2, .upsells.products > h2 {
	font-family: var(--sx-display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	text-align: center;
	margin: 0 0 var(--wp--preset--spacing--50);
}

/* Stars */
.star-rating { color: var(--sx-gold); }
.woocommerce-review-link { color: var(--sx-stone); font-size: var(--wp--preset--font-size--small); }

/* ---------- Cart / checkout / account ----------------------------------- */

.woocommerce-cart-form table.shop_table,
.woocommerce table.shop_table {
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	width: 100%;
}
.woocommerce table.shop_table th {
	font-family: var(--sx-body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sx-stone);
	border-bottom: 1px solid var(--sx-line);
	padding: 1rem 0;
	text-align: left;
}
.woocommerce table.shop_table td {
	border-bottom: 1px solid var(--sx-line);
	padding: 1.5rem 0;
	vertical-align: middle;
}
.woocommerce table.shop_table img { width: 5rem; height: auto; }

.woocommerce form .form-row label,
.wc-block-components-text-input label {
	font-family: var(--sx-body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sx-stone);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input {
	border: 1px solid var(--sx-line);
	border-radius: 0;
	background: var(--sx-linen);
	padding: .9rem 1rem;
	font-family: var(--sx-body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--sx-ink);
	transition: border-color .3s var(--sx-ease);
}
.woocommerce form .form-row input.input-text:focus,
.wc-block-components-text-input input:focus { border-color: var(--sx-gold); }

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 {
	font-family: var(--sx-display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--x-large);
}

.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-top: 2px solid var(--sx-gold);
	background: var(--sx-sand);
	border-radius: 0;
	color: var(--sx-ink);
	font-size: var(--wp--preset--font-size--small);
	padding: 1.25rem 1.5rem;
	list-style: none;
}
.woocommerce-error { border-top-color: #A6392E; }

/* WooCommerce sets a glyph from its own icon font on every notice. That font
   ships with `woocommerce-layout`, which this theme dequeues, so the glyph
   arrived as a missing-character box in front of the text. The gold rule above
   the notice is the marker here. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: none;
	display: none;
}

/* WooCommerce cart & checkout blocks */
.wc-block-components-title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
	font-family: var(--sx-display) !important;
	font-weight: 400 !important;
	letter-spacing: 0;
}
.wc-block-components-product-name { font-family: var(--sx-body); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: var(--wp--preset--font-size--micro); }
.wc-block-components-totals-item__value { font-weight: 600; }
.wc-block-components-panel__button { font-family: var(--sx-body); }

/* ---------- My account --------------------------------------------------- */

/* WooCommerce lays this screen out in `woocommerce-layout.css`, which the theme
   dequeues, so without these rules the navigation stacks on top of the panel as
   a column of body links. Rebuilt here as a sidebar rather than restoring the
   float grid the rest of the storefront does not use.

   Keyed off the navigation's presence: the logged-out screen is a single
   centred form and must not be pushed into a sidebar column that has nothing
   in it. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 15rem minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

/* The same float clearfix that bites `ul.products`. Its pseudo-elements become
   grid items here too, taking the first cell and the third, which put the
   navigation in the content column and the content on a row of its own. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
	content: none;
	display: none;
}

@media (max-width: 781px) {
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
	}

	/* One scrolling row rather than six stacked ones, so the panel the visitor
	   actually came for is not pushed most of a screen down the page. The
	   active item is marked by a gold rule, the same device the desktop bar
	   uses, rather than by the row treatment that no longer applies. */
	.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul {
		display: flex;
		gap: 1.75rem;
		margin: 0;
		border-top: 0;
		border-bottom: 1px solid var(--sx-line);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}
	.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }

	.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link {
		border-bottom: 0;
		flex: none;
	}
	.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link a {
		padding: .25rem 0 .8rem;
		white-space: nowrap;
		border-bottom: 2px solid transparent;
	}
	.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link.is-active a {
		border-bottom-color: var(--sx-gold);
	}
}

.woocommerce-MyAccount-navigation {
	/* A grid item defaults to min-width:auto, which on a phone let the scrolling
	   row widen the whole page instead of scrolling inside its column. */
	min-width: 0;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--sx-line);
}

/* WooCommerce pads these items 16px on the top and bottom, except the first,
   which gets bottom padding only. That asymmetry is what crowded the opening
   label against the rule above it. Cleared so the link's own padding sets an
   even rhythm for every row. */
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--sx-line);
}

/* The editorial link underline belongs to prose, and these are interface
   chrome, so it has to be cancelled here.

   It has to be cancelled at the right weight, which is the whole difficulty:
   `.wp-block-post-content a:not(.wp-element-button):not(.wp-block-button__link)`
   scores three classes, because each :not() contributes its argument. A plain
   `.woocommerce-MyAccount-navigation li a` scores two and loses, taking the
   link's `padding-bottom` with it and squashing the row. Four classes plus the
   element wins outright rather than relying on source order. */
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link a {
	display: block;
	/* Every link but the first inherits a block-gap top margin, which made row
	   one shorter than the rest and pushed its label up against the hairline. */
	margin: 0;
	padding: 1.05rem 0;
	background-image: none;
	font-family: var(--sx-body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sx-stone);
	/* WooCommerce underlines the current item. Gold already says which one it
	   is, and the underline was the one bit of link chrome left in a bar that
	   is otherwise letterspaced caps. */
	text-decoration: none;
	transition: color .25s var(--sx-ease);
}
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link a:hover { color: var(--sx-ink); }
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link.is-active a {
	color: var(--sx-gold);
	text-decoration: none;
}

.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content > h2,
.woocommerce-MyAccount-content > h3 {
	font-family: var(--sx-display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	margin: 0 0 var(--wp--preset--spacing--30);
}
.woocommerce-MyAccount-content > p:first-of-type { margin-top: 0; }

/* ---------- Account forms ------------------------------------------------ */

/* WooCommerce's base sheet gives `form.login` a grey rounded box. */
.woocommerce-account .woocommerce > h2 {
	text-align: center;
	font-family: var(--sx-display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password {
	max-width: 26rem;
	margin-inline: auto;
	border: 1px solid var(--sx-line);
	border-radius: 0;
	background: var(--sx-linen);
	padding: var(--wp--preset--spacing--40);
}

.woocommerce form .form-row { margin: 0 0 1.25rem; display: block; }
.woocommerce form .form-row label { display: block; margin-bottom: .5rem; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select { width: 100%; box-sizing: border-box; }
.woocommerce form .form-row .required { color: var(--sx-gold); text-decoration: none; border: 0; }

/* The password field carries a reveal button that has to sit inside it. */
.woocommerce form .form-row .password-input { display: block; position: relative; }
.woocommerce form .form-row .password-input .show-password-input {
	position: absolute;
	inset: 50% .75rem auto auto;
	translate: 0 -50%;
	background: none;
	border: 0;
	padding: .25rem;
	cursor: pointer;
	color: var(--sx-stone);
}
.woocommerce form .form-row .password-input .show-password-input:hover { color: var(--sx-gold); }

/* The submit row holds the checkbox, two hidden inputs and the button. Without
   the dequeued layout sheet they all ran together on one line and the lost
   password link landed on top of the button. */
.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit),
.woocommerce-form-register .form-row:has(.woocommerce-form-register__submit) {
	display: grid;
	gap: 1rem;
	margin-bottom: 0;
}
.woocommerce-form-login__submit,
.woocommerce-form-register__submit { width: 100%; }

/* WooCommerce forces these labels back to display:block from inside a
   `.woocommerce form .form-row label` selector, which closed the gap between
   the box and its text. */
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sx-stone);
	cursor: pointer;
}
.woocommerce form .form-row input.woocommerce-form__input-checkbox { width: auto; margin: 0; flex: none; accent-color: var(--sx-gold); }

.woocommerce-LostPassword {
	max-width: 26rem;
	margin: 1.25rem auto 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .1em;
	text-transform: uppercase;
}
.woocommerce-account .woocommerce .woocommerce-LostPassword.lost_password a {
	color: var(--sx-stone);
	background-image: none;
	padding-bottom: 0;
}
.woocommerce-account .woocommerce .woocommerce-LostPassword.lost_password a:hover { color: var(--sx-gold); }

/* ---------- Account addresses ------------------------------------------- */

.woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
}
.woocommerce-Address { min-width: 0; }
.woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .35rem 1rem;
	border-bottom: 1px solid var(--sx-line);
	padding-bottom: .75rem;
	margin-bottom: 1rem;
}
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	font-family: var(--sx-display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	margin: 0;
}
.woocommerce-account .woocommerce .woocommerce-Address-title .edit {
	flex: none;
	background-image: none;
	padding-bottom: 0;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sx-stone);
}
.woocommerce-account .woocommerce .woocommerce-Address-title .edit:hover { color: var(--sx-gold); }
.woocommerce-Address address {
	font-style: normal;
	line-height: 1.8;
	color: var(--sx-stone);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Account tables ----------------------------------------------- */

.woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-actions .button,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-Button {
	display: inline-block;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--sx-gold);
	border-radius: 0;
	padding: 0 0 .3rem;
	font-family: var(--sx-body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sx-ink);
	cursor: pointer;
}
.woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-actions .button:hover,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-Button:hover { color: var(--sx-gold); background: none; }

/* An empty orders or downloads panel is a normal state, not an error. */
.woocommerce-MyAccount-content .woocommerce-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* ---------- Footer ------------------------------------------------------ */

.sx-footer {
	background: var(--sx-bark);
	color: color-mix(in srgb, var(--sx-cream) 72%, transparent);
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
}
.sx-footer h2, .sx-footer h3, .sx-footer h4 { color: var(--sx-cream); }
.sx-footer a { color: color-mix(in srgb, var(--sx-cream) 72%, transparent); }
.sx-footer a:hover { color: var(--sx-champagne); }
.sx-footer .sx-eyebrow { color: var(--sx-gold-soft); }
.sx-footer hr, .sx-footer .wp-block-separator { border-color: color-mix(in srgb, var(--sx-cream) 16%, transparent); background: color-mix(in srgb, var(--sx-cream) 16%, transparent); }
/* The link columns arrive as ordinary lists, and browser bullets are the one
   piece of unstyled furniture left on the page. */
.sx-footer .wp-block-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.sx-footer .wp-block-list li { margin: 0; }
.sx-footer .wp-block-list a {
	display: inline-block;
	padding-block: .18rem;
	transition: color .25s var(--sx-ease);
}

.sx-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.75rem;
	justify-content: space-between;
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--sx-cream) 46%, transparent);
}

/* ---------- Assurance strip --------------------------------------------- */

/* A template part is emitted inside its own wrapper div, and that wrapper is
   what the parent's constrained layout measures - so an alignfull group nested
   inside it can never break out. Releasing the wrapper lets the strip take the
   wide measure it was designed for. */
main > .wp-block-template-part {
	max-width: none;
	width: 100%;
}

.sx-assurance {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: var(--wp--preset--spacing--30);
	border-block: 1px solid var(--sx-line);
	padding-block: var(--wp--preset--spacing--40);
	text-align: center;
}
/* WordPress treats this group as a flow container and gives every child after
   the first a block-gap top margin. Those margins survive the switch to grid
   and drop items 2 onward below item 1, so they have to go. */
.sx-assurance > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.sx-assurance__item { padding-inline: 1rem; }
.sx-assurance__item h3 {
	font-family: var(--sx-body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin: 0 0 .5rem;
}
.sx-assurance__item p { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--sx-stone); line-height: 1.6; }

/* ---------- Hero ---------------------------------------------------------- */

/* A flat overlay has to choose between muddying the photograph and losing the
   headline. Lowering the dim and pooling a little shadow under the type instead
   keeps the picture rich at the edges where nothing is written, and holds the
   contrast where something is. */
.sx-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(ellipse 58% 52% at 50% 50%, rgba(42, 33, 28, .42), rgba(42, 33, 28, 0) 72%);
}
.sx-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* ---------- Image treatments -------------------------------------------- */

/* Collection tiles must hold one ratio regardless of the source crop, or the
   row reads as three unrelated images rather than one set. */
.sx-tile img {
	display: block;
	width: 100%;
	/* 400x350 at the wide measure. These started at 2/3, which drew them 600px
	   tall; 4/5 took that to 500. Landscape now, so three of them read as one
	   band rather than as three columns you scroll past. */
	aspect-ratio: 8 / 7;
	object-fit: cover;
	background: var(--sx-sand);
	transition: scale 1s var(--sx-ease);
}
.sx-tile { overflow: clip; }
.sx-tile a:hover img { scale: 1.04; }

/* A full-bleed campaign image is a band, not a wall - cap its height so the
   page keeps moving. */
.wp-block-image.alignfull img {
	width: 100%;
	max-height: 78vh;
	object-fit: cover;
}

/* ---------- Disclosure rows (FAQ) --------------------------------------- */

.sx-faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	font-family: var(--sx-display);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
	color: var(--sx-ink);
	transition: color .25s var(--sx-ease);
}
.sx-faq summary::-webkit-details-marker { display: none; }
.sx-faq summary:hover { color: var(--sx-gold); }
.sx-faq summary::after {
	content: "";
	flex: none;
	width: .7rem;
	height: .7rem;
	border-right: 1px solid var(--sx-gold);
	border-bottom: 1px solid var(--sx-gold);
	rotate: 45deg;
	translate: 0 -.15rem;
	transition: rotate .3s var(--sx-ease);
}
.sx-faq[open] summary::after { rotate: -135deg; translate: 0 .15rem; }
.sx-faq > :not(summary) { margin-top: 1rem; max-width: 40rem; }

/* ---------- Header search ------------------------------------------------ */

.sx-search__toggle {
	display: inline-flex;
	align-items: center;
	background: none;
	border: 0;
	padding: 0;
	color: var(--sx-ink);
	cursor: pointer;
	transition: color .25s var(--sx-ease);
}
.sx-search__toggle:hover,
.sx-search__toggle[aria-expanded="true"] { color: var(--sx-gold); }

/* A band across the header rather than a dropdown pinned to the icon: the
   search deserves the full measure, and the serif field makes it read as part
   of the page instead of as browser furniture. */
.sx-search__panel {
	position: absolute;
	inset: 100% 0 auto 0;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	background: var(--sx-cream);
	border-block: 1px solid var(--sx-line);
	box-shadow: 0 18px 40px rgba(42, 33, 28, .07);
	z-index: 20;
}
.sx-search__panel[hidden] { display: none; }

.sx-search__field {
	flex: 1 1 auto;
	min-width: 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--sx-line);
	border-radius: 0;
	padding: .5rem 0;
	font-family: var(--sx-display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	color: var(--sx-ink);
	transition: border-color .3s var(--sx-ease);
}
.sx-search__field::placeholder { color: var(--sx-line); }
.sx-search__field:focus { outline: 0; border-bottom-color: var(--sx-gold); }

.sx-search__submit {
	flex: none;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--sx-gold);
	border-radius: 0;
	padding: 0 0 .35rem;
	font-family: var(--sx-body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sx-ink);
	cursor: pointer;
}
.sx-search__submit:hover { color: var(--sx-gold); }

@media (max-width: 600px) {
	.sx-search__panel { gap: 1rem; padding: var(--wp--preset--spacing--30); }
	.sx-search__field { font-size: var(--wp--preset--font-size--large); }
}

/* ---------- Mobile navigation drawer ------------------------------------- */

/* backdrop-filter makes the header a containing block for fixed descendants,
   which would trap the drawer inside the header's own box. Dropping the filter
   while the drawer is open costs nothing, because the drawer covers the page
   underneath anyway. */
html.sx-nav-open .sx-header {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
html.sx-nav-open { overflow: hidden; }

/* The bar stays legible above the open drawer: the visitor keeps the wordmark,
   the cart and the control that closes the menu again. */
html.sx-nav-open .sx-header__brand,
html.sx-nav-open .sx-header__util,
.sx-burger { position: relative; z-index: 81; }

@media (max-width: 900px) {
	.sx-nav {
		position: fixed;
		inset: 0;
		z-index: 80;
		display: none;
		padding: calc(var(--sx-header-h) + 3rem) var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
		background: var(--sx-cream);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	html.sx-nav-open .sx-nav { display: block; }

	.sx-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.sx-nav__list > .sx-nav__item { border-top: 1px solid var(--sx-line); }
	.sx-nav__list > .sx-nav__item:last-child { border-bottom: 1px solid var(--sx-line); }

	.sx-nav__list > .sx-nav__item > .sx-nav__link,
	.sx-nav__list > .sx-nav__item > .sx-nav__disclosure > .sx-nav__link {
		justify-content: space-between;
		width: 100%;
		padding-block: 1.1rem;
		font-family: var(--sx-display);
		font-size: var(--wp--preset--font-size--large);
		font-weight: 400;
		letter-spacing: 0;
		text-transform: none;
	}

	/* No underline animation and no flyouts on a touch screen: every level
	   expands in place, so the whole menu is one vertical list. */
	.sx-nav__list > .sx-nav__item > .sx-nav__link::after,
	.sx-nav__list > .sx-nav__item > .sx-nav__disclosure > .sx-nav__link::after { content: none; }

	.sx-nav__panel,
	.sx-nav__panel .sx-nav__panel {
		position: static;
		min-width: 0;
		margin: 0;
		padding: 0 0 .75rem;
		border: 0;
		box-shadow: none;
		background: none;
	}
	.sx-nav__list > .sx-nav__item > .sx-nav__disclosure > .sx-nav__panel::before { content: none; }

	.sx-nav__sublist .sx-nav__item + .sx-nav__item { border-top: 0; }
	.sx-nav__sublist .sx-nav__link::before { content: none; }
	.sx-nav__sublist .sx-nav__link { padding: .7rem .25rem .7rem 1rem; }
	.sx-nav__sublist .sx-nav__sublist .sx-nav__link { padding-left: 2rem; }
	.sx-nav__sublist .sx-nav__link:hover,
	.sx-nav__sublist .sx-nav__disclosure[open] > .sx-nav__link { background: none; }

	/* Nothing flies out in the drawer, so every chevron points at the direction
	   its panel actually moves: down to open, up to close. */
	.sx-nav__sublist .sx-nav__chevron { rotate: 45deg; translate: 0 -.12rem; }
	.sx-nav__sublist .sx-nav__disclosure[open] > .sx-nav__link > .sx-nav__chevron {
		rotate: -135deg;
		translate: 0 .06rem;
	}

	.sx-nav__chevron { width: .5rem; height: .5rem; }
}

/* ---------- Reveal on scroll -------------------------------------------- */

[data-sx-reveal] {
	opacity: 0;
	translate: 0 18px;
	transition: opacity .9s var(--sx-ease), translate .9s var(--sx-ease);
}
[data-sx-reveal].is-visible { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	[data-sx-reveal] { opacity: 1; translate: none; }
}

/* ---------- Utility ------------------------------------------------------ */

.sx-measure { max-width: 34rem; }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap; border: 0;
}