/* =============================================================
   MyCurlyWay — main stylesheet
   Warm editorial design system for a curly-hair accessories store.

   1.  Design tokens
   2.  Base & reset
   3.  Utilities (container, buttons, section head, reveal)
   4.  Splash intro
   5.  Header
   6.  Hero promo banner
   7.  Marquee run line
   8.  Categories
   9.  Product grid
   10. Social grid
   11. Reviews
   12. Footer
   13. Toast + misc components
   14. WooCommerce & generic pages
   15. Responsive
   16. Reduced motion
   ============================================================= */

/* 1. Design tokens
   ------------------------------------------------------------- */
:root {
	/* Color — production brand palette (mycurlyway.co.il: watermelon
	   pink #FF5E7E, mint #8FDFBC, lemon #F4EB76, black on white),
	   tuned for contrast and softness. */
	--cream: #FDF7F8;
	--sand: #FAEDF0;
	--white: #FFFFFF;
	--espresso: #211A1C;
	--espresso-soft: #362B2F;
	--ink: #2E2528;
	--cocoa: #6E5A61;
	--terracotta: #EE6B84;
	--terracotta-deep: #D63057;
	--honey: #DFAF2B;
	--honey-deep: #A97F17;
	--blush: #FBD9E0;
	--rose: #F8C9D6;
	--sage: #1B7B51;
	--sage-light: #A3DCC0;
	--line: #F2DEE3;
	--line-strong: #E2C4CD;

	/* Type — Roboto everywhere; Heebo is Roboto's official Hebrew
	   companion (identical design), covering Hebrew glyphs. */
	--font-display: "Roboto", "Heebo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-body: "Roboto", "Heebo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Motion */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--speed: 0.25s;

	/* Elevation */
	--shadow-soft: 0 10px 30px -12px rgb(64 27 39 / 0.18);
	--shadow-lift: 0 18px 40px -16px rgb(64 27 39 / 0.28);

	/* Layout */
	--radius: 20px;
	--radius-lg: 26px;
	--header-h: 72px;
}

/* 2. Base & reset
   ------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	/* Android Chrome widens the page (and lets it drift sideways) for any content
	   that pokes out, even with the body clipped; this keeps it exactly screen-wide. */
	overflow-x: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 560;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--espresso);
	margin: 0;
}

p {
	margin: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

img, svg {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

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

input, textarea {
	font: inherit;
}

blockquote {
	margin: 0;
}

::selection {
	background: var(--blush);
	color: var(--espresso);
}

:focus-visible {
	outline: 2px solid #c0123f;
	outline-offset: 3px;
	box-shadow: 0 0 0 5px rgb(255 255 255 / 0.9);
}

:focus:not(:focus-visible) {
	outline: none;
}

[id] {
	scroll-margin-top: calc(var(--header-h) + 16px);
}

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

.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 2000;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	background: var(--terracotta);
	color: var(--espresso);
	padding: 0.7rem 1.2rem;
	border-radius: 999px;
	font-weight: 600;
}

/* 3. Utilities
   ------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 1.5rem);
}

.section {
	padding-block: clamp(3.25rem, 7.5vw, 6rem);
}

.section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1.25rem;
	margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.section-head h2 {
	font-size: clamp(1.85rem, 3.4vw, 2.65rem);
}

.section-sub {
	color: var(--cocoa);
	margin-top: 0.5rem;
	max-width: 52ch;
}

.kicker {
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: #C02A4E; /* darker than --terracotta-deep so the small text clears 4.5:1 */
	margin-bottom: 0.6rem;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--espresso);
	white-space: nowrap;
	padding-bottom: 0.15rem;
	border-bottom: 1.5px solid transparent;
	transition: border-color var(--speed), color var(--speed);
}

.link-arrow:hover {
	color: var(--terracotta-deep);
	border-bottom-color: currentColor;
}

.link-arrow .icon {
	transition: transform var(--speed) var(--ease);
}

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

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.2;
	padding: 0.8rem 1.6rem;
	cursor: pointer;
	transition: background var(--speed), color var(--speed), transform var(--speed) var(--ease), box-shadow var(--speed), border-color var(--speed);
}

.btn:active {
	transform: scale(0.97);
}

.btn .icon {
	transition: transform var(--speed) var(--ease);
}

.btn:hover .icon {
	transform: translateX(3px);
}

.btn-dark {
	background: var(--terracotta);
	color: var(--espresso);
}

.btn-dark:hover {
	background: var(--terracotta-deep);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--shadow-soft);
}

.btn-ghost {
	background: transparent;
	color: var(--espresso);
	border: 1.5px solid var(--line-strong);
}

.btn-ghost:hover {
	border-color: var(--espresso);
	background: var(--white);
	transform: translateY(-2px);
}

.btn-lg {
	padding: 1rem 1.9rem;
	font-size: 1rem;
}

.btn-sm {
	padding: 0.6rem 1.2rem;
	font-size: 0.88rem;
}

/* Scroll reveal (enhanced only when JS is present) */
html.js .reveal {
	opacity: 0;
	transform: translateY(26px);
}

html.js .reveal.in {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.45s var(--ease),
		transform 0.45s var(--ease);
	transition-delay: calc(var(--d, 0) * 35ms);
}

/* Scroll performance: while the page is scrolling (JS adds .mcw-scrolling to
   <html>), pause the decorative, repaint-heavy animations — morphing blobs,
   glows, the gradient-flow badge — so the main thread is free for a smooth
   scroll on lower-end devices. They resume the moment scrolling stops. The
   reveal above uses transitions, not animations, so it is unaffected. */
html.mcw-scrolling *,
html.mcw-scrolling *::before,
html.mcw-scrolling *::after {
	animation-play-state: paused !important;
}

/* Star ratings */
.stars {
	position: relative;
	display: inline-block;
	line-height: 0;
	color: #ECDFE3;
}

.stars-base,
.stars-fill {
	display: inline-flex;
	gap: 2px;
	white-space: nowrap;
}

.stars-fill {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	bottom: 0;
	overflow: hidden;
	color: var(--honey);
}

/* 4. Splash intro — storefront doors
   ------------------------------------------------------------- */
.splash {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	background: transparent;
	perspective: 1300px;
	transition: opacity 0.3s ease 1s, visibility 0.3s 1s;
}

.splash-door {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50.5%;
	background: rgb(253 247 248 / 0.6);
	-webkit-backdrop-filter: blur(18px) saturate(1.05);
	backdrop-filter: blur(18px) saturate(1.05);
	will-change: transform;
}

@supports not (backdrop-filter: blur(1px)) {
	.splash-door {
		background: rgb(253 247 248 / 0.93);
	}
}

.splash-door-left {
	left: 0;
	transform-origin: left center;
	box-shadow: inset -34px 0 52px -46px rgb(64 27 39 / 0.28);
}

.splash-door-right {
	right: 0;
	transform-origin: right center;
	box-shadow: inset 34px 0 52px -46px rgb(64 27 39 / 0.28);
}

.splash-handle {
	position: absolute;
	/* Anchored a fixed distance below the centred logo + tagline (not a fixed
	   viewport %), so the handles always sit under the text — on tall screens
	   and short ones alike — instead of landing on it. */
	top: calc(50% + 150px);
	width: 20px;
	height: 80px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 80'%3E%3Cpath d='M10 4 Q22 13 10 22 T10 40 T10 58 T10 76' fill='none' stroke='%23211A1C' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: translateY(-50%);
	filter: drop-shadow(0 4px 6px rgb(64 27 39 / 0.3));
}

.splash-door-left .splash-handle {
	right: 26px;
}

.splash-door-right .splash-handle {
	left: 26px;
}

.splash-inner {
	position: relative;
	z-index: 2;
	display: grid;
	justify-items: center;
	gap: 0.75rem;
	color: var(--espresso);
	animation: mcw-splash-in 1.15s var(--ease) both;
}

.splash-mark {
	color: var(--terracotta);
}

.splash-word {
	font-family: var(--font-display);
	font-size: clamp(2.1rem, 7vw, 3.4rem);
	font-weight: 560;
	letter-spacing: -0.02em;
	line-height: 1;
}

.splash-word em {
	font-style: italic;
	color: var(--terracotta);
	font-weight: 500;
}

.splash-tag {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--cocoa);
	opacity: 0;
	animation: mcw-fade-up 0.7s ease 0.8s forwards;
}

.splash.leaving {
	opacity: 0;
	visibility: hidden;
	animation: mcw-enter-store 1.1s var(--ease) 0.12s both;
}

.splash.leaving .splash-inner {
	animation: mcw-splash-out 0.3s ease both;
}

.splash.leaving .splash-door {
	transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1) 0.12s;
}

.splash.leaving .splash-door-left {
	transform: rotateY(-108deg);
}

.splash.leaving .splash-door-right {
	transform: rotateY(108deg);
}

@keyframes mcw-enter-store {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.07);
	}
}

html.mcw-splash-skip .splash,
html:not(.js) .splash {
	display: none;
}

html.mcw-lock {
	overflow: hidden;
}

@keyframes mcw-splash-in {
	from {
		opacity: 0;
		filter: blur(26px);
		transform: scale(1.07);
	}
	to {
		opacity: 1;
		filter: blur(0);
		transform: scale(1);
	}
}

@keyframes mcw-splash-out {
	to {
		opacity: 0;
		filter: blur(18px);
		transform: scale(0.96);
	}
}

@keyframes mcw-fade-up {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* 5. Header
   ------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgb(251 240 243);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s, background 0.3s;
}

.site-header.scrolled {
	border-bottom-color: var(--line);
}

.header-inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: var(--header-h);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--espresso);
}

.brand-mark {
	color: var(--terracotta);
	flex: none;
}

.brand-word {
	font-family: var(--font-display);
	font-size: 1.42rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1;
	white-space: nowrap;
}

.brand-word em {
	font-style: italic;
	font-weight: 500;
	color: var(--terracotta);
}

.site-nav {
	margin-inline: auto;
}

/* "My wishlist" / "My account" menu items: only in the phone / tablet menu (shown below 900px). */
.nav-list .mcw-nav-phone {
	display: none;
}

/* Wishlist count beside "My wishlist" in the menu. */
.mcw-nav-count {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	margin-inline-start: 0.35rem;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--terracotta);
	color: var(--espresso);
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	vertical-align: middle;
}

.mcw-nav-count[hidden] {
	display: none;
}
.nav-list {
	display: flex;
	align-items: center;
	gap: 1.9rem;
}

.nav-list a {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--ink);
	padding: 0.35rem 0;
	border-bottom: 1.5px solid transparent;
	transition: color var(--speed), border-color var(--speed);
}

.nav-list a:hover,
.nav-list .current-menu-item > a {
	color: var(--terracotta-deep);
	border-bottom-color: currentColor;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 0.15rem;
}

.icon-btn {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	color: var(--espresso);
	transition: background var(--speed), transform var(--speed);
}

.icon-btn:hover {
	background: rgb(247 225 207 / 0.6);
}

.cart-count {
	position: absolute;
	top: 3px;
	right: 1px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--terracotta);
	color: var(--espresso);
	font-size: 0.68rem;
	font-weight: 700;
	display: grid;
	place-items: center;
	line-height: 1;
}

.cart-count[data-count="0"] {
	display: none;
}

.cart-count.bump {
	animation: mcw-bump 0.5s var(--ease);
}

@keyframes mcw-bump {
	30% {
		transform: scale(1.4);
	}
}

/* Mobile nav toggle (hidden on desktop) */
.nav-toggle {
	display: none;
}

.nav-toggle .icon-close {
	display: none;
}

.site-header.nav-open .nav-toggle .icon-close {
	display: block;
}

.site-header.nav-open .nav-toggle .icon-open {
	display: none;
}

/* Header search panel */
.header-search {
	border-top: 1px solid var(--line);
	background: var(--cream);
}

.search-form {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding-block: 0.9rem;
	color: var(--cocoa);
}

.search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	background: var(--white);
	border: 1.5px solid var(--line-strong);
	border-radius: 999px;
	color: var(--ink);
	font-size: 1.05rem;
	padding: 0.65rem 1.1rem;
}

.search-form input[type="search"]:focus {
	outline: none;
	border-color: var(--sage);
	box-shadow: 0 0 0 3px rgb(163 220 192 / 0.45);
}

.search-form input[type="search"]::placeholder {
	color: var(--cocoa);
	opacity: 0.85;
}

/* Search submit: green, like the rest of the store's buttons. */
.search-form .btn {
	background: var(--sage-light);
	color: var(--espresso);
}

.search-form .btn:hover {
	background: var(--sage);
	color: #fff;
}

/* 6. Hero promo banner
   ------------------------------------------------------------- */
.hero {
	position: relative;
	overflow: clip;
	padding-block: clamp(2rem, 5vw, 4.25rem) clamp(3rem, 6vw, 5rem);
}

.hero-blob {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.hero-blob-1 {
	display: none;
}

.hero-blob-2 {
	width: 480px;
	height: 480px;
	bottom: -200px;
	left: -140px;
	background: radial-gradient(circle, rgb(238 107 132 / 0.16) 0%, rgb(238 107 132 / 0) 65%);
}

.hero-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1.08fr 0.92fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgb(247 225 207 / 0.65);
	border: 1px solid rgb(238 107 132 / 0.45);
	color: var(--terracotta-deep);
	font-size: 0.76rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 0.45rem 0.95rem;
	border-radius: 999px;
	margin-bottom: 1.4rem;
}

.hero-title {
	font-family: "Rubik", var(--font-display);
	font-weight: 500;
	font-size: clamp(2.7rem, 6vw, 4.5rem);
	line-height: 1.03;
	margin-bottom: 1.25rem;
	text-wrap: balance;
}

/* Mobile: stack each title segment on its own line (desktop keeps them inline,
   so the title still flows as one balanced run). */
@media (max-width: 640px) {
	.hero-title .ht-seg {
		display: block;
	}

	/* Only the plain lines shrink; the gold accent (an em) keeps its size. */
	.hero-title span.ht-seg {
		font-size: 0.8em;
	}
}

.hero-title em {
	display: inline-block;
	font-style: italic;
	font-weight: 600;
	line-height: 1.22;
	padding: 0.08em 0.06em;
	color: transparent;
	background: linear-gradient(100deg, #7a560a, #a37716 30%, #8f6612 55%, #b0801a 80%, #7a560a);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

@keyframes mcw-title-shine {
	0%   { background-position: 100% 0, 0 0; }
	14%  { background-position: 0% 0, 0 0; }
	100% { background-position: 0% 0, 0 0; }
}

/* Continuous glint: a light streak sweeps across the gold accent for about a
   second, then rests for the remainder of the cycle. */
@media (prefers-reduced-motion: no-preference) {
	.hero-title em {
		background-image:
			linear-gradient(110deg, transparent 0 40%, rgb(255 244 200 / 0.95) 50%, transparent 60% 100%),
			linear-gradient(100deg, #7a560a, #a37716 30%, #8f6612 55%, #b0801a 80%, #7a560a);
		background-size: 230% 100%, 100% 100%;
		background-repeat: no-repeat;
		animation: mcw-title-shine 8s ease-in-out infinite;
	}
}

.hero-lead {
	font-size: 1.11rem;
	line-height: 1.7;
	color: #4A3B41; /* darker than --cocoa: it sits over the faded hero photo */
	max-width: 52ch;
	margin-bottom: 1.9rem;
}

.hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.hero-trust {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-top: 1.9rem;
}

.hero-trust p {
	font-size: 0.95rem;
	color: var(--cocoa);
}

.hero-trust strong {
	color: var(--espresso);
}

.hero-art {
	position: relative;
	max-width: 480px;
	justify-self: end;
	width: 100%;
}

.hero-arch svg {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 30px 50px rgb(64 27 39 / 0.14));
}

.hero-chip {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: rgb(255 255 255 / 0.82);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgb(255 255 255 / 0.75);
	border-radius: 16px;
	padding: 0.6rem 0.9rem;
	box-shadow: 0 14px 32px -12px rgb(64 27 39 / 0.3);
	font-size: 0.85rem;
	color: var(--ink);
	white-space: nowrap;
}

.hero-chip img {
	width: 44px;
	height: 44px;
	border-radius: 10px;
}

.hero-chip strong {
	display: block;
	font-size: 0.9rem;
	color: var(--espresso);
}

.hero-chip small {
	color: var(--cocoa);
	font-size: 0.78rem;
}

.hero-chip-rating {
	bottom: 10%;
	left: -8%;
	animation: mcw-float 7s ease-in-out 0.9s infinite alternate;
}

@keyframes mcw-float {
	from {
		transform: translateY(5px);
	}
	to {
		transform: translateY(-9px);
	}
}

.hero-sticker {
	position: absolute;
	top: -2%;
	left: 4%;
	width: 94px;
	height: 94px;
	border-radius: 50%;
	background: var(--terracotta);
	color: var(--espresso);
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 0.1rem;
	text-align: center;
	transform: rotate(-9deg);
	box-shadow: var(--shadow-lift);
}

.hero-sticker strong {
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1;
}

.hero-sticker small {
	font-size: 0.62rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	opacity: 0.9;
}

/* 7. Marquee run line
   ------------------------------------------------------------- */
.marquee {
	padding-block: 1.6rem;
	overflow: clip;
}

.marquee-strip {
	direction: ltr;
	background:
		linear-gradient(180deg, rgb(255 255 255 / 0.18) 0%, rgb(255 255 255 / 0) 34%, rgb(0 0 0 / 0.14) 100%),
		linear-gradient(90deg, #a8164a, #c42659 16%, #d8326a 30%, #c82a5e 46%, #b81c52 60%, #d02d63 76%, #d8326a 88%, #ae184b);
	transform: rotate(-1.3deg);
	width: calc(100% + 48px);
	margin-left: -24px;
	overflow: hidden;
}

.marquee-alt .marquee-strip {
	background: linear-gradient(90deg, #7fc9a6, #c6efdc 30%, #8fd3b0 55%, #d3f4e4 80%, #7fc9a6);
}

/* The gold strip bridges the two sections: page background above it, the
   reviews' dark block below it. */
.marquee-social {
	background: linear-gradient(to bottom, var(--cream) 50%, var(--espresso) 50%);
}

.marquee-social .marquee-strip {
	background: linear-gradient(90deg, #dcb961, #f4e0a3 30%, #e0bf6c 55%, #f8e9bb 80%, #dcb961);
}

/* Silver strip: sits on the plain page background, after the accessories. */

/* Tilt the opposite way to the other strips. */
.marquee-journal .marquee-strip {
	background: linear-gradient(90deg, #b8bcc2, #e6e8eb 30%, #c3c7cc 55%, #eef0f2 80%, #b8bcc2);
	transform: rotate(1.3deg);
}


.marquee-track {
	display: flex;
	direction: ltr; /* fixed so the strip always travels left to right */
	width: max-content;
	animation: mcw-marquee 36s linear infinite;
}

.marquee:hover .marquee-track {
	animation-play-state: paused;
}

.marquee-list {
	display: flex;
	align-items: center;
	padding-block: 0.85rem;
}

.marquee-list li {
	direction: rtl;
	display: inline-flex;
	align-items: center;
	gap: 1.1rem;
	margin-right: 2.4rem;
	color: var(--espresso);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.marquee-sep {
	color: var(--honey);
	flex: none;
}

/* The honey sparkle disappears on the raspberry, gold and silver strips. */
.marquee:not(.marquee-alt) .marquee-sep {
	color: #fff;
}

/* White text on the satin raspberry-pink (first) strip. */
.marquee:not(.marquee-alt):not(.marquee-social):not(.marquee-journal) .marquee-list li {
	color: #fff;
}

@keyframes mcw-marquee {
	from {
		transform: translateX(-50%);
	}
	to {
		transform: translateX(0);
	}
}

/* 8. Categories
   ------------------------------------------------------------- */
.cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.4rem;
}

.cat-card {
	--cat-accent: var(--blush);
	position: relative;
	display: grid;
	justify-items: center;
	padding: 0.6rem;
	transition: transform 0.3s var(--ease);
}

.cat-grid li:nth-child(4n+2) .cat-card { --cat-accent: var(--sage-light); }
.cat-grid li:nth-child(4n+3) .cat-card { --cat-accent: #F7F1AF; }
.cat-grid li:nth-child(4n+4) .cat-card { --cat-accent: #FBD5DE; }

.cat-card:hover {
	transform: translateY(-7px);
}

.cat-card:focus-visible {
	outline: 3px solid var(--terracotta);
	outline-offset: 6px;
	border-radius: 50%;
}

.cat-blob {
	position: relative;
	width: min(216px, 100%);
	aspect-ratio: 1;
	display: block;
}

.cat-ring {
	position: absolute;
	inset: -8%;
	border: 1.5px dashed var(--line-strong);
	border-radius: 50%;
	opacity: 0.65;
	animation: mcw-ring-spin 28s linear infinite;
	transition: border-color var(--speed), opacity var(--speed);
}

.cat-card:hover .cat-ring {
	border-color: var(--terracotta);
	opacity: 1;
}

.cat-img {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--cat-accent);
	border-radius: 58% 42% 55% 45% / 52% 58% 42% 48%;
	animation:
		mcw-blob-morph 9s ease-in-out infinite alternate,
		mcw-blob-bob 6.5s ease-in-out infinite;
	transition: transform 0.35s var(--ease);
}

.cat-grid li:nth-child(4n+2) .cat-img { animation-delay: -3s, -1.6s; animation-duration: 10s, 7.2s; }
.cat-grid li:nth-child(4n+3) .cat-img { animation-delay: -6s, -3.4s; animation-duration: 8.4s, 6.1s; }
.cat-grid li:nth-child(4n+4) .cat-img { animation-delay: -4.5s, -5s; animation-duration: 11s, 7.8s; }

.cat-img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 13%;
	mix-blend-mode: multiply;
	transition: transform 0.45s var(--ease);
}

.cat-card:hover .cat-img img {
	transform: scale(1.12) rotate(-3.5deg);
}

.cat-name-pill,
.cat-count-pill {
	position: absolute;
	z-index: 1;
	border-radius: 999px;
	background: var(--terracotta);
	color: var(--espresso);
	font-weight: 700;
	white-space: nowrap;
	box-shadow: var(--shadow-soft);
	transition: transform 0.3s var(--ease), background var(--speed);
}

.cat-name-pill {
	top: 4%;
	inset-inline-end: -2%;
	max-width: 118%;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0.42rem 0.95rem;
	font-size: 0.85rem;
}

.cat-count-pill {
	bottom: 3%;
	inset-inline-end: -3%;
	padding: 0.32rem 0.75rem;
	font-size: 0.73rem;
}

.cat-card:hover .cat-name-pill {
	transform: scale(1.06) rotate(-3deg);
	background: var(--terracotta-deep);
	color: #fff;
}

.cat-card:hover .cat-count-pill {
	transform: scale(1.08) rotate(4deg);
	background: var(--terracotta-deep);
	color: #fff;
}

@keyframes mcw-blob-morph {
	0% {
		border-radius: 58% 42% 55% 45% / 52% 58% 42% 48%;
	}

	50% {
		border-radius: 45% 55% 48% 52% / 60% 42% 58% 40%;
	}

	100% {
		border-radius: 52% 48% 40% 60% / 45% 52% 48% 55%;
	}
}

@keyframes mcw-blob-bob {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-7px);
	}
}

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

/* 9. Product grid
   ------------------------------------------------------------- */
.section-products {
	background:
		radial-gradient(720px 320px at 85% 0%, rgb(247 225 207 / 0.5) 0%, rgb(247 225 207 / 0) 70%),
		var(--cream);
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.9rem 1.4rem;
}

.product-card {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr;
	height: 100%;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform var(--speed) var(--ease), box-shadow var(--speed), border-color var(--speed);
}

.product-card:hover {
	transform: translateY(-4px);
	border-color: var(--line-strong);
	box-shadow: var(--shadow-lift);
}

.product-media {
	position: relative;
	overflow: hidden;
	background: #fff;
	border-bottom: 1px solid var(--line);
	aspect-ratio: 1;
}

.product-thumb {
	display: block;
	height: 100%;
}

.product-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 9%;
	mix-blend-mode: multiply;
	display: block;
	transition: transform 0.45s var(--ease);
}

.product-card:hover .product-thumb img {
	transform: scale(1.045);
}

.badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
	background: var(--sage-light);
	color: var(--espresso);
}

/* Sale ("מבצע") badge: bigger and lively — a warm gradient that flows
   across it with a gentle pulse, so it catches the eye on the card. */
.badge-sale {
	color: var(--espresso);
	font-size: 0.84rem;
	font-weight: 800;
	padding: 0.45rem 0.95rem;
	letter-spacing: 0.05em;
	background: linear-gradient(115deg, #EE6B84 0%, #FF8FA3 28%, #FFC06B 52%, #FF8FA3 74%, #EE6B84 100%);
	background-size: 260% 100%;
	box-shadow: 0 6px 16px -6px rgb(238 107 132 / 0.6);
	animation: mcw-sale-flow 3.4s ease-in-out infinite, mcw-sale-pulse 2.8s ease-in-out infinite;
	will-change: background-position, transform;
}

@keyframes mcw-sale-flow {
	0%,
	100% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}

@keyframes mcw-sale-pulse {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.07);
	}
}

@media (prefers-reduced-motion: reduce) {
	.badge-sale {
		animation: none;
		background-position: 0% 50%;
	}
}

.badge-new {
	background: #F4EC8E;
	color: var(--espresso);
}

/* Out of stock: a neutral dark badge, a faded photo, and a disabled status
   button in place of the buy control — on the front page, shop, category
   rows and every other place a product card appears. */
.badge-stock {
	background: rgb(33 26 28 / 0.82);
	color: #fff;
}

.product-card.is-oos .product-thumb img {
	opacity: 0.58;
	filter: grayscale(0.3);
	mix-blend-mode: normal;
}

.product-card.is-oos:hover .product-thumb img {
	transform: none;
}

/* Gift cards disabled for now — remove this wrapper to re-enable.
Gift card personalisation fields on the product page (אל / מאת / ברכה).
.mcw-gc-fields {
	display: grid;
	gap: 0.85rem;
	margin: 1.2rem 0 1.4rem;
	padding: 1.1rem 1.15rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--cream);
}

.mcw-gc-field {
	display: grid;
	gap: 0.35rem;
	margin: 0;
}

.mcw-gc-field label {
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--espresso);
}

.mcw-gc-field .required {
	color: var(--terracotta-deep);
	border: 0;
	text-decoration: none;
}

.mcw-gc-fields input,
.mcw-gc-fields textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6rem 0.85rem;
	border: 1.5px solid var(--line-strong);
	border-radius: 14px;
	background: #fff;
	font: inherit;
	color: var(--espresso);
}

.mcw-gc-fields textarea {
	resize: vertical;
	min-height: 74px;
	line-height: 1.5;
}

.mcw-gc-fields input:focus,
.mcw-gc-fields textarea:focus {
	outline: none;
	border-color: var(--terracotta);
	box-shadow: 0 0 0 3px rgb(238 107 132 / 0.15);
}

.mcw-gc-counter {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.76rem;
	color: rgb(33 26 28 / 0.55);
}
*/

/* Free gift line in the cart. */
.mcw-gift-badge {
	display: inline-block;
	margin-inline-start: 0.4rem;
	padding: 0.12rem 0.5rem;
	border-radius: 999px;
	background: var(--sage-light, #E6EFE6);
	color: var(--espresso);
	font-size: 0.72rem;
	font-weight: 700;
	white-space: nowrap;
	vertical-align: middle;
}

.mcw-gift-free {
	font-weight: 800;
	color: var(--terracotta-deep);
}

.product-card.is-oos .quick-add,
.product-card.is-oos .pcard-add,
.product-card.is-oos .quick-add:hover,
.product-card.is-oos .pcard-add:hover {
	background: #ece4e6;
	color: #938589;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.wish {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.85);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	display: grid;
	place-items: center;
	color: var(--espresso);
	transition: transform var(--speed) var(--ease), color var(--speed), background var(--speed);
}

.wish:hover {
	transform: scale(1.1);
	color: var(--terracotta);
}

.wish[aria-pressed="true"] {
	color: var(--terracotta);
}

.wish[aria-pressed="true"] .icon path {
	fill: currentColor;
}

.wish.pop .icon {
	animation: mcw-pop 0.4s var(--ease);
}

@keyframes mcw-pop {
	40% {
		transform: scale(1.35);
	}
}

.quick-add {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.72rem 1rem;
	border-radius: 999px;
	background: rgb(163 220 192 / 0.95);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: var(--espresso);
	font-size: 0.88rem;
	font-weight: 600;
	transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease), background var(--speed);
}

.quick-add:hover {
	background: rgb(163 220 192 / 0.75);
	color: var(--espresso);
}

@media (hover: hover) and (pointer: fine) {
	.quick-add {
		opacity: 0;
		transform: translateY(10px);
	}

	.product-card:hover .quick-add,
	.product-card:focus-within .quick-add {
		opacity: 1;
		transform: none;
	}
}

/* Mobile-only add button: a normal button under the price, so the image
   stays clean (the overlay .quick-add is hidden on touch — see below). */
.pcard-add {
	display: none;
}

/* WooCommerce injects a "View cart" link after a successful ajax add; the
   card already confirms via the header badge + toast, so keep it hidden. */
.product-card .added_to_cart {
	display: none !important;
}

/* Ajax add feedback: dim while loading, flash sage on success. */
.quick-add.loading {
	opacity: 0.75;
	pointer-events: none;
}

.quick-add.added {
	background: var(--sage);
	color: #fff;
}

.product-info {
	padding: 1rem 1.15rem 1.15rem;
	display: grid;
	gap: 0.3rem;
	align-content: start;
	background: #F6F4F5;
}

.product-cat {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: var(--cocoa);
	opacity: 0.85;
}

.product-title {
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.8em;
}

.product-title a {
	color: var(--espresso);
	transition: color var(--speed);
}

.product-title a:hover {
	color: var(--terracotta-deep);
}

.product-meta {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.review-count {
	font-size: 0.8rem;
	color: var(--cocoa);
}

.price {
	font-size: 1.05rem;
	font-weight: 650;
	color: var(--espresso);
	margin-top: 0.25rem;
	font-variant-numeric: tabular-nums;
}


.price del {
	color: var(--cocoa);
	font-weight: 400;
	font-size: 0.9em;
	margin-inline-end: 0.45rem;
	opacity: 0.75;
}

.price ins {
	text-decoration: none;
}

.product-card .price ins {
	color: var(--terracotta-deep);
}

/* 10. Social grid
   ------------------------------------------------------------- */
.social-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.9rem;
}

.social-tile {
	position: relative;
	display: block;
	border-radius: 18px;
	overflow: hidden;
	aspect-ratio: 1;
}

.social-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s var(--ease);
}

