@import url('../fonts/fonts.css');

/* ==========================================================================
   Design tokens — see DESIGN.md
   ========================================================================== */
:root {
	/* Colours — Apple-style minimal (v2): bright white + near-black. Sage
	   survives only as a tiny accent (focus rings, selected-swatch border) —
	   see DESIGN.md §2. */
	--color-background: #ffffff;
	--color-surface: #f5f5f7;
	--color-text: #1d1d1f;
	--color-accent: #6b7a63;
	--color-accent-light: #9cae93;
	--color-text-muted: #6e6e73;
	--color-text-muted-on-dark: #b9b6b0;

	/* Fonts */
	/* Heading now points at Inter, not Fraunces — every component below
	   that reads var(--font-heading) picked this up automatically. Fraunces
	   stays only in the logo SVG (not loaded via CSS for any live text). */
	--font-heading: 'Inter', -apple-system, sans-serif;
	--font-body: 'Inter', -apple-system, sans-serif;

	/* Type scale (base 16px, ~1.25 ratio) */
	--font-size-small: 0.875rem;
	--font-size-body: 1rem;
	--font-size-large: 1.125rem;
	--font-size-h4: 1.25rem;
	--font-size-h3: 1.5625rem;
	--font-size-h2: 1.9375rem;
	--font-size-h1: 2.4375rem;
	/* Display: homepage hero + large product-tile headlines — fluid, scales
	   with viewport width between the mobile and desktop bounds below. */
	--font-size-display: clamp(2.75rem, 2rem + 4vw, 5rem);

	/* Spacing scale (base 4px) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-24: 6rem;
	--space-32: 8rem;

	/* Border radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 24px;
	--radius-pill: 999px;

	/* Shadows */
	--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
	--shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	min-height: 100vh;
	line-height: 1.5;
}

img,
picture,
svg {
	display: block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
}

/* ==========================================================================
   Base typography
   ========================================================================== */
body {
	background-color: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: 400;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-heading);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

h1 {
	font-size: var(--font-size-h1);
}

h2 {
	font-size: var(--font-size-h2);
}

h3 {
	font-size: var(--font-size-h3);
}

h4 {
	font-size: var(--font-size-h4);
}

a {
	color: var(--color-text);
}

@media (max-width: 599px) {
	h1 {
		font-size: var(--font-size-h2);
	}

	h2 {
		font-size: var(--font-size-h3);
	}
}

/* ==========================================================================
   Shared layout container
   Used by the header, footer and main content so they all line up on the
   same left and right edges.
   ========================================================================== */
.container {
	margin-inline: auto;
	max-width: 1200px;
	padding-inline: var(--space-4);
}

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

.skip-link.screen-reader-text:focus {
	background-color: var(--color-background);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-elevated);
	clip: auto !important;
	clip-path: none;
	color: var(--color-text);
	display: block;
	height: auto;
	left: var(--space-4);
	margin: 0;
	padding: var(--space-2) var(--space-4);
	position: fixed;
	top: var(--space-4);
	width: auto;
	z-index: 100;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: relative;
	z-index: 40;
}

.announcement-bar {
	background-color: var(--color-text);
	color: var(--color-background);
	font-size: var(--font-size-small);
	padding: var(--space-2) var(--space-4);
	text-align: center;
}

.header-main {
	background-color: var(--color-background);
	position: sticky;
	top: 0;
	transition: box-shadow 0.2s ease;
	z-index: 30;
}

.site-header--scrolled .header-main {
	box-shadow: var(--shadow-card);
}

.header-main__inner {
	align-items: center;
	display: flex;
	gap: var(--space-4);
	padding-block: var(--space-3);
}

.site-branding {
	margin-inline-end: auto;
}

.site-logo svg {
	color: var(--color-text);
	display: block;
	height: 28px;
	width: auto;
}

.primary-navigation {
	display: none;
}

