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

@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 var(--terracotta);
	outline-offset: 3px;
}

: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: var(--terracotta-deep);
	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.65s var(--ease),
		transform 0.65s var(--ease);
	transition-delay: calc(var(--d, 0) * 60ms);
}

/* 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;
	top: 67%;
	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 247 241 / 0.85);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s, background 0.3s;
}

.site-header.scrolled {
	border-bottom-color: var(--line);
	background: rgb(253 247 248 / 0.93);
}

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

.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: #fff;
	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 {
	width: 560px;
	height: 560px;
	top: -180px;
	right: -120px;
	background: radial-gradient(circle, rgb(247 225 207 / 0.9) 0%, rgb(247 225 207 / 0) 65%);
}

.hero-blob-2 {
	width: 480px;
	height: 480px;
	bottom: -200px;
	left: -140px;
	background: radial-gradient(circle, rgb(217 154 43 / 0.22) 0%, rgb(217 154 43 / 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-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;
	}
}

.hero-title em {
	display: inline-block;
	font-style: italic;
	font-weight: 500;
	line-height: 1.22;
	padding: 0.08em 0.06em;
	color: #fdfdfd;
	filter: drop-shadow(0 1px 10px rgb(0 0 0 / 0.85));
}

/* The green shimmer is a desktop pointer treat: the accent stays plain white
   at rest and a glint sweeps across once on mouse-over. Touch devices (no
   hover) never trigger it, so on mobile the accent is simply white. */
@media (hover: hover) and (pointer: fine) {
	@supports ((-webkit-background-clip: text) or (background-clip: text)) {
		.hero-title em:hover {
			background: linear-gradient(110deg, #fdfdfd 0 40%, #4fc98c 50%, #fdfdfd 60% 100%);
			background-size: 230% 100%;
			/* One tile only — a repeating gradient sends a second green band
			   across mid-sweep, which reads as a separate glint. The sweep is
			   kept within 0%–100% so the single tile always covers the text
			   (outside it there is no fill and the letters would vanish). */
			background-repeat: no-repeat;
			background-position: 0% 0;
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			color: transparent;
			animation: mcw-title-shine 1.1s ease-in-out;
		}
	}
}

@keyframes mcw-title-shine {
	from { background-position: 100% 0; }
	to   { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-title em:hover {
		animation: none;
	}
}

.hero-lead {
	font-size: 1.11rem;
	line-height: 1.7;
	color: var(--cocoa);
	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-product {
	top: 14%;
	right: -6%;
	animation: mcw-float 6s ease-in-out infinite alternate;
}

.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: #fff;
	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 {
	background: var(--terracotta);
	transform: rotate(-1.3deg);
	width: calc(100% + 48px);
	margin-left: -24px;
	overflow: hidden;
}

.marquee-alt .marquee-strip {
	background: #F0EBA9;
}

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

.marquee-social .marquee-strip {
	background: var(--sage-light);
}

/* Mirror of .marquee-social: bridges out of the dark reviews block (above)
   into the light journal section (below). Strip keeps the base terracotta. */
.marquee-journal {
	background: linear-gradient(to bottom, var(--espresso) 50%, var(--cream) 50%);
}

/* Tilt the opposite way to the other strips, mirroring the one that bridges
   into the reviews block just above. */
.marquee-journal .marquee-strip {
	transform: rotate(1.3deg);
}


.marquee-track {
	display: flex;
	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 {
	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;
}

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

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

.badge-sale {
	background: var(--terracotta);
	color: var(--espresso);
}

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

.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-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: var(--sage-light);
	color: var(--espresso);
	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: var(--espresso);
}

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

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

.footer-brand > p {
	color: var(--cocoa);
	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: var(--espresso);
}

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

.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);
	margin-bottom: 1.1rem;
}

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

.footer-col a {
	color: var(--espresso);
	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: var(--espresso);
	color: #fff;
	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(33 26 28 / 0.45); }
	70% { box-shadow: 0 0 0 14px rgb(33 26 28 / 0); }
	100% { box-shadow: 0 0 0 0 rgb(33 26 28 / 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: var(--sage);
}

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

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

/* 13. Toast + misc
   ------------------------------------------------------------- */
.mcw-toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	z-index: 600;
	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);
}

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

