/*
Theme Name: NIOS
Theme URI: https://nios.co.il
Author: GalyamStudio
Description: Custom NIOS theme (personalized engraved gifts). Rebuilding from scratch, section by section, from approved Figma designs.
Version: 0.4.1
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: nios
*/

/* ---------- Tokens (from Figma NIOS-website, nodes 54:87 / 54:100) ---------- */
:root {
	--nios-bg: #fbf6ef;
	--nios-bg-panel: #faf3ec;
	--nios-ink: #2b2722;
	--nios-ink-strong: #2b251e;
	--nios-border: #d8c9b7;
	--nios-accent: #ad6c22;
	--nios-gold-soft: #d5b06b;
	--nios-white: #ffffff;
	--nios-font: 'Heebo', 'Segoe UI', Tahoma, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body {
	margin: 0;
	background: var(--nios-bg);
	font-family: var(--nios-font);
	color: var(--nios-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/*
================================================================
HEADER — Mobile First responsive refactor.
Sources of truth: Mobile 424 (129:12), Tablet 1024 (125:65),
Desktop 1440 (125:2), Desktop Wide 1920 (54:87, frozen/approved).
Breakpoints: 768px / 1200px / 1600px (min-width, no prior system existed).
================================================================
*/

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--nios-bg);
}

/* ---- Base: Mobile 320–767 (reference 424) ---- */
.site-header__inner {
	display: grid;
	grid-template-columns: 44px 1fr 44px;
	grid-template-areas: "utility logo menu";
	grid-template-rows: 68px auto;
	align-items: center;
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 8px;
}

.site-header__brand {
	grid-area: logo;
	justify-self: center;
	display: block;
	line-height: 0;
}
.site-header__brand img { width: 80px; height: 27px; }

.site-header__menu-toggle {
	grid-area: menu;
	justify-self: start;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	cursor: pointer;
	color: var(--nios-ink);
}
.site-header__menu-icon { width: 24px; height: 24px; display: block; }
.site-header__menu-label {
	display: none;
	font: 500 15px/22px var(--nios-font);
	white-space: nowrap;
}

.site-header__utility {
	grid-area: utility;
	justify-self: end;
	display: flex;
	align-items: center;
}
.site-header__icon-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	line-height: 0;
}
.site-header__icon-btn img { width: 24px; height: 24px; }
.site-header__icon-btn--account { display: none; }
.site-header__cart-count {
	position: absolute;
	top: 2px;
	left: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 999px;
	background: var(--nios-ink-strong);
	color: var(--nios-white);
	font: 600 10px/16px var(--nios-font);
	text-align: center;
}

/* Nav doubles as the mobile/tablet drawer (below the bar) and the desktop
   inline nav (from 1200px, see below) — one reused component, not four. */
.site-header__nav {
	display: none;
	grid-column: 1 / -1;
	grid-row: 2;
	border-top: 1px solid var(--nios-border);
}
.site-header__nav.is-open { display: block; }
.site-header__nav-list {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 4px 8px 12px;
}
.site-header__nav-list a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	font: 400 17px/24px var(--nios-font);
	color: var(--nios-ink);
	text-decoration: none;
}
.site-header__nav-list a.is-active,
.site-header__nav-list .current-menu-item > a {
	font-weight: 600;
}
.site-header__nav-account {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin: 0 8px;
	padding: 0 12px;
	border-top: 1px solid var(--nios-border);
	font: 400 15px/22px var(--nios-font);
	color: var(--nios-ink);
	text-decoration: none;
}
.site-header__nav-account img { width: 20px; height: 20px; }

.site-header__divider {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	background: var(--nios-border);
}

/* ---- Tablet 768–1199 (reference 1024) ---- */
@media (min-width: 768px) {
	.site-header__inner {
		grid-template-columns: auto 1fr auto auto;
		grid-template-areas: "logo . utility menu";
		grid-template-rows: 76px auto;
		padding: 0 32px;
	}
	.site-header__brand { justify-self: start; }
	.site-header__brand img { width: 112px; height: 37.5px; }

	.site-header__menu-toggle { width: auto; padding: 0 8px; justify-self: end; }
	.site-header__menu-label { display: block; }

	.site-header__utility { justify-self: end; }
	.site-header__icon-btn img { width: 26px; height: 26px; }
	.site-header__icon-btn--account { display: flex; }

	.site-header__nav-account { display: none; }
}

/* ---- Desktop 1200–1599 (reference 1440) ---- */
@media (min-width: 1200px) {
	.site-header__inner {
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "logo nav utility";
		grid-template-rows: auto;
		height: 82px;
		padding: 0 40px;
	}
	.site-header__brand img { width: 131px; height: 44px; }

	.site-header__menu-toggle { display: none; }

	.site-header__nav {
		grid-area: nav;
		grid-row: auto;
		grid-column: auto;
		display: flex !important;
		align-items: center;
		justify-content: center;
		border-top: 0;
	}
	.site-header__nav-list {
		flex-direction: row;
		align-items: center;
		gap: 32px;
		padding: 0;
	}
	.site-header__nav-list a {
		min-height: auto;
		padding: 0;
		font-size: 16px;
		padding-bottom: 8px;
		position: relative;
	}
	.site-header__nav-list a.is-active::after,
	.site-header__nav-list .current-menu-item > a::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 31px;
		height: 2px;
		border-radius: 1px;
		background: var(--nios-ink);
	}

	.site-header__utility { gap: 20px; }
	.site-header__icon-btn { width: 28px; height: 28px; }
	.site-header__icon-btn img { width: 28px; height: 28px; }
}

/* ---- Desktop Wide 1600+ — frozen, pixel-precise reproduction of the
   already-approved/live 1920 design (Figma 54:87). Fully self-contained so
   it can never drift from the mobile/tablet/1440 rules above. ---- */
@media (min-width: 1600px) {
	.site-header__inner {
		display: flex;
		grid-template-columns: none;
		grid-template-areas: none;
		align-items: flex-start;
		height: 78px;
		padding: 20px 39px 0 45px;
	}
	.site-header__brand {
		display: block;
		flex-shrink: 0;
		margin-inline-end: 210px;
	}
	.site-header__brand img { width: 131px; height: 44px; }

	.site-header__menu-toggle { display: none; }

	.site-header__nav {
		display: flex !important;
		align-items: center;
		margin-top: 8px;
		margin-inline-end: auto;
		border-top: 0;
	}
	.site-header__nav-list {
		flex-direction: row;
		align-items: center;
		gap: 44px;
	}
	.site-header__nav-list a {
		font-size: 17px;
		line-height: 24px;
		padding-bottom: 9px;
	}
	.site-header__nav-list a.is-active::after,
	.site-header__nav-list .current-menu-item > a::after {
		bottom: 2px;
	}

	.site-header__utility { gap: 36px; }
	.site-header__icon-btn { width: 31px; height: 31px; }
	.site-header__icon-btn:not(.site-header__icon-btn--account) { width: 30px; height: 30px; }
	.site-header__icon-btn img { width: 100%; height: 100%; }
	.site-header__cart-count { top: -6px; left: -6px; }
}

/*
================================================================
HERO — Mobile First responsive refactor.
Sources of truth: Mobile 424 (129:13), Tablet 1024 (125:66),
Desktop 1440 (125:3), Desktop Wide 1920 (54:100, frozen/approved).
Naor confirmed 2026-09-04: the Benefits row and Personalization panel
are Desktop-Wide-only content — they do NOT appear below 1600px, matching
exactly what the 1440/1024/424 Figma frames already show (omitted, not
schematic/incomplete as first assumed on 2026-09-03).
================================================================
*/

/* ---- Base: Mobile 320–767 (reference 424) ---- */
.hero {
	display: flex;
	flex-direction: column;
	background: var(--nios-bg);
}

.hero__content {
	order: 1;
	padding: 28px 16px 32px;
	text-align: center;
}
.hero__visual {
	order: 2;
	width: 100%;
	height: 290px;
	overflow: hidden;
	background: var(--nios-bg-panel);
}
.hero__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.hero__eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: fit-content;
	margin: 0 auto;
	font: 500 15px/24px var(--nios-font);
	color: var(--nios-accent);
}
.hero__eyebrow img { flex-shrink: 0; width: 20px; height: 20px; }

.hero__title {
	margin: 16px auto 0;
	max-width: 352px;
	font: 700 38px/46px var(--nios-font);
	color: var(--nios-ink);
}
.hero__title span { display: block; }

.hero__description {
	margin: 16px auto 0;
	max-width: 352px;
	font: 400 16px/25px var(--nios-font);
	color: var(--nios-ink);
}
.hero__description span { display: block; }

.hero__cta {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 352px;
	margin: 24px auto 0;
	gap: 12px;
}
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	border-radius: 4px;
	border: 1px solid var(--nios-ink-strong);
	font: 500 16px/24px var(--nios-font);
	text-decoration: none;
	cursor: pointer;
}
.btn--primary {
	background: var(--nios-ink-strong);
	color: var(--nios-white);
}
.btn--primary:hover { background: #423b30; }
.btn--secondary {
	background: var(--nios-bg-panel);
	color: var(--nios-ink);
}
.btn--secondary:hover { background: #f1e7d8; }
.btn:focus-visible {
	outline: 2px solid var(--nios-accent);
	outline-offset: 2px;
}

/* Desktop-Wide-only content (see the section note above) — hidden below
   1600px, restored in the Desktop Wide tier further down. */
.hero__benefits {
	display: none;
	flex-direction: column;
	gap: 16px;
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
}
.hero__benefit {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 280px;
	margin: 0 auto;
	text-align: right;
	border-inline-start: 0;
}
.hero__benefit img { flex-shrink: 0; }
.hero__benefit-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.hero__benefit-title {
	display: block;
	font: 600 15px/23px var(--nios-font);
	color: var(--nios-ink);
}
.hero__benefit-sub {
	display: block;
	font: 400 13px/20px var(--nios-font);
	color: var(--nios-ink);
}

.hero__panel {
	display: none;
	margin: 24px auto 0;
	width: 100%;
	max-width: 352px;
	background: var(--nios-bg-panel);
	border: 1px solid var(--nios-border);
	border-radius: 10px;
	padding: 16px 12px 20px;
}
.hero__panel-title {
	margin: 0 0 16px;
	text-align: center;
	font: 600 16px/24px var(--nios-font);
	color: var(--nios-ink);
}
.hero__panel-list {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 16px 0;
}
.hero__panel-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 50%;
	justify-content: center;
	padding-inline: 8px;
	border-inline-start: 0;
}
.hero__panel-list span {
	font: 400 13px/20px var(--nios-font);
	color: var(--nios-ink);
	white-space: nowrap;
}
.hero__panel-glyph {
	font: 400 29px/1 var(--nios-font);
	color: var(--nios-ink);
	width: 27px;
	text-align: center;
}

/* ---- Tablet 768–1199 (reference 1024) ---- */
@media (min-width: 768px) {
	.hero__content { padding: 48px 40px 40px; }
	.hero__visual { height: 420px; }

	.hero__eyebrow { font-size: 18px; }
	.hero__eyebrow img { width: 22px; height: 22px; }
	.hero__title { max-width: 700px; font-size: 48px; line-height: 56px; }
	.hero__description { max-width: 700px; font-size: 18px; line-height: 30px; }

	.hero__cta { flex-direction: row; justify-content: center; width: auto; max-width: none; gap: 19px; }
	.btn { width: 230px; }

	.hero__benefit { width: 190px; max-width: none; padding-inline-start: 20px; border-inline-start: 1px solid var(--nios-border); }
	.hero__benefit:first-child { border-inline-start: none; }

	.hero__panel { max-width: 640px; padding: 13px 0 20px; }
	.hero__panel-list { flex-wrap: nowrap; }
	.hero__panel-list li { flex: 0 0 auto; padding-inline: 24px; border-inline-start: 1px solid var(--nios-border); }
	.hero__panel-list li:first-child { border-inline-start: none; }
}

/* ---- Desktop 1200–1599 (reference 1440) ---- */
@media (min-width: 1200px) {
	.hero {
		flex-direction: row-reverse;
		align-items: stretch;
		max-width: 1920px;
		margin: 0 auto;
		overflow: hidden;
	}
	.hero__content {
		flex: 0 0 45%;
		max-width: 650px;
		padding: 56px 48px;
		text-align: right;
	}
	.hero__visual {
		flex: 1;
		width: auto;
		height: auto;
	}

	.hero__eyebrow { margin: 0 0 0 auto; justify-content: flex-end; }
	.hero__title,
	.hero__description { margin: 24px 0 0; max-width: none; text-align: right; }
	.hero__title:first-child { margin-top: 0; }

	.hero__cta { flex-direction: row; justify-content: flex-start; width: auto; max-width: none; margin: 32px 0 0; }

	.hero__benefit { margin: 0; }

	.hero__panel { margin: 24px 0 0; width: 100%; max-width: none; }
}

/* ---- Desktop Wide 1600+ — frozen, pixel-precise reproduction of the
   already-approved/live 1920 design (Figma 54:100). Only tier where the
   Benefits row and Personalization panel are shown (Naor, 2026-09-04). ---- */
@media (min-width: 1600px) {
	.hero__visual {
		flex: 0 0 1185px;
		width: 1185px;
		height: 743px;
	}
	.hero__content {
		flex: 0 0 auto;
		width: 638px;
		max-width: none;
		margin-left: 84px;
		/* Bottom of the personalization panel sits on the same line as the bottom of the hero image (743px). */
		padding: 44px 0 0;
	}

	.hero__eyebrow { font: 500 18px/28px var(--nios-font); margin-right: 84px; }
	.hero__eyebrow img { width: 26px; height: 26px; }

	.hero__title { margin: 22px auto 0; width: 470px; max-width: none; font: 700 64px/78px var(--nios-font); }
	.hero__description { margin: 22px auto 0; width: 485px; max-width: none; font: 400 21px/31px var(--nios-font); }

	.hero__cta { justify-content: center; width: fit-content; max-width: none; margin: 32px auto 0; gap: 19px; }
	.btn { width: 230px; height: 54px; font-size: 17px; line-height: 25px; }

	.hero__benefits { display: flex; justify-content: center; gap: 0; margin: 34px 84px 0 0; }
	.hero__benefit { width: 190px; padding-inline-start: 20px; border-inline-start: 1px solid var(--nios-border); }
	.hero__benefit:first-child { border-inline-end: none; }
	.hero__benefit:last-child { border-inline-start: none; }

	.hero__panel { display: block; margin: 24px auto 0; width: 570px; }
	.hero__panel-list li { padding-inline: 8px; }
}

/*
================================================================
CATEGORIES — 02_ENGRAVING_CATEGORIES. Mobile First responsive rebuild.
Sources of truth: Mobile 424 (192:2), Tablet 1024 (194:2), Desktop 1440
(197:2). Desktop Wide 1920 (125:6) is supporting guidance only — the card
set is now admin-editable (variable count/order), so the 1600px+ tier uses
a generic featured/standard role system instead of 5 hardcoded per-card
sizes; visually unchanged for the approved default 5-card content except
that the two former "medium" and "small" standard rows are now unified to
one standard size (a deliberate, minor simplification — see build report).
Breakpoints match the sitewide system: 768px / 1200px / 1600px.
================================================================
*/

.categories {
	background: var(--categories-bg, #f8f0e6);
	padding: 40px 0 48px;
	/* The header is position:sticky (68px), so a native #anchor jump to
	   this section (via the optional categories_anchor_id ACF field) would
	   otherwise land the eyebrow line right under it. */
	scroll-margin-top: 84px;
}

.categories__inner {
	padding-inline: 16px;
}

.categories__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}
.categories__eyebrow {
	margin: 0;
	font: 500 14px/22px var(--nios-font);
	color: var(--nios-accent);
}
.categories__title {
	margin: 0;
	font: 700 28px/36px var(--nios-font);
	color: var(--nios-ink);
}
.categories__description {
	margin: 0;
	font: 400 15px/24px var(--nios-font);
	color: #6d665f;
}

.categories-grid {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.category-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 14px;
	text-decoration: none;
}
.category-card:focus-visible {
	outline: 2px solid var(--nios-accent);
	outline-offset: 2px;
}
.category-card--featured { aspect-ratio: 392 / 300; }
.category-card--standard { aspect-ratio: 392 / 200; }

.category-card__picture {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	background: var(--cat-media-bg, transparent);
}
.category-card__image {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: var(--cat-fit, cover);
	object-position: var(--cat-x, 50%) var(--cat-y, 50%);
	transform: scale(var(--cat-z, 1));
	transform-origin: var(--cat-x, 50%) var(--cat-y, 50%);
	pointer-events: none;
	transition: transform 700ms cubic-bezier(.22, .7, .2, 1);
}
/* Slow image zoom on hover/focus, composed with the per-card editor zoom (--cat-z). Pointer devices only. */
@media (hover: hover) and (pointer: fine) {
	.category-card:hover .category-card__image,
	.category-card:focus-visible .category-card__image { transform: scale(calc(var(--cat-z, 1) * 1.07)); }
}
@media (prefers-reduced-motion: reduce) {
	.category-card__image { transition: none; }
	.category-card:hover .category-card__image,
	.category-card:focus-visible .category-card__image { transform: scale(var(--cat-z, 1)); }
}
.category-card__gradient {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.category-card__gradient--light { background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.06) 52%, rgba(0, 0, 0, 0.86) 100%); }
.category-card__gradient--medium { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.12) 45%, rgba(0, 0, 0, 0.9) 100%); }
.category-card__gradient--strong { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.14) 38%, rgba(0, 0, 0, 0.92) 100%); }

