/*
Theme Name: Matchllo
Theme URI: http://localhost/matchllo
Description: Neon tea-bar child theme for MATCHLLO — stone-milled Uji matcha. Built on Extendable.
Author: Matchllo
Template: extendable
Version: 2.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
*/

/* ===============================================================
   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 {
	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 { padding: 1.25rem 1.5rem 0; }
}
.wp-site-blocks > header.wp-block-template-part > * { 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; }

/* 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. */
body:not(.home) .wp-site-blocks { padding-top: 6.5rem; }
body.woocommerce-shop .wp-site-blocks,
body.single-product .wp-site-blocks,
body.woocommerce-cart .wp-site-blocks,
body.woocommerce-checkout .wp-site-blocks,
body.woocommerce-account .wp-site-blocks { 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 { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part { 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);
}

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

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

/* ---------------------------------------------------------------
   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 (WooCommerce Cart block)
   --------------------------------------------------------------- */
.m-cartwrap { padding-block: clamp(3rem, 6vw, 4.5rem); }
.m-cartwrap .wp-block-woocommerce-cart {
	max-width: 1152px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	box-sizing: border-box;
}
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 .wp-block-woocommerce-cart { 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; }