/*
 * Candle Shine — global design system.
 *
 * Authoring rules for this file (please keep to them):
 *
 *  1. RTL-first. Every directional property is a LOGICAL property
 *     (margin-inline-start, inset-inline-end, padding-inline, border-start-*,
 *     text-align: start). There is no `direction: rtl` patch file and no [dir="rtl"]
 *     override block, because the layout is built in logical space from the start —
 *     which is also why the same stylesheet works unchanged for an LTR locale.
 *  2. No raw colours in components. Everything reads a token from :root so the
 *     Customizer can repaint the theme (see inc/setup/customizer-css.php).
 *  3. Persian needs air: body line-height is 1.85 and headings never use negative
 *     letter-spacing, which breaks Arabic-script joining.
 *  4. Animations stay 150-320ms, transform/opacity only, and every one of them is
 *     switched off under prefers-reduced-motion at the end of this file.
 *
 * Sections
 *   01 Tokens            08 Badges & chips        15 Footer
 *   02 Reset & base      09 Notices & toasts      16 Blog
 *   03 Typography        10 Dialogs & drawers     17 Widgets
 *   04 Layout            11 Loading & empty       18 Comments
 *   05 Utilities         12 Header                19 Prose
 *   06 Buttons           13 Navigation            20 Home sections
 *   07 Forms             14 Breadcrumb & paging   21 Template composition
 *                                                  22 Motion & print
 */

/* =========================================================================
 * 01 — Tokens
 * ====================================================================== */

:root {
	/* -- Colour ---------------------------------------------------------- */
	/* Warm paper base. The whole palette is desaturated warm neutrals plus one
	   ember accent, which is what keeps it reading "candle" rather than "generic
	   e-commerce blue". */
	--cs-bg: #faf7f4;
	--cs-surface: #ffffff;
	--cs-sand: #f3ece5;
	--cs-sand-deep: #ebe0d5;
	--cs-clay: #2a211c;

	--cs-ink: #1c1714;
	--cs-ink-2: #4a4038;
	--cs-ink-3: #7a6e64;
	--cs-ink-4: #a3988e;

	--cs-line: #e8ded4;
	--cs-line-soft: #f0e8e0;

	--cs-brand: #9c5b1f;
	--cs-brand-rgb: 156, 91, 31;
	--cs-brand-dark: #7d4715;
	--cs-brand-tint: #f6ede2;
	--cs-on-brand: #ffffff;

	--cs-gold: #c69b5f;
	--cs-sage: #6f7a63;

	--cs-sale: #a83232;
	--cs-success: #2f7a55;
	--cs-warn: #8a6410;
	--cs-danger: #b3261e;

	--cs-ink-rgb: 28, 23, 20;

	/* -- Typography ------------------------------------------------------ */
	/* --cs-scale is set by the Customizer (compact / default / large). */
	--cs-scale: 1;

	--cs-text-2xs: calc(0.6875rem * var(--cs-scale)); /* 11 */
	--cs-text-xs: calc(0.75rem * var(--cs-scale)); /* 12 */
	--cs-text-sm: calc(0.8125rem * var(--cs-scale)); /* 13 */
	--cs-text-base: calc(0.9375rem * var(--cs-scale)); /* 15 */
	--cs-text-md: calc(1rem * var(--cs-scale)); /* 16 */
	--cs-text-lg: calc(1.125rem * var(--cs-scale)); /* 18 */
	--cs-text-xl: calc(1.3125rem * var(--cs-scale)); /* 21 */

	--cs-h6: calc(1rem * var(--cs-scale));
	--cs-h5: calc(1.125rem * var(--cs-scale));
	--cs-h4: calc(1.3125rem * var(--cs-scale));
	--cs-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
	--cs-h2: clamp(1.5rem, 1.15rem + 1.6vw, 2.375rem);
	--cs-h1: clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem);
	--cs-display: clamp(2.25rem, 1.2rem + 4.6vw, 4.5rem);

	--cs-leading-tight: 1.35;
	--cs-leading-snug: 1.55;
	/* Persian body copy needs noticeably more leading than Latin at the same size. */
	--cs-leading-body: 1.85;

	/* -- Spacing (4px rhythm) -------------------------------------------- */
	--cs-1: 4px;
	--cs-2: 8px;
	--cs-3: 12px;
	--cs-4: 16px;
	--cs-5: 20px;
	--cs-6: 24px;
	--cs-7: 32px;
	--cs-8: 40px;
	--cs-9: 48px;
	--cs-10: 64px;
	--cs-11: 80px;
	--cs-12: 104px;

	/* Vertical rhythm between page sections, fluid across breakpoints. */
	--cs-section: clamp(56px, 7vw, 112px);
	--cs-section-sm: clamp(36px, 4.5vw, 72px);

	/* -- Shape ------------------------------------------------------------ */
	/* Overridden by the Customizer "corner roundness" setting. */
	--cs-radius-xs: 6px;
	--cs-radius-sm: 10px;
	--cs-radius-md: 14px;
	--cs-radius-lg: 20px;
	--cs-radius-pill: 999px;

	/* -- Elevation -------------------------------------------------------- */
	/* Warm-tinted shadows: a neutral grey shadow reads dirty on a warm background. */
	--cs-shadow-xs: 0 1px 2px rgba(var(--cs-ink-rgb), 0.04);
	--cs-shadow-sm: 0 2px 6px -2px rgba(var(--cs-ink-rgb), 0.08);
	--cs-shadow-md: 0 10px 26px -14px rgba(var(--cs-ink-rgb), 0.18);
	--cs-shadow-lg: 0 24px 56px -28px rgba(var(--cs-ink-rgb), 0.26);
	--cs-shadow-ring: 0 0 0 1px var(--cs-line);

	/* -- Layout ----------------------------------------------------------- */
	--cs-container: 1320px;
	--cs-container-narrow: 860px;
	--cs-gutter: 16px;

	/* -- Motion ----------------------------------------------------------- */
	--cs-dur-fast: 150ms;
	--cs-dur: 220ms;
	--cs-dur-slow: 320ms;
	--cs-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
	--cs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	/* -- Z-index scale ---------------------------------------------------- */
	--cs-z-base: 1;
	--cs-z-sticky: 20;
	--cs-z-header: 40;
	--cs-z-bottom-nav: 45;
	--cs-z-overlay: 90;
	--cs-z-drawer: 100;
	--cs-z-toast: 120;

	/* Runtime measurement written by theme.js so sticky offsets are exact. */
	--cs-header-h: 72px;

	/*
	 * Direction multiplier. Lets a physical transform (translateX, which has no
	 * logical equivalent) follow the writing direction without duplicating the rule
	 * in an RTL override block. RTL is the default; header.php guarantees a dir
	 * attribute is always present on <html> so the LTR branch below can win.
	 */
	--cs-flip: 1;
}

[dir="ltr"] {
	--cs-flip: -1;
}

@media (min-width: 640px) {
	:root {
		--cs-gutter: 24px;
	}
}

@media (min-width: 1024px) {
	:root {
		--cs-gutter: 32px;
	}
}

/* =========================================================================
 * 02 — Reset & base
 * ====================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchor links must not land underneath the sticky header. */
	scroll-padding-top: calc(var(--cs-header-h) + var(--cs-4));
}

body {
	margin: 0;
	background-color: var(--cs-bg);
	color: var(--cs-ink);
	font-family: var(--cs-font-sans);
	/* 16px on small screens avoids iOS auto-zoom on focus. */
	font-size: max(16px, var(--cs-text-md));
	font-weight: 400;
	line-height: var(--cs-leading-body);
	font-feature-settings: "ss01", "ss02";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Guards against any single wide child forcing a horizontal scrollbar. */
	overflow-x: clip;
}

@media (min-width: 768px) {
	body {
		font-size: var(--cs-text-md);
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--cs-font-heading);
	font-weight: 600;
	line-height: var(--cs-leading-tight);
	/* Never negative: it breaks Arabic-script letter joining. */
	letter-spacing: 0;
	color: var(--cs-ink);
	text-wrap: balance;
}

p,
ul,
ol,
dl,
figure,
blockquote,
pre,
table {
	margin: 0;
}

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

svg {
	flex: none;
}

a {
	color: var(--cs-brand);
	text-decoration: none;
	text-underline-offset: 0.22em;
	transition: color var(--cs-dur-fast) var(--cs-ease);
}

a:hover {
	color: var(--cs-brand-dark);
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
	margin: 0;
}

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

ul[role="list"],
ol[role="list"] {
	list-style: none;
	padding: 0;
}

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

::selection {
	background: var(--cs-brand-tint);
	color: var(--cs-ink);
}

/* Single, consistent focus treatment. Never removed — only replaced. */
:focus-visible {
	outline: 2px solid var(--cs-brand);
	outline-offset: 2px;
	border-radius: var(--cs-radius-xs);
}

/* Mouse users don't get the ring, keyboard users always do. */
:focus:not(:focus-visible) {
	outline: none;
}

/* Numerals in tabular contexts must not shift width as they change. */
.cs-tabular,
.cs-price,
.cs-qty__input,
.cs-pagination,
td[data-cs-num] {
	font-variant-numeric: tabular-nums;
}

/* =========================================================================
 * 03 — Typography helpers
 * ====================================================================== */

.cs-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--cs-2);
	margin: 0 0 var(--cs-3);
	font-size: var(--cs-text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--cs-brand);
	text-transform: none;
}

.cs-eyebrow__rule {
	display: block;
	width: 26px;
	height: 1px;
	background: currentColor;
	opacity: 0.55;
}

.cs-latin {
	font-family: var(--cs-font-latin);
	font-style: italic;
	letter-spacing: 0.01em;
}

.cs-lead {
	font-size: var(--cs-text-lg);
	line-height: 1.75;
	color: var(--cs-ink-2);
}

.cs-muted {
	color: var(--cs-ink-3);
}

/* Section heading block (helpers.php → candleshine_section_heading). */
.cs-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--cs-5);
	margin-bottom: var(--cs-7);
}

.cs-section-head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.cs-section-head--center .cs-eyebrow {
	justify-content: center;
}

.cs-section-head__text {
	max-width: 62ch;
}

.cs-section-head__title {
	font-size: var(--cs-h2);
}

.cs-section-head__subtitle {
	margin-top: var(--cs-3);
	color: var(--cs-ink-3);
	font-size: var(--cs-text-base);
	line-height: 1.8;
}

@media (max-width: 767px) {
	.cs-section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--cs-3);
	}

	.cs-section-head--center {
		align-items: center;
	}
}

/* Arrow link. The icon is already direction-aware (see icons.php), so it only
   needs to nudge along the inline axis on hover. */
.cs-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--cs-2);
	flex: none;
	font-size: var(--cs-text-base);
	font-weight: 600;
	color: var(--cs-ink);
}

.cs-link-arrow svg {
	transition: transform var(--cs-dur) var(--cs-ease);
}

.cs-link-arrow:hover {
	color: var(--cs-brand);
}

.cs-link-arrow:hover svg {
	transform: translateX(calc(-4px * var(--cs-flip, 1)));
}

.cs-link-arrow--sm {
	font-size: var(--cs-text-sm);
}

/* =========================================================================
 * 04 — Layout
 * ====================================================================== */

