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

/* ==========================================================================
   Nofara — "Hearth & Slate" (see DESIGN.md)
   Charcoal slate for text, header and footer; warm stone page; white cards;
   ember copper for buttons, links and the logo's dot; soft grey lines.
   Every text pairing passes WCAG AA — contrast table in DESIGN.md.
   ========================================================================== */
:root {
	/* Colours */
	--color-slate: #2b2d2f;
	--color-slate-deep: #222426;
	--color-slate-2: #36393c;
	--color-background: #f5f1ea;
	--color-surface: #ece6dc;
	--color-white: #ffffff;
	--color-border: #e2ddd4;
	--color-border-strong: #8a8378;
	--color-text: #2b2d2f;
	--color-text-muted: #5e5a54;
	--color-text-on-dark: #f5f1ea;
	--color-text-muted-on-dark: #b9b3a9;
	--color-ember: #b4612a;
	--color-accent: #a8561f;
	--color-button: #a8561f;
	--color-button-hover: #8e4718;
	--color-link: #a8561f;
	--color-link-hover: #7e3f15;
	--color-accent-on-dark: #e39a66;
	--color-accent-on-dark-hover: #edb48a;

	/* Fonts */
	--font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Type scale (16.5px body) */
	--font-size-small: 0.875rem;
	--font-size-body: 1.03125rem;
	--font-size-large: 1.1875rem;
	--font-size-h4: 1.3125rem;
	--font-size-h3: 1.625rem;
	--font-size-h2: 2.125rem;
	--font-size-h1: 2.625rem;
	--font-size-display: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);

	/* Spacing (4px base) */
	--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;

	/* Shape: soft, warm corners */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-button: 999px;
	--radius-pill: 999px;

	/* Shadows: warm-tinted */
	--shadow-card: 0 1px 2px rgba(43, 45, 47, 0.06), 0 4px 14px rgba(43, 45, 47, 0.06);
	--shadow-elevated: 0 10px 30px rgba(43, 45, 47, 0.16);
}

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

* {
	margin: 0;
}

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

body {
	min-height: 100vh;
	line-height: 1.6;
	overflow-x: clip;
}

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;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-heading);
	font-optical-sizing: auto;
	font-weight: 560;
	letter-spacing: -0.01em;
	line-height: 1.15;
	text-wrap: balance;
}

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-link);
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--color-link-hover);
}

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

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

	h2 {
		font-size: 1.75rem;
	}
}

/* ==========================================================================
   Layout container — header, footer and content share the same edges.
   ========================================================================== */
.container {
	margin-inline: auto;
	max-width: 1200px;
	padding-inline: var(--space-4);
}

@media (min-width: 700px) {
	.container {
		padding-inline: var(--space-6);
	}
}

/* ==========================================================================
   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-white);
	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;
}

/* ==========================================================================
   Buttons (outside .woocommerce too)
   ========================================================================== */
