/*
Theme Name: Matchllo v2
Theme URI: https://matchllo.com
Description: MATCHLLO store theme. Classic theme built for Elementor (page content), TranslatePress (Arabic) and standard WooCommerce templates. Header and footer menus are managed in Appearance → Menus; footer text and social links in Appearance → Customize → Matchllo.
Author: Matchllo
Version: 3.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: matchllo
Domain Path: /languages
*/

/* ===============================================================
   MATCHLLO — WordPress port of the Lovable design system.

   Token names, colour ramps, radii, type scale and spacing mirror
   src/styles.css in the reference app one-for-one, so a value can be
   traced straight back to the Tailwind utility it stands in for.

   Tailwind v4 radius scale, given --radius: 1.25rem (20px):
     rounded-sm 8 · md 12 · lg 20 · xl 28 · 2xl 36 · 3xl 48
   Tailwind type scale used here:
     xs 12 · sm 14 · base 16 · lg 18 · xl 20 · 2xl 24 · 3xl 30
     4xl 36 · 5xl 48 · 6xl 60
   =============================================================== */

/* ---------------------------------------------------------------
   1. Design tokens — the 11-step ramps from the reference
   --------------------------------------------------------------- */
:root {
	/* text — deep charcoal */
	--m-text-50:  oklch(.97 .006 60);
	--m-text-100: oklch(.93 .008 55);
	--m-text-200: oklch(.86 .011 50);
	--m-text-300: oklch(.75 .014 45);
	--m-text-400: oklch(.62 .018 42);
	--m-text-500: oklch(.5 .022 40);
	--m-text-600: oklch(.41 .024 38);
	--m-text-700: oklch(.33 .026 36);
	--m-text-800: oklch(.26 .026 34);
	--m-text-900: oklch(.19 .024 32);
	--m-text-950: oklch(.13 .02 30);

	/* background — warm cream to charcoal-espresso */
	--m-bg-50:  oklch(.985 .012 92);
	--m-bg-100: oklch(.965 .018 92);
	--m-bg-200: oklch(.94 .024 90);
	--m-bg-300: oklch(.9 .03 88);
	--m-bg-400: oklch(.82 .036 84);
	--m-bg-500: oklch(.7 .04 80);
	--m-bg-600: oklch(.56 .042 70);
	--m-bg-700: oklch(.42 .04 58);
	--m-bg-800: oklch(.3 .034 50);
	--m-bg-900: oklch(.21 .028 46);
	--m-bg-950: oklch(.15 .022 44);

	/* primary — matcha green */
	--m-primary-50:  oklch(.97 .03 128);
	--m-primary-100: oklch(.94 .055 128);
	--m-primary-200: oklch(.89 .085 129);
	--m-primary-300: oklch(.83 .11 130);
	--m-primary-400: oklch(.74 .13 131);
	--m-primary-500: oklch(.65 .14 132);
	--m-primary-600: oklch(.55 .125 133);
	--m-primary-700: oklch(.45 .1 134);
	--m-primary-800: oklch(.36 .08 135);
	--m-primary-900: oklch(.28 .062 136);
	--m-primary-950: oklch(.2 .045 137);

	/* secondary — torii vermilion */
	--m-secondary-50:  oklch(.97 .018 28);
	--m-secondary-100: oklch(.93 .04 28);
	--m-secondary-200: oklch(.87 .075 28);
	--m-secondary-300: oklch(.79 .115 28);
	--m-secondary-400: oklch(.71 .16 28);
	--m-secondary-500: oklch(.62 .2 28);
	--m-secondary-600: oklch(.54 .19 28);
	--m-secondary-700: oklch(.45 .16 28);
	--m-secondary-800: oklch(.36 .125 28);
	--m-secondary-900: oklch(.28 .095 28);
	--m-secondary-950: oklch(.2 .07 28);

	/* accent — lantern gold */
	--m-accent-50:  oklch(.98 .022 85);
	--m-accent-100: oklch(.95 .045 85);
	--m-accent-200: oklch(.91 .08 84);
	--m-accent-300: oklch(.86 .11 83);
	--m-accent-400: oklch(.8 .13 82);
	--m-accent-500: oklch(.73 .14 78);
	--m-accent-600: oklch(.63 .13 72);
	--m-accent-700: oklch(.52 .11 66);
	--m-accent-800: oklch(.41 .088 60);
	--m-accent-900: oklch(.32 .068 56);
	--m-accent-950: oklch(.23 .05 52);

	/* Legacy aliases — kept so older selectors keep resolving. */
	--m-ink:           var(--m-text-950);
	--m-ink-900:       var(--m-text-900);
	--m-cream:         var(--m-bg-50);
	--m-cream-200:     var(--m-bg-200);
	--m-night:         var(--m-bg-950);
	--m-night-900:     var(--m-bg-900);
	--m-matcha-300:    var(--m-primary-300);
	--m-matcha-400:    var(--m-primary-400);
	--m-matcha-500:    var(--m-primary-500);
	--m-matcha-700:    var(--m-primary-700);
	--m-matcha-800:    var(--m-primary-800);
	--m-matcha-950:    var(--m-primary-950);
	--m-vermilion:     var(--m-secondary-500);
	--m-vermilion-700: var(--m-secondary-700);
	--m-amber-200:     var(--m-accent-200);
	--m-amber-400:     var(--m-accent-400);
	--m-secondary-300-alias: var(--m-secondary-300);

	/* Type */
	--m-font-display: "Mochiy Pop One", "Zen Kaku Gothic New", sans-serif;
	--m-font-body:    "Zen Kaku Gothic New", system-ui, sans-serif;
	--m-font-round:   "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;

	/* Radii — Tailwind v4 scale from --radius: 1.25rem */
	--m-radius:    1.25rem;  /* rounded-lg  20px */
	--m-radius-sm: .5rem;    /* rounded-sm   8px */
	--m-radius-md: .75rem;   /* rounded-md  12px */
	--m-radius-xl: 1.75rem;  /* rounded-xl  28px */
	--m-radius-2xl: 2.25rem; /* rounded-2xl 36px */
	--m-radius-3xl: 3rem;    /* rounded-3xl 48px */

	/* Brand gradients, glows, textures — verbatim from the reference */
	--m-gradient-matcha: linear-gradient(135deg, var(--m-primary-700), var(--m-primary-400) 55%, var(--m-accent-300));
	--m-gradient-night:
		radial-gradient(120% 90% at 20% 0%, color-mix(in oklab, var(--m-primary-800) 70%, transparent), transparent 60%),
		linear-gradient(160deg, var(--m-bg-950), var(--m-primary-950) 60%, var(--m-text-950));
	--m-gradient-lantern: radial-gradient(circle at 50% 40%, var(--m-accent-200), var(--m-secondary-500) 65%, var(--m-secondary-700));
	--m-glow-matcha:
		0 0 0 1px color-mix(in oklab, var(--m-primary-400) 45%, transparent),
		0 0 24px color-mix(in oklab, var(--m-primary-400) 55%, transparent),
		0 0 64px color-mix(in oklab, var(--m-primary-500) 30%, transparent);
	--m-glow-vermilion:
		0 0 22px color-mix(in oklab, var(--m-secondary-500) 60%, transparent),
		0 0 60px color-mix(in oklab, var(--m-secondary-600) 35%, transparent);
	--m-shadow-shoji: 0 24px 60px -24px color-mix(in oklab, var(--m-text-950) 45%, transparent);
	--m-shadow-hard:  6px 6px 0 0 var(--m-text-950);
	--m-ease-spring:  cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------------------------------------------------------------
   2. Base — mirrors the reference @layer base
   --------------------------------------------------------------- */
body {
	background: var(--m-bg-50);
	color: var(--m-text-900);
	font-family: var(--m-font-body);
	-webkit-font-smoothing: antialiased;
}
::selection { background: var(--m-primary-300); color: var(--m-text-950); }
section[id] { scroll-margin-top: 6rem; }
html, body { overflow-x: clip; }

/* ---------------------------------------------------------------
   3. Reference utilities (@utility blocks in the Tailwind source)
   --------------------------------------------------------------- */
.m-neon-text {
	text-shadow:
		0 0 6px color-mix(in oklab, var(--m-primary-300) 80%, transparent),
		0 0 22px color-mix(in oklab, var(--m-primary-400) 65%, transparent),
		0 0 48px color-mix(in oklab, var(--m-primary-500) 45%, transparent);
}
.m-neon-text-red {
	text-shadow:
		0 0 6px color-mix(in oklab, var(--m-secondary-300) 85%, transparent),
		0 0 24px color-mix(in oklab, var(--m-secondary-500) 70%, transparent);
}
.m-glow-ring { box-shadow: var(--m-glow-matcha); }
.m-ink-edge { border: 2px solid var(--m-text-950); box-shadow: var(--m-shadow-hard); }
.m-washi {
	background-image:
		radial-gradient(color-mix(in oklab, var(--m-text-950) 5%, transparent) 1px, transparent 1px),
		radial-gradient(color-mix(in oklab, var(--m-text-950) 4%, transparent) 1px, transparent 1px);
	background-size: 14px 14px, 22px 22px;
	background-position: 0 0, 7px 11px;
}
.m-vertical-jp { writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .25em; }

/* Keyframes — same names, durations and easings as the reference */
@keyframes m-float  { 0%, 100% { transform: translateY(0); }   50% { transform: translateY(-14px); } }
@keyframes m-sway   { 0%, 100% { transform: rotate(-3deg); }   50% { transform: rotate(3deg); } }
@keyframes m-flicker {
	0%, 100% { opacity: 1; filter: brightness(1); }
	42% { opacity: .86; filter: brightness(1.25); }
	48% { opacity: .6; }
	52% { opacity: 1; }
}
@keyframes m-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes m-drift {
	from { transform: translate3d(0, -10%, 0) rotate(0deg); }
	to   { transform: translate3d(-6%, 110%, 0) rotate(220deg); }
}

.m-anim-float   { animation: m-float 7s ease-in-out infinite; }
.m-anim-sway    { animation: m-sway 5s ease-in-out infinite; }
.m-anim-flicker { animation: m-flicker 3.4s ease-in-out infinite; }
.m-anim-drift   { animation: m-drift 18s linear infinite; }

@media (prefers-reduced-motion: reduce) {
	.m-anim-float, .m-anim-sway, .m-anim-flicker, .m-anim-drift, .m-marquee__track {
		animation: none !important;
	}
}

/* ---------------------------------------------------------------
   4. Layout — max-w-6xl (1152px) with px-5 / sm:px-8
   --------------------------------------------------------------- */
.m-wrap {
	max-width: 1152px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	box-sizing: border-box;
}
@media (min-width: 640px) { .m-wrap { padding-inline: 2rem; } }

/* py-20 sm:py-28 */
.m-section { padding-block: 5rem; position: relative; }
@media (min-width: 640px) { .m-section { padding-block: 7rem; } }

.m-section--dark {
	background: var(--m-bg-950);
	color: var(--m-bg-50);
	overflow: hidden;
}
.m-section--dark::before {
	content: "";
	position: absolute; inset: 0;
	background: var(--m-gradient-night);
	opacity: .7;
	pointer-events: none;
}
.m-section--dark > * { position: relative; z-index: 1; }
.m-section--dark h2, .m-section--dark h3 { color: var(--m-bg-50); }

/* Sections own their vertical rhythm; WP's block gap would add cream strips. */
.wp-site-blocks > main { margin-block-start: 0 !important; }
.wp-site-blocks > main > * { margin-block: 0 !important; }

/* ---------------------------------------------------------------
   5. Typography
   --------------------------------------------------------------- */
.m-display,
.wp-site-blocks h1, .wp-site-blocks h2, .wp-site-blocks h3 {
	font-family: var(--m-font-display);
	font-weight: 400;
	line-height: 1.1;
}
.m-kana, .m-round { font-family: var(--m-font-round); }

/* Section heading — text-4xl sm:text-6xl */
.m-section h2.m-display { font-size: 2.25rem; margin: .5rem 0 0; }
@media (min-width: 640px) { .m-section h2.m-display { font-size: 3.75rem; } }

/* Eyebrow — font-round text-sm tracking-[0.3em] uppercase */
.m-eyebrow {
	font-family: var(--m-font-round);
	font-size: .875rem;
	line-height: 1.25rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--m-secondary-600);
	margin: 0;
}
.m-section--dark .m-eyebrow {
	color: var(--m-primary-300);
	text-shadow:
		0 0 6px color-mix(in oklab, var(--m-primary-300) 80%, transparent),
		0 0 22px color-mix(in oklab, var(--m-primary-400) 65%, transparent),
		0 0 48px color-mix(in oklab, var(--m-primary-500) 45%, transparent);
}

