/**
 * Surreal — hand-written CSS for everything theme.json's design tokens
 * can't express: keyframes, the Memphis card/pill component language, and
 * WooCommerce block restyling. Uses the theme.json custom properties
 * (--wp--preset--color--*, --wp--custom--radius--*, --wp--custom--shadow--*)
 * throughout instead of repeating hex values.
 */

/* ---------- Keyframes (ported from the prototype's index.css) ---------- */

@keyframes surreal-marquee {
	0% { transform: translateX(0%); }
	100% { transform: translateX(-50%); }
}

@keyframes surreal-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes surreal-count-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(0.97); }
}

/* ---------- Base ---------- */

/*
 * overflow-x:hidden on both html AND body, not body alone: several mobile
 * browsers (notably iOS Safari) still allow horizontal touch-drag panning
 * of the page based on the root <html> element's own overflow, even when
 * scrollWidth measurements show zero actual overflow and body already has
 * overflow-x:hidden. Marquee tracks (.surreal-marquee__group) are
 * deliberately many times wider than the viewport by design (width:
 * max-content, clipped by .surreal-marquee{overflow:hidden}); without this
 * rule on <html> too, touch users can drag past that clip on some devices.
 */
html {
	overflow-x: hidden;
}
body {
	overflow-x: hidden;
}

/*
 * ::-webkit-scrollbar below only styles Chrome/Safari/Edge — Firefox (and
 * any other non-Blink/WebKit engine) ignores those rules entirely and
 * falls back to its own native scrollbar, unstyled, unless the standard
 * scrollbar-width/scrollbar-color properties are set too. Without this,
 * a Firefox visitor sees a plain default scrollbar that doesn't match the
 * ink-thumb/transparent-track look below at all.
 */
html {
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--ink) transparent;
}

/*
 * Track is transparent, not the page's cream bg — this scrollbar spans the
 * whole page height, and a solid cream track visibly mismatches wherever it
 * overlaps a section with a different background (the lime hero, yellow
 * brand-pillars, etc.), reading as a stray gap in the layout.
 */
::-webkit-scrollbar { height: 6px; width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--wp--preset--color--ink); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--wp--preset--color--berry); }

.surreal-fade-in { animation: surreal-fade-in 0.25s ease-out forwards; }

/*
 * The parent theme's default block-gap margin (1.2rem, via
 * :where(.wp-site-blocks) > * and :where(.is-layout-constrained) > *)
 * put a gap between the header and the hero, and between every full-bleed
 * section on the front page. This design uses ink borders — not
 * whitespace — as the separator between those sections (see the Hero,
 * Impact ticker, Scent Seer, etc. rules below, each with its own
 * border-top/border-bottom), so the default margin is removed at both
 * levels. Nested content (e.g. a heading above a product grid inside one
 * of the WooCommerce rail groups) is unaffected — this only zeroes the
 * margin between <main>'s own direct children and before <main> itself.
 */
.wp-site-blocks > main.wp-block-group,
main.wp-block-group.is-layout-constrained > * {
	margin-block-start: 0;
}

/*
 * The parent theme (twentytwentyfive) puts a 2px focus outline on *any*
 * focused element via :where(.wp-site-blocks *:focus) — that fires on a
 * plain mouse click, not just keyboard nav, which is why clicking the
 * nav items/logo/icon buttons shows a border. Narrow it to keyboard focus
 * only (:focus-visible), so the accessibility outline is preserved for
 * keyboard users without appearing on mouse clicks. Zero-specificity
 * :where() on both sides, loaded after the parent's stylesheet, so this
 * wins the cascade without needing !important.
 */
:where(.wp-site-blocks *:focus:not(:focus-visible)) {
	outline: none;
}

/* ---------- Marquee ---------- */

.surreal-marquee {
	overflow: hidden;
	white-space: nowrap;
}
/*
 * The track holds exactly two .surreal-marquee__group children; the
 * keyframe shifts it by -50%, i.e. exactly one group-width, so the second
 * group lands where the first started — a seamless loop. Each group has
 * min-width:100% so it always spans at least the full visible width no
 * matter how wide the viewport is; without that floor, a handful of short
 * repeated items could run out of content before reaching the edge on a
 * wide screen (visible gap / content "vanishing" mid-scroll).
 */
.surreal-marquee__track {
	display: flex;
	width: max-content;
	animation: surreal-marquee 25s linear infinite;
	gap: 3rem;
}
.surreal-marquee__group {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-shrink: 0;
	min-width: 100%;
	gap: 3rem;
}
.surreal-marquee:hover .surreal-marquee__track {
	animation-play-state: paused;
}

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

.surreal-announcement {
	background: #E5F749;
	color: var(--wp--preset--color--ink);
	border-bottom: 1px solid var(--wp--preset--color--ink);
	padding: 0.5rem 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.75rem;
}
.surreal-announcement .surreal-marquee__track {
	/* 5x the prototype's item count (20 vs 4), scaled duration keeps the same px/s speed. */
	animation-duration: 125s;
}
.surreal-announcement .surreal-marquee__track,
.surreal-announcement .surreal-marquee__group {
	gap: 2rem;
}
.surreal-announcement .surreal-marquee__group > * {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

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

.surreal-header {
	border-bottom: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--bg);
	position: sticky;
	top: 0;
	z-index: 40;
}
.surreal-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1rem clamp(1rem, 4vw, 2.5rem);
	max-width: 1400px;
	margin: 0 auto;
	position: relative;
}
.surreal-header__side {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}
/*
 * Swap the two desktop menus (Shop/About left, Connect/The Factory right)
 * for one combined mobile hamburger, at the exact same 600px breakpoint
 * core/navigation itself uses internally to switch between its inline and
 * hamburger/overlay rendering (wp-includes/blocks/navigation/style.css)
 * — matching it exactly avoids a middle range where both show at once, or
 * neither does.
 */
/*
 * `nav.` (element + class) rather than a bare class: WordPress's own global
 * block-support styles include a same-specificity `.is-layout-flex{display:
 * flex}` rule (also present on these nav elements), and since it's equal
 * specificity to a bare class selector, source order alone decided the
 * winner — unreliably. The element qualifier bumps this rule just enough to
 * win outright.
 */
nav.surreal-header__nav--mobile-only { display: block; }
nav.surreal-header__nav--desktop-only { display: none; }
@media (min-width: 600px) {
	nav.surreal-header__nav--mobile-only { display: none; }
	nav.surreal-header__nav--desktop-only { display: block; }
}
.surreal-header__logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	color: var(--wp--preset--color--ink);
	transition: color 0.15s;
}
.surreal-header__logo:hover {
	color: var(--wp--preset--color--berry);
}
.surreal-header__logo svg {
	height: 2.25rem;
	width: auto;
	fill: currentColor;
}
.surreal-header__nav .wp-block-navigation__container {
	display: flex;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.surreal-header__nav .wp-block-navigation-item__content {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	font-weight: 800;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Top-level pill trigger (Shop▾, About▾, ...) */
.surreal-header__nav > .wp-block-navigation-item.has-child {
	position: relative;
	display: flex;
	align-items: center;
	border-radius: 9999px;
	border: 1px solid transparent;
	padding: 0.5rem 0.9rem;
	gap: 0.15rem;
	transition: background-color 0.15s, border-color 0.15s;
}
.surreal-header__nav > .wp-block-navigation-item.has-child:hover {
	background: var(--wp--preset--color--yellow);
	border-color: var(--wp--preset--color--ink);
}
.surreal-header__nav .wp-block-navigation-item__content:hover { color: inherit; }
.surreal-header__nav .wp-block-navigation-submenu__toggle {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	color: var(--wp--preset--color--ink);
}

/* Dropdown panel */
.surreal-header__nav .wp-block-navigation__submenu-container {
	list-style: none;
	margin: 0.4rem 0 0;
	padding: 0.5rem;
	position: absolute;
	top: 100%;
	left: 0;
	width: 16rem;
	background: var(--wp--preset--color--bg);
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: 1rem;
	box-shadow: 0 20px 40px rgba(30, 30, 30, 0.25);
	z-index: 50;
}
.surreal-header__nav .wp-block-navigation__submenu-container.is-menu-open {
	animation: surreal-fade-in 0.2s ease-out;
}
.surreal-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 0.5rem 0.875rem;
	border-radius: 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
}
.surreal-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--yellow);
}

/*
 * Mobile hamburger overlay — restyles core/navigation's own overlay markup
 * (its DOM/behavior stays exactly as core generates it; nothing here
 * changes structure or interactivity) to match the prototype's colors,
 * fonts and spacing, since the desktop dropdown rules above are tuned for
 * a small floating absolute-positioned card and don't fit a full-screen
 * mobile panel. Placed after those rules so it wins on source order at
 * equal specificity — deliberate, not fragile, since both live in this one
 * file under our control.
 */
.surreal-header__nav-mobile .wp-block-navigation__responsive-container-open {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 9999px;
	border: 1px solid var(--wp--preset--color--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--wp--preset--color--ink);
	transition: background-color 0.15s, color 0.15s;
}
.surreal-header__nav-mobile .wp-block-navigation__responsive-container-open:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
}
.surreal-header__nav-mobile .wp-block-navigation__responsive-container-open svg { width: 18px; height: 18px; }

.surreal-header__nav-mobile .wp-block-navigation__responsive-container.is-menu-open,
.surreal-header__nav-mobile .wp-block-navigation__responsive-dialog {
	background: var(--wp--preset--color--bg);
}
.surreal-header__nav-mobile .wp-block-navigation__responsive-container-close {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 9999px;
	border: 1px solid var(--wp--preset--color--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--bg);
	color: var(--wp--preset--color--ink);
}
.surreal-header__nav-mobile .wp-block-navigation__responsive-container-close svg { width: 16px; height: 16px; }

.surreal-header__nav-mobile .wp-block-navigation__responsive-container-content {
	padding: 4.5rem 1.5rem 2.5rem;
}
.surreal-header__nav-mobile .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}
.surreal-header__nav-mobile .wp-block-navigation__container > .wp-block-navigation-item {
	border-bottom: 1px solid rgba(30, 30, 30, 0.14);
}
.surreal-header__nav-mobile .wp-block-navigation__container > .wp-block-navigation-item:first-child {
	border-top: 1px solid rgba(30, 30, 30, 0.14);
}
.surreal-header__nav-mobile > .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: 1.35rem;
	text-transform: none;
	letter-spacing: normal;
	color: var(--wp--preset--color--ink);
	padding: 1rem 0;
	display: block;
}
.surreal-header__nav-mobile .wp-block-navigation-submenu__toggle {
	background: none;
	border: none;
	padding: 0;
	color: var(--wp--preset--color--ink);
}

/*
 * Submenus (the link list under each top-level item) — reset the desktop
 * dropdown's floating absolute-positioned card look; inside the mobile
 * overlay they sit in normal document flow as an indented, flat list.
 */
.surreal-header__nav-mobile .wp-block-navigation__submenu-container {
	position: static;
	width: auto;
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
	margin: 0 0 1rem;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.surreal-header__nav-mobile .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: none;
	letter-spacing: normal;
	padding: 0.6rem 0.75rem;
	border-radius: 9999px;
}
.surreal-header__nav-mobile .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--yellow);
}