.button-primary,
.button-secondary {
	align-items: center;
	border-radius: var(--radius-button);
	cursor: pointer;
	display: inline-flex;
	font-weight: 600;
	gap: var(--space-2);
	justify-content: center;
	line-height: 1.2;
	padding: 0.8rem 1.6rem;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.button-primary {
	background-color: var(--color-button);
	border: 1px solid var(--color-button);
	color: var(--color-white);
}

.button-primary:hover {
	background-color: var(--color-button-hover);
	border-color: var(--color-button-hover);
	color: var(--color-white);
}

.button-secondary {
	background-color: transparent;
	border: 1px solid var(--color-text);
	color: var(--color-text);
}

.button-secondary:hover {
	background-color: var(--color-text);
	color: var(--color-background);
}

.arrow-icon {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

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

/* Scroll reveal (assets/js/main.js adds .is-visible); off for reduced motion. */
.fade-in-up {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

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

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

	.arrow-icon {
		transition: none;
	}
}

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

.announcement-bar {
	background-color: var(--color-slate-deep);
	color: var(--color-text-muted-on-dark);
	font-size: 0.8125rem;
	letter-spacing: 0.01em;
	padding: var(--space-2) var(--space-4);
	text-align: center;
}

.announcement-bar a {
	color: var(--color-text-on-dark);
}

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

.site-header--scrolled .header-main {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* Start (menu button + logo) and actions share the space either side of
   the centred nav; on mobile the nav is hidden and they split the row. */
.header-main__inner {
	align-items: center;
	display: flex;
	gap: var(--space-4);
	min-height: 64px;
}

.header-main__start {
	align-items: center;
	display: flex;
	flex: 1;
	gap: var(--space-2);
	min-width: 0;
}

.site-branding {
	min-width: 0;
}

.site-logo {
	color: var(--color-text-on-dark);
	display: inline-flex;
	text-decoration: none;
}

.site-logo:hover {
	color: var(--color-text-on-dark);
}

.site-logo .wordmark {
	height: 30px;
	width: auto;
}

.wordmark__dot {
	fill: var(--color-ember);
}

/* On slate the dot uses the lighter copper so it still reads as ember. */
.header-main .wordmark__dot,
.site-footer .wordmark__dot {
	fill: var(--color-accent-on-dark);
}

.primary-navigation {
	display: none;
	flex: 0 0 auto;
}

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

.primary-menu > li {
	position: relative;
}

.primary-menu > li > a {
	align-items: center;
	color: var(--color-text-on-dark);
	display: inline-flex;
	font-size: 0.9375rem;
	font-weight: 500;
	gap: var(--space-1);
	padding-block: var(--space-2);
	text-decoration: none;
}

.primary-menu > li > a::before {
	background-color: var(--color-accent-on-dark);
	bottom: 2px;
	content: '';
	height: 2px;
	left: 0;
	position: absolute;
	right: 0;
	transform: scaleX(0);
	transition: transform 0.2s ease;
}

.primary-menu > li > a:hover::before,
.primary-menu > .current-menu-item > a::before,
.primary-menu > .current-menu-ancestor > a::before {
	transform: scaleX(1);
}

.primary-menu > li > a:hover {
	color: var(--color-text-on-dark);
}

.primary-menu > li > a:focus-visible {
	outline-color: var(--color-accent-on-dark);
}

.primary-menu > .menu-item-has-children > a::after {
	border: solid currentColor;
	border-width: 0 1.5px 1.5px 0;
	content: '';
	display: inline-block;
	height: 5px;
	margin-top: -3px;
	transform: rotate(45deg);
	width: 5px;
}

.primary-menu .sub-menu {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-elevated);
	display: none;
	left: 0;
	list-style: none;
	margin: 0;
	min-width: 220px;
	padding: var(--space-2);
	position: absolute;
	top: 100%;
	z-index: 50;
}

/* .is-open is set by assets/js/main.js so Escape can close a dropdown. */
.primary-menu > .menu-item-has-children:hover > .sub-menu,
.primary-menu > .menu-item-has-children.is-open > .sub-menu {
	display: block;
}

.primary-menu .sub-menu a {
	border-radius: var(--radius-sm);
	color: var(--color-text);
	display: block;
	font-size: var(--font-size-small);
	padding: var(--space-2) var(--space-3);
	text-decoration: none;
	white-space: nowrap;
}

.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu a:focus-visible {
	background-color: var(--color-background);
	color: var(--color-link);
}

.menu-toggle {
	background: none;
	border: 0;
	color: var(--color-text-on-dark);
	cursor: pointer;
	margin-left: calc(var(--space-2) * -1);
	padding: var(--space-3) var(--space-2);
}

.menu-toggle__box {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 22px;
}

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

.header-actions {
	align-items: center;
	display: flex;
	flex: 1;
	gap: 0;
	justify-content: flex-end;
}

.header-action {
	align-items: center;
	background: none;
	border: 0;
	border-radius: var(--radius-pill);
	color: var(--color-text-on-dark);
	cursor: pointer;
	display: inline-flex;
	padding: var(--space-2);
	position: relative;
	text-decoration: none;
}

.header-action:hover {
	background-color: var(--color-slate-2);
	color: var(--color-text-on-dark);
}

.header-action:focus-visible {
	outline-color: var(--color-accent-on-dark);
}

/* Cart count: a small copper badge; slate text on it (7.5:1). */
.cart-count {
	align-items: center;
	background-color: var(--color-accent-on-dark);
	border-radius: 999px;
	color: var(--color-slate);
	display: flex;
	font-size: 0.6875rem;
	font-weight: 700;
	height: 17px;
	justify-content: center;
	line-height: 1;
	min-width: 17px;
	padding: 0 4px;
	position: absolute;
	right: 0;
	top: 0;
}

.cart-count:empty,
.cart-count[data-cart-count='0'] {
	display: none;
}

.header-search {
	position: relative;
}

.header-search__panel {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-elevated);
	padding: var(--space-3);
	position: absolute;
	right: calc(var(--space-12) * -1);
	top: calc(100% + var(--space-2));
	width: min(320px, calc(100vw - 2rem));
}

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

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

.header-search__panel label {
	flex: 1;
	min-width: 0;
}

.header-search__panel input[type='search'] {
	background-color: var(--color-white);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	color: var(--color-text);
	padding: var(--space-2) var(--space-4);
	width: 100%;
}

.header-search__panel input[type='submit'] {
	background-color: var(--color-button);
	border: 0;
	border-radius: var(--radius-pill);
	color: var(--color-white);
	cursor: pointer;
	font-weight: 600;
	padding: var(--space-2) var(--space-4);
}

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

	.menu-toggle {
		display: none;
	}

	.header-search__panel {
		right: 0;
	}
}

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

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