.social-tile:hover img,
.social-tile:focus-visible img {
	transform: scale(1.07);
}

.social-overlay {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 0.35rem;
	background: rgb(36 26 20 / 0.55);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	opacity: 0;
	transition: opacity 0.3s;
}

.social-tile:hover .social-overlay,
.social-tile:focus-visible .social-overlay {
	opacity: 1;
}

/* 11. Reviews
   ------------------------------------------------------------- */
.section-reviews {
	background: var(--espresso);
}

.section-reviews h2 {
	color: var(--cream);
}

.section-reviews .kicker {
	color: var(--sage-light);
}

.reviews-grid {
	display: flex;
	gap: 1.4rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	padding: 0.5rem 0.3rem 1.3rem;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.reviews-grid::-webkit-scrollbar {
	display: none;
}

.reviews-grid > li {
	flex: 0 0 calc((100% - 2 * 1.4rem) / 3);
	scroll-snap-align: start;
	display: flex;
}

.reviews-grid > li .review-card {
	width: 100%;
}

.review-card {
	--rev-accent: var(--blush);
	position: relative;
	overflow: hidden;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 1.7rem 1.6rem 1.5rem;
	display: grid;
	gap: 0.9rem;
	align-content: start;
	height: 100%;
	rotate: -1.1deg;
	transition: transform 0.3s var(--ease), rotate 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s;
}

.reviews-grid li:nth-child(6n+2) .review-card { --rev-accent: var(--sage-light); rotate: 1deg; }
.reviews-grid li:nth-child(6n+3) .review-card { --rev-accent: #F7F1AF; rotate: -0.6deg; }
.reviews-grid li:nth-child(6n+4) .review-card { --rev-accent: var(--rose); rotate: 1.3deg; }
.reviews-grid li:nth-child(6n+5) .review-card { --rev-accent: #FBD9E0; rotate: -0.9deg; }
.reviews-grid li:nth-child(6n+6) .review-card { --rev-accent: #BEE8D2; rotate: 0.7deg; }

.review-card:hover {
	rotate: 0deg;
	transform: translateY(-5px);
	box-shadow: var(--shadow-lift);
	border-color: var(--line-strong);
}

.review-blob {
	position: absolute;
	top: -48px;
	inset-inline-end: -42px;
	width: 150px;
	height: 150px;
	background: var(--rev-accent);
	opacity: 0.55;
	border-radius: 58% 42% 55% 45% / 52% 58% 42% 48%;
	animation:
		mcw-blob-morph 11s ease-in-out infinite alternate,
		mcw-blob-bob 8s ease-in-out infinite;
}

.reviews-grid li:nth-child(3n+2) .review-blob { animation-delay: -4s, -2.5s; }
.reviews-grid li:nth-child(3n+3) .review-blob { animation-delay: -7s, -5s; }

.review-quote {
	position: absolute;
	top: 16px;
	inset-inline-end: 18px;
	color: var(--terracotta-deep);
	opacity: 0.3;
	transform: rotate(8deg);
	transition: opacity var(--speed), transform 0.3s var(--ease);
}

.review-card:hover .review-quote {
	opacity: 0.55;
	transform: rotate(0deg) scale(1.08);
}

.review-card .stars,
.review-card blockquote,
.review-author {
	position: relative;
	z-index: 1;
}

.review-card blockquote p {
	font-size: 0.97rem;
	line-height: 1.7;
	color: var(--ink);
}

.review-author {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-top: 0.25rem;
}

.review-initial {
	position: relative;
	flex: none;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	background: var(--rev-accent);
	border-radius: 46% 54% 52% 48% / 54% 46% 54% 46%;
	animation: mcw-blob-morph 8s ease-in-out infinite alternate;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--espresso);
}

.review-initial b {
	font-weight: 700;
}

.review-initial .review-avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.review-initial-ring {
	position: absolute;
	inset: -5px;
	border: 1.5px dashed var(--line-strong);
	border-radius: 50%;
	opacity: 0.8;
	animation: mcw-ring-spin 24s linear infinite;
	transition: border-color var(--speed);
}

.review-card:hover .review-initial-ring {
	border-color: var(--terracotta);
}

.review-who {
	display: grid;
	gap: 0.3rem;
}

.review-who strong {
	font-size: 0.95rem;
	color: var(--espresso);
}

.review-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.review-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
	padding: 0.22rem 0.62rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.3;
	transition: transform 0.25s var(--ease);
}

.review-card:hover .review-pill {
	transform: translateY(-1px);
}

.review-pill-verified {
	background: var(--sage-light);
	color: var(--sage);
}

.review-pill-product {
	background: #F4EC8E;
	color: var(--espresso);
}

/* 12. Footer
   ------------------------------------------------------------- */
.site-footer {
	background: #000;
	color: #f3eeee;
	padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem;
}

.newsletter {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 2rem;
	align-items: center;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: clamp(1.75rem, 4vw, 3rem);
	margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.newsletter-title {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	color: var(--espresso);
	margin-bottom: 0.6rem;
}

.newsletter-copy p {
	color: var(--cocoa);
	max-width: 44ch;
}

.newsletter-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.newsletter-form input[type="email"] {
	flex: 1 1 220px;
	background: rgb(255 255 255 / 0.08);
	border: 1px solid rgb(255 255 255 / 0.18);
	color: var(--espresso);
	border-radius: 999px;
	padding: 0.85rem 1.3rem;
	transition: border-color var(--speed);
}

.newsletter-form input[type="email"]::placeholder {
	color: rgb(251 243 228 / 0.45);
}

.newsletter-form input[type="email"]:focus {
	outline: none;
	border-color: var(--honey);
}

.site-footer .btn-dark {
	background: var(--terracotta);
	color: var(--espresso);
}

.site-footer .btn-dark:hover {
	background: var(--terracotta-deep);
	color: #fff;
}

.form-note {
	flex-basis: 100%;
	min-height: 1.3em;
	font-size: 0.85rem;
	color: var(--cocoa);
	margin: 0;
}

.form-note.ok {
	color: var(--sage);
}

.form-note.err {
	color: var(--terracotta-deep);
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.5fr repeat(3, 1fr);
	gap: 2rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid rgb(255 255 255 / 0.1);
}

.site-footer .brand {
	color: #f3eeee;
}

.site-footer .brand-word em {
	color: var(--terracotta-deep);
}

.site-footer .brand-mark {
	color: var(--terracotta-deep);
}

.footer-brand > p {
	color: #f3eeee;
	font-size: 0.95rem;
	margin: 0.9rem 0 1.1rem;
	max-width: 34ch;
}

.footer-social {
	display: flex;
	flex-wrap: nowrap;        /* keep all four icons on one line */
	gap: 0.4rem;
}

.site-footer .icon-btn {
	color: #f3eeee;
}

/* Footer social icons: a touch bigger, and never allowed to shrink or
   wrap to a second line. */
.site-footer .footer-social .icon-btn {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
}

.site-footer .footer-social .icon-btn .icon {
	width: 24px;
	height: 24px;
}

.site-footer .icon-btn:hover {
	background: rgb(255 255 255 / 0.18);
}

.footer-col h3 {
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sage-light);
	margin-bottom: 1.1rem;
}

.footer-col ul {
	display: grid;
	gap: 0.2rem;
}

.footer-col a {
	display: inline-block;
	padding-block: 0.35rem; /* touch/click target of at least 24px */
	color: #f3eeee;
	font-size: 0.95rem;
	transition: color var(--speed);
}

.footer-col a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.newsletter-cta-wrap {
	display: grid;
	align-content: center;
	justify-items: stretch;
}

.newsletter-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 1.1rem 2rem;
	border-radius: 999px;
	background: linear-gradient(90deg, #dcb961, #f4e0a3 30%, #e0bf6c 55%, #f8e9bb 80%, #dcb961);
	color: var(--espresso);
	font-size: 1.08rem;
	font-weight: 700;
	box-shadow: 0 14px 30px -12px rgb(0 0 0 / 0.4);
	transition: background var(--speed), color var(--speed), transform var(--speed) var(--ease), box-shadow var(--speed);
}

/* gentle attention pulse — this is the site's main conversion CTA */
.newsletter-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	animation: mcw-cta-pulse 2.8s ease-out infinite;
	pointer-events: none;
}

@keyframes mcw-cta-pulse {
	0% { box-shadow: 0 0 0 0 rgb(220 185 97 / 0.55); }
	70% { box-shadow: 0 0 0 14px rgb(220 185 97 / 0); }
	100% { box-shadow: 0 0 0 0 rgb(220 185 97 / 0); }
}

.newsletter-cta .icon {
	transition: transform var(--speed) var(--ease);
}

.newsletter-cta:hover,
.newsletter-cta:focus-visible {
	background: #000;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 18px 38px -12px rgb(0 0 0 / 0.5);
}

.newsletter-cta:hover .icon {
	transform: scale(1.18);
}

@media (prefers-reduced-motion: reduce) {
	.newsletter-cta::before {
		animation: none;
	}
}

.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	padding-top: 1.6rem;
	font-size: 0.85rem;
	color: #f3eeee;
}

.payments {
	display: flex;
	gap: 0.4rem;
}

.payment-pill {
	border: 1px solid rgb(255 255 255 / 0.3);
	border-radius: 7px;
	padding: 0.28rem 0.6rem;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #f3eeee;
}

/* 13. Toast + misc
   ------------------------------------------------------------- */
.mcw-toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	background: var(--espresso);
	color: #fff;
	padding: 0.85rem 1.4rem;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 600;
	box-shadow: var(--shadow-lift);
	opacity: 0;
	transform: translate(-50%, 16px);
	transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
	pointer-events: none;
}

.mcw-toast.show {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Sit clear of the cookie-consent bar while it's on screen. */
body:has([data-mcw-cookies]) .mcw-toast {
	bottom: 92px;
}

.mcw-toast .icon {
	color: #fff;
}

/* 14. WooCommerce & generic pages
   ------------------------------------------------------------- */
.woocommerce-wrap a.button,
.woocommerce-wrap button.button {
	background: var(--terracotta);
	color: var(--espresso);
	border-radius: 999px;
	font-weight: 600;
}

.woocommerce-wrap a.button:hover,
.woocommerce-wrap button.button:hover {
	background: var(--terracotta-deep);
	color: #fff;
}

.post-list {
	display: grid;
	gap: 2rem;
	max-width: 720px;
}

.post-teaser h2 {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}

.post-teaser a:hover {
	color: var(--terracotta-deep);
}

.entry-summary {
	color: var(--cocoa);
}

/* Single product — layout */
#main .woocommerce-wrap div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

#main .woocommerce-wrap div.product div.images,
#main .woocommerce-wrap div.product div.summary {
	float: none;
	width: 100%;
	margin: 0;
}

#main .woocommerce-wrap div.product .woocommerce-tabs,
#main .woocommerce-wrap div.product .related,
#main .woocommerce-wrap div.product .up-sells {
	grid-column: 1 / -1;
	float: none;
	width: 100%;
}

/* Single product — gallery */
#main .woocommerce-wrap div.product div.images .woocommerce-product-gallery__wrapper {
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--sand);
	box-shadow: var(--shadow-soft);
}

#main .woocommerce-wrap div.product div.images .flex-control-thumbs {
	display: flex;
	gap: 0.6rem;
	margin-top: 0.75rem;
}

#main .woocommerce-wrap div.product div.images .flex-control-thumbs li {
	float: none;
	width: 84px;
}

#main .woocommerce-wrap div.product div.images .flex-control-thumbs img {
	border-radius: 12px;
	border: 1.5px solid transparent;
	opacity: 0.7;
	transition: opacity var(--speed), border-color var(--speed);
}

#main .woocommerce-wrap div.product div.images .flex-control-thumbs img.flex-active,
#main .woocommerce-wrap div.product div.images .flex-control-thumbs img:hover {
	opacity: 1;
	border-color: var(--terracotta);
}

/* Single product — sale badge (match card badges) */
#main .woocommerce-wrap span.onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	z-index: 2;
	width: max-content;           /* was stretching full-width as a grid child */
	max-width: calc(100% - 24px);
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0.42rem 0.95rem;
	border-radius: 999px;
	background: #F4EB76;          /* lemon — cheerful, distinct from the green CTAs */
	color: var(--espresso);
	font-size: 0.86rem;
	font-weight: 800;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: 0 6px 16px -9px rgb(33 26 28 / 0.45);
}

/* RTL layout puts the image column on the right and the title column on
   the left, so a left-pinned badge lands on the title. Pin it to the
   image's top-right corner instead (clear of the top-left zoom trigger). */
body.rtl #main .woocommerce-wrap span.onsale {
	left: auto;
	right: 12px;
}

/* "You saved ₪X" pill under the price on single product. */
#main .woocommerce-wrap .mcw-save-line {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin: -0.3rem 0 1.1rem;
	padding: 0.28rem 0.8rem;
	border-radius: 999px;
	background: var(--sand);
	color: var(--terracotta-deep);
	font-weight: 700;
	font-size: 0.9rem;
}

#main .woocommerce-wrap .mcw-save-line .amount {
	font-weight: 800;
}

/* Single product — summary column */
#main .woocommerce-wrap div.product .product_title {
	font-size: clamp(1.9rem, 3.5vw, 2.6rem);
	margin-bottom: 0.4rem;
}

#main .woocommerce-wrap .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 1.1rem;
}

#main .woocommerce-wrap .woocommerce-review-link {
	color: var(--cocoa);
	font-size: 0.9rem;
}

#main .woocommerce-wrap .woocommerce-review-link:hover {
	color: var(--terracotta-deep);
}

#main .woocommerce-wrap .star-rating,
#main .woocommerce-wrap p.stars a {
	color: var(--honey);
}

#main .woocommerce-wrap div.product p.price {
	font-size: 1.45rem;
	font-weight: 600;
	color: var(--espresso);
	margin: 0 0 1rem;
}

#main .woocommerce-wrap div.product p.price del {
	color: var(--cocoa);
	font-weight: 400;
	font-size: 1.1rem;
	margin-right: 0.45rem;
	opacity: 1;
}

#main .woocommerce-wrap div.product p.price ins {
	text-decoration: none;
	font-weight: 600;
}

#main .woocommerce-wrap div.product .woocommerce-product-details__short-description {
	color: var(--cocoa);
	margin-bottom: 1.4rem;
}

/* Single product — variation selectors */
#main .woocommerce-wrap table.variations {
	border-collapse: collapse;
	margin-bottom: 0.5rem;
	width: 100%;
}

#main .woocommerce-wrap table.variations tr {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.7rem;
}

#main .woocommerce-wrap table.variations th.label,
#main .woocommerce-wrap table.variations td.value {
	display: block;
	padding: 0;
	text-align: left;
}

#main .woocommerce-wrap table.variations th.label label {
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--espresso);
}

#main .woocommerce-wrap table.variations td.value select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	max-width: 340px;
	padding: 0.72rem 2.6rem 0.72rem 1.1rem;
	border: 1.5px solid var(--line-strong);
	border-radius: 999px;
	background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E5A4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 500;
	cursor: pointer;
	transition: border-color var(--speed), box-shadow var(--speed);
}

#main .woocommerce-wrap table.variations td.value select:hover {
	border-color: var(--terracotta);
}

#main .woocommerce-wrap table.variations td.value select:focus {
	outline: none;
	border-color: var(--terracotta);
	box-shadow: 0 0 0 3px rgb(238 107 132 / 0.35);
}

#main .woocommerce-wrap .reset_variations {
	color: var(--cocoa);
	font-size: 0.85rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

#main .woocommerce-wrap .reset_variations:hover {
	color: var(--terracotta-deep);
}

#main .woocommerce-wrap .woocommerce-variation.single_variation {
	margin-bottom: 0.9rem;
}

#main .woocommerce-wrap .woocommerce-variation-price .price {
	font-size: 1.45rem;
	font-weight: 600;
	color: var(--espresso);
}

/* Single product — quantity + add to cart */
#main .woocommerce-wrap .woocommerce-variation-add-to-cart,
#main .woocommerce-wrap form.cart:not(.variations_form) {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

#main .woocommerce-wrap form.cart div.quantity {
	float: none;
	margin: 0;
}

#main .woocommerce-wrap form.cart input.qty {
	width: 4.8rem;
	padding: 0.78rem 0.4rem;
	border: 1.5px solid var(--line-strong);
	border-radius: 999px;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 0.98rem;
	font-weight: 600;
	text-align: center;
}