.surreal-header__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.surreal-icon-btn {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 9999px;
	border: 1px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--bg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--wp--preset--color--ink);
	transition: background-color 0.15s, color 0.15s;
}
.surreal-icon-btn:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
}

/* Mini-cart pill (bag icon + count), matching the prototype's cart button */
.surreal-mini-cart .wc-block-mini-cart__button {
	height: 2.25rem;
	padding: 0 0.75rem;
	border-radius: 9999px;
	border: 1px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
	gap: 0.4rem;
	box-shadow: 0 1px 2px rgba(30, 30, 30, 0.15);
	transition: background-color 0.15s;
}
.surreal-mini-cart .wc-block-mini-cart__button:hover:not([disabled]) {
	background: #000;
}
.surreal-mini-cart .wc-block-mini-cart__icon {
	width: 1rem;
	height: 1rem;
	margin: 0;
}
.surreal-mini-cart .wc-block-mini-cart__badge {
	position: static !important;
	transform: none !important;
	left: auto !important;
	margin-left: 0 !important;
	width: 1rem;
	height: 1rem;
	min-width: 1rem;
	padding: 0;
	border-radius: 9999px;
	font-size: 0.625rem;
	font-weight: 900;
	background: #CEFC00 !important;
	color: var(--wp--preset--color--ink) !important;
}

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

.surreal-footer {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
	border-top: 2px solid var(--wp--preset--color--ink);
	padding: 4rem clamp(1rem, 4vw, 2.5rem) 2rem;
}
.surreal-footer a { color: var(--wp--preset--color--bg); }
.surreal-footer__wordmark {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(3rem, 12vw, 8rem);
	line-height: 0.9;
	letter-spacing: -0.03em;
	margin: 2rem 0 0;
	opacity: 0.95;
}
.surreal-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 2rem;
	max-width: 1400px;
	margin: 0 auto;
}
.surreal-footer__col h4 {
	font-family: var(--wp--preset--font-family--body);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.75rem;
	color: var(--wp--preset--color--yellow);
	margin: 0 0 1rem;
}
.surreal-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.surreal-footer__col a { text-decoration: none; font-size: 0.9rem; opacity: 0.85; }
.surreal-footer__col a:hover { opacity: 1; color: var(--wp--preset--color--lime); }

/* ---------- Ink-bordered card language ---------- */

.surreal-card {
	background: var(--wp--preset--color--card);
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--lg);
}
.surreal-card--hard-shadow {
	box-shadow: var(--wp--custom--shadow--hard);
}

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

/*
 * Matches the prototype's HeroSunnyside.tsx: a 50/50 split, ink-bordered
 * grid — copy + CTA on one side, full-bleed product photography on the
 * other. Two children with `order` (not source order) so mobile always
 * shows the photo first, copy second, while desktop swaps them — see the
 * order rules below.
 */
.surreal-hero-split {
	border-bottom: 2px solid var(--wp--preset--color--ink);
	background: #CEFC00;
	overflow: hidden;
}
.surreal-hero-split__grid {
	display: grid;
	grid-template-columns: 1fr;
}
@media (min-width: 1025px) {
	.surreal-hero-split__grid {
		grid-template-columns: 1fr 1fr;
		min-height: 660px;
	}
}
.surreal-hero-split__copy {
	order: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	padding: clamp(1.5rem, 5vw, 5rem);
	background: #CEFC00;
	border-top: 2px solid var(--wp--preset--color--ink);
}
@media (min-width: 1025px) {
	.surreal-hero-split__copy {
		order: 1;
		border-top: none;
		border-right: 2px solid var(--wp--preset--color--ink);
	}
}
.surreal-hero-split__heading {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.25rem, 3vw + 1.75rem, 5rem);
	font-weight: 900;
	line-height: 0.96;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
	margin: 0 0 1.5rem;
}
.surreal-hero-split__body p {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--wp--preset--color--ink);
	max-width: 32rem;
	margin: 0 0 0.75rem;
}
.surreal-hero-split__body strong { font-weight: 800; }
.surreal-hero-split__body em {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 700;
}
.surreal-hero-split__cta { display: flex; }
.surreal-hero-split__button {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 2.25rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 800;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.surreal-hero-split__button:hover {
	background: #000;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.surreal-hero-split__button:active { transform: scale(0.95); }
.surreal-hero-split__button-icon { transition: transform 0.2s ease; }
.surreal-hero-split__button:hover .surreal-hero-split__button-icon { transform: translateX(0.375rem); }
.surreal-hero-split__visual {
	order: 1;
	position: relative;
	min-height: 420px;
	background: #F7CA54;
	overflow: hidden;
}
@media (min-width: 1025px) {
	.surreal-hero-split__visual { order: 2; min-height: 660px; }
}
.surreal-hero-split__visual img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.7s ease-out;
}
.surreal-hero-split__visual:hover img { transform: scale(1.05); }

/* ---------- Brand values ribbon ---------- */

.surreal-brand-values {
	background: var(--wp--preset--color--yellow);
	border-bottom: 2px solid var(--wp--preset--color--ink);
	padding: 0.875rem 0;
}
.surreal-brand-values .surreal-marquee__track,
.surreal-brand-values .surreal-marquee__group {
	gap: 2rem;
}
.surreal-brand-values__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 800;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--ink);
}
.surreal-brand-values__icon { flex-shrink: 0; }

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

.surreal-impact-ticker {
	background: var(--wp--preset--color--lime);
	border-bottom: 2px solid var(--wp--preset--color--ink);
	padding: 1rem 0 1.25rem;
	text-align: center;
	overflow: hidden;
}
.surreal-impact-ticker__label {
	font-size: 0.7rem;
	font-weight: 900;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.surreal-impact-ticker .surreal-marquee__track {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(2.5rem, 7vw, 5.5rem);
	letter-spacing: -0.03em;
	/* 2x the prototype's item count (12 vs 6), so 2x the duration keeps the same px/s speed. */
	animation-duration: 50s;
}

/* ---------- Find-your-scent ribbon ---------- */

.surreal-scent-ribbon {
	border-bottom: 2px solid var(--wp--preset--color--ink);
	cursor: pointer;
}
.surreal-scent-ribbon__marquee {
	border-bottom: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--bg);
	padding: 1rem 0;
	transition: background-color 0.15s;
}
.surreal-scent-ribbon:hover .surreal-scent-ribbon__marquee {
	background: var(--wp--preset--color--yellow);
}
.surreal-scent-ribbon__marquee .surreal-marquee__track {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(1.5rem, 4vw, 3rem);
	/* ~2.7x the prototype's item count (16 vs 6), scaled duration keeps the same px/s speed. */
	animation-duration: 67s;
}
.surreal-scent-ribbon__sub {
	background: var(--wp--preset--color--lime);
	text-align: center;
	padding: 0.6rem 1rem;
	font-size: 0.7rem;
	font-weight: 900;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ---------- Shop by Category ---------- */

/*
 * Matches the prototype's ShopByCategoryGrid.tsx: a header-strip + square
 * photo per card, with an arrow box that inverts on hover. 2-col mobile /
 * 4-col desktop, ink dividers between cards (not the rounded floating-card
 * look the old .surreal-category-card design used).
 */
.surreal-shop-by-category {
	border-bottom: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--bg);
}
.surreal-shop-by-category__intro {
	max-width: 1400px;
	margin: 0 auto;
	padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 2rem) 1.25rem;
}
.surreal-shop-by-category__heading {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(1.875rem, 4vw, 3rem);
	letter-spacing: -0.01em;
	margin: 0 0 0.35rem;
	color: var(--wp--preset--color--ink);
}
.surreal-shop-by-category__subheading {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.85rem;
	opacity: 0.8;
	margin: 0;
}
.surreal-shop-by-category__grid {
	border-top: 2px solid var(--wp--preset--color--ink);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 1024px) {
	.surreal-shop-by-category__grid { grid-template-columns: repeat(4, 1fr); }
}
.surreal-shop-by-category__card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	border-bottom: 2px solid var(--wp--preset--color--ink);
	overflow: hidden;
}
.surreal-shop-by-category__grid > a:nth-child(odd) {
	border-right: 2px solid var(--wp--preset--color--ink);
}
@media (min-width: 1024px) {
	.surreal-shop-by-category__card { border-bottom: none; }
	.surreal-shop-by-category__grid > a {
		border-right: 2px solid var(--wp--preset--color--ink);
	}
	.surreal-shop-by-category__grid > a:nth-child(4n) {
		border-right: none;
	}
}
.surreal-shop-by-category__strip {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	border-bottom: 2px solid var(--wp--preset--color--ink);
}
.surreal-shop-by-category__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	padding: 0.65rem 1rem;
	display: flex;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.surreal-shop-by-category__arrow {
	width: 2.75rem;
	flex-shrink: 0;
	border-left: 2px solid var(--wp--preset--color--ink);
	background: rgba(250, 244, 232, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--ink);
	transition: background-color 0.2s, color 0.2s;
}
.surreal-shop-by-category__card:hover .surreal-shop-by-category__arrow {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
}
.surreal-shop-by-category__image {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--wp--preset--color--bg);
}
.surreal-shop-by-category__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease-out;
}
.surreal-shop-by-category__card:hover .surreal-shop-by-category__image img {
	transform: scale(1.05);
}

/* ---------- Values pillars ---------- */

.surreal-values {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 2px solid var(--wp--preset--color--ink);
	border-bottom: 2px solid var(--wp--preset--color--ink);
}
@media (max-width: 900px) {
	.surreal-values { grid-template-columns: repeat(2, 1fr); }
}
.surreal-values__item {
	padding: 2rem 1.5rem;
	text-align: center;
	border-right: 2px solid var(--wp--preset--color--ink);
}
.surreal-values__item:last-child { border-right: none; }
.surreal-values__item .icon { font-size: 1.75rem; }
.surreal-values__item h3 {
	font-size: 1rem;
	margin: 0.75rem 0 0.35rem;
}
.surreal-values__item p {
	font-size: 0.8rem;
	opacity: 0.75;
	margin: 0;
}

/* ---------- Scent Seer ---------- */

.surreal-scent-seer {
	border-top: 2px solid var(--wp--preset--color--ink);
	border-bottom: 2px solid var(--wp--preset--color--ink);
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 620px;
}
@media (max-width: 900px) {
	.surreal-scent-seer { grid-template-columns: 1fr; }
}
.surreal-scent-seer__copy {
	padding: clamp(2rem, 5vw, 5rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.5rem;
}
.surreal-scent-seer__heading {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(2.25rem, 5vw, 3.375rem);
	letter-spacing: -0.01em;
	line-height: 1.1;
	margin: 0 0 1rem;
}
.surreal-scent-seer__desc {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	font-weight: 500;
	opacity: 0.8;
	max-width: 30rem;
	line-height: 1.6;
	margin: 0;
}
.surreal-scent-seer__traits {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
}
.surreal-trait-pill {
	padding: 0.85rem 0.75rem;
	border-radius: 9999px;
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--bg);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.9rem;
	cursor: pointer;
	transition: all 0.15s;
	text-align: center;
}
.surreal-trait-pill:hover { background: var(--wp--preset--color--card); }
.surreal-trait-pill.is-selected {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
	box-shadow: 2px 2px 0px var(--wp--preset--color--ink);
	transform: scale(1.02);
}
.surreal-scent-seer__feedback {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.75;
	margin: 0;
}
.surreal-scent-seer__feedback svg { color: var(--wp--preset--color--berry); flex-shrink: 0; }