.mobile-menu__backdrop {
	background-color: rgba(34, 36, 38, 0.5);
	inset: 0;
	position: absolute;
}

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

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

.mobile-menu-list {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-menu-list > li {
	border-bottom: 1px solid var(--color-border);
}

.mobile-menu-list a {
	color: var(--color-text);
	display: block;
	font-family: var(--font-heading);
	font-size: 1.375rem;
	padding: var(--space-3) 0;
	text-decoration: none;
}

.mobile-menu-list > .menu-item-has-children {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.mobile-menu-list > .menu-item-has-children > a {
	flex: 1;
}

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

.mobile-submenu-toggle svg {
	transition: transform 0.2s ease;
}

.mobile-submenu-toggle[aria-expanded='true'] svg {
	transform: rotate(180deg);
}

.mobile-menu-list .sub-menu {
	flex-basis: 100%;
	list-style: none;
	margin: 0 0 var(--space-3);
	padding-left: var(--space-4);
}

.mobile-menu-list .sub-menu[hidden] {
	display: none;
}

.mobile-menu-list .sub-menu a {
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	padding: var(--space-2) 0;
}

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

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

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

@media (min-width: 700px) {
	.site-footer__inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.site-footer__inner {
		grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
	}
}

.footer-column__heading {
	color: var(--color-text-on-dark);
	font-family: var(--font-heading);
	font-size: var(--font-size-large);
	margin-bottom: var(--space-4);
}

.footer-column address {
	color: var(--color-text-muted-on-dark);
	font-size: var(--font-size-small);
	font-style: normal;
	line-height: 1.75;
	margin-top: var(--space-4);
}

.footer-column address strong {
	color: var(--color-text-on-dark);
	font-weight: 600;
}

.footer-column a {
	color: var(--color-text-on-dark);
	text-decoration-color: rgba(245, 241, 234, 0.35);
}

.footer-column a:hover {
	color: var(--color-accent-on-dark);
}

.footer-column a:focus-visible {
	outline-color: var(--color-accent-on-dark);
}

.site-logo--footer .wordmark {
	height: 28px;
}

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

.footer-contact__label {
	color: var(--color-text-muted-on-dark);
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.footer-policy-summary {
	color: var(--color-text-muted-on-dark);
	line-height: 1.6;
}

.site-footer__bottom {
	border-top: 1px solid rgba(245, 241, 234, 0.12);
	color: var(--color-text-muted-on-dark);
	font-size: 0.8125rem;
	padding-block: var(--space-4);
}

/* ==========================================================================
   Page content (page.php, 404.php): a centred reading column.
   ========================================================================== */
.page-content {
	margin-inline: auto;
	max-width: 46rem;
	padding-block: var(--space-12) var(--space-16);
}

.page-header {
	border-bottom: 1px solid var(--color-border);
	margin-bottom: var(--space-8);
	padding-bottom: var(--space-6);
}

.page-title {
	font-size: clamp(2.125rem, 1.6rem + 2vw, 2.875rem);
}

.page-header__intro {
	color: var(--color-text-muted);
	font-size: var(--font-size-large);
	margin-top: var(--space-3);
}

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

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

.entry-content > h2:first-child,
.entry-content > h3:first-child {
	margin-top: 0;
}

.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.75;
}

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

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

.entry-content li::marker {
	color: var(--color-ember);
}

.entry-content a {
	color: var(--color-link);
	text-decoration: underline;
}

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

.entry-content a.button-primary,
.entry-content a.button-primary:hover {
	color: var(--color-white);
	text-decoration: none;
}

.entry-content .policy-updated {
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
}

/* Policy facts table (policies and FAQ). */
.entry-content table,
.policy-table {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-collapse: separate;
	border-radius: var(--radius-md);
	border-spacing: 0;
	font-size: var(--font-size-small);
	overflow: hidden;
	width: 100%;
}

.entry-content th,
.entry-content td {
	border-bottom: 1px solid var(--color-border);
	padding: var(--space-3) var(--space-4);
	text-align: left;
	vertical-align: top;
}

.entry-content tr:last-child th,
.entry-content tr:last-child td {
	border-bottom: 0;
}

.entry-content th {
	font-weight: 600;
	width: 45%;
}

/* A contact card used at the end of policy pages, the FAQ and About. */
.entry-content .contact-card {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-6);
}

/* FAQ: <details> items. */
.entry-content details {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 0 var(--space-4);
}

.entry-content details + details {
	margin-top: var(--space-3);
}

.entry-content summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	padding: var(--space-4) var(--space-8) var(--space-4) 0;
	position: relative;
}