.cs-container {
	width: 100%;
	max-width: var(--cs-container);
	margin-inline: auto;
	padding-inline: var(--cs-gutter);
}

.cs-container--narrow {
	max-width: var(--cs-container-narrow);
}

.cs-section {
	padding-block: var(--cs-section);
}

.cs-section--sm {
	padding-block: var(--cs-section-sm);
}

.cs-section--sand {
	background: var(--cs-sand);
}

.cs-section--surface {
	background: var(--cs-surface);
}

.cs-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.cs-main {
	flex: 1 1 auto;
}

/* Responsive auto grid used by most listing sections. */
.cs-grid {
	display: grid;
	gap: var(--cs-5);
	grid-template-columns: repeat(var(--cs-grid-cols, 1), minmax(0, 1fr));
}

@media (min-width: 560px) {
	.cs-grid {
		--cs-grid-cols: 2;
	}
}

@media (min-width: 1024px) {
	.cs-grid {
		--cs-grid-cols: var(--cs-grid-cols-lg, 3);
		gap: var(--cs-6);
	}
}

/* Two-column content + sidebar. */
.cs-with-sidebar {
	display: grid;
	gap: var(--cs-8);
	align-items: start;
}

@media (min-width: 1024px) {
	.cs-with-sidebar {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: var(--cs-10);
	}

	.cs-with-sidebar > .cs-sidebar {
		position: sticky;
		top: calc(var(--cs-header-h) + var(--cs-5));
	}
}

.cs-no-sidebar .cs-with-sidebar {
	grid-template-columns: minmax(0, 1fr);
}

/* Horizontal scroll rail for mobile carousels. Snap points, no JS needed. */
.cs-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(var(--cs-rail-item, 66%), 1fr);
	gap: var(--cs-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* Bleed to the viewport edge so cards can be cut off, which signals scrollability. */
	margin-inline: calc(var(--cs-gutter) * -1);
	padding-inline: var(--cs-gutter);
	padding-block-end: var(--cs-2);
	overscroll-behavior-inline: contain;
}

.cs-rail::-webkit-scrollbar {
	display: none;
}

.cs-rail > * {
	scroll-snap-align: start;
}

@media (min-width: 640px) {
	.cs-rail {
		--cs-rail-item: 40%;
	}
}

@media (min-width: 1024px) {
	/* Above the fold for tablets and up the rail becomes a plain grid. */
	.cs-rail {
		grid-auto-flow: row;
		grid-template-columns: repeat(var(--cs-rail-cols, 4), minmax(0, 1fr));
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
		gap: var(--cs-6);
	}
}

/* =========================================================================
 * 05 — Utilities & accessibility
 * ====================================================================== */

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

.screen-reader-text:focus {
	position: fixed !important;
	top: 12px;
	inset-inline-start: 12px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: var(--cs-3) var(--cs-5);
	clip: auto;
	clip-path: none;
	background: var(--cs-surface);
	color: var(--cs-ink);
	border-radius: var(--cs-radius-sm);
	box-shadow: var(--cs-shadow-lg);
	font-weight: 600;
	text-decoration: none;
}

.cs-skip-link:focus {
	outline: 2px solid var(--cs-brand);
	outline-offset: 2px;
}

/* Hidden but still measurable/animatable — used by drawers before they open. */
[hidden] {
	display: none !important;
}

.cs-no-scroll {
	overflow: hidden;
	/* Compensating for the removed scrollbar avoids a layout jump when a drawer opens. */
	padding-inline-end: var(--cs-scrollbar, 0);
}

.cs-divider {
	height: 1px;
	background: var(--cs-line);
	border: 0;
}

.cs-ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cs-3);
	color: var(--cs-gold);
}

.cs-ornament::before,
.cs-ornament::after {
	content: "";
	height: 1px;
	width: clamp(28px, 8vw, 72px);
	background: currentColor;
	opacity: 0.5;
}

/* =========================================================================
 * 06 — Buttons
 * ====================================================================== */

.cs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cs-2);
	/* 48px tall: comfortably above the 44px minimum touch target. */
	min-height: 48px;
	padding: var(--cs-3) var(--cs-6);
	border: 1px solid transparent;
	border-radius: var(--cs-radius-sm);
	font-family: var(--cs-font-sans);
	font-size: var(--cs-text-base);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	/* Removes the 300ms tap delay on touch without disabling pinch-zoom. */
	touch-action: manipulation;
	transition: background-color var(--cs-dur-fast) var(--cs-ease),
		border-color var(--cs-dur-fast) var(--cs-ease),
		color var(--cs-dur-fast) var(--cs-ease),
		transform var(--cs-dur-fast) var(--cs-ease),
		box-shadow var(--cs-dur-fast) var(--cs-ease);
}

/* Press feedback that does not move neighbouring content. */
.cs-btn:active {
	transform: scale(0.985);
}

.cs-btn--primary {
	background: var(--cs-brand);
	border-color: var(--cs-brand);
	color: var(--cs-on-brand);
	box-shadow: var(--cs-shadow-sm);
}

.cs-btn--primary:hover {
	background: var(--cs-brand-dark);
	border-color: var(--cs-brand-dark);
	color: var(--cs-on-brand);
	box-shadow: var(--cs-shadow-md);
}

.cs-btn--outline {
	background: transparent;
	border-color: var(--cs-ink);
	color: var(--cs-ink);
}

.cs-btn--outline:hover {
	background: var(--cs-ink);
	border-color: var(--cs-ink);
	color: var(--cs-surface);
}

.cs-btn--ghost {
	background: var(--cs-surface);
	border-color: var(--cs-line);
	color: var(--cs-ink);
}

.cs-btn--ghost:hover {
	border-color: var(--cs-ink-4);
	color: var(--cs-ink);
	background: var(--cs-surface);
}

.cs-btn--quiet {
	background: transparent;
	color: var(--cs-ink-2);
	padding-inline: var(--cs-3);
	min-height: 44px;
}

.cs-btn--quiet:hover {
	color: var(--cs-brand);
}

.cs-btn--muted {
	background: var(--cs-sand-deep);
	border-color: transparent;
	color: var(--cs-ink-3);
}

.cs-btn--danger {
	background: transparent;
	border-color: var(--cs-danger);
	color: var(--cs-danger);
}

.cs-btn--danger:hover {
	background: var(--cs-danger);
	color: #fff;
}

.cs-btn--sm {
	min-height: 40px;
	padding: var(--cs-2) var(--cs-4);
	font-size: var(--cs-text-sm);
}

.cs-btn--lg {
	min-height: 56px;
	padding: var(--cs-4) var(--cs-8);
	font-size: var(--cs-text-lg);
}

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

/* Disabled: reduced emphasis, no pointer, and still announced to AT. */
.cs-btn[disabled],
.cs-btn[aria-disabled="true"],
.cs-btn.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
	box-shadow: none;
}

/* Async state: the label stays in place and a spinner replaces the icon, so the
   button never changes size mid-request. */
.cs-btn.is-loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

.cs-btn.is-loading::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	color: var(--cs-on-brand);
	animation: cs-spin 720ms linear infinite;
}

.cs-btn--outline.is-loading::after,
.cs-btn--ghost.is-loading::after {
	color: var(--cs-ink);
}

@keyframes cs-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Icon-only control. Always paired with a .screen-reader-text label in markup. */
.cs-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: var(--cs-radius-sm);
	color: var(--cs-ink);
	background: transparent;
	cursor: pointer;
	touch-action: manipulation;
	transition: background-color var(--cs-dur-fast) var(--cs-ease),
		color var(--cs-dur-fast) var(--cs-ease);
}

.cs-icon-btn:hover {
	background: var(--cs-sand);
	color: var(--cs-brand);
}

/* =========================================================================
 * 07 — Forms
 * ====================================================================== */

.cs-form {
	display: grid;
	gap: var(--cs-5);
}

.cs-field {
	display: grid;
	gap: var(--cs-2);
	margin: 0;
}

.cs-field label,
.cs-label {
	font-size: var(--cs-text-sm);
	font-weight: 600;
	color: var(--cs-ink-2);
}

.cs-field__hint,
.cs-hint {
	font-size: var(--cs-text-xs);
	color: var(--cs-ink-3);
	line-height: 1.7;
}

.cs-required {
	color: var(--cs-danger);
	margin-inline-start: 2px;
}

.cs-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
select,
textarea {
	width: 100%;
	/* 48px minimum so mobile taps are comfortable. */
	min-height: 48px;
	padding: var(--cs-3) var(--cs-4);
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-sm);
	color: var(--cs-ink);
	/* 16px prevents iOS from zooming the viewport on focus. */
	font-size: max(16px, var(--cs-text-base));
	line-height: 1.6;
	transition: border-color var(--cs-dur-fast) var(--cs-ease),
		box-shadow var(--cs-dur-fast) var(--cs-ease);
	appearance: none;
}

textarea {
	min-height: 120px;
	resize: vertical;
	line-height: 1.8;
}

select {
	/* Chevron drawn as a background image so it follows the inline direction. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a6e64' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left var(--cs-4) center;
	background-size: 16px;
	padding-inline-end: var(--cs-4);
	padding-inline-start: var(--cs-9);
	cursor: pointer;
}

[dir="ltr"] select {
	background-position: right var(--cs-4) center;
}

.cs-input:focus,
input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--cs-brand);
	box-shadow: 0 0 0 3px rgba(var(--cs-brand-rgb), 0.14);
}

.cs-input::placeholder,
textarea::placeholder {
	color: var(--cs-ink-4);
}

/* Read-only reads as informational; disabled reads as unavailable. They must not
   look the same. */
.cs-input[readonly] {
	background: var(--cs-sand);
	border-style: dashed;
}

.cs-input[disabled],
select[disabled],
textarea[disabled] {
	background: var(--cs-sand);
	color: var(--cs-ink-4);
	cursor: not-allowed;
}

/* Error state: colour plus an icon and text, never colour alone. */
.cs-field.has-error .cs-input,
.cs-input[aria-invalid="true"] {
	border-color: var(--cs-danger);
	box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12);
}

.cs-field__error {
	display: flex;
	align-items: center;
	gap: var(--cs-1);
	font-size: var(--cs-text-xs);
	font-weight: 600;
	color: var(--cs-danger);
}

.cs-field--half {
	grid-column: span 1;
}

@media (min-width: 640px) {
	.cs-form--2col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cs-form--2col > .cs-field--wide {
		grid-column: 1 / -1;
	}
}

/* Checkbox / radio: native control, restyled accent, generous hit area. */
.cs-check {
	display: flex;
	align-items: flex-start;
	gap: var(--cs-3);
	font-size: var(--cs-text-base);
	line-height: 1.7;
	cursor: pointer;
	/* Keeps the whole row at a comfortable touch height. */
	min-height: 44px;
	padding-block: var(--cs-2);
}

.cs-check input[type="checkbox"],
.cs-check input[type="radio"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 4px;
	accent-color: var(--cs-brand);
	cursor: pointer;
}

/* Quantity stepper. The native number input stays in the DOM for forms and AT;
   the +/- buttons are progressive enhancement. */
.cs-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-sm);
	background: var(--cs-surface);
	overflow: hidden;
}