.surreal-scent-seer__visual {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
}

/*
 * Two-card stack matching the prototype: a static rotated "deck" card
 * behind for depth, and the interactive foreground card on top — both
 * absolutely positioned within a fixed-aspect-ratio wrapper so they align
 * regardless of content.
 */
.surreal-tarot-card-wrap {
	position: relative;
	width: 100%;
	max-width: 440px;
	aspect-ratio: 1 / 1.42;
	/* Breathing room (incl. the rotated deck) when scent-seer.js scrolls it into view. */
	scroll-margin: 1.5rem;
}
.surreal-tarot-card__deck {
	position: absolute;
	inset: 0;
	border-radius: var(--wp--custom--radius--xl);
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--bg);
	transform: rotate(6deg) translate(1rem, 0.25rem);
	box-shadow: var(--wp--custom--shadow--hard);
	pointer-events: none;
}
.surreal-tarot-card {
	position: relative;
	z-index: 1;
	/*
	 * border-box so the padding and border stay inside the wrapper's
	 * 100% × 100% — otherwise the card is 2.75rem bigger than the deck
	 * behind it and overflows the viewport's right edge on mobile.
	 */
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border-radius: var(--wp--custom--radius--xl);
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--bg);
	box-shadow: var(--wp--custom--shadow--hard);
	padding: 1.25rem;
	cursor: pointer;
	transition: transform 0.2s;
}
.surreal-tarot-card:hover { transform: scale(1.01); }
.surreal-tarot-card.is-spinning { animation: surreal-count-pulse 0.45s ease-in-out; }

/*
 * The question and result faces are two siblings toggled via the native
 * [hidden] attribute (assets/js/scent-seer.js), not two separate cards —
 * they need to occupy the exact same space so only one is ever visible.
 * inset:0 positions each relative to .surreal-tarot-card's padding box (the
 * nearest `position: relative` ancestor), so both fill it identically
 * regardless of that padding. Without position:absolute here, both faces
 * would sit in normal flow and stack vertically, overflowing the card the
 * moment [hidden] is toggled off on the result face — exactly the bug this
 * fixes. The explicit [hidden] rule below is needed because a plain class
 * selector and the browser's own [hidden] rule have equal specificity, so
 * without it this rule's `display: flex` — being the later, author-level
 * rule — would win the cascade tie and silently defeat [hidden].
 */
.surreal-tarot-card__inner {
	position: absolute;
	inset: 0;
	border-radius: var(--wp--custom--radius--lg);
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--lilac);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 1.5rem;
	text-align: center;
}
.surreal-tarot-card__inner[hidden] {
	display: none;
}
.surreal-tarot-card__mark {
	position: absolute;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	font-weight: 900;
	line-height: 1;
	pointer-events: none;
}
.surreal-tarot-card__mark--tr { top: 1rem; right: 1rem; }
.surreal-tarot-card__mark--bl { bottom: 1rem; left: 1rem; }
.surreal-tarot-card__spacer { display: block; height: 1.5rem; }
.surreal-tarot-card__illustration { margin: auto 0; }
.surreal-tarot-card__illustration svg { width: 7rem; height: auto; }

/*
 * Result face: laid out like the On Sale / Best Smellers rail cards
 * (.surreal-product-rail below) — edge-to-edge image, a hairline divider,
 * then monospace title, scent line, price and a full-width pill button.
 * The card has a fixed aspect ratio, so the photo takes whatever height is
 * left after the info block (flex: 1, min-height: 0) rather than being
 * forced square — on narrow phones a square image would push the button
 * out of the card.
 */
.surreal-tarot-card__result {
	padding: 0;
	overflow: hidden;
	align-items: stretch;
	justify-content: flex-start;
	text-align: left;
	background: var(--wp--preset--color--card);
}
.surreal-tarot-card__photo {
	display: block;
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
}
.surreal-tarot-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease-out;
}
.surreal-tarot-card__result:hover .surreal-tarot-card__photo img {
	transform: scale(1.05);
}
.surreal-tarot-card__badges {
	position: absolute;
	top: 1rem;
	left: 1rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	pointer-events: none;
}
.surreal-tarot-card__badge {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--lime);
	padding: 0.3rem 0.7rem;
	border-radius: 9999px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.surreal-tarot-card__badge[hidden] { display: none; }
.surreal-tarot-card__again {
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	background: var(--wp--preset--color--bg);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 9999px;
	padding: 0.3rem 0.7rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.7rem;
	font-weight: 700;
	cursor: pointer;
	color: var(--wp--preset--color--ink);
	transition: background-color 0.15s, color 0.15s;
}
.surreal-tarot-card__again:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
}
.surreal-tarot-card__info {
	flex-shrink: 0;
	border-top: 1px solid var(--wp--preset--color--ink);
	padding: 1rem;
}
.surreal-tarot-card__title,
.surreal-tarot-card__title a,
.surreal-tarot-card__scent,
.surreal-tarot-card__price,
.surreal-tarot-card__add {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.surreal-tarot-card__title {
	margin: 0;
	font-weight: 700;
	font-size: 0.875rem;
}
.surreal-tarot-card__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.surreal-tarot-card__scent {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.7;
	margin: 0.35rem 0 0;
}
.surreal-tarot-card__scent[hidden] { display: none; }
.surreal-tarot-card__price {
	font-weight: 700;
	font-size: 0.875rem;
	margin: 0.75rem 0 0;
}
.surreal-tarot-card__price del {
	opacity: 0.5;
	font-weight: 400;
	font-size: 0.8em;
}
.surreal-tarot-card__price ins {
	text-decoration: none;
	font-weight: 800;
}
.surreal-tarot-card__add {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.75rem;
	border: 1px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--bg);
	color: var(--wp--preset--color--ink);
	border-radius: 9999px;
	padding: 0.625rem 1.25rem;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	transition: background-color 0.15s, color 0.15s, transform 0.1s;
}
.surreal-tarot-card__add:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
}
.surreal-tarot-card__add:active { transform: scale(0.95); }
@media (min-width: 640px) {
	.surreal-tarot-card__title,
	.surreal-tarot-card__price { font-size: 1rem; }
	.surreal-tarot-card__add { font-size: 0.875rem; padding: 0.75rem 1.25rem; }
}

/* ---------- Brand pillars ("Your Feel Gooder Candle Co.") ---------- */

/*
 * Matches the prototype's BrandValuesSection.tsx: mobile/tablet is a
 * touch-swipeable, scroll-snapped single-slide carousel with overlaid
 * prev/next arrows and pagination dots (behavior in
 * assets/js/brand-pillars.js); desktop (1024px+) shows all three pillars
 * side by side with the carousel controls hidden — see the min-width rule
 * at the bottom of this section.
 */
.surreal-brand-pillars {
	background: #F7E5A9;
	border-bottom: 2px solid var(--wp--preset--color--ink);
	padding: clamp(3rem, 8vw, 6rem) 1rem;
	overflow: hidden;
}
.surreal-brand-pillars__inner {
	max-width: 1360px;
	margin: 0 auto;
}
.surreal-brand-pillars__heading {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(1.875rem, 5vw, 3.5rem);
	letter-spacing: -0.01em;
	line-height: 1.05;
	text-align: center;
	margin: 0 0 clamp(2rem, 5vw, 4rem);
}

.surreal-brand-pillars__carousel {
	position: relative;
}
.surreal-brand-pillars__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 0.5rem 2.5rem;
}
.surreal-brand-pillars__track::-webkit-scrollbar { display: none; }
.surreal-brand-pillars__slide {
	flex: 0 0 100%;
	scroll-snap-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 0.75rem;
}
.surreal-brand-pillars__doodle {
	height: 10rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
}
.surreal-brand-pillars__doodle svg { width: 100%; height: 100%; max-width: 11rem; }
.surreal-brand-pillars__slide h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: -0.01em;
	margin: 0 0 0.75rem;
}
.surreal-brand-pillars__slide p {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1.6;
	opacity: 0.9;
	max-width: 26rem;
	margin: 0;
}

.surreal-brand-pillars__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 2.5rem;
	height: 2.5rem;
	border: 2px solid var(--wp--preset--color--ink);
	background: #fff;
	color: var(--wp--preset--color--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 2px 2px 0 var(--wp--preset--color--ink);
	transition: background-color 0.15s, color 0.15s;
}
.surreal-brand-pillars__arrow:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
}
.surreal-brand-pillars__arrow:active { transform: translateY(-50%) scale(0.95); }
.surreal-brand-pillars__arrow--prev { left: 0; }
.surreal-brand-pillars__arrow--next { right: 0; }

.surreal-brand-pillars__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin-top: clamp(2rem, 5vw, 3rem);
}
.surreal-brand-pillars__dot {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 9999px;
	border: none;
	background: rgba(30, 30, 30, 0.3);
	cursor: pointer;
	padding: 0;
	transition: background-color 0.2s, transform 0.2s;
}
.surreal-brand-pillars__dot:hover { background: rgba(30, 30, 30, 0.6); }
.surreal-brand-pillars__dot.is-active {
	background: var(--wp--preset--color--ink);
	transform: scale(1.1);
}

@media (min-width: 1024px) {
	.surreal-brand-pillars__arrow,
	.surreal-brand-pillars__dots {
		display: none;
	}
	.surreal-brand-pillars__track {
		overflow: visible;
		padding: 0;
		gap: 3.5rem;
	}
	.surreal-brand-pillars__slide {
		flex: 1 1 0;
		scroll-snap-align: none;
	}
	.surreal-brand-pillars__doodle { height: 13rem; }
	.surreal-brand-pillars__slide h3 { font-size: 1.75rem; }
	.surreal-brand-pillars__slide p { font-size: 0.9375rem; }
}

/* ---------- Modals (quick search) ---------- */

.surreal-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(1rem, 4vw, 5rem) 1rem;
	overflow-y: auto;
}
.surreal-modal.is-open { display: flex; }
.surreal-modal__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(30, 30, 30, 0.55);
}
.surreal-modal__window {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 32rem;
	background: var(--wp--preset--color--bg);
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--lg);
	padding: clamp(1.5rem, 3vw, 2rem);
	box-shadow: var(--wp--custom--shadow--hard);
	animation: surreal-fade-in 0.25s ease-out;
}
.surreal-modal__close {
	position: absolute;
	top: 1.1rem;
	right: 1.1rem;
}

/* Quick-search */
.surreal-search-input {
	width: 100%;
	padding: 1rem 1.5rem;
	border-radius: 9999px;
	border: 1px solid rgba(30, 30, 30, 0.3);
	background: var(--wp--preset--color--bg);
	font-size: 1rem;
	font-family: var(--wp--preset--font-family--body);
}
.surreal-search-input:focus { outline: none; border-color: var(--wp--preset--color--ink); }
.surreal-search-pill {
	padding: 0.5rem 1rem;
	border-radius: 9999px;
	border: 1px solid rgba(30, 30, 30, 0.3);
	background: var(--wp--preset--color--bg);
	font-size: 0.75rem;
	font-weight: 700;
	cursor: pointer;
}
.surreal-search-pill:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--bg); }
.surreal-search-result {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem;
	border-radius: var(--wp--custom--radius--md);
	border: 1px solid rgba(30, 30, 30, 0.2);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	margin-bottom: 0.5rem;
}
.surreal-search-result:hover { border-color: var(--wp--preset--color--ink); }
.surreal-search-result img {
	width: 3rem;
	height: 3rem;
	object-fit: cover;
	border-radius: 0.5rem;
	border: 1px solid rgba(30, 30, 30, 0.2);
}