.entry-content summary::-webkit-details-marker {
	display: none;
}

.entry-content summary::after {
	color: var(--color-accent);
	content: '+';
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.entry-content details[open] summary::after {
	content: '\2212';
}

.entry-content details > :not(summary) {
	padding-bottom: var(--space-4);
}

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

/* ==========================================================================
   Homepage (front-page.php, inc/front-page.php)
   Every section renders only when it has content.
   ========================================================================== */
.eyebrow {
	color: var(--color-accent);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --- hero: text-led, a warm glow drawn in CSS (no photo) --- */
.home-hero {
	background-color: var(--color-background);
	border-bottom: 1px solid var(--color-border);
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.home-hero::before {
	background: radial-gradient(closest-side, rgba(180, 97, 42, 0.22), rgba(180, 97, 42, 0.08) 55%, rgba(180, 97, 42, 0) 100%);
	content: '';
	height: 640px;
	position: absolute;
	right: -220px;
	top: -180px;
	width: 640px;
	z-index: -1;
}

.home-hero__inner {
	display: grid;
	gap: var(--space-8);
	padding-block: var(--space-12) var(--space-12);
}

@media (min-width: 900px) {
	.home-hero__inner {
		align-items: end;
		grid-template-columns: 1.5fr 1fr;
		padding-block: var(--space-24) var(--space-16);
	}
}

.home-hero__headline {
	font-size: var(--font-size-display);
	font-weight: 520;
	line-height: 1.04;
	margin-top: var(--space-4);
	max-width: 14ch;
}

.home-hero__headline em {
	color: var(--color-ember);
	font-style: italic;
	font-weight: 480;
}

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

.home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-8);
}

/* Fact list beside the headline: shipping/returns lines from inc/facts.php. */
.home-hero__facts {
	border-left: 2px solid var(--color-ember);
	display: grid;
	gap: var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0 0 0 var(--space-6);
}

.home-hero__facts li {
	font-size: var(--font-size-small);
	line-height: 1.55;
}

.home-hero__facts strong {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--font-size-large);
	font-weight: 560;
	margin-bottom: 2px;
}