#main .woocommerce-wrap form.cart input.qty:focus {
	outline: none;
	border-color: var(--terracotta);
	box-shadow: 0 0 0 3px rgb(238 107 132 / 0.35);
}

#main .woocommerce-wrap button.single_add_to_cart_button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.85rem 1.9rem;
	border: 0;
	border-radius: 999px;
	background: var(--terracotta);
	color: var(--espresso);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background var(--speed), transform var(--speed) var(--ease), box-shadow var(--speed);
}

#main .woocommerce-wrap button.single_add_to_cart_button.button {
	background: var(--sage-light);
	color: var(--espresso);
}

#main .woocommerce-wrap button.single_add_to_cart_button.button:hover {
	background: var(--sage);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--shadow-soft);
}

#main .woocommerce-wrap button.single_add_to_cart_button.button:active {
	transform: scale(0.97);
}

#main .woocommerce-wrap button.single_add_to_cart_button.button.disabled,
#main .woocommerce-wrap button.single_add_to_cart_button.button:disabled {
	background: var(--line-strong);
	color: var(--cocoa);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Single product — meta */
#main .woocommerce-wrap .product_meta {
	display: grid;
	gap: 0.3rem;
	margin-top: 1.6rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--line);
	color: var(--cocoa);
	font-size: 0.9rem;
}

#main .woocommerce-wrap .product_meta > span {
	display: block;
}

#main .woocommerce-wrap .product_meta a {
	color: var(--terracotta-deep);
}

#main .woocommerce-wrap .product_meta a:hover {
	text-decoration: underline;
}

/* Single product — tabs */
#main .woocommerce-wrap .woocommerce-tabs {
	margin-top: clamp(2rem, 5vw, 3.5rem);
}

#main .woocommerce-wrap .woocommerce-tabs ul.wc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem;
	margin: 0 0 1.6rem;
	padding: 0;
	border-bottom: 1px solid var(--line-strong);
	background: none;
}

#main .woocommerce-wrap .woocommerce-tabs ul.wc-tabs::before,
#main .woocommerce-wrap .woocommerce-tabs ul.wc-tabs::after,
#main .woocommerce-wrap .woocommerce-tabs ul.wc-tabs li::before,
#main .woocommerce-wrap .woocommerce-tabs ul.wc-tabs li::after {
	display: none;
}

#main .woocommerce-wrap .woocommerce-tabs ul.wc-tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

#main .woocommerce-wrap .woocommerce-tabs ul.wc-tabs li a {
	display: inline-block;
	padding: 0.6rem 0.1rem;
	color: var(--cocoa);
	font-weight: 600;
	font-size: 0.95rem;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color var(--speed), border-color var(--speed);
}

#main .woocommerce-wrap .woocommerce-tabs ul.wc-tabs li.active a,
#main .woocommerce-wrap .woocommerce-tabs ul.wc-tabs li a:hover {
	color: var(--espresso);
	border-bottom-color: var(--terracotta);
}

#main .woocommerce-wrap .woocommerce-Tabs-panel {
	max-width: 860px;
	color: var(--ink);
}

#main .woocommerce-wrap .woocommerce-Tabs-panel > h2:first-of-type {
	font-size: 1.5rem;
	margin-bottom: 0.9rem;
}

#main .woocommerce-wrap .woocommerce-Tabs-panel h2 {
	font-size: 1.5rem;
	margin: 0 0 0.9rem;
}

#main .woocommerce-wrap .woocommerce-Tabs-panel h3 {
	font-size: 1.15rem;
	margin: 1.4rem 0 0.6rem;
}

#main .woocommerce-wrap .woocommerce-Tabs-panel p {
	margin: 0 0 1rem;
}

#main .woocommerce-wrap .woocommerce-Tabs-panel ul {
	list-style: disc;
	padding-left: 1.35rem;
	margin: 0 0 1rem;
}

#main .woocommerce-wrap .woocommerce-Tabs-panel ol {
	list-style: decimal;
	padding-left: 1.35rem;
	margin: 0 0 1rem;
}

#main .woocommerce-wrap .woocommerce-Tabs-panel li {
	margin-bottom: 0.4rem;
}

/* Attributes table */
#main .woocommerce-wrap table.woocommerce-product-attributes {
	border-collapse: collapse;
	width: 100%;
	max-width: 560px;
}

#main .woocommerce-wrap table.woocommerce-product-attributes th,
#main .woocommerce-wrap table.woocommerce-product-attributes td {
	border: 0;
	border-bottom: 1px solid var(--line);
	padding: 0.65rem 0.25rem;
	background: none;
	font-style: normal;
	text-align: left;
}

#main .woocommerce-wrap table.woocommerce-product-attributes th {
	color: var(--espresso);
	font-weight: 600;
}

#main .woocommerce-wrap table.woocommerce-product-attributes td p {
	margin: 0;
	color: var(--cocoa);
}

/* Reviews */
#main .woocommerce-wrap #reviews .commentlist {
	display: grid;
	gap: 1rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

#main .woocommerce-wrap #reviews .commentlist li {
	margin: 0;
}

#main .woocommerce-wrap #reviews .commentlist li img.avatar {
	display: none;
}

#main .woocommerce-wrap #reviews .commentlist li .comment-text {
	margin: 0;
	padding: 1.15rem 1.3rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
}

#main .woocommerce-wrap #reviews .comment-text p.meta {
	margin: 0.35rem 0 0.55rem;
	color: var(--cocoa);
	font-size: 0.85rem;
}

#main .woocommerce-wrap #reviews .comment-text p.meta strong {
	color: var(--espresso);
}

#main .woocommerce-wrap #reviews .comment-text .description p {
	margin: 0;
}

#main .woocommerce-wrap #review_form .comment-reply-title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	color: var(--espresso);
	display: block;
	margin-bottom: 0.75rem;
}

#main .woocommerce-wrap #review_form label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 0.3rem;
}

#main .woocommerce-wrap #review_form input[type="text"],
#main .woocommerce-wrap #review_form input[type="email"],
#main .woocommerce-wrap #review_form textarea {
	width: 100%;
	max-width: 520px;
	padding: 0.7rem 1rem;
	border: 1.5px solid var(--line-strong);
	border-radius: 14px;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 0.95rem;
}

#main .woocommerce-wrap #review_form input:focus,
#main .woocommerce-wrap #review_form textarea:focus {
	outline: none;
	border-color: var(--terracotta);
	box-shadow: 0 0 0 3px rgb(238 107 132 / 0.35);
}

#main .woocommerce-wrap #review_form p.stars {
	font-size: 1.15rem;
}

/* Shop archive & related products: same cards as the front page.
   Layout comes from .product-grid (added via woocommerce_product_loop_start);
   card visuals come from .product-card. */
#main .woocommerce-wrap ul.products {
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}

#main .woocommerce-wrap ul.products::before,
#main .woocommerce-wrap ul.products::after {
	display: none;
}

#main .woocommerce-wrap ul.products li.product {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

#main .woocommerce-wrap .woocommerce-result-count {
	color: var(--cocoa);
	font-size: 0.9rem;
}

#main .woocommerce-wrap .woocommerce-ordering select {
	padding: 0.55rem 2.4rem 0.55rem 1rem;
	border: 1.5px solid var(--line-strong);
	border-radius: 999px;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 0.9rem;
}

/* Notices — the success message is a compact friendly toast pill. */
body.single-product #main .woocommerce-wrap .woocommerce-message {
	display: none;
}

#main .woocommerce-wrap .woocommerce-message,
#main .woocommerce-wrap .woocommerce-info {
	border: 0;
	border-radius: var(--radius);
	background: var(--sage-light);
	color: var(--ink);
	padding: 1rem 1.25rem;
	margin-bottom: 1.75rem;
}

#main .woocommerce-wrap .woocommerce-message {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	width: fit-content;
	max-width: 100%;
	border-radius: 999px;
	padding: 0.5rem 0.6rem;
	padding-inline-start: 1rem;
	font-size: 0.92rem;
	box-shadow: 0 12px 26px -16px rgb(64 27 39 / 0.35);
	outline: none;
}

/* friendly check bubble instead of Woo's icon font */
#main .woocommerce-wrap .woocommerce-message::before {
	content: "";
	display: inline-block;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	position: static;
	background: var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.8 10 18 19 6.8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

#main .woocommerce-wrap .woocommerce-message .button {
	order: 2;
	flex: none;
	font-size: 0.85rem;
	padding: 0.5rem 1.05rem;
}

/* phones: the button gets its own row, so large text (in-app browsers) can't push it off screen */
@media (max-width: 768px) {
	#main .woocommerce-wrap .woocommerce-message {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		border-radius: 1.5rem;
	}

	#main .woocommerce-wrap .woocommerce-message .button {
		grid-column: 1 / -1;
		justify-self: end;
		max-width: 100%;
		white-space: normal;
	}
}

#main .woocommerce-wrap .woocommerce-info::before {
	display: none;
	content: none;
}

#main .woocommerce-wrap .woocommerce-error {
	border: 0;
	border-radius: var(--radius);
	background: var(--rose);
	color: var(--ink);
	padding: 1rem 1.25rem;
	margin-bottom: 1.75rem;
}

#main .woocommerce-wrap .woocommerce-error::before {
	display: none;
	content: none;
}

#main .woocommerce-wrap .woocommerce-message .button,
#main .woocommerce-wrap .woocommerce-info .button,
#main .woocommerce-wrap .woocommerce-error .button {
	background: var(--terracotta);
	color: var(--espresso);
	border-radius: 999px;
	font-weight: 600;
}

/* Static page shell (page.php) */
.mcw-page .page-head {
	margin-bottom: 1.75rem;
}

.mcw-page .page-title {
	font-size: clamp(2rem, 4vw, 2.75rem);
}

.mcw-page .page-content > p {
	margin-bottom: 1rem;
}

/* Wishlist page */
.mcw-wishlist-page [hidden] {
	display: none !important;
}

.mcw-wishlist-page .wishlist-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

.wishlist-loading {
	color: var(--cocoa);
	padding: 1.5rem 0;
}

.wishlist-empty {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--cocoa);
	display: grid;
	justify-items: center;
	gap: 1rem;
}

.wishlist-empty .icon {
	color: var(--terracotta);
}

.wishlist-empty p {
	font-size: 1.1rem;
	margin: 0;
}

@media (max-width: 860px) {
	.mcw-wishlist-page .wishlist-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 640px) {
	.mcw-wishlist-page .wishlist-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.3rem 0.65rem;
	}
}

/* WooCommerce buttons & forms (cart, account, checkout) */
#main .woocommerce-wrap a.button,
#main .woocommerce-wrap button.button,
#main .woocommerce-wrap input.button,
#main .woocommerce-wrap .woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.72rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--terracotta);
	color: var(--espresso);
	font-family: var(--font-body);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background var(--speed), transform var(--speed) var(--ease), box-shadow var(--speed);
}

#main .woocommerce-wrap a.button:hover,
#main .woocommerce-wrap button.button:hover,
#main .woocommerce-wrap input.button:hover,
#main .woocommerce-wrap .woocommerce-Button:hover {
	background: var(--terracotta-deep);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--shadow-soft);
}

#main .woocommerce-wrap button.button:disabled,
#main .woocommerce-wrap button.button.disabled {
	background: var(--line-strong);
	color: var(--cocoa);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

#main .woocommerce-wrap .input-text,
#main .woocommerce-wrap .woocommerce-Input {
	width: 100%;
	padding: 0.7rem 1rem;
	border: 1.5px solid var(--line-strong);
	border-radius: 14px;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 0.95rem;
}

#main .woocommerce-wrap .input-text:focus,
#main .woocommerce-wrap .woocommerce-Input:focus {
	outline: none;
	border-color: var(--terracotta);
	box-shadow: 0 0 0 3px rgb(238 107 132 / 0.35);
}

#main .woocommerce-wrap .quantity .qty {
	width: 4.8rem;
	padding: 0.72rem 0.4rem;
	border-radius: 999px;
	text-align: center;
	font-weight: 600;
}

#main .woocommerce-wrap .form-row {
	margin: 0 0 1.1rem;
	padding: 0;
}

#main .woocommerce-wrap .form-row label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 0.35rem;
	color: var(--espresso);
}

#main .woocommerce-wrap .form-row label.woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
	color: var(--ink);
}

#main .woocommerce-wrap .required {
	color: var(--terracotta);
	text-decoration: none;
}

#main .woocommerce-wrap .lost_password {
	font-size: 0.88rem;
}

#main .woocommerce-wrap .lost_password a,
#main .woocommerce-wrap .woocommerce-privacy-policy-text a {
	color: var(--terracotta-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Generic Woo tables (cart, orders) */
#main .woocommerce-wrap table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	border-radius: 0;
	margin: 0 0 1.5rem;
}

#main .woocommerce-wrap table.shop_table th,
#main .woocommerce-wrap table.shop_table td {
	border: 0;
	border-bottom: 1px solid var(--line);
	padding: 0.85rem 0.6rem;
	background: none;
	text-align: left;
	vertical-align: middle;
}

#main .woocommerce-wrap table.shop_table thead th {
	color: var(--espresso);
	font-weight: 600;
	font-size: 0.88rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Cart page */
#main .woocommerce-wrap .woocommerce-cart-form table.cart td.product-thumbnail img {
	width: 76px;
	height: 76px;
	object-fit: cover;
	border-radius: 14px;
	display: block;
}

#main .woocommerce-wrap .woocommerce-cart-form td.product-name {
	font-weight: 600;
	color: var(--espresso);
}

#main .woocommerce-wrap .woocommerce-cart-form td.product-name a:hover {
	color: var(--terracotta-deep);
}

#main .woocommerce-wrap .woocommerce-cart-form dl.variation {
	display: grid;
	grid-template-columns: max-content max-content;
	gap: 0.05rem 0.45rem;
	margin: 0.35rem 0 0;
	font-size: 0.83rem;
	font-weight: 400;
	color: var(--cocoa);
}

#main .woocommerce-wrap .woocommerce-cart-form dl.variation dt,
#main .woocommerce-wrap .woocommerce-cart-form dl.variation dd {
	margin: 0;
	padding: 0;
	border: 0;
}

#main .woocommerce-wrap .woocommerce-cart-form dl.variation dd p {
	margin: 0;
}

#main .woocommerce-wrap .woocommerce-cart-form td.product-subtotal {
	font-weight: 600;
	color: var(--espresso);
}

#main .woocommerce-wrap .woocommerce-cart-form a.remove {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1.5px solid var(--line-strong);
	border-radius: 50%;
	color: var(--cocoa) !important;
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background var(--speed), border-color var(--speed), color var(--speed);
}

#main .woocommerce-wrap .woocommerce-cart-form a.remove:hover {
	background: var(--terracotta);
	border-color: var(--terracotta);
	color: #fff !important;
}

#main .woocommerce-wrap .woocommerce-cart-form td.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
	padding-top: 1.3rem;
	border-bottom: 0;
}

#main .woocommerce-wrap .woocommerce-cart-form td.actions > button.button {
	float: none;
	margin: 0;
}

/* Quantities auto-update the cart (see main.js) — no manual button. */
#main .woocommerce-wrap .woocommerce-cart-form button[name="update_cart"] {
	display: none;
}

#main .woocommerce-wrap .woocommerce-cart-form .coupon {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	float: none;
	margin: 0;
}

#main .woocommerce-wrap .woocommerce-cart-form .coupon .input-text#coupon_code {
	width: 190px;
	border-radius: 999px;
	padding: 0.68rem 1.1rem;
}

#main .woocommerce-wrap .woocommerce-cart-form .coupon label {
	display: none;
}

/* Phones: keep the stacked cart table inside the screen. As a real table it
   grew to its widest row, so with the phone's text size turned up (Facebook's
   in-app browser follows it) prices ran off the left edge. */
@media (max-width: 768px) {
	#main .woocommerce-wrap table.shop_table_responsive,
	#main .woocommerce-wrap table.shop_table_responsive tbody {
		display: block;
		width: 100%;
	}

	#main .woocommerce-wrap table.shop_table_responsive td {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	#main .woocommerce-wrap .woocommerce-cart-form .coupon {
		display: flex;
		flex: 1 1 100%;
		max-width: 100%;
	}

	/* One row per product: × | name with the line total under it | quantity,
	   so it's clear which product the × removes. No "Product:" style labels. */
	#main .woocommerce-wrap .woocommerce-cart-form tr.cart_item {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"remove name  qty"
			"remove total qty";
		align-items: center;
		column-gap: 0.8rem;
		row-gap: 0.15rem;
		padding: 0.9rem 0;
		border-bottom: 1px solid var(--line);
	}

	#main .woocommerce-wrap .woocommerce-cart-form tr.cart_item td {
		display: block;
		padding: 0 !important;
		border: 0 !important;
	}

	#main .woocommerce-wrap .woocommerce-cart-form tr.cart_item td::before {
		display: none !important;
	}

	#main .woocommerce-wrap .woocommerce-cart-form tr.cart_item td.product-thumbnail,
	#main .woocommerce-wrap .woocommerce-cart-form tr.cart_item td.product-price {
		display: none !important;
	}

	#main .woocommerce-wrap .woocommerce-cart-form tr.cart_item td.product-remove {
		grid-area: remove;
	}

	#main .woocommerce-wrap .woocommerce-cart-form tr.cart_item td.product-name {
		grid-area: name;
		line-height: 1.35;
		text-align: right !important;
	}

	#main .woocommerce-wrap .woocommerce-cart-form tr.cart_item td.product-subtotal {
		grid-area: total;
		font-size: 0.88rem;
		color: var(--cocoa);
		text-align: right !important;
	}

	#main .woocommerce-wrap .woocommerce-cart-form tr.cart_item td.product-quantity {
		grid-area: qty;
	}

	#main .woocommerce-wrap .woocommerce-cart-form tr.cart_item td.product-quantity input.qty {
		width: 3.6rem;
	}
}

#main .woocommerce-wrap .cart-collaterals {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 2.5rem;
	margin-top: 2rem;
}

#main .woocommerce-wrap .cart-collaterals .cross-sells {
	flex: 1 1 320px;
	width: auto;
	float: none;
	margin-right: auto;
}

#main .woocommerce-wrap .cart-collaterals .cross-sells > h2,
#main .woocommerce-wrap .cart_totals > h2 {
	font-size: 1.3rem;
	margin: 0 0 0.9rem;
}

#main .woocommerce-wrap .cart_totals {
	float: none;
	width: 100%;
	max-width: 430px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 1.5rem 1.6rem 1.6rem;
	box-shadow: var(--shadow-soft);
}

/* Free-shipping progress banner (cart totals) */
.mcw-ship-progress {
	margin-bottom: 1.2rem;
	padding: 0.9rem 1rem 1rem;
	background: var(--blush);
	border-radius: var(--radius);
}

.mcw-ship-progress.is-complete {
	background: var(--sage-light);
}

.mcw-ship-progress-text {
	margin: 0 0 0.6rem;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--ink);
}

.mcw-ship-progress-text .woocommerce-Price-amount {
	font-weight: 700;
	color: var(--terracotta-deep);
}

.mcw-ship-progress.is-complete .mcw-ship-progress-text {
	color: var(--espresso);
}

.mcw-ship-progress-bar {
	display: block;
	height: 8px;
	border-radius: 999px;
	background: rgb(255 255 255 / 0.7);
	overflow: hidden;
}

.mcw-ship-progress-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #F4EC8E, var(--terracotta));
	transition: width 0.4s var(--ease);
}

.mcw-ship-progress.is-complete .mcw-ship-progress-fill {
	background: var(--sage);
}

/* Shipping rows in cart totals */
#main .woocommerce-wrap .cart_totals .woocommerce-shipping-methods {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

#main .woocommerce-wrap .cart_totals .woocommerce-shipping-methods li {
	margin: 0;
}

#main .woocommerce-wrap .cart_totals .woocommerce-shipping-methods label {
	font-weight: 500;
	color: var(--ink);
	cursor: pointer;
}

#main .woocommerce-wrap .cart_totals .woocommerce-shipping-methods input[type="radio"] {
	accent-color: var(--terracotta);
	margin-inline-end: 0.35rem;
}

#main .woocommerce-wrap .cart_totals .woocommerce-shipping-destination {
	color: var(--cocoa);
	font-size: 0.82rem;
	font-weight: 400;
}

#main .woocommerce-wrap .mcw-free-label {
	color: var(--sage);
	font-weight: 700;
}

#main .woocommerce-wrap .cart_totals table.shop_table {
	margin-bottom: 0.5rem;
}

#main .woocommerce-wrap .cart_totals table.shop_table th {
	color: var(--cocoa);
	font-weight: 600;
	padding-left: 0;
}

#main .woocommerce-wrap .cart_totals table.shop_table td {
	text-align: right;
	font-weight: 600;
	color: var(--espresso);
}

#main .woocommerce-wrap .cart_totals .order-total td,
#main .woocommerce-wrap .cart_totals .order-total th {
	font-size: 1.05rem;
	border-bottom: 0;
}

#main .woocommerce-wrap .wc-proceed-to-checkout {
	padding: 0.5rem 0 0;
	margin: 0;
}

#main .woocommerce-wrap .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
	justify-content: center;
	margin: 0;
	padding: 0.95rem 1.9rem;
	background: var(--terracotta);
	color: var(--espresso);
	font-size: 1rem;
}

#main .woocommerce-wrap .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--terracotta-deep);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--shadow-soft);
}

#main .woocommerce-wrap .return-to-shop {
	margin-top: 1rem;
}

/* Account: login & register columns, address columns */
#main .woocommerce-wrap .u-columns.col2-set::before,
#main .woocommerce-wrap .u-columns.col2-set::after,
#main .woocommerce-wrap .cart-collaterals::before,
#main .woocommerce-wrap .cart-collaterals::after,
#main .woocommerce-wrap .page-content > .woocommerce::before,
#main .woocommerce-wrap .page-content > .woocommerce::after {
	content: none;
}

#main .woocommerce-wrap .u-columns.col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	width: 100%;
}

#main .woocommerce-wrap .u-columns.col2-set .u-column1,
#main .woocommerce-wrap .u-columns.col2-set .u-column2 {
	float: none;
	width: 100%;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 1.75rem;
}

#main .woocommerce-wrap .u-columns.col2-set h2 {
	font-size: 1.35rem;
	margin: 0 0 1.1rem;
}

/* Checkout customer columns: billing on the left, shipping on the right. */
#main .woocommerce-wrap #customer_details.col2-set::before,
#main .woocommerce-wrap #customer_details.col2-set::after {
	content: none;
}

#main .woocommerce-wrap #customer_details.col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	width: 100%;
}

#main .woocommerce-wrap #customer_details.col2-set .col-1,
#main .woocommerce-wrap #customer_details.col2-set .col-2 {
	float: none;
	width: 100%;
}

/* Billing (col-1) on the right, shipping (col-2) on the left in RTL. */
#main .woocommerce-wrap #customer_details.col2-set .col-1 {
	order: 1;
}

#main .woocommerce-wrap #customer_details.col2-set .col-2 {
	order: 2;
}

#main .woocommerce-wrap form.login,
#main .woocommerce-wrap form.register {
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 0;
}

/* Account: dashboard layout */
#main .woocommerce-wrap .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 2.5rem;
	align-items: start;
}

#main .woocommerce-wrap .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

#main .woocommerce-wrap .woocommerce-MyAccount-navigation {
	float: none;
	width: 100%;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 0.8rem;
}

#main .woocommerce-wrap .woocommerce-MyAccount-navigation ul {
	display: grid;
	gap: 0.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

#main .woocommerce-wrap .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.6rem 0.9rem;
	border-radius: 12px;
	color: var(--cocoa);
	font-weight: 600;
	font-size: 0.93rem;
	transition: background var(--speed), color var(--speed);
}