.cs-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-height: 48px;
	color: var(--cs-ink-2);
	cursor: pointer;
	transition: background-color var(--cs-dur-fast) var(--cs-ease);
}

.cs-qty__btn:hover {
	background: var(--cs-sand);
	color: var(--cs-brand);
}

.cs-qty__btn[disabled] {
	color: var(--cs-ink-4);
	cursor: not-allowed;
}

.cs-qty__input,
.cs-qty input.qty {
	width: 52px;
	min-height: 48px;
	padding: 0;
	border: 0;
	border-inline: 1px solid var(--cs-line);
	border-radius: 0;
	text-align: center;
	font-weight: 600;
	box-shadow: none;
	background: transparent;
	/* Native spinners duplicate our buttons. */
	appearance: textfield;
	-moz-appearance: textfield;
}

.cs-qty__input::-webkit-outer-spin-button,
.cs-qty__input::-webkit-inner-spin-button,
.cs-qty input.qty::-webkit-outer-spin-button,
.cs-qty input.qty::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.cs-qty__input:focus {
	box-shadow: none;
	border-color: var(--cs-line);
}

.cs-qty:focus-within {
	border-color: var(--cs-brand);
	box-shadow: 0 0 0 3px rgba(var(--cs-brand-rgb), 0.14);
}

/* Search form */
.cs-searchform {
	display: flex;
	gap: var(--cs-2);
	align-items: stretch;
}

.cs-searchform__field {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.cs-searchform__icon {
	position: absolute;
	inset-inline-start: var(--cs-4);
	inset-block-start: 50%;
	transform: translateY(-50%);
	color: var(--cs-ink-3);
	pointer-events: none;
}

.cs-searchform input[type="search"] {
	padding-inline-start: var(--cs-9);
}

/* =========================================================================
 * 08 — Badges & chips
 * ====================================================================== */

.cs-badges {
	position: absolute;
	inset-block-start: var(--cs-3);
	inset-inline-start: var(--cs-3);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--cs-1);
	pointer-events: none;
}

.cs-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px var(--cs-2);
	border-radius: var(--cs-radius-xs);
	background: var(--cs-ink);
	color: var(--cs-surface);
	font-size: var(--cs-text-2xs);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.01em;
}

.cs-badge--sale {
	background: var(--cs-sale);
}

.cs-badge--new {
	background: var(--cs-sage);
}

.cs-badge--featured {
	background: var(--cs-gold);
	color: var(--cs-clay);
}

.cs-badge--oos {
	background: var(--cs-ink-3);
}

.cs-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--cs-1);
	padding: 6px var(--cs-3);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-pill);
	background: var(--cs-surface);
	color: var(--cs-ink-2);
	font-size: var(--cs-text-xs);
	font-weight: 600;
	line-height: 1.6;
}

.cs-chip svg {
	color: var(--cs-brand);
}

.cs-chip--button {
	cursor: pointer;
	min-height: 40px;
	transition: border-color var(--cs-dur-fast) var(--cs-ease),
		background-color var(--cs-dur-fast) var(--cs-ease);
}

.cs-chip--button:hover {
	border-color: var(--cs-brand);
}

.cs-chip--button[aria-pressed="true"],
.cs-chip--button.is-active {
	background: var(--cs-ink);
	border-color: var(--cs-ink);
	color: var(--cs-surface);
}

.cs-chip--button[aria-pressed="true"] svg,
.cs-chip--button.is-active svg {
	color: currentColor;
}

/* Status pill (order status, stock status). Tone classes carry an icon in markup. */
.cs-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--cs-1);
	padding: 4px var(--cs-3);
	border-radius: var(--cs-radius-pill);
	font-size: var(--cs-text-xs);
	font-weight: 600;
	line-height: 1.7;
	background: var(--cs-sand);
	color: var(--cs-ink-2);
}

.cs-pill--success {
	background: rgba(47, 122, 85, 0.1);
	color: var(--cs-success);
}

.cs-pill--info {
	background: rgba(var(--cs-brand-rgb), 0.1);
	color: var(--cs-brand);
}

.cs-pill--warn {
	background: rgba(138, 100, 16, 0.12);
	color: var(--cs-warn);
}

.cs-pill--danger {
	background: rgba(179, 38, 30, 0.1);
	color: var(--cs-danger);
}

.cs-pill--muted {
	background: var(--cs-sand-deep);
	color: var(--cs-ink-3);
}

/* Star rating. A clipped overlay of filled stars sits on the outline row, which
   renders fractional averages accurately at any font size. */
.cs-rating {
	display: inline-flex;
	align-items: center;
	gap: var(--cs-2);
	font-size: var(--cs-text-xs);
	color: var(--cs-ink-3);
}

.cs-rating__stars {
	position: relative;
	display: inline-flex;
	color: var(--cs-line);
}

.cs-rating__fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	display: inline-flex;
	overflow: hidden;
	color: var(--cs-gold);
}

.cs-rating__star--on {
	fill: currentColor;
}

.cs-rating__count {
	font-weight: 600;
	color: var(--cs-ink-2);
}

/* =========================================================================
 * 09 — Notices & toasts
 * ====================================================================== */

.cs-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--cs-3);
	padding: var(--cs-4) var(--cs-5);
	border-radius: var(--cs-radius-sm);
	border-inline-start: 3px solid var(--cs-brand);
	background: var(--cs-brand-tint);
	color: var(--cs-ink-2);
	font-size: var(--cs-text-base);
	line-height: 1.75;
}

.cs-notice a {
	font-weight: 600;
}

.cs-notice--success {
	border-inline-start-color: var(--cs-success);
	background: rgba(47, 122, 85, 0.08);
}

.cs-notice--error {
	border-inline-start-color: var(--cs-danger);
	background: rgba(179, 38, 30, 0.07);
}

.cs-notice--warn {
	border-inline-start-color: var(--cs-warn);
	background: rgba(138, 100, 16, 0.09);
}

.cs-notice--info {
	border-inline-start-color: var(--cs-ink-4);
	background: var(--cs-sand);
}

.cs-notice__icon {
	flex: none;
	margin-top: 3px;
}

.cs-notice__body {
	flex: 1 1 auto;
	min-width: 0;
}

/* Toast region. aria-live="polite" in markup so it announces without stealing focus. */
.cs-toasts {
	position: fixed;
	inset-block-end: calc(var(--cs-5) + var(--cs-bottom-nav-h, 0px));
	inset-inline-start: 50%;
	transform: translateX(50%);
	z-index: var(--cs-z-toast);
	display: flex;
	flex-direction: column;
	gap: var(--cs-2);
	width: min(420px, calc(100vw - var(--cs-6)));
	pointer-events: none;
}

[dir="ltr"] .cs-toasts {
	transform: translateX(-50%);
}

@media (min-width: 768px) {
	.cs-toasts {
		inset-inline-start: auto;
		inset-inline-end: var(--cs-6);
		inset-block-end: var(--cs-6);
		transform: none;
	}

	[dir="ltr"] .cs-toasts {
		transform: none;
	}
}

.cs-toast {
	display: flex;
	align-items: center;
	gap: var(--cs-3);
	padding: var(--cs-3) var(--cs-4);
	border-radius: var(--cs-radius-sm);
	background: var(--cs-clay);
	color: #f8f3ee;
	font-size: var(--cs-text-sm);
	font-weight: 500;
	box-shadow: var(--cs-shadow-lg);
	pointer-events: auto;
	animation: cs-toast-in var(--cs-dur-slow) var(--cs-ease-out) both;
}

.cs-toast.is-leaving {
	/* Exit is faster than entry so dismissal feels immediate. */
	animation: cs-toast-out var(--cs-dur) var(--cs-ease) both;
}

.cs-toast--success svg {
	color: #7fd1a6;
}

.cs-toast--error svg {
	color: #ff9d96;
}

.cs-toast__link {
	margin-inline-start: auto;
	color: var(--cs-gold);
	font-weight: 700;
	white-space: nowrap;
}

@keyframes cs-toast-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes cs-toast-out {
	to {
		opacity: 0;
		transform: translateY(8px);
	}
}

/* =========================================================================
 * 10 — Dialogs & drawers
 * ====================================================================== */

.cs-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--cs-z-overlay);
	/* Strong enough to isolate the foreground; blur signals "background dismisses". */
	background: rgba(28, 23, 20, 0.5);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity var(--cs-dur) var(--cs-ease);
}

.cs-overlay.is-open {
	opacity: 1;
}

.cs-drawer {
	position: fixed;
	z-index: var(--cs-z-drawer);
	display: flex;
	flex-direction: column;
	background: var(--cs-surface);
	box-shadow: var(--cs-shadow-lg);
	transition: transform var(--cs-dur-slow) var(--cs-ease-out);
	/* Drawer content scrolls, the page behind does not. */
	overscroll-behavior: contain;
}

/* Side drawers slide in from the inline-end edge (right in RTL, left in LTR)
   because that is where the cart/account controls live in the header. */
.cs-drawer--side {
	inset-block: 0;
	inset-inline-end: 0;
	width: min(420px, 92vw);
	transform: translateX(calc(100% * var(--cs-flip, 1) * -1));
}

.cs-drawer--start {
	inset-inline-end: auto;
	inset-inline-start: 0;
	transform: translateX(calc(100% * var(--cs-flip, 1)));
}

.cs-drawer--top {
	inset-inline: 0;
	inset-block-start: 0;
	max-height: 86vh;
	transform: translateY(-100%);
}

.cs-drawer--bottom {
	inset-inline: 0;
	inset-block-end: 0;
	max-height: 88vh;
	border-start-start-radius: var(--cs-radius-lg);
	border-start-end-radius: var(--cs-radius-lg);
	transform: translateY(100%);
}

.cs-drawer.is-open {
	transform: none;
}

.cs-drawer__head {
	display: flex;
	align-items: center;
	gap: var(--cs-3);
	padding: var(--cs-4) var(--cs-5);
	border-block-end: 1px solid var(--cs-line);
	flex: none;
}

.cs-drawer__title {
	font-size: var(--cs-text-lg);
	font-weight: 600;
	margin-inline-end: auto;
}

.cs-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: var(--cs-5);
	-webkit-overflow-scrolling: touch;
}

.cs-drawer__foot {
	flex: none;
	padding: var(--cs-5);
	border-block-start: 1px solid var(--cs-line);
	background: var(--cs-surface);
	/* Keeps the primary action clear of the iOS home indicator. */
	padding-block-end: max(var(--cs-5), env(safe-area-inset-bottom));
}

/* Grab handle on bottom sheets, hinting the swipe-to-dismiss affordance. */
.cs-drawer--bottom .cs-drawer__head::before {
	content: "";
	position: absolute;
	inset-block-start: var(--cs-2);
	inset-inline: 0;
	margin-inline: auto;
	width: 40px;
	height: 4px;
	border-radius: var(--cs-radius-pill);
	background: var(--cs-line);
}

.cs-drawer--bottom .cs-drawer__head {
	position: relative;
	padding-block-start: var(--cs-5);
}

/* Centred modal, used by quick view. */
.cs-modal {
	position: fixed;
	inset: 0;
	z-index: var(--cs-z-drawer);
	display: grid;
	place-items: center;
	padding: var(--cs-4);
	pointer-events: none;
}