#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;
}

#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 .cart_totals .shipping-calculator-button {
	color: var(--terracotta-deep);
	font-size: 0.85rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 500;
}

#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);
}

#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;
}

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

/* 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;
	z-index: 0;
	pointer-events: none;
}

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

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

.mcw-contact-form .mcw-hp {
	position: absolute;
	left: -9999px;
	top: auto;
}

.contact-submit {
	background: var(--terracotta);
	color: #fff;
	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;
	}
}

/* Curly the kitten — chat widget */
.mcw-cat {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 900;
}

.cat-toggle {
	display: block;
	position: relative;
	width: 68px;
	height: 149px;
	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-canvas {
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.cat-source {
	display: none;
}

.cat-bubble {
	position: absolute;
	right: calc(100% + 10px);
	bottom: 56px;
	white-space: nowrap;
	background: #F4EC76;
	color: var(--espresso);
	padding: 0.5rem 0.9rem;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	box-shadow: var(--shadow-soft);
	animation: mcw-fade-up 0.35s var(--ease) both;
}

.cat-bubble::after {
	content: "";
	position: absolute;
	right: -5px;
	bottom: 12px;
	width: 10px;
	height: 10px;
	background: #F4EC76;
	border-radius: 2px;
	transform: rotate(45deg);
}

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

.cat-chat {
	position: fixed;
	right: 22px;
	bottom: 188px;
	z-index: 901;
	display: flex;
	flex-direction: column;
	width: min(360px, calc(100vw - 32px));
	height: min(540px, calc(100vh - 160px));
	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: cover;
	object-position: 50% 28%;
	background: #FBF5F6;
	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 0.65rem;
}

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

.cat-form {
	display: flex;
	gap: 0.5rem;
	padding: 0.7rem 1rem 1rem;
	border-top: 1px solid var(--line);
	background: var(--cream);
}

.cat-input {
	flex: 1;
	min-width: 0;
	padding: 0.65rem 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.92rem;
}

.cat-input:focus {
	outline: none;
	border-color: var(--honey);
	box-shadow: 0 0 0 3px rgb(244 236 118 / 0.55);
}

.cat-send {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: #F4EC76;
	color: var(--espresso);
	cursor: pointer;
	transition: background var(--speed), transform var(--speed) var(--ease);
}

.cat-send:hover {
	background: var(--honey);
	color: var(--espresso);
	transform: translateY(-1px);
}

body.rtl .cat-bubble {
	right: auto;
	left: calc(100% + 12px);
}

body.rtl .cat-bubble::after {
	right: auto;
	left: -5px;
}

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

	.cat-toggle {
		width: 54px;
		height: 118px;
	}

	.cat-chat {
		right: 14px;
		bottom: 144px;
	}
}

/* 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-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;
	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-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-product {
		right: 0;
	}

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

	.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: var(--espresso);
	color: #fff;
	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(33 26 28 / 0.45); }
	70% { box-shadow: 0 0 0 14px rgb(33 26 28 / 0); }
	100% { box-shadow: 0 0 0 0 rgb(33 26 28 / 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-product,
	.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-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(251 247 241 / 0.7) 48%, rgb(251 247 241 / 0.25) 100%);
}

.hero-wash-bottom {
	top: auto;
	height: 7rem;
	background: linear-gradient(180deg, rgb(251 247 241 / 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-product,
.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-chip-product {
	top: auto;
	right: auto;
	bottom: 4rem;
	left: -0.75rem;
}

.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, and only the first 4 products per category. */
	.section-prod-rows .prod-row-track > li {
		flex: 0 0 min(220px, 60vw);
	}

	.section-prod-rows .prod-row-track > li:nth-child(n+5) {
		display: none;
	}

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

.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-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1.5rem 1rem;
}

.promise-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.7rem;
}

.promise-ic {
	display: grid;
	place-items: center;
	width: 96px;
	height: 96px;
	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.95rem;
	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: 78px;
		height: 78px;
	}

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

.club-step-code {
	display: grid;
	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;
}

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