.category-card__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	height: 100%;
	text-align: right;
}
.category-card__title {
	margin: 0;
	font-family: var(--nios-font);
	font-weight: 700;
	color: var(--nios-white);
}
.category-card__desc {
	margin: 0;
	font-family: var(--nios-font);
	font-weight: 400;
	color: var(--nios-white);
}
.category-card__cta {
	font-family: var(--nios-font);
	font-weight: 500;
}
.category-card__cta--text-link { color: var(--nios-gold-soft); }
.category-card__cta--filled-button,
.category-card__cta--outline-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 4px;
	padding: 8px 18px;
	border-radius: 999px;
	background: var(--cta-bg, transparent);
	color: var(--cta-text, var(--nios-white));
	border: 1.5px solid var(--cta-border, transparent);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.category-card:hover .category-card__cta--filled-button,
.category-card:hover .category-card__cta--outline-button,
.category-card:focus-visible .category-card__cta--filled-button,
.category-card:focus-visible .category-card__cta--outline-button {
	background: var(--cta-hover-bg, var(--cta-bg, transparent));
	color: var(--cta-hover-text, var(--cta-text, var(--nios-white)));
}

.category-card--featured .category-card__content { padding: 20px; gap: 4px; }
.category-card--featured .category-card__title { font-size: 22px; line-height: 28px; }
.category-card--featured .category-card__desc { font-size: 14px; line-height: 21px; }
.category-card--featured .category-card__cta { font-size: 13px; line-height: 19px; }

.category-card--standard .category-card__content { padding: 0 20px 16px; gap: 2px; }
.category-card--standard .category-card__title { font-size: 17px; line-height: 22px; }
.category-card--standard .category-card__desc { font-size: 13px; line-height: 19px; }
.category-card--standard .category-card__cta { font-size: 12px; line-height: 17px; }

@media (min-width: 768px) {
	.categories { padding: 48px 0 56px; }
	.categories__inner { padding-inline: 60px; }
	.categories__eyebrow { font-size: 15px; line-height: 24px; }
	.categories__title { font-size: 34px; line-height: 42px; }
	.categories__description { font-size: 16px; line-height: 26px; }

	.categories-grid {
		margin-top: 28px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 300fr 220fr 220fr;
		gap: 12px;
		aspect-ratio: 904 / 764;
		/* Grid column lines follow `direction`; force LTR for column-line
		   numbering only, reset to RTL per-card below for text/content. */
		direction: ltr;
	}
	.category-card { direction: rtl; }
	.category-card--featured,
	.category-card--standard { aspect-ratio: auto; }

	.category-card--featured { grid-column: 1 / -1; grid-row: 1; }
	.category-card--standard:nth-child(2) { grid-column: 1; grid-row: 2; }
	.category-card--standard:nth-child(3) { grid-column: 2; grid-row: 2; }
	.category-card--standard:nth-child(4) { grid-column: 1; grid-row: 3; }
	.category-card--standard:nth-child(5) { grid-column: 2; grid-row: 3; }

	.category-card--featured .category-card__content { padding: 0 32px 20px; gap: 4px; }
	.category-card--featured .category-card__title { font-size: 28px; line-height: 36px; }
	.category-card--featured .category-card__desc { font-size: 15px; line-height: 24px; }
	.category-card--featured .category-card__cta { font-size: 14px; line-height: 20px; }

	.category-card--standard .category-card__content { padding: 0 20px 16px; gap: 2px; }
	.category-card--standard .category-card__title { font-size: 20px; line-height: 26px; }
	.category-card--standard .category-card__desc { font-size: 13px; line-height: 20px; }
	.category-card--standard .category-card__cta { font-size: 13px; line-height: 18px; }
}

@media (min-width: 1200px) {
	.categories { padding: 56px 0 64px; }
	.categories__inner { padding-inline: 160px; }
	.categories__title { font-size: 40px; line-height: 50px; }
	.categories__description { font-size: 18px; line-height: 28px; }

	.categories-grid {
		margin-top: 32px;
		grid-template-columns: 460fr 318fr 318fr;
		grid-template-rows: 189fr 189fr;
		aspect-ratio: 1120 / 390;
	}
	.category-card--featured { grid-column: 1; grid-row: 1 / span 2; }
	.category-card--standard:nth-child(2) { grid-column: 2; grid-row: 1; }
	.category-card--standard:nth-child(3) { grid-column: 3; grid-row: 1; }
	.category-card--standard:nth-child(4) { grid-column: 2; grid-row: 2; }
	.category-card--standard:nth-child(5) { grid-column: 3; grid-row: 2; }

	.category-card--featured .category-card__content { padding: 24px; gap: 4px; }
	.category-card--featured .category-card__title { font-size: 32px; line-height: 40px; }
	.category-card--featured .category-card__desc { font-size: 16px; line-height: 26px; }
	.category-card--featured .category-card__cta { font-size: 15px; line-height: 22px; }

	.category-card--standard .category-card__content { padding: 0 16px 16px; gap: 2px; }
	.category-card--standard .category-card__title { font-size: 22px; line-height: 28px; }
	.category-card--standard .category-card__desc { font-size: 14px; line-height: 21px; }
	.category-card--standard .category-card__cta { font-size: 14px; line-height: 20px; }
}

/*
1600px+ — Desktop Wide 1920 (125:6), supporting guidance only. Reuses the
exact approved grid geometry and "Lighter" featured-card values, but
standard-card padding/type is unified to one size (previously two subtly
different sizes across the top/bottom row, only possible when exactly 5
named cards were hardcoded) — see build report.
*/
@media (min-width: 1600px) {
	.categories { padding: 48px 0 64px; }
	.categories__inner { padding-inline: 0; max-width: 1524px; margin-inline: auto; }
	.categories__title { font-size: 44px; line-height: 56px; }

	.categories-grid {
		margin-top: 40px;
		grid-template-columns: 625fr 426fr 442fr;
		grid-template-rows: 240fr 211fr;
		gap: 12px 16px;
		aspect-ratio: 1524 / 463;
	}
	.category-card--featured { grid-column: 1; grid-row: 1 / span 2; }
	.category-card--standard:nth-child(2) { grid-column: 2; grid-row: 1; }
	.category-card--standard:nth-child(3) { grid-column: 3; grid-row: 1; }
	.category-card--standard:nth-child(4) { grid-column: 2; grid-row: 2; }
	.category-card--standard:nth-child(5) { grid-column: 3; grid-row: 2; }

	.category-card--featured .category-card__content { padding: 32px; gap: 4px; }
	.category-card--featured .category-card__title { font-size: 34px; line-height: 42px; }
	.category-card--featured .category-card__desc { font-size: 17px; line-height: 26px; }
	.category-card--featured .category-card__cta { font-size: 15px; line-height: 22px; }

	.category-card--standard .category-card__content { padding: 20px; gap: 3px; }
	.category-card--standard .category-card__title { font-size: 26px; line-height: 33px; }
	.category-card--standard .category-card__desc { font-size: 14px; line-height: 21px; }
	.category-card--standard .category-card__cta { font-size: 14px; line-height: 20px; }
}

/*
================================================================
FOOTER — 07_FOOTER (Figma 178:2 Desktop Wide 1920 canonical, 178:3
Desktop 1440, 178:4 Tablet 1024, 178:5 Mobile 424). Mobile First,
breakpoints 768 / 1200 / 1600 matching the Header/Hero system.
Tokens per FOOTER_IMPLEMENTATION_SPEC (182:2), scoped to the footer only
so Header/Hero/Categories stay untouched.
================================================================
*/
.site-footer {
	--footer-bg: #fbf7f0;
	--footer-surface: #fffdf9;
	--footer-border: #e5d5c2;
	--footer-text: #15110d;
	--footer-muted: #6d665f;
	--footer-gold: #b98745;
	--footer-gold-2: #d5b06b;
	--footer-dark: #21170f;
	position: relative;
	background: var(--footer-bg);
	overflow-x: clip;
	padding-top: 40px;
}

/* Decorative corner illustrations — shown at every breakpoint (per Naor's
   2026-09-06 footer redesign), scaled per tier. Mobile/tablet (<1200px) has
   no safe side-margin beside the near-full-width CTA/legal bar, so those
   tiers hang the illustrations below the footer's own bottom edge
   (`top: 100%`+) — guaranteed zero overlap regardless of column widths.
   Desktop tiers (1200px+) switch to `bottom`-anchoring instead, placing
   them beside the CTA card in the genuinely empty side margins that exist
   there. All verified via live overlap checks at each breakpoint, not just
   eyeballed — see CHANGELOG. */
.site-footer__decor {
	display: block;
	position: absolute;
	z-index: 0;
	pointer-events: none;
	top: calc(100% - 16px);
}
.site-footer__decor img { display: block; width: 100%; height: auto; }
.site-footer__decor--left { display: none; }
.site-footer__decor--right { right: -8px; width: 130px; }

@media (min-width: 480px) {
	.site-footer__decor--left { display: block; left: -8px; width: 150px; }
	.site-footer__decor--right { width: 160px; }
}

.site-footer__inner {
	position: relative;
	max-width: 1920px;
	margin: 0 auto;
	padding-inline: 24px;
}

/* ---- Brand ---- */
.site-footer__top {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	text-align: center;
}
.site-footer__brand { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.site-footer__logo { display: block; line-height: 0; }
.site-footer__logo img { width: 140px; height: auto; }
.site-footer__desc {
	margin: 0;
	max-width: 368px;
	font: 400 16px/26px var(--nios-font);
	color: var(--footer-text);
}
.site-footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.site-footer__contact li { display: flex; align-items: center; }
.site-footer__contact a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font: 400 16px/24px var(--nios-font);
	color: var(--footer-text);
	text-decoration: none;
}
.site-footer__contact a:hover,
.site-footer__contact a:focus-visible { color: var(--footer-gold); }
.site-footer__contact a:focus-visible { outline: 2px solid var(--footer-gold); outline-offset: 2px; border-radius: 2px; }
.site-footer__contact-icon { display: none; }