.cs-modal__panel {
	position: relative;
	width: min(920px, 100%);
	max-height: min(90vh, 900px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--cs-surface);
	border-radius: var(--cs-radius-lg);
	box-shadow: var(--cs-shadow-lg);
	pointer-events: auto;
	opacity: 0;
	/* Scales up from the trigger's direction for spatial continuity. */
	transform: scale(0.96) translateY(8px);
	transition: opacity var(--cs-dur) var(--cs-ease-out),
		transform var(--cs-dur) var(--cs-ease-out);
}

.cs-modal.is-open .cs-modal__panel {
	opacity: 1;
	transform: none;
}

.cs-modal__close {
	position: absolute;
	inset-block-start: var(--cs-3);
	inset-inline-end: var(--cs-3);
	z-index: 3;
	background: var(--cs-surface);
	box-shadow: var(--cs-shadow-sm);
}

@media (max-width: 767px) {
	/* On phones a full-height sheet beats a cramped centred dialog. */
	.cs-modal {
		padding: 0;
		align-items: flex-end;
	}

	.cs-modal__panel {
		max-height: 92vh;
		border-start-start-radius: var(--cs-radius-lg);
		border-start-end-radius: var(--cs-radius-lg);
		border-end-start-radius: 0;
		border-end-end-radius: 0;
	}
}

/* =========================================================================
 * 11 — Loading & empty states
 * ====================================================================== */

.cs-skeleton {
	position: relative;
	overflow: hidden;
	background: var(--cs-sand);
	border-radius: var(--cs-radius-sm);
}

.cs-skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.65),
		transparent
	);
	animation: cs-shimmer 1.3s infinite;
}

@keyframes cs-shimmer {
	to {
		transform: translateX(100%);
	}
}

.cs-skeleton--text {
	height: 0.85em;
	margin-block: 0.35em;
}

.cs-skeleton--media {
	aspect-ratio: 4 / 5;
	border-radius: var(--cs-radius-md);
}

/* Applied to a results container while an AJAX request is in flight. Content stays
   visible (no flash of empty) but is clearly inert. */
.cs-is-loading {
	position: relative;
	opacity: 0.45;
	pointer-events: none;
	transition: opacity var(--cs-dur) var(--cs-ease);
}

.cs-is-loading::after {
	content: "";
	position: absolute;
	inset-block-start: var(--cs-8);
	inset-inline-start: 50%;
	width: 28px;
	height: 28px;
	margin-inline-start: -14px;
	border: 2px solid var(--cs-brand);
	border-top-color: transparent;
	border-radius: 50%;
	animation: cs-spin 720ms linear infinite;
}

.cs-empty {
	display: grid;
	justify-items: center;
	gap: var(--cs-3);
	padding: var(--cs-10) var(--cs-5);
	text-align: center;
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-lg);
}

.cs-empty__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--cs-sand);
	color: var(--cs-brand);
	margin-bottom: var(--cs-2);
}

.cs-empty__title {
	font-size: var(--cs-h4);
}

.cs-empty__text {
	max-width: 46ch;
	color: var(--cs-ink-3);
	font-size: var(--cs-text-base);
}

.cs-empty .cs-btn {
	margin-top: var(--cs-3);
}

/* =========================================================================
 * 12 — Header
 * ====================================================================== */

.cs-announcement {
	position: relative;
	background: var(--cs-clay);
	color: #f0e7dd;
	font-size: var(--cs-text-xs);
}

.cs-announcement__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cs-4);
	min-height: 40px;
	padding-block: var(--cs-2);
	text-align: center;
}

.cs-announcement__text {
	margin: 0;
	line-height: 1.6;
}

.cs-announcement a {
	color: var(--cs-gold);
	font-weight: 600;
	text-decoration: underline;
}

.cs-announcement__phone {
	display: none;
	align-items: center;
	gap: var(--cs-1);
	margin-inline-start: auto;
	color: #f0e7dd;
	font-weight: 600;
	direction: ltr;
}

.cs-announcement__close {
	position: absolute;
	inset-inline-end: var(--cs-2);
	inset-block-start: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	color: #cbbcae;
}

.cs-announcement__close:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

@media (min-width: 900px) {
	.cs-announcement__inner {
		justify-content: space-between;
	}

	.cs-announcement__phone {
		display: inline-flex;
	}

	.cs-announcement__text {
		margin-inline: auto;
	}
}

.cs-header {
	position: relative;
	z-index: var(--cs-z-header);
	background: var(--cs-bg);
	border-block-end: 1px solid transparent;
	transition: box-shadow var(--cs-dur) var(--cs-ease),
		border-color var(--cs-dur) var(--cs-ease),
		background-color var(--cs-dur) var(--cs-ease);
}

.cs-has-sticky-header .cs-header {
	position: sticky;
	inset-block-start: 0;
}

.cs-header.is-stuck {
	background: rgba(250, 247, 244, 0.94);
	backdrop-filter: saturate(150%) blur(8px);
	border-block-end-color: var(--cs-line);
	box-shadow: var(--cs-shadow-sm);
}

.cs-header__bar {
	display: flex;
	align-items: center;
	gap: var(--cs-3);
	min-height: 68px;
	padding-block: var(--cs-3);
}

@media (min-width: 1024px) {
	.cs-header__bar {
		min-height: 84px;
		gap: var(--cs-6);
	}
}

/* Brand */
.cs-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--cs-2);
	flex: none;
	color: var(--cs-ink);
	font-family: var(--cs-font-heading);
	font-size: var(--cs-text-xl);
	font-weight: 700;
	line-height: 1.2;
}

.cs-brand:hover {
	color: var(--cs-ink);
}

.cs-brand__mark {
	color: var(--cs-brand);
}

.cs-brand img {
	max-height: 46px;
	width: auto;
}

.cs-brand__tagline {
	display: none;
	font-family: var(--cs-font-sans);
	font-size: var(--cs-text-2xs);
	font-weight: 500;
	color: var(--cs-ink-3);
}

@media (min-width: 1200px) {
	.cs-brand__tagline {
		display: block;
	}
}

/* Header actions cluster */
.cs-header__actions {
	display: flex;
	align-items: center;
	gap: var(--cs-1);
	margin-inline-start: auto;
	flex: none;
}

@media (min-width: 640px) {
	.cs-header__actions {
		gap: var(--cs-2);
	}
}

.cs-header__action {
	position: relative;
}

/* Count bubble on the cart/wishlist buttons. */
.cs-count {
	position: absolute;
	inset-block-start: 4px;
	inset-inline-end: 4px;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	border-radius: var(--cs-radius-pill);
	background: var(--cs-brand);
	color: var(--cs-on-brand);
	font-size: 10px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.cs-count:empty,
.cs-cart-count:not(.is-filled) {
	display: none;
}

/* The inline (non-drawer) desktop search field. */
.cs-header__search {
	display: none;
	flex: 1 1 auto;
	max-width: 440px;
}

@media (min-width: 1100px) {
	.cs-header__search {
		display: block;
	}

	/* When the inline field is visible the icon-only search button is redundant. */
	.cs-header__action--search {
		display: none;
	}
}

/* =========================================================================
 * 13 — Navigation
 * ====================================================================== */

.cs-nav {
	display: none;
}

@media (min-width: 1024px) {
	.cs-nav {
		display: block;
		border-block-start: 1px solid var(--cs-line-soft);
	}

	.cs-header.is-stuck .cs-nav {
		border-block-start-color: transparent;
	}
}

.cs-nav__list {
	display: flex;
	align-items: center;
	gap: var(--cs-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-nav__item {
	position: relative;
}

.cs-nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--cs-1);
	padding: var(--cs-3) var(--cs-3);
	min-height: 48px;
	color: var(--cs-ink-2);
	font-size: var(--cs-text-base);
	font-weight: 600;
}

.cs-nav__link:hover {
	color: var(--cs-brand);
}

/* Current page indicator: an underline rather than colour alone. */
.cs-nav__item.current-menu-item > .cs-nav__link,
.cs-nav__item.current-menu-ancestor > .cs-nav__link,
.cs-nav__item.current-product-ancestor > .cs-nav__link {
	color: var(--cs-ink);
}

.cs-nav__item.current-menu-item > .cs-nav__link::after,
.cs-nav__item.current-menu-ancestor > .cs-nav__link::after {
	content: "";
	position: absolute;
	inset-block-end: 6px;
	inset-inline: var(--cs-3);
	height: 2px;
	border-radius: var(--cs-radius-pill);
	background: var(--cs-brand);
}

/* Disclosure button rendered by the nav walker. Hidden from pointer users on
   desktop (hover opens the panel) but always reachable by keyboard. */
.cs-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-inline-start: -6px;
	color: var(--cs-ink-3);
	border-radius: var(--cs-radius-xs);
	transition: transform var(--cs-dur-fast) var(--cs-ease);
}

.cs-nav__toggle[aria-expanded="true"] {
	transform: rotate(180deg);
}

/* Submenu / dropdown */
.cs-submenu {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	z-index: 5;
	min-width: 230px;
	margin: 0;
	padding: var(--cs-3);
	list-style: none;
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-md);
	box-shadow: var(--cs-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--cs-dur-fast) var(--cs-ease),
		transform var(--cs-dur-fast) var(--cs-ease), visibility var(--cs-dur-fast);
}

.cs-nav__item:hover > .cs-submenu,
.cs-nav__item:focus-within > .cs-submenu,
.cs-nav__item.is-open > .cs-submenu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.cs-submenu .cs-nav__link {
	display: flex;
	width: 100%;
	min-height: 44px;
	padding: var(--cs-2) var(--cs-3);
	border-radius: var(--cs-radius-xs);
	font-weight: 500;
}

.cs-submenu .cs-nav__link:hover {
	background: var(--cs-sand);
}

/* Nested (third level) opens to the inline side. */
.cs-submenu .cs-submenu {
	inset-block-start: calc(var(--cs-2) * -1);
	inset-inline-start: 100%;
}

/* Mega menu: full-width panel with the children laid out in columns. */
.cs-submenu--mega {
	position: fixed;
	inset-inline: 0;
	inset-block-start: auto;
	width: 100%;
	max-width: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--cs-4) var(--cs-7);
	padding: var(--cs-8) max(var(--cs-gutter), calc((100vw - var(--cs-container)) / 2 + var(--cs-gutter)));
	border-inline: 0;
	border-radius: 0;
	border-block-start: 1px solid var(--cs-line);
}

.cs-submenu--mega > .cs-nav__item > .cs-nav__link {
	padding-inline: 0;
	font-family: var(--cs-font-heading);
	font-size: var(--cs-text-base);
	font-weight: 700;
	color: var(--cs-ink);
}

.cs-submenu--mega > .cs-nav__item > .cs-nav__link:hover {
	background: transparent;
	color: var(--cs-brand);
}

/* Third level inside a mega menu becomes a plain stacked list, not a flyout. */
.cs-submenu--mega .cs-submenu {
	position: static;
	display: block;
	opacity: 1;
	visibility: visible;
	transform: none;
	min-width: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
}

.cs-submenu--mega .cs-submenu .cs-nav__link {
	padding-inline: 0;
	color: var(--cs-ink-3);
	font-size: var(--cs-text-sm);
	min-height: 36px;
}