#main .woocommerce-wrap .woocommerce-MyAccount-navigation li a:hover {
	background: var(--sand);
	color: var(--espresso);
}

#main .woocommerce-wrap .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--sage-light);
	color: var(--espresso);
}

/* Coming-soon "points" placeholder: looks like a nav item but isn't a link. */
#main .woocommerce-wrap .woocommerce-MyAccount-navigation li.mcw-soon .mcw-account-soon {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.6rem 0.9rem;
	border-radius: 12px;
	font-weight: 600;
	font-size: 0.93rem;
	color: var(--cocoa);
	opacity: 0.72;
	cursor: default;
}

.mcw-soon-badge {
	display: inline-block;
	padding: 0.05em 0.5em;
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.7;
	color: var(--terracotta-deep);
	background: var(--line);
	border-radius: 999px;
	white-space: nowrap;
}

#main .woocommerce-wrap .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

#main .woocommerce-wrap .woocommerce-MyAccount-content > p {
	margin-bottom: 1rem;
}

#main .woocommerce-wrap .woocommerce-MyAccount-content a:not(.button) {
	color: var(--terracotta-deep);
}

#main .woocommerce-wrap .woocommerce-MyAccount-content fieldset {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.25rem;
	margin: 0 0 1.25rem;
}

#main .woocommerce-wrap .woocommerce-MyAccount-content legend {
	font-family: var(--font-display);
	font-size: 1.1rem;
	color: var(--espresso);
	padding: 0 0.5rem;
}

#main .woocommerce-wrap .woocommerce-Address-title h2 {
	font-size: 1.2rem;
}

#main .woocommerce-wrap .woocommerce-Address address {
	font-style: normal;
	color: var(--cocoa);
	line-height: 1.7;
}

/* Articles index */
.mcw-articles .article-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.75rem;
}

.article-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform var(--speed) var(--ease), box-shadow var(--speed);
}

.article-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lift);
}

.article-thumb {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--sand);
	overflow: hidden;
}

.article-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s var(--ease);
}

.article-card:hover .article-thumb img {
	transform: scale(1.045);
}

.article-thumb-fallback {
	display: grid;
	place-items: center;
	height: 100%;
	color: var(--terracotta);
}

.article-info {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	flex: 1;
	padding: 1.1rem 1.25rem 1.3rem;
}

.article-date {
	color: var(--cocoa);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.article-title {
	font-size: 1.22rem;
	line-height: 1.28;
}

.article-title a:hover {
	color: var(--terracotta-deep);
}

.article-excerpt {
	color: var(--cocoa);
	font-size: 0.92rem;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.article-info .link-arrow {
	margin-top: auto;
	font-size: 0.9rem;
}

/* Pagination */
.mcw-articles .navigation.pagination {
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}

/* When the infinite-scroll JS activates it sets [hidden] on the pagination.
   This selector outranks the display:flex above, so the attribute truly hides
   it (otherwise display:flex wins and the pagination stays on screen). */
.mcw-articles .navigation.pagination[hidden] {
	display: none;
}

.mcw-articles .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.mcw-articles .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.85rem;
	border: 1.5px solid var(--line-strong);
	border-radius: 999px;
	color: var(--espresso);
	font-weight: 600;
	font-size: 0.9rem;
	transition: border-color var(--speed), background var(--speed), color var(--speed);
}

.mcw-articles .page-numbers:hover {
	border-color: var(--espresso);
}

.mcw-articles .page-numbers.current {
	background: var(--terracotta);
	border-color: var(--terracotta);
	color: var(--espresso);
}

.mcw-articles .page-numbers.dots {
	border-color: transparent;
}

/* Articles infinite scroll: loader + fade-in for appended cards. */
.mcw-infinite {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 52px;
	margin-top: 2rem;
}

.mcw-infinite-spinner {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 3px solid var(--line-strong);
	border-top-color: var(--terracotta);
	animation: mcw-spin 0.7s linear infinite;
}

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

@keyframes mcw-article-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.article-grid li.mcw-just-loaded {
		animation: mcw-article-in 0.5s var(--ease) both;
	}
}

/* Shop pagination — same pill style as the articles pagination. */
#main .woocommerce-wrap .woocommerce-pagination {
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}

#main .woocommerce-wrap .woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

#main .woocommerce-wrap .woocommerce-pagination ul.page-numbers li {
	margin: 0;
	padding: 0;
	border: 0;
}

#main .woocommerce-wrap .woocommerce-pagination li .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.85rem;
	border: 1.5px solid var(--line-strong);
	border-radius: 999px;
	color: var(--espresso);
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1;
	transition: border-color var(--speed), background var(--speed), color var(--speed);
}

#main .woocommerce-wrap .woocommerce-pagination li a.page-numbers:hover {
	border-color: var(--espresso);
}

#main .woocommerce-wrap .woocommerce-pagination li .page-numbers.current {
	background: var(--terracotta);
	border-color: var(--terracotta);
	color: var(--espresso);
}

#main .woocommerce-wrap .woocommerce-pagination li .page-numbers.dots {
	border-color: transparent;
}

/* Single article */
.icon.flip {
	transform: scaleX(-1);
}

.article-shell > * {
	max-width: 800px;
	margin-inline: auto;
}

.article-back {
	display: inline-flex;
	margin-bottom: 1.6rem;
	font-size: 0.9rem;
}

.article-back:hover .icon {
	transform: scaleX(-1) translateX(3px);
}

.article-page-title {
	font-size: clamp(1.9rem, 4vw, 2.7rem);
	margin-bottom: 1.5rem;
}

.article-hero {
	margin: 0 auto 1.9rem;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
}

.article-hero img {
	display: block;
	width: 100%;
	height: auto;
}

.article-content {
	font-size: 1.03rem;
	line-height: 1.78;
}

.article-content p {
	margin: 0 0 1.1rem;
}

.article-content h2 {
	font-size: 1.45rem;
	margin: 1.7rem 0 0.7rem;
}

.article-content h3 {
	font-size: 1.18rem;
	margin: 1.4rem 0 0.6rem;
}

.article-content a {
	color: var(--terracotta-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.article-content img {
	border-radius: var(--radius);
	margin: 0.6rem 0;
}

.article-content ul,
.article-content ol {
	padding-inline-start: 1.45rem;
	margin: 0 0 1.1rem;
}

.article-content ul {
	list-style: disc;
}

.article-content ol {
	list-style: decimal;
}

.article-content li {
	margin-bottom: 0.35rem;
}

.article-footer {
	margin-top: 2.3rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--line);
}

/* Article pages: the buttons use the store's green instead of terracotta. */
.article-shell .btn-dark {
	background: var(--sage-light);
	color: var(--espresso);
}

.article-shell .btn-dark:hover {
	background: var(--sage);
	color: #fff;
}

/* FAQ page: centered column */
.faq-head {
	text-align: center;
	margin-bottom: 2.4rem;
}

.faq-head .kicker {
	margin-bottom: 0.4rem;
}

/* Site-wide curly background (template-parts/curly-bg.php) */
.site-main,
.site-footer {
	position: relative;
	z-index: 1;
}

.mcw-curls {
	position: fixed;
	inset: 0 0 auto;
	/* The large viewport height stays put when Android's address bar hides on
	   scroll, so the curls (placed in % of this box) no longer jump. */
	height: 100vh;
	height: 100lvh;
	z-index: 0;
	pointer-events: none;
	contain: layout paint;
}

.mcw-curls .curl {
	position: absolute;
	animation: mcw-curl-float 14s ease-in-out infinite alternate;
}

@keyframes mcw-curl-float {
	from {
		transform: translateY(-14px) rotate(calc(var(--r, 0deg) - 7deg));
	}

	to {
		transform: translateY(16px) rotate(calc(var(--r, 0deg) + 9deg));
	}
}

@keyframes mcw-curl-spin {
	to {
		rotate: 360deg;
	}
}

.mcw-curls .curl-1 {
	top: 6%;
	left: 4%;
	width: 170px;
	color: var(--honey);
	opacity: 0.2;
	--r: -12deg;
	animation-duration: 16s;
}

.mcw-curls .curl-2 {
	top: 13%;
	right: 2%;
	width: 260px;
	color: var(--terracotta);
	opacity: 0.18;
	--r: 9deg;
	animation-duration: 19s;
	animation-delay: -6s;
}

.mcw-curls .curl-3 {
	bottom: 24%;
	left: 7%;
	width: 110px;
	color: var(--sage);
	opacity: 0.22;
	--r: 18deg;
	animation-duration: 15s;
	animation-delay: -3s;
}

.mcw-curls .curl-4 {
	top: 44%;
	right: 8%;
	width: 84px;
	color: var(--terracotta);
	opacity: 0.16;
	animation: mcw-curl-spin 70s linear infinite;
}

.mcw-curls .curl-5 {
	bottom: 8%;
	left: 14%;
	width: 300px;
	color: var(--rose);
	opacity: 0.55;
	--r: -6deg;
	animation-duration: 21s;
	animation-delay: -10s;
}

.mcw-curls .curl-6 {
	bottom: 12%;
	right: 12%;
	width: 130px;
	color: var(--honey);
	opacity: 0.17;
	--r: 24deg;
	animation-duration: 17s;
	animation-delay: -8s;
}

/* Background spirals on every page (the front page has none): light metallic
   gradients (gold, silver, pink, mint) instead of flat colours. */
.mcw-curls .curl {
	opacity: 0.75;
}

.mcw-curls .curl-1 path,
.mcw-curls .curl-6 path {
	stroke: url(#mcw-metal-gold);
}

.mcw-curls .curl-2 path,
.mcw-curls .curl-5 path {
	stroke: url(#mcw-metal-pink);
}

.mcw-curls .curl-3 path {
	stroke: url(#mcw-metal-mint);
}

.mcw-curls .curl-4 path {
	stroke: url(#mcw-metal-silver);
}
/* FAQ (details/summary accordion) */
.mcw-faq {
	display: grid;
	gap: 0.8rem;
	max-width: 840px;
	margin-inline: auto;
}

.faq-item {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color var(--speed), box-shadow var(--speed), transform var(--speed) var(--ease);
}

.faq-item:hover {
	border-color: var(--line-strong);
}

.faq-item[open] {
	border-color: var(--line-strong);
	box-shadow: var(--shadow-soft);
	transform: translateY(-1px);
}

.faq-item[open] .faq-answer {
	animation: mcw-faq-open 0.3s var(--ease);
}

@keyframes mcw-faq-open {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}
}

.faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	color: var(--espresso);
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary::after {
	content: "+";
	flex: none;
	font-size: 1.35rem;
	line-height: 1;
	color: var(--terracotta);
	transition: transform var(--speed) var(--ease);
}

.faq-item[open] summary::after {
	transform: rotate(45deg);
}

.faq-answer {
	padding: 0 1.25rem 1.15rem;
	color: var(--cocoa);
	line-height: 1.7;
}

.faq-answer p {
	margin: 0 0 0.8rem;
}

.faq-answer p:last-child {
	margin-bottom: 0;
}

.faq-answer a {
	color: var(--terracotta-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Contact page */
.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 2.5rem;
	align-items: start;
}

.contact-copy .contact-note {
	background: var(--sage-light);
	border-radius: var(--radius);
	padding: 0.85rem 1.1rem;
	font-size: 0.92rem;
	margin-bottom: 1.5rem;
}

.contact-copy h2 {
	font-size: 1.6rem;
	margin: 0 0 0.8rem;
}

.contact-copy p {
	margin-bottom: 0.9rem;
}

.contact-copy a {
	color: var(--terracotta-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.contact-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 1.75rem;
	box-shadow: var(--shadow-soft);
}

.contact-card-title {
	font-size: 1.35rem;
	margin-bottom: 1.1rem;
}

.mcw-contact-form .form-field {
	margin: 0 0 1.05rem;
}

.mcw-contact-form label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 0.35rem;
	color: var(--espresso);
}

.mcw-contact-form .req {
	color: var(--terracotta);
}

.mcw-contact-form input,
.mcw-contact-form textarea {
	width: 100%;
	padding: 0.7rem 1rem;
	border: 1.5px solid var(--line-strong);
	border-radius: 14px;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 0.95rem;
}

.mcw-contact-form input:focus,
.mcw-contact-form textarea:focus {
	outline: none;
	border-color: var(--terracotta);
	box-shadow: 0 0 0 3px rgb(238 107 132 / 0.35);
}

/* Honeypot: hidden without parking it far off-screen — on RTL pages a -9999px
   offset widens the scrollable area and Android Chrome scrolls sideways. */
.mcw-contact-form .mcw-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	opacity: 0;
	pointer-events: none;
}

.contact-submit {
	background: var(--terracotta);
	color: var(--espresso);
	border: 0;
}

.contact-submit:hover {
	background: var(--terracotta-deep);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--shadow-soft);
}

.mcw-form-notice {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	font-weight: 500;
}

.mcw-form-notice.is-success {
	background: var(--sage-light);
}

.mcw-form-notice.is-success .icon {
	color: var(--sage);
}

.mcw-form-notice.is-error {
	background: var(--rose);
}

/* ---- Cancellation request form ---- */
.mcw-cancellation .cancel-copy {
	max-width: 680px;
	margin: 0 auto 1.75rem;
}

.mcw-cancellation .cancel-copy p {
	margin-bottom: 0.9rem;
}

.mcw-cancellation .cancel-copy a {
	color: var(--terracotta-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mcw-cancellation .mcw-form-notice {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

.cancel-card {
	max-width: 680px;
	margin: 0 auto;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 1.75rem;
	box-shadow: var(--shadow-soft);
}

.cancel-card-title {
	font-size: 1.35rem;
	margin-bottom: 1.1rem;
}

.mcw-cancel-form .form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1rem;
}

.mcw-cancel-form .form-consent {
	display: flex;
	margin: 0.4rem 0 1.25rem;
}

.mcw-cancel-form .form-consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-weight: 500;
	font-size: 0.9rem;
	line-height: 1.5;
	cursor: pointer;
}

.mcw-cancel-form .form-consent input {
	width: auto;
	margin-top: 0.2rem;
	flex: 0 0 auto;
	accent-color: var(--sage);
}

.mcw-cancel-form .form-consent a {
	color: var(--terracotta-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mcw-cancel-form .contact-submit {
	width: 100%;
	justify-content: center;
	background: var(--sage-light);
	color: var(--espresso);
}

.mcw-cancel-form .contact-submit:hover {
	background: var(--sage);
	color: #fff;
}

.cancel-note {
	margin: 1rem 0 0;
	font-size: 0.82rem;
	color: var(--muted, #6b5f62);
}

@media (max-width: 560px) {
	.mcw-cancel-form .form-row {
		grid-template-columns: 1fr;
	}
}

/* Chat widget: hair question-mark launcher */
.mcw-cat {
	position: fixed;
	right: 8px;
	bottom: 6px;
	z-index: 900;
}

.cat-toggle {
	display: block;
	position: relative;
	width: 56px;
	height: 93px;
	padding: 0;
	border: 0;
	border-radius: 0;
	overflow: visible;
	cursor: pointer;
	background: transparent;
	animation: mcw-cat-pop 0.5s var(--ease) 0.4s backwards;
	transition: transform var(--speed) var(--ease);
	transform-origin: bottom center;
}

.cat-toggle:hover {
	transform: translateY(-4px) scale(1.04);
}

.cat-toggle:focus-visible {
	outline: 3px solid var(--terracotta);
	outline-offset: 4px;
	border-radius: 18px;
}

@keyframes mcw-cat-pop {
	from {
		transform: scale(0);
	}
}

.cat-q {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
	filter: drop-shadow(0 6px 8px rgb(64 27 39 / 0.22));
}

.cat-chat[hidden] {
	display: none;
}

.cat-chat {
	position: fixed;
	right: 8px;
	/* Height is derived from this bottom offset so the panel always leaves a
	   16px gap at the top and never clips its header on short screens. */
	--cat-chat-bottom: 108px;
	bottom: var(--cat-chat-bottom);
	z-index: 901;
	display: flex;
	flex-direction: column;
	width: min(360px, calc(100vw - 32px));
	height: min(540px, calc(100vh - var(--cat-chat-bottom) - 16px));
	height: min(540px, calc(100svh - var(--cat-chat-bottom) - 16px));
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lift);
	overflow: hidden;
	animation: mcw-fade-up 0.3s var(--ease);
}

.cat-chat-head {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.85rem 1rem;
	background: var(--espresso);
	color: var(--cream);
}

.cat-chat-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: contain;
	padding: 4px;
	background: var(--cream);
	border: 2px solid rgb(255 255 255 / 0.25);
}

.cat-chat-name {
	display: grid;
	gap: 0.05rem;
	line-height: 1.25;
	font-size: 0.95rem;
	margin-inline-end: auto;
}

.cat-status {
	font-size: 0.74rem;
	color: rgb(253 247 248 / 0.75);
	opacity: 0.9;
}

.cat-status::before {
	content: "●";
	color: #33C684;
	margin-inline-end: 0.3rem;
	font-size: 0.6rem;
	vertical-align: 1px;
}

.cat-close {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.14);
	color: var(--cream);
	cursor: pointer;
	transition: background var(--speed);
}

.cat-close:hover {
	background: rgb(255 255 255 / 0.3);
}

.cat-msgs {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem;
}

.cat-msg {
	max-width: 84%;
	padding: 0.6rem 0.85rem;
	border-radius: 16px;
	font-size: 0.92rem;
	line-height: 1.5;
}

.cat-msg-bot {
	align-self: flex-start;
	background: var(--white);
	border: 1px solid var(--line);
	border-start-start-radius: 5px;
	color: var(--ink);
}

.cat-msg-user {
	align-self: flex-end;
	background: #F4EC76;
	color: var(--espresso);
	border-start-end-radius: 5px;
}

.cat-typing {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	min-height: 1.1rem;
}

.cat-typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cocoa);
	opacity: 0.4;
	animation: mcw-cat-dot 1s ease-in-out infinite;
}

.cat-typing span:nth-child(2) {
	animation-delay: 0.15s;
}

.cat-typing span:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes mcw-cat-dot {
	40% {
		opacity: 1;
		transform: translateY(-3px);
	}
}

.cat-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0 1rem 1rem;
	max-height: 12rem;
	overflow-y: auto;
}

.cat-msg-bot a {
	color: var(--terracotta-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cat-chip-back {
	color: var(--cocoa);
	border-style: dashed;
}

.cat-chip {
	border: 1.5px solid var(--line-strong);
	background: var(--white);
	border-radius: 999px;
	padding: 0.4rem 0.8rem;
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--espresso);
	cursor: pointer;
	transition: border-color var(--speed), color var(--speed), transform var(--speed) var(--ease);
}

.cat-chip:hover {
	border-color: var(--honey);
	color: var(--honey-deep);
	transform: translateY(-1px);
}

@media (max-width: 640px) {
	.mcw-cat {
		right: 4px;
		bottom: 4px;
	}

	.cat-toggle {
		width: 46px;
		height: 76px;
	}

	.cat-chat {
		right: 4px;
		--cat-chat-bottom: 87px;
	}
}

/* Community reels: playable cards + lightbox player */
button.reel-card {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	text-align: inherit;
	cursor: pointer;
	width: 100%;
}

.mcw-reel-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: grid;
	place-items: center;
}

.mcw-reel-lightbox[hidden] {
	display: none;
}

.reel-lb-backdrop {
	position: absolute;
	inset: 0;
	background: rgb(33 26 28 / 0.82);
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
}

.reel-lb-body {
	position: relative;
	z-index: 1;
	width: min(420px, 92vw);
	animation: mcw-fade-up 0.3s var(--ease);
}

.reel-lb-media {
	aspect-ratio: 9 / 16;
	max-height: 80vh;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: #000;
	box-shadow: var(--shadow-lift);
}

.reel-lb-media video,
.reel-lb-media iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: contain;
	background: #000;
}

.reel-lb-name {
	margin: 0.75rem 0 0;
	text-align: center;
	color: var(--cream);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.reel-lb-close {
	position: absolute;
	top: -16px;
	inset-inline-end: -16px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--cream);
	color: var(--espresso);
	cursor: pointer;
	box-shadow: var(--shadow-soft);
	transition: transform var(--speed) var(--ease), background var(--speed);
}

.reel-lb-close:hover {
	transform: scale(1.08);
	background: var(--white);
}

/* Stockists map (page-locations.php) */
.loc-head {
	text-align: center;
	max-width: 780px;
	margin-inline: auto;
}

.loc-intro {
	color: var(--cocoa);
	line-height: 1.75;
	margin-top: 0.6rem;
}

.loc-intro p {
	margin-bottom: 0.5rem;
}

.loc-controls {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin: 1.6rem auto 1.4rem;
	max-width: 640px;
}

.loc-search {
	flex: 1;
	min-width: 230px;
	padding: 0.75rem 1.15rem;
	border: 1.5px solid var(--line-strong);
	border-radius: 999px;
	background: var(--white);
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: var(--ink);
}

.loc-search:focus {
	outline: none;
	border-color: var(--terracotta);
	box-shadow: 0 0 0 3px rgb(238 107 132 / 0.35);
}

.loc-city {
	appearance: none;
	-webkit-appearance: none;
	padding: 0.75rem 2.6rem 0.75rem 1.1rem;
	border: 1.5px solid var(--line-strong);
	border-radius: 999px;
	background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E5A4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center;
	font-family: var(--font-body);
	font-size: 0.92rem;
	color: var(--ink);
	cursor: pointer;
}

body.rtl .loc-city {
	background-position: left 1rem center;
	padding: 0.75rem 1.1rem 0.75rem 2.6rem;
}

.loc-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: 1.5rem;
	align-items: start;
}

.loc-map-wrap {
	position: sticky;
	top: calc(var(--header-h) + 16px);
}

#mcw-map {
	height: min(560px, 72vh);
	border-radius: var(--radius-lg);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-soft);
	z-index: 0;
	background: var(--sand);
}

.mcw-pin-wrap {
	background: none;
	border: 0;
}

.mcw-pin {
	display: block;
	width: 26px;
	height: 26px;
	background: var(--terracotta);
	border: 3px solid var(--white);
	border-radius: 58% 42% 55% 45% / 52% 58% 42% 48%;
	box-shadow: 0 4px 10px -2px rgb(64 27 39 / 0.4);
	transform-origin: bottom center;
	transition: transform 0.2s var(--ease);
}

.mcw-pin-wrap:hover .mcw-pin {
	transform: scale(1.2);
}

.leaflet-popup-content-wrapper {
	border-radius: var(--radius);
	font-family: var(--font-body);
}

.leaflet-popup-content a {
	color: var(--terracotta-deep);
	font-weight: 600;
}

.loc-list {
	display: grid;
	gap: 0.7rem;
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: min(560px, 72vh);
	overflow-y: auto;
	padding-inline-end: 4px;
}

.store-card {
	display: flex;
	gap: 0.8rem;
	align-items: flex-start;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 0.95rem 1.05rem;
	cursor: pointer;
	transition: transform var(--speed) var(--ease), border-color var(--speed), box-shadow var(--speed);
}

.store-card:hover {
	transform: translateY(-2px);
	border-color: var(--line-strong);
	box-shadow: var(--shadow-soft);
}

.store-card.is-active {
	border-color: var(--terracotta);
	box-shadow: 0 0 0 3px rgb(238 107 132 / 0.32);
}

.store-card[hidden] {
	display: none;
}

.store-pin {
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	background: var(--blush);
	color: var(--terracotta-deep);
	border-radius: 46% 54% 52% 48% / 54% 46% 54% 46%;
}