/* --- generic home section --- */
.home-section {
	padding-block: var(--space-12) 0;
}

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

.home-section__title {
	font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);
}

.home-section__view-all {
	align-items: center;
	display: inline-flex;
	font-size: var(--font-size-small);
	font-weight: 600;
	gap: var(--space-2);
	text-decoration: none;
}

/* --- "Shop by" tiles --- */
.shop-by-tiles {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.shop-by-tile {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	display: grid;
	gap: var(--space-2);
	grid-template-columns: 1fr auto;
	height: 100%;
	overflow: hidden;
	padding: var(--space-6);
	position: relative;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.shop-by-tile::after {
	background-color: var(--color-ember);
	bottom: 0;
	content: '';
	height: 3px;
	left: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
	width: 100%;
}

.shop-by-tile:hover {
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow-card);
	color: var(--color-text);
}

.shop-by-tile:hover::after {
	transform: scaleX(1);
}

.shop-by-tile__icon {
	color: var(--color-ember);
	grid-column: 1 / -1;
	margin-bottom: var(--space-4);
}

.shop-by-tile__label {
	font-family: var(--font-heading);
	font-size: var(--font-size-h4);
	font-weight: 560;
	line-height: 1.2;
}

.shop-by-tile__count {
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
	grid-column: 1;
}

.shop-by-tile .arrow-icon {
	align-self: center;
	color: var(--color-accent);
	grid-column: 2;
	grid-row: 2 / span 2;
}

/* --- product rows on the homepage reuse the shop's product cards --- */
.home-products ul.products {
	margin: 0;
}

/* --- slim facts band --- */
.facts-band {
	margin-top: var(--space-16);
}

.facts-band__list {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	display: grid;
	gap: 0;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 800px) {
	.facts-band__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.facts-band__item {
	align-items: flex-start;
	display: flex;
	gap: var(--space-4);
	padding: var(--space-6);
}

.facts-band__item + .facts-band__item {
	border-top: 1px solid var(--color-border);
}

@media (min-width: 800px) {
	.facts-band__item + .facts-band__item {
		border-left: 1px solid var(--color-border);
		border-top: 0;
	}
}

.facts-band__icon {
	color: var(--color-ember);
	flex-shrink: 0;
}

.facts-band__text {
	font-size: var(--font-size-small);
	line-height: 1.6;
}

.facts-band__text a {
	display: inline-block;
	font-weight: 600;
	margin-top: var(--space-1);
}

/* --- contact band --- */
.contact-band {
	margin-top: var(--space-12);
}

.contact-band__inner {
	background-color: var(--color-slate);
	border-radius: var(--radius-lg);
	color: var(--color-text-on-dark);
	display: grid;
	gap: var(--space-8);
	padding: var(--space-8) var(--space-6);
}

@media (min-width: 900px) {
	.contact-band__inner {
		align-items: center;
		grid-template-columns: 1fr 1.6fr;
		padding: var(--space-12);
	}
}

.contact-band__title {
	color: var(--color-text-on-dark);
	font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);
}

.contact-band__text {
	color: var(--color-text-muted-on-dark);
	margin-top: var(--space-3);
}

.contact-band__facts {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
	margin: 0;
}

@media (min-width: 600px) {
	.contact-band__facts {
		grid-template-columns: repeat(3, 1fr);
	}
}

.contact-band__facts dt {
	align-items: center;
	color: var(--color-text-muted-on-dark);
	display: flex;
	font-size: 0.75rem;
	gap: var(--space-2);
	letter-spacing: 0.08em;
	margin-bottom: var(--space-2);
	text-transform: uppercase;
}

.contact-band__icon {
	color: var(--color-accent-on-dark);
}

.contact-band__facts dd {
	font-size: var(--font-size-small);
	line-height: 1.6;
	margin: 0;
	overflow-wrap: anywhere;
}

.contact-band__facts a {
	color: var(--color-text-on-dark);
	font-weight: 600;
}

.contact-band__facts a:hover {
	color: var(--color-accent-on-dark);
}

.contact-band__facts a:focus-visible {
	outline-color: var(--color-accent-on-dark);
}

/* ==========================================================================
   Product card (inc/product-cards.php) — shop grid, archives, homepage,
   related products. Same square white image frame everywhere.
   ========================================================================== */
.woocommerce ul.products {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

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

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

.woocommerce ul.products li.product {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	display: flex;
	flex-direction: column;
	font-size: var(--font-size-small);
	min-width: 0;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce ul.products li.product:hover {
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow-card);
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link {
	border-radius: var(--radius-md);
	color: var(--color-text);
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--space-3) var(--space-3) var(--space-4);
	text-decoration: none;
}

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

/* The square frame: whole image, never cropped, centred on white with the
   same padding on every side — identical on cards and the product page. */
.product-card__image {
	aspect-ratio: 1 / 1;
	background-color: var(--color-white);
	border-radius: var(--radius-sm);
	display: block;
	margin-bottom: var(--space-3);
	overflow: hidden;
	position: relative;
}

.product-card__image img {
	box-sizing: border-box;
	height: 100%;
	inset: 0;
	object-fit: contain;
	object-position: center;
	padding: 8%;
	position: absolute;
	width: 100%;
}

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

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

.product-card__specs {
	color: var(--color-text-muted);
	display: grid;
	font-size: 0.8125rem;
	gap: 2px;
	margin: 0 0 var(--space-2);
}

.product-card__specs div {
	display: flex;
	gap: var(--space-1);
}

.product-card__specs dt::after {
	content: ':';
}

.product-card__specs dd {
	color: var(--color-text);
	margin: 0;
}

.woocommerce ul.products li.product .price {
	color: var(--color-text);
	display: block;
	font-size: 1.125rem;
	font-weight: 650;
	margin-top: auto;
	padding-top: var(--space-2);
}

.product-card__stock {
	color: var(--color-text-muted);
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	margin-top: var(--space-1);
}

/* ==========================================================================
   Brands page (page-brands.php): text tiles, no logos.
   ========================================================================== */
.brands-page {
	max-width: 1200px;
}

.brand-grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.brand-tile {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	height: 100%;
	padding: var(--space-6);
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.brand-tile:hover {
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow-card);
	color: var(--color-text);
}

.brand-tile__name {
	font-family: var(--font-heading);
	font-size: var(--font-size-h4);
	font-weight: 560;
}

.brand-tile__count {
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
}

.brand-tile__cta {
	color: var(--color-accent);
	font-size: var(--font-size-small);
	font-weight: 600;
	margin-top: auto;
	padding-top: var(--space-3);
}

/* ==========================================================================
   WooCommerce plumbing — shop archive, single product, cart/checkout blocks,
   order received. Layout rules only; colours, type and shape come from the
   tokens above.
   ========================================================================== */
/* ==========================================================================
   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-border-strong);
	border-radius: var(--radius-sm);
	background-color: var(--color-white);
	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: var(--color-white);
}

/* --- 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, 45, 47, 0.45);
}

.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: var(--color-white);
	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 (never shown: see inc/no-sale-display.php) 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-accent);
	color: var(--color-white);
	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-background);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

/* The "Zoom image" button (printed by nofara_product_gallery_controls(),
   opens WooCommerce's lightbox on the shown image) — kept on WooCommerce's
   own trigger class name so it looks the same as before: a small round
   white button in the gallery's 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%;
	padding: 0;
	border: 0;
	background-color: var(--color-white);
	box-shadow: var(--shadow-card);
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.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-link);
	outline-offset: 2px;
}

/* The button's empty inner <span> draws the same thin-line magnifier used
   by the header's search icon, 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;
}

/* Product images are never cropped (see nofara_uncropped_image_size()):
   the whole photo is scaled to fit, centered on white, inside the same
   square frame as the product cards, whatever the photo's shape. */
.woocommerce-product-gallery__image img {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	padding: 6%;
	object-fit: contain;
	object-position: center;
	background-color: var(--color-white);
}

/* The gallery's own controls (see nofara_product_gallery_controls() and
   the product gallery script in assets/js/main.js) start hidden and are
   shown by that script — these rules set "display", so the hidden
   attribute needs saying again to keep winning. The same goes for the
   images not currently shown. */
.woocommerce-product-gallery__trigger[hidden],
.product-gallery-thumbs[hidden],
.woocommerce-product-gallery__image[hidden] {
	display: none;
}

/* Thumbnail strip: a single scrollable row of buttons at a proper size,
   so it stays tidy however many photos a product has. */
.product-gallery-thumbs {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: var(--space-2);
	margin: var(--space-3) 0 0;
	padding: var(--space-1) var(--space-1) var(--space-2);
}

.product-gallery-thumb {
	flex: 0 0 auto;
	display: block;
	padding: 0;
	border: 2px solid var(--color-surface);
	border-radius: var(--radius-sm);
	background-color: var(--color-background);
	cursor: pointer;
}

.product-gallery-thumb img {
	box-sizing: border-box;
	display: block;
	width: 64px;
	height: 64px;
	padding: 4px;
	border-radius: var(--radius-sm);
	object-fit: contain;
	object-position: center;
	background-color: var(--color-white);
}

.product-gallery-thumb.is-active {
	border-color: var(--color-text);
}

.product-gallery-thumb:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 2px;
}

/* Mobile: dots instead of a photo strip (swiping the image also works).
   Each button keeps its accessible label ("Show image 2 of 5") and is a
   24px touch target; its thumbnail image is hidden and a plain CSS circle
   is drawn as the visible dot. */
@media (max-width: 599px) {
	.product-gallery-thumbs {
		justify-content: center;
		align-items: center;
		overflow-x: visible;
	}

	.product-gallery-thumb {
		position: relative;
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 0;
		border-radius: 50%;
		background-color: transparent;
	}

	.product-gallery-thumb img {
		display: none;
	}

	/* Inactive: a hollow ring in muted text colour (5.6:1 on the gallery's
	   light-gray background); active: a solid dark dot. */
	.product-gallery-thumb::after {
		content: '';
		box-sizing: border-box;
		width: 8px;
		height: 8px;
		border: 1.5px solid var(--color-text-muted);
		border-radius: 50%;
		pointer-events: none;
	}

	.product-gallery-thumb.is-active::after {
		border-color: var(--color-text);
		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: var(--color-text-muted);
	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: var(--color-text-muted);
}

/* --- 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-border-strong);
	border-radius: var(--radius-sm);
	background-color: var(--color-white);
	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-button);
	background-color: var(--color-button);
	color: var(--color-white);
	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: var(--color-button-hover);
}

.single_variation_wrap .single_add_to_cart_button.disabled {
	background-color: var(--color-surface);
	color: var(--color-text-muted);
	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-link);
	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%;
}

/* --- "At a glance" spec table (see nofara_spec_list_to_table()) --- */
.accordion-item__panel .spec-table {
	width: 100%;
	max-width: 44rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: var(--font-size-body);
}

.accordion-item__panel .spec-table th,
.accordion-item__panel .spec-table td {
	border-bottom: 0;
	padding: var(--space-3) var(--space-4);
	text-align: left;
	vertical-align: top;
}

.accordion-item__panel .spec-table tr + tr th,
.accordion-item__panel .spec-table tr + tr td {
	border-top: 1px solid var(--color-border);
}

.accordion-item__panel .spec-table th {
	width: 38%;
	background-color: var(--color-surface);
	border-right: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-family: var(--font-heading);
	font-size: var(--font-size-small);
	font-weight: 500;
	letter-spacing: 0.02em;
}

.accordion-item__panel .spec-table td {
	color: var(--color-text);
	font-weight: 500;
	overflow-wrap: anywhere;
}

/* --- 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);
}

/* --- 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__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-button);
	background-color: var(--color-button);
	color: var(--color-white);
	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: var(--color-text-muted);
	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: var(--color-surface);
	border-left: 4px solid var(--color-text);
	color: var(--color-text);
	font-weight: 500;
}

.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-button);
	background-color: var(--color-button);
	color: var(--color-white);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.woocommerce .button:hover,
.woocommerce input.button:hover,
.woocommerce button.button:hover {
	background-color: var(--color-button-hover);
}

.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-border-strong);
	border-radius: var(--radius-sm);
	background-color: var(--color-white);
	color: var(--color-text);
}

/* ==========================================================================
   Contact page (page-contact.php) — details (exactly as entered in the
   page editor) stacked above the form on mobile, side by side on desktop,
   two columns on desktop. Inputs/textarea reuse
   the same look as checkout (.woocommerce form baseline); the submit
   button reuses .button-primary (same button as "Add to cart").
   ========================================================================== */
.page-contact .page-content {
	max-width: none;
}

.contact-page {
	display: grid;
	gap: var(--space-12);
}

.contact-page__details {
	line-height: 1.8;
}

.contact-page__warehouse-note {
	margin-top: var(--space-4);
	padding: var(--space-4);
	border-left: 3px solid var(--color-accent);
	border-radius: var(--radius-sm);
	background-color: var(--color-surface);
}

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

.contact-form__field {
	margin-bottom: var(--space-4);
}

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

.contact-form__field input[type='text'],
.contact-form__field input[type='email'],
.contact-form__field textarea {
	width: 100%;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background-color: var(--color-white);
	color: var(--color-text);
}

.contact-form__field input:focus-visible,
.contact-form__field textarea:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 1px;
}

.contact-form__field textarea {
	resize: vertical;
}

.contact-form__field--invalid input,
.contact-form__field--invalid textarea {
	border-color: var(--color-text);
	border-width: 2px;
}

.contact-form__error {
	margin-top: var(--space-1);
	color: var(--color-text);
	font-weight: 600;
	font-size: var(--font-size-small);
}

/* Off-screen, not display:none — real browsers never fill it, but it
   stays out of the tab order and hidden from screen readers either way. */
.contact-form__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.contact-form__reply-note {
	margin-top: var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
}

/* ==========================================================================
   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(43, 45, 47, 0.1);
	cursor: pointer;
}

.wc-block-components-totals-wrapper {
	padding: var(--space-4) var(--space-6);
	border-top: 1px solid rgba(43, 45, 47, 0.1);
}

.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(43, 45, 47, 0.1);
}

.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-button) !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-button) !important;
	border-color: var(--color-button) !important;
	color: var(--color-white) !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: var(--color-button-hover) !important;
	border-color: var(--color-button-hover) !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);
}

/* Cart and checkout thumbnails: the same uncropped square frame as the
   product cards — whole image, centered on white. */
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	padding: 6%;
	object-fit: contain;
	object-position: center;
	background-color: var(--color-white);
	border: 1px solid var(--color-surface);
	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) */
.nofara-cart-policy-links {
	margin-top: var(--space-4) !important;
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
}

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

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

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

.nofara-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-border-strong);
	border-radius: var(--radius-sm);
	background-color: var(--color-white);
	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). */
.nofara-checkout-shipping-note {
	margin-top: 0 !important;
	padding: var(--space-4) var(--space-6);
	border-top: 1px solid rgba(43, 45, 47, 0.1);
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
}

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

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

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

/* Checkout order-summary line items: thumbnail frame is set with the
   cart's, above. */
.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 nofara_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. */


/* ==========================================================================
   Policy links under the Cart and Checkout blocks (inc/cart-checkout.php)
   ========================================================================== */
.policy-links {
	border-top: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	text-align: center;
}

.policy-links__fact + .policy-links__fact {
	margin-top: var(--space-1);
}

.policy-links__list {
	margin-top: var(--space-3);
}

.policy-links__list a {
	color: var(--color-link);
	font-weight: 500;
}

/* No "was" price or "Save £x" in the cart blocks (see inc/no-sale-display.php). */
.wc-block-components-sale-badge,
.wc-block-components-product-price__regular,
.wc-block-components-product-sale-badge {
	display: none !important;
}