/* mb-tokens: css/base/tokens.css */
/*
 * MULTIBOOM design tokens.
 *
 * Source: the :root blocks of the static site (site/polish.css, site/styles.css)
 * plus values harvested from the component files. Stage A keeps every component
 * file using its literal values; Stage B swaps literals for these tokens.
 * Mirrored in theme.json (settings.color.palette).
 *
 * Breakpoints (Stage B, mobile-first, min-width only):
 *   641px  tablet
 *   1025px desktop (matches the nav/drawer switch)
 *   1200px wide
 * Custom properties cannot be used inside @media queries; the numbers above
 * are the contract.
 */
:root {
	/* From site/styles.css */
	--cream: #f6f3f0;
	--ink: #1a1a1a;

	/* From site/polish.css */
	--mb-canvas: #f6f3f0;
	--mb-coral: #f04e37;
	--mb-pink: #ef7db0;
	--mb-green: #459e40;
	--mb-orange: #f38121;
	--mb-focus: color-mix(in oklch, var(--mb-coral), white 18%);
	--mb-focus-halo: color-mix(in oklch, var(--mb-coral), transparent 74%);

	/* Harvested colours */
	--mb-white: #fff;
	--mb-ink: #1a1a1a;
	--mb-ink-soft: #2b2726;
	--mb-ink-muted: #625d5a;
	--mb-gray-700: #374151;
	--mb-gray-600: #4b5563;
	--mb-gray-400: #9ca3af;
	--mb-heading: #111827;
	--mb-red: #d9222a;
	--mb-red-bright: #f22b24;
	--mb-coral-soft: #fdf0ee;
	--mb-peach: #fff0ea;
	--mb-orange-bright: #ff7f22;
	--mb-rose: #ed7190;
	--mb-field-bg: #fdfaf8;
	--mb-field-border: #f0e6e1;
	--mb-card-border: #f0edea;
	--mb-footer-bg: #fffcfa;
	--mb-viber: #7360f2;
	--mb-whatsapp-bg: #eefaf0;
	--mb-gradient-hero: linear-gradient(108deg, #f04436 0%, #f53b4a 46%, #f82d89 100%);

	/* Radii */
	--mb-radius-xs: 8px;
	--mb-radius-sm: 12px;
	--mb-radius-md: 16px;
	--mb-radius-lg: 20px;
	--mb-radius-xl: 26px;
	--mb-radius-2xl: 28px;
	--mb-radius-3xl: 32px;
	--mb-radius-4xl: 36px;
	--mb-radius-pill: 999px;

	/* Shadows */
	--mb-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.04);
	--mb-shadow-md: 0 10px 28px rgba(92, 54, 42, 0.07);
	--mb-shadow-lg: 0 26px 60px rgba(74, 43, 32, 0.14);
	--mb-shadow-coral: 0 8px 20px rgba(240, 78, 56, 0.28);

	/* z-index scale */
	--mb-z-base: 1;
	--mb-z-header: 2;
	--mb-z-nav: 5;
	--mb-z-mega: 6;
	--mb-z-popover: 30;
	--mb-z-drawer: 20;
	--mb-z-sticky: 80;
	--mb-z-badge: 90;
	--mb-z-skip: 100;

	/* Typography */
	--mb-font-sans: "MB Sans", "MB Sans Fallback", "Noto Sans Armenian", system-ui, sans-serif;
	--mb-fs-body: clamp(15px, 0.9rem + 0.2vw, 16px);
	--mb-fs-h3: clamp(18px, 1rem + 0.6vw, 22px);
	--mb-fs-h2: clamp(28px, 1.2rem + 2.4vw, 46px);
	--mb-fs-h1: clamp(30px, 1.3rem + 3vw, 56px);

	/* Layout */
	--mb-content: 1110px;
	--mb-gutter: clamp(12px, 2.5vw, 20px);
	--mb-header-h: 96px;
}

/* mb-fonts: css/base/fonts.css */
/*
 * "MB Sans": self-hosted Noto Sans Armenian (armenian subset) + Noto Sans
 * (latin, latin-ext, cyrillic subsets). Variable weight 400–800.
 * Files and unicode-ranges from the Google Fonts CSS2 API
 * (Noto Sans v42, Noto Sans Armenian v47).
 */
@font-face {
	font-family: "MB Sans";
	font-style: normal;
	font-weight: 400 800;
	font-stretch: 100%;
	font-display: swap;
	src: url("https://multiboom2016.com/wp-content/themes/multiboom/assets/css/base/../../fonts/mb-sans-armenian.woff2") format("woff2");
	unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17;
}