/* ---------- Crackle toggle ---------- */

.surreal-crackle-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.75rem 1.25rem;
	border-radius: 9999px;
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--bg);
	font-weight: 800;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
}
.surreal-crackle-toggle.is-playing {
	background: var(--wp--preset--color--berry);
	color: var(--wp--preset--color--bg);
	border-color: var(--wp--preset--color--berry);
}

/* ---------- WooCommerce restyle ---------- */

.woocommerce ul.products li.product,
.wc-block-grid__product,
.wp-block-woocommerce-product-template .wc-block-product {
	--radius: var(--wp--custom--radius--md);
}

.wp-block-post-template.wc-block-product-template li.product,
.wc-block-product {
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--md);
	padding: 0.75rem;
	background: var(--wp--preset--color--card);
}

.wc-block-components-product-price,
.price {
	font-weight: 800 !important;
	font-family: var(--wp--preset--font-family--body);
}

.wp-block-button.surreal-pill-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 2px solid var(--wp--preset--color--ink);
}
.wp-block-button.surreal-pill-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
}

.added_to_cart,
.wc-block-mini-cart {
	font-family: var(--wp--preset--font-family--body);
}

/* ---------- Product rail (shared: On Sale + Best Smellers) ---------- */

/*
 * Shared card-grid styling for both the On Sale rail (OnSaleSection.tsx)
 * and Best Smellers rail (BestSmellersRail.tsx) — structurally identical
 * in the prototype (same 2-col mobile / 3-col desktop grid of ink-hairline
 * -divided cards), differing only in their header bar, which each section
 * styles itself (.surreal-on-sale__heading vs .surreal-best-smellers__*
 * below). Every product-collection block using this rail gets BOTH its
 * own class (surreal-on-sale / surreal-best-smellers) and this shared
 * .surreal-product-rail class in front-page.html. The shop archive grid
 * (patterns/shop-archive.php) reuses it too, adjusting the card layout to
 * the prototype's ProductCard.tsx under .surreal-shop-grid below.
 *
 * WooCommerce's own flex-grid classes are deliberately specificity-boosted
 * (e.g. `.is-flex-container.is-flex-container`) so a few rules below use
 * !important rather than chasing that; each is scoped to .surreal-product-rail
 * so it can't leak into any other product grid.
 */
.surreal-product-rail {
	padding: 0;
}

.surreal-product-rail .wc-block-product-template.is-flex-container {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 !important;
	border-bottom: 2px solid var(--wp--preset--color--ink);
}
@media (min-width: 1024px) {
	.surreal-product-rail .wc-block-product-template.is-flex-container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.surreal-product-rail .wc-block-product-template.is-flex-container > li {
	width: auto !important;
	margin: 0 !important;
}

.surreal-product-rail .wc-block-product {
	border: none;
	border-radius: 0;
	padding: 0;
	background: transparent;
	border-bottom: 1px solid var(--wp--preset--color--ink);
	border-right: 1px solid var(--wp--preset--color--ink);
	display: flex;
	flex-direction: column;
	cursor: pointer;
	transition: background-color 0.15s;
}
.surreal-product-rail .wc-block-product-template.is-flex-container > .wc-block-product:nth-child(2n) {
	border-right: none;
}
@media (min-width: 1024px) {
	.surreal-product-rail .wc-block-product-template.is-flex-container > .wc-block-product:nth-child(2n) {
		border-right: 1px solid var(--wp--preset--color--ink);
	}
	.surreal-product-rail .wc-block-product-template.is-flex-container > .wc-block-product:nth-child(3n) {
		border-right: none;
	}
}
.surreal-product-rail .wc-block-product:hover {
	background: rgba(30, 30, 30, 0.04);
}

.surreal-product-rail .wc-block-components-product-image {
	position: relative;
	overflow: hidden;
}
.surreal-product-rail .wc-block-components-product-image img {
	transition: transform 0.5s ease-out;
}
.surreal-product-rail .wc-block-product:hover .wc-block-components-product-image img {
	transform: scale(1.05);
}
.surreal-product-rail .wc-block-components-product-sale-badge {
	top: 1rem;
	left: 1rem;
	right: auto;
	background: var(--wp--preset--color--ink);
	border-radius: 9999px;
}
.surreal-product-rail .wc-block-components-product-sale-badge__text {
	color: var(--wp--preset--color--lime);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.surreal-product-rail .wc-block-product > * {
	padding-left: 1rem;
	padding-right: 1rem;
	/*
	 * WooCommerce's own default (assets/client/blocks/product-collection…
	 * style.css) sets `:where(.wc-block-product-template .wc-block-product)
	 * >:not(:last-child){margin-bottom:.75rem}` — zero-specificity :where(),
	 * so a plain selector here overrides it without !important, per this
	 * theme's convention (see the parent-theme focus-outline note above).
	 * Spacing between the card's own elements is handled explicitly below
	 * (the title's border-top/padding-top, the price/button's margin-top).
	 */
	margin-bottom: 0;
}
.surreal-product-rail .wc-block-product > .wc-block-components-product-image {
	padding: 0;
}
.surreal-product-rail .wp-block-post-title {
	border-top: 1px solid var(--wp--preset--color--ink);
	padding-top: 1rem;
	margin: 0;
}
/*
 * The prototype's card typography (title, scent line, price, button) all
 * use `font-mono` — Tailwind's default monospace stack (no custom font-mono
 * override in the prototype's config) — distinct from the rest of this
 * theme's sans/serif type. Since theme.json has no monospace token, the
 * stack is written out literally here, matching Tailwind's default exactly.
 */
.surreal-product-rail .wp-block-post-title,
.surreal-product-rail .wp-block-post-title a {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
@media (min-width: 640px) {
	.surreal-product-rail .wp-block-post-title,
	.surreal-product-rail .wp-block-post-title a {
		font-size: 1rem;
	}
}
.surreal-product-rail__scent {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.7;
	margin: 0.35rem 0 0;
}

.surreal-product-rail .wc-block-components-product-price {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-weight: 700;
	font-size: 0.875rem;
	margin-top: 0.75rem;
}
@media (min-width: 640px) {
	.surreal-product-rail .wc-block-components-product-price { font-size: 1rem; }
}
.surreal-product-rail .wc-block-components-product-price del {
	opacity: 0.5;
	font-weight: 400;
	font-size: 0.8em;
}
.surreal-product-rail .wc-block-components-product-price ins {
	text-decoration: none;
	font-weight: 800 !important;
}

.surreal-product-rail .wc-block-components-product-button {
	margin-top: 0.75rem;
	padding-bottom: 1rem;
}
.surreal-product-rail .wc-block-components-product-button__button {
	/*
	 * WooCommerce's own default CSS sets `width: auto` on this same element
	 * via its .wp-block-button__link class (equal specificity to this rule,
	 * since both are two-class selectors) — !important guarantees this wins
	 * regardless of stylesheet load order, matching the other !important
	 * overrides on this rule for the same reason.
	 */
	width: 100% !important;
	display: flex !important;
	border: 1px solid var(--wp--preset--color--ink) !important;
	background: var(--wp--preset--color--bg) !important;
	color: var(--wp--preset--color--ink) !important;
	border-radius: 9999px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.625rem 1.25rem;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
	transition: background-color 0.15s, color 0.15s, transform 0.1s;
}
@media (min-width: 640px) {
	.surreal-product-rail .wc-block-components-product-button__button {
		font-size: 0.875rem;
		padding: 0.75rem 1.25rem;
	}
}
.surreal-product-rail .wc-block-components-product-button__button:hover {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--bg) !important;
}
.surreal-product-rail .wc-block-components-product-button__button:active {
	transform: scale(0.95);
}

/* ---------- On Sale rail heading ---------- */

.surreal-on-sale__heading {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	letter-spacing: -0.01em;
	padding: 2rem 1rem;
	margin: 0;
	text-align: center;
}
.surreal-on-sale__glyph { font-size: 0.55em; vertical-align: middle; }
.surreal-on-sale__glyph--end { font-size: 0.45em; }

/* ---------- Best Smellers rail heading ---------- */

/*
 * Matches BestSmellersRail.tsx: a left-aligned heading with a "SEE ALL"
 * pill on the right, bordered top and bottom (unlike the On Sale heading,
 * which is centered with no bar borders of its own).
 */
.surreal-best-smellers__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.5rem 1rem;
	border-top: 2px solid var(--wp--preset--color--ink);
}
.surreal-best-smellers__heading {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(1.875rem, 4vw, 3rem);
	letter-spacing: -0.01em;
	margin: 0;
}
.surreal-best-smellers__see-all {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.25rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 800;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s;
}
.surreal-best-smellers__see-all:hover {
	background: var(--wp--preset--color--berry);
}

/* ---------- Shop archive (patterns/shop-archive.php) ---------- */

/*
 * Matches the prototype's ShopPage.tsx: a 1400px container (contentSize on
 * the <main> group) with px-4 sm:px-8 / py-8 sm:py-12 padding.
 */
main.surreal-shop {
	padding: 2rem 1rem;
}
@media (min-width: 640px) {
	main.surreal-shop { padding: 3rem 2rem; }
}

/* Header */
.surreal-shop-header {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-bottom: 1.5rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid rgba(30, 30, 30, 0.2);
}
@media (min-width: 768px) {
	.surreal-shop-header {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
}
.surreal-shop-header__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.75rem;
	margin-bottom: 0.5rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--lime);
	border: 1px solid rgba(30, 30, 30, 0.1);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.surreal-shop-header__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: 2.25rem;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--ink);
	margin: 0;
}
@media (min-width: 640px) {
	.surreal-shop-header__title { font-size: 3rem; line-height: 1; }
}
@media (min-width: 1024px) {
	.surreal-shop-header__title { font-size: 3.75rem; }
}
.surreal-shop-header__description {
	max-width: 36rem;
	margin: 0.25rem 0 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: 0.75rem;
	color: rgba(30, 30, 30, 0.75);
}
@media (min-width: 640px) {
	.surreal-shop-header__description { font-size: 0.875rem; }
}
.surreal-shop-header__count {
	margin: 0;
	flex-shrink: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	color: rgba(30, 30, 30, 0.7);
}

/*
 * Toolbar. A CSS grid rather than the prototype's nested flex rows: the
 * palette block's tone strip is a sibling of its toggle button (the block
 * wrapper is display:contents) and has to span the full toolbar width on
 * its own row, and explicit grid columns keep search/palette/sort together
 * instead of flex-wrap breaking them across lines one at a time. The
 * category pills scroll horizontally when there are more than fit, like
 * the prototype's overflow-x-auto pill row.
 *
 *   ≥1280px: [pills ··················· | search | palette | sort]
 *   <1280px: [pills ···································]
 *            [search | palette | sort]
 *   +strip:  [Filter by Tone: ● ● ● ●  ················]  (own row, order:1)
 */