.m-section__lede {
	max-width: 24rem;
	font-size: .875rem;
	line-height: 1.25rem;
	color: var(--m-text-600);
	margin: 0;
}
.m-section--dark .m-section__lede { color: color-mix(in oklab, var(--m-bg-200) 80%, transparent); }

/* ---------------------------------------------------------------
   6. Header — fixed pill bar floating over the hero
   Reference: header.fixed.inset-x-0.top-0.px-3.pt-3 sm:px-6 sm:pt-5
   --------------------------------------------------------------- */
.wp-site-blocks > header.wp-block-template-part:has(.m-header) {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 50;
	padding: .75rem .75rem 0;
	pointer-events: none;
}
@media (min-width: 640px) {
	.wp-site-blocks > header.wp-block-template-part:has(.m-header) { padding: 1.25rem 1.5rem 0; }
}
.wp-site-blocks > header.wp-block-template-part:has(.m-header) > * { pointer-events: auto; }

/* nav.mx-auto.max-w-6xl.rounded-2xl.border-2.border-text-950/80 */
.m-header {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-inline: auto;
	max-width: 72rem;
	padding: .5rem .75rem;
	border: 2px solid color-mix(in oklab, var(--m-text-950) 80%, transparent);
	border-radius: var(--m-radius-2xl);
	background: color-mix(in oklab, var(--m-bg-950) 45%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: background .5s ease, box-shadow .5s ease, backdrop-filter .5s ease;
	box-sizing: border-box;
}
@media (min-width: 640px) { .m-header { padding-inline: 1.25rem; } }

/* scrolled: bg-background-950/85 + backdrop-blur-xl + shadow-shoji */
.m-header.is-scrolled {
	background: color-mix(in oklab, var(--m-bg-950) 85%, transparent);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	box-shadow: var(--m-shadow-shoji);
}

.m-header a { text-decoration: none; }

/* Logo mark — h-9 w-9 sm:h-11 sm:w-11, glows on hover */
.m-logo { display: flex; align-items: center; }
.m-logo img {
	height: 2.25rem; width: 2.25rem;
	display: block;
	transition: transform .3s ease, filter .3s ease;
}
@media (min-width: 640px) { .m-logo img { height: 2.75rem; width: 2.75rem; } }
.m-logo:hover img {
	transform: scale(1.1);
	filter: drop-shadow(0 0 10px var(--m-primary-400)) drop-shadow(0 0 26px var(--m-primary-500));
}

/* Nav — ml-auto, gap-1, text-sm font-semibold text-background-100 */
.m-nav {
	display: flex;
	align-items: center;
	gap: .25rem;
	margin-left: auto;
}
.m-nav a {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: .375rem;
	padding: .5rem .75rem;
	border-radius: var(--m-radius-xl);
	font-size: .875rem;
	font-weight: 600;
	color: var(--m-bg-100);
	transition: color .2s ease;
}
.m-nav a:hover { color: var(--m-primary-200); }
.m-nav-jp {
	font-family: var(--m-font-round);
	font-size: 11px;
	color: color-mix(in oklab, var(--m-accent-300) 70%, transparent);
}
/* Underline that wipes in from the left on hover */
.m-nav a::after {
	content: "";
	position: absolute;
	left: .75rem; right: .75rem; bottom: -2px;
	height: 2px;
	background: var(--m-primary-300);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
}
.m-nav a:hover::after { transform: scaleX(1); box-shadow: var(--m-glow-matcha); }

/* Action buttons — rounded-xl border-2 border-text-950 */
.m-header__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
@media (min-width: 768px) { .m-header__actions { margin-left: 1rem; } }

.m-header__login,
.m-header__cart {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .75rem;
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-xl);
	font-size: .875rem;
	font-weight: 700;
	transition: transform .2s var(--m-ease-spring), box-shadow .2s ease, color .2s ease;
}
.m-header__login {
	background: color-mix(in oklab, var(--m-bg-950) 60%, transparent);
	color: var(--m-bg-100);
}
.m-header__login:hover {
	transform: translateY(-2px);
	color: var(--m-primary-200);
	box-shadow: var(--m-glow-matcha);
}
.m-header__cart {
	background: var(--m-primary-400);
	color: var(--m-text-950) !important;
}
.m-header__cart:hover { transform: translateY(-2px); box-shadow: var(--m-glow-matcha); }
.m-header__cart .m-cart-count { font-variant-numeric: tabular-nums; }

/* Language switcher — a two-up pill group sharing the header's outline
   language, sitting just before the account and cart buttons. */
.m-langs {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border: 2px solid color-mix(in oklab, var(--m-bg-100) 35%, transparent);
	border-radius: 999px;
}
.m-lang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.85rem;
	padding: .2rem .6rem;
	white-space: nowrap;
	border-radius: 999px;
	font-family: var(--m-font-round);
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.4;
	color: color-mix(in oklab, var(--m-bg-100) 75%, transparent);
	transition: color .25s ease, background .25s ease;
}
.m-lang:hover { color: var(--m-bg-50); }
.m-lang.is-active {
	background: var(--m-primary-400);
	color: var(--m-text-950);
}
/* Arabic script reads small at the Latin size; nudge it up a little. */
.m-lang[lang="ar"] { font-size: .85rem; }

/* Below sm the pill group keeps its place but loses the outer ring, so the
   header bar does not run out of room next to the cart. */
@media (max-width: 480px) {
	.m-langs { border-color: transparent; padding: 0; }
	.m-lang { min-width: 1.5rem; padding: .2rem .4rem; font-size: .72rem; }
	.m-lang[lang="ar"] { font-size: .78rem; }
}

/* The "Login" word is hidden below sm in the reference. */
.m-header__login span { display: none; }
@media (min-width: 640px) { .m-header__login span { display: inline; } }

/* Nav collapses to the action buttons on small screens (md breakpoint). */
@media (max-width: 767px) { .m-nav { display: none; } }

/* Inner pages have no dark hero, so they must clear the fixed bar.
   This is the safe default: every page that is not the front page reserves
   the height of the floating pill bar. */
body:not(.home) .wp-site-blocks { padding-top: 6.5rem; }
@media (max-width: 860px) {
	body:not(.home) .wp-site-blocks { padding-top: 5.5rem; }
}

/* Templates that open with the dark banner (.m-pagehead) or the hero already
   carry their own clearance in the banner's padding-top, so they cancel the
   offset and let the translucent bar float over the dark art as designed.

   This keys off the markup instead of a body-class allowlist on purpose: the
   old allowlist zeroed the offset for every WooCommerce page, so checkout,
   order-received, lost-password and the account sub-pages — none of which
   render a banner — slid under the bar. Anything without a banner now keeps
   the offset by default and cannot be hidden. */
body:not(.home) .wp-site-blocks:has(.m-pagehead),
body:not(.home) .wp-site-blocks:has(.m-hero) { padding-top: 0; }

/* WP shifts <html> down for the admin bar; the fixed header must follow. */
.admin-bar .wp-site-blocks > header.wp-block-template-part:has(.m-header) { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part:has(.m-header) { top: 46px; }
}

/* ---------------------------------------------------------------
   7. Hero — min-h-[100svh], items-end, sm:items-center
   --------------------------------------------------------------- */
.m-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: 100svh;
	overflow: hidden;
	background: var(--m-text-950);
	padding-top: 8rem;
	padding-bottom: 4rem;
	box-sizing: border-box;
}
@media (min-width: 640px) {
	.m-hero { align-items: center; padding-bottom: 6rem; }
}
.admin-bar .m-hero { min-height: calc(100svh - 32px); }
@media screen and (max-width: 782px) {
	.admin-bar .m-hero { min-height: calc(100svh - 46px); }
}

/* Artwork, scaled 1.08 as in the reference parallax layer */
.m-hero__bg {
	position: absolute; inset: 0;
	z-index: -20;
	background-size: cover;
	background-position: center;
	transform: scale(1.08);
}

/* gradient-night at 60%, then the left-to-right darkening pass */
.m-hero::before,
.m-hero::after {
	content: "";
	position: absolute; inset: 0;
	z-index: -10;
	pointer-events: none;
}
.m-hero::before { background: var(--m-gradient-night); opacity: .6; }
.m-hero::after {
	background: linear-gradient(to right,
		color-mix(in oklab, var(--m-bg-950) 85%, transparent),
		color-mix(in oklab, var(--m-bg-950) 45%, transparent),
		transparent);
}

/* Floating lanterns */
.m-lantern {
	position: absolute;
	z-index: -10;
	border-radius: 999px;
	background: var(--m-gradient-lantern);
	box-shadow: var(--m-glow-vermilion);
	filter: blur(1px);
	pointer-events: none;
	animation: m-float 7s ease-in-out infinite;
}
.m-lantern--1 { left:  8%; top: 22%; width: 54px; height: 73px;  animation-delay: 0s; }
.m-lantern--2 { left: 23%; top: 12%; width: 38px; height: 51px;  animation-delay: .8s; }
.m-lantern--3 { left: 78%; top: 18%; width: 62px; height: 84px;  animation-delay: .4s; }
.m-lantern--4 { left: 91%; top: 34%; width: 34px; height: 46px;  animation-delay: 1.4s; }

.m-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 72rem;
	margin-inline: auto;
	padding-inline: 1.25rem;
	box-sizing: border-box;
}
@media (min-width: 640px) { .m-hero__inner { padding-inline: 2rem; } }
.m-hero__col { max-width: 42rem; }

/* Badge — rounded-full border-2 border-primary-300/60 bg-primary-950/60 */
.m-badge {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .375rem 1rem;
	border: 2px solid color-mix(in oklab, var(--m-primary-300) 60%, transparent);
	border-radius: 999px;
	background: color-mix(in oklab, var(--m-primary-950) 60%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--m-primary-200);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	margin: 0;
}

/* Kana — mt-6, font-round, text-3xl sm:text-5xl, primary-200, neon + flicker */
.m-hero__kana {
	font-family: var(--m-font-round);
	font-size: 1.875rem;
	line-height: 1.2;
	color: var(--m-primary-200);
	margin: 1.5rem 0 0;
}
@media (min-width: 640px) { .m-hero__kana { font-size: 3rem; } }

/* Wordmark — mt-1, w-[62vw] max-w-xl, neon drop-shadows */
.m-hero__logo {
	display: block;
	width: 62vw;
	max-width: 36rem;
	height: auto;
	margin: .25rem 0 0;
	filter:
		drop-shadow(0 0 6px color-mix(in oklab, var(--m-primary-300) 85%, transparent))
		drop-shadow(0 0 22px color-mix(in oklab, var(--m-primary-400) 70%, transparent))
		drop-shadow(0 0 48px color-mix(in oklab, var(--m-primary-500) 45%, transparent));
}

/* Tagline — mt-4, text-2xl sm:text-4xl, accent-300, red neon */
.m-hero__tagline {
	display: block;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--m-accent-300);
	margin: 1rem 0 0;
}
@media (min-width: 640px) { .m-hero__tagline { font-size: 2.25rem; } }