/* ---- Nav groups / mobile accordions ---- */
.site-footer__nav-group { width: 100%; max-width: 420px; border-top: 1px solid var(--footer-border); }
.site-footer__nav-heading-wrap { margin: 0; }
.site-footer__nav-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 14px 4px;
	background: none;
	border: 0;
	cursor: pointer;
	font: 600 18px/30px var(--nios-font);
	color: var(--footer-text);
	text-align: right;
}
.site-footer__nav-chevron { flex-shrink: 0; transition: transform 200ms ease; }
.site-footer__nav-toggle[aria-expanded="true"] .site-footer__nav-chevron { transform: rotate(180deg); }
.site-footer__nav-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 200ms ease;
}
.site-footer__nav-panel.is-open { grid-template-rows: 1fr; }
.site-footer__nav-panel-inner { overflow: hidden; min-height: 0; }
@media (prefers-reduced-motion: reduce) {
	.site-footer__nav-chevron,
	.site-footer__nav-panel { transition: none; }
}
.site-footer__nav-list { list-style: none; margin: 0; padding: 0 4px 16px; display: flex; flex-direction: column; }
.site-footer__nav-list li + li { border-top: 1px solid var(--footer-border); }
.site-footer__nav-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 44px;
	font: 400 15px/24px var(--nios-font);
	color: var(--footer-text);
	text-decoration: none;
}
.site-footer__nav-list a::after {
	content: '‹';
	flex-shrink: 0;
	font-size: 22px;
	line-height: 1;
	color: var(--footer-gold);
}
.site-footer__nav-list a:hover,
.site-footer__nav-list a:focus-visible { color: var(--footer-gold); text-decoration: underline; }
.site-footer__nav-list a:focus-visible { outline: 2px solid var(--footer-gold); outline-offset: 3px; border-radius: 2px; }
.site-footer__nav-list .current-menu-item > a { font-weight: 600; }

/* ---- Social / CTA / Benefits ---- */
.site-footer__mid { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.site-footer__mid-row { display: contents; }
.site-footer__social-heading { margin: 0; font: 600 15px/24px var(--nios-font); color: var(--footer-text); }
.site-footer__social { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; }
.site-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid var(--footer-gold);
	transition: background-color 200ms ease;
}
.site-footer__social-link:hover,
.site-footer__social-link:focus-visible { background: var(--footer-gold); }
.site-footer__social-link:focus-visible { outline: 2px solid var(--footer-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .site-footer__social-link { transition: none; } }

.site-footer__cta {
	position: relative;
	width: 100%;
	background: var(--footer-surface);
	border: 1px solid var(--footer-border);
	border-radius: 14px;
	box-shadow: 0 8px 18px rgba(51, 31, 13, 0.14);
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}
.site-footer__cta-image { display: block; width: 56px; height: 56px; object-fit: contain; }
.site-footer__cta-title { margin: 0; font: 600 21px/30px var(--nios-font); color: var(--footer-text); }
.site-footer__cta-desc { margin: 0; max-width: 328px; font: 400 14px/23px var(--nios-font); color: var(--footer-text); }
.site-footer__cta-button { width: 100%; max-width: 328px; height: 44px; border-radius: 10px; margin-top: 4px; background: var(--footer-dark); border-color: var(--footer-dark); }
.site-footer__cta-button:hover { background: #35281a; }
.site-footer__cta-button:focus-visible { outline: 2px solid var(--footer-gold); outline-offset: 2px; }

.site-footer__benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	background: var(--footer-surface);
	border: 1px solid var(--footer-border);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
}
.site-footer__benefit { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 14px 16px; text-align: center; }
.site-footer__benefit + .site-footer__benefit { border-top: 1px solid var(--footer-border); }
.site-footer__benefit-icon { flex-shrink: 0; }
.site-footer__benefit-text { display: flex; flex-direction: column; }
.site-footer__benefit-title { font: 600 14px/22px var(--nios-font); color: var(--footer-text); }
.site-footer__benefit-sub { font: 400 12px/20px var(--nios-font); color: var(--footer-text); }

/* ---- Legal bar ---- */
.site-footer__legal {
	margin-top: 40px;
	padding: 24px 0 32px;
	border-top: 1px solid var(--footer-border);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}
.site-footer__legal-item { margin: 0; font: 400 14px/22px var(--nios-font); color: var(--footer-text); text-decoration: none; }
a.site-footer__legal-credit:hover,
a.site-footer__legal-credit:focus-visible { color: var(--footer-gold); text-decoration: underline; }
a.site-footer__legal-credit:focus-visible { outline: 2px solid var(--footer-gold); outline-offset: 3px; border-radius: 2px; }

/* Legal-document links (accessibility/privacy/returns/terms) — real WP
   pages imported 2026-09-04, shown as their own row above the tagline/
   copyright row so the approved Figma legal-bar content stays untouched. */
.site-footer__legal-links { width: 100%; }
.site-footer__legal-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px 20px; }
.site-footer__legal-links a { display: inline-flex; align-items: center; min-height: 32px; font: 400 13px/20px var(--nios-font); color: var(--footer-muted); text-decoration: none; }
.site-footer__legal-links a:hover,
.site-footer__legal-links a:focus-visible { color: var(--footer-gold); text-decoration: underline; }
.site-footer__legal-links a:focus-visible { outline: 2px solid var(--footer-gold); outline-offset: 3px; border-radius: 2px; }
/* cookie-consent.css gives this button `font: inherit`, which resolved to 16px next to the 13px links. Higher specificity because that file loads after this one. */
.site-footer .site-footer__legal-links .nios-cookie-footer-trigger { display: inline-flex; align-items: center; min-height: 32px; font: 400 13px/20px var(--nios-font); color: var(--footer-muted); }
.site-footer .site-footer__legal-links .nios-cookie-footer-trigger:hover,
.site-footer .site-footer__legal-links .nios-cookie-footer-trigger:focus-visible { color: var(--footer-gold); text-decoration: underline; }
.site-footer .site-footer__legal-links .nios-cookie-footer-trigger:focus-visible { outline: 2px solid var(--footer-gold); outline-offset: 3px; border-radius: 2px; }

/* ---- Tablet 768–1199 (reference 1024) ---- */
@media (min-width: 768px) {
	.site-footer__inner { padding-inline: 40px; }

	.site-footer__top {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas: "brand brand brand" "quick categories service";
		align-items: start;
		gap: 32px 24px;
		text-align: right;
	}
	.site-footer__brand { grid-area: brand; align-items: flex-start; width: 100%; }
	.site-footer__desc { max-width: 600px; text-align: right; }
	.site-footer__contact { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 0; }
	.site-footer__contact li:not(:last-child)::after { content: '·'; margin-inline: 10px; color: var(--footer-muted); }

	.site-footer__nav-group--quick { grid-area: quick; }
	.site-footer__nav-group--categories { grid-area: categories; }
	.site-footer__nav-group--service { grid-area: service; }
	.site-footer__nav-group { max-width: none; border-top: 0; }

	.site-footer__nav-toggle { pointer-events: none; padding: 0 0 12px; font-size: 20px; line-height: 28px; border-bottom: 2px solid var(--footer-gold-2); width: fit-content; }
	.site-footer__nav-chevron { display: none; }
	.site-footer__nav-panel,
	.site-footer__nav-panel.is-open { grid-template-rows: 1fr; }
	.site-footer__nav-panel-inner { padding-top: 12px; }
	.site-footer__nav-list a { min-height: 40px; font-size: 14px; }
	.site-footer__mid { margin-top: 48px; }
	.site-footer__cta { flex-direction: row; text-align: right; padding: 24px 32px; gap: 24px; max-width: 640px; margin: 0 auto; }
	.site-footer__cta-image { width: 64px; height: 64px; }
	.site-footer__cta-body { flex: 1; }
	.site-footer__cta-desc { max-width: none; }
	.site-footer__cta-button { width: auto; min-width: 150px; }

	.site-footer__benefits { flex-direction: row; max-width: 868px; margin: 0 auto; }
	.site-footer__benefit { flex: 1; }
	.site-footer__benefit + .site-footer__benefit { border-top: 0; border-inline-start: 1px solid var(--footer-border); }

	.site-footer__legal { flex-direction: row; flex-wrap: nowrap; justify-content: center; gap: 8px 28px; }
	.site-footer__legal-links { width: auto; }

	/* No safe side-margin exists beside the CTA/legal bar at this width
	   (both run near-edge-to-edge) — hang the illustrations below the
	   footer's own bottom edge instead, guaranteeing zero overlap with any
	   footer content regardless of exact column widths. */
	.site-footer__decor { bottom: auto; top: calc(100% - 20px); }
	.site-footer__decor--left { width: 190px; }
	.site-footer__decor--right { width: 165px; }
}

/* ---- Desktop 1200–1599 (reference 1440) ---- */
@media (min-width: 1200px) {
	.site-footer__inner { max-width: 1360px; padding-inline: 24px; }

	.site-footer__decor { top: auto; bottom: 130px; }
	.site-footer__decor--left { width: 300px; }
	.site-footer__decor--right { width: 260px; }

	.site-footer__top {
		grid-template-columns: 1.5fr 1fr 1fr 1fr;
		grid-template-areas: "brand quick categories service";
		gap: 40px;
	}
	.site-footer__brand { align-items: flex-start; }
	.site-footer__desc { text-align: right; max-width: 320px; }
	.site-footer__contact { flex-direction: column; align-items: flex-start; }
	.site-footer__contact li:not(:last-child)::after { content: none; }

	.site-footer__nav-toggle { font-size: 22px; line-height: 30px; }
	.site-footer__nav-list { align-items: flex-start; }

	.site-footer__mid { margin-top: 56px; }
	.site-footer__mid-row { display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: center; gap: 20px; width: 100%; }
	.site-footer__cta { width: auto; flex: 1 1 650px; max-width: 650px; margin: 0; }
	.site-footer__benefits { width: auto; flex: 1 1 470px; max-width: 470px; margin: 0; }

	.site-footer__legal { justify-content: space-between; }
}

/* ---- Desktop Wide 1600+ — frozen, matches the approved/live 1920 design
   (Figma 178:2). Only tier with decorative art, the CTA illustration and
   the bordered contact icon boxes. ---- */