.surreal-shop-toolbar {
	display: grid;
	/* Mobile: the sort select may shrink (its label truncates) rather than
	   push the row past the viewport. */
	grid-template-columns: minmax(0, 1fr) auto minmax(0, max-content);
	align-items: center;
	gap: 0.75rem 0.625rem;
	margin-bottom: 2rem;
}
.surreal-shop-toolbar > * {
	margin-block: 0;
}
.surreal-category-pills {
	grid-column: 1 / -1;
}
@media (min-width: 640px) {
	.surreal-shop-toolbar { grid-template-columns: 16rem auto auto 1fr; }
}
@media (min-width: 1280px) {
	.surreal-shop-toolbar { grid-template-columns: minmax(0, 1fr) 16rem auto auto; }
	.surreal-category-pills { grid-column: auto; }
}

.surreal-category-pills {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	overflow-x: auto;
	padding-bottom: 0.25rem;
	scrollbar-width: none;
}
.surreal-category-pills::-webkit-scrollbar { display: none; }

/* Shared pill language (category tabs, palette toggle, sort select) */
.surreal-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 1rem;
	border-radius: 9999px;
	border: 1px solid rgba(30, 30, 30, 0.2);
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1rem;
	letter-spacing: 0.025em;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.surreal-pill:hover {
	background: rgba(247, 202, 84, 0.3);
}
.surreal-pill--control {
	padding: 0.5rem 0.875rem;
	letter-spacing: normal;
}
.surreal-pill--control:hover {
	background: var(--wp--preset--color--bg);
}
.surreal-pill.is-active {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Search (core/search, see surreal_shop_search_icon()) */
.surreal-shop-search,
.surreal-shop-sort {
	min-width: 0;
}
.surreal-shop-search .wp-block-search__inside-wrapper {
	position: relative;
	border: 0;
	padding: 0;
}
.surreal-shop-search .wp-block-search__input {
	width: 100%;
	padding: 0.5rem 2rem 0.5rem 2.25rem;
	border-radius: 9999px;
	border: 1px solid rgba(30, 30, 30, 0.2);
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1rem;
}
.surreal-shop-search .wp-block-search__input::placeholder {
	color: rgba(30, 30, 30, 0.5);
}
.surreal-shop-search .wp-block-search__input:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--wp--preset--color--ink);
}
.surreal-shop-search__icon {
	position: absolute;
	left: 0.875rem;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(30, 30, 30, 0.6);
	pointer-events: none;
}
.surreal-shop-search__clear {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	color: rgba(30, 30, 30, 0.6);
}
.surreal-shop-search__clear:hover { color: var(--wp--preset--color--ink); }

/* Palette toggle + tone strip */
.surreal-palette-filter {
	display: contents;
}
.surreal-palette-filter__strip {
	grid-column: 1 / -1;
	order: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	border-radius: 1rem;
	border: 1px solid rgba(30, 30, 30, 0.2);
	background: var(--wp--preset--color--card);
}
.surreal-palette-filter__strip[hidden] {
	display: none;
}
.surreal-palette-filter__heading {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}
.surreal-palette-filter__tones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.surreal-palette-filter__tone {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	border: 1px solid rgba(30, 30, 30, 0.2);
	background: var(--wp--preset--color--bg);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 700;
	text-decoration: none;
}
.surreal-palette-filter__tone.is-active {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
}
.surreal-palette-filter__swatch {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 9999px;
	border: 1px solid rgba(30, 30, 30, 0.3);
	/* "All Tones" (no swatch color set) shows ink, as in the prototype. */
	background: var(--wp--preset--color--ink);
}

/* Sort (woocommerce/catalog-sorting, a native <select>) */
.surreal-shop-sort .woocommerce-ordering {
	position: relative;
	margin: 0;
}
.surreal-shop-sort select.orderby {
	width: 100%;
	max-width: 100%;
	text-overflow: ellipsis;
	appearance: none;
	-webkit-appearance: none;
	padding: 0.5rem 2rem 0.5rem 0.875rem;
	border-radius: 9999px;
	border: 1px solid rgba(30, 30, 30, 0.2);
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1rem;
	cursor: pointer;
}
.surreal-shop-sort select.orderby:hover {
	background: var(--wp--preset--color--bg);
}
.surreal-shop-sort__chevron {
	position: absolute;
	right: 0.875rem;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

/*
 * Product grid: the shared .surreal-product-rail card, re-laid-out to the
 * prototype's ProductCard.tsx — image, then a hairline, then title and
 * price on one row, the scent line, and the full-width ADD TO CART pill
 * pinned to the bottom. A grid on the card itself (rather than a wrapper
 * around the meta) since the product-template's inner blocks render as
 * flat siblings with no wrapper to style.
 */
.surreal-shop-grid .wc-block-product-template.is-flex-container {
	border-top: 2px solid var(--wp--preset--color--ink);
}
.surreal-shop-grid .wc-block-product {
	--surreal-card-pad: 1rem;
	position: relative;
	display: grid;
	/* Title gets at least half the row; a long price (a variable product's
	   range) wraps instead of crushing the title mid-word. */
	grid-template-columns: minmax(50%, 1fr) auto;
	grid-template-rows: auto auto auto 1fr auto;
	column-gap: 0.75rem;
	height: 100%;
	box-sizing: border-box;
}
@media (min-width: 640px) {
	.surreal-shop-grid .wc-block-product { --surreal-card-pad: 1.25rem; }
}
@media (min-width: 1024px) {
	.surreal-shop-grid .wc-block-product { --surreal-card-pad: 1.5rem; }
}
.surreal-shop-grid .wc-block-product > * {
	padding-left: 0;
	padding-right: 0;
}
.surreal-shop-grid .wc-block-product > .wc-block-components-product-image {
	grid-column: 1 / -1;
	grid-row: 1;
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--ink);
}
.surreal-shop-grid .wp-block-post-title {
	grid-column: 1;
	grid-row: 2;
	border-top: 0;
	padding: var(--surreal-card-pad) 0 0 var(--surreal-card-pad);
	line-height: 1.375;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (min-width: 1024px) {
	.surreal-shop-grid .wp-block-post-title,
	.surreal-shop-grid .wp-block-post-title a { font-size: 17px; }
}
.surreal-shop-grid .wc-block-components-product-price {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	padding: var(--surreal-card-pad) var(--surreal-card-pad) 0 0;
	text-align: right;
	line-height: 1.375;
	color: var(--wp--preset--color--ink);
}
@media (min-width: 1024px) {
	.surreal-shop-grid .wc-block-components-product-price { font-size: 17px; }
}
/* Sale price: was/now stacked on mobile, side by side from sm. */
.surreal-shop-grid .wc-block-components-product-price del {
	display: block;
	font-size: 0.75rem;
}
@media (min-width: 640px) {
	.surreal-shop-grid .wc-block-components-product-price del {
		display: inline;
		font-size: 0.875rem;
		margin-right: 0.5rem;
	}
}
.surreal-shop-grid .surreal-product-rail__scent {
	grid-column: 1 / -1;
	grid-row: 3;
	margin: 0.375rem 0 0;
	padding: 0 var(--surreal-card-pad);
	letter-spacing: 0.05em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
@media (min-width: 640px) {
	.surreal-shop-grid .surreal-product-rail__scent { font-size: 0.875rem; }
}
.surreal-shop-grid .wc-block-components-product-button {
	grid-column: 1 / -1;
	grid-row: 5;
	margin: 1rem 0 0;
	padding: 0 var(--surreal-card-pad) var(--surreal-card-pad);
}
.surreal-shop-grid .wc-block-components-product-button__button {
	letter-spacing: 0.05em;
}

/* Hover-revealed wishlist heart (surreal/wishlist-button) over the image */
.surreal-shop-grid .surreal-card-wishlist {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 2;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid rgba(30, 30, 30, 0.2);
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	opacity: 0;
	transition: opacity 0.15s, transform 0.15s, background-color 0.15s;
}
.surreal-shop-grid .surreal-card-wishlist .surreal-wishlist-btn__icon {
	width: 1rem;
	height: 1rem;
}
.surreal-shop-grid .wc-block-product:hover .surreal-card-wishlist,
.surreal-shop-grid .surreal-card-wishlist:focus-visible,
.surreal-shop-grid .surreal-card-wishlist.is-active {
	opacity: 1;
}
/* Touch screens have no hover to reveal it. */
@media (hover: none) {
	.surreal-shop-grid .surreal-card-wishlist { opacity: 1; }
}
.surreal-shop-grid .surreal-card-wishlist:hover {
	background: var(--wp--preset--color--card);
	transform: scale(1.1);
}
.surreal-shop-grid .surreal-card-wishlist:active { transform: scale(0.9); }
.surreal-shop-grid .surreal-card-wishlist.is-active {
	background: rgba(255, 255, 255, 0.9);
	border-color: rgba(30, 30, 30, 0.2);
	color: var(--wp--preset--color--berry);
}

/* Top-left badge (surreal_product_card_badge()) */
.surreal-card-badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 1;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	border: 1px solid rgba(30, 30, 30, 0.2);
	background: rgba(255, 255, 255, 0.95);
	color: var(--wp--preset--color--ink);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
@media (min-width: 640px) {
	.surreal-card-badge { font-size: 0.75rem; }
}
.surreal-card-badge--sold-out {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
}

/* Sold-out cards (WooCommerce's own `outofstock` post class on the <li>) */
.surreal-shop-grid .outofstock .wp-block-post-title a {
	text-decoration: line-through;
	color: rgba(30, 30, 30, 0.6);
}
.surreal-shop-grid .outofstock .wc-block-components-product-button__button {
	background: rgba(250, 244, 232, 0.8) !important;
	color: rgba(30, 30, 30, 0.4) !important;
	border-color: rgba(30, 30, 30, 0.3) !important;
	cursor: not-allowed;
	pointer-events: none;
}

/* Pagination */
.surreal-shop-pagination {
	margin-top: 2rem;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 700;
}
.surreal-shop-pagination a,
.surreal-shop-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	padding: 0.5rem 0.875rem;
	border-radius: 9999px;
	border: 1px solid rgba(30, 30, 30, 0.2);
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	box-sizing: border-box;
}
.surreal-shop-pagination a:hover { background: var(--wp--preset--color--bg); }
.surreal-shop-pagination .page-numbers.current {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
}

/* No results */
.surreal-shop-empty {
	padding: 5rem 2rem;
	border-radius: 1.5rem;
	border: 1px solid rgba(30, 30, 30, 0.2);
	background: var(--wp--preset--color--card);
	text-align: center;
}
.surreal-shop-empty__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: 1.5rem;
	margin: 0 0 0.5rem;
}
.surreal-shop-empty__text {
	max-width: 24rem;
	margin: 0 auto 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	color: rgba(30, 30, 30, 0.7);
}
.surreal-shop-empty__reset .wp-block-button__link {
	padding: 0.625rem 1.5rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: background-color 0.15s;
}
.surreal-shop-empty__reset .wp-block-button__link:hover {
	background: var(--wp--preset--color--berry);
}

/* ---------- Product detail page (single-product.html) ---------- */

/*
 * Values below are read off ProductDetailPage.tsx's Tailwind classes. A few
 * of its colors aren't theme palette tokens (they're specific to this page
 * in the prototype too), so they're written as literals:
 *   #7A2314 rust (back link, review stars, card accents)
 *   #FCE68A pale yellow (badge, scent pills)
 *   #EBE2D3 / #E5D7C2 sand (photo column)
 *   #EAE2D2 sand (inactive tab), #EADBCE (button hover)
 */