.primary-menu {
	display: flex;
	gap: var(--space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-menu a {
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
	text-decoration: none;
}

.primary-menu a:hover {
	color: var(--color-text);
}

.menu-toggle {
	background: none;
	border: 0;
	color: var(--color-text);
	cursor: pointer;
	padding: var(--space-2);
}

.menu-toggle__box {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 20px;
}

.menu-toggle__line {
	background-color: currentColor;
	border-radius: 1px;
	display: block;
	height: 2px;
}

.header-actions {
	align-items: center;
	display: flex;
	gap: var(--space-3);
}

.header-action {
	align-items: center;
	background: none;
	border: 0;
	color: var(--color-text);
	cursor: pointer;
	display: inline-flex;
	gap: var(--space-1);
	padding: var(--space-2);
	text-decoration: none;
}

.header-action:hover {
	color: var(--color-text-muted);
}

.cart-count {
	font-size: var(--font-size-small);
	font-weight: 600;
	min-width: 1.25em;
	text-align: center;
}

.header-search {
	position: relative;
}

.header-search__panel {
	background-color: var(--color-background);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-elevated);
	min-width: 260px;
	padding: var(--space-3);
	position: absolute;
	right: 0;
	top: calc(100% + var(--space-2));
}

.header-search__panel[hidden] {
	display: none;
}

.header-search__panel .search-form {
	display: flex;
	gap: var(--space-2);
}

.header-search__panel input[type='search'] {
	background-color: var(--color-background);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	flex: 1;
	padding: var(--space-2) var(--space-3);
}

.header-search__panel input[type='submit'] {
	background-color: var(--color-text);
	border: 0;
	border-radius: var(--radius-pill);
	color: #fff;
	cursor: pointer;
	padding: var(--space-2) var(--space-3);
}

@media (min-width: 900px) {
	.primary-navigation {
		display: block;
	}

	.menu-toggle {
		display: none;
	}
}

/* ==========================================================================
   Mobile menu panel
   ========================================================================== */
.mobile-menu[hidden] {
	display: none;
}

.mobile-menu {
	inset: 0;
	position: fixed;
	z-index: 50;
}

.mobile-menu__backdrop {
	background-color: rgba(43, 42, 40, 0.4);
	inset: 0;
	position: absolute;
}

.mobile-menu__panel {
	background-color: var(--color-background);
	bottom: 0;
	box-shadow: var(--shadow-elevated);
	overflow-y: auto;
	padding: var(--space-6) var(--space-4);
	position: absolute;
	right: 0;
	top: 0;
	width: min(320px, 85vw);
}

.mobile-menu__close {
	background: none;
	border: 0;
	color: var(--color-text);
	cursor: pointer;
	font-size: 1.75rem;
	line-height: 1;
	margin-bottom: var(--space-6);
	padding: var(--space-2);
}

.mobile-menu-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-menu-list a {
	color: var(--color-text);
	font-size: var(--font-size-large);
	text-decoration: none;
}

body.has-mobile-menu-open {
	overflow: hidden;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	background-color: var(--color-surface);
	color: var(--color-text);
	margin-top: var(--space-16);
}

.site-footer__inner {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: repeat(4, 1fr);
	padding-block: var(--space-12);
}

@media (max-width: 899px) {
	.site-footer__inner {
		grid-template-columns: 1fr;
	}
}

.footer-column__heading {
	font-family: var(--font-heading);
	font-size: var(--font-size-large);
	font-weight: 600;
	margin-bottom: var(--space-3);
}

.footer-column address {
	font-size: var(--font-size-small);
	font-style: normal;
	line-height: 1.7;
	margin: var(--space-3) 0;
}

.footer-column a {
	color: var(--color-text);
}

.footer-column a:hover {
	color: var(--color-text-muted);
}

.footer-support-hours {
	font-size: var(--font-size-small);
}

.site-logo--footer svg {
	height: 24px;
}

.footer-menu {
	display: flex;
	flex-direction: column;
	font-size: var(--font-size-small);
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-policy-summary {
	display: flex;
	flex-direction: column;
	font-size: var(--font-size-small);
	gap: var(--space-3);
	line-height: 1.6;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__bottom {
	border-top: 1px solid rgba(43, 42, 40, 0.1);
	font-size: var(--font-size-small);
	padding: var(--space-4);
	text-align: center;
}

/* ==========================================================================
   Page content (page.php, 404.php)
   A centred, comfortable reading column. Side padding on mobile comes from
   the surrounding .container.
   ========================================================================== */
.page-content {
	margin-inline: auto;
	max-width: 45rem;
	padding-block: var(--space-12) var(--space-16);
}

.page-title {
	margin-bottom: var(--space-6);
}

.entry-content > * + * {
	margin-top: var(--space-4);
}

.entry-content > h2,
.entry-content > h3 {
	margin-top: var(--space-8);
}

.entry-content h2 {
	font-size: var(--font-size-h3);
}

.entry-content h3 {
	font-size: var(--font-size-h4);
}

.entry-content p,
.entry-content li {
	line-height: 1.7;
}

.entry-content ul,
.entry-content ol {
	padding-left: var(--space-6);
}

.entry-content li + li {
	margin-top: var(--space-2);
}

.entry-content a {
	color: var(--color-text-muted);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.entry-content a:hover {
	color: var(--color-text);
}

.entry-content a:focus-visible {
	border-radius: var(--radius-sm);
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.error-404__links {
	display: flex;
	gap: var(--space-4);
}

/* ==========================================================================
   Shop page, category archives, brand archives
   ========================================================================== */
.shop-page {
	padding-block: var(--space-6) var(--space-16);
}

.shop-header {
	max-width: 45rem;
	margin-bottom: var(--space-8);
}

.shop-header__description {
	margin-top: var(--space-3);
	color: var(--color-text-muted);
}

.shop-header__description > * + * {
	margin-top: var(--space-2);
}

/* Count + sort share one row: stacked on mobile (count above the Filter/sort
   toolbar, unchanged), side by side on desktop (count left, sort right) —
   see inc/shop-archive.php. */
.shop-meta-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-bottom: var(--space-6);
}

.shop-header__count {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
}

.shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

@media (min-width: 900px) {
	.shop-meta-row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.shop-filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-sm);
	background-color: var(--color-background);
	color: var(--color-text);
	font-weight: 600;
	cursor: pointer;
}

.shop-sort .woocommerce-ordering {
	margin: 0;
}

.shop-sort select {
	width: auto;
}

/* --- filter chips: plain links to each term's own archive, no JS required --- */
.shop-filter-group + .shop-filter-group {
	margin-top: var(--space-6);
}

.shop-filter-group__heading {
	margin-bottom: var(--space-2);
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.shop-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.shop-filter-chip {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-pill);
	color: var(--color-text);
	font-size: var(--font-size-small);
	text-decoration: none;
}

.shop-filter-chip:hover {
	border-color: var(--color-text);
}

.shop-filter-chip.is-active {
	border-color: var(--color-text);
	background-color: var(--color-text);
	color: #fff;
}

/* --- mobile filter panel: same accessible slide-in pattern as the mobile
   nav menu (see .mobile-menu above and assets/js/main.js) --- */
.shop-filter-panel[hidden],
.shop-filter-backdrop[hidden] {
	display: none;
}

.shop-filter-backdrop {
	position: fixed;
	inset: 0;
	z-index: 50;
	background-color: rgba(43, 42, 40, 0.4);
}

.shop-filter-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 51;
	width: min(320px, 85vw);
	overflow-y: auto;
	padding: var(--space-6) var(--space-4);
	background-color: var(--color-background);
	box-shadow: var(--shadow-elevated);
}

.shop-filter-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-6);
}

.shop-filter-panel__title {
	margin: 0;
	font-size: var(--font-size-h4);
}

.shop-filter-panel__close {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-2);
	border: 0;
	background: none;
	color: var(--color-text);
	cursor: pointer;
}

body.has-filter-panel-open {
	overflow: hidden;
}

@media (min-width: 900px) {
	.shop-filter-toggle {
		display: none;
	}

	.shop-filter-backdrop {
		display: none !important;
	}

	.shop-filter-panel {
		position: static;
		z-index: auto;
		width: auto;
		overflow: visible;
		padding: 0;
		background-color: transparent;
		box-shadow: none;
		margin-bottom: var(--space-8);
	}

	.shop-filter-panel[hidden] {
		display: block;
	}

	.shop-filter-panel__header {
		display: none;
	}

	.shop-filter-group {
		display: inline-block;
		margin-right: var(--space-8);
		vertical-align: top;
	}

	.shop-filter-group + .shop-filter-group {
		margin-top: 0;
	}
}

/* --- pagination --- */
.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: var(--space-12) 0 0;
	padding: 0;
}