@media (min-width: 1600px) {
	.site-footer { padding-top: 48px; }
	.site-footer__inner { max-width: 1760px; padding-inline: 80px; }

	.site-footer__decor--left { left: 0; bottom: 150px; width: 380px; }
	.site-footer__decor--right { right: 0; bottom: 120px; width: 200px; }

	.site-footer__top { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
	.site-footer__desc { max-width: 320px; }
	.site-footer__logo img { width: 220px; }

	.site-footer__contact-icon { display: block; }
	.site-footer__contact-icon { border: 1px solid var(--footer-gold); border-radius: 11px; padding: 8px; box-sizing: content-box; width: 22px; height: 22px; }

	.site-footer__nav-toggle { font-size: 27px; line-height: 36px; }

	.site-footer__mid { margin-top: 32px; gap: 20px; }
	.site-footer__mid-row { gap: 35px; }
	.site-footer__cta { max-width: 660px; padding: 24px 40px; flex-basis: 660px; }
	.site-footer__cta { flex-direction: row-reverse; }
	.site-footer__cta-image { display: block; width: 88px; height: 88px; object-fit: contain; }
	.site-footer__benefits { max-width: 640px; flex-basis: 640px; }

	.site-footer__legal { margin-top: 24px; padding: 24px 0 32px; }
}


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

/*
================================================================
GIFT FINDER — 03_GIFT_FINDER (Figma nodes 203:2 Desktop Wide 1920
canonical, 203:86 Desktop 1440, 203:170 Tablet 1024, 200:2 Mobile 424
mobile-first source of truth; spec at 204:2). Mobile First, breakpoints
768 / 1200 / 1600 matching the Header/Hero/Footer system. Tokens share
the Footer's warm/gold palette (same values, scoped locally — the
project's established per-section token pattern).
================================================================
*/
.gift-finder {
	--gf-bg: #fbf7f0;
	--gf-surface: #fffdf9;
	--gf-border: #e5d5c2;
	--gf-text: #15110d;
	--gf-muted: #6d665f;
	--gf-gold: #b98745;
	--gf-dark: #21170f;
	background: var(--gf-bg);
	padding-block: 48px 56px;
}

.gift-finder__inner { max-width: 1920px; margin: 0 auto; padding-inline: 24px; }

/* Several elements below set their own `display` at various breakpoints
   (grid/flex), which — per normal CSS specificity — outranks the browser's
   own low-specificity `[hidden] { display:none }` default rule. Force it
   explicitly so JS toggling the `hidden` attribute always actually hides. */
.gift-finder [hidden] { display: none !important; }

/* ---- Header (eyebrow / title / description) ---- */
.gift-finder__header { text-align: center; max-width: 680px; margin: 0 auto 28px; }
.gift-finder__eyebrow { margin: 0 0 8px; font: 500 16px/24px var(--nios-font); color: var(--gf-gold); }
.gift-finder__title { margin: 0 0 12px; font: 700 32px/40px var(--nios-font); color: var(--gf-text); }
.gift-finder__description { margin: 0; font: 400 16px/25px var(--nios-font); color: var(--gf-muted); }

/* ---- Visual (image) — standalone rounded image at base/tablet ---- */
.gift-finder__visual { margin-bottom: 24px; border-radius: 18px; overflow: hidden; }
.gift-finder__visual-img { display: block; width: 100%; height: 230px; object-fit: cover; }

/* ---- Shell (unbordered wrapper at base/tablet; split-screen card at desktop) ---- */
.gift-finder__shell { background: transparent; }
.gift-finder__form { background: var(--gf-surface); }

/* ---- Stepper ----
   Figma (203:2) always lays step 1 leftmost, step 3 rightmost, regardless
   of the page's RTL direction — a deliberate LTR-style progress order, not
   a mirror of it. `direction:ltr` on the list makes the flex items follow
   that fixed visual order; `direction:rtl` is restored on each step so its
   own Hebrew label still renders correctly. */
.gift-finder__stepper {
	display: flex;
	direction: ltr;
	justify-content: center;
	align-items: flex-start;
	gap: 42px;
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}
.gift-finder__step { direction: rtl; width: 90px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.gift-finder__step-connector {
	flex: 1 1 0;
	min-width: 24px;
	height: 1px;
	margin-top: 21px; /* vertical center of the 42px step circle */
	background: var(--gf-border);
	align-self: flex-start;
}
.gift-finder__step-circle {
	display: flex; align-items: center; justify-content: center;
	width: 42px; height: 42px;
	border-radius: 50%;
	border: 1px solid var(--gf-border);
	background: var(--gf-surface);
	font: 600 20px/1 var(--nios-font);
	color: var(--gf-text);
}
.gift-finder__step-label { font: 400 13px/20px var(--nios-font); color: var(--gf-text); }
/* Below 360px the three steps, two connectors and four 42px gaps are wider than
   the screen (16px horizontal scroll at 320px, found 2026-10-10). Tighter gaps
   only there; 360px and up are unchanged. */
@media (max-width: 359px) {
	.gift-finder__stepper { gap: 10px; }
	.gift-finder__step-connector { min-width: 12px; }
}
.gift-finder__step.is-current .gift-finder__step-circle { background: var(--gf-dark); border-color: var(--gf-dark); color: #fff; }
.gift-finder__step.is-current .gift-finder__step-label,
.gift-finder__step.is-complete .gift-finder__step-label { font-weight: 600; }
.gift-finder__step.is-complete .gift-finder__step-circle { border-color: var(--gf-gold); }

/* ---- Question + choices ---- */
.gift-finder__question-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.gift-finder__question-title { margin: 0; font: 700 28px/38px var(--nios-font); color: var(--gf-text); }
.gift-finder__progress { margin: 0; font: 600 16px/24px var(--nios-font); color: var(--gf-gold); }

.gift-finder__choices {
	display: grid;
	direction: ltr; /* Figma (203:2) always fills the grid left-to-right regardless of RTL; CSS Grid auto-placement otherwise fills from the inline-start (right) side under dir=rtl. */
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin: 0 0 20px;
	padding: 0;
	border: 0;
}
.gift-finder__choice {
	direction: rtl;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 90px;
	padding: 12px 8px;
	border-radius: 12px;
	border: 1px solid var(--gf-border);
	background: var(--gf-surface);
	cursor: pointer;
	text-align: center;
}
.gift-finder__choice-input {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.gift-finder__choice-icon { display: flex; width: 30px; height: 30px; }
.gift-finder__choice-icon img { width: 100%; height: 100%; object-fit: contain; }
.gift-finder__choice-label { font: 400 16px/20px var(--nios-font); color: var(--gf-text); }
.gift-finder__choice:hover { border-color: var(--gf-gold); }
.gift-finder__choice.is-selected {
	border-color: var(--gf-gold);
	border-width: 1.5px;
	padding: 11.5px 7.5px;
}
.gift-finder__choice.is-selected .gift-finder__choice-label { font-weight: 600; }
.gift-finder__choice-input:focus-visible ~ .gift-finder__choice-icon,
.gift-finder__choice-input:focus-visible ~ .gift-finder__choice-label {
	outline: 2px solid var(--gf-gold);
	outline-offset: 4px;
}

/* ---- Actions + status ---- */
.gift-finder__actions { display: flex; gap: 12px; margin-bottom: 24px; }
.gift-finder__actions .btn { flex: 1; height: 56px; border-radius: 10px; }
.gift-finder__next:disabled { opacity: 0.5; cursor: not-allowed; }
.gift-finder__next:not(:disabled):hover { filter: brightness(1.08); }
.gift-finder__status { min-height: 1px; margin-bottom: 8px; font: 400 14px/20px var(--nios-font); color: var(--gf-muted); }
.gift-finder__status:empty { margin: 0; }
.gift-finder__status[data-state="error"] { color: #b3261e; }

/* ---- Benefits (2x2 on mobile) ---- */
.gift-finder__benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 0; padding-top: 24px; border-top: 1px solid var(--gf-border); }
.gift-finder__benefit { text-align: center; padding-inline: 8px; }
.gift-finder__benefit-title { margin: 0 0 6px; font: 600 14px/1 var(--nios-font); color: var(--gf-text); }
.gift-finder__benefit-desc { margin: 0; font: 400 12px/18px var(--nios-font); color: var(--gf-muted); }

/* ---- Results ---- */
.gift-finder__results { margin-top: 32px; }
.gift-finder__results-heading { margin: 0 0 20px; text-align: center; font: 700 26px/1.3 var(--nios-font); color: var(--gf-text); }
/* Result cards reuse the shop's own .shop-card markup and styles (see
   template-parts/shop/product-card.php), so recommendations look exactly like
   the store. The list is a horizontal scroll-snap carousel. --gf-rw is the
   width of the aligned content column (the page container); the track itself
   bleeds to the section edges so cards scroll under the viewport edge, and its
   inline padding lines the first card up with the column. */
.gift-finder__results { --gf-rw: 100%; }
.gift-finder__results-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: var(--gf-rw); margin-inline: auto; margin-bottom: 14px; }
.gift-finder__results-head .gift-finder__results-heading { margin: 0; }
.gift-finder__arrows { display: none; gap: 8px; flex-shrink: 0; }
.gift-finder__arrows[hidden], .gift-finder__chips[hidden] { display: none !important; }
.gift-finder__arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--gf-border); background: var(--gf-surface); color: var(--gf-text); cursor: pointer; }
.gift-finder__arrow:hover:not(:disabled) { border-color: var(--gf-gold); }
.gift-finder__arrow:focus-visible { outline: 2px solid var(--gf-gold); outline-offset: 2px; }
.gift-finder__arrow:disabled { opacity: 0.4; cursor: default; }
.gift-finder__chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: var(--gf-rw); margin: 0 auto 18px; padding: 0; }
.gift-finder__chip { display: inline-flex; align-items: center; height: 32px; padding-inline: 14px; border-radius: 16px; background: #f2e7d7; color: var(--gf-text); font: 500 13px/1 var(--nios-font); }
.gift-finder__carousel { margin-inline: -24px; }
.gift-finder__results-grid {
	list-style: none; margin: 0; padding: 4px;
	padding-inline: max( 24px, calc( ( 100% - var(--gf-rw) ) / 2 ) );
	scroll-padding-inline: max( 24px, calc( ( 100% - var(--gf-rw) ) / 2 ) );
	display: flex; gap: 12px; justify-content: safe center;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.gift-finder__results-grid::-webkit-scrollbar { display: none; }
.gift-finder__results-grid > .shop-card { flex: 0 0 236px; min-width: 0; scroll-snap-align: start; }
.gift-finder__result-reason { color: var(--nios-accent); }
.gift-finder__results-actions { display: flex; justify-content: center; margin-top: 24px; }
.gift-finder__results-empty { flex: 1 1 100%; text-align: center; color: var(--gf-muted); padding: 24px 0; }
.gift-finder__results-actions .btn { width: auto; min-width: 200px; padding-inline: 32px; }
@media (max-width: 767px) {
	.gift-finder__results-head { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.gift-finder * { transition: none !important; animation: none !important; }
}

/* ---- Tablet 768+ (reference 1024) ---- */
@media (min-width: 768px) {
	.gift-finder__visual-img { height: 340px; }
	.gift-finder__form { padding: 32px; border-radius: 18px; }
	.gift-finder__choices { grid-template-columns: repeat(3, 1fr); gap: 18px 22px; }
	.gift-finder__choice { border-radius: 13px; min-height: 128px; }
	.gift-finder__benefits { grid-template-columns: repeat(4, 1fr); gap: 0 16px; }
	.gift-finder__arrows { display: flex; }
	.gift-finder__chips { justify-content: flex-start; }
	.gift-finder__results-grid { gap: 20px; }
	.gift-finder__results-grid > .shop-card { flex-basis: 260px; }
}

/* ---- Desktop 1200+ (reference 1440) — split-screen begins ---- */
@media (min-width: 1200px) {
	.gift-finder__shell {
		max-width: 1320px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: 41fr 47fr;
		background: var(--gf-surface);
		border: 1px solid var(--gf-border);
		border-radius: 14px;
		overflow: hidden;
	}
	.gift-finder__visual { margin: 0; border-radius: 0; height: 100%; }
	.gift-finder__visual-img { height: 100%; min-height: 555px; }
	.gift-finder__form { padding: 40px; }
	.gift-finder__stepper { justify-content: flex-start; gap: 60px; }
	.gift-finder__choices { gap: 12px 15px; }
	.gift-finder__choice { border-radius: 9px; min-height: 87px; }
	.gift-finder__actions { max-width: 525px; }
	.gift-finder__benefits { grid-template-columns: repeat(4, 1fr); border-top: 0; padding-top: 32px; }
	.gift-finder__results { --gf-rw: 1320px; }
	.gift-finder__results-grid > .shop-card { flex-basis: 300px; }
}

/* ---- Desktop Wide 1600+ (reference 1920, canonical) ---- */
@media (min-width: 1600px) {
	.gift-finder__title { font-size: 44px; line-height: 52px; }
	.gift-finder__description { font-size: 18px; line-height: 27px; }
	.gift-finder__shell { max-width: 1760px; border-radius: 18px; }
	.gift-finder__results { --gf-rw: 1524px; }
	.gift-finder__visual-img { min-height: 740px; }
	.gift-finder__form { padding: 55px; }
	.gift-finder__stepper { gap: 74px; }
	.gift-finder__question-title { font-size: 34px; line-height: 44px; }
	.gift-finder__choices { gap: 16px 20px; }
	.gift-finder__choice { border-radius: 12px; min-height: 116px; }
	.gift-finder__choice-icon { width: 38px; height: 38px; }
	.gift-finder__choice-label { font-size: 18px; }
	.gift-finder__actions { max-width: 700px; }
	.gift-finder__actions .btn { height: 58px; }
}
a.site-footer__legal-credit:hover,
a.site-footer__legal-credit:focus-visible { color: var(--footer-gold); text-decoration: underline; }
a.site-footer__legal-credit:focus-visible { outline: 2px solid var(--footer-gold); outline-offset: 3px; border-radius: 2px; }

/* ---- Tablet 768–1199 (reference 1024) ---- */
@media (min-width: 768px) {
	.site-footer__inner { padding-inline: 40px; }

	.site-footer__top {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas: "brand brand brand" "quick categories service";
		align-items: start;
		gap: 32px 24px;
		text-align: right;
	}
	.site-footer__brand { grid-area: brand; align-items: flex-start; width: 100%; }
	.site-footer__desc { max-width: 600px; text-align: right; }
	.site-footer__contact { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 0; }
	.site-footer__contact li:not(:last-child)::after { content: '·'; margin-inline: 10px; color: var(--footer-muted); }

	.site-footer__nav-group--quick { grid-area: quick; }
	.site-footer__nav-group--categories { grid-area: categories; }
	.site-footer__nav-group--service { grid-area: service; }
	.site-footer__nav-group { max-width: none; border-top: 0; }

	.site-footer__nav-toggle { pointer-events: none; padding: 0 0 12px; font-size: 20px; line-height: 28px; border-bottom: 2px solid var(--footer-gold-2); width: fit-content; }
	.site-footer__nav-chevron { display: none; }
	.site-footer__nav-panel,
	.site-footer__nav-panel.is-open { grid-template-rows: 1fr; }
	.site-footer__nav-panel-inner { padding-top: 12px; }
	.site-footer__nav-list a { min-height: 40px; font-size: 14px; }
	.site-footer__mid { margin-top: 48px; }
	.site-footer__cta { flex-direction: row; text-align: right; padding: 24px 32px; gap: 24px; max-width: 640px; margin: 0 auto; }
	.site-footer__cta-image { width: 64px; height: 64px; }
	.site-footer__cta-body { flex: 1; }
	.site-footer__cta-desc { max-width: none; }
	.site-footer__cta-button { width: auto; min-width: 150px; }

	.site-footer__benefits { flex-direction: row; max-width: 868px; margin: 0 auto; }
	.site-footer__benefit { flex: 1; }
	.site-footer__benefit + .site-footer__benefit { border-top: 0; border-inline-start: 1px solid var(--footer-border); }

	.site-footer__legal { flex-direction: row; flex-wrap: nowrap; justify-content: center; gap: 8px 28px; }
	.site-footer__legal-links { width: auto; }

	/* No safe side-margin exists beside the CTA/legal bar at this width
	   (both run near-edge-to-edge) — hang the illustrations below the
	   footer's own bottom edge instead, guaranteeing zero overlap with any
	   footer content regardless of exact column widths. */
	.site-footer__decor { bottom: auto; top: calc(100% - 20px); }
	.site-footer__decor--left { width: 190px; }
	.site-footer__decor--right { width: 165px; }
}

/* ---- Desktop 1200–1599 (reference 1440) ---- */
@media (min-width: 1200px) {
	.site-footer__inner { max-width: 1360px; padding-inline: 24px; }

	.site-footer__decor { top: auto; bottom: 130px; }
	.site-footer__decor--left { width: 300px; }
	.site-footer__decor--right { width: 260px; }

	.site-footer__top {
		grid-template-columns: 1.5fr 1fr 1fr 1fr;
		grid-template-areas: "brand quick categories service";
		gap: 40px;
	}
	.site-footer__brand { align-items: flex-start; }
	.site-footer__desc { text-align: right; max-width: 320px; }
	.site-footer__contact { flex-direction: column; align-items: flex-start; }
	.site-footer__contact li:not(:last-child)::after { content: none; }

	.site-footer__nav-toggle { font-size: 22px; line-height: 30px; }
	.site-footer__nav-list { align-items: flex-start; }

	.site-footer__mid { margin-top: 56px; }
	.site-footer__mid-row { display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: center; gap: 20px; width: 100%; }
	.site-footer__cta { width: auto; flex: 1 1 650px; max-width: 650px; margin: 0; }
	.site-footer__benefits { width: auto; flex: 1 1 470px; max-width: 470px; margin: 0; }

	.site-footer__legal { justify-content: space-between; }
}

/* ---- Desktop Wide 1600+ — frozen, matches the approved/live 1920 design
   (Figma 178:2). Only tier with decorative art, the CTA illustration and
   the bordered contact icon boxes. ---- */
@media (min-width: 1600px) {
	.site-footer { padding-top: 48px; }
	.site-footer__inner { max-width: 1760px; padding-inline: 80px; }

	.site-footer__decor--left { left: 0; bottom: 150px; width: 380px; }
	.site-footer__decor--right { right: 0; bottom: 120px; width: 200px; }

	.site-footer__top { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
	.site-footer__desc { max-width: 320px; }
	.site-footer__logo img { width: 220px; }

	.site-footer__contact-icon { display: block; }
	.site-footer__contact-icon { border: 1px solid var(--footer-gold); border-radius: 11px; padding: 8px; box-sizing: content-box; width: 22px; height: 22px; }

	.site-footer__nav-toggle { font-size: 27px; line-height: 36px; }

	.site-footer__mid { margin-top: 32px; gap: 20px; }
	.site-footer__mid-row { gap: 35px; }
	.site-footer__cta { max-width: 660px; padding: 24px 40px; flex-basis: 660px; }
	.site-footer__cta { flex-direction: row-reverse; }
	.site-footer__cta-image { display: block; width: 88px; height: 88px; object-fit: contain; }
	.site-footer__benefits { max-width: 640px; flex-basis: 640px; }

	.site-footer__legal { margin-top: 24px; padding: 24px 0 32px; }
}




/*
================================================================
VIDEO SHOWCASE (Section 3, "NIOS_S03_VIDEO") — Mobile First.
Sources of truth: Mobile 424 (223:18), Tablet 768 (223:83),
Desktop 1920 (223:148). Card layout/spacing/typography follow
Figma exactly; content mechanism (real poster + real self-hosted
video, autoplay-muted only while in view, mute toggle) matches
the legacy site's own "video-carousel-section" (nameitonsteel.com),
reused deliberately rather than an Instagram embed (2026-09-06).
Breakpoints match the project's existing ladder: 768px / 1200px
(no separate 1600px tier needed — this section has no Desktop
Wide-only content).
================================================================
*/

.video-showcase {
	--vs-ink: #171717;
	--vs-muted: #666159;
	--vs-gold: #cfa66b;
	--vs-divider: #e3ded8;
	--vs-overlay: #12110e;
	background: var(--nios-bg);
	padding: 48px 0 56px;
}

.video-showcase__inner {
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 16px;
	text-align: center;
}

.video-showcase__eyebrow {
	margin: 0 0 8px;
	font: 500 12px/20px var(--nios-font);
	color: var(--vs-gold);
}

.video-showcase__title {
	margin: 0 0 12px;
	font: 700 26px/1.25 var(--nios-font);
	color: var(--vs-ink);
}

.video-showcase__description {
	margin: 0 0 20px;
	font: 400 14px/20px var(--nios-font);
	color: var(--vs-muted);
}

.video-showcase__divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 24px;
}
.video-showcase__divider-line { width: 90px; height: 1px; background: var(--vs-divider); }
.video-showcase__divider-heart { font-size: 14px; line-height: 1; color: var(--vs-gold); }

/* ---- Rail ---- */
.video-showcase__rail-wrap {
	/* Matches the rail's own forced direction:ltr (see below) so the
	   prev/next buttons land on their intuitive sides (prev toward item 1,
	   on the left; next toward later items, on the right) instead of being
	   flipped by the page's ambient RTL flex order. */
	direction: ltr;
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}

/*
 * Figma lays the rail out strictly left-to-right (item 1 leftmost)
 * regardless of the page's dir="rtl" — the same intentional pattern
 * already found and fixed in the Gift Finder stepper/choice-grid
 * (2026-09-06): forcing direction:ltr on the row and restoring
 * direction:rtl per item keeps DOM order == visual order == Figma,
 * while each card's own Hebrew text still renders correctly.
 */
.video-showcase__rail {
	direction: ltr;
	display: flex;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.video-showcase__rail::-webkit-scrollbar { display: none; }

.video-showcase__slide {
	direction: rtl;
	flex: 0 0 auto;
	scroll-snap-align: start;
	width: 230px;
}

.video-showcase__card {
	position: relative;
	width: 100%;
	height: 500px;
	border-radius: 18px;
	overflow: hidden;
	background: #2e261f;
}

.video-showcase__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #2e261f;
}

.video-showcase__mute {
	position: absolute;
	bottom: 12px;
	left: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: rgba(18, 17, 14, 0.55);
	color: #fff;
	cursor: pointer;
}
.video-showcase__mute:focus-visible { outline: 3px solid var(--nios-accent); outline-offset: 2px; }
.video-showcase__mute-icon--unmuted { display: none; }
.video-showcase__card.is-unmuted .video-showcase__mute-icon--muted { display: none; }
.video-showcase__card.is-unmuted .video-showcase__mute-icon--unmuted { display: block; }

.video-showcase__title-badge {
	position: absolute;
	right: 12px;
	bottom: 12px;
	max-width: calc(100% - 60px);
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(18, 17, 14, 0.55);
	color: #fff;
	font: 500 12px/1.3 var(--nios-font);
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- Rail arrows (desktop only, see JS) ---- */
.video-showcase__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border: 1px solid var(--nios-border);
	border-radius: 50%;
	background: var(--nios-white);
	color: var(--vs-ink);
	cursor: pointer;
}
.video-showcase__arrow svg { width: 8px; height: 14px; display: block; }
.video-showcase__arrow--next svg { transform: rotate(180deg); }
.video-showcase__arrow:disabled { opacity: 0.35; cursor: default; }
.video-showcase__arrow:focus-visible { outline: 3px solid var(--nios-accent); outline-offset: 2px; }
.video-showcase__arrow[hidden] { display: none; }

/* ---- Hints (mobile vs tablet/desktop copy differ, per Figma) ---- */
.video-showcase__hint {
	margin: 18px 0 0;
	font: 400 11px/20px var(--nios-font);
	color: var(--vs-muted);
}
.video-showcase__hint--wide { display: none; }

.video-showcase__cta-heading {
	margin: 20px 0 16px;
	font: 500 15px/24px var(--nios-font);
	color: var(--vs-ink);
}

.video-showcase__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 240px;
	height: 52px;
	padding: 0 28px;
	border-radius: 10px;
	background: var(--vs-overlay);
	color: #fff;
	font: 500 14px/1 var(--nios-font);
	text-decoration: none;
}
.video-showcase__cta:hover,
.video-showcase__cta:focus-visible { filter: brightness(1.12); }
.video-showcase__cta:focus-visible { outline: 3px solid var(--nios-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.video-showcase * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---- Tablet 768+ (reference 768) ---- */
@media (min-width: 768px) {
	.video-showcase__inner { max-width: 768px; padding: 0 32px; }
	.video-showcase__eyebrow { font-size: 14px; }
	.video-showcase__title { font-size: 38px; margin-bottom: 16px; }
	.video-showcase__description { font-size: 16px; margin-bottom: 24px; }
	.video-showcase__slide { width: 210px; }
	.video-showcase__card { height: 430px; }
	.video-showcase__rail { gap: 16px; }
	.video-showcase__hint--mobile { display: none; }
	.video-showcase__hint--wide { display: block; font-size: 12px; }
	.video-showcase__cta-heading { font-size: 17px; }
}

/* ---- Desktop 1200+ (reference 1920) ---- */
@media (min-width: 1200px) {
	.video-showcase { padding: 64px 0 72px; }
	.video-showcase__inner { max-width: 1920px; padding: 0 80px; }
	.video-showcase__title { font-size: 48px; }
	.video-showcase__slide { width: 220px; }
	.video-showcase__card { height: 400px; }
	.video-showcase__rail { gap: 16px; }
	.video-showcase__rail-wrap { gap: 24px; }
}







/* =======================================================================
   S04 Before / After (NIOS_S04_BEFORE_AFTER_*, Figma nodes 228:179/255/331)
   Model (2026-09-06 revision): no separate after-photo — the same product
   image backs both sides; "after" is the visitor's freely dragged/resized
   personalization (photo/icon/text/greeting) rendered on top of it. CTA
   adds to the real WooCommerce cart. Mobile-first: base = Mobile 424,
   768px+ = Tablet 768, 1200px+ = Desktop 1920 (fluid via fr-unit grid
   columns, capped at the shell's natural 1804px content width so it
   resolves pixel-exact once the container reaches that width, same
   "exact only at the frame's own width" pattern already used by
   Categories/Hero for sections given a single wide frame).
   ======================================================================= */
.before-after-s04 {
	--ba-bg: #fcf9f4;
	--ba-surface: #fffdf9;
	--ba-border: #e4d8c8;
	--ba-text: #171717;
	--ba-muted: #666159;
	--ba-gold: #a96a19;
	--ba-dark: #12110e;
	--ba-complete: #5a883c;
	--ba-ink: #2b2722;
	background: var(--ba-bg);
	padding-block: 40px 48px;
}
.before-after-s04 [hidden] { display: none !important; }
.before-after-s04__inner { max-width: 1920px; margin: 0 auto; padding-inline: 16px; }

/* ---- Header ---- */
.before-after-s04__header { text-align: center; max-width: 680px; margin: 0 auto 20px; }
.before-after-s04__eyebrow { margin: 0 0 8px; font: 500 14px/22px var(--nios-font); color: var(--ba-gold); }
.before-after-s04__heading { margin: 0 0 12px; font: 700 30px/38px var(--nios-font); color: var(--ba-text); }
.before-after-s04__description { margin: 0; font: 400 14px/22px var(--nios-font); color: var(--ba-muted); }

/* ---- Preview ---- */
.before-after-s04__preview-media {
	position: relative;
	height: 330px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--ba-border);
}
.before-after-s04__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.before-after-s04__img--before.is-animated,
.before-after-s04__divider.is-animated,
.before-after-s04__handle.is-animated { transition: clip-path 0.25s ease, left 0.25s ease; }
.before-after-s04__label {
	position: absolute;
	top: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 30px;
	border-radius: 8px;
	background: var(--ba-surface);
	font: 600 14px/1 var(--nios-font);
	color: var(--ba-text);
	pointer-events: none;
	z-index: 3;
}
.before-after-s04__label--before { left: 18px; }
.before-after-s04__label--after { right: 18px; }
.before-after-s04__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	background: #fff;
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 3;
}
.before-after-s04__handle {
	position: absolute;
	top: 50%;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	border: 0;
	box-shadow: 0 2px 8px rgba(0,0,0,0.18);
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	direction: ltr; /* prevents the ‹ › glyphs from bidi-mirroring under the page's RTL direction */
	gap: 2px;
	font: 700 20px/1 var(--nios-font);
	color: var(--ba-text);
	cursor: ew-resize;
	touch-action: none;
	z-index: 3;
}
.before-after-s04__handle:focus-visible { outline: 2px solid var(--ba-gold); outline-offset: 3px; }

/* ---- Live personalization layers (photo/icon/text/greeting) ----
   The wrapper carries its own clip-path, kept in sync with the slider
   position in JS (renderSlider()) as the exact mirror of the Before
   layer's own clip — so "before" genuinely shows the plain product (the
   layers don't paint or receive pointer events there at all) and "after"
   genuinely shows the engraving, instead of relying on paint order to
   occlude them (that was the previous, buggy approach: an explicit
   z-index on this wrapper silently overrode the intended Before-on-top
   stacking, so the layers rendered everywhere regardless of the slider).
   Each layer is independently draggable (pointerdown+move on its body)
   and resizable (its own corner handle) by the visitor. Ink renders via
   mix-blend-mode:multiply so it visually sinks into the product's own
   material/texture instead of sitting on top like a flat sticker, and the
   photo layer additionally runs through the #ba-dxf-engrave SVG filter
   (blur → grayscale → hard threshold) so it reads as a 2-tone engraved
   stencil instead of a full-color photo — a deliberately lightweight,
   real-time preview approximation, not the final production engraving
   file (that still goes through the project's real DXF pipeline before
   manufacturing).

   Deliberately no z-index here: an explicit z-index would start a new
   stacking context, which isolates each layer's mix-blend-mode from the
   product photo behind it (blend-mode only reaches backdrop content
   inside the same stacking context) — the ink would then blend against
   nothing and render as flat opaque color instead of sinking into the
   material. Paint order (After image → layers → Before image) is already
   correct from plain DOM order, since all three are position:absolute
   with z-index:auto. */
.before-after-s04__layers { position: absolute; inset: 0; }
/* Deliberately NO transition on this element's clip-path, even though the
   Before image/divider/handle all animate theirs (see .is-animated above).
   A real bug (2026-09-06): animating clip-path here appears to make some
   browsers promote this element to its own compositing layer, which
   re-isolates its mix-blend-mode descendants from the real backdrop —
   the same family of bug as the transform/z-index issues fixed earlier on
   this element and .layer-body, just triggered by a CSS transition this
   time. The visitor drags the handle continuously anyway, so the reveal
   already updates every pointermove — losing the eased snap here for
   click/keyboard jumps is a small, worthwhile trade against a real,
   recurring rendering bug. */
.before-after-s04__layer { position: absolute; }
.before-after-s04__layer-body {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	padding: 6px;
	margin: 0;
	cursor: grab;
	touch-action: none;
	border-radius: 8px;
	/* mix-blend-mode lives HERE, not on the img/text child below, because
	   `transform` already makes this element the root of its own stacking
	   context — a blend-mode on a descendant of a stacking-context root can
	   only blend against backdrop content inside that same local context
	   (i.e. against nothing, since this button has no other painted
	   siblings), so it would render as flat opaque color instead of
	   sinking into the product photo behind it. Applying it here, on the
	   context root itself, blends the whole composited button against the
	   real backdrop in the parent context. */
	mix-blend-mode: multiply;
}
.before-after-s04__layer.is-selected .before-after-s04__layer-body {
	outline: 1px dashed rgba(43, 39, 34, 0.55);
	outline-offset: 2px;
	background: rgba(255, 255, 255, 0.18);
}
.before-after-s04__layer-body:focus-visible { outline: 2px solid var(--ba-gold); outline-offset: 2px; }
.before-after-s04__layer-img {
	max-width: 140px;
	max-height: 140px;
	width: auto;
	height: auto;
	filter: url(#ba-dxf-engrave); /* fallback-only stencil look, for when Gemini wasn't available and the raw local upload is shown instead */
	pointer-events: none;
	display: block;
}
.before-after-s04__layer-img[data-ba-photo-source="gemini"] {
	/* Naor's explicit instruction, 2026-09-06, while iterating on real-photo
	   quality: show Gemini's own output exactly as returned, no manipulation
	   beyond the prompt itself — a real double-thresholding bug was crushing
	   a recognizable face into a near-solid black blob. */
	filter: none;
}
/* Photo layer, canvas-rendered path (2026-09-07): before-after.js now turns
   the photo into pure ink-with-alpha itself (renderInkAlpha()), so ordinary
   alpha compositing already produces the multiply result — and this layer
   no longer touches mix-blend-mode at all, which reproducibly broke here
   into a hard-edged opaque box over part of the portrait even on first
   paint (CHANGELOG 2026-09-07). The rules above stay as the soft fallback
   for when that render fails (the attribute is then never set). The faint
   white selection tint was invisible under multiply; kept invisible here. */
.before-after-s04__layer[data-ba-render="ink"] .before-after-s04__layer-body { mix-blend-mode: normal; }
.before-after-s04__layer[data-ba-render="ink"].is-selected .before-after-s04__layer-body { background: transparent; }
.before-after-s04__layer[data-ba-render="ink"] .before-after-s04__layer-img { filter: none; }
.before-after-s04__layer-icon {
	width: 32px;
	max-width: none; /* the site's global `img{max-width:100%}` reset resolves against this flex item's own (circularly content-sized) container width, which can compute to 0 — break out of it since we set an explicit pixel size anyway */
	height: 32px;
	color: var(--ba-ink);
	pointer-events: none;
}
.before-after-s04__layer-text {
	font: 600 20px/1.2 var(--nios-font);
	color: var(--ba-ink);
	white-space: nowrap;
	pointer-events: none;
}
.before-after-s04__layer-greeting {
	font: 400 14px/1.2 var(--nios-font);
	color: var(--ba-ink);
	white-space: nowrap;
	pointer-events: none;
}
.before-after-s04__layer-handle {
	position: absolute;
	left: 0;
	top: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--ba-border);
	box-shadow: 0 1px 4px rgba(0,0,0,0.2);
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	color: var(--ba-ink);
	cursor: nwse-resize;
	touch-action: none;
	padding: 0;
}
.before-after-s04__layer.is-selected .before-after-s04__layer-handle { display: flex; }
.before-after-s04__layer-handle:focus-visible { outline: 2px solid var(--ba-gold); outline-offset: 2px; display: flex; }

/* ---- Controls panel ---- */
.before-after-s04__controls {
	margin-top: 16px;
	background: var(--ba-surface);
	border: 1px solid var(--ba-border);
	border-radius: 14px;
	padding: 20px;
}
.before-after-s04__step { margin-bottom: 22px; }
.before-after-s04__step:last-of-type { margin-bottom: 20px; }
.before-after-s04__step-title { margin: 0 0 10px; font: 600 13px/20px var(--nios-font); color: var(--ba-text); }
/* Figma fixes badge=physical-left / check=physical-right within each step
   row regardless of page RTL (same fixed-LTR convention as the tiles/icons
   rows below) — direction:rtl is restored on the text-bearing children so
   their own Hebrew content still reads and aligns correctly. */
.before-after-s04__step-row { display: flex; direction: ltr; align-items: center; gap: 10px; }
.before-after-s04__step-status,
.before-after-s04__input,
.before-after-s04__counter { direction: rtl; }
.before-after-s04__step-badge {
	flex: none;
	display: flex; align-items: center; justify-content: center;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--ba-surface);
	border: 1px solid var(--ba-border);
	font: 600 15px/1 var(--nios-font);
	color: var(--ba-text);
}
.before-after-s04__step-status { flex: 1; font: 400 14px/20px var(--nios-font); color: var(--ba-text); }
.before-after-s04__step-check {
	flex: none;
	display: flex; align-items: center; justify-content: center;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--ba-complete);
	color: #fff;
	font: 700 12px/1 var(--nios-font);
}