.store-body {
	display: grid;
	gap: 0.15rem;
	min-width: 0;
}

.store-body strong {
	color: var(--espresso);
	font-size: 0.97rem;
}

.store-addr {
	color: var(--cocoa);
	font-size: 0.87rem;
	line-height: 1.5;
}

.store-actions {
	display: flex;
	gap: 0.9rem;
	margin-top: 0.25rem;
}

.store-link {
	font-size: 0.83rem;
	font-weight: 700;
	color: var(--terracotta-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 900px) {
	.loc-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.loc-map-wrap {
		position: static;
	}

	#mcw-map {
		height: 55vh;
	}

	.loc-list {
		max-height: none;
		overflow: visible;
	}
}

/* Ingredients (page-ingredients.php) */
.ing-hero {
	max-width: 780px;
	margin: 0 auto clamp(2rem, 5vw, 3rem);
	text-align: center;
}

.ing-lead {
	color: var(--cocoa);
	line-height: 1.75;
	margin-top: 0.8rem;
}

.ing-effective {
	position: relative;
	overflow: hidden;
	max-width: 820px;
	margin: 0 auto clamp(2rem, 5vw, 2.8rem);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 1.9rem 2.1rem;
	text-align: center;
}

.ing-effective-head {
	position: relative;
	font-size: 1.25rem;
	margin-bottom: 0.7rem;
}

.ing-effective-quote {
	position: relative;
	font-size: 1.18rem;
	font-weight: 600;
	color: var(--terracotta-deep);
	line-height: 1.65;
}

.ing-effective-sub {
	position: relative;
	color: var(--cocoa);
	line-height: 1.7;
	margin-top: 0.7rem;
	font-size: 0.96rem;
}

.ing-not {
	max-width: 820px;
	margin: 0 auto clamp(2rem, 5vw, 2.8rem);
	text-align: center;
}

.ing-not h2 {
	font-size: 1.25rem;
	margin-bottom: 1rem;
}

.ing-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.ing-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.9rem;
	background: var(--terracotta);
	color: var(--espresso);
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
}

.ing-chip .icon {
	color: var(--terracotta-deep);
}

.ing-not-text {
	color: var(--cocoa);
	font-size: 0.92rem;
	line-height: 1.7;
	max-width: 62ch;
	margin-inline: auto;
}

.ing-yes-head {
	text-align: center;
	font-size: 1.45rem;
	margin-bottom: 1.4rem;
}

.ing-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.2rem;
	margin: 0 0 2.2rem;
	padding: 0;
	list-style: none;
}

.ing-card {
	--rev-accent: var(--sage-light);
	position: relative;
	height: 100%;
	display: grid;
	gap: 0.45rem;
	align-content: start;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 1.4rem 1.4rem 1.5rem;
	transition: transform var(--speed) var(--ease), box-shadow var(--speed), border-color var(--speed);
}

.ing-cards li:nth-child(6n+2) .ing-card { --rev-accent: var(--blush); }
.ing-cards li:nth-child(6n+3) .ing-card { --rev-accent: #F7F1AF; }
.ing-cards li:nth-child(6n+4) .ing-card { --rev-accent: var(--rose); }
.ing-cards li:nth-child(6n+5) .ing-card { --rev-accent: #FBD9E0; }
.ing-cards li:nth-child(6n+6) .ing-card { --rev-accent: #BEE8D2; }

.ing-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-soft);
	border-color: var(--line-strong);
}

.ing-card-icon {
	display: inline-grid;
	place-items: center;
	width: 46px;
	height: 46px;
	background: var(--rev-accent);
	color: var(--espresso);
	border-radius: 46% 54% 52% 48% / 54% 46% 54% 46%;
	animation: mcw-blob-morph 9s ease-in-out infinite alternate;
	margin-bottom: 0.3rem;
}

.ing-cards li:nth-child(2n) .ing-card-icon { animation-delay: -4s; }
.ing-cards li:nth-child(3n) .ing-card-icon { animation-delay: -7s; }

.ing-card h3 {
	font-size: 1.05rem;
}

.ing-card p {
	color: var(--cocoa);
	font-size: 0.92rem;
	line-height: 1.6;
}

/* Our story (page-our-story.php) */
.story-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.story-hero--solo {
	grid-template-columns: minmax(0, 46rem);
	justify-content: center;
	text-align: center;
}

.story-greeting {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--espresso);
	margin-top: 1rem;
}

.story-lead {
	color: var(--cocoa);
	font-size: 1.05rem;
	line-height: 1.75;
	margin-top: 0.6rem;
}

.story-hero-art {
	position: relative;
	width: min(380px, 100%);
	aspect-ratio: 1;
	justify-self: center;
}

.story-photo {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 58% 42% 55% 45% / 52% 58% 42% 48%;
	animation: mcw-blob-morph 11s ease-in-out infinite alternate;
	box-shadow: var(--shadow-soft);
}

.story-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 62%; /* keeps the faces in the blob */
	display: block;
}

.story-timeline {
	max-width: 720px;
	margin-inline: auto;
	display: grid;
	gap: 2.2rem;
	padding-inline-start: 0.5rem;
}

.story-chapter {
	position: relative;
	display: flex;
	gap: 1.3rem;
	align-items: flex-start;
	padding-inline-start: 0.4rem;
	border-inline-start: 2px dashed var(--line-strong);
	padding-bottom: 0.4rem;
}

.story-num {
	flex: none;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-inline-start: -28px;
	background: var(--sage-light);
	color: var(--espresso);
	font-weight: 700;
	font-size: 0.95rem;
	border-radius: 46% 54% 52% 48% / 54% 46% 54% 46%;
	animation: mcw-blob-morph 9s ease-in-out infinite alternate;
	box-shadow: var(--shadow-soft);
}

.story-chapter:nth-child(2n) .story-num { animation-delay: -4s; background: var(--terracotta); }

.story-chapter-title {
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
}

.story-chapter-body p {
	color: var(--ink);
	line-height: 1.75;
	margin-bottom: 0.8rem;
}

.story-quote {
	position: relative;
	overflow: hidden;
	max-width: 760px;
	margin: clamp(2.5rem, 6vw, 3.5rem) auto 0;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 2rem 2.2rem;
	text-align: center;
}

.story-quote-blob {
	position: absolute;
	top: -50px;
	inset-inline-start: -45px;
	width: 160px;
	height: 160px;
	background: var(--blush);
	opacity: 0.6;
	border-radius: 58% 42% 55% 45% / 52% 58% 42% 48%;
	animation: mcw-blob-morph 10s ease-in-out infinite alternate;
}

.story-quote-mark {
	position: relative;
	display: inline-block;
	color: var(--terracotta);
	opacity: 0.5;
	margin-bottom: 0.4rem;
}

.story-quote p {
	position: relative;
	font-size: 1.12rem;
	line-height: 1.75;
	color: var(--espresso);
	font-weight: 500;
}

.story-sign {
	text-align: center;
	margin-top: 2rem;
}

.story-sign-line {
	color: var(--cocoa);
}

.story-sign-name {
	font-size: 1.5rem;
	font-weight: 700;
	font-style: italic;
	color: var(--terracotta-deep);
	margin-top: 0.2rem;
}

.story-cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.8rem;
	margin-top: 2.2rem;
}

@media (max-width: 900px) {
	.story-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.story-hero-art {
		order: -1;
		width: min(300px, 80%);
	}
}

/* Curl-match guide (single-post-products-match.php) */
.match-head {
	text-align: center;
	max-width: 760px;
	margin-inline: auto;
}

.match-lead {
	color: var(--cocoa);
	margin-top: 0.6rem;
	line-height: 1.7;
}

.match-question {
	font-size: 1.35rem;
	margin-top: 1.6rem;
}

.match-picker {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.2rem;
	max-width: 720px;
	margin: 1.8rem auto 2.4rem;
}

.match-tab {
	display: grid;
	justify-items: center;
	gap: 0.55rem;
	padding: 0.6rem 0.4rem;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
	transition: transform 0.3s var(--ease);
}

.match-tab:hover,
.match-tab.is-active {
	transform: translateY(-4px);
}

.match-tab:focus-visible {
	outline: 3px solid var(--terracotta);
	outline-offset: 4px;
	border-radius: var(--radius);
}

.match-blob {
	position: relative;
	width: min(150px, 82%);
	aspect-ratio: 1;
	display: block;
}

.match-photo {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 58% 42% 55% 45% / 52% 58% 42% 48%;
	animation: mcw-blob-morph 10s ease-in-out infinite alternate;
	filter: grayscale(0.55);
	opacity: 0.75;
	transition: filter var(--speed), opacity var(--speed);
}

.match-tab:nth-child(2) .match-photo { animation-delay: -4s; }
.match-tab:nth-child(3) .match-photo { animation-delay: -7s; }

.match-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.match-tab .cat-ring {
	opacity: 0.45;
}

.match-tab:hover .match-photo,
.match-tab.is-active .match-photo {
	filter: none;
	opacity: 1;
}

.match-tab.is-active .cat-ring {
	border-color: var(--terracotta);
	opacity: 1;
}

.match-name {
	font-weight: 700;
	color: var(--cocoa);
	transition: color var(--speed);
}

.match-tab.is-active .match-name {
	color: var(--terracotta-deep);
}

.match-range {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--espresso);
	background: var(--sage-light);
	border-radius: 999px;
	padding: 0.18rem 0.6rem;
	transition: background var(--speed);
}

.match-tab.is-active .match-range {
	background: var(--terracotta);
}

.match-panel {
	display: grid;
	justify-items: center;
	gap: 1rem;
	max-width: 860px;
	margin-inline: auto;
	text-align: center;
	animation: mcw-fade-up 0.35s var(--ease);
}

.match-panel[hidden] {
	display: none;
}

.match-panel-title {
	font-size: 1.3rem;
}

.match-tip {
	color: var(--cocoa);
	max-width: 58ch;
	line-height: 1.7;
}

.match-products-img {
	width: 100%;
	max-width: 700px;
	height: auto;
	border-radius: var(--radius-lg);
	border: 1px solid var(--line);
	background: var(--white);
}

.match-cta {
	margin-top: 0.4rem;
}

@media (max-width: 640px) {
	.match-picker {
		gap: 0.7rem;
	}

	.match-name {
		font-size: 0.9rem;
	}
}

/* Curl Club signup landing (page-newsletter.php) */
.club-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.club-title {
	font-size: clamp(2.2rem, 5vw, 3.3rem);
	margin: 0.35rem 0 0.8rem;
}

.club-lead {
	color: var(--cocoa);
	font-size: 1.08rem;
	line-height: 1.65;
	max-width: 46ch;
}

.club-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.5rem;
	max-width: 540px;
}

.club-form .club-step[data-otp-step="contact"] {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	width: 100%;
}

.club-form input[type="email"],
.club-form input[name="contact"] {
	flex: 1;
	min-width: 230px;
	padding: 0.95rem 1.25rem;
	border: 1.5px solid var(--line-strong);
	border-radius: 999px;
	background: var(--white);
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--ink);
}

.club-form input[type="email"]:focus,
.club-form input[name="contact"]:focus {
	outline: none;
	border-color: var(--terracotta);
	box-shadow: 0 0 0 3px rgb(238 107 132 / 0.35);
}

.club-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.95rem 1.8rem;
	border: 0;
	border-radius: 999px;
	background: var(--sage-light);
	color: var(--espresso);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--speed), transform var(--speed) var(--ease), box-shadow var(--speed);
}

.club-cta:hover {
	background: var(--sage);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--shadow-soft);
}

.club-form .form-note {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.9rem;
	font-weight: 600;
}

.club-form .form-note.ok {
	color: var(--sage);
}

.club-form .form-note.err {
	color: var(--terracotta-deep);
}

.club-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	flex: 1 1 100%;
	color: var(--cocoa);
	font-size: 0.88rem;
	line-height: 1.5;
	cursor: pointer;
}

.club-consent input {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.15rem;
	accent-color: var(--terracotta);
}

.club-consent a {
	text-decoration: underline;
}

.club-trust {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 0.9rem;
	color: var(--cocoa);
	font-size: 0.88rem;
}

.club-trust .icon {
	color: var(--sage);
}

.club-hero-art {
	position: relative;
}

.club-hero-art img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	display: block;
}

.club-proof {
	position: absolute;
	bottom: 14px;
	inset-inline-start: 14px;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.5rem 0.95rem;
	border-radius: 999px;
	background: rgb(255 255 255 / 0.92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: var(--shadow-soft);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--espresso);
}

.club-benefits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: 1.2rem;
	margin: 0 0 clamp(2.5rem, 6vw, 3.5rem);
	padding: 0;
	list-style: none;
}

.club-benefit {
	display: grid;
	gap: 0.45rem;
	align-content: start;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 1.4rem 1.4rem 1.5rem;
	transition: transform var(--speed) var(--ease), box-shadow var(--speed), border-color var(--speed);
}

.club-benefit:hover {
	transform: translateY(-3px);
	border-color: var(--line-strong);
	box-shadow: var(--shadow-soft);
}

.club-benefit-icon {
	display: inline-grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--blush);
	color: var(--terracotta-deep);
	margin-bottom: 0.35rem;
}

.club-benefit h3 {
	font-size: 1.06rem;
}

.club-benefit h3 a {
	color: inherit;
}

.club-benefit h3 a:hover {
	color: var(--terracotta-deep);
}

.club-benefit p {
	color: var(--cocoa);
	font-size: 0.92rem;
	line-height: 1.55;
}

.club-whatsapp {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	background: var(--sage-light);
	border-radius: var(--radius-lg);
	padding: 1.6rem 1.9rem;
}

.club-whatsapp h3 {
	font-size: 1.15rem;
	margin-bottom: 0.25rem;
}

.club-whatsapp p {
	color: var(--cocoa);
	font-size: 0.95rem;
}

.club-wa-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.85rem 1.6rem;
	border-radius: 999px;
	background: #1FAE5F;
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	transition: background var(--speed), transform var(--speed) var(--ease), box-shadow var(--speed);
}

.club-wa-btn:hover {
	background: #17914E;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--shadow-soft);
}

@media (max-width: 900px) {
	.club-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.club-hero-art {
		order: -1;
	}
}

/* Content pages: prose, video grid, stockists table */
.mcw-prose {
	max-width: 780px;
	margin-inline: auto;
}

.mcw-prose p {
	margin: 0 0 1rem;
}

.mcw-prose h2 {
	font-size: 1.5rem;
	margin: 1.8rem 0 0.8rem;
}

.mcw-prose h2:first-child {
	margin-top: 0;
}

.mcw-prose img {
	border-radius: var(--radius-lg);
	margin: 1.2rem 0;
	max-width: 100%;
	height: auto;
}

.mcw-prose ul,
.mcw-prose ol {
	list-style: disc;
	padding-inline-start: 1.35rem;
	margin: 0 0 1rem;
}

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

.mcw-prose li {
	margin-bottom: 0.4rem;
}

.mcw-prose a {
	color: var(--terracotta-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mcw-videos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 1.5rem;
	margin-top: 1.8rem;
}

.mcw-video {
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--espresso);
	box-shadow: var(--shadow-soft);
}

.mcw-video iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.mcw-table {
	overflow-x: auto;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 0.5rem 1.1rem;
	margin: 1.5rem 0;
}

.mcw-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.93rem;
}

.mcw-table th,
.mcw-table td {
	padding: 0.7rem 0.6rem;
	border-bottom: 1px solid var(--line);
	text-align: start;
}

.mcw-table thead th {
	color: var(--espresso);
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.mcw-table tbody tr:last-child td {
	border-bottom: 0;
}

.mcw-newsletter-page {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	max-width: 560px;
	margin: 1.5rem auto 0;
}

.mcw-newsletter-page input[type="email"] {
	flex: 1;
	min-width: 220px;
	padding: 0.8rem 1.1rem;
	border: 1.5px solid var(--line-strong);
	border-radius: 999px;
	background: var(--white);
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: var(--ink);
}

.mcw-newsletter-page input[type="email"]:focus {
	outline: none;
	border-color: var(--terracotta);
	box-shadow: 0 0 0 3px rgb(238 107 132 / 0.35);
}

.mcw-newsletter-page .form-note {
	flex-basis: 100%;
	font-size: 0.88rem;
	margin: 0;
}

.mcw-newsletter-page .form-note.ok {
	color: var(--sage);
	font-weight: 600;
}

.mcw-newsletter-page .form-note.err {
	color: var(--terracotta-deep);
	font-weight: 600;
}

/* Custom logo (real brand artwork) */
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	flex: none;
}

.custom-logo {
	display: block;
	height: 54px;
	width: auto;
}

.site-header .custom-logo {
	height: 52px;
}

.site-footer .custom-logo {
	height: 68px;
}

.splash-logo {
	width: 152px;
	height: auto;
}

/* Language switcher (header) */
.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-inline-end: 0.35rem;
	padding: 0.35rem 0.7rem;
	border: 1.5px solid var(--line-strong);
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.lang-switch-item {
	color: var(--cocoa);
	transition: color var(--speed);
}

.lang-switch-item:hover {
	color: var(--terracotta-deep);
}

.lang-switch-item.is-active {
	color: var(--espresso);
}

.lang-switch-sep {
	color: var(--line-strong);
}

/* RTL (Hebrew) — targeted overrides for physical properties */
body.rtl .link-arrow .icon,
body.rtl .btn .icon,
body.rtl .newsletter-cta .icon {
	transform: scaleX(-1);
}

body.rtl .newsletter-cta:hover .icon {
	transform: scaleX(-1.18) scaleY(1.18);
}

body.rtl .link-arrow:hover .icon,
body.rtl .btn:hover .icon {
	transform: scaleX(-1) translateX(3px);
}

body.rtl .article-back .icon {
	transform: none;
}

body.rtl .article-back:hover .icon {
	transform: translateX(3px);
}

body.rtl #main .woocommerce-wrap table.shop_table th,
body.rtl #main .woocommerce-wrap table.shop_table td,
body.rtl #main .woocommerce-wrap table.variations th.label,
body.rtl #main .woocommerce-wrap table.variations td.value,
body.rtl #main .woocommerce-wrap table.woocommerce-product-attributes th,
body.rtl #main .woocommerce-wrap table.woocommerce-product-attributes td {
	text-align: right;
}

body.rtl #main .woocommerce-wrap .cart_totals table.shop_table td {
	text-align: left;
}

body.rtl #main .woocommerce-wrap .cart_totals table.shop_table th {
	padding-left: 0.6rem;
	padding-right: 0;
}

body.rtl #main .woocommerce-wrap .cart_totals .woocommerce-shipping-methods {
	text-align: left;
}

body.rtl #main .woocommerce-wrap table.variations td.value select,
body.rtl #main .woocommerce-wrap .woocommerce-ordering select {
	background-position: left 1rem center;
	padding: 0.72rem 1.1rem 0.72rem 2.6rem;
}

/* 15. Responsive
   ------------------------------------------------------------- */
@media (max-width: 1060px) {
	.hero-chip-rating {
		left: 0;
	}
}

@media (max-width: 900px) {
	#main .woocommerce-wrap div.product {
		grid-template-columns: minmax(0, 1fr);
	}

	#main .woocommerce-wrap table.variations tr {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.3rem;
	}

	#main .woocommerce-wrap .cart_totals {
		max-width: none;
	}

	#main .woocommerce-wrap .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.contact-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.75rem;
	}

	.nav-toggle {
		display: inline-grid;
	}

	/* The menu drops out of the row here, so its auto margin no longer
	   pushes the icons to the far side: push them ourselves. */
	.header-actions {
		margin-inline-start: auto;
	}

	.nav-list .mcw-nav-phone {
		display: list-item;
	}

	/* The heart moved into the menu ("My wishlist") to make room in the header. */
	.header-actions .wishlist-link {
		display: none;
	}

	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin: 0;
		background: var(--cream);
		border-bottom: 1px solid var(--line);
		box-shadow: 0 24px 40px -24px rgb(64 27 39 / 0.25);
		padding: 0.75rem clamp(1rem, 4vw, 1.5rem) 1.25rem;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease), visibility var(--speed);
	}

	.site-header.nav-open .site-nav {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.nav-list a {
		display: block;
		padding: 0.8rem 0.25rem;
		font-size: 1.05rem;
		border-bottom: 1px solid var(--line);
	}

	.nav-list li:last-child a {
		border-bottom: none;
	}

	.hero-grid {
		grid-template-columns: 1fr;
	}

	.hero-art {
		justify-self: center;
		max-width: 440px;
		margin-top: 1rem;
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.newsletter {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

@media (max-width: 640px) {
	#main .woocommerce-wrap .u-columns.col2-set,
	#main .woocommerce-wrap #customer_details.col2-set {
		grid-template-columns: minmax(0, 1fr);
	}

	.section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.9rem;
	}

	.product-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem 0.8rem;
	}

	.product-info {
		padding: 0.8rem 0.85rem 1rem;
	}

	/* Mobile: hide the image overlay; show a plain button under the price
	   so the product photo stays fully visible. */
	.product-media .quick-add {
		display: none;
	}

	.pcard-add {
		display: inline-flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		gap: 0.35rem;
		margin-top: 0.55rem;
		padding: 0.62rem 0.5rem;
		border-radius: 999px;
		background: var(--sage-light);
		color: var(--espresso);
		font-weight: 600;
		font-size: 0.82rem;
		transition: background var(--speed);
	}

	.pcard-add.loading {
		opacity: 0.7;
		pointer-events: none;
	}

	.pcard-add.added {
		background: var(--sage);
		color: #fff;
	}

	.wish {
		width: 36px;
		height: 36px;
	}

	.cat-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.social-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 0.6rem;
	}

	.reviews-grid > li {
		flex-basis: min(86vw, 320px);
	}

	/* Keep the three link columns side by side on mobile (brand spans the
	   full width above them) so the footer stays compact, not one long stack. */
	.footer-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.6rem 0.75rem;
	}

	.footer-brand {
		grid-column: 1 / -1;
	}

	.footer-col h3 {
		font-size: 0.82rem;
	}

	.footer-col a {
		font-size: 0.8rem;
	}

	.hero-sticker {
		width: 78px;
		height: 78px;
		top: 0;
	}

	.hero-sticker strong {
		font-size: 1.3rem;
	}

	.hero-chip {
		padding: 0.5rem 0.7rem;
	}

	.hero-chip img {
		width: 36px;
		height: 36px;
	}

	.marquee-strip {
		transform: rotate(-1.8deg);
	}

	.newsletter-cta-wrap {
	display: grid;
	align-content: center;
	justify-items: stretch;
}

.newsletter-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 1.1rem 2rem;
	border-radius: 999px;
	background: linear-gradient(90deg, #dcb961, #f4e0a3 30%, #e0bf6c 55%, #f8e9bb 80%, #dcb961);
	color: var(--espresso);
	font-size: 1.08rem;
	font-weight: 700;
	box-shadow: 0 14px 30px -12px rgb(0 0 0 / 0.4);
	transition: background var(--speed), color var(--speed), transform var(--speed) var(--ease), box-shadow var(--speed);
}

/* gentle attention pulse — this is the site's main conversion CTA */
.newsletter-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	animation: mcw-cta-pulse 2.8s ease-out infinite;
	pointer-events: none;
}

@keyframes mcw-cta-pulse {
	0% { box-shadow: 0 0 0 0 rgb(220 185 97 / 0.55); }
	70% { box-shadow: 0 0 0 14px rgb(220 185 97 / 0); }
	100% { box-shadow: 0 0 0 0 rgb(220 185 97 / 0); }
}

.newsletter-cta .icon {
	transition: transform var(--speed) var(--ease);
}

