/*
 * Ma Ma Bio – design system on top of the Blocksy theme.
 * Clean, modern shop: warm white, brand green from the logo, Plus Jakarta Sans,
 * soft radii, real photography, quiet motion.
 */

/* ---------- Tokens ---------- */
:root {
	--mb-bg: #fbfaf6;
	--mb-surface: #ffffff;
	--mb-surface-2: #f3f1ea;
	--mb-line: #e7e4da;
	--mb-text: #1d2318;
	--mb-body: #3b4235;
	--mb-muted: #6a7163;
	--mb-brand: #4e6b3a;
	--mb-brand-600: #3e5a2d;
	--mb-brand-700: #2f4522;
	--mb-brand-50: #f0f4ea;
	--mb-brand-100: #e1ead6;
	--mb-open: #3f8f3a;
	--mb-closed: #b5523b;

	--mb-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--mb-r-sm: 10px;
	--mb-r: 16px;
	--mb-r-lg: 24px;
	--mb-shadow-sm: 0 1px 2px rgba(29, 35, 24, 0.06), 0 1px 1px rgba(29, 35, 24, 0.04);
	--mb-shadow: 0 12px 32px -14px rgba(29, 35, 24, 0.22);
	--mb-shadow-lg: 0 24px 60px -20px rgba(29, 35, 24, 0.28);
	--mb-container: 1240px;
	--mb-gutter: clamp(16px, 4vw, 32px);
	--mb-section: clamp(64px, 8vw, 112px);

	--mb-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--mb-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

	/* Blocksy palette mapped onto the brand */
	--theme-palette-color-1: var(--mb-brand);
	--theme-palette-color-2: var(--mb-brand-600);
	--theme-palette-color-3: var(--mb-body);
	--theme-palette-color-4: var(--mb-text);
	--theme-palette-color-5: var(--mb-line);
	--theme-palette-color-6: var(--mb-surface-2);
	--theme-palette-color-7: var(--mb-bg);
	--theme-palette-color-8: var(--mb-surface);
	--theme-font-family: var(--mb-font);
	--theme-button-border-radius: 999px;
	--theme-form-field-border-radius: var(--mb-r-sm);
	--theme-normal-container-max-width: var(--mb-container);
}

/* ---------- Base ---------- */
body {
	background: var(--mb-bg);
	color: var(--mb-body);
	font-family: var(--mb-font);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--mb-font);
	color: var(--mb-text);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.15;
	text-wrap: balance;
}
h1, .page-title, .entry-title { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem); font-weight: 800; letter-spacing: -0.035em; }
.entry-content h2 { font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.2rem); margin-top: 1.8em; }
.entry-content h3 { font-size: 1.3rem; }
a { transition: color 180ms ease; }
::selection { background: var(--mb-brand); color: #fff; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--mb-brand) 55%, transparent); outline-offset: 3px; border-radius: 6px; }
.mb-icon { width: 1.15em; height: 1.15em; flex: none; stroke-width: 1.8; }

/* ---------- Buttons ---------- */
.mb-btn,
.ct-button,
.wp-element-button,
.wp-block-button__link,
.woocommerce .button,
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	min-height: 50px;
	padding: 0 26px;
	border-radius: 999px;
	font-family: var(--mb-font);
	font-weight: 600;
	font-size: 0.98rem;
	letter-spacing: -0.005em;
	text-decoration: none;
	transition: background-color 200ms ease, color 200ms ease, box-shadow 250ms var(--mb-ease), transform 160ms var(--mb-ease);
}
.mb-btn .mb-icon { transition: transform 300ms var(--mb-ease); }
.mb-btn:hover .mb-icon:last-child { transform: translateX(3px); }
.mb-btn:active, .ct-button:active, .wp-element-button:active, .woocommerce .button:active { transform: scale(0.97); }
.mb-btn--primary, .ct-button, .wp-element-button, .wp-block-button__link, input[type="submit"] {
	background: var(--mb-brand);
	color: #fff;
	box-shadow: 0 8px 20px -10px rgba(62, 90, 45, 0.7);
}
.mb-btn--primary:hover, .ct-button:hover, .wp-element-button:hover, .wp-block-button__link:hover, input[type="submit"]:hover {
	background: var(--mb-brand-600);
	color: #fff;
	box-shadow: 0 12px 26px -10px rgba(62, 90, 45, 0.8);
}
.mb-btn--secondary, .is-style-outline .wp-block-button__link {
	background: var(--mb-surface);
	color: var(--mb-text);
	box-shadow: inset 0 0 0 1px var(--mb-line), var(--mb-shadow-sm);
}
.mb-btn--secondary:hover, .is-style-outline .wp-block-button__link:hover { background: var(--mb-brand-50); color: var(--mb-brand-700); box-shadow: inset 0 0 0 1px var(--mb-brand-100); }
.mb-btn--ghost { color: var(--mb-text); padding-inline: 14px; }
.mb-btn--ghost:hover { color: var(--mb-brand); }