.woocommerce-pagination .page-numbers li {
	display: block;
}

.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--space-2);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	text-decoration: none;
}

.woocommerce-pagination a.page-numbers:hover {
	background-color: var(--color-surface);
}

.woocommerce-pagination span.page-numbers.current {
	background-color: var(--color-text);
	color: #fff;
	font-weight: 600;
}

/* --- empty state --- */
.shop-empty {
	padding-block: var(--space-16);
	text-align: center;
}

.shop-empty__message {
	margin-bottom: var(--space-4);
	color: var(--color-text-muted);
}

.shop-empty__link {
	color: var(--color-text);
	font-weight: 600;
	text-decoration: underline;
}

/* ==========================================================================
   Single product page
   ========================================================================== */
.product-page {
	padding-block: var(--space-6) var(--space-16);
}

.woocommerce-breadcrumb {
	max-width: 100%;
	font-size: var(--font-size-small);
	color: var(--color-text-muted);
	margin-bottom: var(--space-6);
	overflow-wrap: break-word;
}

.woocommerce-breadcrumb a {
	color: var(--color-text-muted);
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	color: var(--color-text);
	text-decoration: underline;
}

/* .product-top holds ONLY the gallery + purchase panel (see
   inc/single-product.php for why this needed its own wrapper, separate
   from .product-details below it) — this is what bounds the sticky
   panel's containing block, so it can only ever stick within this top
   section and never overlap the description/Q&A/related area. */
.product-top {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

/* WooCommerce's "Sale!" badge is a sibling of the gallery, not nested
   inside it, so left in normal flow it would become a stray third grid
   item here. Taking it out of flow keeps it purely a visual ribbon over
   the gallery's corner, whenever a product actually has a sale price. */
.onsale {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 2;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background-color: var(--color-text);
	color: #fff;
	font-size: var(--font-size-small);
	font-weight: 600;
}

@media (min-width: 900px) {
	.product-top {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		align-items: start;
	}

	/* No fixed height or overflow here on purpose: position: sticky only
	   keeps the panel pinned while it still fits inside its grid row (the
	   row's height follows the gallery column); once the panel is taller
	   than the remaining space, it scrolls with the page like normal
	   content — exactly "sticky only when it fits", with nothing hidden
	   and no inner scrollbar. */
	.summary.entry-summary {
		position: sticky;
		top: var(--space-24);
	}
}

.product-details {
	margin-top: var(--space-8);
}

@media (min-width: 900px) {
	.product-details {
		margin-top: var(--space-16);
	}
}

/* --- gallery --- */
.woocommerce-product-gallery {
	position: relative;
	width: 100%;
	max-width: 100%;
	float: none;
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

/* WooCommerce's own zoom/lightbox trigger button — it's added by its JS as
   the gallery's first child with no positioning of its own, so without
   this it renders as a plain inline 🔍 glyph above the image (a "strip").
   This turns it into a small round white button in the top-right corner. */
.woocommerce-product-gallery__trigger {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: var(--shadow-card);
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
}

.woocommerce-product-gallery__trigger:hover,
.woocommerce-product-gallery__trigger:focus-visible {
	box-shadow: var(--shadow-elevated);
}

.woocommerce-product-gallery__trigger:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* The trigger's inner <span> holds a 🔍 emoji, hardcoded by WooCommerce's
   own JS (not something a template can change) — this hides the emoji and
   draws the same thin-line magnifier used by the header's search icon in
   its place, via a mask so it inherits our text color. */
.woocommerce-product-gallery__trigger span {
	display: inline-block;
	overflow: hidden;
	width: 20px;
	height: 20px;
	font-size: 0;
	color: transparent;
	background-color: var(--color-text);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.woocommerce-product-gallery__wrapper {
	width: 100%;
	max-width: 100%;
	margin: 0;
	float: none;
}

.woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	mix-blend-mode: multiply;
}

/* Thumbnail strip: a single scrollable row at a proper size, so it stays
   tidy however many photos a color has (some have 15+). */
.flex-control-nav {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: var(--space-2);
	list-style: none;
	margin: var(--space-3) 0 0;
	padding: var(--space-1) var(--space-1) var(--space-2);
}

.flex-control-nav li {
	flex: 0 0 auto;
}

.flex-control-nav li img {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-sm);
	border: 2px solid transparent;
	background-color: var(--color-surface);
	cursor: pointer;
	object-fit: cover;
	mix-blend-mode: multiply;
}

.flex-control-nav li img.flex-active {
	border-color: var(--color-text);
}

/* Mobile: a swipeable slider with dots — no photo thumbnail strip. Each
   <li>'s real thumbnail <img> stays in place (so flexslider's own click
   handling keeps working) but is made invisible; a plain CSS circle is
   drawn on top as the visible "dot", sized as a proper touch target. */
@media (max-width: 599px) {
	.flex-control-nav {
		justify-content: center;
		align-items: center;
		overflow-x: visible;
	}

	.flex-control-nav li {
		position: relative;
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flex-control-nav li img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: 0;
		border-radius: 0;
		opacity: 0;
	}

	.flex-control-nav li::after {
		content: '';
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: var(--color-surface);
		pointer-events: none;
	}

	.flex-control-nav li:has(img.flex-active)::after {
		background-color: var(--color-text);
	}
}

/* --- brand + title --- */
.product-heading {
	margin-bottom: var(--space-4);
}

.product-brand {
	display: inline-block;
	font-size: var(--font-size-small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	text-decoration: none;
	margin-bottom: var(--space-1);
}

.product-brand:hover {
	text-decoration: underline;
}

.product_title.entry-title {
	margin: 0;
}

/* --- price --- */
.summary .price {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--font-size-h3);
	font-weight: 600;
	color: var(--color-text);
	margin: var(--space-4) 0;
}

.summary .price .woocommerce-Price-amount {
	color: inherit;
}

.summary .price del {
	font-family: var(--font-body);
	font-size: var(--font-size-large);
	font-weight: 400;
	color: #8a8680;
	opacity: 1;
	margin-right: var(--space-2);
	text-decoration: line-through;
}

.summary .price ins {
	text-decoration: none;
}

/* --- condition / stock / sku --- */
.product-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	list-style: none;
	margin: 0 0 var(--space-6);
	padding: 0;
	font-size: var(--font-size-small);
	color: var(--color-text);
}