/* Lede — mt-6, max-w-lg, text-base sm:text-lg, background-200 */
.m-hero p.m-hero__lede {
	max-width: 32rem;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--m-bg-200);
	margin: 1.5rem 0 0;
}
@media (min-width: 640px) { .m-hero p.m-hero__lede { font-size: 1.125rem; } }

/* CTA row — mt-9, gap-3 */
.m-hero__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin-top: 2.25rem;
}

/* Vertical JP rail, bottom right, lg and up */
.m-hero__rail {
	position: absolute;
	right: 1.5rem;
	bottom: .5rem;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	pointer-events: none;
}
@media (min-width: 1024px) { .m-hero__rail { display: flex; } }
.m-hero__rail span {
	writing-mode: vertical-rl;
	text-orientation: upright;
	letter-spacing: .25em;
	font-family: var(--m-font-round);
	font-size: .875rem;
	color: color-mix(in oklab, var(--m-bg-200) 80%, transparent);
}
.m-hero__rail svg { color: var(--m-primary-300); animation: m-float 7s ease-in-out infinite; }

/* ---------------------------------------------------------------
   8. Buttons — the reference uses rounded-2xl ink-edge slabs, not pills
   --------------------------------------------------------------- */
a.m-btn, .m-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-family: var(--m-font-display);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	border-radius: var(--m-radius-2xl);
	padding: 1rem 1.75rem;
	transition: transform .2s var(--m-ease-spring), box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
a.m-btn--solid, .m-btn--matcha .wp-block-button__link {
	background: var(--m-primary-400);
	color: var(--m-text-950);
	border: 2px solid var(--m-text-950);
}
a.m-btn--solid:hover, .m-btn--matcha .wp-block-button__link:hover {
	transform: translateY(-4px);
	box-shadow: var(--m-glow-matcha);
}
a.m-btn--outline, .m-btn--ghost .wp-block-button__link {
	background: transparent;
	color: var(--m-bg-50);
	border: 2px solid color-mix(in oklab, var(--m-bg-100) 70%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
a.m-btn--outline:hover, .m-btn--ghost .wp-block-button__link:hover {
	border-color: var(--m-secondary-400);
	color: var(--m-secondary-300);
}

/* ---------------------------------------------------------------
   9. Marquee — py-3, border-y-2, tracking-[0.25em], 26s
   --------------------------------------------------------------- */
.m-marquee {
	position: relative;
	z-index: 10;
	background: var(--m-secondary-500);
	color: var(--m-bg-50);
	padding-block: .75rem;
	overflow: hidden;
	white-space: nowrap;
	border-block: 2px solid var(--m-text-950);
}
.m-marquee__track {
	display: inline-flex;
	gap: 2.5rem;
	padding-right: 2.5rem;
	animation: m-marquee 26s linear infinite;
	font-family: var(--m-font-display);
	font-size: .875rem;
	letter-spacing: .25em;
	text-transform: uppercase;
}
.m-marquee__track > span {
	display: inline-flex;
	align-items: center;
	gap: 2.5rem;
	flex-shrink: 0;
}
@media (min-width: 640px) { .m-marquee__track { font-size: 1rem; } }
.m-marquee__track em {
	font-style: normal;
	color: var(--m-accent-200);
	margin-left: 2.5rem;
}

/* ---------------------------------------------------------------
   10. Shop — bg-background-100 + washi
   --------------------------------------------------------------- */
.m-products {
	background: var(--m-bg-100);
	background-image:
		radial-gradient(color-mix(in oklab, var(--m-text-950) 5%, transparent) 1px, transparent 1px),
		radial-gradient(color-mix(in oklab, var(--m-text-950) 4%, transparent) 1px, transparent 1px);
	background-size: 14px 14px, 22px 22px;
	background-position: 0 0, 7px 11px;
}

/* Heading left, lede right — flex-wrap items-end justify-between gap-4 */
.m-products__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
}

/* grid mt-12 gap-6 sm:grid-cols-2 lg:grid-cols-3 */
.m-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-top: 3rem;
}
@media (min-width: 640px)  { .m-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .m-grid { grid-template-columns: repeat(3, 1fr); } }

/* Card — rounded-3xl, ink edge, image bleeds to the border */
.m-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--m-bg-50);
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-3xl);
	transition: transform .3s var(--m-ease-spring), box-shadow .3s ease;
}
.m-card:hover { transform: translateY(-8px); box-shadow: var(--m-shadow-hard); }
/* The reference nudges the 2nd and 3rd card off-axis. */
.m-card:nth-child(2) { rotate: -.6deg; }
.m-card:nth-child(3) { rotate: .5deg; }

.m-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-bottom: 2px solid var(--m-text-950);
	background: var(--m-accent-100);
}
.m-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform .5s ease;
}
.m-card:hover .m-card__media img { transform: scale(1.1) rotate(1deg); }

/* Tag pill, top-left of the artwork */
.m-ribbon {
	position: absolute;
	top: .75rem;
	left: .75rem;
	z-index: 3;
	padding: .25rem .75rem;
	border: 2px solid var(--m-text-950);
	border-radius: 999px;
	background: var(--m-secondary-500);
	color: var(--m-bg-50);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* Vertical JP, top-right of the artwork */
.m-card__jp {
	position: absolute;
	top: .75rem;
	right: .75rem;
	z-index: 3;
	margin: 0;
	writing-mode: vertical-rl;
	text-orientation: upright;
	letter-spacing: .25em;
	font-family: var(--m-font-round);
	font-size: .75rem;
	color: color-mix(in oklab, var(--m-text-900) 70%, transparent);
}

.m-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: .75rem;
	padding: 1.25rem;
}
.m-card__title {
	font-family: var(--m-font-display);
	font-size: 1.5rem !important;
	line-height: 1.2;
	margin: 0 !important;
}
.m-card__title a { color: var(--m-text-950); text-decoration: none; }
.m-card__desc {
	font-size: .875rem;
	line-height: 1.5;
	color: var(--m-text-600);
	margin: 0;
}
.m-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: .5rem;
}
.m-card__price {
	font-family: var(--m-font-display);
	font-size: 1.5rem;
	color: var(--m-primary-700);
	font-variant-numeric: tabular-nums;
}
.m-card__price .woocommerce-Price-amount,
.m-card__price bdi { color: inherit; }

/* Add button — rounded-xl ink edge on primary-400 */
.m-card__add {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	padding: .5rem 1rem;
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-xl);
	background: var(--m-primary-400);
	color: var(--m-text-950);
	font-size: .875rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .2s var(--m-ease-spring), box-shadow .2s ease;
}
.m-card__add:hover {
	transform: translateY(-2px);
	box-shadow: var(--m-glow-matcha);
	color: var(--m-text-950);
}

/* ---------------------------------------------------------------
   11. Ritual — dark panel, drifting motes, rounded-3xl step cards
   --------------------------------------------------------------- */
.m-mote {
	position: absolute;
	top: 0;
	width: .75rem;
	height: .75rem;
	border-radius: 999px;
	background: color-mix(in oklab, var(--m-primary-300) 40%, transparent);
	filter: blur(2px);
	pointer-events: none;
	animation: m-drift 18s linear infinite;
}
.m-mote--1 { left: 12%; animation-delay: 0s; }
.m-mote--2 { left: 38%; animation-delay: 4s; }
.m-mote--3 { left: 64%; animation-delay: 8s; }
.m-mote--4 { left: 86%; animation-delay: 12s; }

.m-ritual h2.m-display { max-width: 42rem; }

/* grid mt-12 gap-5 sm:2 lg:4 */
.m-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin-top: 3rem;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px)  { .m-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .m-steps { grid-template-columns: repeat(4, 1fr); } }

.m-step {
	border: 2px solid var(--m-primary-800);
	border-radius: var(--m-radius-3xl);
	background: color-mix(in oklab, var(--m-primary-950) 60%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	padding: 1.5rem;
	transition: border-color .3s ease, box-shadow .3s ease;
}
.m-step:hover { border-color: var(--m-primary-400); box-shadow: var(--m-glow-matcha); }
.m-step__row { display: flex; align-items: center; justify-content: space-between; }
.m-step__num {
	font-family: var(--m-font-display);
	font-size: 1.875rem;
	line-height: 1;
	color: color-mix(in oklab, var(--m-primary-300) 60%, transparent);
	transition: color .3s ease;
}
.m-step:hover .m-step__num { color: var(--m-primary-200); }
.m-step__kanji {
	font-family: var(--m-font-round);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--m-secondary-400);
}
.m-step h3 {
	font-family: var(--m-font-display);
	font-size: 1.5rem !important;
	color: var(--m-bg-50);
	margin: 1.5rem 0 0 !important;
}
.m-step p {
	font-size: .875rem;
	line-height: 1.5;
	color: color-mix(in oklab, var(--m-bg-200) 80%, transparent) !important;
	margin: .5rem 0 0;
}

/* ---------------------------------------------------------------
   12. Origin — washi panel, aspect-4/5 mask card, stat trio
   --------------------------------------------------------------- */
.m-origin {
	background: var(--m-bg-100);
	background-image:
		radial-gradient(color-mix(in oklab, var(--m-text-950) 5%, transparent) 1px, transparent 1px),
		radial-gradient(color-mix(in oklab, var(--m-text-950) 4%, transparent) 1px, transparent 1px);
	background-size: 14px 14px, 22px 22px;
	background-position: 0 0, 7px 11px;
}
.m-origin__grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 2.5rem;
}
@media (min-width: 1024px) { .m-origin__grid { grid-template-columns: repeat(2, 1fr); } }

.m-maskcard__wrap { position: relative; }
.m-maskcard {
	display: flex;
	aspect-ratio: 4 / 5;
	width: 100%;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-3xl);
	background: var(--m-bg-50);
	padding: 2.5rem;
	box-shadow: var(--m-shadow-hard);
	box-sizing: border-box;
}
.m-maskcard img {
	width: 100%;
	max-width: 24rem;
	height: auto;
	object-fit: contain;
	animation: m-float 7s ease-in-out infinite;
}
/* Stamp — absolute -right-3 -bottom-6, rotate -4deg, animate-sway */
.m-maskcard__stamp {
	position: absolute;
	right: -.75rem;
	bottom: -1.5rem;
	padding: .75rem 1.25rem;
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-2xl);
	background: var(--m-accent-300);
	color: var(--m-text-950);
	font-family: var(--m-font-display);
	font-size: 1rem;
	white-space: nowrap;
	rotate: -4deg;
	animation: m-sway 5s ease-in-out infinite;
}
@media (min-width: 640px) { .m-maskcard__stamp { right: -1.5rem; } }

.m-origin__copy h2.m-display { font-size: 2.25rem; }
@media (min-width: 640px) { .m-origin__copy h2.m-display { font-size: 3rem; } }
.m-origin__copy > p:not(.m-eyebrow) {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--m-text-600);
	margin: 1.25rem 0 0;
}

.m-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .75rem;
	margin: 2.25rem 0 0;
}
.m-stat {
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-2xl);
	background: var(--m-bg-50);
	padding: 1rem;
	text-align: center;
	transition: transform .3s var(--m-ease-spring);
	box-sizing: border-box;
}
.m-stat:hover { transform: translateY(-4px); }
.m-stat__val {
	font-family: var(--m-font-display);
	font-size: 1.875rem;
	line-height: 1;
	color: var(--m-primary-700);
}
.m-stat__label {
	font-size: .75rem;
	font-weight: 600;
	color: var(--m-text-600);
	margin-top: .25rem;
}
.m-stat__jp {
	font-family: var(--m-font-round);
	font-size: 11px;
	color: var(--m-secondary-600);
}