.newsletter-cta:hover,
.newsletter-cta:focus-visible {
	background: #000;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 18px 38px -12px rgb(0 0 0 / 0.5);
}

.newsletter-cta:hover .icon {
	transform: scale(1.18);
}

@media (prefers-reduced-motion: reduce) {
	.newsletter-cta::before {
		animation: none;
	}
}

.footer-bottom {
		justify-content: center;
		text-align: center;
	}
}

/* 16. Reduced motion
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	html {
		scroll-behavior: auto;
	}

	.marquee-track {
		animation: none;
	}

	.mcw-curls .curl {
		animation: none;
	}

	.cat-img,
	.cat-ring,
	.review-blob,
	.review-initial,
	.review-initial-ring {
		animation: none;
	}

	.marquee-list[aria-hidden="true"] {
		display: none;
	}

	html.js .reveal {
		opacity: 1;
		transform: none;
	}

	.hero-chip-rating {
		animation: none;
	}
}

/* =========================================================
   v1.1 — design port from the standalone page:
   video hero, packshot arch + 3D tilt, orbit badge, reels
   slider, photo avatars, signature reveal, alt marquee.
   ========================================================= */

/* --- Hero: welcome video background (hero only) --- */
.hero { position: relative; overflow: hidden; }

.hero picture {
	display: contents;
}

.hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	opacity: 0.7;
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 1;
}

.hero-wash {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
}

.hero-wash-side {
	background: linear-gradient(90deg, var(--cream) 0%, rgb(253 247 248 / 0.7) 48%, rgb(253 247 248 / 0.25) 100%);
}

.hero-wash-bottom {
	top: auto;
	height: 7rem;
	background: linear-gradient(180deg, rgb(253 247 248 / 0) 0%, var(--cream) 100%);
}

.hero .hero-blob { z-index: 0; }
.hero .hero-grid { position: relative; z-index: 3; }

/* --- Hero: product packshot in the arch + 3D tilt --- */
[data-tilt] { perspective: 1100px; }

.hero-tilt {
	position: relative;
	transform-style: preserve-3d;
	will-change: transform;
}

.hero-arch-photo {
	position: relative;
	aspect-ratio: 480 / 560;
	border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
	background: var(--white);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-soft);
	overflow: hidden;
}

.hero-arch-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.arch-tint {
	position: absolute;
	inset: 0;
	background: var(--sand);
	opacity: 0.45;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.arch-spark { position: absolute; color: var(--honey); }
.arch-spark-1 { left: 12%; top: 22%; }
.arch-spark-2 { right: 10%; bottom: 18%; color: var(--terracotta); opacity: 0.7; }

.hero-chip-rating { transform: translateZ(46px); }

.hero-chip img { object-fit: cover; }

/* --- Hero: rotating orbit badge --- */
.hero-orbit {
	position: absolute;
	top: 1.5rem;
	right: -0.75rem;
	width: 112px;
	height: 112px;
	transform: translateZ(60px);
}

.hero-orbit-ring {
	position: absolute;
	inset: 0;
	animation: mcw-spin 22s linear infinite;
}

.hero-orbit-ring text {
	fill: var(--espresso);
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
}

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

@media (max-width: 640px) {
	.hero-orbit { display: none; }
}

/* --- Product cards: mixed photo/illustration media --- */
.product-thumb img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: auto;
	display: block;
}

/* --- Alt (community) marquee — opposite angle --- */
.marquee-alt .marquee-strip { transform: rotate(1.3deg); }

@media (max-width: 782px) {
	.marquee-alt .marquee-strip { transform: rotate(1.8deg); }
}

/* --- Community reels slider --- */
.reels-nav {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.reel-btn {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--line-strong);
	background: transparent;
	color: var(--espresso);
	cursor: pointer;
	transition: background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease), opacity var(--speed) var(--ease);
}

.reel-btn:hover:not(:disabled) {
	background: var(--terracotta);
	border-color: var(--terracotta);
	color: var(--espresso);
}

.reel-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Reviews section sits on a dark background — give its arrows a white fill. */
.section-reviews .reel-btn {
	background: var(--white);
	border-color: var(--white);
	color: var(--espresso);
}

.rot-90 { transform: rotate(90deg); }
.rot-270 { transform: rotate(-90deg); }

/* RTL: sliders advance leftward — mirror the arrow pair */
body.rtl .reel-btn .rot-90 { transform: rotate(-90deg); }
body.rtl .reel-btn .rot-270 { transform: rotate(90deg); }

.reels-wrap { position: relative; }

.reels-track {
	list-style: none;
	margin: 0;
	padding: 10px 0;
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.reels-track::-webkit-scrollbar { display: none; }

.reels-track > li {
	flex: 0 0 auto;
	width: min(66vw, 240px);
	scroll-snap-align: start;
	line-height: 0;
}

.reel-card {
	position: relative;
	display: block;
	aspect-ratio: 480 / 702;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--sand);
	box-shadow: none;
	transition: box-shadow var(--speed) var(--ease);
}

.reel-card:hover { box-shadow: var(--shadow-lift); }

.reel-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease);
}

.reel-card:hover img { transform: scale(1.03); }

.reel-top {
	position: absolute;
	inset: 0 0 auto;
	height: 4rem;
	background: linear-gradient(180deg, rgb(36 26 20 / 0.3), transparent);
}

.reel-views {
	position: absolute;
	left: 0.75rem;
	top: 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: rgb(36 26 20 / 0.45);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 600;
	padding: 0.25rem 0.6rem 0.25rem 0.5rem;
	border-radius: 999px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.reel-ig {
	position: absolute;
	right: 0.75rem;
	top: 0.75rem;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.9);
	color: var(--espresso);
}

.reel-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	opacity: 0;
	transition: opacity 0.3s var(--ease);
}

.reel-play > span {
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.9);
	color: var(--espresso);
	box-shadow: var(--shadow-lift);
	transition: transform 0.3s var(--ease);
}

.reel-card:hover .reel-play,
.reel-card:focus-visible .reel-play { opacity: 1; }

.reel-card:hover .reel-play > span { transform: scale(1.05); }

.social-tagline {
	margin-top: 1.75rem;
	text-align: center;
	font-size: 0.9rem;
	color: var(--cocoa);
}

/* --- Reviews: shared demo avatar photo --- */
.avatar-photo {
	object-fit: cover;
	object-position: 50% 28%;
	background: none;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(217 154 43 / 0.55);
}

/* --- Footer: signature writes itself beside the newsletter --- */
.newsletter {
	grid-template-columns: 300px 1fr 1fr;
}

.newsletter-sig {
	position: relative;
	width: 100%;
	max-width: 300px;
	aspect-ratio: 284 / 126;
	overflow: hidden;
}

.sig-mask {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, #211A1C 0%, #3D3034 50%, #211A1C 100%);
	-webkit-mask-image: url('../img/signature.png');
	mask-image: url('../img/signature.png');
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.sig-cover {
	position: absolute;
	inset: 0 auto 0 0;
	width: 130%;
	background: linear-gradient(90deg, rgb(255 255 255 / 0) 0, #FFFFFF 56px);
	transform: translateX(-4%);
}

.newsletter.in .sig-cover {
	transform: translateX(108%);
	transition: transform 2.4s cubic-bezier(0.6, 0.05, 0.4, 0.95) 0.2s;
}

.sig-pen {
	position: absolute;
	inset: 0;
	opacity: 0;
	color: var(--honey);
}

.newsletter.in .sig-pen { animation: mcw-pen-x 2.4s 0.2s both; }

.sig-pen-tip {
	position: absolute;
	left: 0;
	top: 50%;
}

.newsletter.in .sig-pen-tip { animation: mcw-pen-y 2.4s ease-in-out 0.2s both; }

@keyframes mcw-pen-x {
	0% { transform: translateX(0); opacity: 0; }
	8% { opacity: 1; }
	90% { opacity: 1; }
	100% { transform: translateX(94%); opacity: 0; }
}

@keyframes mcw-pen-y {
	0% { transform: translateY(-6px); }
	18% { transform: translateY(-22px); }
	36% { transform: translateY(4px); }
	54% { transform: translateY(-18px); }
	72% { transform: translateY(8px); }
	88% { transform: translateY(-12px); }
	100% { transform: translateY(-2px); }
}

@media (max-width: 1100px) {
	.newsletter { grid-template-columns: 1fr; }

	.newsletter-sig {
		max-width: 230px;
		margin: 0 auto;
	}
}

/* --- Reduced motion: everything lands in its final state --- */
@media (prefers-reduced-motion: reduce) {
	.hero-orbit-ring { animation: none; }
	.sig-cover { transform: translateX(108%) !important; transition: none !important; }
	.sig-pen { animation: none !important; opacity: 0 !important; }
	.reel-card img,
	.reel-play,
	.reel-play > span { transition: none; }
}

/* --- Port fixes: sparkle sizing (old `.hero-arch svg` rule caught them),
       chip positions matching the approved layout --- */
.hero-arch-photo .arch-spark {
	width: 20px;
	height: 20px;
	filter: none;
}

.hero-arch-photo .arch-spark-2 {
	width: 14px;
	height: 14px;
}

.hero-tilt .hero-tilt .hero-chip-rating {
	top: auto;
	left: auto;
	right: -0.5rem;
	bottom: 0.9rem;
}

/* 18. Curl-match quiz (front page)
   ------------------------------------------------------------- */
.section-quiz {
	background: var(--cream);
}

.quiz-head {
	justify-content: center;
	text-align: center;
}

.quiz-sub {
	color: var(--cocoa);
	max-width: 46ch;
	margin: 0.6rem auto 0;
	line-height: 1.65;
}

.quiz-card {
	position: relative;
	max-width: 880px;
	margin-inline: auto;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl, 28px);
	padding: clamp(1.4rem, 4vw, 2.4rem);
	box-shadow: var(--shadow-soft);
	overflow: hidden;
}

.quiz-blob {
	position: absolute;
	inset-inline-end: -70px;
	top: -70px;
	width: 190px;
	height: 190px;
	background: var(--blush);
	border-radius: 58% 42% 55% 45% / 45% 52% 48% 55%;
	animation: mcw-blob-morph 9s ease-in-out infinite alternate;
	pointer-events: none;
}

.quiz-top {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.4rem;
	min-height: 34px;
}

.quiz-back[hidden],
.quiz-prod[hidden] {
	display: none;
}

.quiz-back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border: 1px solid var(--line-strong);
	background: var(--white);
	color: var(--espresso);
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color var(--speed), background var(--speed), color var(--speed);
}

.quiz-back:hover {
	background: var(--terracotta-deep);
	border-color: var(--terracotta-deep);
	color: #fff;
}

.quiz-back-icon {
	transform: scaleX(-1);
}

body:not(.rtl) .quiz-back-icon {
	transform: none;
	rotate: 180deg;
}

.quiz-count {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--cocoa);
	margin-inline-start: auto;
}

.quiz-count b {
	color: var(--espresso);
}

.quiz-track {
	flex: 0 0 120px;
	height: 7px;
	border-radius: 999px;
	background: var(--sand);
	overflow: hidden;
}

.quiz-track-fill {
	display: block;
	height: 100%;
	width: 33.4%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--sage-light), #F4EC76);
	transition: width 0.45s var(--ease);
}

.quiz-q {
	font-size: clamp(1.15rem, 2.6vw, 1.45rem);
	font-weight: 650;
	margin-bottom: 1.2rem;
	text-align: center;
	position: relative;
}

.quiz-step {
	display: none;
}

.quiz-step.is-active {
	display: block;
	animation: mcw-fade-up 0.4s var(--ease) both;
}

.quiz-opts-type {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

.quiz-opt {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 0.5rem;
	padding: 1.1rem 0.9rem 1.2rem;
	background: var(--cream);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-lg);
	cursor: pointer;
	text-align: center;
	transition: transform var(--speed) var(--ease), border-color var(--speed), box-shadow var(--speed), background var(--speed);
}

.quiz-opt:hover,
.quiz-opt:focus-visible {
	transform: translateY(-4px);
	border-color: var(--terracotta);
	background: var(--white);
	box-shadow: var(--shadow-lift);
}

.quiz-opt-photo {
	width: min(120px, 60%);
	aspect-ratio: 1;
	border-radius: 56% 44% 52% 48% / 47% 55% 45% 53%;
	overflow: hidden;
	border: 3px solid var(--white);
	box-shadow: 0 8px 18px -8px rgb(64 27 39 / 0.35);
	transition: border-radius 0.5s var(--ease);
}

.quiz-opt:hover .quiz-opt-photo {
	border-radius: 48% 52% 45% 55% / 55% 46% 54% 45%;
}

.quiz-opt-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.quiz-opt-name {
	font-weight: 650;
	color: var(--espresso);
	line-height: 1.35;
}

.quiz-opt-range {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--espresso);
	background: var(--sage-light);
	border-radius: 999px;
	padding: 0.22rem 0.7rem;
}

.quiz-opts-wide {
	display: grid;
	gap: 0.9rem;
	max-width: 560px;
	margin-inline: auto;
}

.quiz-opt-wide {
	grid-template-columns: auto 1fr;
	display: grid;
	align-items: center;
	justify-items: start;
	text-align: start;
	gap: 0.95rem;
	padding: 1rem 1.15rem;
}

.quiz-opt-ico {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--blush);
	color: var(--terracotta-deep);
	align-items: center;
	justify-content: center;
	flex: none;
}

.quiz-opt-wide:nth-child(2) .quiz-opt-ico {
	background: var(--sage-light);
	color: var(--sage);
}

.quiz-opt-text {
	display: grid;
	gap: 0.15rem;
}

.quiz-opt-hint {
	font-size: 0.8rem;
	color: var(--cocoa);
}

.quiz-result {
	position: relative;
	animation: mcw-fade-up 0.45s var(--ease) both;
	text-align: center;
}

.quiz-spark {
	position: absolute;
	color: var(--honey);
	animation: mcw-blob-bob 4s ease-in-out infinite alternate;
}

.quiz-spark-1 { inset-inline-start: 6%; top: 0; }
.quiz-spark-2 { inset-inline-end: 8%; top: 34px; animation-delay: -2s; }

.quiz-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.45rem;
	margin-bottom: 0.9rem;
}

.quiz-chip {
	font-size: 0.8rem;
	font-weight: 650;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	background: var(--sage-light);
	color: var(--espresso);
}

.quiz-chip:nth-child(2) { background: #F4EC76; }
.quiz-chip:nth-child(3) { background: var(--rose); }

.quiz-tip {
	max-width: 56ch;
	margin: 0 auto 1.5rem;
	color: var(--ink);
	line-height: 1.7;
	background: var(--sand);
	border-radius: var(--radius);
	padding: 0.85rem 1.1rem;
}

.quiz-kit {
	margin-bottom: 1.6rem;
	text-align: start;
}

.quiz-kit-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
	margin-bottom: 0.7rem;
}

.quiz-sub-label {
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--cocoa);
	margin: 0;
}

.quiz-prods {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding: 0.3rem 0.2rem 0.9rem;
	scrollbar-width: none;
	counter-reset: quizkit;
}

.quiz-prods::-webkit-scrollbar {
	display: none;
}

.quiz-prod {
	position: relative;
	counter-increment: quizkit;
	flex: 0 0 176px;
	scroll-snap-align: start;
	display: grid;
	gap: 0.45rem;
	padding: 0.85rem 0.8rem 1rem;
	background: var(--white);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-lg);
	transition: transform var(--speed) var(--ease), border-color var(--speed), box-shadow var(--speed);
}

/* routine-order number blob, mirrors the story timeline language */
.quiz-prod::before {
	content: counter(quizkit);
	position: absolute;
	top: 9px;
	inset-inline-start: 9px;
	z-index: 1;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	background: var(--sage-light);
	color: var(--espresso);
	font-weight: 750;
	font-size: 0.78rem;
	border-radius: 46% 54% 52% 48% / 54% 46% 54% 46%;
}

.quiz-prod:hover {
	transform: translateY(-4px);
	border-color: var(--terracotta);
	box-shadow: var(--shadow-lift);
}

.quiz-prod-media {
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	background: var(--cream);
	border-radius: calc(var(--radius-lg) - 8px);
	padding: 9%;
	overflow: hidden;
}

.quiz-prod-media img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 0.4s var(--ease);
}

.quiz-prod:hover .quiz-prod-media img {
	transform: scale(1.08) rotate(-2deg);
}

.quiz-prod-name {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--espresso);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
}

.quiz-prod-price {
	font-size: 0.88rem;
	color: var(--espresso);
	font-variant-numeric: tabular-nums;
}

.quiz-prod-price del {
	color: var(--cocoa);
	font-weight: 400;
	margin-inline-end: 0.3rem;
}

.quiz-prod-price ins {
	text-decoration: none;
	color: var(--terracotta-deep);
}

.quiz-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.2rem;
}

@media (max-width: 782px) {
	.quiz-opts-type {
		grid-template-columns: 1fr;
	}

	.quiz-opt {
		grid-template-columns: auto 1fr auto;
		justify-items: start;
		text-align: start;
		align-items: center;
		gap: 0.9rem;
		padding: 0.85rem 1rem;
	}

	.quiz-opt-photo {
		width: 64px;
	}

	.quiz-track {
		flex-basis: 70px;
	}

	.quiz-prods {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.quiz-blob,
	.quiz-spark {
		animation: none;
	}

	.quiz-step.is-active,
	.quiz-result {
		animation: none;
	}
}

/* 19. Curl academy page
   ------------------------------------------------------------- */
.academy-hero {
	text-align: center;
	padding-bottom: 0;
}

.academy-hero h1 {
	font-size: clamp(2.1rem, 5vw, 3.2rem);
	margin: 0.4rem 0 0.8rem;
}

.academy-lead {
	color: var(--cocoa);
	max-width: 52ch;
	margin-inline: auto;
	line-height: 1.7;
}

/* 20. Category product rows (front page swipers)
   ------------------------------------------------------------- */
.prod-row + .prod-row {
	margin-top: 3rem;
}

.prod-row-track {
	display: flex;
	gap: 1.4rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	padding: 0.3rem 0.2rem 1.3rem;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.prod-row-track::-webkit-scrollbar {
	display: none;
}

.prod-row-track > li {
	flex: 0 0 min(255px, 78vw);
	scroll-snap-align: start;
	display: flex;
}

.prod-row-track .product-card {
	width: 100%;
}

/* Mobile category switcher: hidden on desktop (rows stay swipers there). */
.prod-cat-switch {
	display: none;
}

@media (max-width: 640px) {
	/* Mobile shows every product in one continuous grid, so the category
	   switcher is hidden (desktop keeps the per-category swipers). */
	.prod-cat-switch {
		display: none;
	}

	.prod-cat-switch::-webkit-scrollbar {
		display: none;
	}

	.prod-cat-tab {
		flex: 0 0 auto;
		scroll-snap-align: start;
		border: 1.5px solid var(--line-strong);
		background: var(--white);
		color: var(--espresso);
		padding: 0.55rem 1.15rem;
		border-radius: 999px;
		font-family: var(--font-body);
		font-weight: 700;
		font-size: 0.92rem;
		white-space: nowrap;
		cursor: pointer;
		transition: background var(--speed), color var(--speed), border-color var(--speed);
	}

	.prod-cat-tab.is-active {
		background: var(--sage-light);
		border-color: var(--sage-light);
		color: var(--espresso);
	}

	/* Each category is a compact horizontal carousel of up to 4 products —
	   swipe to browse, instead of one long grid. */
	.section-prod-rows .prod-row {
		display: block;
	}

	.section-prod-rows .prod-row + .prod-row {
		margin-top: 1.6rem;
	}

	/* Show the category heading + "view all" again; hide the desktop reel
	   arrows (touch devices swipe the row instead). */
	.section-prod-rows .section-head {
		display: flex;
		margin-bottom: 0.7rem;
	}

	.section-prod-rows .section-head h2 {
		font-size: 1.3rem;
	}

	.section-prod-rows .reel-btn {
		display: none;
	}

	/* Keep the horizontal swiper (base .prod-row-track): narrower cards with a
	   peek of the next, scrolling through every product in the category. */
	.section-prod-rows .prod-row-track > li {
		flex: 0 0 min(220px, 60vw);
	}

	/* Grid cards show immediately — never leave a just-switched category
	   stuck at opacity 0 from the scroll-reveal. */
	.section-prod-rows .prod-row .reveal {
		opacity: 1;
		transform: none;
	}
}

/* Brand promise strip (vegan / cruelty-free / free-from / climate). */
.section-promise {
	padding-top: clamp(2rem, 5vw, 3.5rem);
	padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

/* Small line above the promise title: "Inspired by Nature. Backed by Science." */
.promise-kicker {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: 0 0 0.9rem;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--cocoa);
}

.promise-kicker::before,
.promise-kicker::after {
	content: "";
	width: clamp(1.5rem, 6vw, 3.5rem);
	height: 1px;
	background: currentColor;
	opacity: 0.5;
}

@media (max-width: 420px) {
	.promise-kicker {
		font-size: 0.66rem;
		letter-spacing: 0.14em;
		gap: 0.6rem;
	}
}
.promise-title {
	text-align: center;
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 4vw, 2.1rem);
	line-height: 1.15;
	margin-bottom: clamp(1.6rem, 4vw, 2.4rem);
}

.promise-lead {
	max-width: 46rem;
	margin: calc(-1 * clamp(0.6rem, 2vw, 1.1rem)) auto clamp(1.8rem, 4vw, 2.6rem);
	text-align: center;
	font-size: clamp(1rem, 1.6vw, 1.15rem);
	line-height: 1.7;
	color: var(--cocoa);
	text-wrap: balance;
}
.promise-grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1.25rem 0.25rem;
	max-width: 700px;
}

.promise-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.7rem;
}

.promise-ic {
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	transition: transform var(--speed) var(--ease);
}

.promise-ic img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.promise-item:hover .promise-ic {
	transform: translateY(-4px);
}

.promise-label {
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--espresso);
}

@media (max-width: 860px) {
	.promise-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.8rem 0.6rem;
	}
}

@media (max-width: 420px) {
	.promise-ic {
		width: 70px;
		height: 70px;
	}

	.promise-label {
		font-size: 0.82rem;
	}
}

/* Quiz result: the full production routine text */
.quiz-routine-box {
	text-align: start;
	background: var(--sand);
	border-radius: var(--radius-lg);
	padding: 1.3rem 1.5rem;
	margin-bottom: 1.6rem;
}

.quiz-routine-box[hidden],
.quiz-routine[hidden] {
	display: none;
}

.quiz-routine-title {
	font-size: 1.02rem;
	font-weight: 750;
	margin-bottom: 0.75rem;
	color: var(--espresso);
}

.quiz-routine[dir="rtl"] {
	text-align: right;
}

.quiz-steps-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.15rem;
}

.quiz-step-pill {
	justify-self: start;
	background: #F4EC76;
	color: var(--espresso);
	font-weight: 750;
	font-size: 0.85rem;
	padding: 0.35rem 0.95rem;
	border-radius: 999px;
}

.quiz-step-item {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.9rem;
	align-items: start;
}

/* dashed thread connecting the steps, story-timeline style */
.quiz-step-item::before {
	content: "";
	position: absolute;
	top: 44px;
	bottom: -1.15rem;
	inset-inline-start: 19px;
	border-inline-start: 2px dashed var(--line-strong);
}

.quiz-step-item:last-child::before {
	display: none;
}

.quiz-step-num {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	background: var(--sage-light);
	color: var(--espresso);
	font-weight: 750;
	font-size: 0.9rem;
	border-radius: 46% 54% 52% 48% / 54% 46% 54% 46%;
	animation: mcw-blob-morph 9s ease-in-out infinite alternate;
}