.product-meta-row li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.product-meta-row li:not(:last-child)::after {
	content: '';
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.4;
	margin-left: var(--space-2);
}

.product-stock.is-in-stock {
	color: var(--color-text);
}

.product-stock.is-out-of-stock {
	color: #b5674a;
}

/* --- color swatches --- */
.color-swatches-field {
	margin-bottom: var(--space-6);
}

.color-swatches-field__label {
	display: block;
	font-size: var(--font-size-small);
	font-weight: 600;
	margin-bottom: var(--space-2);
}

.color-swatches-field__selected {
	font-weight: 400;
	color: var(--color-text-muted);
}

.color-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.color-swatch {
	width: 56px;
	height: 56px;
	padding: 2px;
	border-radius: var(--radius-md);
	border: 2px solid transparent;
	background: none;
	cursor: pointer;
	overflow: hidden;
}

.color-swatch__image {
	width: 100%;
	height: 100%;
	border-radius: calc(var(--radius-md) - 2px);
	background-color: var(--color-surface);
	object-fit: cover;
	mix-blend-mode: multiply;
}

.color-swatch:hover {
	border-color: var(--color-accent-light);
}

.color-swatch.is-selected {
	border-color: var(--color-accent);
}

.color-swatch:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.variations--native {
	display: none;
}

.reset_variations {
	display: none;
}

.woocommerce-variation-availability {
	display: none;
}

/* --- quantity + add to cart --- */
.quantity {
	display: inline-flex;
	margin-bottom: var(--space-4);
}

.quantity .qty {
	width: 4.5rem;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-sm);
	background-color: var(--color-background);
	color: var(--color-text);
}

.single_variation_wrap .single_add_to_cart_button,
form.cart .single_add_to_cart_button {
	display: block;
	width: 100%;
	margin-top: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border: 0;
	border-radius: var(--radius-pill);
	background-color: var(--color-text);
	color: #fff;
	font-size: var(--font-size-large);
	font-weight: 600;
	text-align: center;
	cursor: pointer;
}

.single_variation_wrap .single_add_to_cart_button:hover,
form.cart .single_add_to_cart_button:hover {
	background-color: #424245;
}

.single_variation_wrap .single_add_to_cart_button.disabled {
	background-color: var(--color-surface);
	color: #8a8680;
	cursor: not-allowed;
}

/* --- trust list --- */
.product-trust-list {
	list-style: none;
	margin: var(--space-6) 0 var(--space-3);
	padding: var(--space-4);
	background-color: var(--color-surface);
	border-radius: var(--radius-md);
	font-size: var(--font-size-small);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.product-trust-list li {
	padding-left: var(--space-6);
	position: relative;
}

.product-trust-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--color-text);
	font-weight: 600;
}

.product-trust-links {
	display: flex;
	gap: var(--space-4);
	font-size: var(--font-size-small);
	margin: 0 0 var(--space-6);
}

/* --- accordion --- */
.product-accordion {
	max-width: 65rem;
	margin: 0 auto;
}

.product-accordion__intro {
	margin-bottom: var(--space-6);
	font-size: var(--font-size-large);
}

.accordion-item {
	border-bottom: 1px solid var(--color-surface);
}

.accordion-item__heading {
	margin: 0;
}

.accordion-item__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--space-4) 0;
	background: none;
	border: 0;
	font-family: var(--font-heading);
	font-size: var(--font-size-large);
	font-weight: 600;
	color: var(--color-text);
	text-align: left;
	cursor: pointer;
}

.accordion-item__trigger::after {
	content: '+';
	font-family: var(--font-body);
	font-size: 1.5rem;
	line-height: 1;
	flex-shrink: 0;
	margin-left: var(--space-4);
	transition: transform 0.2s ease;
}

.accordion-item__trigger[aria-expanded='true']::after {
	content: '−';
}

.accordion-item__trigger:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.accordion-item__panel {
	padding-bottom: var(--space-6);
}

.accordion-item__panel table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--font-size-small);
}

.accordion-item__panel table td {
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--color-surface);
}

.accordion-item__panel table td:first-child {
	color: var(--color-text-muted);
	width: 40%;
}

/* --- Q&A block --- */
.product-qa {
	max-width: 65rem;
	margin: var(--space-12) auto 0;
	padding: var(--space-6);
	background-color: var(--color-surface);
	border-radius: var(--radius-md);
}

.product-qa h2 {
	font-size: var(--font-size-large);
	margin-bottom: var(--space-2);
}

.product-qa a {
	color: var(--color-text);
	text-decoration: underline;
}

/* --- related products --- */
.related.products {
	max-width: 65rem;
	margin: var(--space-16) auto 0;
}

.related.products > h2 {
	margin-bottom: var(--space-6);
}

/* ==========================================================================
   Product card
   One reusable component (built by inc/product-cards.php's hooks into
   woocommerce/content-product.php) used everywhere WooCommerce renders a
   product loop: the shop grid, category/brand archives, and "You may also
   like" on the single product page — all three share this same markup, so
   one set of rules styles all of them.
   ========================================================================== */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6) var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 700px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1100px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}

.woocommerce ul.products li.product {
	font-size: var(--font-size-small);
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link {
	display: block;
	color: var(--color-text);
	text-decoration: none;
	border-radius: var(--radius-md);
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 4px;
}

.product-card__image {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	margin-bottom: var(--space-3);
	border-radius: var(--radius-md);
	background-color: var(--color-surface);
	overflow: hidden;
}

.product-card__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
}

.product-card__image--hover {
	opacity: 0;
	transition: opacity 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
	li.product:hover .product-card__image--hover {
		opacity: 1;
	}
}