.mb-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 600;
	color: var(--mb-brand);
	text-decoration: none;
	white-space: nowrap;
}
.mb-link .mb-icon { transition: transform 300ms var(--mb-ease); }
.mb-link:hover { color: var(--mb-brand-700); }
.mb-link:hover .mb-icon { transform: translateX(4px); }

/* ---------- Header ---------- */
/* Sticky: the info bar scrolls away, the main bar stays. */
#header { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) - 40px); z-index: 50; }
@media (max-width: 999px) { #header { top: var(--wp-admin--admin-bar--height, 0px); } }
#header [data-row="top"] {
	background: var(--mb-brand-700);
	color: #e7eedd;
	font-size: 0.85rem;
}
#header [data-row="top"] .ct-container { min-height: 40px; }
#header .ct-header-text p { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; }
#header [data-row="top"] .ct-header-text, #header [data-row="top"] .ct-header-text * { color: #e7eedd !important; }
#header .ct-header-text a { color: #fff !important; text-decoration: none; }
.mb-topbar__item { display: inline-flex; align-items: center; gap: 8px; }
#header [data-row="middle"] {
	background: var(--mb-surface) !important;
	box-shadow: 0 1px 0 var(--mb-line);
	transition: box-shadow 300ms ease;
}
.mb-scrolled #header [data-row="middle"] { box-shadow: 0 1px 0 var(--mb-line), 0 10px 30px -18px rgba(29, 35, 24, 0.35); }
#header .site-logo-container img { mix-blend-mode: multiply; height: 60px !important; width: auto !important; max-height: none !important; } /* the logo file has a white ground */
#header .header-menu-1 .menu > li > .ct-menu-link {
	text-transform: none;
	font-weight: 600;
	font-size: 0.97rem;
	color: var(--mb-text);
	position: relative;
}
#header .header-menu-1 .menu > li > .ct-menu-link::after {
	content: '';
	position: absolute;
	left: var(--menu-item-padding, 14px);
	right: var(--menu-item-padding, 14px);
	bottom: 22%;
	height: 2px;
	border-radius: 2px;
	background: var(--mb-brand);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 350ms var(--mb-ease);
}
#header .header-menu-1 .menu > li:hover > .ct-menu-link::after,
#header .header-menu-1 .menu > li.current-menu-item > .ct-menu-link::after { transform: scaleX(1); }
#header .header-menu-1 .menu > li.current-menu-item > .ct-menu-link,
#header .header-menu-1 .menu > li:hover > .ct-menu-link { color: var(--mb-brand); }
#header .sub-menu {
	border-radius: var(--mb-r);
	box-shadow: var(--mb-shadow-lg);
	border: 1px solid var(--mb-line);
	padding: 8px;
	background: var(--mb-surface);
}
#header .sub-menu .ct-menu-link { border-radius: var(--mb-r-sm); font-size: 0.93rem; padding: 9px 12px; color: var(--mb-body); }
#header .sub-menu .ct-menu-link:hover { background: var(--mb-brand-50); color: var(--mb-brand-700); }
#header .ct-header-cta .ct-button { min-height: 44px; padding: 0 22px; }
#header .ct-header-search { color: var(--mb-text); }


/* ---------- Layout ---------- */
.home .entry-content > *, .home .entry-content { max-width: none !important; margin-block: 0 !important; }
.home .site-main > .ct-container-full, .home article.page { padding: 0 !important; }
body { overflow-x: clip; }
#header .ct-container, #footer .ct-container, .site-main .ct-container { max-width: var(--mb-container); width: calc(100% - 2 * var(--mb-gutter)); }
.home .mb-section, .home .mb-hero { width: 100vw; margin-inline: calc(50% - 50vw); }
.mb-container { width: min(var(--mb-container), 100% - 2 * var(--mb-gutter)); margin-inline: auto; }
.mb-section { padding-block: var(--mb-section); }
.mb-section--tight { padding-block: clamp(32px, 4vw, 56px); }
.mb-section--tint { background: var(--mb-surface-2); }
.mb-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(28px, 4vw, 44px);
}
.mb-head__title { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem); font-weight: 800; letter-spacing: -0.035em; margin: 0; }
.mb-head__lead { margin: 10px 0 0; color: var(--mb-muted); font-size: 1.05rem; max-width: 56ch; }