.quiz-step-item:nth-of-type(2n) .quiz-step-num {
	background: var(--rose);
	animation-delay: -4s;
}

.quiz-step-item:nth-of-type(3n) .quiz-step-num {
	background: #F7F1AF;
	animation-delay: -7s;
}

.quiz-step-text {
	line-height: 1.75;
	color: var(--ink);
	font-size: 0.95rem;
	padding-top: 0.4rem;
}

.quiz-step-text p {
	margin: 0;
}

.quiz-step-text ul {
	margin-top: 0.5rem;
	padding-inline-start: 1.2rem;
	list-style: disc;
}

.quiz-step-text a {
	color: var(--terracotta-deep);
	font-weight: 650;
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.quiz-step-num {
		animation: none;
	}
}

/* Curl Club OTP step */
.club-step[hidden] {
	display: none;
}

/* minmax(0, 1fr): one card-wide column. With an auto column, iOS Safari sized
   it from the six code inputs' natural width and pushed everything off screen. */
.club-step-code {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.7rem;
	justify-items: start;
}

.club-otp-hint {
	font-size: 0.92rem;
	color: var(--cocoa);
}

.club-otp-input {
	width: 11ch;
	text-align: center;
	letter-spacing: 0.5ch;
	font-size: 1.35rem;
	font-weight: 700;
	padding: 0.55rem 0.6rem;
	border: 1.5px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--espresso);
}

.club-otp-input:focus {
	outline: none;
	border-color: var(--honey);
	box-shadow: 0 0 0 3px rgb(244 236 118 / 0.55);
}

.club-otp-tools {
	display: flex;
	gap: 1.1rem;
	flex-wrap: wrap;
}

.club-otp-link {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--terracotta-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.club-otp-link:disabled {
	color: var(--cocoa);
	text-decoration: none;
	cursor: default;
}

/* 21. Product extras: claim badges + production content sections
   ------------------------------------------------------------- */
.mcw-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin-top: 1.5rem;
	padding: 0;
	list-style: none;
}

.mcw-badges img {
	width: 68px;
	height: 68px;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform var(--speed) var(--ease);
}

.mcw-badges li:hover img {
	transform: translateY(-3px) rotate(-4deg);
}

.mcw-tab-sec {
	text-align: right;
	line-height: 1.8;
	color: var(--ink);
}

.mcw-tab-sec ul,
.mcw-tab-sec ol {
	padding-inline-start: 1.3rem;
	margin: 0.5rem 0;
	list-style: disc;
}

.mcw-tab-sec p {
	margin-bottom: 0.7rem;
}

/* Demonstration video: responsive 16:9 embed inside its tab. */
.mcw-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: #000;
}

.mcw-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Usage-step illustrations appended to the "how to use" tab. */
.mcw-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1rem;
	margin: 1.1rem 0 0.3rem;
}

.mcw-steps img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 14px;
}

/* "How to use" as a numbered step list: number badge + text + illustration. */
.mcw-tab-sec ol.mcw-usage {
	list-style: none;
	padding: 0;
	margin: 1rem 0 0.3rem;
	display: grid;
	gap: 0.9rem;
}

.mcw-usage-step {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.9rem 1rem;
	padding: 0.9rem 1.05rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--cream);
}

.mcw-usage-num {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--terracotta);
	color: var(--espresso);
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1;
}

.mcw-usage-text p {
	margin: 0;
	line-height: 1.65;
}

.mcw-usage-media img {
	display: block;
	width: 150px;
	max-width: 32vw;
	height: auto;
	border-radius: 14px;
}

@media (max-width: 640px) {
	.mcw-usage-step {
		grid-template-columns: auto 1fr;
	}

	.mcw-usage-media {
		grid-column: 1 / -1;
	}

	.mcw-usage-media img {
		width: 100%;
		max-width: none;
	}
}

/* Ingredients (רכיבים): scannable chips instead of a comma wall. The
   #main .woocommerce-wrap prefix outranks WooCommerce's tab-panel list
   styling (which has an ID) so the disc bullets are removed. */
#main .woocommerce-wrap .mcw-tab-sec ul.mcw-inci {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	direction: ltr;
	gap: 0.5rem;
	padding: 0;
	margin: 0.3rem 0 1.1rem;
}

#main .woocommerce-wrap .mcw-tab-sec ul.mcw-inci li {
	list-style: none;
	background: var(--sand);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	font-size: 0.88rem;
	line-height: 1.3;
	color: var(--espresso);
	cursor: default;
	transition: transform 0.22s var(--ease), background 0.22s, border-color 0.22s, box-shadow 0.22s;
}

#main .woocommerce-wrap .mcw-tab-sec ul.mcw-inci li:hover {
	transform: translateY(-3px);
	background: var(--sage-light);
	border-color: var(--sage-light);
	box-shadow: 0 7px 16px -7px rgb(27 123 81 / 0.45);
}

/* Ingredients shown as left-to-right pill chips (tags); the INCI names are
   English, so the row flows LTR via the container's direction. */

.mcw-inci-note {
	font-size: 0.86rem;
	color: var(--cocoa);
	margin: 0.35rem 0 0;
}

.mcw-inci-note.is-foot {
	font-style: italic;
	opacity: 0.9;
}

.mcw-review-login {
	background: var(--sage-light);
	color: var(--espresso);
	border-radius: var(--radius);
	padding: 0.85rem 1.1rem;
	font-weight: 600;
}

.mcw-review-login a {
	color: var(--terracotta-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* 22. My Account: single auth card with switcher + OTP
   ------------------------------------------------------------- */
.mcw-auth {
	max-width: 460px;
	margin-inline: auto;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl, 28px);
	padding: clamp(1.4rem, 4vw, 2.1rem);
	box-shadow: var(--shadow-soft);
}

.mcw-auth-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--sand);
	border-radius: 999px;
	padding: 5px;
	gap: 4px;
	margin-bottom: 1.5rem;
}

.mcw-auth-tab {
	border: 0;
	background: transparent;
	padding: 0.65rem 1rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--cocoa);
	cursor: pointer;
	transition: background var(--speed), color var(--speed), box-shadow var(--speed);
}

.mcw-auth-tab.is-active {
	background: var(--white);
	color: var(--espresso);
	box-shadow: 0 4px 12px -6px rgb(64 27 39 / 0.35);
}

.mcw-auth-panel[hidden] {
	display: none;
}

.mcw-auth-panel .form-row {
	margin-bottom: 1rem;
}

.mcw-auth-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
	flex-wrap: wrap;
}

.mcw-auth-lost {
	font-size: 0.85rem;
	color: var(--terracotta-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mcw-auth .woocommerce-form-login__submit,
.mcw-auth .woocommerce-form-register__submit {
	width: 100%;
}

.mcw-auth-or {
	position: relative;
	text-align: center;
	margin: 1.7rem 0 1rem;
}

.mcw-auth-or::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 50%;
	border-top: 1px solid var(--line-strong);
}

.mcw-auth-or span {
	position: relative;
	background: var(--white);
	padding-inline: 0.85rem;
	color: var(--cocoa);
	font-weight: 700;
	font-size: 0.85rem;
}

.mcw-auth-otp-title {
	font-size: 0.92rem;
	color: var(--cocoa);
	margin-bottom: 0.8rem;
}

.mcw-auth-otp-row {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	align-items: stretch;
}

.mcw-auth-otp-row input {
	width: 100%;
	min-width: 0;
}

.mcw-auth .mcw-auth-otp input.input-text,
.mcw-auth .mcw-auth-otp .club-otp-input {
	border: 1.5px solid var(--line-strong);
	border-radius: 999px;
	background: var(--white);
	padding: 0.7rem 1.15rem;
	font: inherit;
	color: var(--espresso);
}

.mcw-auth .mcw-auth-otp input.input-text:focus,
.mcw-auth .mcw-auth-otp .club-otp-input:focus {
	outline: none;
	border-color: var(--terracotta);
	box-shadow: 0 0 0 3px rgb(238 107 132 / 0.25);
}

.mcw-auth .mcw-auth-otp .club-otp-input {
	border-radius: var(--radius);
	width: 11ch;
}

.mcw-auth-otp-send,
.mcw-auth-otp .mcw-auth-otp-verify {
	width: 100%;
	flex: none;
}

/* 6-box one-time-code input. direction:ltr so the code reads left-to-right
   even on the RTL page; boxes shrink to fit on narrow screens. */
.club-otp-boxes {
	display: flex;
	direction: ltr;
	gap: 0.45rem;
	justify-content: center;
	width: 100%;
	margin: 0.2rem 0 1rem;
}

.mcw-auth .mcw-auth-otp .club-otp-box {
	flex: 0 1 2.7rem;
	min-width: 0;
	height: 3.4rem;
	padding: 0;
	text-align: center;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--espresso);
	background: var(--white);
	border: 1.5px solid var(--line-strong);
	border-radius: var(--radius);
	-moz-appearance: textfield;
}

.mcw-auth .mcw-auth-otp .club-otp-box:focus {
	outline: none;
	border-color: var(--terracotta);
	box-shadow: 0 0 0 3px rgb(238 107 132 / 0.25);
}

.mcw-auth .mcw-auth-otp .club-otp-box.is-filled {
	border-color: var(--terracotta);
}

.mcw-auth .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	float: none;
}

.mcw-auth-otp .club-step-code {
	margin-top: 0.4rem;
}

/* Passwordless (OTP-only) My Account — the code is the primary method now,
   not a secondary "or" alternative, so the heading carries more weight. */
.mcw-auth-otponly .mcw-auth-otp-title {
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--espresso);
	margin-bottom: 0.3rem;
}

.mcw-auth-otp-sub {
	font-size: 0.9rem;
	color: var(--cocoa);
	margin-bottom: 1.1rem;
}

/* Everything in the passwordless card is centre-aligned. */
.mcw-auth-otponly {
	text-align: center;
}

.mcw-auth-otponly .mcw-auth-otp-row input {
	text-align: center;
}

.mcw-auth-otponly .club-otp-tools {
	justify-content: center;
}

/* .club-step-code is a grid with justify-items:start, which pins the hint,
   boxes and tools to the RTL start. Centre every item in the OTP-only card. */
.mcw-auth-otponly .club-step-code {
	justify-items: center;
}

/* Club join form (My Account — new members completing their profile). */
.mcw-club-join {
	text-align: center;
}

.mcw-join-fields {
	display: grid;
	/* minmax(0, 1fr) lets the columns shrink to the card width; a plain 1fr
	   keeps the inputs' intrinsic min-width, which overflows the card and
	   drags the fields off-centre. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0.7rem;
	margin: 1.2rem 0;
	text-align: start;
}

.mcw-join-field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.mcw-join-field.mcw-join-wide {
	grid-column: 1 / -1;
}

.mcw-join-field > span {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--cocoa);
}

.mcw-club-join .mcw-join-field input {
	width: 100%;
	min-width: 0;
	border: 1.5px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--white);
	padding: 0.65rem 0.9rem;
	font: inherit;
	color: var(--espresso);
}

.mcw-club-join .mcw-join-field input:focus {
	outline: none;
	border-color: var(--terracotta);
	box-shadow: 0 0 0 3px rgb(238 107 132 / 0.25);
}

.mcw-club-join .mcw-join-field input.mcw-join-locked {
	background: #ececec;
	border-color: #d4d4d4;
	color: #595959;
	cursor: not-allowed;
}

/* Mobile number: digits on the left, prefix drop-down beside them. */
.mcw-join-phone {
	display: flex;
	gap: 0.5rem;
}

.mcw-join-phone input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

.mcw-join-phone select,
#main .woocommerce-wrap .mcw-join-phone select {
	flex: 0 0 6.5rem;
	width: 6.5rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--white);
	padding: 0.7rem 0.6rem;
	font: inherit;
	font-size: 0.95rem;
	color: var(--espresso);
}

.mcw-join-legal {
	margin: 0.6rem 0 0.4rem;
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--cocoa);
}

.mcw-join-consent label.mcw-join-agree {
	align-items: flex-start;
	font-size: 0.88rem;
}

.mcw-join-agree input {
	margin-top: 0.25rem;
	flex: 0 0 auto;
}

.mcw-join-agree a {
	color: var(--terracotta-deep);
	text-decoration: underline;
}

.mcw-join-consent {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 0.8rem 1rem;
	margin: 0 0 1.1rem;
	text-align: start;
}

.mcw-join-consent legend {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--espresso);
	padding: 0 0.4rem;
}

.mcw-join-consent label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0;
	font-size: 0.92rem;
	color: var(--cocoa);
	cursor: pointer;
}

.mcw-join-submit {
	width: 100%;
}

@media (max-width: 480px) {
	.mcw-join-fields {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Club self-service panel on the My Account dashboard. */
.mcw-club-panel {
	margin-top: 1.6rem;
	padding: 1.3rem 1.5rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg, 26px);
	background: var(--white);
}

.mcw-club-panel-title {
	font-size: 1.1rem;
	margin: 0 0 0.9rem;
}

.mcw-club-prefs h3 {
	font-size: 0.95rem;
	margin: 0 0 0.5rem;
}

.mcw-club-prefs-note {
	margin: 0 0 0.6rem;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--cocoa);
}

.mcw-club-prefs label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0;
	color: var(--cocoa);
	cursor: pointer;
}

.mcw-club-prefs-actions {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	flex-wrap: wrap;
	margin-top: 0.8rem;
}

.mcw-club-link {
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	color: var(--terracotta-deep);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mcw-club-link:hover {
	color: var(--espresso);
}

.mcw-club-danger {
	display: flex;
	gap: 1.3rem;
	flex-wrap: wrap;
	margin-top: 1.2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
}

.mcw-club-left-note {
	color: var(--cocoa);
	margin: 0 0 0.8rem;
}

/* "Are you sure?" before turning marketing email / SMS off. */
.mcw-confirm {
	width: min(420px, calc(100vw - 32px));
	padding: 1.6rem 1.5rem 1.3rem;
	border: 0;
	border-radius: var(--radius-lg, 26px);
	background: var(--white);
	color: var(--ink);
	box-shadow: var(--shadow-lift);
	text-align: center;
}

.mcw-confirm::backdrop {
	background: rgb(33 26 28 / 0.45);
}

.mcw-confirm-text {
	margin: 0 0 1.2rem;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--espresso);
}

.mcw-confirm-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7rem;
}

/* The dialog lives outside #main, so its button gets the site's button look here. */
.mcw-confirm-actions .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 160px;
	padding: 0.72rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--terracotta);
	color: var(--espresso);
	font-family: var(--font-body);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background var(--speed), transform var(--speed) var(--ease), box-shadow var(--speed);
}

.mcw-confirm-actions .button:hover {
	background: var(--terracotta-deep);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--shadow-soft);
}

.mcw-confirm-cancel {
	border: 0;
	background: none;
	padding: 0.3rem;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	color: var(--terracotta-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mcw-confirm-cancel:hover {
	color: var(--espresso);
}

.mcw-confirm-cancel:focus-visible,
.mcw-confirm-actions .button:focus-visible {
	outline: 2px solid var(--terracotta-deep);
	outline-offset: 3px;
}

/* Checkout gate — club login vs continue as guest. */
.mcw-gate {
	max-width: 620px;
	margin: 0 auto 2rem;
	text-align: center;
}

.mcw-gate-q {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--espresso);
	margin: 0 0 0.9rem;
}

.mcw-gate-btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.mcw-gate-or {
	color: var(--cocoa);
	font-weight: 600;
}

.mcw-gate-login-title {
	font-size: 0.92rem;
	color: var(--cocoa);
	margin: 0 0 1rem;
}

.mcw-gate-back {
	margin-top: 0.9rem;
	display: inline-block;
}

/* ---------------------------------------------------------------------------
 * Branded club login / join screen — lifestyle backdrop + frosted-glass card.
 * ------------------------------------------------------------------------- */
/* The page-title banner is redundant here — the card carries the title. */
.mcw-login-page .page-head {
	display: none;
}

/* Fill the screen below the sticky header, so the lifestyle photo reads as a
   full-height hero and the footer lands right at the bottom edge. */
.mcw-login-page .site-main {
	min-height: calc(100vh - var(--header-h));
	min-height: calc(100svh - var(--header-h));
	display: flex;
	flex-direction: column;
	background:
		linear-gradient(160deg, rgb(255 255 255 / 0.74) 0%, rgb(253 247 248 / 0.66) 100%),
		url(../img/hero-still.webp) center 26% / cover no-repeat;
}

.mcw-login-page .woocommerce-wrap {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: clamp(1.5rem, 4vw, 2.75rem);
}

.mcw-login-page .woocommerce-wrap .woocommerce {
	width: 100%;
	max-width: 470px;
}

.mcw-login-page .mcw-auth {
	background: rgb(255 255 255 / 0.8);
	-webkit-backdrop-filter: blur(18px) saturate(1.15);
	backdrop-filter: blur(18px) saturate(1.15);
	border: 1px solid rgb(255 255 255 / 0.7);
	box-shadow: 0 32px 80px -30px rgb(64 27 39 / 0.55);
	padding: clamp(1.9rem, 5vw, 2.7rem);
}

/* Gradient accent pill above the title. */
.mcw-login-page .mcw-auth::before {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin: 0 auto 1.2rem;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--terracotta-deep), var(--terracotta));
}

.mcw-login-page .mcw-auth-otp-title {
	font-size: clamp(1.3rem, 3.6vw, 1.65rem);
	font-weight: 800;
	line-height: 1.22;
	color: var(--espresso);
	margin-bottom: 0.4rem;
}

.mcw-login-page .mcw-auth .button {
	box-shadow: 0 12px 24px -12px rgb(238 107 132 / 0.6);
}

/* "Already a member?" escape on the join form. */
.mcw-join-already {
	margin-top: 1.2rem;
	font-size: 0.9rem;
	color: var(--espresso);
}

.mcw-join-already a {
	color: var(--terracotta-deep);
	font-weight: 700;
	text-decoration: underline;
}

/* Cookie consent: bar + preferences dialog */
.mcw-cookies {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 950;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.6rem 1.1rem;
	padding: 0.8rem 1.2rem;
	background: var(--espresso);
	color: var(--cream);
	font-size: 0.88rem;
	box-shadow: 0 -8px 24px -12px rgb(64 27 39 / 0.4);
}

.mcw-cookies[hidden],
.mcw-cookie-modal[hidden] {
	display: none;
}

.mcw-cookies p {
	margin: 0;
	max-width: 62ch;
}

.mcw-cookies a {
	color: var(--sage-light);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mcw-cookies-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Accept and reject share one style so neither is favoured. */
.mcw-cookies-btn {
	border: 1px solid var(--cream);
	cursor: pointer;
	border-radius: 999px;
	padding: 0.45rem 1.2rem;
	background: var(--cream);
	color: var(--espresso);
	font-weight: 700;
	font-size: 0.85rem;
	transition: background var(--speed), color var(--speed);
}

.mcw-cookies-btn:hover {
	background: var(--sage-light);
	border-color: var(--sage-light);
}

.mcw-cookies-btn-ghost {
	background: transparent;
	color: var(--cream);
}

.mcw-cookies-btn-ghost:hover {
	color: var(--espresso);
}

.mcw-cookies.is-leaving {
	transform: translateY(110%);
	transition: transform 0.35s var(--ease);
}

.mcw-cookie-modal {
	position: fixed;
	inset: 0;
	z-index: 960;
	display: grid;
	place-items: center;
	padding: 1rem;
}

.mcw-cookie-backdrop {
	position: absolute;
	inset: 0;
	background: rgb(33 26 28 / 0.55);
}

.mcw-cookie-dialog {
	position: relative;
	width: min(480px, 100%);
	max-height: 100%;
	overflow-y: auto;
	padding: 1.4rem 1.5rem;
	border-radius: var(--radius-lg);
	background: var(--cream);
	color: var(--espresso);
}

.mcw-cookie-dialog:focus {
	outline: none;
}

.mcw-cookie-dialog h2 {
	font-size: 1.25rem;
	margin: 0 0 0.8rem;
}

.mcw-cookie-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 0;
	border-top: 1px solid var(--line);
}

.mcw-cookie-info {
	display: grid;
	gap: 0.1rem;
}

.mcw-cookie-info span,
.mcw-cookie-row > div span {
	font-size: 0.82rem;
	color: var(--cocoa);
}

.mcw-cookie-row > div {
	display: grid;
	gap: 0.1rem;
}

.mcw-cookie-row em {
	font-size: 0.82rem;
	font-style: normal;
	color: var(--cocoa);
	white-space: nowrap;
}

.mcw-cookie-switch {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	position: relative;
	width: 42px;
	height: 24px;
	margin: 0;
	border-radius: 999px;
	background: #c9c0c2;
	cursor: pointer;
	transition: background var(--speed);
}

.mcw-cookie-switch::before {
	content: "";
	position: absolute;
	top: 3px;
	inset-inline-start: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	transition: transform var(--speed) var(--ease);
}

.mcw-cookie-switch:checked {
	background: var(--sage);
}

.mcw-cookie-switch:checked::before {
	transform: translateX(18px);
}

[dir="rtl"] .mcw-cookie-switch:checked::before {
	transform: translateX(-18px);
}

.mcw-cookie-switch:focus-visible {
	outline: 3px solid var(--terracotta);
	outline-offset: 2px;
}

.mcw-cookie-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
}

.mcw-cookie-btn {
	border: 0;
	cursor: pointer;
	border-radius: 999px;
	padding: 0.55rem 1.2rem;
	background: var(--espresso);
	color: var(--cream);
	font-weight: 700;
	font-size: 0.85rem;
	transition: background var(--speed);
}

.mcw-cookie-btn:hover {
	background: #000;
}

.mcw-cookie-link {
	border: 0;
	padding: 0;
	background: none;
	color: #f3eeee;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.mcw-cookie-link:hover {
	color: var(--sage-light);
}
/* Review photos */
.comment-form-photo label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.mcw-review-photo {
	display: inline-block;
	margin-top: 0.6rem;
}

.mcw-review-photo img {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: var(--radius);
	border: 3px solid var(--white);
	box-shadow: 0 8px 18px -8px rgb(64 27 39 / 0.35);
	transition: transform var(--speed) var(--ease);
}

.mcw-review-photo:hover img {
	transform: scale(1.06) rotate(-2deg);
}

.review-card .review-photo {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: 42% 58% 52% 48% / 52% 44% 56% 48%;
	border: 3px solid var(--white);
	box-shadow: 0 8px 18px -8px rgb(64 27 39 / 0.35);
	margin-top: 0.2rem;
}

/* 23. Checkout
   ------------------------------------------------------------- */
.mcw-checkout-notice {
	background: var(--sage-light);
	color: var(--espresso);
	border-radius: var(--radius);
	padding: 0.85rem 1.15rem;
	margin-bottom: 1.6rem;
	font-weight: 600;
	text-align: center;
}

/* Section headings in polished metal (the same diagonal sheen as the buttons):
   billing details and the order summary in gold, ship-to-different-address and
   additional information in silver. */
#main .woocommerce-wrap form.checkout h3 {
	--metal: linear-gradient(100deg, #E9CF7E 0%, #F8EBC0 30%, #DDB95E 55%, #F3E2A6 78%, #D4AE52 100%);
	background:
		linear-gradient(135deg, rgb(255 255 255 / 0.5) 0%, rgb(255 255 255 / 0) 34%, rgb(255 255 255 / 0.28) 60%, rgb(255 255 255 / 0) 100%),
		var(--metal);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.75), inset 0 -1px 0 rgb(0 0 0 / 0.06), 0 2px 6px rgb(64 27 39 / 0.08);
	border-radius: var(--radius);
	padding: 0.7rem 1.1rem;
	margin: 1.6rem 0 1.1rem;
	font-size: 1.05rem;
}