.product-card__brand {
	display: block;
	margin-bottom: var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.product-card__title {
	display: -webkit-box;
	overflow: hidden;
	margin-bottom: var(--space-1);
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: var(--font-size-large);
	font-weight: 600;
	line-height: 1.3;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.woocommerce ul.products li.product .price {
	display: block;
	color: var(--color-text);
	font-weight: 600;
}

.woocommerce ul.products li.product .price del {
	margin-right: var(--space-1);
	color: #8a8680;
	font-weight: 400;
	text-decoration: line-through;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

.product-card__colors,
.product-card__stock {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--font-size-small);
}

.product-card__colors {
	color: var(--color-text-muted);
}

.product-card__stock {
	color: #b5674a;
	font-weight: 600;
}

/* --- mobile sticky add-to-cart bar --- */
.sticky-add-to-cart {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	background-color: var(--color-background);
	border-top: 1px solid var(--color-surface);
	box-shadow: var(--shadow-elevated);
	transform: translateY(100%);
	transition: transform 0.2s ease;
}

.sticky-add-to-cart.is-visible {
	transform: translateY(0);
}

.sticky-add-to-cart__inner {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding-block: var(--space-3);
}

.sticky-add-to-cart__info {
	flex: 1;
	min-width: 0;
	font-size: var(--font-size-small);
}

.sticky-add-to-cart__color {
	display: block;
	color: var(--color-text-muted);
}

.sticky-add-to-cart__price {
	display: block;
	font-weight: 600;
}

.sticky-add-to-cart__button {
	flex-shrink: 0;
	padding: var(--space-2) var(--space-6);
	border: 0;
	border-radius: var(--radius-pill);
	background-color: var(--color-text);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

@media (min-width: 900px) {
	.sticky-add-to-cart {
		display: none;
	}
}

/* --- out of stock message (variable.php's out-of-stock notice) --- */
.stock.out-of-stock {
	color: #b5674a;
	font-weight: 600;
}

/* ==========================================================================
   WooCommerce baseline — generic elements that appear on cart, checkout and
   my-account too, now that WooCommerce's own default stylesheets are
   disabled (see functions.php). This is a minimal safety net so those
   pages stay readable, not a full design pass — see the summary for what
   still needs dedicated layout work.
   ========================================================================== */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	list-style: none;
	margin: 0 0 var(--space-6);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm);
	background-color: var(--color-surface);
	font-size: var(--font-size-small);
}

.woocommerce-error {
	background-color: #f7e6e0;
	color: #8a4328;
}

.woocommerce-message {
	background-color: var(--color-surface);
}

.woocommerce .button,
.woocommerce input.button,
.woocommerce button.button,
.woocommerce #respond input#submit {
	display: inline-block;
	padding: var(--space-2) var(--space-6);
	border: 0;
	border-radius: var(--radius-pill);
	background-color: var(--color-text);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.woocommerce .button:hover,
.woocommerce input.button:hover,
.woocommerce button.button:hover {
	background-color: #424245;
}

.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--space-6);
	font-size: var(--font-size-small);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: var(--space-3);
	border-bottom: 1px solid var(--color-surface);
	text-align: left;
}

.woocommerce form .form-row {
	margin-bottom: var(--space-4);
}

.woocommerce form label {
	display: block;
	margin-bottom: var(--space-1);
	font-size: var(--font-size-small);
}

.woocommerce form input[type='text'],
.woocommerce form input[type='email'],
.woocommerce form input[type='password'],
.woocommerce form input[type='tel'],
.woocommerce form input[type='number'],
.woocommerce form textarea,
.woocommerce form select {
	width: 100%;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-sm);
	background-color: var(--color-background);
	color: var(--color-text);
}

/* ==========================================================================
   Homepage (front-page.php)
   ========================================================================== */

/* A primary button usable outside the .woocommerce scope (the product/cart
   buttons reuse ".woocommerce .button" instead — see baseline above). Same
   visual spec either way: black pill, white text. */
.button-primary {
	display: inline-block;
	padding: var(--space-3) var(--space-8);
	border: 0;
	border-radius: var(--radius-pill);
	background-color: var(--color-text);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.button-primary:hover {
	background-color: #424245;
}

.button-primary:focus-visible {
	outline: 2px solid var(--color-text);
	outline-offset: 2px;
}

/* A text link with a small arrow that nudges right on hover — used for
   the hero's secondary link, every "View all", and category captions. */
.arrow-icon {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

a:hover .arrow-icon {
	transform: translateX(3px);
}

/* --- scroll reveal (respects prefers-reduced-motion) --- */
.fade-in-up {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in-up.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.fade-in-up {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --- hero: Apple-style, centered text above one huge centered product
   image on the light-gray surface --- */
.home-hero {
	background-color: var(--color-surface);
	padding-block: var(--space-24) var(--space-16);
	text-align: center;
}

.home-hero__text {
	max-width: 40rem;
	margin-inline: auto;
	padding-inline: var(--space-4);
}

.home-hero__headline {
	font-size: var(--font-size-display);
	line-height: 1.05;
}

.home-hero__support {
	max-width: 36ch;
	margin-inline: auto;
	margin-top: var(--space-6);
	color: var(--color-text-muted);
	font-size: var(--font-size-large);
}

.home-hero__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-6);
	margin-top: var(--space-8);
}

.home-hero__secondary-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	color: var(--color-text);
	font-weight: 600;
	text-decoration: none;
}

.home-hero__visual {
	display: flex;
	justify-content: center;
	margin-top: var(--space-16);
}

.home-hero__image {
	width: 100%;
	max-width: 32rem;
	height: auto;
	object-fit: contain;
	/* No mix-blend-mode here (unlike the small product-card thumbnails):
	   at this size it washes a light-colored product almost to invisible
	   against the light hero background — see setup/review/redesign-notes.md. */
}

@media (min-width: 900px) {
	.home-hero__image {
		max-width: 44rem;
	}
}

/* --- trust bar: very subtle, one thin line under the hero --- */
.home-trust-bar {
	border-bottom: 1px solid var(--color-surface);
}

.home-trust-bar__list {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: var(--space-4) 0;
}

.home-trust-bar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	padding: var(--space-2) 0;
	min-width: 0;
	max-width: 100%;
	text-align: center;
}

.home-trust-bar__icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--color-text-muted);
}

.home-trust-bar__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	line-height: 1.3;
}

.home-trust-bar__heading,
.home-trust-bar__detail {
	max-width: 100%;
	/* Near-black, not muted gray — WCAG AA needs 4.5:1 for text this size,
	   and the previous muted gray only cleared it narrowly. Stays subtle
	   through its small size and the thin top border, not low contrast. */
	color: var(--color-text);
	font-size: var(--font-size-small);
}

.home-trust-bar__heading {
	font-weight: 600;
}

.home-trust-bar__detail::before {
	content: '';
}