/* Origin photo — the farm image fills the same framed 4/5 card. */
.m-maskcard--photo { padding: 0; overflow: hidden; }
.m-maskcard--photo img {
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	animation: none;
}
/* Quick facts carry words now ("20–25 days"), so the value runs smaller. */
.m-origin .m-stat__val { font-size: 1.35rem; line-height: 1.15; }
@media (min-width: 640px) { .m-origin .m-stat__val { font-size: 1.6rem; } }
@media (max-width: 479px) { .m-origin .m-stats { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   12b. Uji or Yame — two framed origin cards on the washi panel
   --------------------------------------------------------------- */
.m-compare { background: var(--m-bg-50); }
.m-compare h2.m-display { font-size: 2.25rem; }
@media (min-width: 640px) { .m-compare h2.m-display { font-size: 3rem; } }
.m-compare__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin-top: 2.25rem;
}
@media (min-width: 768px) { .m-compare__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
.m-compare__card {
	position: relative;
	overflow: hidden;
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-3xl);
	background: var(--m-bg-100);
	padding: 1.75rem 1.5rem;
	box-shadow: var(--m-shadow-hard);
	transition: transform .3s var(--m-ease-spring);
	box-sizing: border-box;
}
.m-compare__card:hover { transform: translateY(-4px); }
.m-compare__kanji {
	position: absolute;
	inset-inline-end: 1rem;
	top: .5rem;
	font-family: var(--m-font-round);
	font-size: 4.5rem;
	line-height: 1;
	color: color-mix(in oklab, var(--m-primary-500) 22%, transparent);
	pointer-events: none;
}
.m-compare__place {
	margin: 0;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m-secondary-600);
}
.m-compare__harvest {
	margin: .5rem 0 0;
	font-family: var(--m-font-display);
	font-size: 1.75rem;
	line-height: 1.15;
	color: var(--m-primary-700);
}
.m-compare__cultivars {
	margin: 1rem 0 0;
	font-weight: 600;
	color: var(--m-text-900);
	unicode-bidi: isolate;
}
[dir="rtl"] .m-compare__cultivars { text-align: right; }
.m-compare__notes {
	margin: .5rem 0 0;
	color: var(--m-text-600);
}

/* ---------------------------------------------------------------
   13. Club — vermilion panel with a lantern bloom
   --------------------------------------------------------------- */
.m-club {
	background: var(--m-secondary-600);
	overflow: hidden;
	text-align: center;
}
.m-club::before {
	content: "";
	position: absolute;
	top: -6rem;
	left: -4rem;
	width: 18rem;
	height: 18rem;
	border-radius: 999px;
	background: var(--m-gradient-lantern);
	opacity: .5;
	filter: blur(64px);
	pointer-events: none;
}
.m-club__inner {
	position: relative;
	z-index: 1;
	max-width: 48rem;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
/* The kana line here is the round flickering one, not a tracked eyebrow. */
.m-club .m-eyebrow {
	font-family: var(--m-font-round);
	font-size: 1.5rem;
	letter-spacing: normal;
	text-transform: none;
	color: var(--m-accent-200);
	animation: m-flicker 3.4s ease-in-out infinite;
}
@media (min-width: 640px) { .m-club .m-eyebrow { font-size: 1.875rem; } }
.m-club h2.m-display { color: var(--m-bg-50); margin-top: .75rem; }
.m-club__lede {
	max-width: 36rem;
	color: color-mix(in oklab, var(--m-bg-100) 90%, transparent);
	margin: 1rem auto 0;
}

/* form mt-9 max-w-md, stacked then inline at sm */
.m-club__form {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	margin: 2.25rem auto 0;
	width: 100%;
	max-width: 28rem;
}
@media (min-width: 640px) { .m-club__form { flex-direction: row; } }
.m-club__form input {
	flex: 1;
	padding: .75rem 1rem;
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-2xl);
	background: var(--m-bg-50);
	color: var(--m-text-900);
	font-family: inherit;
	font-size: 1rem;
	box-sizing: border-box;
}
.m-club__form input::placeholder { color: var(--m-text-400); }
.m-club__form input:focus { outline: none; box-shadow: var(--m-glow-matcha); }
.m-club__form button {
	padding: .75rem 1.5rem;
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-2xl);
	background: var(--m-primary-400);
	color: var(--m-text-950);
	font-family: var(--m-font-display);
	font-weight: 400;
	font-size: 1rem;
	cursor: pointer;
	transition: transform .2s var(--m-ease-spring), box-shadow .2s ease;
}
.m-club__form button:hover { transform: translateY(-4px); box-shadow: var(--m-glow-matcha); }
.m-club__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.m-club__note {
	margin: 2.25rem auto 0;
	padding: .75rem 1.25rem;
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-2xl);
	background: var(--m-primary-400);
	color: var(--m-text-950);
	font-weight: 600;
}
.m-club__note--error { background: var(--m-accent-200); margin-bottom: -1.25rem; }

/* ---------------------------------------------------------------
   14. Footer — gradient-night, 1.4fr/2fr split, three link columns
   --------------------------------------------------------------- */
.m-footer {
	position: relative;
	overflow: hidden;
	background: var(--m-bg-950);
	padding-top: 4rem;
	padding-bottom: 2rem;
	color: color-mix(in oklab, var(--m-bg-200) 70%, transparent);
}
.m-footer::before {
	content: "";
	position: absolute; inset: 0;
	background: var(--m-gradient-night);
	opacity: .8;
	pointer-events: none;
}
.m-footer > * { position: relative; z-index: 1; }

.m-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}
@media (min-width: 1024px) { .m-footer__grid { grid-template-columns: 1.4fr 2fr; } }

.m-footer__mark {
	height: 4rem !important;
	width: 4rem !important;
	max-width: none;
	display: block;
	animation: m-float 7s ease-in-out infinite;
}
.m-footer__tag {
	max-width: 20rem;
	font-size: .875rem;
	line-height: 1.5;
	color: color-mix(in oklab, var(--m-bg-200) 70%, transparent);
	margin: 1.25rem 0 0;
}

/* Social icon buttons — rounded-xl, 40px square, primary-900 edge */
.m-social {
	display: flex;
	align-items: center;
	gap: .75rem;
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
}
.m-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 2px solid var(--m-primary-900);
	border-radius: var(--m-radius-xl);
	color: color-mix(in oklab, var(--m-bg-200) 80%, transparent);
	transition: transform .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.m-social a:hover {
	transform: translateY(-2px);
	border-color: var(--m-primary-300);
	color: var(--m-primary-300);
	box-shadow: var(--m-glow-matcha);
}

.m-footer__cols {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}
@media (min-width: 640px) { .m-footer__cols { grid-template-columns: repeat(3, 1fr); } }
.m-footer__cols h3 {
	font-family: var(--m-font-display);
	font-size: .875rem !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--m-primary-300);
	margin: 0 !important;
	text-shadow:
		0 0 6px color-mix(in oklab, var(--m-primary-300) 80%, transparent),
		0 0 22px color-mix(in oklab, var(--m-primary-400) 65%, transparent),
		0 0 48px color-mix(in oklab, var(--m-primary-500) 45%, transparent);
}
.m-footer__cols ul { list-style: none; margin: 1rem 0 0; padding: 0; }
.m-footer__cols li + li { margin-top: .5rem; }
.m-footer a {
	color: color-mix(in oklab, var(--m-bg-200) 80%, transparent);
	text-decoration: none;
	font-size: .875rem;
	transition: color .2s ease;
}
.m-footer__cols a:hover { color: var(--m-secondary-300); }

.m-footer__bar {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--m-primary-900);
	font-size: .75rem;
	color: color-mix(in oklab, var(--m-bg-300) 60%, transparent);
}
@media (min-width: 640px) { .m-footer__bar { flex-direction: row; } }
.m-footer__bar p { margin: 0; }
.m-footer__bar .m-footer__jp {
	font-family: var(--m-font-round);
	color: color-mix(in oklab, var(--m-primary-300) 70%, transparent);
}

/* Copyright bar: copyright + kana strapline on one side, the three legal
   links on the other. Flex row order flips on its own under dir="rtl", so
   Arabic mirrors without an rtl.css override. Stacks and centres on phones;
   the pipes are decorative and hidden from assistive tech. */
.m-footer__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .25rem 1rem;
}
.m-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .4rem .6rem;
	font-size: .78rem;
}
.m-footer__legal a {
	color: color-mix(in oklab, var(--m-bg-300) 78%, transparent);
	text-decoration: none;
	transition: color .2s ease;
}
.m-footer__legal a:hover,
.m-footer__legal a:focus-visible { color: var(--m-primary-300); }
.m-footer__legal span {
	color: color-mix(in oklab, var(--m-bg-300) 35%, transparent);
	user-select: none;
}
@media (min-width: 640px) {
	.m-footer__meta { justify-content: flex-start; }
	.m-footer__legal { justify-content: flex-end; }
}

/* ---------------------------------------------------------------
   15. Page head — dark banner on shop / product / cart templates
   --------------------------------------------------------------- */
.m-pagehead {
	position: relative;
	background: var(--m-bg-950);
	color: var(--m-bg-50);
	padding-top: 9.5rem;
	padding-bottom: 3.5rem;
	overflow: hidden;
}
.m-pagehead::before {
	content: "";
	position: absolute; inset: 0;
	background: var(--m-gradient-night);
	opacity: .8;
	pointer-events: none;
}
.m-pagehead > * { position: relative; z-index: 1; }
.m-pagehead__title { color: var(--m-bg-50); margin: 0 0 .9rem; }
.m-pagehead__lede {
	color: color-mix(in oklab, var(--m-bg-200) 80%, transparent);
	max-width: 56ch;
	margin: 0 0 1.4rem;
}
@media (max-width: 860px) { .m-pagehead { padding-top: 8rem; } }

.m-crumbs {
	display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
	font-size: .85rem;
	color: var(--m-text-400);
}
.m-crumbs a { color: var(--m-primary-400); text-decoration: none; }
.m-crumbs a:hover { text-decoration: underline; }
.m-crumbs span[aria-hidden] { color: var(--m-accent-400); font-size: .6rem; }
.m-crumbs__current { color: var(--m-bg-50); }

.m-resultcount {
	font-family: var(--m-font-round);
	font-size: .875rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--m-secondary-600);
	margin: 0 0 1.5rem;
}
/* On the shop archive the grid follows the result count, which already
   carries the spacing. Scoped to that sibling so the front page keeps
   its mt-12 gap under the section heading. */
.m-products .m-resultcount + .m-grid { margin-top: 0; }
.m-empty { font-size: 1.1rem; color: var(--m-text-500); }

/* Pagination — rounded-xl ink edges, matching the button language */
.m-pagination { display: flex; justify-content: center; margin-top: 3rem; }
.m-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px;
	margin: 0 .25rem;
	padding: 0 .75rem;
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-xl);
	background: var(--m-bg-50);
	color: var(--m-text-950);
	font-weight: 700;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.m-pagination .page-numbers.current,
.m-pagination .page-numbers:hover { background: var(--m-text-950); color: var(--m-bg-50); }

/* ---------------------------------------------------------------
   16. Single product
   --------------------------------------------------------------- */
.m-single__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
@media (max-width: 860px) { .m-single__grid { grid-template-columns: 1fr; } }

.m-single__media {
	position: relative;
	overflow: hidden;
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-3xl);
	background: var(--m-accent-100);
	box-shadow: var(--m-shadow-hard);
}
.m-single__media img { width: 100%; height: auto; display: block; }

.m-single__jp {
	font-family: var(--m-font-round);
	color: var(--m-secondary-600);
	letter-spacing: .3em;
	text-transform: uppercase;
	font-size: .875rem;
	margin: 0 0 .5rem;
}
.m-single__title { margin: 0 0 .8rem; }
.m-single__price {
	font-family: var(--m-font-display);
	font-size: 2rem;
	color: var(--m-primary-700);
	margin-bottom: 1rem;
	font-variant-numeric: tabular-nums;
}
.m-single__price .woocommerce-Price-amount,
.m-single__price bdi { color: inherit; }
.m-single__short { font-size: 1.05rem; color: var(--m-text-600); margin: 0 0 1.8rem; }