.cs-submenu--mega .cs-submenu .cs-nav__link:hover {
	background: transparent;
	color: var(--cs-brand);
}

.cs-submenu--mega .cs-nav__toggle {
	display: none;
}

/* Mobile navigation drawer */
.cs-mobile-nav__list,
.cs-mobile-nav__list .cs-submenu {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	border: 0;
	box-shadow: none;
	background: transparent;
	min-width: 0;
}

.cs-mobile-nav .cs-nav__item {
	border-block-end: 1px solid var(--cs-line-soft);
}

.cs-mobile-nav .cs-nav__item--depth-1,
.cs-mobile-nav .cs-nav__item--depth-2 {
	border-block-end: 0;
}

.cs-mobile-nav .cs-nav__link {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 52px;
	padding: var(--cs-3) 0;
	font-size: var(--cs-text-md);
}

.cs-mobile-nav .cs-nav__item--has-children {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
}

.cs-mobile-nav .cs-nav__toggle {
	width: 44px;
	height: 44px;
	margin: 0;
	color: var(--cs-ink-2);
}

/* Accordion: children span both grid columns and collapse by default. */
.cs-mobile-nav .cs-submenu {
	grid-column: 1 / -1;
	display: none;
	padding-inline-start: var(--cs-4);
	padding-block-end: var(--cs-3);
	border-inline-start: 1px solid var(--cs-line);
	margin-inline-start: var(--cs-1);
}

.cs-mobile-nav .cs-nav__item.is-open > .cs-submenu {
	display: block;
}

.cs-mobile-nav .cs-submenu .cs-nav__link {
	min-height: 44px;
	font-size: var(--cs-text-base);
	color: var(--cs-ink-2);
}

/* Mobile bottom navigation */
.cs-bottom-nav {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: var(--cs-z-bottom-nav);
	display: grid;
	grid-template-columns: repeat(var(--cs-bottom-nav-cols, 4), 1fr);
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(10px);
	border-block-start: 1px solid var(--cs-line);
	padding-block-end: env(safe-area-inset-bottom);
}

@media (min-width: 1024px) {
	.cs-bottom-nav {
		display: none;
	}
}

.cs-bottom-nav__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 58px;
	padding-block: var(--cs-1);
	color: var(--cs-ink-3);
	font-size: 10px;
	font-weight: 600;
}

.cs-bottom-nav__item.is-active,
.cs-bottom-nav__item[aria-current="page"] {
	color: var(--cs-brand);
}

.cs-bottom-nav__item .cs-count {
	inset-block-start: 4px;
	inset-inline-end: 50%;
	margin-inline-end: -22px;
}

/* Reserve space so fixed bars never cover the end of the page. */
.cs-has-bottom-nav {
	--cs-bottom-nav-h: 58px;
}

@media (max-width: 1023px) {
	.cs-has-bottom-nav .cs-footer {
		padding-block-end: calc(var(--cs-8) + var(--cs-bottom-nav-h));
	}
}

@media (min-width: 1024px) {
	.cs-has-bottom-nav {
		--cs-bottom-nav-h: 0px;
	}
}

/* Live search results panel (shared by the drawer and the inline field). */
.cs-suggest {
	margin-top: var(--cs-4);
}

.cs-suggest__group + .cs-suggest__group {
	margin-top: var(--cs-5);
	padding-top: var(--cs-4);
	border-block-start: 1px solid var(--cs-line-soft);
}

.cs-suggest__label {
	margin-bottom: var(--cs-2);
	font-size: var(--cs-text-xs);
	font-weight: 700;
	color: var(--cs-ink-3);
}

.cs-suggest__list {
	display: grid;
	gap: var(--cs-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cs-suggest__link {
	display: flex;
	align-items: center;
	gap: var(--cs-3);
	padding: var(--cs-2);
	border-radius: var(--cs-radius-sm);
	color: var(--cs-ink);
	min-height: 56px;
}

.cs-suggest__link:hover,
.cs-suggest__link:focus-visible {
	background: var(--cs-sand);
}

.cs-suggest__thumb {
	flex: none;
	width: 48px;
	height: 60px;
	border-radius: var(--cs-radius-xs);
	object-fit: cover;
	background: var(--cs-sand);
}

.cs-suggest__name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--cs-text-base);
	font-weight: 500;
	/* Wrap rather than truncate where there is room for two lines. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cs-suggest__price {
	flex: none;
	font-size: var(--cs-text-sm);
	font-weight: 700;
	color: var(--cs-brand);
}

.cs-suggest__more {
	display: inline-flex;
	margin-top: var(--cs-4);
	font-weight: 700;
}

/* =========================================================================
 * 14 — Breadcrumb, page hero, pagination
 * ====================================================================== */

.cs-breadcrumb {
	padding-block: var(--cs-4);
	font-size: var(--cs-text-xs);
	color: var(--cs-ink-3);
}

.cs-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cs-1) var(--cs-2);
}

.cs-breadcrumb a {
	color: var(--cs-ink-3);
}

.cs-breadcrumb a:hover {
	color: var(--cs-brand);
}

/* Separator drawn with a pseudo-element so it mirrors automatically. */
.cs-breadcrumb__item + .cs-breadcrumb__item::before,
.cs-breadcrumb__list > a + *::before,
.cs-breadcrumb__list > span + span::before {
	content: "/";
	margin-inline-end: var(--cs-2);
	color: var(--cs-line);
}

.cs-breadcrumb__item--current {
	color: var(--cs-ink);
	font-weight: 600;
}

.cs-page-hero {
	padding-block: var(--cs-7) var(--cs-6);
}

.cs-page-hero--center {
	text-align: center;
}

.cs-page-hero__title {
	font-size: var(--cs-h1);
}

.cs-page-hero__subtitle {
	max-width: 60ch;
	margin-top: var(--cs-3);
	color: var(--cs-ink-3);
	font-size: var(--cs-text-lg);
	line-height: 1.8;
}

.cs-page-hero--center .cs-page-hero__subtitle {
	margin-inline: auto;
}

.cs-pagination {
	margin-top: var(--cs-9);
}

.cs-pagination__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--cs-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-pagination__list .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: var(--cs-2);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-sm);
	background: var(--cs-surface);
	color: var(--cs-ink-2);
	font-size: var(--cs-text-base);
	font-weight: 600;
	transition: border-color var(--cs-dur-fast) var(--cs-ease),
		background-color var(--cs-dur-fast) var(--cs-ease),
		color var(--cs-dur-fast) var(--cs-ease);
}

.cs-pagination__list .page-numbers:hover {
	border-color: var(--cs-brand);
	color: var(--cs-brand);
}

.cs-pagination__list .page-numbers.current {
	background: var(--cs-ink);
	border-color: var(--cs-ink);
	color: var(--cs-surface);
}

.cs-pagination__list .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	min-width: 24px;
}

/* =========================================================================
 * 15 — Footer
 * ====================================================================== */

.cs-footer {
	margin-top: var(--cs-section);
	background: var(--cs-clay);
	color: #cdbfb2;
	font-size: var(--cs-text-base);
}

.cs-footer a {
	color: #cdbfb2;
}

.cs-footer a:hover {
	color: #fff;
}

.cs-footer__top {
	display: grid;
	gap: var(--cs-8);
	padding-block: var(--cs-10) var(--cs-9);
}

@media (min-width: 700px) {
	.cs-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	/*
	 * The brand column is wider than the rest; --cs-footer-cols is set by footer.php to
	 * the number of columns that actually rendered, so an unconfigured footer does not
	 * leave a dead gap where the link menus would be.
	 */
	.cs-footer__top {
		grid-template-columns: 1.6fr repeat(calc(var(--cs-footer-cols, 4) - 1), minmax(0, 1fr));
		gap: var(--cs-9);
	}

	/* With only the brand and one other column, let the brand keep its measure and push
	   the second column to the far edge rather than stretching it across the width. */
	.cs-footer__top:not([style*="--cs-footer-cols:1"]) {
		align-items: start;
	}
}

.cs-footer__brand .cs-brand {
	color: #fff;
}

.cs-footer__brand .cs-brand:hover {
	color: #fff;
}

.cs-footer__brand .cs-brand__mark {
	color: var(--cs-gold);
}

.cs-footer__about {
	margin-top: var(--cs-4);
	max-width: 42ch;
	line-height: 1.85;
	color: #b6a798;
}

.cs-footer__col-title {
	margin-bottom: var(--cs-4);
	color: #fff;
	font-size: var(--cs-text-base);
	font-weight: 700;
}

.cs-footer__list {
	display: grid;
	gap: var(--cs-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cs-footer__list a,
.cs-footer__list .cs-nav__link {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	font-size: var(--cs-text-base);
	font-weight: 400;
	padding: 0;
}

/* The nav walker adds dropdown chrome we do not want in the footer. */
.cs-footer__list .cs-nav__toggle,
.cs-footer__list .cs-submenu {
	display: none;
}

.cs-footer__contact {
	display: grid;
	gap: var(--cs-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cs-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: var(--cs-2);
	line-height: 1.8;
}

.cs-footer__contact svg {
	flex: none;
	margin-top: 5px;
	color: var(--cs-gold);
}

.cs-footer__contact .cs-ltr {
	direction: ltr;
	text-align: start;
	unicode-bidi: isolate;
}

.cs-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cs-2);
	margin: var(--cs-5) 0 0;
	padding: 0;
	list-style: none;
}

.cs-social__link {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--cs-radius-sm);
	color: #cdbfb2;
	transition: border-color var(--cs-dur-fast) var(--cs-ease),
		background-color var(--cs-dur-fast) var(--cs-ease),
		color var(--cs-dur-fast) var(--cs-ease);
}

.cs-social__link:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--cs-gold);
	color: #fff;
}

/* Trust / payment strip */
.cs-trust-strip {
	display: grid;
	gap: var(--cs-4);
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	padding-block: var(--cs-7);
	border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}

.cs-trust-strip__item {
	display: flex;
	align-items: center;
	gap: var(--cs-3);
	font-size: var(--cs-text-sm);
	line-height: 1.7;
}

.cs-trust-strip__item svg {
	flex: none;
	color: var(--cs-gold);
}

.cs-trust-strip__item strong {
	display: block;
	color: #fff;
	font-weight: 700;
}

.cs-trust-strip__item span {
	color: #a49485;
}

.cs-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cs-3) var(--cs-5);
	padding-block: var(--cs-5);
	border-block-start: 1px solid rgba(255, 255, 255, 0.1);
	font-size: var(--cs-text-xs);
	color: #9c8d7f;
}

.cs-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cs-1) var(--cs-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cs-footer__legal .cs-nav__toggle,
.cs-footer__legal .cs-submenu {
	display: none;
}

/* Newsletter band */
.cs-newsletter {
	background: var(--cs-sand);
}

.cs-newsletter__inner {
	display: grid;
	gap: var(--cs-6);
	align-items: center;
	padding-block: var(--cs-section-sm);
}

@media (min-width: 900px) {
	.cs-newsletter__inner {
		grid-template-columns: 1fr minmax(320px, 460px);
		gap: var(--cs-10);
	}
}

.cs-newsletter__title {
	font-size: var(--cs-h2);
}

.cs-newsletter__text {
	margin-top: var(--cs-3);
	max-width: 52ch;
	color: var(--cs-ink-2);
	line-height: 1.85;
}

.cs-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cs-2);
}