@media (min-width: 700px) {
	.home-trust-bar__text {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-1);
	}

	.home-trust-bar__detail::before {
		content: '— ';
	}
}

@media (min-width: 700px) {
	.home-trust-bar__list {
		flex-direction: row;
		justify-content: center;
		gap: var(--space-8);
	}

	.home-trust-bar__item {
		flex-direction: row;
		padding-block: var(--space-3);
	}
}

/* --- shared section spacing + left-aligned header with "View all" --- */
.home-section {
	padding-block: var(--space-16);
}

@media (min-width: 900px) {
	.home-section {
		padding-block: var(--space-24);
	}
}

.home-section__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-8);
}

.home-section__title {
	margin: 0;
}

.home-section--categories .home-section__title,
.home-section--brands .home-section__title {
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.4375rem);
}

.home-section__view-all {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	flex-shrink: 0;
	padding-bottom: var(--space-1);
	color: var(--color-text);
	font-weight: 600;
	font-size: var(--font-size-small);
	text-decoration: none;
	white-space: nowrap;
}

/* --- category tiles: 4 clean, equal tiles on the light-gray surface --- */
.category-tiles {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.category-tile__link {
	display: block;
	color: var(--color-text);
	text-decoration: none;
	text-align: center;
}

.category-tile__link:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 4px;
	border-radius: var(--radius-md);
}

.category-tile__image {
	display: block;
	aspect-ratio: 1 / 1;
	margin-bottom: var(--space-4);
	border-radius: var(--radius-lg);
	background-color: var(--color-surface);
	overflow: hidden;
}

.category-tile__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
	transition: transform 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
	.category-tile__link:hover .category-tile__image img {
		transform: scale(1.05);
	}
}

.category-tile__name {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--font-size-h4);
	font-weight: 600;
}

@media (min-width: 700px) {
	.category-tiles {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* --- brand row: plain large typography links, no cards/images --- */
.brand-row {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--color-surface);
}

.brand-row__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-6);
	border-bottom: 1px solid var(--color-surface);
	color: var(--color-text);
	text-decoration: none;
}

.brand-row__link:hover .brand-row__name {
	color: var(--color-text-muted);
}

.brand-row__name {
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.4375rem);
	font-weight: 600;
	transition: color 0.2s ease;
}

.brand-row__count {
	flex-shrink: 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
}

/* --- product tiles: apple.com-style showcases for the 4 featured products --- */
.home-product-tile {
	padding-block: var(--space-24);
	background-color: var(--color-background);
	border-top: 1px solid var(--color-surface);
	text-align: center;
}

.home-product-tile__content {
	max-width: 40rem;
	margin-inline: auto;
	padding-inline: var(--space-4);
}

.home-product-tile__name {
	font-size: var(--font-size-display);
	line-height: 1.05;
}

.home-product-tile__subtitle {
	margin-top: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--font-size-h4);
	font-weight: 600;
}

.home-product-tile__tagline {
	max-width: 36ch;
	margin-inline: auto;
	margin-top: var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--font-size-large);
}

.home-product-tile__price {
	margin-top: var(--space-4);
	font-size: var(--font-size-h3);
	font-weight: 600;
}

.home-product-tile__links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-6);
	margin-top: var(--space-6);
}

.home-product-tile__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	color: var(--color-text);
	font-weight: 600;
	text-decoration: none;
}

.home-product-tile__media {
	display: flex;
	justify-content: center;
	margin-top: var(--space-12);
}

.home-product-tile__image {
	width: 100%;
	max-width: 36rem;
	height: auto;
	object-fit: contain;
	/* No mix-blend-mode — see .home-hero__image above for why. */
}

.home-product-tile-row {
	display: grid;
	grid-template-columns: 1fr;
	border-top: 1px solid var(--color-surface);
}

.home-product-tile-row .home-product-tile {
	padding-block: var(--space-16);
	border-top: 0;
}

.home-product-tile-row .home-product-tile:first-child {
	border-bottom: 1px solid var(--color-surface);
}

@media (min-width: 700px) {
	.home-product-tile-row .home-product-tile:first-child {
		border-bottom: 0;
		border-right: 1px solid var(--color-surface);
	}
}

.home-product-tile-row .home-product-tile__name {
	font-size: var(--font-size-h1);
}

.home-product-tile-row .home-product-tile__subtitle {
	font-size: var(--font-size-large);
}

.home-product-tile-row .home-product-tile__media {
	margin-top: var(--space-8);
}

.home-product-tile-row .home-product-tile__image {
	max-width: 26rem;
}