@font-face {
	font-family: "MB Sans";
	font-style: normal;
	font-weight: 400 800;
	font-stretch: 100%;
	font-display: swap;
	src: url("https://multiboom2016.com/wp-content/themes/multiboom/assets/css/base/../../fonts/mb-sans-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "MB Sans";
	font-style: normal;
	font-weight: 400 800;
	font-stretch: 100%;
	font-display: swap;
	src: url("https://multiboom2016.com/wp-content/themes/multiboom/assets/css/base/../../fonts/mb-sans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "MB Sans";
	font-style: normal;
	font-weight: 400 800;
	font-stretch: 100%;
	font-display: swap;
	src: url("https://multiboom2016.com/wp-content/themes/multiboom/assets/css/base/../../fonts/mb-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-adjusted local fallback so the swap does not shift layout. */
@font-face {
	font-family: "MB Sans Fallback";
	src: local("Arial"), local("ArialMT"), local("Liberation Sans");
	size-adjust: 105.5%;
	ascent-override: 101%;
	descent-override: 27%;
	line-gap-override: 0%;
}

/* mb-reset: css/base/reset.css */
/* Minimal reset, moved verbatim from site/styles.css (Stage A). */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	min-height: 100%;
}

/* mb-a11y: css/base/a11y.css */
/*
 * Global accessibility rules moved from site/polish.css: skip link, focus ring,
 * reduced motion, forced colours.
 *
 * Specificity note: this file loads before every component file, while the
 * static site had these rules last (polish.css). The focus ring therefore uses
 * :is(a, button, input, select, textarea) (0,1,1) instead of :where() (0,1,0)
 * so it still beats single-class `outline: none` rules in later files, and
 * still loses to element+class rules such as `.order-stepper__field input`,
 * exactly as it did in the static cascade.
 */
.skip-link {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 100;
	min-height: 44px;
	padding: 11px 18px;
	transform: translateY(-150%);
	border: 2px solid white;
	border-radius: 999px;
	background: var(--mb-coral);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
	box-shadow: 0 8px 24px color-mix(in oklch, black, transparent 78%);
	color: white;
	font-weight: 800;
	text-decoration: none;
	transition: transform 160ms ease;
}

.skip-link:focus {
	transform: translateY(0);
}

:is(a, button, input, select, textarea):focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--mb-focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--mb-focus-halo);
}

#main-content:focus-visible {
	outline: none;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

@media (forced-colors: active) {
	:is(a, button, input, select, textarea):focus-visible,
	[tabindex]:focus-visible {
		outline-color: Highlight;
	}
}

/* mb-layout: css/base/layout.css */
/* Base layout (Stage B, mobile-first): page shell, anchors, the homepage hero box
   and the background decorations. Tokens live in base/tokens.css, the reset in
   base/reset.css, focus/motion rules in base/a11y.css, scroll-padding in
   components/header.css. Breakpoints: 641px / 1025px (min-width only). */

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

html {
	overflow-x: clip;
	scroll-behavior: smooth;
}

body {
	position: relative;
	overflow-x: clip;
	background-color: var(--cream);
	color: var(--ink);
	font-family: var(--mb-font-sans);
}

.anchor-target {
	display: block;
	width: 1px;
	height: 1px;
	scroll-margin-top: calc(var(--mb-header-h, 96px) + var(--mb-admin-bar-h, 0px) + 12px);
}

/* Page shell (homepage and every template reuse it). */
.multiboom-home {
	position: relative;
	z-index: 1;
	min-height: 100svh;
	padding: 24px max(12px, env(safe-area-inset-right)) 80px max(12px, env(safe-area-inset-left));
	background-color: transparent;
}

/* Keep homepage section spacing consistent, including after carousel controls. */
.multiboom-home--homepage {
	--mb-home-section-gap: clamp(64px, 6vw, 96px);
}

.multiboom-home--homepage > section {
	margin-block: 0;
}

.multiboom-home--homepage > section:not(:last-of-type) {
	margin-block-end: var(--mb-home-section-gap);
}

/* Homepage hero box. */
.hero-section {
	position: relative;
	display: flex;
	justify-content: center;
	width: min(1110px, 100%);
	min-height: 420px;
	margin: 0 auto;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 28px;
	background: linear-gradient(108deg, #f04436 0%, #f53b4a 46%, #f82d89 100%);
	color: #fff;
}

.hero-section::after {
	position: absolute;
	right: -2%;
	bottom: 0;
	left: -2%;
	height: 18%;
	background: rgba(255, 255, 255, 0.08);
	clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
	content: "";
	pointer-events: none;
}

.hero-section__content {
	position: relative;
	z-index: 1;
	display: flex;
	/* 28px side inset up to 390px, 32px above (the approved two steps). */
	width: min(820px, calc(100% - clamp(28px, 28px + (100vw - 390px) * 4, 32px)));
	flex-direction: column;
	align-items: center;
	padding-top: 85px;
	text-align: center;
}

.hero-section__title {
	margin: 0;
	color: #fff;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.2;
}

.hero-section__message {
	display: grid;
	width: 100%;
	min-height: 98px;
	margin-top: 2px;
	place-items: center;
	transform: rotate(-1.5deg);
	border-radius: 100px;
	background: #fff;
	box-shadow: 0 12px 28px rgba(157, 23, 36, 0.08);
	color: #d9222a;
	font-size: 27px;
	font-weight: 800;
	line-height: 1.2;
}

.hero-section__message span {
	transform: none;
}

.hero-section__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 206px;
	height: 50px;
	margin-top: 28px;
	padding: 0 28px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 8px 16px rgba(157, 23, 36, 0.08);
	color: #d9222a;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hero-section__cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px rgba(157, 23, 36, 0.2);
}

@media (hover: hover) {
	.hero-section__cta:hover {
		transform: translateY(-2px);
		box-shadow: 0 12px 24px rgba(157, 23, 36, 0.2);
	}
}

@media (min-width: 641px) {
	.multiboom-home {
		padding-inline: clamp(16px, 2.5vw, 24px);
	}

	.hero-section {
		min-height: clamp(440px, 54vw, 520px);
		border-radius: 32px;
	}

	.hero-section__content {
		width: min(720px, calc(100% - 56px));
		padding-top: clamp(96px, 13vw, 126px);
	}

	.hero-section__title {
		font-size: clamp(38px, 5vw, 56px);
	}

	.hero-section__message {
		min-height: 104px;
		font-size: clamp(32px, 5vw, 42px);
	}

	.hero-section__cta {
		min-width: 235px;
		font-size: 16px;
	}
}

@media (min-width: 1025px) {
	.multiboom-home {
		padding-inline: 20px;
	}

	.hero-section {
		min-height: 577px;
		border-radius: 36px;
	}

	.hero-section__content {
		width: min(820px, calc(100% - 48px));
		padding-top: 139px;
	}

	.hero-section__message {
		min-height: 146px;
		font-size: clamp(32px, 4.7vw, 54px);
	}

	.hero-section__cta {
		height: 55px;
		margin-top: 47px;
	}
}

/* Floating sticker layer (assets/js/decorations.js). */
.bg-decorations {
	position: absolute;
	top: 0;
	inset-inline: 0;
	z-index: 0;
	width: 100%;
	overflow: clip;
	contain: layout paint;
	pointer-events: none;
}

.bg-decorations__band {
	position: absolute;
	left: 0;
	width: 100%;
}

.bg-decoration {
	position: absolute;
	display: block;
	user-select: none;
	opacity: 0.92;
	animation: bg-decor-float var(--float-duration, 7s) ease-in-out
		var(--float-delay, 0s) infinite alternate;
	will-change: transform;
}

@keyframes bg-decor-float {
	from {
		translate: 0 0;
	}

	to {
		translate: 0 -10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bg-decoration {
		animation: none;
	}
}

/* mb-utilities: css/base/utilities.css */
/*
 * Utility classes (scaffold). Stage A keeps .visually-hidden in layout.css
 * where the static site defined it; Stage B moves shared utilities here.
 */

/* Per-breakpoint label variants (header/hero CTA): mobile <1025px, desktop >=1025px. */
@media (max-width: 1024.98px) {
	.mb-only-desktop {
		display: none !important;
	}
}

@media (min-width: 1025px) {
	.mb-only-mobile {
		display: none !important;
	}
}

/* mb-icons: css/components/icons.css */
/* Tabler Icons: retain each component's size and color. */
.icon-tabler { display: inline-block; flex-shrink: 0; vertical-align: middle; }
.mb-icon-gold { color: #f59e0b; }
.mb-icon-coral { color: #f04e38; }
.mb-icon-white { color: #fff; }
.mb-icon-green { color: #065f46; }
.mb-icon-orange { color: #9a3412; }
.mb-icon-purple { color: #5b21b6; }
.mb-icon-blue { color: #1e3a8a; }
.mb-icon-viber { color: #7360f2; }
.site-header__menu-toggle { color: var(--mb-coral); }
.site-header__menu-toggle .mb-menu-close { display: none; }
.site-header__menu-toggle[aria-expanded="true"] .mb-menu-open { display: none; }
.site-header__menu-toggle[aria-expanded="true"] .mb-menu-close { display: block; }
.review-card__stars { display: inline-flex; align-items: center; gap: 2px; }
.viber-badge { color: #fff; }
.viber-badge .icon-tabler { width: 32px; height: 32px; }

/* mb-announcement: css/components/announcement.css */
/* Announcement bar (header, every page). Mobile-first. The bar is a size
   container: its layout follows its own width (container queries at 521px
   = roomier stack, 901px = one row), so it works in any header width.
   Slides share one grid cell, so the bar never changes height between slides;
   announcement.js slides them with `translate`. */

.announcement-bar {
	container: announcement-bar / inline-size;
	position: relative;
	z-index: var(--mb-z-header);
	width: 100%;
	overflow: hidden;
}

.announcement-bar__viewport {
	overflow: hidden;
}

.announcement-bar__track {
	display: grid;
	width: 100%;
}

.announcement-bar__slide {
	display: flex;
	min-width: 0;
	min-height: 113px;
	grid-area: 1 / 1;
	align-items: center;
	justify-content: center;
	padding: 14px 12px 24px;
	visibility: hidden;
	translate: 100% 0;
	transition: translate 0.65s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.65s;
}

.announcement-bar__slide.is-active,
.announcement-bar__slide.is-leaving {
	visibility: visible;
	transition: translate 0.65s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}

.announcement-bar__slide.is-active {
	translate: 0 0;
}

.announcement-bar__slide.is-instant {
	transition: none;
}

.announcement-bar__inner {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	text-align: center;
}

.announcement-bar__copy {
	display: flex;
	width: 100%;
	min-width: 0;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.announcement-bar__tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 16px 5px;
	border-radius: 40px;
	background: #00f4ff;
	color: #111;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}

.announcement-bar__title {
	margin: 0;
	color: var(--mb-white);
	font-size: clamp(17px, 4.6vw, 20px);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
	text-transform: uppercase;
}

.announcement-bar__subtitle {
	width: 100%;
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
	font-size: 13px;
	line-height: 1.2;
}

.announcement-bar__actions {
	display: flex;
	width: 100%;
	flex-shrink: 0;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.announcement-bar__btn,
.announcement-bar__link {
	display: inline-flex;
	min-width: 0;
	min-height: 44px;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 10px;
	border: none;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.18;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.announcement-bar__btn {
	background: var(--mb-white);
	box-shadow: 3px 3px 20px rgba(255, 255, 255, 0.45);
	color: #222;
}

.announcement-bar__link {
	background: #00f4ff;
	color: #222;
}

.announcement-bar__link svg {
	flex-shrink: 0;
}

.announcement-bar__dots {
	position: absolute;
	bottom: 6px;
	left: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 6px;
	transform: translateX(-50%);
}

.announcement-bar__dot {
	position: relative;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: var(--mb-radius-pill);
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: width 0.25s ease, background-color 0.2s ease;
}

/* Taller hit area without changing the dot's look (not wider than half the
   gap, so neighbouring dots never steal each other's clicks). */
.announcement-bar__dot::before {
	position: absolute;
	inset: -12px -3px;
	content: "";
}

.announcement-bar__dot.is-active {
	width: 16px;
	background: var(--mb-white);
}

/* Slide themes (mb_promo `style` field). */
.announcement-bar__slide--invite {
	background:
		radial-gradient(circle at 18% 50%, rgba(255, 255, 255, 0.18) 0 18%, transparent 19%),
		radial-gradient(circle at 82% 40%, rgba(255, 255, 255, 0.14) 0 16%, transparent 17%),
		linear-gradient(90deg, #7b6fd6 0%, #25d2da 55%, #6ecde8 100%);
}

.announcement-bar__slide--mario {
	background:
		radial-gradient(circle at 15% 80%, rgba(255, 255, 255, 0.12) 0 20%, transparent 21%),
		linear-gradient(90deg, #fa0104 0%, #ff4d4f 100%);
}

.announcement-bar__slide--mario .announcement-bar__tag {
	background: var(--mb-white);
	color: #fa0104;
}

.announcement-bar__slide--mario .announcement-bar__btn {
	border: 2px solid var(--mb-white);
	background: #fa0104;
	box-shadow: none;
	color: var(--mb-white);
}

.announcement-bar__slide--mario .announcement-bar__link {
	background: var(--mb-white);
	color: #fa0104;
}

.announcement-bar__slide--minecraft {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)),
		repeating-linear-gradient(90deg, #5cb85c 0 24px, #4cae4c 24px 48px);
}

.announcement-bar__slide--minecraft .announcement-bar__tag {
	background: var(--mb-white);
	color: #2d7a2d;
}

.announcement-bar__slide--minecraft .announcement-bar__title {
	font-family: "Courier New", monospace;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
}

.announcement-bar__slide--minecraft .announcement-bar__btn {
	color: #fa0104;
}

.announcement-bar__slide--graduation {
	background: linear-gradient(90deg, var(--mb-coral) 0%, var(--mb-orange) 58%, #ef7db0 100%);
}

.announcement-bar__slide--graduation .announcement-bar__tag {
	background: var(--mb-white);
	color: var(--mb-coral);
}

.announcement-bar__btn:focus-visible,
.announcement-bar__link:focus-visible {
	transform: translateY(-1px);
}

.announcement-bar__dot:focus-visible {
	outline-color: var(--mb-white);
	box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.22);
	box-shadow: 0 0 0 5px color-mix(in oklch, black, transparent 78%);
}

@media (hover: hover) {
	.announcement-bar__btn:hover,
	.announcement-bar__link:hover {
		transform: translateY(-1px);
	}
}

/* Roomier stack: copy on one centred line, buttons sized to their labels. */
@container announcement-bar (min-width: 521px) {
	.announcement-bar__slide {
		padding-inline: 16px;
	}

	.announcement-bar__inner {
		gap: 14px;
	}

	.announcement-bar__copy {
		width: auto;
		gap: 10px 12px;
	}

	.announcement-bar__title {
		font-size: clamp(18px, 2vw, 24px);
	}

	.announcement-bar__subtitle {
		width: auto;
		font-size: 14px;
	}

	.announcement-bar__actions {
		gap: 10px;
	}

	.announcement-bar__btn,
	.announcement-bar__link {
		min-width: auto;
		flex: 0 1 auto;
		padding: 0 18px;
		font-size: 14px;
	}
}

/* One row: copy left, actions right. */
@container announcement-bar (min-width: 901px) {
	.announcement-bar__slide {
		min-height: 76px;
		padding: 12px 24px 20px;
	}

	.announcement-bar__inner {
		width: min(1140px, 100%);
		flex-direction: row;
		gap: 24px;
		text-align: start;
	}

	.announcement-bar__copy {
		justify-content: flex-start;
	}

	.announcement-bar__actions {
		width: auto;
		flex-wrap: nowrap;
		justify-content: flex-start;
	}
}

/* Below 1025px: no buttons. The whole slide is the primary action (the button becomes a
   transparent overlay; its label stays as the accessible name), the secondary link is
   dropped (Viber stays in the sticky bar and the drawer), and the bar is as tall as its copy. */
@container announcement-bar (max-width: 1024.98px) {
	.announcement-bar__slide {
		position: relative;
		min-height: 0;
	}

	.announcement-bar__actions {
		position: absolute;
		inset: 0;
		z-index: 2;
		display: block;
		width: auto;
	}

	.announcement-bar .announcement-bar__link {
		display: none;
	}

	.announcement-bar .announcement-bar__btn {
		display: block;
		width: 100%;
		height: 100%;
		min-height: 0;
		padding: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		color: transparent;
		font-size: 0;
	}

	.announcement-bar .announcement-bar__btn:hover,
	.announcement-bar .announcement-bar__btn:focus-visible {
		transform: none;
		box-shadow: none;
	}

	.announcement-bar .announcement-bar__btn:focus-visible {
		outline: 3px solid var(--mb-white);
		outline-offset: -4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.announcement-bar__slide,
	.announcement-bar__slide.is-active,
	.announcement-bar__slide.is-leaving,
	.announcement-bar__btn,
	.announcement-bar__link,
	.announcement-bar__dot {
		transition: none;
	}
}

/* mb-header: css/components/header.css */
/*
 * Site header: logo reel, search (≥1025px), WhatsApp, phone/address (≥1025px),
 * callback button, menu toggle (<1025px). Mobile-first; breakpoints 641 / 1025.
 * Below 641px sizes follow the static design's 390px step through clamp():
 * each clamp() hits the static value at 360–390px and at 414–640px.
 *
 * --mb-header-h (tokens.css default) is measured by nav.js (ResizeObserver on
 * .site-header-wrap); --mb-admin-bar-h is the fixed WP admin bar height.
 * :root beats the `html` rules still in polish.css.
 */
:root {
	scroll-padding-top: calc(var(--mb-header-h) + var(--mb-admin-bar-h, 0px) + 12px);
}

.site-header-wrap {
	position: relative;
	z-index: var(--mb-z-header);
	padding: 16px clamp(8px, calc(100vw / 6 - 57px), 12px) 0;
}

/* Search suggestions drop over the nav pill. */
.site-header-wrap.is-search-open {
	z-index: calc(var(--mb-z-mega) + 1);
}

.site-header {
	max-width: var(--mb-content);
	margin: 0 auto;
}

.site-header__bar {
	--mb-logo-w: clamp(78px, calc(100vw / 3 - 52px), 86px);
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(7px, calc(100vw / 8 - 41.75px), 10px);
	min-height: 74px;
	padding: 8px clamp(8px, calc(100vw / 6 - 57px), 12px) 8px clamp(8px, calc(100vw / 12 - 24.5px), 10px);
	background: var(--mb-white);
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: var(--mb-radius-2xl);
	box-shadow: var(--mb-shadow-sm);
}

/* Logo: four stacked frames scrolled by a 60s reel. */
.site-header__logo {
	display: block;
	flex: 0 0 var(--mb-logo-w);
	width: var(--mb-logo-w);
	height: 52px;
	overflow: hidden;
	border-radius: var(--mb-radius-xs);
}

.site-header__logo-reel {
	display: block;
	height: 52px;
	overflow: hidden;
}

.site-header__logo-track {
	display: flex;
	flex-direction: column;
	animation: site-header-logo-reel 60s ease-in-out infinite;
	will-change: transform;
}

.site-header__logo-item {
	display: block;
	width: var(--mb-logo-w);
	height: 52px;
	flex: 0 0 52px;
	object-fit: contain;
	object-position: left center;
}

.site-header__logo:focus-visible .site-header__logo-track {
	animation-play-state: paused;
}

@keyframes site-header-logo-reel {
	0%,
	23% {
		transform: translateY(0);
	}

	25%,
	48% {
		transform: translateY(-52px);
	}

	50%,
	73% {
		transform: translateY(-104px);
	}

	75%,
	98% {
		transform: translateY(-156px);
	}

	100% {
		transform: translateY(-208px);
	}
}

/* Search field. The header instance shows from 1025px; the drawer and the
   search/404 pages reuse the input and button classes. */
.site-header__search {
	position: relative;
	display: none;
	flex: 1 1 auto;
	min-width: 140px;
	max-width: 540px;
}

.site-header__search-input {
	width: 100%;
	height: 44px;
	padding: 0 16px 0 44px;
	border: 1px solid #eae6e3;
	border-radius: var(--mb-radius-pill);
	background: #faf9f8;
	color: #222;
	font: inherit;
	font-size: max(16px, 1em);
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.site-header__search-input::placeholder {
	color: #757575;
}

.site-header__search-input:focus {
	border-color: #d6d0c9;
	box-shadow: 0 0 0 3px rgba(240, 78, 55, 0.08);
}

.site-header__search-btn {
	position: absolute;
	top: 50%;
	left: 0;
	display: flex;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #9e9e9e;
	cursor: pointer;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	flex-shrink: 0;
}

.site-header__viber {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid #ddd6fb;
	border-radius: 50%;
	background: #f5f3ff;
	color: var(--mb-viber);
	transition: transform 0.15s ease;
}

.site-header__viber svg {
	display: block;
	width: 22px;
	height: 22px;
}

.site-header__viber:focus-visible {
	transform: translateY(-2px);
}

.site-header__contact {
	display: none;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* 44px tap target: the box grows upwards into the bar padding, the text stays put. */
.site-header__phone {
	padding-top: 25px;
	margin-top: -25px;
	color: var(--mb-coral);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.site-header__address {
	color: #4b4b4b;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}

/* ≤390px the button takes its content width (min 104px), wider screens 112px
   (static polish.css): max-width steps from "none" to 112px at 391px. */
.site-header__callback {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-width: 104px;
	max-width: max(112px, calc((391px - 100vw) * 9999));
	height: 44px;
	padding: 0 8px;
	border: 1px solid var(--mb-red);
	border-radius: var(--mb-radius-pill);
	background: var(--mb-red);
	color: var(--mb-white);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.site-header__callback:focus-visible {
	transform: translateY(-2px);
}

.site-header__menu-toggle {
	display: inline-flex;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 4px;
	padding: 0;
	border: 1px solid var(--mb-coral);
	border-radius: var(--mb-radius-sm);
	background: var(--mb-white);
	cursor: pointer;
}

@media (hover: hover) {
	.site-header__logo:hover .site-header__logo-track {
		animation-play-state: paused;
	}

	.site-header__viber:hover {
		transform: translateY(-2px);
	}

	.site-header__callback:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(217, 34, 42, 0.25);
	}
}

/* Tablet: expanded mobile composition (menu toggle + drawer). */
@media (min-width: 641px) {
	.site-header-wrap {
		padding: 14px clamp(16px, 2.8vw, 28px) 0;
	}

	.site-header__bar {
		--mb-logo-w: 100px;
		gap: clamp(10px, 1.8vw, 18px);
		min-height: 72px;
		padding: 9px clamp(12px, 2vw, 20px);
		border-radius: 30px;
	}

	.site-header__actions {
		gap: 10px;
	}

	.site-header__viber {
		display: inline-flex;
	}

	.site-header__callback {
		flex: 0 1 auto;
		min-width: clamp(138px, 19vw, 164px);
		max-width: none;
		padding-inline: 16px;
		font-size: 14px;
	}

	.site-header__menu-toggle {
		flex-basis: 48px;
		width: 48px;
		gap: 5px;
		border-radius: 14px;
	}

}

/* Desktop: search + contact in the bar, nav pill below, no menu toggle. */
@media (min-width: 1025px) {
	.site-header-wrap {
		padding: 16px 20px 0;
	}

	.site-header__bar {
		--mb-logo-w: 110px;
		gap: 12px;
		min-height: 74px;
		padding: 10px 20px 10px 16px;
		border-radius: var(--mb-radius-pill);
	}

	.site-header__search {
		display: block;
	}

	.site-header__search .site-header__search-input {
		font-size: 14px;
	}

	.site-header__actions {
		gap: 12px;
	}

	.site-header__contact {
		display: flex;
	}

	.site-header__callback {
		min-width: 164px;
		padding-inline: 20px;
	}

	.site-header__menu-toggle {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header__logo-track {
		animation: none;
	}
}

/* mb-nav: css/components/nav.css */
/*
 * Desktop nav pill (≥1025px; the drawer replaces it below). The mega menu is
 * in mega-menu.css, the mobile drawer in mobile-drawer.css.
 */
.site-nav-wrap {
	display: none;
}

@media (min-width: 1025px) {
	.site-nav-wrap {
		position: relative;
		z-index: var(--mb-z-nav);
		display: block;
		width: calc(100% - 40px);
		max-width: var(--mb-content);
		margin: 12px auto 0;
		padding: 0;
	}
}

.site-nav__pill {
	border: 1px solid rgba(240, 78, 55, 0.12);
	border-radius: var(--mb-radius-pill);
	background: var(--mb-white);
	box-shadow: var(--mb-shadow-md);
}

.site-nav__list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	margin: 0;
	padding: 7px;
	list-style: none;
}

/* Items share the free space on top of their own label width (long hy/ru labels). */
.site-nav__item {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

/* 44px tap target; the -0.5px margins keep the static 43px row height. */
.site-nav__link {
	display: flex;
	width: 100%;
	min-height: 44px;
	margin-block: -0.5px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 12px;
	border: 0;
	border-radius: var(--mb-radius-pill);
	background: transparent;
	color: var(--mb-gray-700);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.15;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		color 0.18s ease,
		background-color 0.18s ease;
}

.site-nav__icon {
	flex-shrink: 0;
	color: var(--mb-gray-400);
	transition: color 0.18s ease;
}

.site-nav__chevron {
	flex-shrink: 0;
	color: var(--mb-gray-400);
	transition:
		color 0.18s ease,
		transform 0.18s ease;
}

.site-nav__item.is-active .site-nav__link {
	background: var(--mb-coral-soft);
	color: #f04e38;
}

.site-nav__item.is-active .site-nav__icon,
.site-nav__item.is-active .site-nav__chevron {
	color: #f04e38;
}

.site-nav__item.is-open .site-nav__chevron {
	transform: rotate(180deg);
}

.site-nav__item:not(.is-active) .site-nav__link:focus-visible {
	background: #fafafa;
	color: #f04e38;
}

.site-nav__item:not(.is-active) .site-nav__link:focus-visible .site-nav__icon,
.site-nav__item:not(.is-active) .site-nav__link:focus-visible .site-nav__chevron {
	color: #f04e38;
}

@media (hover: hover) {
	.site-nav__link:hover:not(.site-nav__link--active-only) {
		background: #fafafa;
		color: #f04e38;
	}

	.site-nav__item:not(.is-active) .site-nav__link:hover .site-nav__icon,
	.site-nav__item:not(.is-active) .site-nav__link:hover .site-nav__chevron {
		color: #f04e38;
	}
}

/* mb-mega-menu: css/components/mega-menu.css */
/*
 * Mega menu under the nav pill ("Տոներ", ≥1025px only: .site-nav-wrap is hidden
 * below). Tabs = party formats; the first panel has a hero card + mini cards.
 * The panel scrolls inside itself when it would run past the viewport bottom
 * (--mb-mega-top = panel top, set by nav.js on open; --mb-header-h fallback).
 */
.mega-menu {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: var(--mb-z-mega);
	max-height: 0;
	margin-top: 0;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition:
		max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		margin-top 0.3s ease,
		opacity 0.25s ease,
		visibility 0.25s ease;
}

.mega-menu.is-open {
	max-height: min(640px, calc(100dvh - var(--mb-header-h)));
	margin-top: 10px;
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
}

.mega-menu__panel {
	display: grid;
	grid-template-columns: 265px minmax(0, 1fr);
	gap: 28px;
	height: auto;
	min-height: 499px;
	max-height: max(320px, calc(100dvh - var(--mb-mega-top, var(--mb-header-h)) - 12px));
	overflow-y: auto;
	scrollbar-width: none;
	overscroll-behavior: contain;
	padding: 25px 29px;
	border: 1px solid rgba(240, 78, 55, 0.12);
	border-radius: 34px;
	background: var(--mb-white);
	box-shadow: var(--mb-shadow-lg);
}

.mega-menu__panel::-webkit-scrollbar {
	display: none;
}

.mega-menu__sidebar {
	height: auto;
	min-height: 449px;
	padding: 15px 11px;
	border: 1px solid #f0ece9;
	border-radius: var(--mb-radius-xl);
	background: #fbfbfa;
}

.mega-menu__tabs {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mega-menu__tab {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 44px;
	margin-block: -0.5px;
	padding: 0 14px;
	border: 0;
	border-radius: var(--mb-radius-pill);
	background: transparent;
	color: var(--mb-gray-600);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
	transition:
		background-color 0.18s ease,
		color 0.18s ease,
		box-shadow 0.18s ease;
}

/* More than 6 tabs (Events menu): tighter rows so the sidebar stays about as tall as the cards. */
.mega-menu__sidebar--dense {
	padding-block: 11px;
}

.mega-menu__sidebar--dense .mega-menu__tabs {
	gap: 3px;
}

.mega-menu__sidebar--dense .mega-menu__tab {
	min-height: 40px;
}

.mega-menu__tab-main {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.mega-menu__tab-icon,
.mega-menu__tab-arrow {
	flex-shrink: 0;
	color: var(--mb-gray-400);
	transition: color 0.18s ease;
}

.mega-menu__tab:not(.is-active):focus-visible {
	background: #f5f4f3;
	color: var(--mb-gray-700);
}

.mega-menu__tab.is-active {
	background: #f04e38;
	color: var(--mb-white);
	box-shadow: var(--mb-shadow-coral);
}

.mega-menu__tab.is-active .mega-menu__tab-icon,
.mega-menu__tab.is-active .mega-menu__tab-arrow {
	color: var(--mb-white);
}

.mega-menu__content {
	min-width: 0;
	display: flex;
}

.mega-menu__panel-view {
	display: none;
}

.mega-menu__panel-view.is-active {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.mega-menu__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid #f3f4f6;
}

.mega-menu__title {
	margin: 0;
	color: var(--mb-heading);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}

.mega-menu__title-star {
	flex-shrink: 0;
}

.mega-menu__cards {
	display: grid;
	grid-template-columns: 290px 1fr;
	gap: 18px;
	align-items: start;
}

.mega-menu__cards--simple {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Card media with a photo (dynamic data): the image covers the box, the tags
   and badges stay on top. */
.mega-menu__hero-media.is-image,
.mega-menu__mini-media.is-image,
.mega-menu__card-media.is-image {
	isolation: isolate;
	overflow: hidden;
}

.mega-menu__media-img {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hero card */
.mega-menu__hero-card {
	display: flex;
	flex-direction: column;
	width: 290px;
	height: 326px;
	overflow: hidden;
	border: 1px solid var(--mb-card-border);
	border-radius: var(--mb-radius-xl);
	background: var(--mb-white);
	color: inherit;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.mega-menu__hero-media {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 180px;
	padding: 16px;
}

.mega-menu__hero-media--dream {
	background: linear-gradient(135deg, #e5d1ff 0%, #ffd7e3 51%, #ffe69d 100%);
}

.mega-menu__hero-media.is-image {
	justify-content: flex-end;
}

.mega-menu__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 3px 8px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.9);
	color: #f04e38;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.mega-menu__hero-icon-wrap {
	display: grid;
	width: 72px;
	height: 72px;
	place-items: center;
	border-radius: 50%;
	background: var(--mb-white);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.mega-menu__hero-theme {
	max-width: 100%;
	margin-top: 9px;
	overflow: hidden;
	padding: 4px 12px;
	border-radius: var(--mb-radius-pill);
	background: rgba(255, 255, 255, 0.88);
	color: #312e81;
	font-size: 12px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mega-menu__hero-body {
	position: relative;
	display: flex;
	flex: 1;
	align-items: flex-end;
	padding: 16px 18px;
}

.mega-menu__hero-copy {
	min-width: 0;
	width: 100%;
}

.mega-menu__hero-copy h3 {
	margin: 0;
	color: var(--mb-heading);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
}

.mega-menu__hero-copy p {
	max-width: calc(100% - 50px);
	margin: 6px 0 0;
	color: #6b7280;
	font-size: 13px;
	line-height: 1.45;
}

.mega-menu__hero-go {
	position: absolute;
	right: 18px;
	bottom: 16px;
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	border-radius: 50%;
	background: #f04e38;
	box-shadow: 0 6px 16px rgba(240, 78, 56, 0.32);
}

/* Mini theme cards (first panel) */
.mega-menu__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: minmax(157px, auto);
	gap: 12px 14px;
}

.mega-menu__mini-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	width: 100%;
	padding: 8px;
	border: 1px solid var(--mb-card-border);
	border-radius: var(--mb-radius-lg);
	background: var(--mb-white);
	color: inherit;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.mega-menu__mini-media {
	position: relative;
	display: grid;
	height: 92px;
	flex: 0 0 92px;
	place-items: center;
	border-radius: 14px;
}

.mega-menu__mini-icon {
	display: grid;
	width: 36px;
	height: 36px;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--mb-gray-700);
}

.mega-menu__mini-tag,
.mega-menu__card-tag {
	position: absolute;
	right: 6px;
	bottom: 6px;
	max-width: calc(100% - 12px);
	overflow: hidden;
	padding: 2px 6px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.3);
	color: var(--mb-white);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.mega-menu__mini-title {
	position: relative;
	display: flex;
	min-width: 0;
	min-height: 40px;
	flex: 1;
	align-items: center;
	margin-top: 8px;
	padding: 0 36px 0 4px;
	color: #1f2937;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	white-space: normal;
	overflow-wrap: anywhere;
}

.mega-menu__mini-title em {
	position: absolute;
	top: 50%;
	right: 2px;
	display: grid;
	width: 28px;
	height: 28px;
	place-items: center;
	border-radius: 50%;
	background: var(--mb-coral-soft);
	font-style: normal;
	color: #f04e38;
	transform: translateY(-50%);
	transition: background-color 0.18s ease, color 0.18s ease;
}

.mega-menu__mini-card:focus-visible {
	outline: 3px solid var(--mb-focus);
	outline-offset: 2px;
}

.mega-menu__mini-card:focus-visible .mega-menu__mini-title em {
	background: #f04e38;
	color: var(--mb-white);
}

/* Simple panel cards (other tabs) */
.mega-menu__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	padding: 8px;
	border: 1px solid var(--mb-card-border);
	border-radius: var(--mb-radius-lg);
	background: var(--mb-white);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.mega-menu__card-media {
	position: relative;
	display: grid;
	flex-shrink: 0;
	place-items: center;
	aspect-ratio: 16 / 10;
	padding: 16px;
	border-radius: var(--mb-radius-md);
	overflow: hidden;
}

.mega-menu__card-tag {
	right: 8px;
	bottom: 8px;
	max-width: calc(100% - 16px);
}

.mega-menu__card-emoji {
	display: grid;
	width: 48px;
	height: 48px;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.88);
	color: var(--mb-gray-700);
	font-size: 24px;
}

/* Colour variants (mb_mega_item(): card_bg coral→mario, pink→dream, sky→craft,
   lilac→magic, sun→race). */
.mega-menu__mini-media--craft,
.mega-menu__card-media--craft {
	background: linear-gradient(135deg, #67e8f9 0%, #86efac 100%);
}

.mega-menu__mini-media--race,
.mega-menu__card-media--race {
	background: linear-gradient(135deg, #fdba74 0%, #fde047 100%);
}

.mega-menu__mini-media--magic,
.mega-menu__card-media--magic {
	background: linear-gradient(135deg, #c4b5fd 0%, #93c5fd 100%);
}

.mega-menu__mini-media--space,
.mega-menu__card-media--space {
	background: linear-gradient(135deg, #1e3a8a 0%, #312e81 100%);
}

.mega-menu__mini-media--mario,
.mega-menu__card-media--mario {
	background: linear-gradient(135deg, #ef4444 0%, #fca5a5 100%);
}

.mega-menu__mini-media--grad,
.mega-menu__card-media--grad {
	background: linear-gradient(135deg, #f97316 0%, #fbbf24 100%);
}

.mega-menu__mini-media--dream,
.mega-menu__card-media--dream {
	background: linear-gradient(160deg, #ffd6e8 0%, #ffe9a8 100%);
}

.mega-menu__card-body {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 16px;
	min-height: 76px;
	padding: 14px 10px 8px;
}

.mega-menu__card-body span:first-child {
	display: block;
	flex: 1;
	min-width: 0;
	color: var(--mb-heading);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.mega-menu__card-go {
	display: grid;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	place-items: center;
	border-radius: 50%;
	background: var(--mb-coral-soft);
	color: var(--mb-coral);
	font-size: 20px;
	font-weight: 700;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.mega-menu__card:focus-visible {
	outline: 3px solid var(--mb-focus);
	outline-offset: 3px;
}

.mega-menu__card:focus-visible .mega-menu__card-go {
	background: var(--mb-coral);
	color: var(--mb-white);
}

.mega-menu__empty {
	margin: 24px 0 0;
	color: #8a8f98;
	font-size: 16px;
	font-weight: 600;
}

.mega-menu__see-all {
	display: block;
	margin-top: auto;
	padding: 14px 12px 2px;
	align-self: flex-end;
	color: #f04e38;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.mega-menu__see-all:focus-visible {
	text-decoration: underline;
}

@media (hover: hover) {
	.mega-menu__tab:not(.is-active):hover {
		background: #f5f4f3;
		color: var(--mb-gray-700);
	}

	.mega-menu__hero-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 14px 28px rgba(74, 43, 32, 0.1);
	}

	.mega-menu__card:hover {
		border-color: var(--mb-coral);
		box-shadow: var(--mb-shadow-sm);
	}

	.mega-menu__card:hover .mega-menu__card-go {
		background: var(--mb-coral);
		color: var(--mb-white);
	}

	.mega-menu__mini-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 10px 20px rgba(74, 43, 32, 0.08);
	}

	.mega-menu__mini-card:hover .mega-menu__mini-title em {
		background: #f04e38;
		color: var(--mb-white);
	}

	.mega-menu__see-all:hover {
		text-decoration: underline;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mega-menu__card,
	.mega-menu__card-go {
		transition: none;
	}
}

/* Menu-tree panels (template-parts/header/nav-panel.php): link chips in the
   tabbed panel, one column per child in the column panel. */
.mega-menu--tree .mega-menu__content,
.mega-menu--tree .mega-menu__panel-view.is-active {
	min-height: 0;
}

.mega-menu--tree .mega-menu__panel-view.is-active {
	overflow-y: auto;
	scrollbar-width: none;
	overscroll-behavior: contain;
}

.mega-menu--tree .mega-menu__panel-view.is-active::-webkit-scrollbar {
	display: none;
}

.mega-menu__links {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mega-menu__link {
	display: flex;
	min-height: 44px;
	align-items: center;
	padding: 8px 14px;
	border: 1px solid #f0ece9;
	border-radius: var(--mb-radius-pill);
	background: #fbfbfa;
	color: var(--mb-gray-700);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition:
		background-color 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease;
}

.mega-menu__link:focus-visible {
	border-color: #f04e38;
	background: var(--mb-coral-soft);
	color: #d94332;
}

.mega-menu__links + .mega-menu__groups {
	margin-top: 18px;
}

.mega-menu__groups {
	display: grid;
	gap: 18px;
}

.mega-menu__group-title {
	margin: 0 0 10px;
	color: var(--mb-gray-600);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.mega-menu--columns.is-open {
	max-height: calc(100dvh - var(--mb-mega-top, var(--mb-header-h)) - 12px);
}

.mega-menu__panel--columns {
	display: block;
	height: auto;
}

.mega-menu__columns {
	display: grid;
	grid-template-columns: repeat(var(--mb-mega-cols, 3), minmax(0, 1fr));
	gap: 12px 28px;
}

.mega-menu__column-title {
	display: flex;
	min-height: 44px;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	border-radius: var(--mb-radius-pill);
	background: var(--mb-coral-soft);
	color: #d94332;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.mega-menu__column-title:focus-visible {
	outline: 3px solid var(--mb-focus);
	outline-offset: 2px;
}

.mega-menu__list {
	display: grid;
	gap: 2px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.mega-menu__list a {
	display: flex;
	min-height: 38px;
	align-items: center;
	padding: 5px 14px;
	border-radius: var(--mb-radius-md);
	color: var(--mb-gray-700);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.mega-menu__list a:focus-visible {
	background: #fafafa;
	color: #d94332;
}

@media (hover: hover) {
	.mega-menu__link:hover {
		border-color: rgba(240, 78, 55, 0.35);
		background: var(--mb-coral-soft);
		color: #d94332;
	}

	.mega-menu__list a:hover {
		background: #fafafa;
		color: #d94332;
	}
}

/* mb-mobile-drawer: css/components/mobile-drawer.css */
/*
 * Mobile drawer (<1025px): search, primary links, "Տոներ" accordion, language
 * buttons, call button. Full-width sheet on phones, 460px panel on tablets.
 * nav.js locks page scroll (html + body, scroll position restored), traps focus
 * and closes on Escape.
 */
.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: var(--mb-z-drawer);
	visibility: hidden;
	pointer-events: none;
}

.mobile-nav.is-open {
	visibility: visible;
	pointer-events: auto;
}

.mobile-nav__backdrop {
	position: absolute;
	inset: 0;
	border: 0;
	background: rgba(35, 35, 42, 0.32);
	opacity: 0;
	transition: opacity 0.22s ease;
}

.mobile-nav.is-open .mobile-nav__backdrop {
	opacity: 1;
}

.mobile-nav__backdrop:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 3px var(--mb-focus);
}

.mobile-nav__drawer {
	position: absolute;
	top: max(12px, env(safe-area-inset-top));
	right: max(12px, env(safe-area-inset-right));
	left: max(12px, env(safe-area-inset-left));
	display: grid;
	gap: 4px;
	max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 12px;
	border: 1px solid rgba(240, 78, 55, 0.12);
	border-radius: var(--mb-radius-2xl);
	background: var(--mb-white);
	box-shadow: 0 20px 46px rgba(44, 36, 34, 0.2);
	opacity: 0;
	transform: translateY(-14px) scale(0.98);
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.mobile-nav.is-open .mobile-nav__drawer {
	opacity: 1;
	transform: none;
}

.mobile-nav__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 3px 4px 10px 10px;
	color: var(--mb-gray-700);
	font-size: 14px;
	font-weight: 800;
}

.mobile-nav__close {
	display: inline-flex;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--mb-coral);
	border-radius: 13px;
	background: var(--mb-white);
	color: var(--mb-coral);
	cursor: pointer;
}

.mobile-nav__close svg {
	display: block;
}

/* Search (input + button classes from header.css). */
.mobile-nav__search {
	position: relative;
	margin-bottom: 8px;
}

.mobile-nav__link,
.mobile-nav__call {
	display: flex;
	min-height: 52px;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
	border-radius: var(--mb-radius-md);
	color: var(--mb-gray-700);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.mobile-nav__link {
	width: 100%;
	border: 0;
	background: transparent;
	font-family: inherit;
	text-align: start;
	cursor: pointer;
}

.mobile-nav__link[aria-current="page"] {
	background: var(--mb-coral-soft);
	color: #d94332;
}

.mobile-nav__link span {
	color: var(--mb-gray-400);
	font-size: 21px;
}

.mobile-nav__link--featured {
	background: var(--mb-coral);
	color: var(--mb-white);
	box-shadow: 0 9px 18px rgba(240, 78, 55, 0.2);
}

.mobile-nav__link--featured span {
	color: var(--mb-white);
}

.mobile-nav__group {
	display: grid;
	gap: 4px;
}

.mobile-nav__chevron {
	display: inline-flex;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	line-height: 1;
	transition: transform 0.18s ease;
}

.mobile-nav__chevron svg {
	display: block;
}

.mobile-nav__link[aria-expanded="true"] .mobile-nav__chevron {
	transform: rotate(180deg);
}

.mobile-nav__submenu {
	display: grid;
	max-height: 0;
	gap: 0;
	padding: 0 8px;
	border-radius: var(--mb-radius-md);
	background: var(--mb-coral-soft);
	overflow: hidden;
	opacity: 0;
	transition:
		max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
		padding 0.28s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.18s ease;
}

/* Up to 9 links (8 formats + "see all") without clipping. */
.mobile-nav__submenu.is-open {
	max-height: 440px;
	gap: 2px;
	padding: 5px 8px 7px;
	opacity: 1;
}

.mobile-nav__submenu a {
	display: flex;
	min-height: 44px;
	align-items: center;
	padding: 0 12px;
	border-radius: var(--mb-radius-sm);
	color: var(--mb-gray-600);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.22s ease;
}

.mobile-nav__submenu.is-open a {
	opacity: 1;
	transform: none;
}

.mobile-nav__submenu a:focus-visible {
	background: var(--mb-white);
	color: #d94332;
}

/* Nested accordion (menu tree, mb_drawer_tree()): sub-toggle, headings, see-all. */
.mobile-nav__group--nested {
	gap: 2px;
}

.mobile-nav__subtoggle {
	display: flex;
	width: 100%;
	min-height: 44px;
	align-items: center;
	gap: 8px;
	padding: 0 12px;
	border: 0;
	border-radius: var(--mb-radius-sm);
	background: transparent;
	color: var(--mb-gray-700);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	text-align: start;
	cursor: pointer;
}

.mobile-nav__subtoggle[aria-expanded="true"] {
	background: var(--mb-white);
	color: #d94332;
}

.mobile-nav__subtoggle[aria-expanded="true"] .mobile-nav__chevron {
	transform: rotate(180deg);
}

.mobile-nav__subtoggle:focus-visible {
	outline: 3px solid var(--mb-focus);
	outline-offset: 2px;
}

.mobile-nav__submenu--nested {
	margin-left: 8px;
	background: var(--mb-white);
}

.mobile-nav__subheading {
	margin: 8px 12px 2px;
	color: var(--mb-gray-400);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.mobile-nav__submenu a.mobile-nav__leaf {
	padding-left: 20px;
	font-weight: 600;
}

.mobile-nav__submenu a.mobile-nav__see-all {
	color: #d94332;
}

.mobile-nav__call {
	margin-top: 8px;
	background: var(--mb-coral-soft);
	color: #d94332;
	font-size: 14px;
}

.mobile-nav__call span {
	font-size: 13px;
	font-weight: 700;
}

.mobile-nav__link:focus-visible,
.mobile-nav__close:focus-visible,
.mobile-nav__call:focus-visible {
	outline: 3px solid var(--mb-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--mb-focus-halo);
}

@media (hover: hover) {
	.mobile-nav__submenu a:hover,
	.mobile-nav__subtoggle:hover {
		background: var(--mb-white);
		color: #d94332;
	}

	.mobile-nav__submenu--nested a:hover {
		background: var(--mb-coral-soft);
	}
}

/* Scroll lock while the drawer is open (nav.js sets --mb-lock-y = scrollY). */
html.is-mobile-menu-open {
	overflow: hidden;
}

body.is-mobile-menu-open {
	position: fixed;
	top: calc(var(--mb-lock-y, 0px) * -1);
	right: 0;
	left: 0;
	overflow: hidden;
}

@media (min-width: 641px) {
	.mobile-nav__drawer {
		top: max(16px, env(safe-area-inset-top));
		right: max(16px, env(safe-area-inset-right));
		left: auto;
		width: min(460px, calc(100% - 32px));
		max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
		padding: 16px;
	}
}

@media (min-width: 1025px) {
	.mobile-nav {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mobile-nav__backdrop,
	.mobile-nav__drawer,
	.mobile-nav__chevron,
	.mobile-nav__submenu,
	.mobile-nav__submenu a {
		transition: none;
	}
}

/* mb-lang-switcher: css/components/lang-switcher.css */
/*
 * Language switcher: segmented pill in the header actions (≥1025px; below that
 * the drawer carries it) and a row of three 44px buttons at the bottom of the
 * mobile drawer. Every link is a 44x44 tap target; in the pill the coloured
 * chip sits inside a transparent 3px border so the segmented look survives.
 */
.lang-switcher {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	border-radius: var(--mb-radius-pill);
}

.lang-switcher__link {
	display: inline-flex;
	min-width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
	border: 3px solid transparent;
	border-radius: var(--mb-radius-pill);
	background-clip: padding-box;
	color: #4b4b4b;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.lang-switcher__link[aria-current="page"] {
	background-color: var(--mb-coral);
	color: var(--mb-white);
}

.lang-switcher--header {
	display: none;
	background: #faf9f8;
	box-shadow: inset 0 0 0 1px #eae6e3;
}

.lang-switcher--drawer {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: 8px;
}

.lang-switcher--drawer .lang-switcher__link {
	height: 44px;
	border: 0;
	border-radius: 14px;
	background: var(--mb-coral-soft);
	color: #d94332;
	font-size: 14px;
}

.lang-switcher--drawer .lang-switcher__link[aria-current="page"] {
	background: var(--mb-coral);
	color: var(--mb-white);
}

@media (hover: hover) {
	.lang-switcher__link:not([aria-current="page"]):hover {
		color: var(--mb-coral);
	}
}

@media (min-width: 1025px) {
	.lang-switcher--header {
		display: inline-flex;
	}
}

/* mb-search: css/components/search.css */
/*
 * Search: suggestions popover under every search field (search.js; base look =
 * .order-popover / .order-select__option from form.css) and the search results
 * page (search.php; page.css styles the group list frame).
 * form.css loads after this file: selectors that override it carry two classes.
 */
.order-popover.search-suggest {
	right: 0;
	max-height: min(420px, 70vh);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px;
	text-align: start;
}

.search-suggest__list {
	outline: none;
}

.search-suggest__list:empty {
	display: none;
}

.search-suggest__group {
	padding: 8px 14px 4px;
	color: var(--mb-ink-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.search-suggest .search-suggest__option {
	justify-content: flex-start;
	padding-inline: 8px 14px;
	font-size: 15px;
}

/* Highlight = aria-selected on the active descendant: soft tint, not the
   order form's "chosen value" gradient. */
.search-suggest .search-suggest__option[aria-selected="true"] {
	background: #fff4ef;
	color: #d63d27;
}

.search-suggest .search-suggest__option--all {
	justify-content: center;
	margin-top: 6px;
	color: var(--mb-coral);
}

.search-suggest__thumb {
	display: grid;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	overflow: hidden;
	place-items: center;
	border-radius: 10px;
	background: var(--mb-coral-soft);
	color: var(--mb-coral);
	font-size: 14px;
	font-weight: 800;
}

.search-suggest__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.search-suggest__title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.search-suggest__status {
	margin: 0;
	padding: 10px 14px;
	color: var(--mb-ink-muted);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

.search-suggest__status:empty {
	display: none;
}

@media (hover: hover) {
	.search-suggest__option:hover {
		background: #fff4ef;
		color: #d63d27;
	}
}

/* Search results page */
.mb-search-card {
	gap: 14px;
	padding-block: 10px;
}

.mb-search-card__thumb {
	display: grid;
	place-items: center;
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: var(--mb-radius-sm);
	background: var(--mb-coral-soft);
	color: var(--mb-coral);
	font-size: 20px;
	font-weight: 800;
}

.mb-search-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mb-search-card__body {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.mb-search-card__text {
	color: var(--mb-ink-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

.mb-search__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(12px, 3vw, 20px);
}

.mb-search__empty-state {
	width: min(760px, 100%);
	margin: 0 auto;
	text-align: center;
}

.mb-search__empty-state .mb-search__group-title {
	margin-top: 32px;
}

.mb-search__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mb-search__chips a {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	padding: 0 18px;
	border: 1px solid var(--mb-card-border);
	border-radius: var(--mb-radius-pill);
	background: var(--mb-white);
	color: var(--mb-gray-700);
	font-weight: 700;
	text-decoration: none;
}

@media (hover: hover) {
	.mb-search__chips a:hover {
		border-color: var(--mb-coral);
		color: var(--mb-coral);
	}
}

@media (min-width: 641px) {
	.mb-search__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.mb-search__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* mb-buttons: css/components/buttons.css */
/* Shared interactive states for buttons and pill CTAs (from site/polish.css).
   Zero specificity on the element part so component rules always win. */

:where(button, [type="button"], [type="submit"]):active,
:where(.hero-section__cta, .site-footer__order):active {
	transform: translateY(0) scale(0.98);
}

:where(button, [type="submit"]):disabled {
	cursor: wait;
	opacity: 0.72;
}

/* mb-page-hero: css/components/page-hero.css */
/*
 * Page hero (components/page-hero.php): the homepage `.hero-section` gradient panel.
 * Variants: --split (copy + media, 2 columns once the hero is >= 600px wide),
 * --compact (archives, legal), --success (thank-you). Container queries on .page-hero.
 */
.page-hero {
	width: min(var(--mb-content, 1110px), 100%);
	margin: 0 auto;
	container-type: inline-size;
}

.page-hero__panel {
	position: relative;
	display: grid;
	min-height: clamp(260px, 40svh, 400px);
	align-items: center;
	gap: clamp(20px, 5cqi, 48px);
	padding: clamp(36px, 8cqi, 72px) clamp(20px, 6cqi, 64px);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: clamp(26px, 4cqi, 36px);
	background: #f33d4c;
	background: var(--mb-gradient-hero);
	color: #fff;
}

.page-hero__panel::after {
	position: absolute;
	right: -2%;
	bottom: 0;
	left: -2%;
	height: 18%;
	background: rgba(255, 255, 255, 0.08);
	clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
	content: "";
	pointer-events: none;
}

.page-hero__copy {
	position: relative;
	z-index: 1;
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.page-hero__eyebrow {
	display: inline-flex;
	min-height: 32px;
	margin: 0 0 14px;
	padding: 4px 16px;
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--mb-radius-pill);
	background: rgba(255, 255, 255, 0.16);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
}

.page-hero__title {
	display: flex;
	max-width: 100%;
	margin: 0;
	flex-direction: column;
	align-items: center;
	gap: 0.12em;
	color: #fff;
	font-size: clamp(30px, 1.3rem + 3vw, 56px);
	font-weight: 800;
	line-height: 1.18;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.page-hero__accent {
	display: inline-grid;
	max-width: 100%;
	padding: 0.1em 0.7em 0.14em;
	place-items: center;
	transform: rotate(-1.5deg);
	border-radius: 100px;
	background: #fff;
	box-shadow: 0 12px 28px rgba(157, 23, 36, 0.08);
	color: #d9222a;
}

.page-hero__text {
	max-width: 60ch;
	margin: 18px 0 0;
	color: rgba(255, 255, 255, 0.95);
	font-size: clamp(15px, 0.9rem + 0.35vw, 18px);
	font-weight: 500;
	line-height: 1.55;
	text-wrap: pretty;
}

.page-hero__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.page-hero__chip {
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, 0.42);
	border-radius: var(--mb-radius-pill);
	background: rgba(255, 255, 255, 0.16);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: clamp(22px, 5cqi, 36px);
}

.page-hero__cta {
	display: inline-flex;
	min-width: min(235px, 100%);
	min-height: 52px;
	padding: 0 28px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: var(--mb-radius-pill);
	background: #fff;
	box-shadow: 0 8px 16px rgba(157, 23, 36, 0.08);
	color: #d9222a;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.page-hero__cta--ghost {
	background: transparent;
	box-shadow: none;
	color: #fff;
}

.page-hero__cta:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

.page-hero__badge {
	display: grid;
	width: 64px;
	height: 64px;
	margin-bottom: 16px;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	color: var(--mb-green, #459e40);
	box-shadow: 0 12px 28px rgba(157, 23, 36, 0.12);
}

/* Media (split). */
.page-hero__media {
	position: relative;
	z-index: 1;
	display: flex;
	min-width: 0;
	align-items: flex-end;
	justify-content: center;
}

.page-hero__image {
	display: block;
	max-width: 100%;
	height: auto;
}

.page-hero__media--cutout {
	min-height: clamp(260px, 72cqi, 420px);
	padding-top: 16px;
	border-radius: clamp(22px, 4cqi, 32px);
	background: var(--mb-v-soft, #fdebe7);
	background:
		radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.9) 0 18%, rgba(255, 255, 255, 0) 60%),
		linear-gradient(180deg, var(--mb-v-soft, #fdebe7) 0%, var(--mb-v-soft-2, #fbd2c9) 100%);
	box-shadow: 0 18px 40px rgba(120, 20, 40, 0.18);
}

.page-hero__media--cutout .page-hero__image {
	width: auto;
	max-height: clamp(240px, 66cqi, 400px);
	object-fit: contain;
}

.page-hero__media:not(.page-hero__media--cutout) .page-hero__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 6px solid rgba(255, 255, 255, 0.35);
	border-radius: clamp(20px, 4cqi, 30px);
}

/* Compact: title (+ accent) and a short intro. */
.page-hero--compact .page-hero__panel {
	min-height: clamp(200px, 30svh, 300px);
	padding-block: clamp(32px, 6cqi, 56px);
}

.page-hero--compact .page-hero__title {
	font-size: clamp(28px, 1.2rem + 2.6vw, 50px);
}

/* Success. */
.page-hero--success .page-hero__panel {
	min-height: clamp(280px, 44svh, 440px);
}

/* Breadcrumbs sit on the cream page above the panel. */
.page-hero > .breadcrumbs {
	margin-bottom: 6px;
}

@media (hover: hover) {
	.page-hero__cta:hover {
		transform: translateY(-2px);
		box-shadow: 0 12px 24px rgba(157, 23, 36, 0.2);
	}

	.page-hero__cta--ghost:hover {
		background: rgba(255, 255, 255, 0.12);
	}
}

@container (min-width: 600px) {
	.page-hero--split.page-hero--has-media .page-hero__panel {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	}

	.page-hero--split .page-hero__copy {
		align-items: flex-start;
		text-align: start;
	}

	.page-hero--split .page-hero__title {
		align-items: flex-start;
	}

	.page-hero--split .page-hero__chips,
	.page-hero--split .page-hero__actions {
		justify-content: flex-start;
	}

	.page-hero__media--cutout {
		min-height: clamp(320px, 42cqi, 460px);
	}

	.page-hero__media--cutout .page-hero__image {
		max-height: clamp(300px, 38cqi, 440px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-hero__cta {
		transition: none;
	}
}

/* mb-breadcrumbs: css/components/breadcrumbs.css */
/*
 * Breadcrumbs (components/breadcrumbs.php): 14px links on the cream page, 44px tap rows.
 * Links use the darker brand red (#d9222a) so 14px text keeps 4.5:1 on the cream canvas.
 */
.breadcrumbs {
	width: min(var(--mb-content, 1110px), 100%);
	margin: 0 auto 8px;
	font-size: 14px;
	line-height: 1.3;
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs__item {
	display: inline-flex;
	min-width: 0;
	align-items: center;
}

.breadcrumbs__separator { margin-inline: 8px 10px; flex: 0 0 auto; color: #c9bdb7; }

.breadcrumbs__link {
	display: inline-flex;
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	color: #d9222a;
	font-weight: 600;
	text-decoration: none;
}

.breadcrumbs__link:focus-visible {
	outline: 3px solid var(--mb-coral);
	outline-offset: 2px;
	border-radius: 6px;
}

.breadcrumbs__current {
	display: inline-block;
	max-width: min(60vw, 480px);
	overflow: hidden;
	color: var(--mb-ink-muted, #625d5a);
	font-weight: 500;
	line-height: 44px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (hover: hover) {
	.breadcrumbs__link:hover {
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

/* mb-section-heading: css/components/section-heading.css */
/* Generic two-tone section heading (components/section-heading.php without `block`):
   plain title line + gradient accent pill (+ optional trailing line), description,
   optional "see all" link. Same look as the homepage animators heading. The heading
   is its own size container, so it scales with the column it sits in.
   Homepage sections pass `block` and use their own section CSS instead. */

.section-heading {
	container: section-heading / inline-size;
	display: flex;
	width: 100%;
	margin: 0 auto;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.section-heading--start {
	align-items: flex-start;
	text-align: start;
}

.section-heading__title {
	display: flex;
	max-width: 100%;
	margin: 0;
	flex-direction: column;
	align-items: inherit;
	color: #111;
	font-size: clamp(28px, 8cqi, 38px);
	font-weight: 800;
	line-height: 1.14;
	text-wrap: balance;
}

.section-heading__title-line {
	display: block;
	max-width: 100%;
}

.section-heading__title-accent {
	display: inline-flex;
	max-width: 100%;
	min-height: 58px;
	align-items: center;
	justify-content: center;
	padding: 4px 22px;
	border-radius: 100px;
	background: #f04e38;
	background: linear-gradient(105deg, #f04e38 0%, #ed7190 100%);
	color: var(--mb-white);
	font-weight: inherit;
	line-height: 1.1;
}

.section-heading__description {
	max-width: 60ch;
	margin: 12px 0 0;
	color: var(--mb-ink-soft);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	white-space: pre-line;
	text-wrap: pretty;
}

.section-heading__link {
	display: inline-flex;
	min-height: 44px;
	margin-top: 12px;
	align-items: center;
	gap: 8px;
	color: var(--mb-coral);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.section-heading__link:focus-visible {
	text-decoration: underline;
}

@media (hover: hover) {
	.section-heading__link:hover {
		text-decoration: underline;
	}
}

@container section-heading (min-width: 600px) {
	.section-heading__title {
		font-size: 40px;
		line-height: 60px;
	}

	.section-heading__title-accent {
		min-height: 70px;
		padding: 0 28px;
		line-height: 60px;
	}

	.section-heading__description {
		margin-top: 6px;
		font-size: 16px;
		line-height: 24px;
	}
}

/* mb-proof-banner: css/components/proof-banner.css */
/* Proof banner ("Ավելի քան 14 000 գոհ հաճախորդ"), components/proof-banner.php.
   Mobile-first. The section box follows the 641 / 1025 breakpoints; the content
   and stickers follow the banner's own width (container queries at 620px and
   980px), so the banner also fits narrower page columns. */

.proof-banner {
	container: proof-banner / inline-size;
	position: relative;
	display: flex;
	width: min(1110px, 100%);
	min-height: 174px;
	margin: 48px auto 0;
	justify-content: center;
}

.proof-banner__content {
	position: relative;
	z-index: var(--mb-z-base);
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.proof-banner__eyebrow {
	display: inline-flex;
	width: 128px;
	height: 34px;
	align-items: center;
	justify-content: center;
	border-radius: var(--mb-radius-pill);
	background: #ffeff2;
	color: var(--mb-coral);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.proof-banner__number {
	margin: 1px 0 0;
	color: #ff4b4d;
	font-size: 68px;
	font-weight: 800;
	letter-spacing: -0.06em;
	line-height: 0.94;
	text-shadow: 0 7px 0 var(--mb-red), 0 14px 0 var(--mb-white);
	white-space: nowrap;
}

.proof-banner__emphasis {
	display: grid;
	width: min(300px, calc(100% - 28px));
	height: 54px;
	margin-top: 6px;
	place-items: center;
	transform: rotate(-1.5deg);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--mb-radius-pill);
	background: linear-gradient(105deg, #ff572e 0%, #ff762c 42%, #ed7190 100%);
	box-shadow: 0 10px 0 rgba(255, 67, 94, 0.18), 0 14px 20px rgba(255, 67, 94, 0.23);
	color: var(--mb-white);
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
}

.proof-banner__emphasis span {
	transform: rotate(1.5deg);
}

.proof-banner__caption {
	margin: 8px 0 0;
	color: var(--mb-ink-soft);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
}

.proof-banner__decoration {
	position: absolute;
	z-index: 0;
	display: block;
	pointer-events: none;
}

.proof-banner__decoration--star {
	top: 24px;
	left: 12px;
	width: 34px;
	height: 34px;
}

.proof-banner__decoration--rays {
	top: 24px;
	right: 12px;
	width: 32px;
	height: 32px;
}

.proof-banner__decoration--spiral {
	bottom: 3px;
	left: 32px;
	width: 28px;
	height: 28px;
}

.proof-banner__decoration--hat {
	right: 28px;
	bottom: 0;
	width: 30px;
	height: 33px;
}

@container proof-banner (min-width: 620px) {
	.proof-banner__eyebrow {
		width: 143px;
		height: 40px;
		font-size: 23px;
	}

	.proof-banner__number {
		font-size: clamp(72px, 12vw, 106px);
	}

	.proof-banner__emphasis {
		width: min(432px, calc(100% - 48px));
		height: 68px;
		font-size: clamp(25px, 5vw, 36px);
	}

	.proof-banner__caption {
		margin-top: 18px;
		font-size: 16px;
	}
}

@container proof-banner (min-width: 980px) {
	.proof-banner__eyebrow {
		width: 161px;
		height: 46px;
		font-size: 27px;
	}

	.proof-banner__number {
		font-size: clamp(88px, 9vw, 105px);
	}

	.proof-banner__emphasis {
		height: 86px;
		margin-top: 8px;
		font-size: clamp(29px, 3.5vw, 44px);
	}

	.proof-banner__caption {
		font-size: 19px;
	}

	.proof-banner__decoration--star {
		left: 54px;
		width: 46px;
		height: 46px;
	}

	.proof-banner__decoration--rays {
		right: 34px;
		width: 44px;
		height: 44px;
	}

	.proof-banner__decoration--spiral {
		left: 160px;
		width: 38px;
		height: 38px;
	}

	.proof-banner__decoration--hat {
		right: 81px;
		width: 40px;
		height: 44px;
	}
}

@media (min-width: 641px) {
	.proof-banner {
		min-height: 220px;
		margin-top: 64px;
	}
}

@media (min-width: 1025px) {
	.proof-banner {
		min-height: 285px;
		margin-top: 94px;
	}
}

/* mb-cards: css/components/cards.css */
/*
 * Catalog cards (cards/character.php, cards/show.php), card grid, empty state,
 * the shared `card_bg` colour variants and the catalog section heading.
 * Mobile-first; cards size their type with container query units (cqi).
 */

/* card_bg variants: soft panel (cutouts) + solid frame (photos). */
.mb-variant--coral { --mb-v-soft: #fdebe7; --mb-v-soft-2: #fbd2c9; --mb-v-solid: #ee4630; --mb-v-on-solid: #fff; }
.mb-variant--pink  { --mb-v-soft: #fdebf2; --mb-v-soft-2: #f8cddd; --mb-v-solid: #e0457f; --mb-v-on-solid: #fff; }
.mb-variant--sky   { --mb-v-soft: #e6f3fc; --mb-v-soft-2: #c7e3f7; --mb-v-solid: #1f7fc4; --mb-v-on-solid: #fff; }
.mb-variant--lilac { --mb-v-soft: #f1ebfd; --mb-v-soft-2: #dccff8; --mb-v-solid: #7c4ddb; --mb-v-on-solid: #fff; }
.mb-variant--sun   { --mb-v-soft: #fff6dc; --mb-v-soft-2: #ffe49e; --mb-v-solid: #ffc233; --mb-v-on-solid: #1a1a1a; }

/* Section title used by catalog templates (and rails/facts until section-heading exists). */
.mb-catalog-heading {
	margin: 0 0 clamp(18px, 4vw, 32px);
	color: #111;
	font-size: clamp(26px, 1.1rem + 2vw, 40px);
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-wrap: balance;
}

.mb-catalog-heading__accent {
	display: inline-block;
	padding: 0.05em 0.55em;
	border-radius: var(--mb-radius-pill);
	background: #f04e38;
	background: linear-gradient(105deg, #f04e38 0%, #ed7190 100%);
	color: #fff;
}

/* ---- Card ---------------------------------------------------------------- */
.mb-card {
	position: relative;
	min-width: 0;
	container-type: inline-size;
}

.mb-card[hidden] {
	display: none !important;
}

.mb-card__link {
	display: flex;
	height: 100%;
	flex-direction: column;
	border-radius: var(--mb-radius-2xl);
	color: inherit;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.mb-card__link:focus-visible {
	outline: 3px solid var(--mb-coral);
	outline-offset: 4px;
}

.mb-card__media {
	position: relative;
	display: flex;
	overflow: hidden;
	align-items: flex-end;
	justify-content: center;
}

.mb-card__image {
	display: block;
	transition: transform 0.35s ease;
}

.mb-card__placeholder {
	display: grid;
	width: 46%;
	aspect-ratio: 1;
	margin: auto;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.7);
	color: var(--mb-v-solid, #ee4630);
	font-size: clamp(22px, 14cqi, 48px);
	font-weight: 800;
}

.mb-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	text-align: center;
}

.mb-card__title {
	margin: 0;
	font-size: clamp(15px, 8cqi, 20px);
	font-weight: 700;
	line-height: 1.3;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.mb-card__meta {
	font-size: clamp(13px, 5.6cqi, 14px);
	font-weight: 500;
	line-height: 1.4;
}

/* Character: cutout on a soft card_bg panel (homepage animators look). */
.mb-card--character .mb-card__media {
	aspect-ratio: 3 / 4;
	border-radius: clamp(20px, 12cqi, 32px);
	background: var(--mb-v-soft, #f6f3f0);
	background:
		radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.85) 0 16%, rgba(255, 255, 255, 0) 58%),
		linear-gradient(180deg, var(--mb-v-soft, #f6f3f0) 0%, var(--mb-v-soft-2, #efe8e3) 100%);
}

.mb-card--character .mb-card__image {
	width: auto;
	height: 94%;
	max-width: var(--mb-card-fit, 86%);
	object-fit: contain;
	object-position: bottom center;
	transform-origin: bottom center;
}

.mb-card--fit-narrow { --mb-card-fit: 66%; }
.mb-card--fit-regular { --mb-card-fit: 86%; }
.mb-card--fit-wide { --mb-card-fit: 100%; }

/* card_fit=photo: a photo, not a cutout, fills the whole panel. */
.mb-card--fit-photo .mb-card__image {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center top;
}

.mb-card--character .mb-card__body {
	padding: clamp(8px, 5cqi, 14px) 4px 0;
}

.mb-card--character .mb-card__title {
	color: #111;
}

.mb-card--character .mb-card__meta {
	color: var(--mb-ink-muted, #625d5a);
}

/* Show: photo in a solid card_bg frame + white name (homepage show-programs look). */
.mb-card--show .mb-card__link {
	padding: clamp(8px, 4cqi, 14px);
	border-radius: clamp(22px, 10cqi, 36px);
	background: var(--mb-v-solid, #ee4630);
	color: var(--mb-v-on-solid, #fff);
}

.mb-card--show .mb-card__media {
	aspect-ratio: 5 / 4;
	border-radius: clamp(16px, 7.5cqi, 26px);
	background: rgba(255, 255, 255, 0.18);
}

.mb-card--show .mb-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mb-card--show .mb-card__body {
	flex: 1;
	justify-content: center;
	padding: clamp(8px, 4.5cqi, 18px) 6px clamp(4px, 2cqi, 8px);
}

.mb-card--show .mb-card__title {
	font-size: clamp(16px, 7.6cqi, 27px);
}

.mb-card--show .mb-card__meta {
	opacity: 0.9;
}

.mb-card--sm .mb-card__title {
	font-size: clamp(14px, 7cqi, 18px);
}

.mb-card--show.mb-card--sm .mb-card__title {
	font-size: clamp(15px, 6.4cqi, 22px);
}

@media (hover: hover) {
	.mb-card--character .mb-card__link:hover .mb-card__image {
		transform: translateY(-4px) scale(1.02);
	}

	.mb-card--show .mb-card__link:hover .mb-card__image {
		transform: scale(1.04);
	}

	.mb-card__link:hover .mb-card__title {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 4px;
	}
}

/* ---- Grid ---------------------------------------------------------------- */
/* auto-fill + minmax capped at --cols columns: 2 / 3 / 4 by default (card-grid `columns`). */
.mb-card-grid {
	--mb-grid-gap: clamp(12px, 3vw, 24px);
	--mb-grid-cols: var(--grid-cols, 2);
	display: grid;
	grid-template-columns: repeat(
		auto-fill,
		minmax(max(136px, (100% - (var(--mb-grid-cols) - 1) * var(--mb-grid-gap)) / var(--mb-grid-cols)), 1fr)
	);
	gap: clamp(20px, 4vw, 32px) var(--mb-grid-gap);
	width: 100%;
}

.mb-card-grid > [hidden] {
	display: none !important;
}

@media (min-width: 641px) {
	.mb-card-grid {
		--mb-grid-cols: var(--grid-cols-md, 3);
	}
}

@media (min-width: 1025px) {
	.mb-card-grid {
		--mb-grid-cols: var(--grid-cols-lg, 4);
	}
}

/* ---- Empty state --------------------------------------------------------- */
.mb-empty {
	display: flex;
	width: min(560px, 100%);
	margin: clamp(12px, 3vw, 24px) auto 0;
	padding: clamp(28px, 6vw, 44px) clamp(20px, 5vw, 40px);
	flex-direction: column;
	align-items: center;
	border: 1px solid var(--mb-card-border, #f0edea);
	border-radius: var(--mb-radius-2xl);
	background: #fff;
	box-shadow: var(--mb-shadow-sm);
	text-align: center;
}

.mb-empty[hidden] {
	display: none;
}

.mb-empty__icon {
	display: grid;
	width: 56px;
	height: 56px;
	place-items: center;
	border-radius: 50%;
	background: #fff3f0;
	color: #f04e37;
}

.mb-empty__title {
	margin: 14px 0 0;
	color: #111827;
	font-size: clamp(18px, 1rem + 0.6vw, 22px);
	font-weight: 800;
}

.mb-empty__text {
	margin: 6px 0 0;
	color: var(--mb-ink-muted, #625d5a);
	font-size: 15px;
	line-height: 1.5;
}

.mb-empty__action {
	display: inline-flex;
	min-height: 48px;
	margin-top: 18px;
	padding: 0 24px;
	align-items: center;
	border-radius: var(--mb-radius-pill);
	background: #fdf0ee;
	color: #d9222a;
	font-weight: 700;
	text-decoration: none;
}

@media (hover: hover) {
	.mb-empty__action:hover {
		background: #fbe1dc;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mb-card__image {
		transition: none;
	}
}

/* mb-rail: css/components/rail.css */
/*
 * Rail: native horizontal scroll-snap list (components/rail.php, assets/js/rails.js).
 * Slides per view come from --rail-per / --rail-per-md / --rail-per-lg (rail `per_view`);
 * below 641px the next slide peeks in. Prev/next buttons overlay the edges, so showing
 * or hiding them never shifts layout.
 */
.mb-rail {
	--mb-rail-gap: clamp(12px, 3vw, 24px);
	--mb-rail-per: var(--rail-per, 1);
	--mb-rail-peek: 0.86;
	position: relative;
	width: min(var(--mb-content, 1110px), 100%);
	margin: clamp(48px, 9vw, 88px) auto 0;
}

.mb-rail__frame {
	position: relative;
}

.mb-rail__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	margin-block: -8px;
	padding-block: 8px;
	overscroll-behavior-x: contain;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	touch-action: pan-x pan-y;
	border-radius: var(--mb-radius-xl);
}

.mb-rail__viewport::-webkit-scrollbar {
	display: none;
}

.mb-rail__viewport:focus-visible {
	outline: 3px solid var(--mb-coral);
	outline-offset: 4px;
}

.mb-rail__list {
	display: flex;
	gap: var(--mb-rail-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Auto margins centre a rail that fits and resolve to 0 once it overflows (stays scrollable). */
.mb-rail__item:first-child {
	margin-left: auto;
}

.mb-rail__item:last-child {
	margin-right: auto;
}

.mb-rail__item {
	min-width: 0;
	flex: 0 0 calc((100% - (var(--mb-rail-per) - 1) * var(--mb-rail-gap)) / var(--mb-rail-per) * var(--mb-rail-peek));
	scroll-snap-align: start;
}

.mb-rail__btn {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	padding: 0;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: #ef4444;
	box-shadow: 0 8px 18px rgba(239, 68, 68, 0.22);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.mb-rail__btn--prev {
	left: 6px;
}

.mb-rail__btn--next {
	right: 6px;
}

.mb-rail__btn:disabled {
	cursor: default;
	opacity: 0;
	pointer-events: none;
}

.mb-rail__btn:focus-visible {
	outline: 3px solid var(--mb-focus, #f37b6b);
	outline-offset: 3px;
}

/* rails.js toggles `hidden`; beat display rules of hand-written section buttons. */
[data-rail] [data-rail-prev][hidden],
[data-rail] [data-rail-next][hidden] {
	display: none !important;
}

/* The announcement bar's circle/pill indicators, adapted to the light canvas. */
.mb-rail-dots {
	display: flex;
	width: 100%;
	min-height: 32px;
	margin-top: 12px;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.mb-rail-dots[hidden],
.mb-rail-dots:empty {
	display: none;
}

.mb-rail-dots__dot {
	position: relative;
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	border-radius: var(--mb-radius-pill);
	background: #d7ceca;
	cursor: pointer;
	transition: width 0.25s ease, background-color 0.2s ease;
}

.mb-rail-dots__dot::before {
	position: absolute;
	inset: -12px -3px;
	content: "";
}

.mb-rail-dots__dot.is-active {
	width: 16px;
	background: var(--mb-coral);
}

@media (prefers-reduced-motion: reduce) {
	.mb-rail-dots__dot { transition: none; }
}

/* Photo slides (lightbox links). */
.mb-photo {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: clamp(18px, 3vw, 26px);
	background: #efe8e3;
}

.mb-photo__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.mb-photo:focus-visible {
	outline: 3px solid var(--mb-coral);
	outline-offset: -3px;
}

@media (hover: hover) {
	.mb-rail__btn:hover {
		background: #dc2626;
		transform: scale(1.05);
	}

	.mb-photo:hover .mb-photo__image {
		transform: scale(1.04);
	}
}

@media (min-width: 641px) {
	.mb-rail {
		--mb-rail-per: var(--rail-per-md, 2);
		--mb-rail-peek: 1;
	}
}

@media (min-width: 1025px) {
	.mb-rail {
		--mb-rail-per: var(--rail-per-lg, 3);
	}
}

@media (min-width: 1200px) {
	.mb-rail__btn--prev {
		left: -24px;
	}

	.mb-rail__btn--next {
		right: -24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mb-rail__viewport {
		scroll-behavior: auto;
	}

	.mb-rail__btn,
	.mb-photo__image {
		transition: none;
	}
}

/* mb-filter-chips: css/components/filter-chips.css */
/*
 * Filter chips (components/filter-chips.php): the header nav pill look, one horizontally
 * scrollable row (chips + optional select) in the normal page flow.
 */
.mb-filter-chips {
	position: relative;
	z-index: var(--mb-z-base);
	width: min(var(--mb-content, 1110px), 100%);
	margin: clamp(20px, 5vw, 32px) auto 0;
	padding-block: 8px;
}

.mb-filter-chips__bar {
	overflow: hidden;
	border: 1px solid rgba(240, 78, 55, 0.12);
	border-radius: var(--mb-radius-pill);
	background: #fff;
	box-shadow: var(--mb-shadow-md);
}

.mb-filter-chips__scroller {
	/* Positioned so the absolutely positioned visually-hidden label is clipped with the row. */
	position: relative;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.mb-filter-chips__scroller::-webkit-scrollbar {
	display: none;
}

.mb-filter-chips__list {
	display: flex;
	width: max-content;
	min-width: 100%;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 5px;
	list-style: none;
}

.mb-filter-chips__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.mb-filter-chips__item--select {
	margin-left: auto;
	padding-left: 4px;
}

.mb-filter-chips__chip {
	display: flex;
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	padding: 8px clamp(14px, 4vw, 20px);
	border-radius: var(--mb-radius-pill);
	color: var(--mb-gray-700, #374151);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.15;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.18s ease, background-color 0.18s ease;
	-webkit-tap-highlight-color: transparent;
}

.mb-filter-chips__chip.is-active,
.mb-filter-chips__chip[aria-pressed="true"] {
	background: #fdf0ee;
	color: #d9222a;
}

.mb-filter-chips__chip:focus-visible,
.mb-filter-chips__select select:focus-visible {
	outline: 3px solid var(--mb-coral);
	outline-offset: -3px;
}

.mb-filter-chips__form {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.mb-filter-chips__select {
	position: relative;
	display: flex;
	align-items: center;
}

/* .order-select trigger look (form.css) on a native select. */
.mb-filter-chips__select select {
	min-height: 44px;
	max-width: 62vw;
	padding: 0 42px 0 18px;
	overflow: hidden;
	border: 1.5px solid #f0e6e1;
	border-radius: var(--mb-radius-pill);
	background: #fdfaf8;
	color: #2b2726;
	font: inherit;
	font-size: max(16px, 1em);
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mb-filter-chips__select svg {
	position: absolute;
	right: 8px;
	width: 28px;
	height: 28px;
	padding: 5px;
	border-radius: 50%;
	background: #fff0ea;
	color: #f04e37;
	pointer-events: none;
}

.mb-filter-chips__submit {
	min-height: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--mb-radius-pill);
	background: #f04e37;
	color: #fff;
	font: inherit;
	font-weight: 700;
}

@media (hover: hover) {
	.mb-filter-chips__chip:hover {
		background: #fafafa;
		color: #d9222a;
	}

	.mb-filter-chips__chip.is-active:hover,
	.mb-filter-chips__chip[aria-pressed="true"]:hover {
		background: #fdf0ee;
	}

	.mb-filter-chips__select select:hover {
		border-color: #f6c9bd;
	}
}

@media (min-width: 641px) {
	.mb-filter-chips__list {
		padding: 7px;
	}

	.mb-filter-chips__select select {
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mb-filter-chips__chip,
	.mb-filter-chips__select select {
		transition: none;
	}
}

/* mb-pagination: css/components/pagination.css */
/*
 * Pagination (components/pagination.php): "Load more" pill (filters.js fetches the next
 * page) above real /page/N/ links.
 */
.mb-pagination {
	display: flex;
	margin-top: clamp(28px, 5vw, 48px);
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.mb-pagination__more {
	display: inline-flex;
	min-width: min(240px, 100%);
	min-height: 52px;
	padding: 0 32px;
	align-items: center;
	justify-content: center;
	border-radius: var(--mb-radius-pill);
	background: #f04e38;
	background: linear-gradient(105deg, #f04e38 0%, #ed7190 100%);
	box-shadow: var(--mb-shadow-coral);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.mb-pagination__more[aria-busy="true"] {
	cursor: progress;
	opacity: 0.7;
}

.mb-pagination__more:focus-visible {
	outline: 3px solid var(--mb-coral);
	outline-offset: 3px;
}

.mb-pagination__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mb-pagination__list .page-numbers {
	display: inline-grid;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	place-items: center;
	border: 1px solid var(--mb-card-border, #f0edea);
	border-radius: var(--mb-radius-pill);
	background: #fff;
	color: var(--mb-gray-700, #374151);
	font-weight: 700;
	text-decoration: none;
}

.mb-pagination__list .page-numbers.current {
	border-color: transparent;
	background: #fdf0ee;
	color: #d9222a;
}

.mb-pagination__list .page-numbers.dots {
	border: 0;
	background: transparent;
}

@media (hover: hover) {
	.mb-pagination__more:hover {
		transform: translateY(-2px);
	}

	.mb-pagination__list a.page-numbers:hover {
		border-color: #f6c9bd;
		color: #d9222a;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mb-pagination__more {
		transition: none;
	}
}

/* mb-consultation: css/components/consultation.css */
/*
 * Consultation strip (template-parts/components/consultation-strip.php): the one strip
 * for the homepage (inside the holiday formats section) and every other page. Values are
 * the approved homepage design; the homepage-only one-line desktop copy lives in
 * sections/holiday-formats.css. Mobile-first; breakpoints 641 / 1025 / 1200.
 */

.consultation-strip {
	position: relative;
	display: flex;
	width: min(1110px, 100%);
	min-height: 80px;
	margin: 28px auto 0;
	padding: 14px 18px;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	border: 1px solid rgba(240, 78, 55, 0.14);
	border-radius: 30px;
	background: var(--mb-white);
	font-family: var(--mb-font-sans);
}

.consultation-strip__copy {
	display: flex;
	width: 100%;
	min-width: 0;
	flex: 0 1 auto;
	align-items: flex-start;
	gap: 14px;
}

.consultation-strip__icon {
	display: grid;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	place-items: center;
	border-radius: 50%;
	background: #fdedeb;
	color: var(--mb-coral);
}

.consultation-strip__icon svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.5;
}

.consultation-strip__copy p {
	margin: 0;
	color: #333;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

.consultation-strip__button {
	display: inline-flex;
	width: min(100%, 280px);
	height: 48px;
	flex: 0 0 48px;
	align-items: center;
	justify-content: center;
	border-radius: 100px;
	background: #f04e38;
	color: var(--mb-white);
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
	text-decoration: none;
	white-space: nowrap;
}

.consultation-strip__button:focus-visible {
	outline: 3px solid var(--mb-coral);
	outline-offset: 3px;
}

@media (min-width: 641px) {
	.consultation-strip {
		padding: 16px 22px;
		flex-direction: row;
		gap: 18px;
		border-radius: 1000px;
	}

	.consultation-strip__copy {
		width: auto;
		flex: 1 1 auto;
		align-items: center;
	}

	.consultation-strip__button {
		width: clamp(210px, 30vw, 280px);
		height: 46px;
		flex: 0 0 clamp(210px, 30vw, 280px);
	}
}

@media (min-width: 1025px) {
	.consultation-strip {
		margin-top: 36px;
		padding: 17px 29px;
	}

	.consultation-strip__button {
		width: 280.67px;
		flex: 0 0 280.67px;
	}
}

@media (min-width: 1200px) {
	.consultation-strip__copy p {
		font-size: 18px;
	}
}

/* mb-form: css/components/form.css */
/*
 * Order section + order card form (components/order-section, components/order-form,
 * assets/js/order-form.js). Stage B: mobile-first, min-width breakpoints 641 / 1025 only;
 * in-between sizes use clamp() ramps that land on the approved static values at the
 * visual-diff widths. The order-card fields switch to two columns with a container query,
 * so the card adapts inside narrower inner-page columns. Includes the order rules of the
 * static polish.css (status line, busy spinner, invalid states) with static colour
 * fallbacks before each color-mix().
 */

.order-section {
	position: relative;
	z-index: 1;
	width: min(100% - 24px, 680px);
	margin: 0 auto;
	padding: clamp(88px, 88px + (100vw - 840px) * 0.175, 116px) 0 clamp(100px, 100px + (100vw - 840px) * 0.2, 132px);
	color: #111827;
	font-family: var(--mb-font-sans);
}

.order-section--bare {
	padding-block: clamp(24px, 5vw, 48px) 0;
}

.order-section__intro {
	text-align: center;
}

.order-section__title {
	display: flex;
	align-items: center;
	margin: 0;
	flex-direction: column;
	font-size: clamp(32px, 10vw, 46px);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	text-wrap: balance;
}

.order-section__title strong {
	display: grid;
	width: min(100%, 410px);
	min-height: 54px;
	margin: 0 0 2px;
	padding: 10px 18px;
	place-items: center;
	border-radius: 999px;
	background: #ff533d;
	background: linear-gradient(102deg, #ff533d 0%, #ff7f22 48%, #ed7190 100%);
	color: #fff;
	font-size: 0.78em;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	text-align: center;
	white-space: normal;
}

.order-section__description {
	margin: 27px auto 0;
	color: #555;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.55;
	text-wrap: pretty;
}

.order-section__description br {
	display: none;
}

/* Card */
.order-card {
	width: min(980px, 100%);
	margin: 32px auto 0;
	padding: 24px clamp(16px, 16px + (100vw - 391px) * 0.25, 20px) 28px;
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 24px 56px rgba(17, 24, 39, 0.13), 0 8px 18px rgba(17, 24, 39, 0.07);
}

.order-section--bare .order-card {
	margin-top: 0;
}

.order-card__header {
	display: flex;
	min-height: 64px;
	align-items: center;
	gap: 11px;
}

.order-card__icon {
	display: grid;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	place-items: center;
	border-radius: 14px;
	background: #fff0ea;
	box-shadow: 0 7px 16px rgba(240, 78, 55, 0.12);
	color: #f04e37;
}

.order-card__icon svg,
.order-field__label svg,
.order-picker__icon {
	fill: none;
	stroke: #f04e37;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.9;
}

.order-card__icon svg {
	width: 24px;
	height: 24px;
	stroke: currentColor;
}

.order-card__header :is(h2, h3) {
	margin: 0;
	color: #111827;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.3;
}

.order-card__header p {
	margin: 2px 0 0;
	color: #6b7280;
	font-size: 13px;
	line-height: 1.35;
}

.order-card__fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 17px 24px;
	margin-top: 24px;
}

.order-field {
	display: flex;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	flex-direction: column;
	gap: 8px;
}

.order-field--wide {
	grid-column: 1 / -1;
}

.order-field__label {
	display: inline-flex;
	min-height: 21px;
	align-items: center;
	gap: 8px;
	color: #1f2937;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
}

.order-field__label svg {
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
}

.order-field__label--split {
	justify-content: space-between;
}

.order-field__label--split > span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.order-field__label--split label {
	cursor: pointer;
}

.order-field__label small {
	color: #a8948a;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

/* Shared control shell */
.order-input,
.order-select__trigger,
.order-picker__trigger,
.order-stepper,
.order-duration {
	position: relative;
	display: flex;
	width: 100%;
	height: 52px;
	align-items: center;
	border: 1.5px solid #f0e6e1;
	border-radius: 16px;
	background: #fdfaf8;
	color: #2b2726;
	font: inherit;
	font-size: 15px;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.order-input:focus,
.order-select__trigger:focus-visible,
.order-picker__trigger:focus-visible,
.order-select.is-open .order-select__trigger,
.order-datetime.is-open .order-picker__trigger,
.order-stepper:focus-within,
.order-duration:focus-within {
	border-color: #f04e37;
	background: #fff;
	box-shadow: 0 0 0 4px rgba(240, 78, 55, 0.12);
}

/* Text entry: >= 16px below 1025px so iOS Safari does not zoom on focus. */
.order-input {
	padding: 0 18px;
	font-size: max(16px, 1em);
	text-overflow: ellipsis;
}

.order-input::placeholder {
	color: #9a8b84;
	opacity: 1;
}

.order-input:disabled,
.order-select__trigger:disabled,
.order-picker__trigger:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

/* Hidden native value holders keep constraint validation working */
.order-select select,
.order-proxy {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.order-select,
.order-datetime {
	position: relative;
}

/* Honeypot: off-screen, still in the form data (not display:none). */
.order-hp {
	position: absolute;
	top: auto;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Custom select */
.order-select__trigger,
.order-picker__trigger {
	gap: 10px;
	padding: 0 16px 0 18px;
	text-align: left;
	cursor: pointer;
}

.order-select__value,
.order-picker__value {
	min-width: 0;
	flex: 1;
	overflow: hidden;
	color: #9a8b84;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.order-select.has-value .order-select__value,
.order-datetime.has-value .order-picker__value {
	color: #2b2726;
	font-weight: 600;
}

.order-select__trigger > svg,
.order-picker__trigger > svg:last-child {
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	padding: 6px;
	border-radius: 50%;
	background: #fff0ea;
	fill: none;
	stroke: #f04e37;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	transition: transform 0.2s ease, background-color 0.15s ease;
}

.order-select.is-open .order-select__trigger > svg,
.order-datetime.is-open .order-picker__trigger > svg:last-child {
	transform: rotate(180deg);
	background: #ffe2d8;
}

/* Popovers: below the trigger; order-form.js flips them above (.is-above), caps max-height and
   shifts them horizontally (--pop-x) so they never leave the viewport. */
.order-popover {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 30;
	border: 1px solid #f4e4dc;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 22px 44px rgba(120, 52, 28, 0.16), 0 4px 12px rgba(120, 52, 28, 0.06);
	translate: var(--pop-x, 0px) 0;
	animation: order-pop 0.16s ease-out;
}

.order-popover[hidden] {
	display: none;
}

.order-popover.is-above {
	top: auto;
	bottom: calc(100% + 8px);
}

@keyframes order-pop {
	from {
		opacity: 0;
		transform: translateY(-6px) scale(0.98);
	}
}

.order-select__list {
	right: 0;
	max-height: 280px;
	margin: 0;
	padding: 8px;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	outline: none;
}

.order-select__option {
	display: flex;
	min-height: 44px;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 14px;
	border-radius: 12px;
	color: #2b2726;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.order-select__option + .order-select__option {
	margin-top: 2px;
}

.order-select__option.is-active {
	background: #fff4ef;
	color: #d63d27;
}

.order-select__option[aria-selected="true"] {
	background: #ff533d;
	background: linear-gradient(100deg, #ff533d 0%, #ff7f22 100%);
	color: #fff;
}

.order-select__option svg {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2.2;
	opacity: 0;
}

.order-select__option[aria-selected="true"] svg {
	opacity: 1;
}

/* Hero-age stepper (44x44 buttons) */
.order-stepper {
	justify-content: space-between;
	gap: 8px;
	padding: 0 3px;
	font-size: 17px;
}

.order-stepper__btn {
	display: grid;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: #fff0ea;
	color: #f04e37;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.order-stepper__btn:active {
	transform: scale(0.94);
}

.order-stepper__btn:focus-visible {
	outline: 2px solid #f04e37;
	outline-offset: 2px;
}

.order-stepper__btn svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-width: 2.4;
}

.order-stepper__field {
	display: flex;
	min-width: 0;
	flex: 1;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
}

.order-stepper__field input {
	width: 3ch;
	padding: 0;
	border: 0;
	background: transparent;
	color: #2b2726;
	font: inherit;
	font-size: 20px;
	font-weight: 800;
	text-align: center;
	outline: none;
	appearance: textfield;
	-moz-appearance: textfield;
}

.order-stepper__field input::-webkit-inner-spin-button,
.order-stepper__field input::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.order-stepper__field input::placeholder {
	color: #c9b8b0;
}

.order-stepper__suffix {
	color: #9a8b84;
	font-size: 15px;
	font-weight: 600;
}

/* Duration slider */
.order-duration {
	--fill: 40%;
	gap: 14px;
	padding: 0 7px 0 18px;
	font-size: 17px;
}

.order-duration__range {
	min-width: 0;
	height: 26px;
	flex: 1;
	margin: 0;
	background: transparent;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.order-duration__range:focus {
	outline: none;
}

.order-duration__range::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(90deg, #ff533d 0%, #ff7f22 var(--fill), #f3e6df var(--fill));
}

.order-duration__range::-moz-range-track {
	height: 8px;
	border-radius: 999px;
	background: #f3e6df;
}

.order-duration__range::-moz-range-progress {
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(90deg, #ff533d 0%, #ff7f22 100%);
}

.order-duration__range::-webkit-slider-thumb {
	width: 24px;
	height: 24px;
	margin-top: -8px;
	border: 5px solid #fff;
	border-radius: 50%;
	background: #f04e37;
	box-shadow: 0 0 0 1.5px #f04e37, 0 4px 10px rgba(240, 78, 55, 0.35);
	-webkit-appearance: none;
	transition: transform 0.12s ease;
}

.order-duration__range::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 5px solid #fff;
	border-radius: 50%;
	background: #f04e37;
	box-shadow: 0 0 0 1.5px #f04e37, 0 4px 10px rgba(240, 78, 55, 0.35);
}

.order-duration__range:active::-webkit-slider-thumb,
.order-duration__range:focus-visible::-webkit-slider-thumb {
	transform: scale(1.15);
}

.order-duration__value {
	display: flex;
	min-width: 112px;
	height: 38px;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 0 12px;
	border-radius: 12px;
	background: #fff0ea;
	color: #d63d27;
	font-size: 14px;
	font-weight: 800;
	white-space: nowrap;
}

.order-duration__number {
	width: 1ch;
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.order-duration__number--minutes {
	width: 2ch;
}

/* Date + time picker: bottom sheet below 641px (backdrop = root ::before, page scroll locked
   via html.is-order-sheet-open), anchored popover from 641px. */
.order-picker__icon {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
}

.order-datetime__panel {
	position: fixed;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	max-height: 85vh;
	max-height: 85dvh;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	padding: 20px max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: 24px 24px 0 0;
	animation-name: order-sheet;
	animation-duration: 0.2s;
}

/* Fade only: a transform would push the sheet past the viewport edge while animating. */
@keyframes order-sheet {
	from {
		opacity: 0;
	}
}

.order-datetime__panel[hidden] {
	display: none;
}

.order-datetime.is-open::before {
	position: fixed;
	inset: 0;
	z-index: 29;
	background: rgba(17, 24, 39, 0.42);
	content: "";
}

html.is-order-sheet-open {
	overflow: hidden;
}

.order-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.order-cal__title {
	color: #111827;
	font-size: 17px;
	font-weight: 800;
}

.order-cal__nav {
	display: grid;
	width: 40px;
	height: 40px;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff0ea;
	color: #f04e37;
	cursor: pointer;
}

.order-cal__nav:disabled {
	background: #f7f2ef;
	color: #d4c6bf;
	cursor: default;
}

.order-cal__nav svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2.2;
}

.order-cal__weekdays,
.order-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
}

.order-cal__weekdays span {
	padding-bottom: 6px;
	color: #a8948a;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
}

.order-cal__weekdays span:nth-child(n + 6) {
	color: #f04e37;
}

.order-cal__day {
	aspect-ratio: 1;
	min-height: 36px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: #2b2726;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.order-cal__day.is-today {
	box-shadow: inset 0 0 0 1.5px #f6b8a8;
}

.order-cal__day[aria-pressed="true"] {
	background: #ff533d;
	background: linear-gradient(135deg, #ff533d 0%, #ff7f22 100%);
	box-shadow: 0 6px 14px rgba(240, 78, 55, 0.3);
	color: #fff;
}

.order-cal__day:disabled {
	color: #d4c6bf;
	cursor: default;
}

.order-cal__day:focus-visible,
.order-times__slot:focus-visible {
	outline: 2px solid #f04e37;
	outline-offset: 2px;
}

.order-times {
	display: flex;
	min-height: 0;
	flex-direction: column;
	padding: 14px 0 0;
	border-top: 1px solid #f4e4dc;
}

.order-times__title {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	color: #111827;
	font-size: 17px;
	font-weight: 800;
}

.order-times__grid {
	display: grid;
	max-height: 132px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
	padding-right: 4px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #f6c9bd transparent;
}

.order-times__slot {
	height: 40px;
	padding: 0;
	border: 1.5px solid #f0e6e1;
	border-radius: 999px;
	background: #fdfaf8;
	color: #2b2726;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.order-times__slot[aria-pressed="true"] {
	border-color: transparent;
	background: #ff533d;
	background: linear-gradient(100deg, #ff533d 0%, #ff7f22 100%);
	color: #fff;
}

.order-times__slot:disabled {
	border-style: dashed;
	background: transparent;
	color: #d4c6bf;
	cursor: not-allowed;
}

/* Invalid states (JS marks the native holder + its trigger; :user-invalid for plain inputs) */
.order-card :is(input, select):user-invalid,
.order-card :is(input, select).is-invalid,
.order-select:has(select.is-invalid) .order-select__trigger,
.order-datetime:has(.order-proxy.is-invalid) .order-picker__trigger {
	border-color: #f04e37;
	border-color: var(--mb-coral, #f04e37);
	background: #fff6f4;
	background: color-mix(in oklch, var(--mb-coral), white 96%);
}

/* Gender */
.order-field--gender .order-field__label {
	margin-bottom: 2px;
}

.order-gender {
	display: grid;
	height: 52px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.order-gender__option {
	position: relative;
	display: flex;
	min-width: 0;
	height: 52px;
	align-items: center;
	justify-content: center;
	gap: 9px;
	border: 1.5px solid #f0e6e1;
	border-radius: 16px;
	background: #fdfaf8;
	color: #4b5563;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.order-gender__option:has(input[value="girl"]:checked) {
	border-color: #fbcfe8;
	background: #fff1f2;
	color: #e11d48;
}

.order-gender__option:has(input[value="boy"]:checked) {
	border-color: #60a5fa;
	background: #eff6ff;
	color: #2563eb;
}

.order-gender__option input,
.order-consent input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.order-gender__option:has(input:focus-visible) {
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

.order-gender__option svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.9;
}

/* Consent */
.order-consent {
	position: relative;
	display: flex;
	min-height: 44px;
	align-items: flex-start;
	gap: 10px;
	margin-top: 20px;
	padding-block: 6px;
	color: #4b5563;
	font-size: 13px;
	line-height: 1.35;
	cursor: pointer;
}

/* Inline privacy link: the checkbox overlay covers only the box, so the link stays clickable
   and a tap on the rest of the text still toggles the box (native label activation). */
.order-consent input {
	inset: 6px auto auto 0;
	width: 18px;
	height: 18px;
}

.order-consent__link {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(240, 78, 55, 0.55);
	text-underline-offset: 2px;
}

.order-consent__box {
	position: relative;
	display: inline-block;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	border: 1.5px solid #f04e37;
	border-radius: 4px;
	background: #fff;
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.order-consent__box::after {
	position: absolute;
	top: 3px;
	left: 5px;
	width: 5px;
	height: 8px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	content: "";
	opacity: 0;
	transform: rotate(45deg) scale(0.6);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.order-consent input:checked + .order-consent__box {
	border-color: #f04e37;
	background: #f04e37;
}

.order-consent input:checked + .order-consent__box::after {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}

.order-consent:focus-within .order-consent__box {
	box-shadow: 0 0 0 3px rgba(240, 78, 55, 0.14);
}

.order-consent:has(input:user-invalid) .order-consent__box,
.order-consent:has(input.is-invalid) .order-consent__box {
	border-width: 2px;
	box-shadow: 0 0 0 4px rgba(240, 78, 55, 0.26);
	box-shadow: 0 0 0 4px var(--mb-focus-halo);
}

/* Actions */
.order-card__actions {
	display: flex;
	min-height: 60px;
	align-items: flex-start;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	margin-top: 20px;
}

.order-submit {
	width: 100%;
	height: 52px;
	padding: 0 28px;
	border: 0;
	border-radius: 999px;
	background: #ff4d43;
	background: linear-gradient(100deg, #ff4d43 0%, #ff8b1e 100%);
	box-shadow: 0 13px 22px rgba(240, 78, 55, 0.22);
	color: #fff;
	font: inherit;
	font-size: 17px;
	font-weight: 800;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.order-submit:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 17px 25px rgba(240, 78, 55, 0.28);
}

.order-submit:disabled:not([aria-busy="true"]) {
	cursor: not-allowed;
	opacity: 0.55;
}

.order-submit[aria-busy="true"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.order-submit[aria-busy="true"]::after {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #fff;
	border-radius: 50%;
	content: "";
	animation: mb-spin 720ms linear infinite;
}

@keyframes mb-spin {
	to {
		transform: rotate(1turn);
	}
}

.order-slogan {
	display: flex;
	align-items: flex-end;
	align-self: flex-end;
	justify-content: flex-end;
	margin: 0;
	color: #1f2937;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	text-align: right;
}

.order-slogan > span,
.order-slogan__line {
	display: block;
}

.order-slogan strong {
	color: #f04e37;
	font-weight: 800;
}

.order-slogan img {
	width: 22px;
	height: 22px;
	margin: 0 0 1px 9px;
}

/* Status line + "orders unavailable" fallback */
.order-card__status,
.order-card__fallback {
	margin: 14px 0 0;
	padding: 12px 14px;
	border: 1px solid #b5d8b3;
	border: 1px solid color-mix(in oklch, var(--mb-green), white 68%);
	border-radius: 12px;
	background: #eef6ed;
	background: color-mix(in oklch, var(--mb-green), white 93%);
	color: #2f7a2b;
	color: color-mix(in oklch, var(--mb-green), black 28%);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.45;
}

.order-card__status[hidden] {
	display: none;
}

.order-card__status[data-state="error"],
.order-card__fallback {
	border-color: #f9bcb2;
	border-color: color-mix(in oklch, var(--mb-coral), white 68%);
	background: #fef0ee;
	background: color-mix(in oklch, var(--mb-coral), white 94%);
	color: #a8321f;
	color: color-mix(in oklch, var(--mb-coral), black 30%);
}

.order-card__status[data-state="loading"] {
	border-color: #fbcf9f;
	border-color: color-mix(in oklch, var(--mb-orange), white 64%);
	background: #fef3e7;
	background: color-mix(in oklch, var(--mb-orange), white 93%);
	color: #a6560f;
	color: color-mix(in oklch, var(--mb-orange), black 34%);
}

.order-card__fallback p {
	margin: 0;
}

.order-card__fallback-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}

.order-card__fallback-btn {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	gap: 6px;
	padding: 0 18px;
	border-radius: 999px;
	background: #f04e37;
	color: #fff;
	font-weight: 800;
	text-decoration: none;
}

.order-card__fallback-btn--wa {
	background: #25a244;
}

/* Hover only where a pointer can hover (no sticky hover after a tap). */
@media (hover: hover) {
	.order-input:hover,
	.order-select__trigger:hover,
	.order-picker__trigger:hover,
	.order-stepper:hover,
	.order-duration:hover {
		border-color: #f6c9bd;
	}

	.order-stepper__btn:hover {
		background: linear-gradient(100deg, #ff533d 0%, #ff7f22 100%);
		color: #fff;
	}

	.order-cal__nav:hover:not(:disabled) {
		background: #ffe2d8;
	}

	.order-cal__day:hover:not(:disabled, [aria-pressed="true"]) {
		background: #fff0ea;
		color: #d63d27;
	}

	.order-times__slot:hover:not(:disabled, [aria-pressed="true"]) {
		border-color: #f6b8a8;
		background: #fff0ea;
		color: #d63d27;
	}

	.order-submit:hover:not(:disabled) {
		transform: translateY(-2px);
		box-shadow: 0 17px 25px rgba(240, 78, 55, 0.28);
	}
}

/* Tablet */
@media (min-width: 641px) {
	.order-section {
		width: min(100% - 48px, 760px);
	}

	.order-section__title {
		font-size: clamp(40px, 4.25vw, 53px);
	}

	.order-section__title strong {
		width: min(436px, 100%);
		min-height: 0;
		height: 63px;
		padding: 0;
		white-space: nowrap;
	}

	.order-section__description {
		font-size: 16px;
	}

	.order-section__description br {
		display: revert;
	}

	.order-section__line {
		display: block;
	}

	.order-card {
		container: order-card / inline-size;
		min-height: 666px;
		margin-top: 46px;
		padding: 36px clamp(28px, 28px + (100vw - 840px) * 0.1, 43px) 37px;
		border-radius: 28px;
	}

	.order-card__header {
		gap: 14px;
	}

	.order-card__icon {
		width: 46px;
		height: 46px;
		flex-basis: 46px;
	}

	.order-card__header :is(h2, h3) {
		font-size: clamp(26px, 26px + (100vw - 840px) * 0.03, 30px);
	}

	.order-card__header p {
		font-size: 16px;
	}

	.order-card__fields {
		gap: 18px 20px;
		margin-top: 28px;
	}

	.order-field__label,
	.order-input,
	.order-select__trigger,
	.order-picker__trigger,
	.order-gender__option {
		font-size: 17px;
	}

	.order-duration__value {
		min-width: 132px;
		font-size: 15px;
	}

	.order-datetime__panel {
		position: absolute;
		top: calc(100% + 8px);
		right: auto;
		bottom: auto;
		width: min(560px, 100vw - 32px);
		max-height: none;
		grid-template-columns: minmax(0, 1fr) 176px;
		gap: 18px;
		padding: 18px;
		border-radius: 20px;
		animation-name: order-pop;
		animation-duration: 0.16s;
	}

	.order-datetime.is-open::before {
		content: none;
	}

	.order-cal__nav {
		width: 34px;
		height: 34px;
	}

	.order-times {
		padding: 0 0 0 18px;
		border-top: 0;
		border-left: 1px solid #f4e4dc;
	}

	.order-times__title {
		height: 34px;
	}

	.order-times__grid {
		max-height: 262px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.order-times__slot {
		height: 36px;
	}

	.order-consent {
		align-items: center;
		font-size: 15px;
	}

	.order-consent input {
		top: calc(50% - 9px);
	}

	.order-card__actions {
		align-items: center;
		flex-direction: row;
	}

	.order-submit {
		width: 216px;
	}

	.order-slogan {
		align-self: auto;
		font-size: 16px;
	}

	.order-card__status {
		margin-top: 18px;
	}
}

/* Two field columns once the card itself is wide enough (home, order page, wide inner columns). */
@container order-card (min-width: 600px) {
	.order-card__fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Desktop */
@media (min-width: 1025px) {
	.order-section {
		width: min(1110px, 100% - 40px);
	}

	.order-card__fields {
		gap: 19px 24px;
	}
}

/* mb-sticky-cta: css/components/sticky-cta.css */
/*
 * Mobile sticky CTA bar (template-parts/footer/sticky-cta.php, assets/js/sticky-cta.js).
 * Mobile-first: the bar exists below 1025px only; it replaces the floating Viber badge there.
 * The bar slides in with .is-visible; body keeps a constant padding (--mb-sticky-h, set by
 * the script) so toggling the bar never shifts content.
 */

.sticky-cta {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 80; /* --mb-z-sticky: above page content, below the drawer overlay stack */
	z-index: var(--mb-z-sticky, 80);
	display: grid;
	grid-template-columns: 1fr 1fr 1.35fr;
	gap: 8px;
	padding: 10px max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
	border-top: 1px solid #f4e4dc;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 -10px 28px rgba(120, 52, 28, 0.12);
	font-family: var(--mb-font-sans);
	transform: translateY(calc(100% + 12px));
	visibility: hidden;
	transition: transform 0.22s ease, visibility 0s linear 0.22s;
}

.sticky-cta[hidden] {
	display: none;
}

.sticky-cta.is-visible {
	transform: none;
	visibility: visible;
	transition: transform 0.22s ease, visibility 0s;
}

.sticky-cta__btn {
	display: inline-flex;
	min-width: 0;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 0 10px;
	border: 1.5px solid #f0e6e1;
	border-radius: 999px;
	background: #fdfaf8;
	color: #2b2726;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.1;
	text-decoration: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}

.sticky-cta__btn svg {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.sticky-cta__btn span {
	overflow: hidden;
	text-overflow: ellipsis;
}

.sticky-cta__btn--call {
	color: #d63d27;
}

.sticky-cta__btn--viber {
	border-color: #ddd6fe;
	background: #f5f3ff;
	color: #7360f2;
}

.sticky-cta__btn--order {
	border: 0;
	background: #f04e37;
	background: linear-gradient(100deg, #ff4d43 0%, #ff8b1e 100%);
	box-shadow: 0 8px 18px rgba(240, 78, 55, 0.28);
	color: #fff;
}

.sticky-cta__btn:active {
	transform: scale(0.98);
}

.sticky-cta__btn:focus-visible {
	outline: 3px solid #f04e37;
	outline-offset: 2px;
}

/* Room for the bar at the end of every page (constant: no shift when it toggles). */
body {
	padding-bottom: var(--mb-sticky-h, 0px);
}

/* The bar replaces the floating Viber badge on mobile/tablet (html raises specificity over
   the badge rules that load later). */
html .viber-badge {
	display: none;
}

@media (min-width: 1025px) {
	.sticky-cta {
		display: none;
	}

	body {
		padding-bottom: 0;
	}

	html .viber-badge {
		display: grid;
	}
}

/* mb-lightbox: css/components/lightbox.css */
/*
 * Photo and video lightbox (components/lightbox.php + js/lightbox.js). A full-viewport modal <dialog>:
 * the image fits 100svh minus the safe areas, 48px round buttons (>= 44 tap targets),
 * counter top-left, caption under the image. Mobile-first; one breakpoint (1025px) moves the
 * prev/next buttons from the bottom bar to the sides.
 */
html.mb-lightbox-open {
	overflow: hidden;
}

.mb-lightbox {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	overscroll-behavior: contain;
	border: 0;
	background: #141111;
	background: rgba(20, 17, 17, 0.94);
	color: #fff;
	font-family: var(--mb-font-sans);
}

.mb-lightbox:not([open]) {
	display: none;
}

.mb-lightbox::backdrop {
	background: rgba(20, 17, 17, 0.6);
}

.mb-lightbox__stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	width: 100%;
	height: 100%;
	place-items: center;
	padding:
		calc(64px + env(safe-area-inset-top, 0px))
		calc(12px + env(safe-area-inset-right, 0px))
		calc(84px + env(safe-area-inset-bottom, 0px))
		calc(12px + env(safe-area-inset-left, 0px));
	touch-action: pan-y pinch-zoom;
	user-select: none;
	-webkit-user-select: none;
}

.mb-lightbox__figure {
	display: flex;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.mb-lightbox__image {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(100svh - 190px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
	object-fit: contain;
	border-radius: var(--mb-radius-md);
	background: rgba(255, 255, 255, 0.06);
	-webkit-user-drag: none;
}

.mb-lightbox__caption {
	max-width: 68ch;
	color: rgba(255, 255, 255, 0.88);
	font-size: 15px;
	line-height: 1.45;
	text-align: center;
	text-wrap: pretty;
}

.mb-lightbox__video {
	width: min(1040px, calc((100svh - 210px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 16 / 9));
	max-width: 100%;
	aspect-ratio: 16 / 9;
	flex-shrink: 0;
}

.mb-lightbox__video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--mb-radius-md);
	background: #000;
}

.mb-lightbox__image[hidden],
.mb-lightbox__video[hidden],
.mb-lightbox__caption[hidden] {
	display: none;
}

.mb-lightbox__counter {
	position: absolute;
	top: calc(18px + env(safe-area-inset-top, 0px));
	left: calc(18px + env(safe-area-inset-left, 0px));
	margin: 0;
	padding: 6px 14px;
	border-radius: var(--mb-radius-pill);
	background: rgba(255, 255, 255, 0.12);
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
}

.mb-lightbox__btn {
	position: absolute;
	display: grid;
	width: 48px;
	height: 48px;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.mb-lightbox__btn[hidden] {
	display: none;
}

.mb-lightbox__btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

.mb-lightbox__close {
	top: calc(12px + env(safe-area-inset-top, 0px));
	right: calc(12px + env(safe-area-inset-right, 0px));
}

.mb-lightbox__nav {
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

.mb-lightbox__nav--prev {
	left: calc(50% - 60px);
}

.mb-lightbox__nav--next {
	right: calc(50% - 60px);
}

@media (hover: hover) {
	.mb-lightbox__btn:hover {
		background: rgba(255, 255, 255, 0.26);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.mb-lightbox[open] {
		animation: mb-lightbox-in 180ms ease-out;
	}

	.mb-lightbox__btn {
		transition: background-color 160ms ease;
	}
}

@keyframes mb-lightbox-in {
	from {
		opacity: 0;
	}
}

@media (min-width: 1025px) {
	.mb-lightbox__stage {
		padding: 72px 96px 56px;
	}

	.mb-lightbox__image {
		max-height: calc(100svh - 160px);
	}

	.mb-lightbox__nav {
		top: 50%;
		bottom: auto;
		width: 56px;
		height: 56px;
		transform: translateY(-50%);
	}

	.mb-lightbox__nav--prev {
		left: 24px;
	}

	.mb-lightbox__nav--next {
		right: 24px;
	}
}

/* mb-cards-album: css/components/cards-album.css */
/*
 * Album card (cards/album.php): 4:3 cover with the album-type pill (top-left) and the photo
 * count (bottom-right), title + date centred below. Shares .mb-card base rules (cards.css).
 */
.mb-card--album .mb-card__media {
	aspect-ratio: 4 / 3;
	border-radius: clamp(18px, 9cqi, 28px);
	background: #efe8e3;
}

.mb-card--album .mb-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mb-card--album .mb-card__badge,
.mb-card--album .mb-card__count {
	position: absolute;
	max-width: calc(100% - 20px);
	overflow: hidden;
	padding: 4px 10px;
	border-radius: var(--mb-radius-pill);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mb-card--album .mb-card__badge {
	top: 10px;
	left: 10px;
	background: #fff;
	color: #d9222a;
	box-shadow: var(--mb-shadow-sm);
}

.mb-card--album .mb-card__count {
	right: 10px;
	bottom: 10px;
	background: rgba(20, 17, 17, 0.72);
	color: #fff;
}

.mb-card--album .mb-card__body {
	padding: clamp(8px, 5cqi, 14px) 4px 0;
}

.mb-card--album .mb-card__title {
	color: #111;
}

.mb-card--album .mb-card__meta {
	color: var(--mb-ink-muted, #625d5a);
}

@media (hover: hover) {
	.mb-card--album .mb-card__link:hover .mb-card__image {
		transform: scale(1.04);
	}
}

/* mb-cards-review: css/components/cards-review.css */
/*
 * Review card outside the homepage (cards/review.php): the homepage .review-card look
 * (sections/reviews.css is front-page only) as a flowing card: full text, auto height,
 * source label at the bottom. Mobile-first.
 */
.mb-review-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	padding: clamp(20px, 5vw, 28px) clamp(18px, 4.5vw, 28px);
	border: 1px solid rgba(240, 78, 55, 0.1);
	border-radius: 24px;
	background: #fff;
	font-family: var(--mb-font-sans);
	scroll-margin-top: 24px;
}

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

.mb-review-card:target {
	border-color: rgba(240, 78, 55, 0.45);
	box-shadow: 0 0 0 4px rgba(240, 78, 55, 0.12);
}

.mb-review-card .review-card__header {
	display: flex;
	min-height: 44px;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.mb-review-card .review-card__author {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 12px;
}

.mb-review-card .review-card__avatar {
	display: grid;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	place-items: center;
	overflow: hidden;
	border-radius: 50%;
	background: #fdedeb;
	color: var(--mb-coral);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

.mb-review-card .review-card__photo {
	display: block;
	width: 44px;
	height: 44px;
	object-fit: cover;
}

.mb-review-card .review-card__author > span:last-child {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

.mb-review-card__name {
	margin: 0;
	overflow: hidden;
	color: #111;
	font-size: 18px;
	font-weight: 700;
	line-height: 23px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mb-review-card small {
	color: #6b6562;
	font-size: 15px;
	line-height: 20px;
}

.mb-review-card .review-card__stars {
	flex: 0 0 auto;
	color: #edbb09;
	font-size: 19px;
	letter-spacing: -1.5px;
	line-height: 24px;
}

.mb-review-card__text {
	margin: 16px 0 0;
	color: var(--mb-ink-soft);
	font-size: 15px;
	line-height: 1.6;
	white-space: pre-line;
	text-wrap: pretty;
	overflow-wrap: anywhere;
}

.mb-review-card__source {
	margin: auto 0 0;
	padding-top: 14px;
	color: #6b6562;
	font-size: 13px;
	font-weight: 600;
}

/* mb-instagram: css/components/instagram.css */
/*
 * Instagram block (components/instagram-feed.php) around the Smash Balloon feed: our
 * content width and radius, no plugin margins/padding, profile pill link.
 * Plugin markup: #sb_instagram .sbi_photo_wrap / .sbi_photo, #sbi_mod_error (editors only).
 */
.mb-instagram {
	width: min(var(--mb-content, 1110px), 100%);
	margin: clamp(56px, 10vw, 96px) auto 0;
}

.mb-instagram__feed {
	margin-top: clamp(20px, 4vw, 32px);
	overflow: hidden;
	border-radius: var(--mb-radius-2xl);
}

.mb-instagram__feed #sb_instagram {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.mb-instagram__feed #sb_instagram #sbi_images {
	padding: 0 !important;
}

.mb-instagram__feed #sb_instagram .sbi_photo,
.mb-instagram__feed #sb_instagram .sbi_photo img {
	border-radius: var(--mb-radius-md);
}

.mb-instagram__feed #sbi_mod_error {
	margin: 0;
	padding: 16px 20px;
	border: 1px dashed #f0b9ae;
	border-radius: var(--mb-radius-lg);
	background: #fff;
	color: var(--mb-ink-soft, #2b2726);
	font-size: 15px;
}

.mb-instagram__more {
	display: flex;
	justify-content: center;
	margin: clamp(18px, 4vw, 28px) 0 0;
}

.mb-instagram__link {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	gap: 10px;
	padding: 0 24px;
	border-radius: var(--mb-radius-pill);
	background: #fdf0ee;
	color: #d9222a;
	font-weight: 700;
	text-decoration: none;
}

.mb-instagram__link:focus-visible {
	outline: 3px solid var(--mb-coral);
	outline-offset: 3px;
}

@media (hover: hover) {
	.mb-instagram__link:hover {
		background: #fbe1dc;
	}
}

/* mb-footer: css/components/footer.css */
/* Site footer (template-parts/footer/site-footer.php) and the floating Viber badge
   (footer/viber-badge.php). Stage B, mobile-first: base = phones, then 641px and
   1025px. Every link is a 44px tap row (padding + negative margins keep the
   approved 20px visual pitch). */

.site-footer {
	position: relative;
	z-index: 2;
	width: 100%;
	margin: 0;
	overflow: clip;
	background: #fffcfa;
	color: #242120;
}

/* The red balloon accent exists on desktop only. */
.site-footer__accent {
	display: none;
}

.site-footer__inner {
	position: relative;
	width: calc(100% - 32px);
	margin: 0 auto;
	padding-top: 32px;
}

.site-footer__divider {
	height: 1px;
	background: #e8e1de;
}

.site-footer__grid {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding-top: 28px;
}

.site-footer__brand,
.site-footer__column {
	position: relative;
	z-index: 1;
}

.site-footer__logo {
	display: inline-flex;
	width: 110px;
	height: 52px;
	overflow: hidden;
	border-radius: 8px;
}

.site-footer__logo img {
	display: block;
	width: 110px;
	height: 52px;
	object-fit: contain;
}

.site-footer__eyebrow {
	margin: -2px 0 0;
	color: #625d5a;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.site-footer__description {
	max-width: 300px;
	margin: 11px 0 0;
	color: #625d5a;
	font-size: 14px;
	line-height: 1.7;
}

.site-footer__order {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 205px;
	height: 50px;
	margin-top: 13px;
	padding: 0 28px;
	border-radius: 999px;
	background: #f22b24;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.site-footer__order:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(242, 43, 36, 0.25);
}

.site-footer__column {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.site-footer__column h2 {
	margin: 0 0 3px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

.site-footer__column a,
.site-footer__bottom a {
	display: inline-block;
	align-self: flex-start;
	/* 20px visual line inside a 44px tap box; short labels (RU "Шоу", EN "FAQ") get 44px width. */
	min-width: 44px;
	padding: 12px 4px;
	margin: -12px -4px;
	color: #55504e;
	font-size: 14px;
	line-height: 1.45;
	text-decoration: none;
}

.site-footer__column a:focus-visible,
.site-footer__bottom a:focus-visible {
	color: #f22b24;
	text-decoration: underline;
}

.site-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-top: 36px;
	padding-top: 19px;
	border-top: 1px solid #e8e1de;
	color: #514d4b;
	font-size: 13px;
}

.site-footer__bottom nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
}

@media (hover: hover) {
	.site-footer__order:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 16px rgba(242, 43, 36, 0.25);
	}

	.site-footer__column a:hover,
	.site-footer__bottom a:hover {
		color: #f22b24;
		text-decoration: underline;
	}
}

@media (min-width: 641px) {
	.site-footer__inner {
		width: calc(100% - 48px);
		padding-top: 34px;
	}

	.site-footer__grid {
		display: grid;
		grid-template-columns: 1.35fr repeat(2, 1fr);
		gap: 20px;
		min-height: 410px;
		padding-top: 20px;
	}

	.site-footer__column:last-child {
		grid-column: 2 / -1;
	}

	.site-footer__description {
		max-width: 260px;
	}

	.site-footer__bottom {
		flex-direction: row;
		align-items: center;
		gap: 0;
		margin-top: 21px;
	}

	.site-footer__bottom nav {
		flex-wrap: nowrap;
		gap: 32px;
	}
}

@media (min-width: 1025px) {
	.site-footer {
		min-height: 560px;
	}

	.site-footer__accent {
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		width: min(384px, calc(100vw - 980px));
		aspect-ratio: 384 / 560;
		overflow: visible;
		color: #fff;
		pointer-events: none;
	}

	.site-footer__accent-art {
		display: block;
		width: 100%;
		height: 100%;
	}

	.site-footer__accent-text {
		fill: currentColor;
		font-family: var(--mb-font-sans);
		font-size: 51px;
		font-weight: 800;
		letter-spacing: -0.045em;
	}

	.site-footer__accent-rays {
		position: absolute;
		top: 9%;
		left: 75%;
		width: 7%;
		aspect-ratio: 1;
		filter: grayscale(1) brightness(0) invert(1);
	}

	.site-footer__inner {
		width: min(1200px, calc(100% - 80px));
		min-height: 546px;
		padding-top: 50px;
	}

	.site-footer__grid {
		grid-template-columns: 280px repeat(2, 180px) 200px;
		gap: 30px;
	}

	.site-footer__column:last-child {
		grid-column: auto;
	}
}

@media (min-width: 1025px) and (max-width: 1199px) {
	.site-footer__accent {
		display: none;
	}
}

/* Floating Viber badge: desktop only (sticky-cta.css hides it below 1025px). */
.viber-badge {
	position: fixed;
	right: max(12px, env(safe-area-inset-right));
	bottom: max(16px, env(safe-area-inset-bottom));
	z-index: var(--mb-z-badge, 90);
	display: grid;
	width: 56px;
	height: 56px;
	place-items: center;
	border-radius: 50%;
	background: #7360f2;
	box-shadow: 0 10px 28px rgba(115, 96, 242, 0.45), 0 2px 8px rgba(0, 0, 0, 0.18);
	box-shadow:
		0 10px 28px color-mix(in oklch, #7360f2, transparent 55%),
		0 2px 8px color-mix(in oklch, black, transparent 82%);
	transition: transform 180ms ease, box-shadow 180ms ease;
	-webkit-tap-highlight-color: transparent;
}

.viber-badge:focus-visible {
	transform: translateY(-3px) scale(1.05);
	outline: 3px solid #7360f2;
	outline-offset: 3px;
}

@media (hover: hover) {
	.viber-badge:hover {
		transform: translateY(-3px) scale(1.05);
		box-shadow: 0 14px 32px rgba(115, 96, 242, 0.55), 0 4px 12px rgba(0, 0, 0, 0.22);
		box-shadow:
			0 14px 32px color-mix(in oklch, #7360f2, transparent 45%),
			0 4px 12px color-mix(in oklch, black, transparent 78%);
	}
}

@media (min-width: 641px) {
	.viber-badge {
		right: max(16px, env(safe-area-inset-right));
		bottom: max(20px, env(safe-area-inset-bottom));
		width: 64px;
		height: 64px;
	}

}

/* mb-page-archive: css/pages/archive.css */
/*
 * Catalog archives: archive-mb_character.php, archive-mb_show.php, taxonomy-party_theme.php.
 * Loaded on is_archive / is_search (inc/assets.php).
 */
.mb-archive__results {
	width: min(var(--mb-content, 1110px), 100%);
	margin: clamp(16px, 4vw, 28px) auto 0;
}

.mb-archive--theme .mb-archive__results {
	margin-top: clamp(40px, 8vw, 72px);
}

/* Everything after the grid (consultation strip, order section) gets section spacing. */
.mb-archive > .mb-archive__results + *,
.mb-archive > :is(.mb-rail, .animators-section, .show-programs-section) + *:not(.mb-rail) {
	margin-top: clamp(56px, 10vw, 96px);
}

/* mb-page-gallery: css/pages/gallery.css */
/*
 * Gallery archive (archive-mb_album.php). Layout comes from archive.css (.mb-archive__results)
 * and cards-album.css; this file only spaces the Instagram block and the grid's empty state.
 */
.mb-archive--gallery .mb-archive__results > .mb-empty:only-child {
	margin-top: clamp(24px, 5vw, 40px);
}

.mb-archive--gallery > .mb-instagram + * {
	margin-top: clamp(56px, 10vw, 96px);
}