.cs-newsletter__form .cs-field {
	flex: 1 1 220px;
}

.cs-newsletter__note {
	margin-top: var(--cs-3);
	font-size: var(--cs-text-xs);
	color: var(--cs-ink-3);
}

/* =========================================================================
 * 16 — Blog
 * ====================================================================== */

/*
 * One link per card — the post title — whose ::after covers the whole card. See the
 * product card in woocommerce.css for the same pattern and the reasoning behind it.
 */
.cs-post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--cs-4);
	background: transparent;
}

.cs-post-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--cs-radius-md);
}

.cs-post-card__link:focus-visible {
	outline: none;
}

.cs-post-card:has(.cs-post-card__link:focus-visible) {
	outline: 2px solid var(--cs-brand);
	outline-offset: 4px;
	border-radius: var(--cs-radius-md);
}

/* Category and author links in the meta row stay clickable above the overlay. */
.cs-post-card .cs-entry-meta {
	position: relative;
	z-index: 2;
}

.cs-post-card__media {
	overflow: hidden;
	background: var(--cs-sand);
}

.cs-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--cs-dur-slow) var(--cs-ease);
}

.cs-post-card:hover .cs-post-card__media img {
	transform: scale(1.04);
}

.cs-post-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--cs-2);
}

.cs-post-card__title {
	font-size: var(--cs-h4);
	line-height: 1.5;
}

.cs-post-card__title a {
	color: var(--cs-ink);
}

.cs-post-card__title a:hover {
	color: var(--cs-brand);
}

.cs-post-card__excerpt {
	color: var(--cs-ink-3);
	font-size: var(--cs-text-base);
	line-height: 1.85;
}

.cs-entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cs-1) var(--cs-4);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--cs-text-xs);
	color: var(--cs-ink-3);
}

.cs-entry-meta__item {
	display: inline-flex;
	align-items: center;
	gap: var(--cs-1);
}

.cs-entry-meta__item a {
	color: inherit;
}

.cs-entry-meta__item a:hover {
	color: var(--cs-brand);
}

.cs-entry-meta__item--cat a {
	color: var(--cs-brand);
	font-weight: 700;
}

/* Single post */
.cs-single__header {
	max-width: 780px;
	margin-inline: auto;
	padding-block: var(--cs-8) var(--cs-6);
	text-align: center;
}

.cs-single__title {
	font-size: var(--cs-h1);
	margin-block: var(--cs-4);
}

.cs-single__header .cs-entry-meta {
	justify-content: center;
}

.cs-single__media {
	margin-block: var(--cs-6) var(--cs-9);
	border-radius: var(--cs-radius-lg);
	overflow: hidden;
	background: var(--cs-sand);
}

.cs-single__media img {
	width: 100%;
	object-fit: cover;
}

.cs-single__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cs-4);
	margin-top: var(--cs-8);
	padding-top: var(--cs-6);
	border-block-start: 1px solid var(--cs-line);
}

.cs-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cs-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cs-tags a {
	display: inline-flex;
	padding: 4px var(--cs-3);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-pill);
	color: var(--cs-ink-2);
	font-size: var(--cs-text-xs);
	font-weight: 600;
}

.cs-tags a:hover {
	border-color: var(--cs-brand);
	color: var(--cs-brand);
}

.cs-share {
	display: flex;
	align-items: center;
	gap: var(--cs-3);
}

.cs-share__label {
	font-size: var(--cs-text-sm);
	font-weight: 600;
	color: var(--cs-ink-3);
}

.cs-share__list {
	display: flex;
	gap: var(--cs-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cs-share__link {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-sm);
	color: var(--cs-ink-2);
	cursor: pointer;
	transition: border-color var(--cs-dur-fast) var(--cs-ease),
		color var(--cs-dur-fast) var(--cs-ease);
}

.cs-share__link:hover {
	border-color: var(--cs-brand);
	color: var(--cs-brand);
}

.cs-author-box {
	display: flex;
	gap: var(--cs-4);
	margin-top: var(--cs-9);
	padding: var(--cs-6);
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-lg);
}

.cs-author-box img {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
}

.cs-author-box__name {
	font-size: var(--cs-text-lg);
}

.cs-author-box__bio {
	margin-top: var(--cs-2);
	color: var(--cs-ink-3);
	font-size: var(--cs-text-base);
	line-height: 1.85;
}

/* Post navigation */
.cs-post-nav {
	display: grid;
	gap: var(--cs-4);
	margin-top: var(--cs-9);
}

@media (min-width: 640px) {
	.cs-post-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cs-post-nav__link {
	display: flex;
	align-items: center;
	gap: var(--cs-3);
	padding: var(--cs-5);
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-md);
	color: var(--cs-ink);
}

.cs-post-nav__link:hover {
	border-color: var(--cs-brand);
}

.cs-post-nav__label {
	display: block;
	font-size: var(--cs-text-xs);
	color: var(--cs-ink-3);
	margin-bottom: 2px;
}

.cs-post-nav__title {
	font-weight: 600;
	line-height: 1.6;
}

.cs-post-nav__link--next {
	text-align: end;
	justify-content: flex-end;
}

/* =========================================================================
 * 17 — Widgets & sidebar
 * ====================================================================== */

.cs-sidebar {
	display: grid;
	gap: var(--cs-6);
}

.cs-widget {
	padding: var(--cs-5);
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-md);
}

.cs-widget__title {
	margin-bottom: var(--cs-4);
	padding-bottom: var(--cs-3);
	border-block-end: 1px solid var(--cs-line-soft);
	font-size: var(--cs-text-lg);
}

.cs-widget ul {
	display: grid;
	gap: var(--cs-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cs-widget li a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	color: var(--cs-ink-2);
	font-size: var(--cs-text-base);
}

.cs-widget li a:hover {
	color: var(--cs-brand);
}

.cs-widget ul ul {
	padding-inline-start: var(--cs-4);
	border-inline-start: 1px solid var(--cs-line);
	margin-inline-start: var(--cs-2);
}

.cs-widget select {
	width: 100%;
}

/* =========================================================================
 * 18 — Comments
 * ====================================================================== */

.cs-comments {
	margin-top: var(--cs-10);
}

.cs-comments__title {
	font-size: var(--cs-h3);
	margin-bottom: var(--cs-6);
}

.cs-comments__list {
	display: grid;
	gap: var(--cs-5);
	list-style: none;
	margin: 0 0 var(--cs-8);
	padding: 0;
}

.cs-comments__list .children {
	display: grid;
	gap: var(--cs-5);
	list-style: none;
	margin: var(--cs-5) 0 0;
	padding-inline-start: var(--cs-5);
	border-inline-start: 2px solid var(--cs-line);
}

.cs-comment__body {
	padding: var(--cs-5);
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-md);
}

.cs-comment__head {
	display: flex;
	align-items: center;
	gap: var(--cs-3);
	margin-bottom: var(--cs-3);
}

.cs-comment__avatar img,
.cs-avatar {
	border-radius: 50%;
}

/*
 * Locally drawn avatar (see inc/performance/avatars.php): a coloured badge carrying the
 * commenter's initial, so no request reaches Gravatar. Size and colour arrive as custom
 * properties from PHP.
 */
.cs-avatar--initial {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: var(--cs-avatar-size, 44px);
	height: var(--cs-avatar-size, 44px);
	border-radius: 50%;
	background: var(--cs-avatar-bg, var(--cs-sand));
	color: #fff;
	font-family: var(--cs-font-heading);
	font-size: calc(var(--cs-avatar-size, 44px) * 0.42);
	font-weight: 600;
	line-height: 1;
	/* The initial is a glyph, not text to be selected or read as content. */
	user-select: none;
}

.cs-comment__author {
	display: block;
	font-weight: 700;
}

.cs-comment__date {
	font-size: var(--cs-text-xs);
	color: var(--cs-ink-3);
}

.cs-comment__foot {
	margin-top: var(--cs-3);
}

.cs-comment__reply a {
	font-size: var(--cs-text-sm);
	font-weight: 600;
}

.comment-form {
	padding: var(--cs-6);
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-lg);
}

.comment-reply-title {
	font-size: var(--cs-h4);
	margin-bottom: var(--cs-5);
}

@media (min-width: 640px) {
	.comment-form {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--cs-4);
	}

	.comment-reply-title,
	.comment-form > p:not(.cs-field--half),
	.comment-form .form-submit,
	.comment-form .comment-notes,
	.comment-form .comment-form-cookies-consent {
		grid-column: 1 / -1;
	}
}

.comment-form .form-submit {
	margin: 0;
}

/* =========================================================================
 * 19 — Prose (post/page content)
 * ====================================================================== */

.cs-prose {
	max-width: 74ch;
	margin-inline: auto;
	font-size: var(--cs-text-md);
	line-height: var(--cs-leading-body);
	color: var(--cs-ink-2);
}

.cs-prose--wide {
	max-width: none;
}

.cs-prose > * + * {
	margin-top: var(--cs-5);
}

.cs-prose h2 {
	margin-top: var(--cs-9);
	font-size: var(--cs-h3);
	color: var(--cs-ink);
}

.cs-prose h3 {
	margin-top: var(--cs-8);
	font-size: var(--cs-h4);
	color: var(--cs-ink);
}

.cs-prose h4 {
	margin-top: var(--cs-7);
	font-size: var(--cs-h5);
	color: var(--cs-ink);
}

.cs-prose ul,
.cs-prose ol {
	padding-inline-start: var(--cs-6);
}

.cs-prose li + li {
	margin-top: var(--cs-2);
}

.cs-prose ul {
	list-style: disc;
}

.cs-prose ol {
	list-style: decimal;
}

.cs-prose a {
	text-decoration: underline;
	font-weight: 500;
}

.cs-prose strong {
	color: var(--cs-ink);
	font-weight: 700;
}

.cs-prose blockquote {
	padding: var(--cs-5) var(--cs-6);
	border-inline-start: 3px solid var(--cs-gold);
	background: var(--cs-sand);
	border-radius: var(--cs-radius-sm);
	font-size: var(--cs-text-lg);
	line-height: 1.8;
	color: var(--cs-ink);
}

.cs-prose blockquote cite {
	display: block;
	margin-top: var(--cs-3);
	font-size: var(--cs-text-sm);
	font-style: normal;
	color: var(--cs-ink-3);
}

.cs-prose img,
.cs-prose figure {
	border-radius: var(--cs-radius-md);
	overflow: hidden;
}

.cs-prose figcaption {
	margin-top: var(--cs-2);
	font-size: var(--cs-text-xs);
	color: var(--cs-ink-3);
	text-align: center;
}

.cs-prose code {
	padding: 2px 6px;
	border-radius: var(--cs-radius-xs);
	background: var(--cs-sand-deep);
	font-family: var(--cs-font-mono);
	font-size: 0.9em;
	direction: ltr;
	unicode-bidi: isolate;
}

.cs-prose pre {
	padding: var(--cs-5);
	border-radius: var(--cs-radius-md);
	background: var(--cs-clay);
	color: #eadfd4;
	overflow-x: auto;
	direction: ltr;
	text-align: start;
}