/* ---------- Hero: the shop photo behind the text ---------- */
.mb-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: min(88vh, 860px);
	padding-block: clamp(72px, 9vw, 128px);
	background: var(--mb-surface-2);
}
.mb-hero__bg { position: absolute; inset: -8% 0; z-index: -2; }
.mb-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; display: block; }
/* Light veil from the left keeps the text crisp; the shop stays visible on the right. */
.mb-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(251, 250, 246, 0.97) 0%, rgba(251, 250, 246, 0.93) 36%, rgba(251, 250, 246, 0.62) 60%, rgba(251, 250, 246, 0.12) 100%);
}
.mb-hero__inner { width: min(var(--mb-container), 100% - 2 * var(--mb-gutter)); }
.mb-hero__copy { display: flex; flex-direction: column; gap: 22px; max-width: 620px; }
.mb-pill {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--mb-surface);
	box-shadow: inset 0 0 0 1px var(--mb-brand-100), var(--mb-shadow-sm);
	color: var(--mb-brand-700);
	font-size: 0.9rem;
	font-weight: 600;
}
.mb-pill .mb-icon { color: var(--mb-brand); }
.mb-hero__title { margin: 0; font-size: clamp(2.6rem, 1.6rem + 3.8vw, 4.6rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; }
.mb-hero__lead { margin: 0; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); color: var(--mb-body); max-width: 52ch; }
.mb-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mb-stats { display: flex; gap: clamp(20px, 4vw, 48px); margin: 12px 0 0; padding-top: 24px; border-top: 1px solid rgba(29, 35, 24, 0.12); }
.mb-stats div { display: flex; flex-direction: column-reverse; }
.mb-stats dt { font-size: 0.85rem; color: var(--mb-muted); }
.mb-stats dd { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; color: var(--mb-text); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Categories: quiet graphic cards (tint, icon, name) ---------- */
.mb-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mb-cat {
	--tint: var(--mb-brand-50);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 196px;
	padding: 22px;
	border-radius: var(--mb-r-lg);
	background: var(--tint);
	box-shadow: inset 0 0 0 1px rgba(29, 35, 24, 0.06);
	text-decoration: none;
	color: var(--mb-text);
	transition: transform 450ms var(--mb-ease), box-shadow 450ms var(--mb-ease);
}
/* Soft rings behind the icon give the card depth without a picture. */
.mb-cat::before {
	content: '';
	position: absolute;
	z-index: -1;
	right: -70px;
	bottom: -70px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.22), 0 0 0 56px rgba(255, 255, 255, 0.12);
	transition: transform 700ms var(--mb-ease-expo);
}
.mb-cat:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(29, 35, 24, 0.08), var(--mb-shadow); color: var(--mb-text); }
.mb-cat:hover::before { transform: scale(1.12); }
.mb-cat__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: var(--mb-surface);
	color: var(--mb-brand);
	box-shadow: var(--mb-shadow-sm);
}
.mb-cat__icon .mb-icon { width: 26px; height: 26px; stroke-width: 1.6; }
.mb-cat__art {
	position: absolute;
	z-index: -1;
	right: 18px;
	bottom: 14px;
	color: var(--mb-brand);
	opacity: 0.16;
	transition: transform 700ms var(--mb-ease-expo), opacity 400ms ease;
}
.mb-cat__art .mb-icon { width: 96px; height: 96px; stroke-width: 1.1; }
.mb-cat:hover .mb-cat__art { transform: rotate(-8deg) scale(1.08); opacity: 0.24; }
.mb-cat__body { display: flex; flex-direction: column; gap: 4px; padding-right: 44px; }
.mb-cat__name { font-weight: 700; font-size: 1.12rem; letter-spacing: -0.02em; line-height: 1.25; }
.mb-cat__count { font-size: 0.87rem; color: var(--mb-muted); }
.mb-cat__arrow {
	position: absolute;
	right: 18px;
	top: 18px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.7);
	color: var(--mb-brand);
	transition: background-color 250ms ease, color 250ms ease, transform 400ms var(--mb-ease);
}
.mb-cat:hover .mb-cat__arrow { background: var(--mb-brand); color: #fff; transform: rotate(45deg); }

/* ---------- Product cards (catalogue + homepage) ---------- */
.woocommerce ul.products li.product {
	background: var(--mb-surface);
	border-radius: var(--mb-r-lg);
	box-shadow: inset 0 0 0 1px var(--mb-line);
	padding: 12px 12px 18px;
	transition: transform 450ms var(--mb-ease), box-shadow 450ms var(--mb-ease);
	text-align: left;
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--mb-brand-100), var(--mb-shadow); }
.woocommerce ul.products li.product figure,
.woocommerce ul.products li.product .ct-media-container {
	border-radius: calc(var(--mb-r-lg) - 8px);
	overflow: hidden;
	margin-bottom: 14px;
}
.woocommerce ul.products li.product figure, .woocommerce ul.products li.product .ct-media-container { background: #fff; }
.woocommerce ul.products li.product img { transition: transform 900ms var(--mb-ease-expo); aspect-ratio: 1; object-fit: contain; width: 100%; }
.woocommerce ul.products li.product:hover img { transform: scale(1.05); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding-inline: 6px;
	font-size: 0.98rem !important;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--mb-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
}
.woocommerce ul.products li.product .price { padding-inline: 6px; color: var(--mb-brand-700) !important; font-weight: 700; font-size: 1.08rem; font-variant-numeric: tabular-nums; }
.woocommerce ul.products li.product .entry-meta { text-transform: none; letter-spacing: 0; font-size: 0.8rem; font-weight: 500; }
.woocommerce ul.products li.product .entry-meta a { color: var(--mb-muted); }
.woocommerce ul.products li.product .entry-meta,
.woocommerce ul.products li.product .ct-woo-card-extra,
.woocommerce ul.products li.product .ct-woo-card-actions { padding-inline: 6px; }
.woocommerce ul.products li.product .ct-woo-card-actions { margin-top: 12px; }
.woocommerce ul.products li.product .button {
	min-height: 40px;
	padding: 0 16px;
	font-size: 0.88rem;
	background: var(--mb-brand-50);
	color: var(--mb-brand-700);
	box-shadow: none;
}
.woocommerce ul.products li.product .button:hover { background: var(--mb-brand); color: #fff; }
.woocommerce span.onsale { display: none; }
.mb-products-wrap .woocommerce { margin: 0; }

/* ---------- Benefits ---------- */
.mb-benefits {
	list-style: none;
	margin: 0;
	padding: clamp(20px, 3vw, 28px);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	border-radius: var(--mb-r-lg);
	background: var(--mb-surface);
	box-shadow: inset 0 0 0 1px var(--mb-line);
}
.mb-benefit { display: flex; gap: 14px; align-items: flex-start; }
.mb-benefit__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--mb-brand-50); color: var(--mb-brand); flex: none; }
.mb-benefit__icon .mb-icon { width: 22px; height: 22px; }
.mb-benefit__text { display: flex; flex-direction: column; font-size: 0.92rem; color: var(--mb-muted); line-height: 1.45; }
.mb-benefit__text strong { color: var(--mb-text); font-size: 1rem; margin-bottom: 2px; }