#main .woocommerce-wrap form.checkout h3#ship-to-different-address,
#main .woocommerce-wrap form.checkout .woocommerce-additional-fields > h3 {
	--metal: linear-gradient(100deg, #D5D8DE 0%, #F4F5F7 30%, #C3C7CF 55%, #ECEEF1 78%, #BCC1C9 100%);
}

#main .woocommerce-wrap form.checkout .form-row {
	margin-bottom: 1rem;
}

#main .woocommerce-wrap form.checkout .form-row-first,
#main .woocommerce-wrap form.checkout .form-row-last {
	width: calc(50% - 0.5rem);
	float: inline-start;
}

#main .woocommerce-wrap form.checkout .form-row-last {
	float: inline-end;
}

#main .woocommerce-wrap form.checkout .form-row-wide {
	clear: both;
}

#main .woocommerce-wrap #order_review {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 1.4rem;
	box-shadow: var(--shadow-soft);
}

#main .woocommerce-wrap #order_review_heading {
	margin-top: 2rem;
}

#main .woocommerce-wrap #place_order {
	width: 100%;
	padding: 1rem 1.5rem;
	font-size: 1.05rem;
	font-weight: 700;
}

#main .woocommerce-wrap .woocommerce-terms-and-conditions-wrapper {
	margin: 1.2rem 0;
}

#main .woocommerce-wrap .woocommerce-privacy-policy-text a,
#main .woocommerce-wrap .woocommerce-terms-and-conditions-checkbox-text a {
	color: var(--terracotta-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap; /* "מדיניות הפרטיות" never splits across lines */
}

/* The privacy sentence and the terms checkbox share one size, which on narrow
   phones shrinks just enough to keep the privacy sentence on a single line
   (it needs about 20 font-sizes of width; ~112px goes to the card's padding). */
#main .woocommerce-wrap .woocommerce-privacy-policy-text p,
#main .woocommerce-wrap .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox {
	font-size: min(0.9rem, calc((100vw - 112px) / 20));
	line-height: 1.6;
}

/* The required asterisk sits before the checkbox (on its right), not at the
   far end of the line. */
#main .woocommerce-wrap .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox .required {
	order: -1;
}

/* Cart page: green buttons instead of the default pink/terracotta. Only the
   colour, so the metallic sheen (below) stays. */
body.woocommerce-cart #main .woocommerce-wrap a.button,
body.woocommerce-cart #main .woocommerce-wrap button.button,
body.woocommerce-cart #main .woocommerce-wrap input.button,
body.woocommerce-cart #main .woocommerce-wrap .woocommerce-Button,
body.woocommerce-cart #main .woocommerce-wrap .wc-proceed-to-checkout a.checkout-button {
	background-color: var(--sage-light);
	color: var(--espresso);
}

body.woocommerce-cart #main .woocommerce-wrap a.button:hover,
body.woocommerce-cart #main .woocommerce-wrap button.button:hover,
body.woocommerce-cart #main .woocommerce-wrap input.button:hover,
body.woocommerce-cart #main .woocommerce-wrap .woocommerce-Button:hover,
body.woocommerce-cart #main .woocommerce-wrap .wc-proceed-to-checkout a.checkout-button:hover {
	background-color: var(--sage);
	color: #fff;
}

/* Checkout page: green buttons too (place order, apply coupon, etc.). */
body.woocommerce-checkout #main .woocommerce-wrap a.button,
body.woocommerce-checkout #main .woocommerce-wrap button.button,
body.woocommerce-checkout #main .woocommerce-wrap input.button,
body.woocommerce-checkout #main .woocommerce-wrap .woocommerce-Button,
body.woocommerce-checkout #main .woocommerce-wrap #place_order {
	background-color: var(--sage-light);
	color: var(--espresso);
}

body.woocommerce-checkout #main .woocommerce-wrap a.button:hover,
body.woocommerce-checkout #main .woocommerce-wrap button.button:hover,
body.woocommerce-checkout #main .woocommerce-wrap input.button:hover,
body.woocommerce-checkout #main .woocommerce-wrap .woocommerce-Button:hover,
body.woocommerce-checkout #main .woocommerce-wrap #place_order:hover {
	background-color: var(--sage);
	color: #fff;
}

/* My Account page: green buttons too (log in, sign up, OTP codes,
   save changes, add address) — consistent with cart & checkout. */
body.woocommerce-account #main .woocommerce-wrap a.button,
body.woocommerce-account #main .woocommerce-wrap button.button,
body.woocommerce-account #main .woocommerce-wrap input.button,
body.woocommerce-account #main .woocommerce-wrap .woocommerce-Button {
	background: var(--sage-light);
	color: var(--espresso);
}

body.woocommerce-account #main .woocommerce-wrap a.button:hover,
body.woocommerce-account #main .woocommerce-wrap button.button:hover,
body.woocommerce-account #main .woocommerce-wrap input.button:hover,
body.woocommerce-account #main .woocommerce-wrap .woocommerce-Button:hover {
	background: var(--sage);
	color: #fff;
}

/* Coupon toggle: make the "enter coupon" link clearly a clickable button. */
#main .woocommerce-wrap .woocommerce-form-coupon-toggle .woocommerce-info {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.3rem 0.7rem;
	font-weight: 600;
}

#main .woocommerce-wrap .showcoupon {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1.15rem;
	border-radius: 999px;
	background-color: #e3f4ec;
	border: 1.5px solid var(--sage);
	color: var(--sage);
	font-weight: 700;
	text-decoration: none;
	transition: background var(--speed), color var(--speed), transform var(--speed) var(--ease), box-shadow var(--speed);
}

#main .woocommerce-wrap .showcoupon::before {
	content: "+";
	font-size: 1.1em;
	line-height: 1;
	font-weight: 700;
}

#main .woocommerce-wrap .showcoupon:hover,
#main .woocommerce-wrap .showcoupon:focus-visible {
	background-color: var(--sage);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--shadow-soft);
}

/* The gift voucher toggle (gift voucher plugin) gets the same button. */
#main .woocommerce-wrap .show-pw-gift-card {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1.15rem;
	border-radius: 999px;
	background-color: #e3f4ec;
	border: 1.5px solid var(--sage);
	color: var(--sage);
	font-weight: 700;
	text-decoration: none;
	transition: background var(--speed), color var(--speed), transform var(--speed) var(--ease), box-shadow var(--speed);
}

#main .woocommerce-wrap .show-pw-gift-card::before {
	content: "+";
	font-size: 1.1em;
	line-height: 1;
	font-weight: 700;
}

#main .woocommerce-wrap .show-pw-gift-card:hover,
#main .woocommerce-wrap .show-pw-gift-card:focus-visible {
	background-color: var(--sage);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--shadow-soft);
}

/* Coupon fields: the button keeps its label on one line, and an error
   ("coupon does not exist") gets its own full-width line under them instead
   of a narrow column beside the field. */
#main .woocommerce-wrap .woocommerce-cart-form .coupon {
	flex-wrap: wrap;
}

#main .woocommerce-wrap .woocommerce-cart-form .coupon .input-text#coupon_code {
	flex: 1 1 140px;
	width: auto;
	min-width: 0;
}

#main .woocommerce-wrap .coupon button.button,
#main .woocommerce-wrap .checkout_coupon button.button,
#main .woocommerce-wrap #pwgc-apply-gift-card-checkout {
	white-space: nowrap;
}

#main .woocommerce-wrap .coupon-error-notice {
	flex: 1 0 100%;
	margin: 0.2rem 0 0;
	color: var(--terracotta-deep);
	font-size: 0.88rem;
}

/* Single product: Woo adds a "View cart" link after an ajax add; the header
   badge and the toast already confirm it (as on the product cards), and the
   link squeezed the button onto two lines. */
#main .woocommerce-wrap form.cart .added_to_cart {
	display: none;
}

#main .woocommerce-wrap button.single_add_to_cart_button.button {
	white-space: nowrap;
}

/* Checkout city: a searchable list (select2), styled like the other fields. */
#main .woocommerce-wrap form.checkout .select2-container .select2-selection--single {
	height: auto;
	min-height: 2.65rem;
	display: flex;
	align-items: center;
	padding: 0.25rem 1rem;
	border: 1.5px solid var(--line-strong);
	border-radius: 14px;
	background: var(--white);
	font-family: var(--font-body);
	font-size: 0.95rem;
}

#main .woocommerce-wrap form.checkout .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.5;
	color: var(--ink);
}

#main .woocommerce-wrap form.checkout .select2-container .select2-selection--single .select2-selection__arrow {
	top: 50%;
	height: 26px;
	transform: translateY(-50%);
	margin-inline: 0.5rem;
}

#main .woocommerce-wrap form.checkout .select2-container--focus .select2-selection--single,
#main .woocommerce-wrap form.checkout .select2-container--open .select2-selection--single {
	border-color: var(--terracotta);
	box-shadow: 0 0 0 3px rgb(238 107 132 / 0.35);
}

/* Checkout summary on phones: the shipping choices take the full row under
   their heading. Their labels carry delivery times, so they wrap, with the
   radio staying beside the first line. A table cell can't span both columns
   from CSS, so on phones the summary is laid out as flex rows instead. */
@media (max-width: 640px) {
	#main .woocommerce-wrap .woocommerce-checkout-review-order-table,
	#main .woocommerce-wrap .woocommerce-checkout-review-order-table :is(thead, tbody, tfoot) {
		display: block;
		width: 100%;
	}

	/* Stretch, so both cells of a row share one height and their bottom
	   borders meet in a single line. */
	#main .woocommerce-wrap .woocommerce-checkout-review-order-table tr {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}

	#main .woocommerce-wrap .woocommerce-checkout-review-order-table tr > :first-child {
		flex: 1 1 0;
		min-width: 0;
	}

	#main .woocommerce-wrap .woocommerce-checkout-review-order-table tr:not(.woocommerce-shipping-totals) > :last-child:not(:first-child) {
		flex: none;
	}

	#main .woocommerce-wrap .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > th,
	#main .woocommerce-wrap .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > td {
		display: block;
		flex: 1 1 100%;
		text-align: start;
	}

	#main .woocommerce-wrap .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > th {
		padding-bottom: 0.2rem;
		border-bottom: 0;
	}

	#main .woocommerce-wrap .woocommerce-checkout-review-order-table .woocommerce-shipping-methods {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#main .woocommerce-wrap .woocommerce-checkout-review-order-table .woocommerce-shipping-methods li {
		display: flex;
		align-items: flex-start;
		gap: 0.45rem;
		margin: 0 0 0.35rem;
	}

	#main .woocommerce-wrap .woocommerce-checkout-review-order-table .woocommerce-shipping-methods input {
		flex: none;
		margin: 0.3em 0 0;
	}

	#main .woocommerce-wrap .woocommerce-checkout-review-order-table .woocommerce-shipping-methods label {
		min-width: 0;
		line-height: 1.45;
	}
}

/* The mobile sales banner is hidden on desktop (the arch shows there). */
.hero-sale {
	display: none;
}

/* Mobile hero: keep the group photo as the faded background under the
   content, but replace the decorative arch with a sales banner. */
@media (max-width: 640px) {
	/* Size the background photo to its own aspect ratio (full width, no
	   cropping) and fade its bottom into the page with a mask, instead of
	   the hard cut the old object-fit: contain left. */
	.hero-video {
		/* The whole group photo shows on phones, so soften it: lighter and less warm than the desktop crop. */
		opacity: 0.5;
		filter: saturate(0.6);
		object-fit: cover;
		object-position: center top;
		height: auto;
		bottom: auto;
		aspect-ratio: 2200 / 1467;
		-webkit-mask-image: linear-gradient(to bottom, #000 58%, rgb(0 0 0 / 0.35) 85%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 58%, rgb(0 0 0 / 0.35) 85%, transparent 100%);
	}

	.hero-grid {
		gap: 1.25rem;
	}

	/* Centre the headline + lead on mobile. */
	.hero-copy {
		text-align: center;
	}

	.hero-lead {
		margin-inline: auto;
		color: var(--cocoa);
	}

	/* Arch out, sales banner in. */
	.hero-art {
		display: none;
	}

	.hero-sale {
		display: block;
		margin-top: 0.3rem;
		border-radius: var(--radius-lg);
		overflow: hidden;
		box-shadow: 0 18px 40px -18px rgb(214 48 87 / 0.5);
	}

	.hero-sale:active {
		transform: scale(0.99);
	}

	.hero-sale img {
		display: block;
		width: 100%;
		height: auto;
	}}

/* Pause-motion switch (template-parts/motion-toggle.php, main.js).
   With the switch on, every automatic animation jumps to its finished
   state, exactly like the prefers-reduced-motion rule above. */
.mcw-motion-toggle[aria-pressed="true"] {
	background: var(--espresso);
	color: var(--cream);
}

html.mcw-paused *,
html.mcw-paused *::before,
html.mcw-paused *::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	animation-delay: 0s !important;
	scroll-behavior: auto !important;
}

html.mcw-paused .marquee-list[aria-hidden="true"] {
	display: none;
}



/* Metallic buttons: a soft diagonal sheen over every solid button, so the
   pink, mint, cream and dark buttons all read as polished metal while
   keeping their own colour (and text contrast). Hover shades it darker. */
:root {
	--sheen: linear-gradient(135deg, rgb(255 255 255 / 0.55) 0%, rgb(255 255 255 / 0) 36%, rgb(255 255 255 / 0.3) 62%, rgb(255 255 255 / 0) 100%);
	--sheen-dark: linear-gradient(135deg, rgb(255 255 255 / 0.24) 0%, rgb(255 255 255 / 0) 38%, rgb(255 255 255 / 0.14) 64%, rgb(255 255 255 / 0) 100%);
}

.btn-dark,
.search-form .btn,
.site-footer .btn-dark,
.article-shell .btn-dark,
.contact-submit,
.mcw-cancel-form .contact-submit,
.club-cta,
.mcw-cookies-btn,
.mcw-join-submit,
#main .woocommerce-wrap button.button,
#main .woocommerce-wrap input.button,
#main .woocommerce-wrap .woocommerce-Button,
#main .woocommerce-wrap .woocommerce-message .button,
#main .woocommerce-wrap .woocommerce-error .button,
#main .woocommerce-wrap button.single_add_to_cart_button.button,
#main .woocommerce-wrap .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-cart #main .woocommerce-wrap a.button,
body.woocommerce-checkout #main .woocommerce-wrap a.button,
#main .woocommerce-wrap .showcoupon,
#main .woocommerce-wrap .show-pw-gift-card,
.mcw-login-page .mcw-auth .button,
.mcw-auth .woocommerce-form-register__submit {
	background-image: var(--sheen);
}

.btn-dark:hover,
.search-form .btn:hover,
.site-footer .btn-dark:hover,
.article-shell .btn-dark:hover,
.contact-submit:hover,
.mcw-cancel-form .contact-submit:hover,
.club-cta:hover,
.mcw-cookies-btn:hover,
.mcw-join-submit:hover,
#main .woocommerce-wrap button.button:hover,
#main .woocommerce-wrap input.button:hover,
#main .woocommerce-wrap .woocommerce-Button:hover,
#main .woocommerce-wrap button.single_add_to_cart_button.button:hover,
#main .woocommerce-wrap .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce-cart #main .woocommerce-wrap a.button:hover,
body.woocommerce-checkout #main .woocommerce-wrap a.button:hover,
#main .woocommerce-wrap .showcoupon:hover,
#main .woocommerce-wrap .show-pw-gift-card:hover,
.mcw-auth .woocommerce-form-register__submit:hover {
	background-image: var(--sheen-dark);
}

.mcw-cookie-btn,
.club-wa-btn {
	background-image: var(--sheen-dark);
}

.mcw-cookies-btn-ghost,
.mcw-cookies-btn-ghost:hover {
	background-image: none;
}

/* Keeps "My Curly Way" together: when a heading wraps, the whole name drops to the next line. */
.mcw-nowrap {
	white-space: nowrap;
}

/* The e-mail is the member's login — shown, but only an admin can change it. */
#main .woocommerce-wrap .woocommerce-EditAccountForm input.input-text[readonly] {
	background: #ececec;
	border-color: #d4d4d4;
	color: #595959;
	cursor: not-allowed;
}

/* Fixed-value fields (e.g. billing country = Israel) take no room. */
.mcw-hidden-field {
	display: none !important;
}

/* "כתבו עלינו" — press clippings */
.press-grid {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	columns: 3 260px;
	column-gap: 1.4rem;
}

.press-card {
	break-inside: avoid;
	margin: 0 0 1.4rem;
}

.press-link {
	display: block;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.press-link:hover,
a.press-link:focus-visible {
	box-shadow: 0 14px 30px -18px rgb(64 27 39 / 0.45);
	transform: translateY(-2px);
}

.press-link img {
	display: block;
	width: 100%;
	height: auto;
}

.press-title {
	display: block;
	padding: 0.9rem 1rem 0;
	font-weight: 700;
	color: var(--espresso);
}

.press-text {
	display: block;
	padding: 0.4rem 1rem 1rem;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--cocoa);
}

.press-title:last-child {
	padding-bottom: 1rem;
}

/* More solid buttons and chips that were still flat: product-card "add to
   cart", WooCommerce block buttons, ingredient / quiz chips. */
.quick-add,
.pcard-add,
.wp-block-button__link,
.ing-chip,
.quiz-chip {
	background-image: var(--sheen);
}

.quick-add:hover,
.pcard-add:hover,
.wp-block-button__link:hover,
.ing-chip:hover,
.quiz-chip:hover {
	background-image: var(--sheen-dark);
}

.product-card.is-oos .quick-add,
.product-card.is-oos .pcard-add {
	background-image: none;
}

/* Desktop sale banner: an image that carries the promotion, in the hero art slot. */
/* The sale image is round: no frame or box around it, just a soft shadow that
   follows its shape. It is centred on the headline block by the hero grid. */
.hero-desk-sale {
	display: block;
	max-width: 380px; /* small enough to leave the hero photo visible */
	transition: transform 0.25s ease;
}

.hero-desk-sale img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 16px 26px rgb(64 27 39 / 0.22));
	transition: filter 0.25s ease;
}

/* Side by side: the headline column ends with the lead's bottom margin, which
   made the sale image sit that much lower than the visible text. Give the image
   the same margin so both are centred on the text itself. */
@media (min-width: 901px) {
	.hero-art {
		margin-bottom: 1.9rem;
	}
}

.hero-desk-sale:hover,
.hero-desk-sale:focus-visible {
	transform: translateY(-3px);
}

.hero-desk-sale:hover img,
.hero-desk-sale:focus-visible img {
	filter: drop-shadow(0 22px 34px rgb(64 27 39 / 0.3));
}

/* Our story: the chapter numbers in satin metal (mint / pink, like the spirals). */
.story-chapter .story-num {
	background: linear-gradient(135deg, #8fd0b0 0%, #e3f7ee 42%, #7fc3a1 100%);
	box-shadow: var(--shadow-soft), inset 0 1px 0 rgb(255 255 255 / 0.7);
}

.story-chapter:nth-child(2n) .story-num {
	background: linear-gradient(135deg, #ec9db0 0%, #fde8ee 42%, #e0849b 100%);
}

/* Experiment: the product line-up, faded, behind the quiz section. */
.section-quiz {
	position: relative;
	isolation: isolate;
}

.section-quiz::before {
	content: "";
	position: absolute;
	inset: 9rem 0 0;
	z-index: -1;
	background: url("../img/promise-products.webp") center 30% / cover no-repeat;
	opacity: 0.2;
	mix-blend-mode: multiply;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 82%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 82%, transparent 100%);
}

/* Phones: keep the header on one row. With the pause-motion button there are five
   icons plus the logo and menu button, which at 375px is wider than the screen —
   Android Chrome then widens the page and everything shifts sideways. */
@media (max-width: 480px) {
	.header-inner {
		gap: 0.4rem;
	}

	.brand {
		min-width: 0;
		gap: 0.35rem;
	}

	.brand-mark {
		width: 22px;
		height: 22px;
	}

	.brand-word {
		font-size: 1.05rem;
	}

	.header-actions {
		gap: 0;
	}

	.header-actions .icon-btn {
		width: 34px;
	}

	.nav-toggle {
		flex: none;
		width: 36px;
	}
}

@media (max-width: 364px) {
	.brand-mark {
		display: none;
	}
}
/* OneTap accessibility panel: the plugin sets white text on its mint header
   (about 1.5:1), so use the dark text colour there. The selector repeats the
   plugin's own chain so it wins over its !important white. */
nav.onetap-accessibility.onetap-plugin-onetap .onetap-container .onetap-accessibility-settings header.onetap-header-top :is(.onetap-heading, p, p span, p a, .open-form-hide-toolbar, .onetap-languages span) {
	color: var(--espresso) !important;
	-webkit-text-fill-color: var(--espresso) !important;
}

/* Phones / tablets: no floating OneTap button; the panel opens from
   "Accessibility" in the menu (main.js clicks this hidden button).
   Desktop keeps the floating button. */
@media (max-width: 900px) {
	html body .onetap-container-toggle {
		display: none !important;
	}
}

/* Price per 100 ml, shown under the price on simple product pages. */
#main .woocommerce-wrap .mcw-unit-price {
	margin: -0.4rem 0 0.9rem;
	font-size: 0.92rem;
	color: rgb(33 26 28 / 0.75);
}

/* Gift card product (PW WooCommerce Gift Cards): the אל / מאת / ברכה fields,
   styled like the rest of the product form. */
#main .woocommerce-wrap #pwgc-purchase-container {
	display: grid;
	gap: 0.85rem;
	margin: 1.2rem 0 1.4rem;
	padding: 1.1rem 1.15rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--cream);
}

#main .woocommerce-wrap #pwgc-purchase-container .pwgc-field-container {
	display: grid;
	gap: 0.35rem;
	margin: 0;
}

#main .woocommerce-wrap #pwgc-purchase-container .pwgc-label {
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--espresso);
}

#main .woocommerce-wrap #pwgc-purchase-container .pwgc-input-text,
#main .woocommerce-wrap #pwgc-purchase-container textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6rem 0.85rem;
	border: 1.5px solid var(--line-strong);
	border-radius: 14px;
	background: #fff;
	font: inherit;
	color: var(--espresso);
}

#main .woocommerce-wrap #pwgc-purchase-container textarea {
	resize: vertical;
	min-height: 74px;
	line-height: 1.5;
}

#main .woocommerce-wrap #pwgc-purchase-container .pwgc-input-text:focus,
#main .woocommerce-wrap #pwgc-purchase-container textarea:focus {
	outline: none;
	border-color: var(--terracotta);
	box-shadow: 0 0 0 3px rgb(238 107 132 / 0.15);
}

#main .woocommerce-wrap #pwgc-purchase-container .pwgc-subtitle {
	font-size: 0.78rem;
	color: var(--cocoa);
}

/* My Account → account details: the WP Hide 2FA options (staff only, English,
   unstyled) are not shown here. Staff set up 2FA in the admin profile screen. */
.woocommerce-EditAccountForm > h2:has(~ table.wp-list-table),
.woocommerce-EditAccountForm > table.wp-list-table {
	display: none;
}

/* My Account: WooCommerce's "Confirm email address" notice. Signing in already
   proves the email (one-time code by email), and past guest orders are linked
   at sign-in (inc/account-otp.php), so the notice is not needed. */
.woocommerce-MyAccount-content .woocommerce-info:has(a[href*="wc_send_verification"]) {
	display: none;
}