/* Product tiles — horizontal scroll rail on mobile (accommodates any admin-
   configured product count without overflowing). Figma always lists
   products left-to-right regardless of page RTL (same fixed-LTR pattern as
   the Gift Finder choices grid) — direction:rtl restored per-tile so its
   own Hebrew label still reads correctly. */
.before-after-s04__tiles {
	display: flex;
	direction: ltr;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 2px;
	scroll-snap-type: x proximity;
	margin-bottom: 12px;
}
.before-after-s04__tile {
	direction: rtl;
	scroll-snap-align: start;
	flex: 0 0 84px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 82px;
	border-radius: 9px;
	border: 1px solid var(--ba-border);
	background: var(--ba-bg);
	cursor: pointer;
	padding: 8px 4px;
}
.before-after-s04__tile:hover { border-color: var(--ba-gold); }
.before-after-s04__tile.is-selected { border-color: var(--ba-text); background: var(--ba-surface); }
.before-after-s04__tile:focus-visible { outline: 2px solid var(--ba-gold); outline-offset: 2px; }
.before-after-s04__tile-media { width: 25px; height: 25px; color: var(--ba-text); }
.before-after-s04__tile-media--icon { object-fit: contain; }
.before-after-s04__tile-label { font: 500 12px/16px var(--nios-font); color: var(--ba-text); text-align: center; }