/* Woo's add-to-cart form, restyled to the ink-edge language */
.m-single__cart form.cart { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 0 0 2rem; }
.m-single__cart .quantity { display: inline-flex; }
.m-single__cart .quantity input[type="number"] {
	width: 84px; height: 52px;
	padding: 0 .5rem 0 .9rem;
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-xl);
	background: var(--m-bg-50);
	color: var(--m-text-950);
	font-family: inherit; font-weight: 700; font-size: 1rem;
	box-sizing: border-box;
}
.m-single__cart button.single_add_to_cart_button {
	height: 52px;
	padding: 0 2rem;
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-xl);
	background: var(--m-primary-400);
	color: var(--m-text-950);
	font-family: var(--m-font-display); font-weight: 400; font-size: 1rem;
	cursor: pointer;
	transition: transform .2s var(--m-ease-spring), box-shadow .2s ease;
}
.m-single__cart button.single_add_to_cart_button:hover {
	transform: translateY(-2px);
	box-shadow: var(--m-glow-matcha);
}

.m-single__meta { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--m-bg-200); }
.m-single__meta li {
	display: flex; justify-content: space-between; gap: 1rem;
	padding: .8rem 0;
	border-bottom: 1.5px solid var(--m-bg-200);
	font-size: .92rem;
}
.m-single__meta span { color: var(--m-text-500); }
.m-single__meta strong { font-weight: 700; text-align: right; }
.m-single__meta a { color: var(--m-primary-700); }

.m-single__body { margin-top: clamp(3rem, 6vw, 4.5rem); max-width: 760px; }
.m-single__desc p { margin: 0 0 1rem; color: var(--m-text-600); }

/* Related products sit on the dark panel */
.m-card--dark {
	background: color-mix(in oklab, var(--m-primary-950) 60%, transparent);
	border-color: var(--m-primary-800);
	box-shadow: none;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.m-card--dark:hover { box-shadow: var(--m-glow-matcha); transform: translateY(-8px); }
.m-card--dark .m-card__media { border-bottom-color: var(--m-primary-800); }
.m-card--dark .m-card__title a { color: var(--m-bg-50); }
.m-card--dark .m-card__desc { color: color-mix(in oklab, var(--m-bg-200) 80%, transparent); }
.m-card--dark .m-card__price { color: var(--m-primary-300); }

/* ---------------------------------------------------------------
   17. Woo shortcode / archive grid inherits the card treatment
   --------------------------------------------------------------- */
.woocommerce .products ul, .woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	max-width: 1152px;
	margin-inline: auto !important;
	padding-inline: 1.25rem;
	list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	overflow: hidden;
	background: var(--m-bg-50);
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-3xl);
	padding: 0 0 1.25rem;
	transition: transform .3s var(--m-ease-spring), box-shadow .3s ease;
	position: relative;
	text-align: left;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-8px);
	box-shadow: var(--m-shadow-hard);
}
.woocommerce ul.products li.product img {
	border-bottom: 2px solid var(--m-text-950);
	margin: 0 0 1rem !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--m-font-display) !important;
	font-size: 1.5rem !important;
	padding: 0 1.25rem !important;
	margin: 0 0 .5rem !important;
	color: var(--m-text-950);
}
.woocommerce ul.products li.product .price {
	font-family: var(--m-font-display) !important;
	font-size: 1.5rem !important;
	color: var(--m-primary-700) !important;
	display: block;
	padding: 0 1.25rem;
	margin-bottom: 1rem;
}
.woocommerce ul.products li.product .button {
	margin: 0 1.25rem !important;
	border: 2px solid var(--m-text-950) !important;
	background: var(--m-primary-400) !important;
	color: var(--m-text-950) !important;
	border-radius: var(--m-radius-xl) !important;
	font-weight: 700 !important;
	padding: .5rem 1rem !important;
	transition: transform .2s var(--m-ease-spring), box-shadow .2s ease;
}
.woocommerce ul.products li.product .button:hover {
	transform: translateY(-2px);
	box-shadow: var(--m-glow-matcha);
}
.woocommerce span.onsale { display: none; }

@media (max-width: 1023px) {
	.woocommerce .products ul, .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
	.woocommerce .products ul, .woocommerce ul.products { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   18. Cart / checkout / account wrapper (WooCommerce blocks)
   --------------------------------------------------------------- */
.m-cartwrap { padding-block: clamp(3rem, 6vw, 4.5rem); }

/* Centre whatever the template puts inside, not one named block.

   This used to target .wp-block-woocommerce-cart alone, which meant the cart
   was constrained but checkout (.wp-block-woocommerce-checkout), the account
   pages and the order-confirmation blocks were not — they ran flush to the
   left edge at full viewport width. Constraining the wrapper's own children
   covers every one of them, including the store notices. */
.m-cartwrap > * {
	max-width: 1152px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	box-sizing: border-box;
}
/* Same step .m-wrap takes, so the form lines up with the banner heading
   directly above it instead of sitting 12px to its left. */
@media (min-width: 640px) {
	.m-cartwrap > * { padding-inline: 2rem; }
}

/* WooCommerce marks some of its blocks alignwide/alignfull, which the parent
   theme turns into a viewport-width escape hatch. Inside the counter wrapper
   they must stay within the measure like everything else. */
.m-cartwrap > .alignwide,
.m-cartwrap > .alignfull,
.m-cartwrap .entry-content > .alignwide,
.m-cartwrap .entry-content > .alignfull {
	max-width: 1152px;
	width: auto;
	margin-inline: auto;
}

body.woocommerce-cart .m-cartwrap .wp-block-post-title { display: none; }

.wc-block-cart-items { border: 0; }
.wc-block-cart-items__header {
	font-family: var(--m-font-round);
	font-size: .875rem !important;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--m-secondary-600);
	border-bottom: 2px solid var(--m-text-950);
}
.wc-block-cart-items__header th { padding-bottom: .9rem; }

.wc-block-cart-items__row {
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-2xl);
	background: var(--m-bg-50);
	margin-block: 1.1rem;
	transition: box-shadow .25s ease, transform .25s var(--m-ease-spring);
}
.wc-block-cart-items__row:hover { transform: translateY(-4px); box-shadow: var(--m-shadow-hard); }
.wc-block-cart-items__row td { border: 0 !important; padding: 1.1rem !important; vertical-align: middle; }

.wc-block-cart-item__image img {
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-md);
	background: var(--m-accent-100);
}
.wc-block-components-product-name {
	font-family: var(--m-font-display) !important;
	font-size: 1.15rem !important;
	color: var(--m-text-950) !important;
	text-decoration: none;
	line-height: 1.25;
}
.wc-block-components-product-name:hover { color: var(--m-primary-700) !important; }
.wc-block-cart-item__wrap .wc-block-components-product-metadata { font-size: .88rem; color: var(--m-text-500); }

.wc-block-components-product-price,
.wc-block-cart-item__total-price-and-sale-badge-wrapper .wc-block-components-product-price {
	font-family: var(--m-font-display);
	color: var(--m-primary-700);
}

.wc-block-components-quantity-selector {
	border: 2px solid var(--m-text-950) !important;
	border-radius: var(--m-radius-xl) !important;
	background: var(--m-bg-50);
	overflow: hidden;
	max-width: 130px;
}
.wc-block-components-quantity-selector::after { display: none !important; }
.wc-block-components-quantity-selector__input {
	font-family: inherit !important;
	font-weight: 700;
	color: var(--m-text-950) !important;
	background: transparent;
	min-height: 42px;
}
.wc-block-components-quantity-selector__button {
	color: var(--m-text-950) !important;
	font-weight: 700;
	font-size: 1.1rem;
	background: transparent;
	transition: background .2s ease, color .2s ease;
}
.wc-block-components-quantity-selector__button:hover:not(:disabled) {
	background: var(--m-text-950);
	color: var(--m-bg-50) !important;
}
.wc-block-cart-item__remove-link {
	font-size: .8rem !important;
	color: var(--m-text-500) !important;
	text-underline-offset: 3px;
}
.wc-block-cart-item__remove-link:hover { color: var(--m-secondary-500) !important; }

/* Totals sidebar is one card; its children must not each become one. */
.wc-block-cart__sidebar {
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-3xl);
	background: var(--m-bg-50);
	box-shadow: var(--m-shadow-hard);
	padding: 1.5rem;
	box-sizing: border-box;
}
.wc-block-cart__sidebar > * { border: 0; background: none; box-shadow: none; padding: 0; margin: 0; }
.wc-block-cart__sidebar .wp-block-woocommerce-proceed-to-checkout-block { margin-top: 1.25rem; }
.wc-block-cart__totals-title {
	font-family: var(--m-font-round) !important;
	font-size: .875rem !important;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--m-secondary-600) !important;
	margin-bottom: 1rem !important;
}
.wc-block-components-totals-item { font-size: .95rem; padding-block: .55rem; }
.wc-block-components-totals-item__label { color: var(--m-text-500); }
.wc-block-components-totals-item__value { font-weight: 700; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--m-font-display);
	font-size: 1.5rem;
	color: var(--m-primary-700);
}
.wc-block-components-totals-wrapper { border-top-color: var(--m-bg-200) !important; }
.wc-block-components-panel__button { font-weight: 700 !important; color: var(--m-text-950) !important; }

.wc-block-cart__submit-button {
	background: var(--m-primary-400) !important;
	color: var(--m-text-950) !important;
	border: 2px solid var(--m-text-950) !important;
	border-radius: var(--m-radius-xl) !important;
	font-family: var(--m-font-display) !important;
	font-weight: 400 !important;
	font-size: 1rem !important;
	min-height: 54px;
	transition: transform .2s var(--m-ease-spring), box-shadow .2s ease !important;
}
.wc-block-cart__submit-button:hover {
	transform: translateY(-2px);
	box-shadow: var(--m-glow-matcha) !important;
}

.wp-block-woocommerce-empty-cart-block { text-align: center; padding-block: 1rem 2rem; }
.wp-block-woocommerce-empty-cart-block h2,
.wp-block-woocommerce-empty-cart-block .wp-block-heading { font-family: var(--m-font-display); }
.wp-block-woocommerce-empty-cart-block .with-empty-cart-icon { font-size: 1.35rem; }

.wc-block-components-notice-banner {
	border-radius: var(--m-radius-2xl) !important;
	border-width: 2px !important;
	font-family: var(--m-font-body);
	margin-bottom: 1.6rem !important;
}
.wc-block-components-notice-banner.is-success {
	border-color: var(--m-primary-700) !important;
	background: color-mix(in oklab, var(--m-primary-300) 22%, var(--m-bg-50)) !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	list-style: none;
	margin: 2rem 0 0 !important;
	padding: 0;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	overflow: hidden;
	padding: 0 0 1.25rem;
	background: var(--m-bg-50);
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-3xl);
	text-align: left;
	transition: transform .3s var(--m-ease-spring), box-shadow .3s ease;
	box-sizing: border-box;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover {
	transform: translateY(-8px);
	box-shadow: var(--m-shadow-hard);
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
	border-bottom: 2px solid var(--m-text-950);
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
	font-family: var(--m-font-display) !important;
	font-size: 1.15rem !important;
	color: var(--m-text-950);
	padding: 0 1.25rem;
	margin: .9rem 0 .4rem;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
	font-family: var(--m-font-display);
	color: var(--m-primary-700);
	padding: 0 1.25rem;
}
.wp-block-woocommerce-empty-cart-block .wp-block-separator { border-color: var(--m-bg-200); }