.surreal-pdp-page > * {
	margin-block: 0;
}

/* Split hero */
.surreal-pdp {
	border-bottom: 2px solid var(--wp--preset--color--ink);
}
.surreal-pdp__grid.wp-block-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 !important;
	margin: 0;
}
@media (min-width: 1024px) {
	.surreal-pdp__grid.wp-block-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		min-height: 680px;
	}
}
/* Photo first on mobile, buy box first (left) on desktop. */
.surreal-pdp__gallery-col.wp-block-column {
	order: 1;
	flex-basis: auto;
	background: #EBE2D3;
	height: 300px;
}
.surreal-pdp__buybox-col.wp-block-column {
	order: 2;
	flex-basis: auto;
	padding: 1rem;
	border-top: 2px solid var(--wp--preset--color--ink);
}
@media (min-width: 640px) {
	.surreal-pdp__gallery-col.wp-block-column { height: 400px; }
	.surreal-pdp__buybox-col.wp-block-column { padding: 2rem; }
}
@media (min-width: 1024px) {
	.surreal-pdp__gallery-col.wp-block-column { order: 2; height: auto; }
	.surreal-pdp__buybox-col.wp-block-column {
		order: 1;
		padding: 2.5rem;
		border-top: 0;
		border-right: 2px solid var(--wp--preset--color--ink);
	}
}
.surreal-pdp__buybox-col > * {
	margin-block: 0;
}

/* Photo carousel (surreal/product-gallery) */
.surreal-gallery {
	position: relative;
	height: 100%;
	min-height: 100%;
	overflow: hidden;
	background: #E5D7C2;
}
.surreal-gallery__slides,
.surreal-gallery__slide {
	position: absolute;
	inset: 0;
}
.surreal-gallery__slide {
	opacity: 0;
	transition: opacity 0.7s ease-in-out;
}
.surreal-gallery__slide.is-active {
	opacity: 1;
}
.surreal-gallery__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.surreal-gallery__badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 2;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	background: #F6B8AF;
	border: 2px solid #1B1B1B;
	color: #1B1B1B;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	transition: transform 0.2s;
}
.surreal-gallery__badge svg { width: 1rem; height: 1rem; }
.surreal-gallery__badge:hover { transform: rotate(12deg); }
@media (min-width: 640px) {
	.surreal-gallery__badge { top: 1.5rem; right: 1.5rem; width: 3rem; height: 3rem; }
	.surreal-gallery__badge svg { width: 1.25rem; height: 1.25rem; }
}
.surreal-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.9);
	border: 2px solid #1B1B1B;
	color: #1B1B1B;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.8;
	cursor: pointer;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	transition: opacity 0.15s, background-color 0.15s, transform 0.1s;
}
.surreal-gallery__nav svg { width: 1rem; height: 1rem; }
.surreal-gallery__nav:hover { opacity: 1; background: var(--wp--preset--color--bg); }
.surreal-gallery__nav:active { transform: translateY(-50%) scale(0.95); }
.surreal-gallery__nav--prev { left: 0.75rem; }
.surreal-gallery__nav--next { right: 0.75rem; }
@media (min-width: 640px) {
	.surreal-gallery__nav { width: 2.5rem; height: 2.5rem; }
	.surreal-gallery__nav svg { width: 1.25rem; height: 1.25rem; }
	.surreal-gallery__nav--prev { left: 1rem; }
	.surreal-gallery__nav--next { right: 1rem; }
}
.surreal-gallery__dots {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.625rem;
	border-radius: 9999px;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(2px);
}
@media (min-width: 640px) {
	.surreal-gallery__dots { bottom: 1.25rem; right: 1.5rem; padding: 0.375rem 0.75rem; }
}
.surreal-gallery__dot {
	width: 0.375rem;
	height: 0.375rem;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: width 0.2s, background-color 0.2s;
}
.surreal-gallery__dot:hover { background: #fff; }
.surreal-gallery__dot.is-active { width: 0.875rem; background: #fff; }
@media (min-width: 640px) {
	.surreal-gallery__dot { width: 0.5rem; height: 0.5rem; }
	.surreal-gallery__dot.is-active { width: 1rem; }
}
.surreal-gallery__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	height: 0.25rem;
	background: rgba(0, 0, 0, 0.1);
}
.surreal-gallery__progress-bar {
	display: block;
	height: 100%;
	width: 0;
	background: #1B1B1B;
}
.surreal-gallery__progress-bar.is-running {
	animation: surreal-gallery-progress var(--surreal-gallery-interval, 4000ms) linear forwards;
}
@keyframes surreal-gallery-progress {
	from { width: 0; }
	to { width: 100%; }
}

/* Buy-box header (surreal/product-buy-box-header) */
.surreal-pdp-header__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 0.75rem;
}
.surreal-pdp-header__back {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #7A2314;
	text-decoration: none;
	transition: color 0.15s;
}
.surreal-pdp-header__back svg { transition: transform 0.15s; }
.surreal-pdp-header__back:hover { color: #C73D26; }
.surreal-pdp-header__back:hover svg { transform: translateX(-2px); }
.surreal-pdp-header__badge {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(122, 35, 20, 0.9);
	background: #FCE68A;
	border: 1px solid #1B1B1B;
	border-radius: 9999px;
	padding: 0.125rem 0.625rem;
	white-space: nowrap;
}
@media (min-width: 640px) {
	.surreal-pdp-header__badge { font-size: 11px; padding: 0.125rem 0.75rem; }
}
.surreal-pdp-header__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: 1.875rem;
	line-height: 1.08;
	letter-spacing: -0.025em;
	color: #1B1B1B;
	margin: 0 0 0.25rem;
}
@media (min-width: 640px) {
	.surreal-pdp-header__title { font-size: 2.25rem; }
}
@media (min-width: 1024px) {
	.surreal-pdp-header__title { font-size: 46px; }
}
.surreal-pdp-header__subtitle {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: 0.875rem;
	color: rgba(27, 27, 27, 0.75);
	margin: 0 0 0.75rem;
}
@media (min-width: 640px) {
	.surreal-pdp-header__subtitle { font-size: 1rem; }
}
.surreal-pdp-header__pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
}
@media (min-width: 640px) {
	.surreal-pdp-header__pills { margin-bottom: 1.25rem; }
}
.surreal-pdp-header__pill {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.75rem;
	color: #1B1B1B;
	background: #FCE68A;
	border: 1px solid #1B1B1B;
	border-radius: 10px;
	padding: 0.25rem 0.75rem;
	box-shadow: 0 1px rgba(0, 0, 0, 0.05);
}
@media (min-width: 640px) {
	.surreal-pdp-header__pill { font-size: 0.875rem; }
}
.surreal-pdp-header__rating {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-left: auto;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.75rem;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--card);
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: 9999px;
	padding: 0.25rem 0.75rem;
}
.surreal-pdp-header__rating-star { fill: var(--wp--preset--color--yellow); color: var(--wp--preset--color--ink); }
.surreal-pdp-header__rating-count { opacity: 0.5; }

/*
 * Add-to-cart row (WooCommerce's add-to-cart-with-options form + our
 * wishlist button). The prototype lays it out as: size cards on top, then
 * [quantity][ADD TO CART • total][♡] on one line. The form (size chips +
 * the quantity/button row) is one block, so the wishlist button is pinned
 * to the bottom-right of the actions group and the button row leaves room
 * for it.
 */
.surreal-pdp__actions.wp-block-group {
	position: relative;
	display: block;
	margin-bottom: 1.5rem;
}
.surreal-pdp__actions .wp-block-add-to-cart-with-options > * {
	margin-block: 0;
}
.surreal-pdp__actions .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute > .wp-block-group {
	margin: 0 0 1.25rem !important;
}
/* The "Size" label stays for screen readers (it labels the chip group). */
.surreal-pdp__actions .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.surreal-pdp__actions .wc-block-components-product-stock-indicator--in-stock {
	display: none;
}
.surreal-pdp__actions .wc-block-components-product-stock-indicator {
	margin: 0 0 0.75rem !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 700;
}