/* ---------- Split (about teaser) ---------- */
.mb-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.mb-split__media { border-radius: var(--mb-r-lg); overflow: hidden; aspect-ratio: 5 / 4; box-shadow: var(--mb-shadow); }
.mb-split__media > div { height: 100%; }
.mb-split__media img { width: 100%; height: 112%; object-fit: cover; display: block; }
.mb-split__copy { display: flex; flex-direction: column; gap: 18px; }
.mb-split__copy p { margin: 0; }
.mb-checks { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 12px; }
.mb-checks li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--mb-text); }
.mb-checks .mb-icon { color: var(--mb-brand); width: 20px; height: 20px; }

/* ---------- Steeping guide ---------- */
.mb-steep { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.mb-steep__intro { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.mb-steep__intro .mb-head__lead { margin: 0; }
.mb-steep__card {
	background: var(--mb-surface);
	border-radius: var(--mb-r-lg);
	box-shadow: inset 0 0 0 1px var(--mb-line), var(--mb-shadow);
	padding: clamp(20px, 3vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.mb-segment {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	padding: 5px;
	border-radius: 999px;
	background: var(--mb-surface-2);
}
.mb-segment__pill {
	position: absolute;
	top: 5px;
	bottom: 5px;
	left: 0;
	width: 0;
	border-radius: 999px;
	background: var(--mb-surface);
	box-shadow: var(--mb-shadow-sm), 0 4px 12px -6px rgba(29, 35, 24, 0.25);
	transition: transform 450ms var(--mb-ease), width 450ms var(--mb-ease);
}
.mb-segment__tab {
	all: unset;
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 10px 6px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.93rem;
	color: var(--mb-muted);
	cursor: pointer;
	transition: color 250ms ease;
}
.mb-segment__tab[aria-selected="true"] { color: var(--mb-text); }
.mb-segment__tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--mb-brand) 55%, transparent); }
.mb-steep__panel h3 { margin: 0 0 8px; font-size: 1.35rem; }
.mb-steep__panel p { margin: 0; color: var(--mb-body); }
.mb-steep__panel:not([hidden]) { animation: mb-fade-in 450ms var(--mb-ease) both; }
@keyframes mb-fade-in { from { opacity: 0; transform: translateY(8px); } }
.mb-steep__facts { list-style: none; display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; padding: 0; }
.mb-steep__facts li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--mb-brand-50); color: var(--mb-brand-700); font-weight: 600; font-size: 0.9rem; }
.mb-timer {
	all: unset;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 60px;
	padding: 0 24px;
	border-radius: 999px;
	background: var(--mb-text);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	transition: transform 160ms var(--mb-ease), background-color 250ms ease;
}
.mb-timer:hover { background: var(--mb-brand-700); }
.mb-timer:active { transform: scale(0.98); }
.mb-timer:focus-visible { outline: 3px solid color-mix(in srgb, var(--mb-brand) 55%, transparent); outline-offset: 3px; }
.mb-timer::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--mb-brand);
	transform: scaleX(var(--progress, 0));
	transform-origin: left;
	transition: transform 1000ms linear;
}
.mb-timer.is-done { background: var(--mb-brand); }
.mb-timer__clock { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ---------- Posts ---------- */
.mb-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mb-post { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--mb-text); }
.mb-post__media { display: block; aspect-ratio: 16 / 10; border-radius: var(--mb-r-lg); overflow: hidden; margin-bottom: 8px; background: var(--mb-surface-2); }
.mb-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms var(--mb-ease-expo); }
.mb-post:hover .mb-post__media img { transform: scale(1.05); }
.mb-post__meta { font-size: 0.82rem; font-weight: 600; color: var(--mb-brand); }
.mb-post__title { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; transition: color 200ms ease; }
.mb-post:hover .mb-post__title { color: var(--mb-brand); }
.mb-post__excerpt { font-size: 0.95rem; color: var(--mb-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Visit ---------- */
.mb-visit { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 24px; align-items: stretch; }
.mb-visit__card {
	background: var(--mb-surface);
	border-radius: var(--mb-r-lg);
	box-shadow: inset 0 0 0 1px var(--mb-line);
	padding: clamp(24px, 3vw, 36px);
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.mb-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mb-contact li { display: flex; align-items: center; gap: 12px; }
.mb-contact .mb-icon { color: var(--mb-brand); width: 20px; height: 20px; }
.mb-contact a { color: var(--mb-text); text-decoration: none; font-weight: 600; }
.mb-contact a:hover { color: var(--mb-brand); }
.mb-hours { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 0; border: 0 !important; }
.mb-hours tr { border: 0 !important; }
.mb-hours th, .mb-hours td { padding: 9px 12px; border: 0; border-bottom: 1px solid var(--mb-line); text-align: left; font-weight: 500; }
.mb-hours td { text-align: right; font-variant-numeric: tabular-nums; color: var(--mb-muted); }
.mb-hours tr.is-today th, .mb-hours tr.is-today td { color: var(--mb-brand-700); font-weight: 700; background: var(--mb-brand-50); }
.mb-hours tr.is-today th { border-radius: 10px 0 0 10px; }
.mb-hours tr.is-today td { border-radius: 0 10px 10px 0; }
.mb-visit__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.mb-visit__map { border-radius: var(--mb-r-lg); overflow: hidden; min-height: 420px; box-shadow: inset 0 0 0 1px var(--mb-line); }
.mb-visit__map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }

/* ---------- Inner pages ---------- */
.hero-section[data-type="type-2"] { background: var(--mb-surface-2); }
.entry-content .wp-block-image img { border-radius: var(--mb-r-lg); }
.entry-content .wp-block-image figcaption { font-size: 0.88rem; color: var(--mb-muted); text-align: center; }
.entry-content .wp-block-embed iframe { border-radius: var(--mb-r-lg); }
.entry-content .wp-block-columns { gap: clamp(20px, 3vw, 40px); }
.mamabio-homework-note { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--mb-brand-50); color: var(--mb-brand-700); font-weight: 600; font-size: 0.92rem; }
.mamabio-note { color: var(--mb-muted); font-size: 0.92rem; padding: 14px 18px; border-radius: var(--mb-r); background: var(--mb-surface-2); }
.mamabio-map iframe { width: 100%; height: clamp(320px, 40vw, 460px); border: 0; display: block; border-radius: var(--mb-r-lg); }
.wpcf7 label { display: block; font-weight: 600; font-size: 0.92rem; color: var(--mb-text); }
.wpcf7 input:not([type="submit"]):not([type="checkbox"]), .wpcf7 textarea {
	width: 100%;
	margin-top: 6px;
	border-radius: var(--mb-r-sm);
	border: 1px solid var(--mb-line);
	background: var(--mb-surface);
	transition: border-color 200ms ease, box-shadow 200ms ease;
}
.wpcf7 input:focus, .wpcf7 textarea:focus { border-color: var(--mb-brand); box-shadow: 0 0 0 4px var(--mb-brand-50); outline: none; }
.wpcf7 .wpcf7-acceptance { font-size: 0.9rem; }

/* Single product */
.mamabio-store-note {
	margin: 24px 0;
	padding: 20px 22px;
	border-radius: var(--mb-r);
	background: var(--mb-brand-50);
	box-shadow: inset 0 0 0 1px var(--mb-brand-100);
}
.mamabio-store-note strong { display: block; font-size: 1.1rem; color: var(--mb-text); }
.mamabio-store-note p { margin: 6px 0 14px; color: var(--mb-body); }
.single-product .product_title { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); }
.single-product div.product p.price { font-size: 1.8rem; font-weight: 800; color: var(--mb-brand-700); }
.single-product .woocommerce-product-gallery img { border-radius: var(--mb-r-lg); }