@media (min-width: 700px) {
	.home-product-tile-row {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.home-product-tile__image {
		max-width: 46rem;
	}

	.home-product-tile-row .home-product-tile__image {
		max-width: 32rem;
	}
}

/* --- lifestyle photo band --- */
.home-lifestyle-band {
	position: relative;
}

.home-lifestyle-band__image {
	display: block;
	width: 100%;
	height: 60vh;
	min-height: 22rem;
	max-height: 40rem;
	object-fit: cover;
	/* The source photo is a tall portrait shot; centering vertically would
	   crop both faces out of a short wide band, so the crop is biased
	   toward the top third, where the parent and baby actually are. */
	object-position: 50% 20%;
}

@media (min-width: 900px) {
	.home-lifestyle-band__image {
		height: 70vh;
		max-height: 48rem;
		object-position: 50% 15%;
	}
}

.home-lifestyle-band__caption {
	padding: var(--space-6) var(--space-4);
	text-align: center;
	color: var(--color-text-muted);
	font-size: var(--font-size-large);
}

/* --- how ordering works: full-width dark section --- */
.home-section--how-it-works {
	background-color: var(--color-text);
	color: var(--color-background);
}

.home-section--how-it-works .home-section__title {
	margin-bottom: var(--space-12);
	color: var(--color-background);
}

.home-steps {
	display: grid;
	gap: var(--space-12);
	padding: 0;
	list-style: none;
}

.home-step__number {
	display: block;
	margin-bottom: var(--space-3);
	font-family: var(--font-heading);
	font-size: clamp(3rem, 2rem + 3vw, 4.5rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--color-background);
	line-height: 1;
}

.home-step__heading {
	margin-bottom: var(--space-2);
	color: var(--color-background);
	font-size: var(--font-size-large);
	font-family: var(--font-body);
	font-weight: 600;
}

.home-step__detail {
	max-width: 32rem;
	color: var(--color-text-muted-on-dark);
}

.home-steps__links {
	display: flex;
	gap: var(--space-6);
	margin-top: var(--space-12);
	padding-top: var(--space-8);
	border-top: 1px solid rgba(250, 248, 245, 0.15);
}

.home-steps__links a {
	color: var(--color-background);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (min-width: 700px) {
	.home-steps {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- FAQ + contact, two columns on desktop --- */
.home-faq {
	display: grid;
	gap: var(--space-12);
}

.home-faq__text {
	max-width: 32rem;
	margin-top: var(--space-3);
	color: var(--color-text-muted);
}

.home-faq__contact {
	margin-top: var(--space-8);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-surface);
	font-style: normal;
	line-height: 1.8;
}

.home-faq__contact a {
	color: var(--color-text);
}

.home-faq__accordion {
	max-width: none;
	margin: 0;
}

@media (min-width: 900px) {
	.home-faq {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
		gap: var(--space-16);
	}
}

/* ==========================================================================
   Cart & Checkout (WooCommerce Cart/Checkout blocks)
   Both pages render through page.php like any other WordPress page, so
   their block markup lands inside .page-content — but that column is tuned
   for reading text (45rem) and is too narrow for a two-column checkout or a
   cart with an order-summary sidebar. WooCommerce adds its own body classes
   to every cart/checkout/order-received page, so those (not :has()) lift
   the cap, with no PHP template changes.
   Class names below are WooCommerce Blocks' own documented, stable markup
   (confirmed against the actual rendered DOM on this install, WooCommerce
   11.2) — not guessed at.
   ========================================================================== */
.woocommerce-cart .page-content,
.woocommerce-checkout .page-content {
	max-width: none;
}

.wc-block-cart,
.wc-block-checkout {
	font-family: var(--font-body);
}

/* Guards against a known flex/grid gotcha: a text-bearing flex/grid child
   defaults to min-width: auto, so one long unbreakable line (a product
   description, a notice, the terms paragraph) can force its row wider than
   the viewport instead of wrapping. */
.wc-block-components-totals-item,
.wc-block-components-order-summary-item,
.wc-block-components-order-summary-item__description,
.wc-block-components-notice-banner__content,
.wc-block-checkout__terms,
.wc-block-components-product-metadata__description,
.wc-block-components-product-name {
	min-width: 0;
	overflow-wrap: break-word;
}

/* --- shared: the main/sidebar two-column layout used by both blocks --- */
.wc-block-components-sidebar-layout {
	gap: var(--space-12);
}

.wc-block-components-sidebar {
	padding-top: 0;
}

@media (min-width: 900px) {
	.wc-block-components-sidebar.is-sticky {
		top: var(--space-24);
	}
}

.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-cart__totals-title {
	font-family: var(--font-heading);
}

/* Order-summary / cart-totals card (shared shape, cart + checkout): ONE
   surface-gray card with rounded corners (clipped via overflow: hidden),
   hairline dividers between rows, consistent padding — not a stack of
   individually-boxed sub-blocks. WooCommerce renders each row type
   (product items, "Add coupons", subtotal, shipping, tax, the grand
   total) as its own block with its own wrapper div, so the card chrome
   lives on the shared parent and each row just contributes a divider +
   padding; without this, every one of those wrapper divs would get its
   own background/radius/padding and nest visibly inside each other. */
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block {
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.wc-block-cart__totals-title {
	padding: var(--space-6) var(--space-6) var(--space-2);
}

.wc-block-components-checkout-order-summary__title {
	padding: var(--space-6);
	border-bottom: 1px solid rgba(29, 29, 31, 0.08);
	cursor: pointer;
}

.wc-block-components-totals-wrapper {
	padding: var(--space-4) var(--space-6);
	border-top: 1px solid rgba(29, 29, 31, 0.08);
}

.wc-block-cart__totals-title + .wc-block-components-totals-wrapper {
	border-top: 0;
}

.wc-block-components-totals-wrapper:empty {
	display: none;
}

/* The product-items block is a row *group*, not a row itself — its own
   padding comes off so each product underneath can be its own divided
   row instead of all of them sharing one undivided padded block. */
.wp-block-woocommerce-cart-order-summary-cart-items-block,
.wp-block-woocommerce-checkout-order-summary-cart-items-block {
	padding: 0;
	border-top: 0;
}

.wc-block-components-order-summary-item {
	padding: var(--space-4) var(--space-6);
	border-top: 1px solid rgba(29, 29, 31, 0.08);
}

.wc-block-components-order-summary-item:first-child {
	border-top: 0;
}

.wc-block-components-totals-item {
	padding: 0;
	font-size: var(--font-size-small);
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item-tax-value {
	color: var(--color-text-muted);
}

.wc-block-components-totals-footer-item {
	font-size: var(--font-size-large);
	font-weight: 600;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax-value {
	color: var(--color-text);
}

/* Pill buttons everywhere WooCommerce Blocks render one of its own */
.wc-block-components-button,
.wc-block-components-checkout-place-order-button {
	border-radius: var(--radius-pill) !important;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
}

.wc-block-components-button:not(.is-link).contained,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background-color: var(--color-text) !important;
	border-color: var(--color-text) !important;
	color: #fff !important;
}

.wc-block-components-button:not(.is-link).contained:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background-color: #424245 !important;
	border-color: #424245 !important;
}

/* --- Cart --- */
.wc-block-cart-items {
	border: 0;
}

.wc-block-cart-items__header {
	border-bottom: 1px solid var(--color-surface);
}

.wc-block-cart-items__header-image,
.wc-block-cart-items__header-product,
.wc-block-cart-items__header-total {
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
	font-weight: 400;
}

.wc-block-cart-items__row {
	border-bottom: 1px solid var(--color-surface);
	padding-block: var(--space-6);
}

.wc-block-cart-item__image img {
	border-radius: var(--radius-md);
}

/* !important here and below: these are <a> tags rendered inside
   .entry-content, so without it Woo Blocks' own links would lose to the
   higher-specificity ".entry-content a { text-decoration: underline }"
   baseline rule (one class + one tag beats one class alone). */
.wc-block-components-product-name {
	color: var(--color-text) !important;
	font-family: var(--font-heading);
	font-weight: 600;
	text-decoration: none !important;
}

.wc-block-components-product-name:hover {
	text-decoration: underline !important;
}

.wc-block-components-product-metadata__description,
.wc-block-components-product-metadata {
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
}

/* Quantity stepper: thin pill, muted +/- , matches the site's button language */
.wc-block-components-quantity-selector {
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-pill);
	overflow: hidden;
}

.wc-block-components-quantity-selector__button {
	color: var(--color-text-muted);
}

.wc-block-components-quantity-selector__button:hover {
	background-color: var(--color-surface);
	color: var(--color-text);
}

.wc-block-components-quantity-selector__input {
	font-family: var(--font-body);
	font-weight: 600;
}

.wc-block-cart-item__remove-link {
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
	text-decoration: underline;
}

.wc-block-cart-item__remove-link:hover {
	color: var(--color-text);
}

.wc-block-cart__submit-container {
	margin-top: var(--space-4);
}

.wc-block-cart__submit-button,
.wc-block-cart__submit-button:hover {
	width: 100%;
	padding-block: var(--space-3) !important;
	text-decoration: none !important;
}

/* Policy links under "Proceed to Checkout" (added by
   setup/cart-checkout-content.php) */
.delawr-cart-policy-links {
	margin-top: var(--space-4) !important;
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
}

.delawr-cart-policy-links a {
	color: var(--color-text-muted);
}

.delawr-cart-policy-links a:hover {
	color: var(--color-text);
}

/* Empty cart */
.wc-block-cart__empty-cart__title {
	margin-top: var(--space-8);
}

.delawr-empty-cart-cta {
	margin-top: var(--space-6) !important;
}

/* --- Checkout --- */
.wc-block-checkout__main {
	padding-top: 0;
}

.wc-block-components-checkout-step {
	border-top: 1px solid var(--color-surface);
	padding-block: var(--space-8);
}

.wc-block-checkout__main > .wc-block-components-checkout-step:first-child {
	border-top: 0;
	padding-top: 0;
}

.wc-block-components-checkout-step__title {
	font-family: var(--font-heading);
	font-size: var(--font-size-h4);
	font-weight: 600;
}

.wc-block-components-checkout-step__description {
	color: var(--color-text-muted);
}

/* Form fields: trade Woo's default floating-label boxes for the site's own
   plain bordered-input look (see the baseline .woocommerce form input rules
   above) so checkout fields match every other form on the site. */
.wc-block-components-text-input input,
.wc-block-components-text-input.is-active input,
.wc-blocks-components-select__select,
.wc-block-components-country-input .components-combobox-control__input {
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-sm);
	background-color: var(--color-background);
	font-family: var(--font-body);
}

.wc-block-components-text-input label {
	color: var(--color-text-muted);
}

.wc-block-components-checkbox__mark {
	border-radius: var(--radius-sm);
}

.wc-block-components-checkbox__input:checked ~ .wc-block-components-checkbox__mark {
	background-color: var(--color-text);
}

.wc-block-checkout__terms {
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
}

.wc-block-checkout__actions {
	margin-top: var(--space-6);
}

.wc-block-components-checkout-place-order-button {
	width: 100%;
	padding-block: var(--space-3) !important;
}

/* Shipping/delivery note + policy links (added by
   setup/cart-checkout-content.php). The note sits inside the order-summary
   card, so it's a row like any other (padding + divider come from the
   shared ".wc-block-components-totals-wrapper"-style rule below — this
   block only needs the className added there and its own text color). */
.delawr-checkout-shipping-note {
	margin-top: 0 !important;
	padding: var(--space-4) var(--space-6);
	border-top: 1px solid rgba(29, 29, 31, 0.08);
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
}

.delawr-checkout-policy-links {
	margin-top: var(--space-6) !important;
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
}

.delawr-checkout-policy-links a {
	color: var(--color-text-muted);
}

.delawr-checkout-policy-links a:hover {
	color: var(--color-text);
}

/* Checkout order-summary line items (product thumb + name + qty + price) */
.wc-block-components-order-summary-item__image img {
	border-radius: var(--radius-md);
}

.wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-size: var(--font-size-small);
}

/* ==========================================================================
   Order received (thank-you) page.
   This page is NOT block-based, even though Cart/Checkout are: WooCommerce
   only serves its block Order Confirmation template to block themes, so a
   classic theme like this one gets the classic templates here instead
   (checkout/thankyou.php, checkout/order-received.php,
   order/order-details.php, order/order-details-customer.php). Confirmed
   against the real rendered HTML from an actual test order, not guessed.
   ========================================================================== */
.woocommerce-order {
	max-width: 48rem;
	margin-inline: auto;
}

.woocommerce-thankyou-order-received {
	font-size: var(--font-size-large);
}

/* "Order number / Date / Email / Total / Payment method": a clean
   2-column card instead of the default bullet list. */
.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4) var(--space-8);
	list-style: none;
	margin: var(--space-6) 0 var(--space-12);
	padding: var(--space-6);
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
	font-size: var(--font-size-small);
	color: var(--color-text-muted);
}