@media (max-width: 1023px) {
	.wp-block-woocommerce-empty-cart-block .wc-block-grid__products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
	.wp-block-woocommerce-empty-cart-block .wc-block-grid__products { grid-template-columns: 1fr; }
}

/* WooCommerce stacks the cart table below 700px; keep it inside the viewport. */
@media (max-width: 700px) {
	.m-cartwrap > * { padding-inline: .85rem; }
	table.wc-block-cart-items { width: 100%; max-width: 100%; table-layout: fixed; box-sizing: border-box; }
	.wc-block-cart-items__row { display: block; width: 100%; box-sizing: border-box; margin-block: .9rem; }
	.wc-block-cart-items__row td { padding: .75rem !important; }
	.wc-block-cart-item__total { min-width: 0 !important; }
	.wc-block-cart-items__header { display: none; }
	.wc-block-components-quantity-selector { max-width: 116px; }
}

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

/* Counter overflow CTA — shown when the front page truncates the catalogue. */
.m-products__more { display: flex; justify-content: center; margin-top: 3rem; }

/* ---------------------------------------------------------------
   20. Variable products — the gift card denomination picker
   --------------------------------------------------------------- */
.m-single__cart table.variations {
	width: 100%;
	border: 0;
	margin: 0 0 1.25rem;
	border-collapse: collapse;
}
.m-single__cart table.variations th,
.m-single__cart table.variations td {
	border: 0;
	padding: 0 0 .75rem;
	vertical-align: middle;
	text-align: left;
}
.m-single__cart table.variations th.label {
	font-family: var(--m-font-round);
	font-size: .875rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--m-secondary-600);
	padding-right: 1rem;
	white-space: nowrap;
}
/* Specificity matches WooCommerce's own `.woocommerce table.variations tr td select`;
   this sheet loads after theirs, so the tie resolves here. */
.m-single__cart table.variations tr td select {
	appearance: none;
	-webkit-appearance: none;
	min-width: 220px;
	height: 52px;
	padding: 0 3rem 0 1.25rem;
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-xl);
	background-color: var(--m-bg-50);
	color: var(--m-text-950);
	font-family: inherit;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	/* Chevron, drawn inline so the control needs no icon asset. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23231a14' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.1rem center;
	transition: box-shadow .2s ease;
}
.m-single__cart table.variations tr td select:focus {
	outline: none;
	box-shadow: var(--m-glow-matcha);
}
.m-single__cart .reset_variations {
	display: inline-block;
	margin-left: .85rem;
	font-size: .85rem;
	color: var(--m-text-500);
	text-underline-offset: 3px;
}
.m-single__cart .reset_variations:hover { color: var(--m-secondary-500); }

/* Price of the chosen variation */
.m-single__cart .woocommerce-variation-price {
	margin-bottom: 1rem;
}
.m-single__cart .woocommerce-variation-price .price,
.m-single__cart .woocommerce-variation-price .woocommerce-Price-amount {
	font-family: var(--m-font-display);
	font-size: 2rem;
	color: var(--m-primary-700);
}
.m-single__cart .woocommerce-variation-availability p { margin: 0; font-size: .9rem; }

/* WooCommerce disables the button until a variation is picked. */
.m-single__cart button.single_add_to_cart_button.disabled,
.m-single__cart button.single_add_to_cart_button:disabled {
	opacity: .45;
	cursor: not-allowed;
}
.m-single__cart button.single_add_to_cart_button.disabled:hover,
.m-single__cart button.single_add_to_cart_button:disabled:hover {
	transform: none;
	box-shadow: none;
}

/* A variable product prints its range in the info column; keep it on brand. */
.m-single__price .woocommerce-Price-amount + .woocommerce-Price-amount { color: inherit; }

/* ---------------------------------------------------------------
   20. Content pages — About, Contact, Categories, Order tracking,
       Terms and Policies. Same slab/ink-edge vocabulary as the
       front page; nothing here introduces a new token.
   --------------------------------------------------------------- */

/* Buttons on a form, which section 8 styles only for anchors. */
button.m-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-family: var(--m-font-display);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.2;
	border-radius: var(--m-radius-2xl);
	padding: 1rem 1.75rem;
	background: var(--m-primary-400);
	color: var(--m-text-950);
	border: 2px solid var(--m-text-950);
	cursor: pointer;
	transition: transform .2s var(--m-ease-spring), box-shadow .2s ease;
}
button.m-btn:hover { transform: translateY(-4px); box-shadow: var(--m-glow-matcha); }

/* Shared form furniture for the contact form and Woo's tracking form. */
.m-field { margin: 0 0 1.25rem; }
.m-field label {
	display: block;
	margin-bottom: .4rem;
	font-family: var(--m-font-round);
	font-size: .8rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-text-500);
}
.m-field input,
.m-field select,
.m-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: .85rem 1rem;
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-md);
	background: var(--m-bg-50);
	color: var(--m-text-900);
	font-family: inherit;
	font-size: 1rem;
}
.m-field textarea { resize: vertical; min-height: 9rem; }
.m-field input:focus,
.m-field select:focus,
.m-field textarea:focus { outline: none; box-shadow: var(--m-glow-matcha); }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.m-field--trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.m-form__actions { margin: 0; }

.m-notice {
	margin: 0 0 1.5rem;
	padding: .9rem 1.1rem;
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-md);
	font-size: .95rem;
}
.m-notice--ok    { background: var(--m-primary-100); color: var(--m-primary-900); }
.m-notice--error { background: var(--m-secondary-100); color: var(--m-secondary-900); }

/* --- About ---------------------------------------------------- */
.m-about__grid {
	display: grid;
	gap: 3rem;
	align-items: center;
}
@media (min-width: 900px) { .m-about__grid { grid-template-columns: 1.05fr .95fr; gap: 4rem; } }
/* Section 5's `.m-section h2.m-display` sets `margin: .5rem 0 0` at a higher
   specificity than a bare `.m-about__copy h2`, so every heading rule below
   has to carry `h2.m-display` too or the space under it silently vanishes.
   Inside a two-column grid the display size also has to come down: 3.75rem
   in a 540px column is four lines of heading above two of text. */
.m-about__copy h2.m-display { margin: .75rem 0 1.5rem; }
@media (min-width: 640px) { .m-about__copy h2.m-display { font-size: 2.75rem; } }
.m-about__copy p { color: var(--m-text-700); margin: 0 0 1.25rem; }
.m-about__media img {
	width: 100%;
	height: auto;
	display: block;
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-xl);
	box-shadow: var(--m-shadow-hard);
}

.m-pillars { background: var(--m-bg-100); }
/* The numeral badges hang 1.1rem above their cards, so the gap under this
   heading has to clear that as well as the heading itself. */
.m-pillars h2.m-display { margin: .75rem 0 4rem; }
.m-pillars__grid { display: grid; gap: 1.5rem; }
@media (min-width: 820px) { .m-pillars__grid { grid-template-columns: repeat(3, 1fr); } }
.m-pillar {
	position: relative;
	padding: 2.25rem 1.75rem 1.75rem;
	background: var(--m-bg-50);
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-xl);
	box-shadow: var(--m-shadow-hard);
}
.m-pillar__num {
	position: absolute;
	top: -1.1rem;
	inset-inline-start: 1.5rem;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 2px solid var(--m-text-950);
	border-radius: 50%;
	background: var(--m-primary-400);
	font-family: var(--m-font-display);
	font-size: 1.1rem;
	color: var(--m-text-950);
}
.m-pillar h3 { margin: .5rem 0 .75rem; font-size: 1.25rem; }
.m-pillar p { margin: 0; color: var(--m-text-700); font-size: .98rem; }

.m-timeline h2.m-display { margin: .75rem 0 2.5rem; }
.m-timeline__list { list-style: none; margin: 0; padding: 0; }
.m-timeline__item {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: 1.25rem;
	align-items: baseline;
	padding: 1.1rem 0;
	border-top: 2px solid color-mix(in oklab, var(--m-text-950) 12%, transparent);
}
.m-timeline__item:last-child { border-bottom: 2px solid color-mix(in oklab, var(--m-text-950) 12%, transparent); }
.m-timeline__year {
	font-family: var(--m-font-display);
	font-size: 1.35rem;
	color: var(--m-primary-700);
}
.m-timeline__label { color: var(--m-text-700); }

.m-aboutcta { text-align: center; }
/* The shared lede is a left-aligned measure; centring the section is not
   enough to centre the block itself. */
.m-aboutcta .m-section__lede { margin-inline: auto; }
.m-aboutcta h2.m-display { margin: .75rem 0 1rem; }
.m-aboutcta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
	margin: 2.25rem 0 0;
}

/* --- Contact -------------------------------------------------- */
.m-contact__grid { display: grid; gap: 3.5rem; }
@media (min-width: 900px) { .m-contact__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.m-contact__channels h2.m-display,
.m-contact__formwrap h2.m-display { margin: .75rem 0 2rem; }
@media (min-width: 640px) {
	.m-contact__channels h2.m-display,
	.m-contact__formwrap h2.m-display { font-size: 2.75rem; }
}

.m-channels { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; gap: 1.25rem; }
.m-channel {
	position: relative;
	padding: 1.4rem 1.5rem;
	background: var(--m-bg-50);
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-xl);
}
.m-channel__kana {
	position: absolute;
	top: 1.1rem;
	inset-inline-end: 1.25rem;
	font-family: var(--m-font-round);
	font-size: 1.5rem;
	color: color-mix(in oklab, var(--m-primary-500) 35%, transparent);
}
.m-channel h3 {
	margin: 0 0 .3rem;
	font-size: .8rem;
	font-family: var(--m-font-round);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m-text-500);
}
.m-channel__value {
	font-family: var(--m-font-display);
	font-size: 1.2rem;
	color: var(--m-text-950);
	text-decoration: none;
}
.m-channel__value:hover { color: var(--m-primary-700); }
.m-channel__note { margin: .5rem 0 0; font-size: .92rem; color: var(--m-text-600); }

.m-contact__address h3 {
	font-size: .8rem;
	font-family: var(--m-font-round);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m-text-500);
	margin: 0 0 .5rem;
}
.m-contact__address address { font-style: normal; color: var(--m-text-700); line-height: 1.8; }

.m-faq { background: var(--m-bg-100); }
.m-faq h2.m-display { margin: .75rem 0 2rem; }
.m-faq__list { display: grid; gap: .9rem; }
.m-faq__item {
	background: var(--m-bg-50);
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-md);
	padding: 1rem 1.25rem;
}
.m-faq__item summary {
	cursor: pointer;
	font-family: var(--m-font-display);
	font-size: 1.05rem;
	list-style: none;
}
.m-faq__item summary::-webkit-details-marker { display: none; }
.m-faq__item summary::after { content: " ＋"; color: var(--m-primary-600); }
.m-faq__item[open] summary::after { content: " －"; }
.m-faq__item p { margin: .75rem 0 0; color: var(--m-text-700); }

/* --- Categories ----------------------------------------------- */
.m-cats__grid { display: grid; gap: 1.75rem; }
@media (min-width: 640px) { .m-cats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .m-cats__grid { grid-template-columns: repeat(3, 1fr); } }
.m-cat {
	display: flex;
	flex-direction: column;
	background: var(--m-bg-50);
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-xl);
	overflow: hidden;
	box-shadow: var(--m-shadow-hard);
	transition: transform .25s var(--m-ease-spring);
}
.m-cat:hover { transform: translateY(-6px); }
.m-cat__media {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	background: var(--m-gradient-matcha);
	border-bottom: 2px solid var(--m-text-950);
}
.m-cat__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-cat__mark {
	font-family: var(--m-font-display);
	font-size: 3.5rem;
	color: color-mix(in oklab, var(--m-text-950) 70%, transparent);
}
.m-cat__body { padding: 1.25rem 1.4rem 1.5rem; }
.m-cat__title { margin: 0 0 .5rem; font-size: 1.3rem; }
.m-cat__title a { color: var(--m-text-950); text-decoration: none; }
.m-cat__title a:hover { color: var(--m-primary-700); }
.m-cat__desc { margin: 0 0 .75rem; color: var(--m-text-600); font-size: .95rem; }
.m-cat__count {
	margin: 0;
	font-family: var(--m-font-round);
	font-size: .8rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-primary-700);
}