/* Size option cards (WooCommerce's chips + surreal_variation_chip_prices()) */
/* WooCommerce's vertical flex wrapper would otherwise shrink-wrap the chips. */
.surreal-pdp__actions .wp-block-woocommerce-product-filter-chips {
	align-self: stretch;
	width: 100%;
}
.surreal-pdp__actions .wc-block-product-filter-chips__fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}
.surreal-pdp__actions .wc-block-product-filter-chips__items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}
@media (min-width: 640px) {
	.surreal-pdp__actions .wc-block-product-filter-chips__items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.surreal-pdp__actions .wc-block-product-filter-chips__item {
	display: block;
	border: 2px solid rgba(30, 30, 30, 0.25);
	border-radius: 12px;
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
	padding: 0.5rem 0.625rem;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
@media (min-width: 640px) {
	.surreal-pdp__actions .wc-block-product-filter-chips__item { padding: 0.5rem 0.75rem; }
}
.surreal-pdp__actions .wc-block-product-filter-chips__item:hover { border-color: var(--wp--preset--color--ink); }
.surreal-pdp__actions .wc-block-product-filter-chips__item[aria-checked="true"] {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
	box-shadow: 0 1px rgba(0, 0, 0, 0.05);
}
.surreal-pdp__actions .wc-block-product-filter-chips__item:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.surreal-pdp__actions .wc-block-product-filter-chips__label {
	display: block;
}
.surreal-pdp__actions .wc-block-product-filter-chips__text {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 11px;
	line-height: 1.25;
}
.surreal-chip-price {
	display: block;
	margin-top: 0.125rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 10px;
}
@media (min-width: 640px) {
	.surreal-pdp__actions .wc-block-product-filter-chips__text { font-size: 0.75rem; }
	.surreal-chip-price { font-size: 11px; }
}
.surreal-pdp__actions .wc-block-product-filter-chips__item[aria-checked="true"] .surreal-chip-price {
	color: var(--wp--preset--color--yellow);
	font-weight: 400;
}

/* Quantity + button row */
.surreal-pdp__actions .wp-block-add-to-cart-with-options > .wp-block-group.is-layout-flex {
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5rem;
	padding-right: 3rem; /* wishlist (2.5rem) + gap */
}
@media (min-width: 640px) {
	.surreal-pdp__actions .wp-block-add-to-cart-with-options > .wp-block-group.is-layout-flex {
		gap: 0.75rem;
		padding-right: 3.75rem; /* wishlist (3rem) + gap */
	}
}
.surreal-pdp__actions .wc-block-add-to-cart-with-options__quantity-selector .quantity.wc-block-components-quantity-selector {
	display: inline-flex;
	align-items: center;
	background: var(--wp--preset--color--card);
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: 9999px;
	padding: 0.125rem;
	box-shadow: 0 1px rgba(0, 0, 0, 0.05);
}
@media (min-width: 640px) {
	.surreal-pdp__actions .wc-block-add-to-cart-with-options__quantity-selector .quantity.wc-block-components-quantity-selector { padding: 0.25rem; }
}
/* WooCommerce renders input, then −, then +; the prototype reads − 1 +. */
.surreal-pdp__actions .wc-block-components-quantity-selector__button--minus { order: 0; }
.surreal-pdp__actions .wc-block-components-quantity-selector__input { order: 1; }
.surreal-pdp__actions .wc-block-components-quantity-selector__button--plus { order: 2; }
.surreal-pdp__actions .wc-block-components-quantity-selector__input {
	width: 1.5rem;
	min-width: 0;
	padding: 0;
	border: none;
	background: transparent;
	text-align: center;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.75rem;
	color: var(--wp--preset--color--ink);
	-moz-appearance: textfield;
}
.surreal-pdp__actions .wc-block-components-quantity-selector__input::-webkit-inner-spin-button,
.surreal-pdp__actions .wc-block-components-quantity-selector__input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.surreal-pdp__actions .wc-block-components-quantity-selector__button {
	width: 1.75rem;
	height: 1.75rem;
	min-width: 0;
	padding: 0;
	border: none;
	border-radius: 9999px;
	background: var(--wp--preset--color--bg);
	color: var(--wp--preset--color--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.875rem;
	cursor: pointer;
	opacity: 1;
	transition: background-color 0.15s;
}
.surreal-pdp__actions .wc-block-components-quantity-selector__button:hover:not(:disabled) { background: #EADBCE; }
.surreal-pdp__actions .wc-block-components-quantity-selector__button:disabled { opacity: 0.5; cursor: default; }
@media (min-width: 640px) {
	.surreal-pdp__actions .wc-block-components-quantity-selector__input { width: 2rem; font-size: 0.875rem; }
	.surreal-pdp__actions .wc-block-components-quantity-selector__button { width: 2rem; height: 2rem; }
}

.surreal-pdp__actions .wp-block-woocommerce-product-button {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}
/*
 * Scoped to the buy box: unscoped, these !important rules (needed against
 * WooCommerce's own button styles) would also hit every product-card
 * button (rails, shop grid), which use the outlined cream pill instead.
 */
.surreal-pdp__actions .wc-block-components-product-button__button.add_to_cart_button {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	border-radius: 9999px !important;
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--bg) !important;
	border: none !important;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 800;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 0.75rem 1rem !important;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
	transition: background-color 0.2s, transform 0.1s;
}
@media (min-width: 640px) {
	.surreal-pdp__actions .wc-block-components-product-button__button.add_to_cart_button {
		gap: 0.5rem;
		font-size: 0.875rem;
		padding: 0.875rem 1.5rem !important;
	}
}
.surreal-pdp__actions .wc-block-components-product-button__button.add_to_cart_button:hover { background: var(--wp--preset--color--berry) !important; }
.surreal-pdp__actions .wc-block-components-product-button__button.add_to_cart_button:active { transform: scale(0.98); }
.surreal-pdp__actions .wc-block-components-product-button__button.add_to_cart_button.disabled { opacity: 0.6; }
.surreal-atc-icon { flex-shrink: 0; }
.surreal-atc-total { overflow: hidden; text-overflow: ellipsis; }

/* Wishlist toggle (surreal/wishlist-button) — base style, shared with the shop grid */
.surreal-wishlist-btn {
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border-radius: 9999px;
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 1px rgba(0, 0, 0, 0.05);
	transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
@media (min-width: 640px) {
	.surreal-wishlist-btn { width: 3rem; height: 3rem; }
}
.surreal-wishlist-btn:hover { background: var(--wp--preset--color--bg); }
.surreal-wishlist-btn:active { transform: scale(0.95); }
.surreal-wishlist-btn.is-active {
	background: var(--wp--preset--color--berry);
	border-color: var(--wp--preset--color--berry);
	color: var(--wp--preset--color--bg);
}
.surreal-wishlist-btn.is-active .surreal-wishlist-btn__icon { fill: currentColor; }
.surreal-pdp__actions > .surreal-wishlist-btn {
	position: absolute;
	right: 0;
	bottom: 0.125rem;
	margin: 0;
}

/* Arched "The Lowdown" / "More Good Stuff" tabs (surreal/product-tabs) */
.surreal-pdp-tabs {
	margin-top: 0.5rem;
	padding-top: 0.5rem;
}
.surreal-pdp-tabs__triggers {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}
.surreal-pdp-tabs__trigger {
	border: 2px solid transparent;
	border-bottom: none;
	border-radius: 18px 18px 0 0;
	background: rgba(234, 226, 210, 0.6);
	color: rgba(30, 30, 30, 0.7);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 900;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.625rem 0.75rem;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}
.surreal-pdp-tabs__trigger:hover { background: #EAE2D2; }
.surreal-pdp-tabs__trigger.is-active {
	background: var(--wp--preset--color--lilac);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
@media (min-width: 640px) {
	.surreal-pdp-tabs__trigger {
		border-radius: 24px 24px 0 0;
		font-size: 0.875rem;
		padding: 0.75rem 1rem;
	}
}
.surreal-pdp-tabs__panel {
	position: relative;
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: 0 20px 20px 20px;
	background: var(--wp--preset--color--card);
	padding: 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	line-height: 1.625;
	color: #1B1B1B;
}
@media (min-width: 640px) {
	.surreal-pdp-tabs__panel {
		border-radius: 0 24px 24px 24px;
		padding: 1.75rem;
		font-size: 13.5px;
	}
}
.surreal-pdp-tabs__pane { display: none; }
.surreal-pdp-tabs__pane.is-active { display: block; }
.surreal-pdp-tabs__pane > :first-child { margin-top: 0; }
.surreal-pdp-tabs__pane > :last-child { margin-bottom: 0; }
.surreal-pdp-tabs__pane p { margin: 0 0 0.75rem; }
/* Bulleted lists (e.g. the Lowdown's feature list) with the prototype's bold "•" */
.surreal-pdp-tabs__pane ul {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	gap: 0.625rem;
}
.surreal-pdp-tabs__pane li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}
.surreal-pdp-tabs__pane li::before {
	content: "•";
	font-weight: 900;
}
.surreal-pdp-tabs__pane h2,
.surreal-pdp-tabs__pane h3,
.surreal-pdp-tabs__pane h4 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.875rem;
	margin: 1rem 0 0.25rem;
}
.surreal-pdp-tabs__pane > h2:first-child,
.surreal-pdp-tabs__pane > h3:first-child,
.surreal-pdp-tabs__pane > h4:first-child { margin-top: 0; }

.surreal-pdp-tabs__story {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(27, 27, 27, 0.15);
}
.surreal-pdp-tabs__story-name {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.75rem;
}
.surreal-pdp-tabs__story-tagline {
	display: block;
	font-size: 11px;
	color: rgba(27, 27, 27, 0.7);
}
@media (min-width: 640px) {
	.surreal-pdp-tabs__story-name { font-size: 0.875rem; }
}
.surreal-crackle-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-left: auto;
	border: 2px solid #1B1B1B;
	border-radius: 9999px;
	background: #FAF5EA;
	color: #1B1B1B;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.75rem;
	padding: 0.375rem 0.75rem;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.surreal-crackle-toggle:hover { background: #EADBCE; }
.surreal-crackle-toggle__icon { color: #FCE68A; stroke: #1B1B1B; }
.surreal-crackle-toggle.is-playing {
	background: #7A2314;
	border-color: #7A2314;
	color: #fff;
	animation: surreal-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.surreal-crackle-toggle.is-playing .surreal-crackle-toggle__icon { stroke: #FCE68A; }
@keyframes surreal-pulse {
	50% { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
	.surreal-crackle-toggle.is-playing { animation: none; }
}
.surreal-pdp-tabs__sticker {
	position: absolute;
	bottom: -0.75rem;
	left: -0.75rem;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 9999px;
	background: #fff;
	border: 2px solid #1B1B1B;
	color: #1B1B1B;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px rgba(0, 0, 0, 0.05);
}
.surreal-pdp-tabs__sticker svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 640px) {
	.surreal-pdp-tabs__sticker { bottom: -1rem; left: -1rem; width: 2.75rem; height: 2.75rem; }
	.surreal-pdp-tabs__sticker svg { width: 1.5rem; height: 1.5rem; }
}

/* Shared inner width for the full-bleed sections below the hero (max-w-7xl) */
.surreal-pdp-capsules > *,
.surreal-pdp-faq > *,
.surreal-reviews > *,
.surreal-pdp-recs > * {
	max-width: 80rem;
	margin-left: auto;
	margin-right: auto;
}

/* Feature capsules (surreal/feature-capsules) */
.surreal-pdp-capsules {
	padding: 1.5rem 1rem;
	border-bottom: 2px solid #1B1B1B;
}
@media (min-width: 640px) {
	.surreal-pdp-capsules { padding: 2rem 1.5rem; }
}
@media (min-width: 1024px) {
	.surreal-pdp-capsules { padding: 2.5rem 2rem; }
}
.surreal-capsules__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	align-items: stretch;
}
@media (min-width: 640px) {
	.surreal-capsules__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}
@media (min-width: 1024px) {
	.surreal-capsules__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
}
@media (min-width: 1280px) {
	.surreal-capsules__grid { gap: 1.25rem; }
}
.surreal-capsules__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem;
	border-radius: 1rem;
	background: #fff;
	border: 2px solid #1B1B1B;
	box-shadow: 0 1px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.15s;
}
.surreal-capsules__item:hover { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); }
@media (min-width: 640px) {
	.surreal-capsules__item { border-radius: 9999px; padding: 0.5rem; }
}
@media (min-width: 1024px) {
	.surreal-capsules__item { padding: 0.625rem; }
}
.surreal-capsules__circle {
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	border-radius: 9999px;
	border: 2px solid #1B1B1B;
	color: #1B1B1B;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
@media (min-width: 640px) {
	.surreal-capsules__circle { width: 3.5rem; height: 3.5rem; }
}
@media (min-width: 1024px) {
	.surreal-capsules__circle { width: 3.25rem; height: 3.25rem; }
}
@media (min-width: 1280px) {
	.surreal-capsules__circle { width: 3.75rem; height: 3.75rem; }
}
.surreal-capsules__icon { width: 2rem; height: 2rem; }
@media (min-width: 640px) {
	.surreal-capsules__icon { width: 2.25rem; height: 2.25rem; }
}
@media (min-width: 1280px) {
	.surreal-capsules__icon { width: 2.5rem; height: 2.5rem; }
}
.surreal-capsules__caption {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 900;
	font-size: 6px;
	letter-spacing: -0.05em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1;
}
.surreal-capsules__badge {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: 1rem;
	line-height: 1;
	margin: 0.125rem 0;
}
@media (min-width: 640px) {
	.surreal-capsules__caption { font-size: 6.5px; }
	.surreal-capsules__badge { font-size: 1.125rem; }
}
@media (min-width: 1024px) {
	.surreal-capsules__badge { font-size: 1.25rem; }
}
.surreal-capsules__text {
	margin: 0;
	padding-right: 0.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: 0.75rem;
	line-height: 1.375;
	color: #1B1B1B;
}
@media (min-width: 640px) {
	.surreal-capsules__text { font-size: 13px; }
}

/* "All about candles" FAQ — core/details */
.surreal-pdp-faq {
	background: var(--wp--preset--color--yellow);
	padding: 3.5rem 1rem;
	border-bottom: 2px solid var(--wp--preset--color--ink);
}
@media (min-width: 640px) {
	.surreal-pdp-faq { padding: 5rem 2rem; }
}
.surreal-pdp-faq__grid.wp-block-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
	margin-bottom: 0;
}
@media (min-width: 1024px) {
	.surreal-pdp-faq__grid.wp-block-columns {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 4rem;
	}
	.surreal-pdp-faq__intro {
		position: sticky;
		top: 6rem;
	}
}
.surreal-pdp-faq__grid > .wp-block-column { flex-basis: auto; }
.surreal-pdp-faq__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: 2.25rem;
	line-height: 1.25;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--ink);
	margin: 0 0 1rem;
}
@media (min-width: 640px) {
	.surreal-pdp-faq__title { font-size: 3rem; }
}
@media (min-width: 1024px) {
	.surreal-pdp-faq__title { font-size: 3.75rem; }
}
.surreal-pdp-faq__lede {
	max-width: 28rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.625;
	color: rgba(30, 30, 30, 0.8);
}
@media (min-width: 640px) {
	.surreal-pdp-faq__lede { font-size: 1rem; }
}
.surreal-pdp-faq__cta {
	display: none !important;
	margin-top: 2rem;
}
@media (min-width: 1024px) {
	.surreal-pdp-faq__cta { display: flex !important; }
}
/* Ink pill buttons (FAQ "Our Clean Promise", reviews "Write a Review") */
.surreal-pdp-faq__cta .wp-block-button__link,
.surreal-reviews__write .wp-block-button__link {
	padding: 0.75rem 1.5rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 800;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	transition: background-color 0.15s;
}
.surreal-pdp-faq__cta .wp-block-button__link:hover,
.surreal-reviews__write .wp-block-button__link:hover {
	background: var(--wp--preset--color--berry);
}
.surreal-pdp-faq__list {
	border-top: 2px solid var(--wp--preset--color--ink);
	border-bottom: 2px solid var(--wp--preset--color--ink);
}
.surreal-pdp-faq__list > .wp-block-details {
	margin: 0;
	padding: 1rem 0;
	border-top: 2px solid var(--wp--preset--color--ink);
}
.surreal-pdp-faq__list > .wp-block-details:first-child { border-top: 0; }
@media (min-width: 640px) {
	.surreal-pdp-faq__list > .wp-block-details { padding: 1.25rem 0; }
}
.surreal-pdp-faq__list summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	list-style: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
	transition: color 0.15s;
}
.surreal-pdp-faq__list summary::-webkit-details-marker { display: none; }
.surreal-pdp-faq__list summary:hover { color: var(--wp--preset--color--berry); }
@media (min-width: 640px) {
	.surreal-pdp-faq__list summary { font-size: 1.5rem; }
}
/* The (+)/(−) circle: two CSS bars, the vertical one hidden when open. */
.surreal-pdp-faq__list summary::after {
	content: "";
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	border-radius: 9999px;
	background-color: var(--wp--preset--color--ink);
	background-image:
		linear-gradient(var(--wp--preset--color--yellow), var(--wp--preset--color--yellow)),
		linear-gradient(var(--wp--preset--color--yellow), var(--wp--preset--color--yellow));
	background-size: 0.875rem 2.5px, 2.5px 0.875rem;
	background-position: center;
	background-repeat: no-repeat;
	transition: background-color 0.15s;
}
.surreal-pdp-faq__list details[open] > summary::after {
	background-size: 0.875rem 2.5px, 0 0;
}
.surreal-pdp-faq__list summary:hover::after { background-color: var(--wp--preset--color--berry); }
@media (min-width: 640px) {
	.surreal-pdp-faq__list summary::after { width: 2.25rem; height: 2.25rem; }
}
.surreal-pdp-faq__list .wp-block-details > :not(summary) {
	margin: 0;
	padding: 0.875rem 2rem 0.5rem 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	line-height: 1.625;
	color: rgba(30, 30, 30, 0.85);
	animation: surreal-fade-in 0.25s ease-out;
}
@media (min-width: 640px) {
	.surreal-pdp-faq__list .wp-block-details > :not(summary) { font-size: 0.875rem; }
}

/* Reviews — WooCommerce's product-reviews blocks */
.surreal-reviews {
	padding: 3.5rem 1rem;
	border-bottom: 1px solid rgba(30, 30, 30, 0.15);
}
@media (min-width: 640px) {
	.surreal-reviews { padding: 5rem 2rem; }
}
.surreal-reviews__header.wp-block-group {
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
	margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
	.surreal-reviews__header.wp-block-group { flex-direction: row; align-items: flex-end; }
}
.surreal-reviews__header > * { margin: 0; }
.surreal-reviews__eyebrow {
	margin: 0 0 0.25rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 800;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--berry);
}
.surreal-reviews__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: 1.875rem;
	color: var(--wp--preset--color--ink);
}
@media (min-width: 640px) {
	.surreal-reviews__title { font-size: 2.25rem; }
}
.surreal-reviews__empty {
	margin: 0;
	padding: 2rem;
	border: 2px dashed rgba(27, 27, 27, 0.3);
	border-radius: 24px;
	text-align: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	color: rgba(27, 27, 27, 0.7);
}