.woocommerce-order-overview strong {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--font-size-body);
	font-weight: 600;
	color: var(--color-text);
}

/* Payment method's value shouldn't stand out more than the plain Subtotal/
   Shipping rows in the order-details table below it — only the grand
   Total there is meant to look that way. */
.woocommerce-order-overview__payment-method strong {
	font-size: var(--font-size-small);
	font-weight: 400;
}

.woocommerce-order-details__title {
	margin-bottom: var(--space-4);
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
	border-bottom: 0;
	font-size: var(--font-size-large);
	font-weight: 700;
	color: var(--color-text);
}

/* Billing / shipping addresses: plain text, not the browser's default
   italic <address> styling — side by side on desktop (order/order-details-
   customer.php already renders them as a 2-column block, just unstyled). */
.woocommerce-customer-details {
	margin-top: var(--space-12);
}

.woocommerce-customer-details address {
	font-style: normal;
	line-height: 1.7;
}

.woocommerce-column__title {
	font-size: var(--font-size-large);
	margin-bottom: var(--space-2);
}

@media (min-width: 700px) {
	.woocommerce-columns--addresses {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8);
	}
}

/* Contact block: see delawr_thankyou_contact_block() in functions.php,
   which reuses .product-qa (the same "Questions?" box from the product
   page, already styled above) rather than a new one-off component. */