/* --- Order tracking ------------------------------------------- */
.m-track__grid { display: grid; gap: 3.5rem; }
@media (min-width: 900px) { .m-track__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.m-track__formwrap h2.m-display,
.m-track__steps h2.m-display { margin: .75rem 0 1.75rem; }
@media (min-width: 640px) {
	.m-track__formwrap h2.m-display,
	.m-track__steps h2.m-display { font-size: 2.75rem; }
}
.m-track__formwrap {
	padding: 2rem;
	background: var(--m-bg-100);
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-xl);
	box-shadow: var(--m-shadow-hard);
}

/* WooCommerce prints its own markup for [woocommerce_order_tracking]. */
.m-track__formwrap .woocommerce form.track_order p { margin: 0 0 1.25rem; }
.m-track__formwrap .woocommerce form.track_order label {
	display: block;
	margin-bottom: .4rem;
	font-family: var(--m-font-round);
	font-size: .8rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-text-500);
}
.m-track__formwrap .woocommerce form.track_order input[type="text"],
.m-track__formwrap .woocommerce form.track_order input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	padding: .85rem 1rem;
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-md);
	background: var(--m-bg-50);
	font-family: inherit;
	font-size: 1rem;
}
.m-track__formwrap .woocommerce form.track_order button {
	padding: 1rem 1.75rem;
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-2xl);
	background: var(--m-primary-400);
	color: var(--m-text-950);
	font-family: var(--m-font-display);
	font-size: 1rem;
	cursor: pointer;
	transition: transform .2s var(--m-ease-spring), box-shadow .2s ease;
}
.m-track__formwrap .woocommerce form.track_order button:hover {
	transform: translateY(-4px);
	box-shadow: var(--m-glow-matcha);
}

.m-tracksteps { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 1.25rem; }
.m-trackstep { display: grid; grid-template-columns: 3.25rem 1fr; gap: 1rem; align-items: start; }
.m-trackstep__kana {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border: 2px solid var(--m-text-950);
	border-radius: 50%;
	background: var(--m-bg-100);
	font-family: var(--m-font-round);
	font-size: .95rem;
	color: var(--m-primary-700);
}
.m-trackstep h3 { margin: .35rem 0 .3rem; font-size: 1.1rem; }
.m-trackstep p { margin: 0; color: var(--m-text-600); font-size: .95rem; }
.m-track__note { margin: .5rem 0 0; font-size: .92rem; color: var(--m-text-600); }

/* --- Legal pages ---------------------------------------------- */
.m-legal__updated {
	margin: 0;
	padding: .9rem 1.25rem;
	background: var(--m-bg-200);
	border-bottom: 2px solid color-mix(in oklab, var(--m-text-950) 12%, transparent);
	text-align: center;
	font-family: var(--m-font-round);
	font-size: .8rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-text-600);
}
.m-legal .m-prose { max-width: 48rem; }
.m-prose > * { max-width: none; }
.m-prose h2 {
	font-size: 1.75rem;
	margin: 3rem 0 1rem;
	padding-top: 1.5rem;
	border-top: 2px solid color-mix(in oklab, var(--m-text-950) 12%, transparent);
}
.m-prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.m-prose h3 { font-size: 1.2rem; margin: 2rem 0 .75rem; }
.m-prose p,
.m-prose li { color: var(--m-text-700); }
.m-prose p { margin: 0 0 1.1rem; }
.m-prose ul, .m-prose ol { margin: 0 0 1.4rem; padding-inline-start: 1.4rem; }
.m-prose li { margin-bottom: .5rem; }
.m-prose a { color: var(--m-primary-700); text-decoration: underline; text-underline-offset: 3px; }
.m-prose strong { color: var(--m-text-900); }

/* WooCommerce floats the two tracking fields side by side at 47% each,
   which leaves them about 130px wide on a phone. Stack them instead. */
@media (max-width: 640px) {
	.m-track__formwrap { padding: 1.5rem 1.25rem; }
	.m-track__formwrap .woocommerce form.track_order .form-row-first,
	.m-track__formwrap .woocommerce form.track_order .form-row-last {
		width: 100%;
		float: none;
	}
}

/* ---------------------------------------------------------------
   21. Phone navigation drawer

   Under 768px section 6 hides .m-nav, which used to leave the header
   with no way into the site. The toggle below opens the same links as
   a panel under the pill. It stays hidden until nav.js marks the body,
   so a no-JS visitor never sees a button that cannot open anything.
   --------------------------------------------------------------- */
.m-navtoggle { display: none; }

@media (max-width: 767px) {
	body.has-m-drawer .m-navtoggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		height: 2.5rem;
		padding: 0;
		border: 2px solid var(--m-text-950);
		border-radius: var(--m-radius-xl);
		background: color-mix(in oklab, var(--m-bg-950) 60%, transparent);
		color: var(--m-bg-100);
		cursor: pointer;
		transition: transform .2s var(--m-ease-spring), box-shadow .2s ease, color .2s ease;
	}
	body.has-m-drawer .m-navtoggle:hover { color: var(--m-primary-200); box-shadow: var(--m-glow-matcha); }
	body.has-m-drawer .m-navtoggle:focus-visible { outline: 2px solid var(--m-primary-300); outline-offset: 2px; }
}

/* Three bars that fold into a cross while the panel is open. */
.m-navtoggle__bars {
	position: relative;
	display: block;
	width: 1.05rem;
	height: .75rem;
}
.m-navtoggle__bars span {
	position: absolute;
	inset-inline: 0;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform .25s var(--m-ease-spring), opacity .2s ease;
}
.m-navtoggle__bars span:nth-child(1) { top: 0; }
.m-navtoggle__bars span:nth-child(2) { top: calc(50% - 1px); }
.m-navtoggle__bars span:nth-child(3) { bottom: 0; }

.m-navtoggle[aria-expanded="true"] .m-navtoggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.m-navtoggle[aria-expanded="true"] .m-navtoggle__bars span:nth-child(2) { opacity: 0; }
.m-navtoggle[aria-expanded="true"] .m-navtoggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* The drawer is a sibling of the pill inside the fixed header part, so it
   inherits its stacking context and sits above the page without a portal.

   It stays *below* the pill: the scrim covers the whole viewport, and at a
   higher z-index it would swallow taps on the very X that closes the menu.
   The panel opens under the pill, so nothing is hidden by this order. */
.m-drawer {
	position: fixed;
	inset: 0;
	z-index: 1;
}
.m-header { position: relative; z-index: 2; }
.m-drawer[hidden] { display: none; }

.m-drawer__scrim {
	position: absolute;
	inset: 0;
	background: color-mix(in oklab, var(--m-text-950) 60%, transparent);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity .25s ease;
}
.m-drawer.is-open .m-drawer__scrim { opacity: 1; }

.m-drawer__panel {
	position: absolute;
	inset-inline: .75rem;
	top: 4.25rem;
	max-height: calc(100vh - 5.5rem);
	overflow-y: auto;
	padding: .75rem;
	border: 2px solid color-mix(in oklab, var(--m-text-950) 80%, transparent);
	border-radius: var(--m-radius-2xl);
	/* Opaque, and deliberately no backdrop-filter: the panel sits below the
	   header pill in the stacking order, and a blur there composites the
	   whole panel see-through instead of frosting what is behind it. */
	background: var(--m-bg-950);
	box-shadow: var(--m-shadow-shoji);
	transform: translateY(-.75rem);
	opacity: 0;
	transition: transform .25s var(--m-ease-spring), opacity .2s ease;
}
.m-drawer.is-open .m-drawer__panel { transform: translateY(0); opacity: 1; }

.m-drawer__list { list-style: none; margin: 0; padding: 0; }
.m-drawer__list a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	padding: .9rem 1rem;
	border-radius: var(--m-radius-xl);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--m-bg-100);
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.m-drawer__list a:hover,
.m-drawer__list a:focus-visible { background: color-mix(in oklab, var(--m-primary-500) 22%, transparent); color: var(--m-primary-200); }

/* Secondary block — the destinations that are not in the desktop bar. */
.m-drawer__list--secondary {
	margin-top: .5rem;
	padding-top: .5rem;
	border-top: 2px solid color-mix(in oklab, var(--m-bg-100) 18%, transparent);
}
.m-drawer__list--secondary a { font-size: .95rem; font-weight: 500; }

/* Hold the page still behind the panel. */
html.m-drawer-open, html.m-drawer-open body { overflow: hidden; }

@media (min-width: 768px) {
	.m-drawer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.m-drawer__panel,
	.m-drawer__scrim,
	.m-navtoggle__bars span { transition: none; }
}

/* ---------------------------------------------------------------
   22. Add-to-cart feedback — spinner on the button, toast after

   WooCommerce adds the item over AJAX, so without this the page gives
   no sign anything happened. The spinner covers the request, the toast
   confirms it and offers the two things a shopper wants next.
   --------------------------------------------------------------- */
.m-spinner {
	display: none;
	width: 1rem;
	height: 1rem;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: m-spin .7s linear infinite;
}
@keyframes m-spin { to { transform: rotate(360deg); } }

/* While loading, the spinner takes the icon's place so the button keeps
   its width and the row does not jump. */
.m-card__add.is-loading { pointer-events: none; opacity: .75; }
.m-card__add.is-loading svg,
.m-card__add.is-loading .m-card__add-label { display: none; }
.m-card__add.is-loading .m-spinner { display: block; }

/* Woo appends its own "View cart" link after a successful add; the toast
   says the same thing in a better place. The extra class is there to clear
   `.woocommerce a.added_to_cart` in woocommerce.css, which is one step more
   specific than a plain descendant selector. */
.m-card .m-card__foot a.added_to_cart { display: none; }

/* Single product: the page is reloading, so just show the click landed. */
.single_add_to_cart_button.is-loading { pointer-events: none; opacity: .75; }
.single_add_to_cart_button.is-loading::after {
	content: "";
	display: inline-block;
	vertical-align: -2px;
	margin-inline-start: .6rem;
	width: 1rem;
	height: 1rem;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: m-spin .7s linear infinite;
}

.m-toast {
	position: fixed;
	z-index: 60;
	inset-inline: 1rem;
	bottom: 1rem;
	display: flex;
	justify-content: center;
	pointer-events: none;
}
.m-toast[hidden] { display: none; }

@media (min-width: 640px) {
	.m-toast { inset-inline: auto 1.5rem; bottom: 1.5rem; }
}

.m-toast__inner {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	width: 100%;
	max-width: 26rem;
	padding: 1rem 1.1rem;
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-xl);
	background: var(--m-bg-950);
	color: var(--m-bg-50);
	box-shadow: var(--m-shadow-shoji);
	pointer-events: auto;
	transform: translateY(.75rem);
	opacity: 0;
	transition: transform .25s var(--m-ease-spring), opacity .2s ease;
}
.m-toast.is-open .m-toast__inner { transform: translateY(0); opacity: 1; }

.m-toast__mark {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: var(--m-primary-400);
	color: var(--m-text-950);
}
.m-toast.is-error .m-toast__mark { background: var(--m-secondary-400); }

.m-toast__body { flex: 1 1 auto; min-width: 0; }
.m-toast__title {
	margin: 0;
	font-family: var(--m-font-display);
	font-size: 1rem;
	line-height: 1.3;
}
.m-toast__item {
	margin: .15rem 0 0;
	font-size: .875rem;
	color: color-mix(in oklab, var(--m-bg-200) 75%, transparent);
	overflow-wrap: anywhere;
}
.m-toast__item[hidden] { display: none; }