.cs-prose pre code {
	background: none;
	padding: 0;
	color: inherit;
}

/* Tables: scrollable on small screens rather than overflowing the page. */
.cs-prose table,
.cs-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--cs-text-base);
}

.cs-table-wrap {
	overflow-x: auto;
	/* An explicit scroll container keeps the page itself free of horizontal scroll. */
	max-width: 100%;
	-webkit-overflow-scrolling: touch;
}

.cs-prose th,
.cs-prose td,
.cs-table th,
.cs-table td {
	padding: var(--cs-3) var(--cs-4);
	border-block-end: 1px solid var(--cs-line);
	text-align: start;
	vertical-align: top;
}

.cs-prose th,
.cs-table th {
	color: var(--cs-ink);
	font-weight: 700;
	background: var(--cs-sand);
}

/* Core block alignment utilities. */
.cs-prose .alignwide {
	max-width: min(1100px, 100%);
	margin-inline: auto;
}

.cs-prose .alignfull {
	max-width: none;
	margin-inline: calc(var(--cs-gutter) * -1);
}

.cs-prose .alignleft {
	float: inline-start;
	margin-inline-end: var(--cs-5);
	margin-block-end: var(--cs-3);
	max-width: 50%;
}

.cs-prose .alignright {
	float: inline-end;
	margin-inline-start: var(--cs-5);
	margin-block-end: var(--cs-3);
	max-width: 50%;
}

.cs-prose .aligncenter {
	margin-inline: auto;
	text-align: center;
}

@media (max-width: 599px) {
	.cs-prose .alignleft,
	.cs-prose .alignright {
		float: none;
		max-width: 100%;
		margin-inline: 0;
	}
}

/* Editor colour/font-size class output. */
.has-brand-color { color: var(--cs-brand); }
.has-brand-background-color { background-color: var(--cs-brand); }
.has-gold-color { color: var(--cs-gold); }
.has-gold-background-color { background-color: var(--cs-gold); }
.has-ink-color { color: var(--cs-ink); }
.has-ink-background-color { background-color: var(--cs-ink); }
.has-muted-color { color: var(--cs-ink-3); }
.has-paper-background-color { background-color: var(--cs-bg); }
.has-sand-background-color { background-color: var(--cs-sand); }
.has-sage-color { color: var(--cs-sage); }
.has-sage-background-color { background-color: var(--cs-sage); }
.has-white-color { color: #fff; }
.has-white-background-color { background-color: #fff; }

/* =========================================================================
 * 20 — Home sections
 * ====================================================================== */

/* -- Hero ------------------------------------------------------------------
   An asymmetric editorial split: oversized type on one side, a single tall
   photograph on the other. No slider — one clear message and one clear CTA
   converts better and costs nothing in JS.                                 */
.cs-hero {
	position: relative;
	overflow: hidden;
	background: var(--cs-bg);
}

.cs-hero__inner {
	display: grid;
	gap: var(--cs-7);
	align-items: center;
	padding-block: var(--cs-9) var(--cs-10);
}

@media (min-width: 900px) {
	.cs-hero__inner {
		grid-template-columns: 1fr 0.92fr;
		gap: var(--cs-10);
		padding-block: var(--cs-11) var(--cs-12);
	}
}

.cs-hero__title {
	font-size: var(--cs-display);
	font-weight: 600;
	line-height: 1.22;
	max-width: 22ch;
}

.cs-hero__text {
	max-width: 48ch;
	margin-top: var(--cs-5);
	font-size: var(--cs-text-lg);
	line-height: 1.85;
	color: var(--cs-ink-2);
}

.cs-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cs-3);
	margin-top: var(--cs-7);
}

.cs-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cs-6) var(--cs-8);
	margin: var(--cs-9) 0 0;
	padding: var(--cs-6) 0 0;
	border-block-start: 1px solid var(--cs-line);
	list-style: none;
}

.cs-hero__stat strong {
	display: block;
	font-family: var(--cs-font-heading);
	font-size: var(--cs-h3);
	line-height: 1.2;
	color: var(--cs-ink);
}

.cs-hero__stat span {
	font-size: var(--cs-text-xs);
	color: var(--cs-ink-3);
}

.cs-hero__media {
	position: relative;
	border-radius: var(--cs-radius-lg);
	overflow: hidden;
	background: var(--cs-sand);
	aspect-ratio: 4 / 5;
}

.cs-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A soft warm glow behind the hero image, evoking candlelight without a gradient
   wash over the whole section. */
.cs-hero::before {
	content: "";
	position: absolute;
	inset-block-start: -20%;
	inset-inline-end: -10%;
	width: min(620px, 70vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(198, 155, 95, 0.22),
		rgba(198, 155, 95, 0) 68%
	);
	pointer-events: none;
}

/* Floating "best seller" card over the hero image. */
.cs-hero__float {
	position: absolute;
	inset-block-end: var(--cs-5);
	inset-inline-start: var(--cs-5);
	display: flex;
	align-items: center;
	gap: var(--cs-3);
	max-width: min(290px, 74%);
	padding: var(--cs-3);
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(6px);
	border-radius: var(--cs-radius-md);
	box-shadow: var(--cs-shadow-md);
}

.cs-hero__float img {
	flex: none;
	width: 52px;
	height: 64px;
	border-radius: var(--cs-radius-xs);
	object-fit: cover;
}

.cs-hero__float-name {
	font-size: var(--cs-text-sm);
	font-weight: 700;
	line-height: 1.5;
	color: var(--cs-ink);
}

.cs-hero__float-meta {
	font-size: var(--cs-text-xs);
	color: var(--cs-ink-3);
}

@media (max-width: 599px) {
	.cs-hero__float {
		display: none;
	}
}

/* -- Category tiles -------------------------------------------------------- */
.cs-cat-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--cs-radius-md);
	background: var(--cs-sand);
	aspect-ratio: 4 / 5;
	color: #fff;
}

.cs-cat-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--cs-dur-slow) var(--cs-ease);
}

.cs-cat-card:hover img {
	transform: scale(1.05);
}

/* Scrim so the label stays readable over any photograph. */
.cs-cat-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(28, 23, 20, 0.72) 0%,
		rgba(28, 23, 20, 0.18) 45%,
		rgba(28, 23, 20, 0) 70%
	);
}

.cs-cat-card__body {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 2;
	padding: var(--cs-5);
}

.cs-cat-card__title {
	color: #fff;
	font-size: var(--cs-h5);
}

.cs-cat-card__count {
	display: block;
	margin-top: 2px;
	font-size: var(--cs-text-xs);
	color: rgba(255, 255, 255, 0.8);
}

/* First tile spans two columns on wide screens for editorial rhythm. */
@media (min-width: 1024px) {
	.cs-cats--feature > :first-child {
		grid-column: span 2;
		aspect-ratio: 8 / 5;
	}
}

/* -- Benefits ------------------------------------------------------------- */
.cs-benefits {
	display: grid;
	gap: var(--cs-5);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.cs-benefit {
	display: flex;
	gap: var(--cs-4);
	padding: var(--cs-5);
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-md);
}

.cs-benefit__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: var(--cs-radius-sm);
	background: var(--cs-brand-tint);
	color: var(--cs-brand);
}

.cs-benefit__title {
	font-size: var(--cs-text-md);
	margin-bottom: var(--cs-1);
}

.cs-benefit__text {
	font-size: var(--cs-text-sm);
	color: var(--cs-ink-3);
	line-height: 1.75;
}

/* -- Promo banner --------------------------------------------------------- */
.cs-banner {
	position: relative;
	display: grid;
	overflow: hidden;
	border-radius: var(--cs-radius-lg);
	background: var(--cs-clay);
	color: #f2e9e0;
	min-height: 360px;
	isolation: isolate;
}

.cs-banner__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.cs-banner__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
}

.cs-banner__body {
	position: relative;
	align-self: center;
	max-width: 52ch;
	padding: var(--cs-8) var(--cs-6);
}

@media (min-width: 768px) {
	.cs-banner__body {
		padding: var(--cs-10);
	}
}

.cs-banner__title {
	color: #fff;
	font-size: var(--cs-h2);
}

.cs-banner__text {
	margin-top: var(--cs-4);
	color: #d9cec3;
	line-height: 1.85;
}

.cs-banner .cs-eyebrow {
	color: var(--cs-gold);
}

.cs-banner .cs-btn {
	margin-top: var(--cs-6);
}

.cs-banner .cs-btn--outline {
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

.cs-banner .cs-btn--outline:hover {
	background: #fff;
	border-color: #fff;
	color: var(--cs-clay);
}

/* -- Story ---------------------------------------------------------------- */
.cs-story {
	display: grid;
	gap: var(--cs-7);
	align-items: center;
}

@media (min-width: 900px) {
	.cs-story {
		grid-template-columns: 0.9fr 1.1fr;
		gap: var(--cs-10);
	}

	.cs-story--reverse .cs-story__media {
		order: 2;
	}
}

.cs-story__media {
	position: relative;
	border-radius: var(--cs-radius-lg);
	overflow: hidden;
	background: var(--cs-sand);
	aspect-ratio: 1;
}

.cs-story__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cs-story__title {
	font-size: var(--cs-h2);
}

.cs-story__text {
	margin-top: var(--cs-5);
	font-size: var(--cs-text-lg);
	line-height: 1.9;
	color: var(--cs-ink-2);
}

.cs-story__list {
	display: grid;
	gap: var(--cs-3);
	margin: var(--cs-6) 0 0;
	padding: 0;
	list-style: none;
}

.cs-story__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--cs-2);
	font-size: var(--cs-text-base);
	line-height: 1.8;
}

.cs-story__list svg {
	flex: none;
	margin-top: 5px;
	color: var(--cs-success);
}

/* -- Testimonials --------------------------------------------------------- */
.cs-quote {
	display: flex;
	flex-direction: column;
	gap: var(--cs-4);
	height: 100%;
	padding: var(--cs-6);
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-md);
}

.cs-quote__mark {
	color: var(--cs-gold);
}

.cs-quote__text {
	flex: 1 1 auto;
	font-size: var(--cs-text-base);
	line-height: 1.9;
	color: var(--cs-ink-2);
}

.cs-quote__foot {
	display: flex;
	align-items: center;
	gap: var(--cs-3);
	padding-top: var(--cs-4);
	border-block-start: 1px solid var(--cs-line-soft);
}

.cs-quote__avatar {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--cs-sand);
	color: var(--cs-brand);
	font-weight: 700;
	font-size: var(--cs-text-base);
}

.cs-quote__name {
	font-weight: 700;
	font-size: var(--cs-text-base);
}

.cs-quote__meta {
	font-size: var(--cs-text-xs);
	color: var(--cs-ink-3);
}

/* -- Instagram grid ------------------------------------------------------- */
.cs-insta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cs-2);
}

@media (min-width: 560px) {
	.cs-insta {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.cs-insta {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.cs-insta__item {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--cs-radius-xs);
	background: var(--cs-sand);
	aspect-ratio: 1;
}

.cs-insta__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--cs-dur-slow) var(--cs-ease),
		opacity var(--cs-dur) var(--cs-ease);
}