.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;
	gap: 0.6rem;
	flex-wrap: wrap;
	align-items: stretch;
}

.mcw-auth-otp-row input {
	flex: 1;
	min-width: 180px;
}

.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 {
	flex: none;
}

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

/* Cookie consent line */
.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.7rem 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 a {
	color: var(--sage-light);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mcw-cookies-ok {
	border: 0;
	cursor: pointer;
	border-radius: 999px;
	padding: 0.45rem 1.2rem;
	background: var(--terracotta);
	color: var(--espresso);
	font-weight: 700;
	font-size: 0.85rem;
	transition: background var(--speed), color var(--speed);
}

.mcw-cookies-ok:hover {
	background: #F4EC76;
}

.mcw-cookies.is-leaving {
	transform: translateY(110%);
	transition: transform 0.35s var(--ease);
}

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

#main .woocommerce-wrap form.checkout h3 {
	background: #F4EC76;
	border-radius: var(--radius);
	padding: 0.7rem 1.1rem;
	margin: 1.6rem 0 1.1rem;
	font-size: 1.05rem;
}

#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;
}

.mcw-gift-row label {
	font-weight: 600;
}

/* Cart page: green buttons instead of the default pink/terracotta. */
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: 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: 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: 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: 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: var(--white);
	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: var(--sage);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--shadow-soft);
}

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

	/* Arch out, sales banner in. */
	.hero-art {
		display: none;
	}

	.hero-sale {
		position: relative;
		display: flex;
		align-items: stretch;
		min-height: 174px;
		margin-top: 0.3rem;
		border-radius: var(--radius-lg);
		background: #FBE3EA;
		overflow: hidden;
		text-decoration: none;
		box-shadow: 0 18px 40px -18px rgb(214 48 87 / 0.5);
	}

	.hero-sale:active {
		transform: scale(0.99);
	}

	/* Text side (right in RTL). */
	.hero-sale-main {
		position: relative;
		z-index: 2;
		flex: 1 1 54%;
		display: grid;
		align-content: center;
		gap: 0.3rem;
		padding: 1rem 1.1rem 1rem 0.5rem;
	}

	.hero-sale-title {
		font-family: var(--font-display);
		font-size: 1.5rem;
		font-weight: 800;
		line-height: 1;
		color: var(--terracotta-deep);
	}

	.hero-sale-text {
		font-size: 0.78rem;
		line-height: 1.32;
		color: var(--espresso);
		opacity: 0.82;
	}

	.hero-sale-cta {
		justify-self: start;
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		margin-top: 0.5rem;
		padding: 0.5rem 1.15rem;
		border-radius: 999px;
		background: var(--terracotta-deep);
		color: #fff;
		font-weight: 800;
		font-size: 0.85rem;
		box-shadow: 0 10px 20px -8px rgb(214 48 87 / 0.6);
		animation: mcw-sale-cta-pulse 2.8s ease-in-out infinite;
	}

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

	body.rtl .hero-sale-cta .icon {
		transform: scaleX(-1);
	}

	/* Image side (left in RTL). */
	.hero-sale-figure {
		position: relative;
		z-index: 1;
		flex: 0 0 44%;
		align-self: stretch;
	}

	.hero-sale-figure img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	/* Fade the image's inner edge into the pink background (RTL: toward
	   the text, i.e. the image's right edge). */
	.hero-sale-figure::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to right, transparent 45%, #FBE3EA 93%);
	}

	/* Dashed discount circle straddling the image / text boundary. */
	.hero-sale-badge {
		position: absolute;
		z-index: 3;
		top: 14px;
		left: 34%;
		transform: translateX(-50%);
		display: grid;
		place-items: center;
		width: 66px;
		height: 66px;
		border-radius: 50%;
		background: #fff;
		border: 1.6px dashed var(--terracotta-deep);
		color: var(--terracotta-deep);
		font-weight: 800;
		font-size: 0.78rem;
		line-height: 1.12;
		text-align: center;
		padding: 0.3rem;
		box-shadow: 0 8px 16px -6px rgb(214 48 87 / 0.4);
	}
}

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