.m-toast__actions {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: .4rem;
}
.m-toast__cart,
.m-toast__dismiss {
	padding: .45rem .8rem;
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-xl);
	font-family: var(--m-font-display);
	font-size: .8rem;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .2s var(--m-ease-spring), box-shadow .2s ease, color .2s ease;
}
.m-toast__cart { background: var(--m-primary-400); color: var(--m-text-950); }
.m-toast__cart:hover { transform: translateY(-2px); box-shadow: var(--m-glow-matcha); }
.m-toast__dismiss {
	background: transparent;
	color: color-mix(in oklab, var(--m-bg-100) 85%, transparent);
	border-color: color-mix(in oklab, var(--m-bg-100) 35%, transparent);
}
.m-toast__dismiss:hover { color: var(--m-primary-200); border-color: var(--m-primary-400); }

@media (max-width: 420px) {
	.m-toast__inner { flex-wrap: wrap; }
	.m-toast__actions { flex-direction: row; width: 100%; }
	.m-toast__cart, .m-toast__dismiss { flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) {
	.m-toast__inner { transition: none; }
	.m-spinner,
	.single_add_to_cart_button.is-loading::after { animation-duration: 1.4s; }
}

/* ---------------------------------------------------------------
   23. Header over a light page

   The pill is a 45%-transparent dark bar designed to float over the hero
   or a dark page banner, with near-white nav text. Every template in this
   theme opens with one of those — but the parent theme's fallbacks (404,
   search) do not, and there the text composites light-on-cream and fails
   contrast. Where no dark opening section exists, make the pill solid.
   --------------------------------------------------------------- */
.wp-site-blocks:not(:has(main .m-pagehead)):not(:has(main .m-hero)) .m-header {
	background: color-mix(in oklab, var(--m-bg-950) 92%, transparent);
	box-shadow: var(--m-shadow-shoji);
}

/* ---------------------------------------------------------------
   24. Product reviews — verified buyers (inc-reviews.php)

   Summary + form in a sticky side column, the review list beside it.
   Stars are two stacked SVG rows; the lit row is clipped from the
   inline start, so a 4.5 average fills correctly in RTL too.
   --------------------------------------------------------------- */
.m-reviews {
	margin-top: clamp(3.5rem, 7vw, 5.5rem);
	padding-top: clamp(2.5rem, 5vw, 3.5rem);
	border-top: 2px dashed var(--m-bg-300);
}
.m-reviews__title { font-size: clamp(1.9rem, 4.5vw, 3rem); margin: .5rem 0 2rem; }

.m-reviews__grid {
	display: grid;
	grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: start;
}
@media (max-width: 860px) { .m-reviews__grid { grid-template-columns: minmax(0, 1fr); } }

/* Summary card */
.m-reviews__summary {
	position: sticky;
	top: 6.5rem;
	padding: 1.75rem;
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-2xl);
	background: var(--m-accent-50);
	box-shadow: var(--m-shadow-hard);
}
@media (max-width: 860px) { .m-reviews__summary { position: static; } }

.m-reviews__avg { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .35rem; }
.m-reviews__avg-num {
	font-family: var(--m-font-display);
	font-size: 3.5rem;
	line-height: 1;
	color: var(--m-text-950);
	font-variant-numeric: tabular-nums;
}
.m-reviews__avg-of { font-family: var(--m-font-round); color: var(--m-text-500); }
.m-reviews__count { margin: .5rem 0 1.25rem; color: var(--m-text-600); font-size: .92rem; }
.m-reviews__empty-title { font-family: var(--m-font-display); font-size: 1.5rem; margin: 0 0 .4rem; }

/* Distribution bars */
.m-reviews__bars { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .45rem; }
.m-reviews__bars li {
	display: grid;
	grid-template-columns: 2.4rem 1fr 1.8rem;
	align-items: center;
	gap: .6rem;
	font-size: .85rem;
	color: var(--m-text-600);
	font-variant-numeric: tabular-nums;
}
.m-reviews__bar {
	height: .6rem;
	border: 1.5px solid var(--m-text-950);
	border-radius: 999px;
	background: var(--m-bg-100);
	overflow: hidden;
}
.m-reviews__bar > span { display: block; height: 100%; background: var(--m-accent-400); }
.m-reviews__bar-n { text-align: end; }

.m-reviews__share,
.m-reviews__note,
.m-reviews__hint { margin: 0 0 1.25rem; font-size: .9rem; color: var(--m-text-600); }
.m-reviews__share { color: var(--m-primary-700); font-weight: 700; }

.m-reviews__flash {
	margin: 0 0 1.75rem;
	padding: .9rem 1.2rem;
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-md);
	background: var(--m-primary-100);
	color: var(--m-text-900);
	font-weight: 700;
}

/* Stars */
.m-stars { position: relative; display: inline-block; line-height: 0; vertical-align: middle; }
.m-stars svg { width: 1.1rem; height: 1.1rem; margin-inline-end: .12rem; }
.m-stars--sm svg { width: .95rem; height: .95rem; }
.m-stars--lg svg { width: 1.6rem; height: 1.6rem; }
.m-stars__base, .m-stars__fill { display: inline-flex; white-space: nowrap; }
.m-stars__base svg { fill: var(--m-bg-200); stroke: var(--m-text-950); stroke-width: 1.4; }
.m-stars__fill {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	overflow: hidden;
}
.m-stars__fill svg { flex: none; fill: var(--m-accent-400); stroke: var(--m-text-950); stroke-width: 1.4; }

/* Review cards */
.m-reviews__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.m-review {
	padding: 1.4rem 1.5rem;
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-xl);
	background: var(--m-bg-50);
}
.m-review[hidden] { display: none; }
.m-review__head { display: flex; align-items: center; gap: .8rem; margin-bottom: .7rem; }
.m-review__avatar {
	flex: none;
	display: grid; place-items: center;
	width: 2.6rem; height: 2.6rem;
	border: 2px solid var(--m-text-950);
	border-radius: 50%;
	background: var(--m-primary-300);
	font-family: var(--m-font-display);
	color: var(--m-text-950);
}
.m-review__who { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; min-width: 0; }
.m-review__name { font-weight: 700; color: var(--m-text-950); }
.m-review__date { margin-inline-start: auto; font-size: .8rem; color: var(--m-text-500); white-space: nowrap; }
.m-review__text { margin-top: .6rem; color: var(--m-text-700); }
.m-review__text p { margin: 0 0 .6rem; }
.m-review__text p:last-child { margin-bottom: 0; }

.m-review__reply {
	margin-top: 1rem;
	padding: .9rem 1.1rem;
	border-inline-start: 4px solid var(--m-primary-500);
	border-radius: var(--m-radius-sm);
	background: var(--m-primary-50);
	font-size: .92rem;
	color: var(--m-text-700);
}
.m-review__reply p { margin: 0 0 .4rem; }
.m-review__reply p:last-child { margin-bottom: 0; }
.m-review__reply-by {
	font-family: var(--m-font-round);
	font-size: .75rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-primary-700);
}

/* Verified buyer badge */
.m-verified {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding-block: .2rem;
	padding-inline: .35rem .6rem;
	border: 1.5px solid var(--m-primary-700);
	border-radius: 999px;
	background: var(--m-primary-100);
	color: var(--m-primary-800);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}
.m-verified svg { width: 1rem; height: 1rem; fill: var(--m-primary-600); }
.m-verified .m-verified__tick { stroke: var(--m-bg-50); }

.m-reviews__more {
	margin-top: 1.25rem;
	padding: .8rem 1.6rem;
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-xl);
	background: transparent;
	color: var(--m-text-950);
	font-family: var(--m-font-display);
	font-size: .95rem;
	cursor: pointer;
	transition: transform .2s var(--m-ease-spring), background .2s ease;
}
.m-reviews__more:hover { transform: translateY(-2px); background: var(--m-accent-100); }

/* Form */
.m-review-form { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1.5px solid var(--m-bg-300); }
.m-review-form__title { font-size: 1.35rem; margin: 0 0 1rem; }
.m-review-form .m-field-row { display: grid; gap: 0 1rem; }
.m-review-form .m-field small { display: block; margin-top: .35rem; font-size: .78rem; color: var(--m-text-500); }

.m-rate { border: 0; margin: 0 0 1.25rem; padding: 0; min-width: 0; }
.m-rate legend {
	margin-bottom: .4rem;
	padding: 0;
	font-family: var(--m-font-round);
	font-size: .8rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-text-500);
}
/* DOM order is 5→1; row-reverse shows 1→5 from the inline start, and
   "checked ~ label" lights the chosen star and every lower one. */
.m-rate__stars { display: inline-flex; flex-direction: row-reverse; gap: .2rem; position: relative; }
.m-rate__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.m-rate__stars label { cursor: pointer; line-height: 0; padding: .1rem; border-radius: var(--m-radius-sm); }
.m-rate__stars svg {
	width: 2rem; height: 2rem;
	fill: var(--m-bg-200);
	stroke: var(--m-text-950);
	stroke-width: 1.4;
	transition: transform .15s var(--m-ease-spring), fill .15s ease;
}
.m-rate__stars label:hover svg,
.m-rate__stars label:hover ~ label svg,
.m-rate__stars input:checked ~ label svg { fill: var(--m-accent-400); }
.m-rate__stars label:hover svg { transform: scale(1.15); }
.m-rate__stars input:focus-visible + label { outline: 2px solid var(--m-primary-600); outline-offset: 2px; }

.m-review-form__submit {
	height: 52px;
	padding: 0 2rem;
	border: 2px solid var(--m-text-950);
	border-radius: var(--m-radius-xl);
	background: var(--m-primary-400);
	color: var(--m-text-950);
	font-family: var(--m-font-display);
	font-size: 1rem;
	cursor: pointer;
	transition: transform .2s var(--m-ease-spring), box-shadow .2s ease;
}
.m-review-form__submit:hover { transform: translateY(-2px); box-shadow: var(--m-glow-matcha); }

@media (prefers-reduced-motion: reduce) {
	.m-rate__stars svg, .m-reviews__more, .m-review-form__submit { transition: none; }
}

/* ----------------------------------------------------------
   Footer trust row: Saudi CR card + accepted payment methods
   ---------------------------------------------------------- */
.m-footer__trust {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 3rem;
}
@media (min-width: 768px) { .m-footer__trust { flex-direction: row; } }
.m-cr {
	display: inline-flex;
	align-items: center;
	gap: .9rem;
	min-width: 15rem;
	padding: .8rem 1.25rem;
	border-radius: .75rem;
	background: #fff;
	color: #1f2421;
	box-shadow: 0 2px 8px rgb(0 0 0 / .25);
}
.m-cr__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	color: #2f7d32;
}
.m-cr__icon svg { width: 2.4rem; height: 2.4rem; }
.m-cr__body { display: flex; flex-direction: column; line-height: 1.2; }
.m-cr__label {
	font-size: 1rem;
	font-weight: 600;
	color: #4a4f4b;
}
.m-cr__num {
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: .02em;
	color: #111;
	font-variant-numeric: tabular-nums;
	text-align: start;
}
.m-pay {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.m-pay li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 2.25rem;
	margin: 0;
	border-radius: .5rem;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 1px 2px rgb(0 0 0 / .25);
}
.m-pay img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Powered by Neksio credit */
.m-footer__powered { margin: 0; }
.m-footer__bar .m-footer__powered a {
	font-size: inherit;
	font-weight: 600;
	color: var(--m-primary-300);
}
.m-footer__bar .m-footer__powered a:hover,
.m-footer__bar .m-footer__powered a:focus-visible { color: var(--m-secondary-300); }