.cs-insta__item:hover img {
	transform: scale(1.06);
	opacity: 0.8;
}

.cs-insta__item::after {
	content: "";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	opacity: 0;
	background: rgba(28, 23, 20, 0.25);
	transition: opacity var(--cs-dur) var(--cs-ease);
}

.cs-insta__item:hover::after {
	opacity: 1;
}

/* =========================================================================
 * 21 — Template-specific composition
 *
 * Everything below styles markup introduced by the templates in /template-parts
 * and the root templates. Kept in one clearly-labelled section rather than
 * scattered through the file above, so the design system stays readable.
 * ====================================================================== */

/* -- Brand --------------------------------------------------------------- */

/*
 * The brand block must be allowed to shrink. A shop name long enough to outgrow the
 * header (Persian names often are) would otherwise push past the container and be
 * clipped, so it is capped and wrapped rather than held at its natural width.
 */
.cs-brand-wrap {
	margin: 0;
	flex: 0 1 auto;
	min-width: 0;
	max-width: min(52vw, 340px);
}

.cs-brand__text {
	display: grid;
	min-width: 0;
}

.cs-brand__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.25;
	/* Long unbroken words still have to give way rather than overflow. */
	overflow-wrap: anywhere;
}

.cs-brand__tagline {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.cs-brand-wrap {
		max-width: 300px;
	}
}

@media (max-width: 400px) {
	/* Give the action icons room on the narrowest phones. */
	.cs-brand-wrap {
		max-width: 46vw;
	}

	.cs-brand__name {
		font-size: var(--cs-text-lg);
		-webkit-line-clamp: 2;
	}
}

/* The hamburger only exists while the desktop nav row is hidden. */
@media (min-width: 1024px) {
	.cs-header__menu {
		display: none;
	}
}

/* -- Search -------------------------------------------------------------- */

.cs-searchform {
	position: relative;
}

/* In the header and the results page the submit button is compact; in the drawer
   it stays full size because it is the only action there. */
.cs-searchform--header .cs-searchform__submit,
.cs-searchform--inline .cs-searchform__submit {
	padding-inline: var(--cs-4);
	font-size: var(--cs-text-sm);
}

/* The suggestion panel floats over the page in compact contexts, and sits in the
   flow inside the drawer where there is room for it. */
.cs-searchform--header .cs-suggest,
.cs-searchform--inline .cs-suggest,
.cs-searchform--results .cs-suggest,
.cs-searchform--notfound .cs-suggest {
	position: absolute;
	inset-block-start: calc(100% + var(--cs-2));
	inset-inline: 0;
	z-index: 30;
	max-height: min(70vh, 520px);
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0;
	padding: var(--cs-4);
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-md);
	box-shadow: var(--cs-shadow-lg);
}

.cs-suggest__empty {
	margin: 0;
	padding-block: var(--cs-2);
	font-size: var(--cs-text-sm);
}

/* -- Mobile nav drawer --------------------------------------------------- */

.cs-mobile-nav__search {
	margin-bottom: var(--cs-5);
}

.cs-mobile-nav__block {
	margin-top: var(--cs-6);
	padding-top: var(--cs-5);
	border-block-start: 1px solid var(--cs-line-soft);
}

.cs-mobile-nav__block-title {
	margin: 0 0 var(--cs-3);
	font-size: var(--cs-text-xs);
	font-weight: 700;
	color: var(--cs-ink-3);
}

.cs-mobile-nav__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cs-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-mobile-nav__utils {
	display: grid;
	gap: var(--cs-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-mobile-nav__utils a {
	display: flex;
	align-items: center;
	gap: var(--cs-3);
	min-height: 48px;
	color: var(--cs-ink);
	font-weight: 600;
}

.cs-mobile-nav__utils svg {
	color: var(--cs-ink-3);
}

.cs-mobile-nav__contact {
	display: grid;
	gap: var(--cs-2);
}

.cs-mobile-nav__contact a {
	display: flex;
	align-items: center;
	gap: var(--cs-2);
	min-height: 44px;
	color: var(--cs-ink-2);
	font-size: var(--cs-text-base);
}

.cs-mobile-nav__contact svg {
	color: var(--cs-brand);
}

/* Isolate inherently LTR strings (phone numbers, emails, SKUs) inside RTL text.
   `unicode-bidi: isolate` is what stops a trailing digit jumping to the wrong end. */
.cs-ltr {
	direction: ltr;
	unicode-bidi: isolate;
	text-align: start;
}

/* Social list on a light background (the drawer, the contact page). */
.cs-social--light .cs-social__link,
.cs-social--dark .cs-social__link {
	border-color: var(--cs-line);
	color: var(--cs-ink-2);
}

.cs-social--light .cs-social__link:hover,
.cs-social--dark .cs-social__link:hover {
	background: var(--cs-sand);
	border-color: var(--cs-brand);
	color: var(--cs-brand);
}

/* -- Search drawer ------------------------------------------------------- */

.cs-search-drawer__suggest {
	margin-top: var(--cs-7);
}

.cs-search-drawer .cs-drawer__body {
	padding-block: var(--cs-7);
}

/* -- Page hero additions ------------------------------------------------- */

.cs-page-hero__search {
	max-width: 520px;
	margin-top: var(--cs-5);
}

.cs-page-hero--center .cs-page-hero__search {
	margin-inline: auto;
}

/* -- Content column ------------------------------------------------------ */

.cs-content {
	min-width: 0;
}

.cs-single__body {
	max-width: 820px;
	margin-inline: auto;
}

.cs-prose--comments {
	margin-top: var(--cs-9);
}

/* Paginated posts/pages. */
.cs-page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cs-2);
	margin-top: var(--cs-7);
	font-size: var(--cs-text-sm);
	color: var(--cs-ink-3);
}

.cs-page-links a,
.cs-page-links__item {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	min-height: 40px;
	padding-inline: var(--cs-2);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-xs);
	font-weight: 600;
	color: var(--cs-ink-2);
}

.cs-page-links > span > .cs-page-links__item {
	border-color: var(--cs-ink);
	background: var(--cs-ink);
	color: var(--cs-surface);
}

/* -- Search results groups ---------------------------------------------- */

.cs-search-group {
	min-width: 0;
}

/* -- 404 ---------------------------------------------------------------- */

.cs-404 {
	display: grid;
	justify-items: center;
	gap: var(--cs-4);
	text-align: center;
}

.cs-404__code {
	margin: 0;
	font-family: var(--cs-font-latin);
	font-size: clamp(4rem, 14vw, 9rem);
	font-weight: 700;
	line-height: 1;
	color: var(--cs-sand-deep);
	letter-spacing: 0.02em;
}

.cs-404__title {
	font-size: var(--cs-h2);
}

.cs-404__text {
	max-width: 46ch;
	color: var(--cs-ink-3);
	font-size: var(--cs-text-lg);
	line-height: 1.8;
}

.cs-404__search {
	width: min(100%, 520px);
	margin-top: var(--cs-2);
}

.cs-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--cs-3);
	margin-top: var(--cs-3);
}

.cs-404__cats {
	margin-top: var(--cs-8);
	text-align: center;
}

.cs-404__cats .cs-mobile-nav__chips {
	justify-content: center;
}

/* -- Empty state variant ------------------------------------------------- */

/* Inside a drawer the card border/background is redundant. */
.cs-empty--bare {
	background: transparent;
	border: 0;
	padding-inline: 0;
}

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

.cs-hero__content {
	min-width: 0;
	position: relative;
	z-index: 1;
}

/* -- Newsletter band ----------------------------------------------------- */

.cs-newsletter__text-col,
.cs-newsletter__form-col {
	min-width: 0;
}

.cs-newsletter__fallback {
	display: grid;
	gap: var(--cs-4);
	justify-items: start;
}

.cs-newsletter__fallback .cs-social {
	margin: 0;
}

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

.cs-footer__col {
	min-width: 0;
}

/* Widgets dropped into the footer need light-on-dark treatment. */
.cs-footer__col--widgets .cs-widget {
	padding: 0;
	background: transparent;
	border: 0;
}

.cs-footer__col--widgets .cs-widget__title {
	padding-bottom: 0;
	border: 0;
	color: #fff;
	font-size: var(--cs-text-base);
	font-weight: 700;
}

.cs-footer__col--widgets .cs-widget li a {
	color: #cdbfb2;
}

.cs-footer__col--widgets .cs-widget li a:hover {
	color: #fff;
}

/* -- Inline metadata links ----------------------------------------------- */

/*
 * Small inline links inside metadata rows (post category, the product name under a
 * testimonial) sit below the 24px target-size guideline at their natural text height.
 * WCAG 2.5.8 exempts links inside a block of text, but padding the hit area costs
 * nothing — the matching negative margin keeps the visual layout unchanged.
 */
.cs-entry-meta__item a,
.cs-quote__meta a,
.cs-breadcrumb a {
	padding-block: 6px;
	margin-block: -6px;
}

/* -- Contact page -------------------------------------------------------- */

.cs-contact__layout {
	display: grid;
	gap: var(--cs-7);
	align-items: start;
	padding-block: var(--cs-section-sm);
}

@media (min-width: 900px) {
	.cs-contact__layout {
		/* Details first in the source order and in the layout: on a contact page the
		   phone number is more often what the visitor wants than the form. */
		grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
		gap: var(--cs-9);
	}
}

.cs-contact__list {
	display: grid;
	gap: var(--cs-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-contact__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--cs-3);
	line-height: 1.8;
	color: var(--cs-ink-2);
}

.cs-contact__list strong {
	display: block;
	margin-bottom: 2px;
	color: var(--cs-ink);
	font-size: var(--cs-text-sm);
}

.cs-contact__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: var(--cs-radius-sm);
	background: var(--cs-sand);
	color: var(--cs-brand);
}

.cs-contact__form {
	min-width: 0;
}

.cs-contact__map {
	margin-bottom: var(--cs-section-sm);
	overflow: hidden;
	border-radius: var(--cs-radius-lg);
	border: 1px solid var(--cs-line);
	background: var(--cs-sand);
	/* Reserving the aspect ratio keeps the embed from shifting the layout on load. */
	aspect-ratio: 16 / 9;
}

.cs-contact__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 599px) {
	.cs-contact__map {
		aspect-ratio: 4 / 3;
	}
}

/* =========================================================================
 * 22 — Motion & print
 * ====================================================================== */

/*
 * Reduced motion. Transitions are collapsed to near-zero rather than removed, so
 * state changes still apply instantly and nothing depends on a transitionend that
 * would never fire.
 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.cs-skeleton::after {
		display: none;
	}

	/* Hover zooms and nudges are decorative; drop them entirely. */
	.cs-post-card:hover .cs-post-card__media img,
	.cs-cat-card:hover img,
	.cs-insta__item:hover img {
		transform: none;
	}

	.cs-link-arrow:hover svg {
		transform: none;
	}
}

@media print {
	.cs-header,
	.cs-footer,
	.cs-announcement,
	.cs-bottom-nav,
	.cs-toasts,
	.cs-drawer,
	.cs-overlay,
	.cs-share,
	.cs-pagination,
	.cs-sidebar {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 12pt;
	}

	.cs-prose {
		max-width: none;
	}

	a::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		color: #555;
	}
}