/* ---------- Footer ---------- */
#footer { background: var(--mb-brand-700); color: #cfdcc2; }
#footer [data-row="middle"] { padding-block: clamp(48px, 6vw, 72px) 32px; }
#footer [data-row="middle"] > .ct-container { display: grid !important; grid-template-columns: 1.1fr 1fr 1fr 1.2fr; gap: 40px; }
@media (max-width: 999px) { #footer [data-row="middle"] > .ct-container { grid-template-columns: 1fr 1fr; gap: 32px 24px; } }
@media (max-width: 560px) { #footer [data-row="middle"] > .ct-container { grid-template-columns: 1fr; } }
#footer h3 { color: #fff; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 14px; }
#footer, #footer p, #footer li { font-size: 0.95rem; color: #cfdcc2; }
#footer a { color: #f1f5ec; text-decoration: none; }
#footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
#footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
#footer [data-row="bottom"] { border-top: 1px solid rgba(255, 255, 255, 0.12); }
#footer .ct-footer-copyright { font-size: 0.85rem; color: #a9bb98; }

/* ---------- Motion: entrances (content stays visible without JS) ---------- */
.mb-js [data-reveal]:not(.is-in),
.mb-js [data-reveal-list]:not(.is-in) > *,
.mb-js [data-reveal-list]:not(.is-in) ul.products > li {
	opacity: 0;
	transform: translateY(18px);
}
.mb-js [data-reveal],
.mb-js [data-reveal-list] > *,
.mb-js [data-reveal-list] ul.products > li {
	transition: opacity 700ms var(--mb-ease), transform 800ms var(--mb-ease-expo), box-shadow 450ms var(--mb-ease);
	transition-delay: var(--delay, 0ms);
}
.mb-js [data-reveal-list].is-in ul.products > li:hover { transition-delay: 0ms; }
.mb-js [data-reveal="media"]:not(.is-in) { opacity: 1; transform: none; clip-path: inset(8% 8% 8% 8% round var(--mb-r-lg)); }
.mb-js [data-reveal="media"] { transition: clip-path 1200ms var(--mb-ease-expo); clip-path: inset(0 0 0 0 round var(--mb-r-lg)); }
.mb-js [data-reveal="media"] img { transition: transform 1600ms var(--mb-ease-expo); }
.mb-js [data-reveal="media"]:not(.is-in) img { transform: scale(1.12); }
.mb-js .mb-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.mb-js .mb-word > span { display: inline-block; transform: translateY(105%); transition: transform 900ms var(--mb-ease-expo); transition-delay: var(--delay, 0ms); }
.mb-js [data-split].is-in .mb-word > span { transform: none; }
[data-parallax] { will-change: transform; }

/* Page to page */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: mb-page-out 260ms ease both; }
::view-transition-new(root) { animation: mb-page-in 420ms var(--mb-ease) both; }
@keyframes mb-page-out { to { opacity: 0; } }
@keyframes mb-page-in { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	.mb-js [data-reveal], .mb-js [data-reveal-list] > *, .mb-js [data-reveal-list] ul.products > li, .mb-js .mb-word > span, .mb-js [data-reveal="media"], .mb-js [data-reveal="media"] img {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.mb-split, .mb-steep, .mb-visit { grid-template-columns: 1fr; }
	.mb-cats { grid-template-columns: repeat(2, 1fr); }
	.mb-benefits { grid-template-columns: repeat(2, 1fr); }
	.mb-posts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 689px) {
	body { font-size: 16px; }
	.mb-head { flex-direction: column; align-items: flex-start; gap: 12px; }
	.mb-hero { min-height: auto; padding-block: 56px 64px; }
	.mb-hero::before { background: linear-gradient(180deg, rgba(251, 250, 246, 0.95) 0%, rgba(251, 250, 246, 0.9) 70%, rgba(251, 250, 246, 0.82) 100%); }
	.mb-hero__title { font-size: clamp(2.3rem, 10vw, 3rem); }
	.mb-stats { gap: 18px; }
	.mb-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
	.mb-stats dd { font-size: 1.2rem; white-space: nowrap; }
	#header .site-logo-container img { height: 46px !important; }
	.mb-cats { gap: 12px; }
	.mb-cat { min-height: 160px; padding: 16px; }
	.mb-cat__icon { width: 44px; height: 44px; }
	.mb-cat__name { font-size: 0.98rem; }
	.mb-cat__arrow { display: none; }
	.mb-cat__body { padding-right: 0; }
	.mb-benefits { grid-template-columns: 1fr; }
	.mb-posts { grid-template-columns: 1fr; }
	.mb-segment__tab { font-size: 0.85rem; padding: 9px 2px; }
	.mb-visit__map, .mb-visit__map iframe { min-height: 320px; }
	#header .ct-header-text p { gap: 4px 16px; font-size: 0.8rem; }
}

/* ---------- Catalogue: category chips ---------- */
.mb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; width: 100%; }
.mb-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--mb-surface);
	box-shadow: inset 0 0 0 1px var(--mb-line);
	color: var(--mb-text);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 160ms var(--mb-ease);
}
.mb-chip span { font-size: 0.78rem; color: var(--mb-muted); font-weight: 500; }
.mb-chip:hover { background: var(--mb-brand-50); color: var(--mb-brand-700); box-shadow: inset 0 0 0 1px var(--mb-brand-100); }
.mb-chip:active { transform: scale(0.97); }
.mb-chip.is-active { background: var(--mb-brand); color: #fff; box-shadow: none; }
.mb-chip.is-active span { color: rgba(255, 255, 255, 0.75); }
.woocommerce-result-count { text-transform: none !important; letter-spacing: 0 !important; font-size: 0.9rem !important; color: var(--mb-muted); }
.woo-listing-top { flex-wrap: wrap; }
@media (max-width: 689px) {
	.mb-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--mb-gutter)); padding-inline: var(--mb-gutter); scrollbar-width: none; }
	.mb-chip { flex: none; }
}