/* Review cards */
.surreal-reviews .wp-block-woocommerce-product-review-template {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
}
@media (min-width: 768px) {
	.surreal-reviews .wp-block-woocommerce-product-review-template { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.surreal-reviews .wp-block-woocommerce-product-review-template > li {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0;
	padding: 1.5rem;
	border-radius: 24px;
	background: #fff;
	border: 2px solid #1B1B1B;
	box-shadow: 0 1px rgba(0, 0, 0, 0.05);
}
@media (min-width: 640px) {
	.surreal-reviews .wp-block-woocommerce-product-review-template > li { padding: 1.75rem; }
}
.surreal-reviews .wp-block-woocommerce-product-review-template > li > * { margin-block: 0; }
.surreal-review-card__top.wp-block-group {
	align-items: center;
	margin-bottom: 0.75rem;
}
.surreal-reviews .wp-block-woocommerce-product-review-rating { color: #7A2314; }
.surreal-reviews .wp-block-woocommerce-product-review-date {
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	color: rgba(27, 27, 27, 0.6);
}
.surreal-reviews .wp-block-woocommerce-product-review-content {
	flex: 1;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	line-height: 1.625;
	color: rgba(27, 27, 27, 0.8);
}
@media (min-width: 640px) {
	.surreal-reviews .wp-block-woocommerce-product-review-content { font-size: 13px; }
}
.surreal-reviews .wp-block-woocommerce-product-review-content p { margin: 0; }
.surreal-review-card__bottom.wp-block-group {
	align-items: center;
	margin-top: 1.5rem !important;
	padding-top: 1rem;
	border-top: 1px solid #EADBCE;
}
.surreal-reviews .wp-block-woocommerce-product-review-author-name {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.75rem;
	color: #1B1B1B;
}
.surreal-review-verified {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-left: auto;
	padding: 0.125rem 0.5rem;
	border-radius: 9999px;
	background: #C6F6D5;
	color: #22543D;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/*
 * Review form — a white card above the reviews, like the prototype's. On the
 * outer #review_form_wrapper: WooCommerce's classic stylesheet resets the
 * inner #respond's background/border/padding with ID selectors.
 */
.surreal-reviews #review_form_wrapper {
	margin: 0 0 2.5rem;
	padding: 1.5rem;
	border-radius: 24px;
	background: #fff;
	border: 2px solid var(--wp--preset--color--ink);
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	animation: surreal-fade-in 0.25s ease-out;
}
.surreal-reviews #review_form_wrapper[hidden] { display: none; }
@media (min-width: 640px) {
	.surreal-reviews #review_form_wrapper { padding: 2rem; }
}
.surreal-reviews .comment-reply-title {
	display: block;
	margin-bottom: 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--wp--preset--color--ink);
}
.surreal-reviews .comment-form label {
	font-weight: 700;
	font-size: 0.75rem;
}
.surreal-reviews .comment-form input[type="text"],
.surreal-reviews .comment-form input[type="email"],
.surreal-reviews .comment-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem;
	border-radius: 0.75rem;
	border: 1px solid rgba(30, 30, 30, 0.3);
	background: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
}
.surreal-reviews .comment-form .stars button { color: var(--wp--preset--color--yellow); }
.surreal-reviews .comment-form .form-submit input[type="submit"],
.surreal-reviews .comment-form .form-submit .submit {
	padding: 0.625rem 1.5rem;
	border: 0;
	border-radius: 9999px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s;
}
.surreal-reviews .comment-form .form-submit .submit:hover { background: var(--wp--preset--color--berry); }

/* Recommendations — WooCommerce related-products collection as white cards */
.surreal-pdp-recs {
	padding: 3.5rem 1rem;
}
@media (min-width: 640px) {
	.surreal-pdp-recs { padding: 5rem 2rem; }
}
.surreal-pdp-recs__header.wp-block-group {
	align-items: center;
	gap: 1rem;
	margin-bottom: 2rem;
}
.surreal-pdp-recs__header > * { margin: 0; }
.surreal-pdp-recs__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: 1.875rem;
	color: #1B1B1B;
}
@media (min-width: 640px) {
	.surreal-pdp-recs__title { font-size: 2.25rem; }
}
.surreal-pdp-recs__all a {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #7A2314;
	text-decoration: none;
	white-space: nowrap;
}
.surreal-pdp-recs__all a:hover { text-decoration: underline; }
.surreal-pdp-recs__grid .wc-block-product-template.is-flex-container {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem !important;
}
@media (min-width: 640px) {
	.surreal-pdp-recs__grid .wc-block-product-template.is-flex-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.surreal-pdp-recs__grid .wc-block-product-template.is-flex-container { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.surreal-pdp-recs__grid .wc-block-product-template.is-flex-container > li {
	width: auto !important;
	margin: 0 !important;
}
.surreal-pdp-recs__grid .wc-block-product {
	display: flex;
	flex-direction: column;
	padding: 1.25rem;
	border-radius: 24px;
	background: #fff;
	border: 2px solid #1B1B1B;
	box-shadow: 0 1px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.2s;
}
.surreal-pdp-recs__grid .wc-block-product:hover { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); }
.surreal-pdp-recs__grid .wc-block-product > * { margin: 0; }
.surreal-pdp-recs__grid .wc-block-components-product-image {
	height: 11rem;
	margin-bottom: 1rem !important;
	border-radius: 18px;
	overflow: hidden;
	background: #EBE2D3;
}
.surreal-pdp-recs__grid .wc-block-components-product-image img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	aspect-ratio: auto !important;
	transition: transform 0.2s;
}
.surreal-pdp-recs__grid .wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.02); }
.surreal-rec-card__cat,
.surreal-rec-card__cat a {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #7A2314;
	text-decoration: none;
}
.surreal-rec-card__title {
	margin-top: 0.125rem !important;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.3;
}
.surreal-rec-card__title a {
	color: #1B1B1B;
	text-decoration: none;
	transition: color 0.15s;
}
.surreal-pdp-recs__grid .wc-block-product:hover .surreal-rec-card__title a { color: #7A2314; }
.surreal-rec-card__foot.wp-block-group {
	align-items: center;
	margin-top: auto !important;
	padding-top: 0.5rem;
}
.surreal-rec-card__foot .wc-block-components-product-price {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700 !important;
	font-size: 0.875rem;
	color: #1B1B1B;
}
.surreal-rec-card__more.wp-block-read-more {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.75rem;
	color: #7A2314;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.15s;
}
.surreal-pdp-recs__grid .wc-block-product:hover .surreal-rec-card__more { transform: translateX(0.25rem); }