.before-after-s04__upload-btn {
	flex: none;
	display: inline-flex; align-items: center; gap: 6px;
	height: 38px;
	padding-inline: 14px;
	border-radius: 7px;
	border: 1px solid var(--ba-border);
	background: #f7efe4;
	font: 500 13px/1 var(--nios-font);
	color: var(--ba-text);
	cursor: pointer;
}
.before-after-s04__upload-btn:hover { border-color: var(--ba-gold); }
.before-after-s04__upload-btn:focus-visible { outline: 2px solid var(--ba-gold); outline-offset: 2px; }
.before-after-s04__upload-thumb {
	flex: none;
	width: 44px; height: 44px;
	border-radius: 8px;
	border: 1px solid var(--ba-border);
	background-color: var(--ba-border);
	background-size: cover;
	background-position: center;
}
.before-after-s04__upload-thumb[hidden] { display: none; }
.before-after-s04__upload-spinner {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 3px solid rgba(43, 39, 34, 0.15);
	border-top-color: var(--ba-gold);
	animation: nios-ba-spin 0.8s linear infinite;
}
.before-after-s04__upload-spinner[hidden] { display: none; }
@keyframes nios-ba-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.before-after-s04__upload-spinner { animation-duration: 2.4s; }
}
.before-after-s04__helper { margin: 8px 0 0; font: 400 12px/18px var(--nios-font); color: var(--ba-muted); }
.before-after-s04__helper[data-state="error"] { color: #b3261e; }
.before-after-s04__helper[data-state="success"] { color: var(--ba-complete); }

.before-after-s04__input {
	flex: 1;
	min-width: 0;
	height: 38px;
	padding-inline: 12px;
	border-radius: 7px;
	border: 1px solid var(--ba-border);
	background: var(--ba-surface);
	font: 400 14px/1 var(--nios-font);
	color: var(--ba-text);
}
.before-after-s04__input:focus-visible { outline: 2px solid var(--ba-gold); outline-offset: 1px; }
.before-after-s04__counter { flex: none; font: 400 12px/1 var(--nios-font); color: var(--ba-muted); }

.before-after-s04__icons { flex: 1; direction: ltr; display: flex; flex-wrap: wrap; gap: 8px; }
.before-after-s04__icon-btn {
	flex: 0 0 auto;
	width: 44px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 7px;
	border: 1px solid var(--ba-border);
	background: var(--ba-bg);
	color: var(--ba-text);
	cursor: pointer;
}
.before-after-s04__icon-btn img { width: 20px; height: 20px; }
.before-after-s04__icon-btn:hover { border-color: var(--ba-gold); }
.before-after-s04__icon-btn.is-selected { border-width: 2px; border-color: var(--ba-text); background: var(--ba-surface); }
.before-after-s04__icon-btn:focus-visible { outline: 2px solid var(--ba-gold); outline-offset: 2px; }

.before-after-s04__buy-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.before-after-s04__price { font: 700 18px/1 var(--nios-font); color: var(--ba-text); }
.before-after-s04__price ins { text-decoration: none; }
.before-after-s04__price del { opacity: 0.6; font-weight: 400; margin-inline-end: 6px; }
.before-after-s04__cta { flex: 1; display: flex; height: 44px; }
.before-after-s04__cta:disabled { opacity: 0.6; cursor: not-allowed; }
.before-after-s04__cta-status { margin: 8px 0 0; min-height: 1px; font: 400 13px/18px var(--nios-font); color: var(--ba-muted); text-align: center; }
.before-after-s04__cta-status:empty { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.before-after-s04 * { transition: none !important; }
}

/* ---- Tablet 768+ ---- */
@media (min-width: 768px) {
	.before-after-s04__inner { padding-inline: 32px; }
	.before-after-s04__heading { font: 700 36px/44px var(--nios-font); }
	.before-after-s04__preview-media { height: 380px; }
	.before-after-s04__controls { padding: 24px; }
	.before-after-s04__tiles { overflow-x: visible; flex-wrap: wrap; }
	.before-after-s04__tile { flex: 1 1 0; }
}

/* ---- Desktop 1200+ (reference 1920; fr-based columns resolve pixel-exact
   to 610/1168 once the shell reaches its natural 1804px content width) ---- */
@media (min-width: 1200px) {
	.before-after-s04__inner { padding-inline: 58px; }
	.before-after-s04__header { max-width: 900px; margin-bottom: 28px; }
	.before-after-s04__heading { font: 700 48px/1.1 var(--nios-font); }
	.before-after-s04__description { font: 400 16px/25px var(--nios-font); }

	/* Figma (228:179) fixes controls=physical-left / preview=physical-right
	   regardless of the page's RTL direction — CSS Grid's column 1 is the
	   inline-start column, which under dir=rtl is the physical right, so
	   without direction:ltr here the two columns render mirrored.
	   direction:rtl is restored on each child so its own Hebrew content
	   still reads correctly. */
	.before-after-s04__shell {
		max-width: 1804px;
		margin: 0 auto;
		display: grid;
		direction: ltr;
		grid-template-columns: 610fr 1168fr;
		gap: 0 26px;
		align-items: start;
	}
	.before-after-s04__preview { direction: rtl; grid-column: 2; grid-row: 1; }
	.before-after-s04__controls { direction: rtl; grid-column: 1; grid-row: 1; margin-top: 0; padding: 24px 17px; }
	.before-after-s04__preview-media { height: 545px; }
	.before-after-s04__tiles { overflow-x: visible; }
	.before-after-s04__tile { flex: 1 1 0; }
}

/* ==========================================================================
   Shop + Category Archive (woocommerce/archive-product.php)
   Mobile First. Figma: NIOS-website, nodes 236:158/287/2 (Shop),
   236:567/710/394 (Category), 236:821 (UX/backend handoff spec).
   Breakpoints follow the site's existing convention (768 / 1200) — the
   1200px tier is where the desktop 3-column grid + sidebar filter appear,
   matching the 1920 Figma frame's design intent at a real, fluid width.
   ========================================================================== */

.nios-container {
	max-width: 1920px;
	margin-inline: auto;
	padding-inline: 16px;
}
@media (min-width: 768px) { .nios-container { padding-inline: 32px; } }
@media (min-width: 1200px) { .nios-container { padding-inline: 260px; } }

.shop-archive { background: #fffdfc; overflow-x: clip; }

/* ---- Hero ---- */
.shop-hero { background: #f7f2eb; padding-block: 20px 28px; }
.shop-hero__breadcrumb { font: 400 11px/16px var(--nios-font); color: #665f59; margin: 0 0 12px; }
.shop-hero__breadcrumb a { color: inherit; text-decoration: none; }
.shop-hero__breadcrumb a:hover { text-decoration: underline; }
.shop-hero__breadcrumb span[aria-hidden] { margin-inline: 6px; }
.shop-hero__title { font: 700 29px/38px var(--nios-font); color: #171717; margin: 0 0 10px; }
.shop-hero__intro { font: 400 13px/22px var(--nios-font); color: #665f59; margin: 0; max-width: 640px; }
.shop-hero__badges { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.shop-hero__badges li { background: #f2e7d7; color: #171717; font: 600 11px/16px var(--nios-font); padding: 6px 14px; border-radius: 14px; }

@media (min-width: 768px) {
	.shop-hero { padding-block: 28px 40px; }
	.shop-hero__breadcrumb { font-size: 12px; line-height: 18px; }
	.shop-hero__title { font-size: 36px; line-height: 46px; }
	.shop-hero__intro { font-size: 15px; line-height: 24px; max-width: 704px; }
}
@media (min-width: 1200px) {
	.shop-hero { padding-block: 28px 44px; }
	.shop-hero__breadcrumb { font-size: 13px; line-height: 18px; }
	.shop-hero__title { font-size: 44px; line-height: 54px; }
	.shop-hero__intro { font-size: 17px; line-height: 28px; max-width: 940px; }
	.shop-hero__badges { gap: 10px; }
	.shop-hero__badges li { font-size: 11px; padding: 6px 16px; }
}

/* ---- Category rail ---- */
.shop-cat-rail { padding-block: 16px 4px; }
.shop-cat-rail__list { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0 0 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.shop-cat-rail__pill { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; height: 38px; padding-inline: 20px; border-radius: 19px; background: #fff; border: 1px solid #e5ddd3; color: #171717; font: 600 13px/18px var(--nios-font); text-decoration: none; }
.shop-cat-rail__pill.is-active { background: #111; border-color: #111; color: #fff; }
.shop-cat-rail__pill:focus-visible { outline: 2px solid #ad6c22; outline-offset: 2px; }

/* ---- Controls (sort / filter / count) ---- */
.shop-controls { padding-block: 4px 16px; }
.shop-controls__row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e5ddd3; border-radius: 12px; padding: 9px 12px; flex-wrap: wrap; }
.shop-controls__count { margin: 0; margin-inline-end: auto; font: 400 11px/16px var(--nios-font); color: #665f59; }
.shop-controls__sort-select { height: 40px; padding-inline: 16px; border-radius: 10px; background: #fff; border: 1px solid #cfa66b; color: #171717; font: 600 14px/20px var(--nios-font); }
.shop-controls__filter-btn { position: relative; height: 40px; padding-inline: 20px; border-radius: 10px; background: #fff; border: 1px solid #cfa66b; color: #171717; font: 600 14px/20px var(--nios-font); cursor: pointer; }
.shop-controls__filter-dot { position: absolute; top: -3px; inset-inline-end: -3px; width: 8px; height: 8px; border-radius: 50%; background: #ad6c22; }

@media (max-width: 419px) {
	.shop-controls__row { justify-content: center; }
	.shop-controls__count { margin: 0; flex: 1 1 100%; order: -1; text-align: center; }
}
@media (min-width: 1200px) {
	.shop-controls__row { background: transparent; border: 0; padding: 0; }
	.shop-controls__count { font-size: 13px; }
	/* Filtering is real-time and the sidebar is always visible at this
	   width, so the toggle button has no function here — kept only below
	   1200px, where it's the sole way to open the off-canvas drawer. */
	.shop-controls__filter-btn { display: none; }
}

/* ---- Body: filters + grid ---- */
.shop-body__inner { display: block; }
.shop-body__grid { margin-top: 20px; transition: opacity .15s ease; }
.shop-body__grid[aria-busy="true"] { opacity: .45; pointer-events: none; }

@media (min-width: 1200px) {
	.shop-body__inner { display: flex; align-items: flex-start; gap: 60px; }
	.shop-body__grid { flex: 1 1 auto; margin-top: 0; min-width: 0; }
}

/* ---- Filters panel: sidebar (1200+) / off-canvas drawer (below) ---- */
.shop-filters__overlay { display: none; }
.shop-filters__close { display: none; }

.shop-filters__form {
	background: #fff;
	border: 1px solid #e5ddd3;
	border-radius: 16px;
	padding: 19px;
}
.shop-filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.shop-filters__title { font: 700 19px/26px var(--nios-font); color: #171717; margin: 0; }
.shop-filters__title:focus { outline: none; }
.shop-filters__group { border-top: 1px solid #e5ddd3; padding-block: 14px; }
.shop-filters__group:first-of-type { border-top: 0; padding-top: 0; }
.shop-filters__group summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font: 700 14px/20px var(--nios-font);
	color: #171717;
	cursor: pointer;
}
.shop-filters__group summary::-webkit-details-marker { display: none; }
.shop-filters__group summary::after { content: '+'; font-weight: 400; font-size: 18px; line-height: 1; }
.shop-filters__group[open] summary::after { content: '–'; }
.shop-filters__group[open] summary { margin-bottom: 12px; }
.shop-filters__checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.shop-filters__checklist label,
.shop-filters__inline-check { display: flex; align-items: center; gap: 8px; font: 400 13px/20px var(--nios-font); color: #171717; cursor: pointer; }
/* Category list (2026-10-15, design "C" chosen by Naor): no checkboxes, one
   category at a time, an accent underline that grows on hover and stays on
   the current category, +/– for children like the other filter groups. */
.shop-cats, .shop-cats__sub { list-style: none; margin: 0; padding: 0; }
.shop-cats__item { border-bottom: 1px solid #f0ebe4; }
.shop-cats__item:last-child { border-bottom: 0; }
.shop-cats__row { display: flex; align-items: center; gap: 8px; }
.shop-cats__link {
	flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px;
	padding: 10px 2px; font: 400 14px/20px var(--nios-font); color: #171717; text-decoration: none;
}
.shop-cats__label { position: relative; padding-bottom: 2px; transition: color .2s ease; }
.shop-cats__label::after {
	content: ''; position: absolute; inset-inline: 0; bottom: -2px; height: 2px; background: var(--nios-accent);
	transform: scaleX(0); transform-origin: right; transition: transform .25s ease;
}
.shop-cats__link:focus-visible .shop-cats__label,
.shop-cats__link[aria-current="page"] .shop-cats__label { color: var(--nios-accent); }
.shop-cats__link:focus-visible .shop-cats__label::after,
.shop-cats__link[aria-current="page"] .shop-cats__label::after { transform: scaleX(1); }
/* Hover only where a real pointer exists: on touch screens a tapped link
   would otherwise keep the hover underline and look selected. */
@media (hover: hover) {
	.shop-cats__link:hover .shop-cats__label { color: var(--nios-accent); }
	.shop-cats__link:hover .shop-cats__label::after { transform: scaleX(1); }
	.shop-cats__toggle:hover { color: var(--nios-accent); background: var(--nios-bg-panel); }
	.shop-cats__link--sub:hover .shop-cats__dot { background: var(--nios-accent); border-color: var(--nios-accent); }
}
.shop-cats__link[aria-current="page"],
.shop-cats__item.has-current > .shop-cats__row .shop-cats__link { font-weight: 700; }
.shop-cats__link:focus-visible { outline: 2px solid var(--nios-accent); outline-offset: 2px; border-radius: 6px; }
.shop-cats__toggle {
	flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
	background: transparent; border: 0; border-radius: 8px; cursor: pointer;
	font: 400 18px/1 var(--nios-font); color: #6d665f; transition: color .2s ease, background .2s ease;
}
.shop-cats__toggle:focus-visible { outline: 2px solid var(--nios-accent); outline-offset: 1px; }
.shop-cats__sub { padding: 0 14px 10px 0; display: flex; flex-direction: column; gap: 2px; }
.shop-cats__sub[hidden] { display: none; }
.shop-cats__link--sub { padding: 6px 2px; font-size: 13px; color: #2b2722; }
.shop-cats__dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--nios-gold-soft); flex: 0 0 auto; transition: background .2s ease, border-color .2s ease; }
.shop-cats__link--sub[aria-current="page"] .shop-cats__dot { background: var(--nios-accent); border-color: var(--nios-accent); }
@media (prefers-reduced-motion: reduce) {
	.shop-cats__label, .shop-cats__label::after, .shop-cats__toggle, .shop-cats__dot { transition: none; }
}
.shop-filters__price-row { display: flex; align-items: center; gap: 10px; }
.shop-filters__price-row input[type="number"] { width: 100%; min-width: 0; height: 40px; border: 1px solid #e5ddd3; border-radius: 8px; padding-inline: 10px; font: 400 13px/20px var(--nios-font); }
.shop-filters__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.shop-filters__submit { width: 100%; height: 44px; border-radius: 10px; }
.shop-filters__clear { width: 100%; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; }

@media (max-width: 1199px) {
	.shop-filters { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
	.shop-filters.is-open { visibility: visible; }
	.shop-filters__overlay {
		display: block;
		position: absolute;
		inset: 0;
		background: rgba(23, 23, 23, 0.4);
		opacity: 0;
		transition: opacity .2s ease;
	}
	.shop-filters.is-open .shop-filters__overlay { opacity: 1; }
	.shop-filters__form {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: min(360px, 88vw);
		border-radius: 0;
		border: 0;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform .25s ease;
		display: flex;
		flex-direction: column;
	}
	.shop-filters.is-open .shop-filters__form { transform: translateX(0); }
	.shop-filters__close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 22px; line-height: 1; background: transparent; border: 0; color: #171717; cursor: pointer; }
	.shop-filters__actions { position: sticky; bottom: 0; background: #fff; padding-top: 12px; margin-top: auto; }
	body.shop-drawer-open { overflow: hidden; }
}

@media (min-width: 1200px) {
	.shop-filters { flex: 0 0 260px; position: sticky; top: 96px; }
}

/* ---- Product grid + card ---- */
.shop-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.shop-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e5ddd3; border-radius: 16px; overflow: hidden; }
/* One frame ratio for every product image, no empty bands above or below
   (2026-10-15, Naor). 3 / 2 is the ratio of most product photos (47 of 73),
   which therefore show in full; square photos are cropped top and bottom,
   centred. */
.shop-card__media { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #f7f2eb; }
.shop-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.shop-card__media-placeholder { display: block; width: 100%; height: 100%; }
.shop-card__badge { position: absolute; top: 11px; inset-inline-start: 11px; background: #f2e7d7; color: #171717; font: 600 11px/16px var(--nios-font); padding: 6px 12px; border-radius: 14px; }
.shop-card__badge--sale { background: #ad6c22; color: #fff; }
.shop-card__badge--stock { background: #e5ddd3; color: #171717; }
.shop-card__body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.shop-card__title { font: 700 14px/19px var(--nios-font); color: #171717; text-decoration: none; }
.shop-card__title:hover { text-decoration: underline; }
.shop-card__desc { font: 400 10px/14px var(--nios-font); color: #665f59; margin: 0; }
.shop-card__price { font: 700 14px/18px var(--nios-font); color: #171717; margin: 4px 0 0; }
.shop-card__price ins { text-decoration: none; }
.shop-card__price del { color: #a39a8f; font-weight: 400; margin-inline-end: 6px; }
.shop-card__cta { width: 100%; margin-top: auto; height: 36px; border-radius: 10px; background: #fff; border: 1px solid #cfa66b; color: #171717; font: 600 14px/20px var(--nios-font); display: flex; align-items: center; justify-content: center; text-decoration: none; }
.shop-card__cta:hover { background: #faf3ec; }

@media (min-width: 768px) {
	.shop-grid { gap: 16px; }
	.shop-card__body { padding: 16px; }
	.shop-card__title { font-size: 16px; line-height: 22px; }
	.shop-card__desc { font-size: 12px; line-height: 18px; }
	.shop-card__price { font-size: 16px; line-height: 22px; }
}
@media (min-width: 1200px) {
	.shop-grid { grid-template-columns: repeat(3, 1fr); gap: 30px; }
	.shop-card__body { padding: 18px; }
}

/* ---- Empty state ---- */
.shop-empty { text-align: center; padding: 60px 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.shop-empty p { font: 400 15px/24px var(--nios-font); color: #665f59; margin: 0; }

/* ---- SEO content ---- */
.shop-seo { padding-block: 32px; }
.shop-seo__box { background: #fff; border: 1px solid #e5ddd3; border-radius: 18px; padding: 25px 18px; }
.shop-seo__box h2 { font: 700 22px/30px var(--nios-font); color: #171717; margin: 0 0 12px; }
.shop-seo__body { font: 400 14px/24px var(--nios-font); color: #665f59; }
.shop-seo__body p { margin: 0 0 12px; }
.shop-seo__body p:last-child { margin-bottom: 0; }

@media (min-width: 1200px) {
	.shop-seo__box h2 { font-size: 26px; line-height: 34px; }
}

/* ---- FAQ ---- */
.shop-faq { padding-block: 0 32px; }
.shop-faq__box { background: #f7f2eb; border-radius: 18px; padding: 24px 18px; }
.shop-faq__box h2 { font: 700 24px/32px var(--nios-font); color: #171717; margin: 0 0 8px; }
.shop-faq__item { border-top: 1px solid #e5ddd3; }
.shop-faq__item:last-child { padding-bottom: 4px; }
.shop-faq__item h3 { margin: 0; }
.shop-faq__question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: transparent; border: 0; padding: 16px 0; font: 600 14px/22px var(--nios-font); color: #171717; text-align: start; cursor: pointer; }
.shop-faq__icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.shop-faq__question[aria-expanded="true"] .shop-faq__icon { transform: rotate(45deg); }
.shop-faq__answer { padding: 0 0 16px; }
.shop-faq__answer p { margin: 0; font: 400 13px/22px var(--nios-font); color: #665f59; }

@media (min-width: 1200px) {
	.shop-faq__box { padding: 24px; }
	.shop-faq__box h2 { font-size: 28px; line-height: 36px; }
	.shop-faq__question { font-size: 14px; }
}

/* ---- Related categories ---- */
.shop-related-cats { padding-block: 0 32px; }
.shop-related-cats h2 { font: 700 22px/30px var(--nios-font); color: #171717; margin: 0 0 16px; }

@media (min-width: 1200px) {
	.shop-related-cats h2 { font-size: 28px; line-height: 36px; }
}

/* ---- Homepage: Best Sellers (real sales data, see CHANGELOG 2026-09-08) ---- */
.best-sellers { padding: 40px 0 48px; }
.best-sellers__inner { padding-inline: 16px; }
.best-sellers__header { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.best-sellers__eyebrow { margin: 0; font: 500 14px/22px var(--nios-font); color: var(--nios-accent); }
.best-sellers__title { margin: 0; font: 700 28px/36px var(--nios-font); color: var(--nios-ink); }
.best-sellers__subtitle { margin: 0; font: 400 15px/24px var(--nios-font); color: #6d665f; }
.best-sellers__grid { margin-top: 24px; }
.best-sellers__cta { margin-top: 24px; display: flex; justify-content: center; }
.best-sellers__cta .btn { width: auto; padding-inline: 32px; }

@media (min-width: 768px) {
	.best-sellers { padding: 48px 0 56px; }
	.best-sellers__inner { padding-inline: 60px; }
	.best-sellers__eyebrow { font-size: 15px; line-height: 24px; }
	.best-sellers__title { font-size: 34px; line-height: 42px; }
	.best-sellers__subtitle { font-size: 16px; line-height: 26px; }
	.best-sellers__grid { margin-top: 28px; }
}

@media (min-width: 1200px) {
	.best-sellers { padding: 56px 0 64px; }
	.best-sellers__inner { padding-inline: 160px; }
	.best-sellers__title { font-size: 40px; line-height: 50px; }
	.best-sellers__subtitle { font-size: 18px; line-height: 28px; }
	.best-sellers__grid { margin-top: 32px; }
}

@media (min-width: 1600px) {
	.best-sellers { padding: 48px 0 64px; }
	.best-sellers__inner { padding-inline: 0; max-width: 1524px; margin-inline: auto; }
	.best-sellers__title { font-size: 44px; line-height: 56px; }
}

/*
================================================================
CART DRAWER — sitewide off-canvas cart (Figma 266:265 "MiniCart/Hover/
Desktop" adapted into a real dialog per Naor's explicit override: opens on
click / after add-to-cart, never on hover; full height; LEFT side, physical
`left`, not `inset-inline-start` — same reason as the footer's decorative
images (see CHANGELOG 2026-09-06): a logical property flips under RTL.
Breakpoints reuse the sitewide 768 / 1200 / 1600 system, not the four
desktop reference widths given in the brief (1920/1440) — this site only
has two desktop tiers.
================================================================
*/
.cart-drawer {
	position: fixed;
	inset: 0;
	z-index: 250;
	visibility: hidden;
}
.cart-drawer.is-open { visibility: visible; }
.cart-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(23, 23, 23, 0.4);
	opacity: 0;
	transition: opacity 0.22s ease;
}
.cart-drawer.is-open .cart-drawer__overlay { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cart-drawer__overlay { transition: none; } }

.cart-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 100dvh;
	background: #fcfaf6;
	box-shadow: 10px 0 28px rgba(0, 0, 0, 0.14);
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .cart-drawer__panel { transition: none; } }
.cart-drawer__panel:focus { outline: none; }

body.cart-drawer-open { overflow: hidden; }

.cart-drawer__head {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 16px 14px;
	border-bottom: 1px solid #e3ded8;
}
.cart-drawer__heading { font: 700 22px/30px var(--nios-font); color: #171717; margin: 0; }
.cart-drawer__heading:focus { outline: none; }
.cart-drawer__count { font: 400 13px/20px var(--nios-font); color: #666159; margin: 4px 0 0; }
.cart-drawer__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-size: 24px;
	line-height: 1;
	background: transparent;
	border: 0;
	color: #171717;
	cursor: pointer;
	border-radius: 50%;
}
.cart-drawer__close:hover { background: #f1e7d8; }

.cart-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 4px 16px;
}

.cart-drawer__empty { padding: 40px 4px; text-align: center; }
.cart-drawer__empty-title { font: 700 19px/26px var(--nios-font); color: #171717; margin: 0 0 8px; }
.cart-drawer__empty-text { font: 400 14px/22px var(--nios-font); color: #666159; margin: 0 0 20px; }
.cart-drawer__empty-cta { display: inline-flex; width: auto; padding-inline: 28px; }

.cart-drawer__item {
	display: flex;
	gap: 12px;
	padding: 16px 0;
	border-bottom: 1px solid #e3ded8;
}
.cart-drawer__item.is-busy { opacity: 0.6; }
.cart-drawer__item.is-new { animation: cart-drawer-highlight 2.2s ease; }
@keyframes cart-drawer-highlight {
	0% { background: #f2e7d7; }
	100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .cart-drawer__item.is-new { animation: none; } }

.cart-drawer__item-thumb {
	flex: 0 0 auto;
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 10px;
	overflow: hidden;
	background: #f2ede4;
}
.cart-drawer__item-thumb img { width: 100%; height: 100%; object-fit: cover; }

.cart-drawer__item-body { flex: 1 1 auto; min-width: 0; }
.cart-drawer__item-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cart-drawer__item-row--bottom { align-items: center; margin-top: 10px; }
.cart-drawer__item-name { font: 700 15px/21px var(--nios-font); color: #171717; text-decoration: none; }
.cart-drawer__item-name:hover { text-decoration: underline; }
.cart-drawer__item-remove {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
	color: #666159;
	background: transparent;
	border: 0;
	cursor: pointer;
	border-radius: 50%;
}
.cart-drawer__item-remove:hover { background: #f1e7d8; color: #171717; }

.cart-drawer__item-custom { list-style: none; margin: 6px 0 0; padding: 0; }
.cart-drawer__item-custom li { font: 400 13px/20px var(--nios-font); color: #666159; }
.cart-drawer__item-options { list-style: none; margin: 6px 0 0; padding: 0; }
.cart-drawer__item-options li { font: 400 13px/20px var(--nios-font); color: #666159; }
.cart-drawer__item-edit { display: inline-block; margin-top: 6px; font: 600 13px/20px var(--nios-font); color: #ad6c22; text-decoration: underline; }

.cart-drawer__item-price { font: 700 16px/24px var(--nios-font); color: #171717; }

.cart-drawer__qty {
	display: inline-flex;
	align-items: center;
	height: 34px;
	border: 1px solid #e3ded8;
	border-radius: 8px;
	background: #fff;
}
.cart-drawer__qty-btn {
	width: 32px;
	height: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	background: transparent;
	border: 0;
	color: #171717;
	cursor: pointer;
}
.cart-drawer__qty-btn:disabled { opacity: 0.5; cursor: default; }
.cart-drawer__qty-value { min-width: 24px; text-align: center; font: 700 13px/20px var(--nios-font); color: #171717; }
.cart-drawer__item-error { font: 400 12px/18px var(--nios-font); color: #b3261e; margin: 6px 0 0; }
.cart-drawer__item-error[hidden] { display: none; }

.cart-drawer__foot {
	flex: 0 0 auto;
	position: sticky;
	bottom: 0;
	background: #fcfaf6;
	border-top: 1px solid #e3ded8;
	padding: 16px;
}
.cart-drawer__foot[hidden] { display: none; }

.cart-drawer__subtotal-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.cart-drawer__subtotal-label { font: 700 16px/24px var(--nios-font); color: #171717; }
.cart-drawer__subtotal-value { font: 700 22px/30px var(--nios-font); color: #171717; }

.cart-drawer__shipping { margin-bottom: 10px; }
.cart-drawer__shipping-row { display: flex; align-items: center; gap: 8px; }
.cart-drawer__shipping-icon { flex: 0 0 auto; }
.cart-drawer__shipping-text { font: 400 13px/20px var(--nios-font); color: #666159; margin: 0; }
.cart-drawer__shipping-bar { height: 6px; border-radius: 999px; background: #e3ded8; margin-top: 8px; overflow: hidden; }
.cart-drawer__shipping-bar span { display: block; height: 100%; background: #cfa66b; border-radius: 999px; transition: width 0.3s ease; }
@media (prefers-reduced-motion: reduce) { .cart-drawer__shipping-bar span { transition: none; } }

.cart-drawer__reassure { font: 400 12px/18px var(--nios-font); color: #8a847b; margin: 0 0 14px; }

.cart-drawer__ctas { display: flex; gap: 10px; }
.cart-drawer__ctas .btn { height: 52px; font-size: 16px; }
.cart-drawer__continue {
	display: block;
	width: 100%;
	margin-top: 10px;
	padding: 8px;
	background: transparent;
	border: 0;
	text-decoration: underline;
	font: 600 13px/20px var(--nios-font);
	color: #171717;
	cursor: pointer;
}

/* ---- Tablet 768–1199: side panel, not full screen ---- */
@media (min-width: 768px) {
	.cart-drawer__panel { width: 390px; height: 100%; }
}

/* ---- Desktop 1200–1599 ---- */
@media (min-width: 1200px) {
	.cart-drawer__panel { width: 430px; }
}

/* ---- Desktop Wide 1600+ ---- */
@media (min-width: 1600px) {
	.cart-drawer__panel { width: 445px; }
}


/*
================================================================
Footer CTA at the TOP of the footer (2026-09-20). Naor approved
"A · floating card" from the CTA Artifact
(https://claude.ai/artifact/6Q2FZRqhY6naMdk9HsjC4K).
`.site-footer .site-footer__cta` (0,2,0) deliberately outranks the older
per-breakpoint `.site-footer__cta` rules above (the old mid-row layout,
now removed from footer.php), so those stay untouched but inert.
================================================================
*/
.site-footer .site-footer__cta {
	width: 100%;
	max-width: none;
	flex: none;
	margin: 0 0 40px;
	padding: 28px 20px 24px;
	gap: 12px;
	flex-direction: column;
	align-items: center;
	text-align: center;
	border-radius: 18px;
	box-shadow: 0 16px 36px rgba(51, 31, 13, 0.14);
}
.site-footer .site-footer__cta-image { width: 88px; height: 88px; }
.site-footer .site-footer__cta-body { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.site-footer .site-footer__cta-title { font: 700 24px/32px var(--nios-font); }
.site-footer .site-footer__cta-desc { max-width: 320px; font: 400 16px/25px var(--nios-font); color: var(--footer-muted); }
.site-footer .site-footer__cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	max-width: none;
	height: 52px;
	margin-top: 4px;
	padding: 0 24px;
	border-radius: 12px;
	font: 600 17px/1 var(--nios-font);
	white-space: nowrap;
}
.site-footer__cta-arrow { flex-shrink: 0; }

@media (min-width: 768px) {
	.site-footer .site-footer__cta {
		flex-direction: row;
		text-align: right;
		max-width: 760px;
		margin: 0 auto 48px;
		padding: 28px 36px;
		gap: 28px;
	}
	.site-footer .site-footer__cta-image { width: 96px; height: 96px; flex-shrink: 0; }
	.site-footer .site-footer__cta-body { flex: 1; align-items: flex-start; gap: 6px; }
	.site-footer .site-footer__cta-title { font-size: 26px; line-height: 34px; }
	.site-footer .site-footer__cta-desc { max-width: none; font-size: 17px; line-height: 26px; }
	.site-footer .site-footer__cta-button { width: auto; min-width: 0; height: 54px; margin-top: 0; padding: 0 32px; }
}

@media (min-width: 1200px) {
	.site-footer .site-footer__cta {
		flex-direction: row;
		max-width: 1000px;
		margin: 0 auto 64px;
		padding: 32px 48px;
		gap: 32px;
		flex-basis: auto;
	}
	.site-footer .site-footer__cta-image { width: 120px; height: 120px; }
	.site-footer .site-footer__cta-body { gap: 8px; }
	.site-footer .site-footer__cta-title { font-size: 32px; line-height: 40px; }
	.site-footer .site-footer__cta-desc { font-size: 18px; line-height: 28px; }
	.site-footer .site-footer__cta-button { height: 56px; padding: 0 40px; font-size: 18px; }
}

.site-footer .site-footer__cta-button:hover { background: #35281a; }
.site-footer .site-footer__cta-button:focus-visible { outline: 2px solid var(--footer-gold); outline-offset: 3px; }

/* Corner illustrations: with the CTA gone from the middle row the side
   margins beside the social row shrank, so the illustrations would now sit
   over the brand contacts and the service column. Restore the vertical room
   they had (mid band min-height) and size them to fit inside it. */
@media (min-width: 1200px) {
	.site-footer .site-footer__mid { min-height: 210px; justify-content: center; }
	.site-footer .site-footer__decor--left { width: 250px; }
	.site-footer .site-footer__decor--right { width: 190px; }
}
@media (min-width: 1600px) {
	.site-footer .site-footer__mid { min-height: 238px; }
	.site-footer .site-footer__decor--left { width: 380px; }
	.site-footer .site-footer__decor--right { width: 200px; }
}