/* ---------- Contact page ---------- */
.mb-contact-page { display: flex; flex-direction: column; gap: 24px; margin-top: 8px; }
.mb-contact-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mb-contact-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	border-radius: var(--mb-r-lg);
	background: var(--mb-surface);
	box-shadow: inset 0 0 0 1px var(--mb-line);
	transition: transform 400ms var(--mb-ease), box-shadow 400ms var(--mb-ease);
}
.mb-contact-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--mb-brand-100), var(--mb-shadow); }
.mb-contact-card__title { font-size: 1rem !important; font-weight: 700; margin: 6px 0 0 !important; letter-spacing: -0.01em; }
.mb-contact-card p { margin: 0; color: var(--mb-body); font-size: 0.97rem; max-width: none; }
.mb-contact-card p a { color: var(--mb-text); font-weight: 600; text-decoration: none; }
.mb-contact-card .mb-link { margin-top: auto; font-size: 0.92rem; }
.mb-contact-main { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; }
.mb-contact-form, .mb-company {
	padding: clamp(24px, 3vw, 40px);
	border-radius: var(--mb-r-lg);
	background: var(--mb-surface);
	box-shadow: inset 0 0 0 1px var(--mb-line);
}
.mb-contact-form .mb-head__title { margin: 0 !important; }
.mb-contact-form .mb-head__lead { margin-bottom: 24px; }
.mb-contact-form .wpcf7 p { margin: 0 0 16px; max-width: none; }
.mb-contact-form input[type="submit"] { width: 100%; margin-top: 4px; }
.mb-contact-side { display: flex; flex-direction: column; gap: 24px; }
.mb-contact-side .mb-visit__map { flex: 1; min-height: 360px; }
.mb-company p { margin: 8px 0 0; color: var(--mb-muted); font-size: 0.93rem; }
.mb-contact-page .mamabio-homework-note { align-self: flex-start; margin: 0; }

/* ---------- Privacy tables ---------- */
.mb-table table { border-collapse: separate; border-spacing: 0; width: 100%; border: 1px solid var(--mb-line) !important; border-radius: var(--mb-r); overflow: hidden; font-size: 0.95rem; }
.mb-table th, .mb-table td { padding: 12px 16px; border: 0 !important; border-bottom: 1px solid var(--mb-line) !important; vertical-align: top; text-align: left; }
.mb-table tr:last-child th, .mb-table tr:last-child td { border-bottom: 0 !important; }
.mb-table th { width: 30%; background: var(--mb-surface-2); color: var(--mb-text); font-weight: 600; }
.mb-table td { background: var(--mb-surface); }

/* ---------- Footer brand ---------- */
.mb-footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.mb-footer-brand__logo { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; flex: none; overflow: hidden; }
.mb-footer-brand__logo img { width: 58px; height: 58px; object-fit: contain; }
.mb-footer-brand__name { color: #fff; font-weight: 700; font-size: 1.05rem; line-height: 1.3; letter-spacing: -0.01em; }

/* ---------- Mobile menu (off-canvas panel) ---------- */
#offcanvas { --theme-link-initial-color: var(--mb-text); }
#offcanvas .ct-panel-inner {
	background: var(--mb-bg) !important;
	box-shadow: -24px 0 60px -20px rgba(29, 35, 24, 0.35);
	width: min(420px, 90vw);
	margin-left: auto;
}
#offcanvas.ct-panel { background: rgba(29, 35, 24, 0.45) !important; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#offcanvas .ct-panel-actions { padding: 18px 20px 6px; }
#offcanvas .ct-toggle-close {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--mb-surface);
	box-shadow: inset 0 0 0 1px var(--mb-line);
	color: var(--mb-text);
	display: grid;
	place-items: center;
	--theme-icon-color: var(--mb-text);
}
#offcanvas .ct-panel-content-inner { padding: 8px 20px 28px; display: flex; flex-direction: column; gap: 20px; align-items: stretch; }
#offcanvas .mobile-menu { width: 100%; }
#offcanvas .mobile-menu > ul > li { border-bottom: 1px solid var(--mb-line); }
#offcanvas .mobile-menu > ul > li > .ct-menu-link,
#offcanvas .mobile-menu > ul > li > .ct-sub-menu-parent > .ct-menu-link {
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--mb-text);
	padding-block: 16px;
	text-transform: none;
}
#offcanvas .mobile-menu li.current-menu-item > .ct-menu-link { color: var(--mb-brand); }
#offcanvas .mobile-menu .sub-menu { padding: 0 0 12px; }
#offcanvas .mobile-menu .sub-menu .ct-menu-link { font-size: 1rem; font-weight: 500; color: var(--mb-body); padding: 8px 0 8px 14px; text-transform: none; }
#offcanvas .ct-toggle-dropdown-mobile { border-radius: 50%; background: var(--mb-brand-50); color: var(--mb-brand); }
#offcanvas .ct-header-cta { width: 100%; }
#offcanvas .ct-header-cta .ct-button { width: 100%; min-height: 54px; font-size: 1.05rem; }
#offcanvas .ct-header-text { width: 100%; padding: 18px 20px; border-radius: var(--mb-r); background: var(--mb-brand-50); box-shadow: inset 0 0 0 1px var(--mb-brand-100); color: var(--mb-body); font-size: 0.95rem; }
#offcanvas .ct-header-text p { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; }
#offcanvas .ct-header-text a { color: var(--mb-brand-700) !important; font-weight: 700; text-decoration: none; }
#offcanvas .mobile-menu > ul > li { opacity: 0; transform: translateX(24px); transition: opacity 400ms var(--mb-ease), transform 500ms var(--mb-ease-expo); }
#offcanvas.active .mobile-menu > ul > li { opacity: 1; transform: none; }
#offcanvas.active .mobile-menu > ul > li:nth-child(2) { transition-delay: 50ms; }
#offcanvas.active .mobile-menu > ul > li:nth-child(3) { transition-delay: 100ms; }
#offcanvas.active .mobile-menu > ul > li:nth-child(4) { transition-delay: 150ms; }
#offcanvas.active .mobile-menu > ul > li:nth-child(5) { transition-delay: 200ms; }
@media (prefers-reduced-motion: reduce) { #offcanvas .mobile-menu > ul > li { opacity: 1; transform: none; transition: none; } }

@media (max-width: 1024px) {
	.mb-contact-cards { grid-template-columns: repeat(2, 1fr); }
	.mb-contact-main { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.mb-contact-cards { grid-template-columns: 1fr; }
	.mb-table th { width: 38%; }
}