/*
 * Maravian theme - styles every design shares. Colours, type, radii and width are the design's
 * tokens (CSS variables set from designs/<id>/design.json); a design's design.css adds its own.
 * Breakpoints: 750px (phone/tablet) and 990px (desktop).
 */

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* clip, not hidden: no scroll container, so the sticky header keeps working. Wide tracks (a
   gallery slider, a marquee) never make the page scroll sideways. */
html, body { overflow-x: clip; }
body {
	margin: 0;
	background: var(--mv-bg);
	color: var(--mv-text);
	font-family: var(--mv-font);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--mv-accent); }
h1, h2, h3, h4 { font-family: var(--mv-heading-font, inherit); color: var(--mv-heading, inherit); line-height: 1.2; margin: 0 0 .6em; font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--mv-accent); outline-offset: 2px; }
.screen-reader-text, .mv-skip:not(:focus) {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.mv-skip:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; background: var(--mv-bg); padding: 8px 14px; }

.mv-wrap { width: min(100% - 32px, var(--mv-width)); margin-inline: auto; }
.mv-wrap--narrow { width: min(100% - 32px, 820px); }
.mv-main { padding-block: 24px 64px; min-height: 50vh; }
.mv-landing, .mv-full { padding: 0; }
.mv-page-title { font-size: clamp(26px, 3.4vw, 38px); margin: 8px 0 24px; }

.mv-button, .button, button.button, input.button, a.button, .wp-element-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; padding: 10px 26px; border: 1px solid var(--mv-accent);
	border-radius: var(--mv-button-radius); background: var(--mv-accent); color: var(--mv-accent-text);
	font-weight: 600; letter-spacing: .02em; text-decoration: none; cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.mv-button:hover, .button:hover { filter: brightness(.94); color: var(--mv-accent-text); }
.mv-button--ghost { background: transparent; color: var(--mv-accent); }
.mv-button--ghost:hover { background: var(--mv-accent); color: var(--mv-accent-text); }
input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="number"], input[type="password"], select, textarea {
	min-height: 44px; padding: 8px 12px; border: 1px solid var(--mv-line); border-radius: var(--mv-radius); background: var(--mv-bg);
}

/* ------------------------------------------------------------------ announcement */
.mv-announce { background: var(--mv-bar); color: var(--mv-bar-text); font-size: 14px; overflow: hidden; }
.mv-announce__track { display: flex; justify-content: center; gap: 64px; padding: 8px 16px; white-space: nowrap; }
/* Each line carries its own space after it, so one set of lines is exactly the distance a loop moves.
   theme.js adds sets until a wide screen is covered and sets --mv-marquee-shift / --mv-marquee-time. */
.mv-announce--scroll .mv-announce__track { justify-content: flex-start; gap: 0; padding-left: 0; padding-right: 0; width: max-content; animation: mv-marquee var(--mv-marquee-time, 32s) linear infinite; }
.mv-announce--scroll .mv-announce__item { padding-right: 64px; }
.mv-announce--scroll:hover .mv-announce__track { animation-play-state: paused; }
@keyframes mv-marquee { to { transform: translateX(calc(-1 * var(--mv-marquee-shift, 50%))); } }
@media (prefers-reduced-motion: reduce) {
	.mv-announce--scroll .mv-announce__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 8px 64px; padding: 8px 16px; white-space: normal; }
	.mv-announce--scroll .mv-announce__item { padding-right: 0; }
	.mv-announce--scroll .mv-announce__item[aria-hidden] { display: none; }
}

/* ------------------------------------------------------------------ header */
.mv-header { position: sticky; top: 0; z-index: 50; background: var(--mv-bg); border-bottom: 1px solid var(--mv-line); }
.admin-bar .mv-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .mv-header { top: 0; } }
.mv-header__bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 68px; }
.mv-header__start, .mv-header__end { display: flex; align-items: center; gap: 4px; }
.mv-header__end { justify-content: flex-end; }
.mv-header__brand img, .mv-header__brand .custom-logo { max-height: 56px; width: auto; }
.mv-header__name { font-family: var(--mv-heading-font); font-size: 24px; font-weight: 700; text-decoration: none; }
@media (max-width: 749px) {
	.mv-header__name { font-size: 18px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
	.mv-header__brand img, .mv-header__brand .custom-logo { max-height: 44px; }
}
.mv-iconbtn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 50%; }
.mv-iconbtn:hover { color: var(--mv-accent); }
.mv-cart-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--mv-accent); color: var(--mv-accent-text); font-size: 11px; line-height: 18px; text-align: center; }
.mv-cart-count:empty, .mv-cart-count[data-count="0"] { display: none; }
.mv-header__nav { display: none; }
.mv-menu, .mv-mobile-menu { list-style: none; margin: 0; padding: 0; }
.mv-menu { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.mv-menu a { display: block; padding: 8px 0; text-decoration: none; font-weight: 500; }
.mv-menu .menu-item-has-children { position: relative; }
.mv-menu .sub-menu { display: none; position: absolute; top: 100%; left: -16px; min-width: 220px; list-style: none; margin: 0; padding: 10px 16px; background: var(--mv-bg); border: 1px solid var(--mv-line); box-shadow: 0 12px 30px rgba(0,0,0,.08); z-index: 5; }
.mv-menu .menu-item-has-children:hover > .sub-menu, .mv-menu .menu-item-has-children:focus-within > .sub-menu { display: block; }
.mv-mobile-menu a { display: block; padding: 12px 0; border-bottom: 1px solid var(--mv-line); text-decoration: none; font-weight: 500; }
.mv-mobile-menu .sub-menu { list-style: none; padding-left: 16px; }

/* classic: logo left, menu beside it */
@media (min-width: 990px) {
	.mv-header-classic .mv-header__bar { grid-template-columns: auto auto 1fr auto; }
	.mv-header-classic .mv-header__brand { order: -1; }
	.mv-header-classic .mv-header__menu { display: none; }
	.mv-header-classic .mv-header__nav { display: block; justify-self: center; }
}
/* centered: menu + search left, logo centred, icons right; the menu below on desktop */
.mv-header-centered .mv-header__bar { grid-template-columns: 1fr auto 1fr; }
.mv-header-centered .mv-header__brand { justify-self: center; text-align: center; }
@media (min-width: 990px) {
	.mv-header-centered .mv-header__bar { grid-template-areas: "start brand end" "nav nav nav"; row-gap: 0; padding-top: 6px; }
	.mv-header-centered .mv-header__start { grid-area: start; }
	.mv-header-centered .mv-header__brand { grid-area: brand; }
	.mv-header-centered .mv-header__end { grid-area: end; }
	.mv-header-centered .mv-header__nav { grid-area: nav; display: flex; justify-content: center; padding-bottom: 4px; }
	.mv-header-centered .mv-header__menu { display: none; }
	.mv-header-centered.mv-scrolled .mv-header__nav { display: none; }
}

/* ------------------------------------------------------------------ drawers (dialog) */
.mv-drawer { border: 0; padding: 0; max-width: none; max-height: none; background: var(--mv-bg); color: var(--mv-text); }
.mv-drawer::backdrop { background: rgba(0,0,0,.45); }
.mv-cart:not([open]) { display: none; } /* Safari before 15.4 has no <dialog>; its links go to the cart page */
.mv-drawer[open] { display: flex; flex-direction: column; }
.mv-drawer--left, .mv-drawer:not(.mv-drawer--top):not(.mv-drawer--center) { margin: 0; height: 100%; width: min(380px, 88vw); }
.mv-drawer--left { margin-right: auto; }
#mv-filters { margin-left: 0; }
.mv-drawer--right { margin-left: auto !important; margin-right: 0 !important; }
.mv-drawer--top { margin: 0 auto auto; width: 100%; padding: 18px 0; }
.mv-drawer--top .mv-drawer__body { display: flex; gap: 8px; align-items: center; }
.mv-drawer--top form { flex: 1; display: flex; gap: 8px; }
.mv-drawer--top input[type="search"] { flex: 1; }
.mv-drawer--center { margin: auto; width: min(760px, 94vw); max-height: 86vh; border-radius: var(--mv-radius); }
.mv-drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--mv-line); }
.mv-drawer__body { padding: 16px 20px; overflow: auto; }
.mv-drawer .mv-drawer__close { width: 40px; height: 40px; border: 0; background: none; padding: 0; border-radius: 50%; color: inherit; box-shadow: none; font-size: 28px; line-height: 1; cursor: pointer; }
.mv-drawer .mv-drawer__close:hover, .mv-drawer .mv-drawer__close:focus { background: var(--mv-surface); color: inherit; }
.mv-drawer__cats { list-style: none; padding: 0; margin: 0; }
.mv-drawer__cats li a { display: inline-block; padding: 6px 0; }
.mv-drawer__cats .children { list-style: none; padding-left: 14px; }

/* ------------------------------------------------------------------ sections */
.mv-section { margin-block: clamp(32px, 5vw, 64px); }
.mv-section__title { text-align: center; font-size: clamp(24px, 3vw, 36px); margin-bottom: 28px; }
.mv-landing > .mv-section:first-child { margin-top: 0; }

.mv-hero { position: relative; overflow: hidden; margin-top: 0; }
.mv-hero__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mv-hero__track::-webkit-scrollbar { display: none; }
.mv-hero__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; display: block; text-decoration: none; color: inherit; }
.mv-hero__img { width: 100%; height: auto; max-height: 760px; object-fit: cover; }
.mv-hero__text { position: absolute; inset: auto 0 9% 0; text-align: center; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.35); padding: 0 16px; }
.mv-hero__head { font-size: clamp(28px, 5vw, 64px); font-weight: 700; margin: 0 0 10px; }
.mv-hero__dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; }
.mv-hero__dots button { width: 28px; height: 4px; border: 0; padding: 0; background: rgba(255,255,255,.55); cursor: pointer; }
.mv-hero__dots button[aria-current="true"] { background: #fff; }
/* 1.2: a hero never taller than the screen, legible over any photo, immune to kit heading/button styles. */
.mv-hero .mv-hero__img { display: block; width: 100%; max-width: none; object-fit: cover; }
@media (min-width: 750px) { .mv-hero .mv-hero__img { height: min(76vh, 700px); max-height: none; } }
@media (max-width: 749px) { .mv-hero .mv-hero__img { height: 72vh; min-height: 420px; } }
/* A slide with its own phone picture shows it whole (4:5), not a crop of the wide one (1.4). */
@media (max-width: 749px) { .mv-hero .mv-hero__slide--phone .mv-hero__img { height: auto; min-height: 0; aspect-ratio: 4 / 5; } }
.mv-hero__slide::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.45)); pointer-events: none; }
.mv-hero__text { z-index: 1; }
.mv-hero .mv-hero__head { color: #fff; font-family: var(--mv-heading-font); line-height: 1.1; letter-spacing: -.01em; }
.mv-hero .mv-hero__text p:not(.mv-hero__head) { font-size: clamp(15px, 1.6vw, 19px); max-width: 640px; margin: 0 auto 18px; }
.mv-hero .mv-hero__text .mv-button { background: #fff; color: var(--mv-text); border-color: #fff; }
.mv-hero .mv-hero__text .mv-button:hover { background: var(--mv-accent); color: var(--mv-accent-text); border-color: var(--mv-accent); }
.mv-hero .mv-hero__dots button { width: 28px; height: 4px; border: 0; padding: 0; border-radius: 2px; background: rgba(255,255,255,.55); min-height: 0; }
.mv-hero .mv-hero__dots button[aria-current="true"] { background: #fff; }
/* Left, dark text: for a light photo with room on the left (1.3). */
.mv-hero__slide--left-dark::after { display: none; }
.mv-hero .mv-hero__slide--left-dark .mv-hero__text { inset: 0 auto 0 0; width: min(46%, 620px); padding: 0 0 0 max(24px, 6vw); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; color: var(--mv-text); text-shadow: none; }
.mv-hero .mv-hero__slide--left-dark .mv-hero__head { color: var(--mv-heading, var(--mv-text)); }
.mv-hero .mv-hero__slide--left-dark .mv-hero__text p:not(.mv-hero__head) { margin: 0 0 22px; }
.mv-hero .mv-hero__slide--left-dark .mv-hero__text .mv-button { background: var(--mv-bar); color: var(--mv-bar-text); border-color: var(--mv-bar); }
.mv-hero .mv-hero__slide--left-dark .mv-hero__text .mv-button:hover { background: var(--mv-accent); border-color: var(--mv-accent); color: var(--mv-accent-text); }
@media (max-width: 749px) {
	.mv-hero .mv-hero__slide--left-dark .mv-hero__img { object-position: 72% center; }
	.mv-hero .mv-hero__slide--left-dark .mv-hero__text { inset: auto 0 0 0; width: auto; padding: 18px 20px 28px; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.92) 30%); }
}
/* The first hero at the top of a page fills the screen under the bars (1.7.0: the script after the
   hero measures them and the visible screen, --mv-hero-h), its
   words and button in the middle, a little above centre (1.5). */
.mv-hero--full .mv-hero__img,
.mv-hero.mv-hero--full .mv-hero__slide--phone .mv-hero__img { height: calc(100vh - var(--mv-hero-top, 0px)); height: var(--mv-hero-h, calc(100svh - var(--mv-hero-top, 0px) - var(--mv-bottom-bar, 0px))); min-height: 420px; max-height: none; aspect-ratio: auto; }
.mv-hero--full .mv-hero__slide:not(.mv-hero__slide--left-dark) .mv-hero__text { inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 20px 6%; }
.mv-hero--full .mv-hero__slide:not(.mv-hero__slide--left-dark)::after { inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.3) 45%, rgba(0,0,0,.3) 70%, rgba(0,0,0,.12)); }
.mv-hero--full .mv-hero__text p:not(.mv-hero__head) { max-width: 760px; }
/* On a phone the middle is usually a face: the words sit in the lower third instead. */
@media (max-width: 749px) { .mv-hero--full .mv-hero__slide:not(.mv-hero__slide--left-dark) .mv-hero__text { justify-content: flex-end; padding-bottom: 14%; } }
/* 1.6.1: a bold line above every heading (Customize → Landing pages → Hero: bold line). */
.mv-hero .mv-hero__text p.mv-hero__kicker { font-weight: 800; font-size: clamp(13px, 1.25vw, 17px); letter-spacing: .16em; text-transform: uppercase; max-width: none; margin: 0 0 12px; }
.mv-hero .mv-hero__slide--left-dark .mv-hero__kicker { color: var(--mv-accent); }
/* 1.6.1, computers: a picture with its words over it has them in a column on the left, centred in
   height, over a shade from the left - not a small block at the bottom of a large picture. Also on a
   full-screen hero (".mv-hero.mv-hero" outranks the .mv-hero--full rules above). */
@media (min-width: 750px) {
	.mv-hero.mv-hero .mv-hero__slide:not(.mv-hero__slide--left-dark):not(.mv-hero__slide--center) .mv-hero__text { inset: 0 auto 0 0; width: min(58%, 760px); padding: 0 0 0 max(24px, 6vw); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; }
	.mv-hero.mv-hero .mv-hero__slide:not(.mv-hero__slide--left-dark):not(.mv-hero__slide--center)::after { inset: 0; background: linear-gradient(to right, rgba(0,0,0,.62), rgba(0,0,0,.36) 42%, rgba(0,0,0,0) 74%); }
	.mv-hero.mv-hero .mv-hero__slide:not(.mv-hero__slide--left-dark):not(.mv-hero__slide--center) .mv-hero__text p:not(.mv-hero__head):not(.mv-hero__kicker) { margin: 0 0 24px; }
}
/* 1.6.1: "Centred" slides - the words in the middle, the bold line large (the shop's name). */
.mv-hero.mv-hero .mv-hero__slide--center .mv-hero__text { inset: 0; width: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 20px 4%; }
.mv-hero.mv-hero .mv-hero__slide--center::after { inset: 0; display: block; background: radial-gradient(ellipse at center, rgba(0,0,0,.5), rgba(0,0,0,.28) 55%, rgba(0,0,0,.12)); }
.mv-hero .mv-hero__text p.mv-hero__kicker { transition: none; }
.mv-hero .mv-hero__slide--center .mv-hero__text p.mv-hero__kicker { font-family: var(--mv-heading-font); font-size: clamp(38px, 6.4vw, 92px); font-weight: 800; letter-spacing: .01em; text-transform: none; line-height: 1.02; margin: 0 0 10px; }
.mv-hero .mv-hero__slide--center .mv-hero__head { font-size: clamp(22px, 2.6vw, 38px); font-weight: 600; }
.mv-hero .mv-hero__slide--center .mv-hero__text p:not(.mv-hero__head):not(.mv-hero__kicker) { margin: 0 auto 24px; }
/* 1.6.1, phones: every slide is its whole picture with the words over a shade at the bottom (the
   left-dark slide too, instead of a pale panel), the picture held at its top so no head is cut.
   1.7.0: the words 84px up from the bottom (54-56px), clear of the dots and of the phone's edge. */
@media (max-width: 749px) {
	.mv-hero.mv-hero .mv-hero__slide .mv-hero__text,
	.mv-hero.mv-hero .mv-hero__slide--left-dark .mv-hero__text { inset: auto 0 0 0; width: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 0 22px 84px; background: none; text-align: left; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.45); }
	.mv-hero.mv-hero .mv-hero__slide::after,
	.mv-hero.mv-hero .mv-hero__slide--left-dark::after { display: block; inset: 30% 0 0; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.62) 72%); }
	.mv-hero .mv-hero__slide--left-dark .mv-hero__head { color: #fff; }
	.mv-hero .mv-hero__slide--left-dark .mv-hero__kicker { color: #fff; }
	.mv-hero .mv-hero__slide--left-dark .mv-hero__text .mv-button { background: #fff; color: var(--mv-bar); border-color: #fff; }
	.mv-hero .mv-hero__head { font-size: 34px; }
	.mv-hero .mv-hero__text p:not(.mv-hero__head):not(.mv-hero__kicker) { margin: 0 0 18px; }
	.mv-hero .mv-hero__img, .mv-hero .mv-hero__slide--left-dark .mv-hero__img { object-position: center top; }
	.mv-hero.mv-hero .mv-hero__slide--center .mv-hero__text { inset: auto 0 0 0; align-items: center; text-align: center; padding: 0 20px 84px; }
	.mv-hero .mv-hero__slide--center .mv-hero__text p.mv-hero__kicker { font-size: 40px; }
	.mv-hero .mv-hero__slide--center .mv-hero__head { font-size: 24px; }
}

.mv-trust { background: var(--mv-bar); color: var(--mv-bar-text); }
.mv-trust__list { list-style: none; margin: 0 auto; padding: 12px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 24px; }
.mv-trust__list li { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; font-weight: 500; }
.mv-trust__list li + li { border-left: 1px solid rgba(255,255,255,.25); }
@media (max-width: 749px) {
	.mv-trust__list { grid-template-columns: repeat(2, 1fr); }
	.mv-trust__list li + li { border-left: 0; }
	.mv-trust__list li { justify-content: flex-start; font-size: 13px; }
}
.mv-icon { flex: none; }

.mv-cats__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px; }
.mv-cats__list a { display: block; text-align: center; text-decoration: none; }
.mv-cats__pic { display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--mv-surface); }
.mv-cats__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.mv-cats__list a:hover img { transform: scale(1.04); }
.mv-cats__none { display: grid; place-items: center; height: 100%; font-size: 40px; color: var(--mv-muted); }
.mv-cats__name { display: block; margin-top: 12px; font-size: 17px; font-weight: 500; }
@media (max-width: 749px) {
	.mv-cats__list { grid-auto-flow: column; grid-auto-columns: 38%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; gap: 14px; }
	.mv-cats__list::-webkit-scrollbar { display: none; }
	.mv-cats__list li { scroll-snap-align: start; }
	.mv-cats__name { font-size: 14px; }
}

.mv-row__more { text-align: center; margin-top: 24px; }
.mv-banner img { width: 100%; }
.mv-newsletter { background: var(--mv-surface); padding-block: 48px; margin-bottom: 0; }
.mv-newsletter__inner { text-align: center; max-width: 640px; }

/* ------------------------------------------------------------------ product grid + cards */
.woocommerce ul.products, ul.products {
	display: grid !important; grid-template-columns: repeat(var(--mv-cols, 4), minmax(0, 1fr)); gap: 32px 24px; margin: 0 0 24px !important; padding: 0; list-style: none;
}
ul.products::before, ul.products::after { display: none !important; }
ul.products.columns-2 { --mv-cols: 2; }
ul.products.columns-3 { --mv-cols: 3; }
ul.products.columns-4 { --mv-cols: 4; }
ul.products.columns-5 { --mv-cols: 5; }
@media (max-width: 989px) { ul.products { --mv-cols: 3 !important; } }
@media (max-width: 749px) { ul.products { --mv-cols: 2 !important; gap: 24px 12px; } }
.woocommerce ul.products li.product, ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; padding: 0; position: relative; display: flex; flex-direction: column; text-align: left; }
ul.products li.product a.woocommerce-LoopProduct-link { display: block; text-decoration: none; color: inherit; position: relative; }
ul.products li.product a img { width: 100%; aspect-ratio: var(--mv-card-ratio, 1 / 1); object-fit: cover; margin: 0 0 12px !important; border-radius: var(--mv-radius); background: var(--mv-surface); }
ul.products li.product .mv-card__alt { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity .3s; }
@media (hover: hover) { ul.products li.product:hover .mv-card__alt { opacity: 1; } }
ul.products li.product .woocommerce-loop-product__title { font-family: var(--mv-font); color: var(--mv-text); font-size: 15px !important; font-weight: 500; line-height: 1.45; margin: 0 0 6px; padding: 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mv-chip { display: inline; background: var(--mv-accent); color: var(--mv-accent-text); font-size: 13px; padding: 1px 5px; margin-right: 5px; border-radius: 2px; }
ul.products li.product .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 18px !important; color: var(--mv-sale) !important; margin-bottom: 6px; }
ul.products li.product .price del { color: var(--mv-muted); font-size: 15px; opacity: 1; }
ul.products li.product .price ins { text-decoration: none; font-weight: 600; }
.mv-stars { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 10px; }
.mv-stars .star-rating { margin: 0 !important; color: var(--mv-accent); font-size: 14px; }
.mv-stars__count { color: var(--mv-text); }
ul.products li.product .button { margin-top: auto !important; width: 100%; min-height: 42px; font-size: 13px; text-transform: uppercase; display: flex !important; align-items: center; justify-content: center; text-align: center; line-height: 1.2; border-radius: var(--mv-button-radius) !important; }
ul.products li.product .onsale { top: 10px; left: 10px; right: auto; margin: 0; min-height: 0; min-width: 0; padding: 3px 10px; line-height: 1.4; border-radius: var(--mv-button-radius); background: var(--mv-sale); }
ul.products li.product .added_to_cart { display: block; text-align: center; margin-top: 6px; font-size: 14px; }

/* ------------------------------------------------------------------ shop page */
.mv-shop .woocommerce-products-header__title { font-size: clamp(26px, 3.4vw, 38px); margin: 8px 0 16px; }
.mv-shop-centered .woocommerce-products-header, .mv-shop-centered .term-description { text-align: center; }
.woocommerce-breadcrumb { font-size: 13px; color: var(--mv-muted); margin-bottom: 12px !important; }
.mv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 8px 0 24px; }
.mv-toolbar .woocommerce-result-count { order: 3; flex-basis: 100%; margin: 0 !important; color: var(--mv-muted); font-size: 14px; }
.mv-toolbar .woocommerce-ordering { margin: 0 !important; }
.mv-toolbar__filter { min-height: 40px; padding: 6px 16px; border: 1px solid var(--mv-text); background: none; text-transform: uppercase; font-size: 13px; letter-spacing: .05em; cursor: pointer; border-radius: var(--mv-button-radius); }
.mv-toolbar__cols { display: flex; gap: 4px; margin-left: auto; }
.mv-toolbar__cols button { width: 36px; height: 36px; border: 1px solid transparent; background: none; cursor: pointer; display: grid; place-items: center; }
.mv-toolbar__cols button[aria-pressed="true"] { border-color: var(--mv-text); }
.mv-cols { display: block; height: 14px; background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px); }
.mv-cols--2 { width: 9px; } .mv-cols--3 { width: 15px; } .mv-cols--4 { width: 21px; }
@media (max-width: 749px) { .mv-toolbar__cols { display: none; } }
.woocommerce-pagination ul.page-numbers { border: 0 !important; display: flex; justify-content: center; gap: 6px; }
.woocommerce-pagination ul.page-numbers li { border: 0 !important; }

/* ------------------------------------------------------------------ product page */
.single-product div.product { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.single-product div.product > .woocommerce-product-gallery, .single-product div.product > .summary { width: auto !important; float: none !important; margin: 0 !important; min-width: 0; }
.single-product div.product > .woocommerce-product-gallery { overflow: hidden; }
.single-product div.product > :not(.woocommerce-product-gallery):not(.summary):not(.onsale) { grid-column: 1 / -1; }
@media (max-width: 989px) { .single-product div.product { grid-template-columns: 1fr; gap: 20px; } }
.single-product .product_title { font-size: clamp(22px, 2.4vw, 28px); font-weight: 500; margin-bottom: 8px; }
.single-product .summary .price { font-size: 26px !important; color: var(--mv-sale) !important; display: inline-flex; gap: 10px; align-items: baseline; margin: 6px 12px 6px 0; }
.single-product .summary .price del { color: var(--mv-muted); font-size: 17px; }
.single-product .summary .price ins { text-decoration: none; }
.mv-save { display: inline-flex; margin: 0; vertical-align: middle; font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.mv-save[hidden] { display: none; }
.mv-save__label { border: 1px solid var(--mv-sale); color: var(--mv-sale); padding: 2px 10px; text-transform: uppercase; }
.mv-save__amount { background: var(--mv-sale); color: #fff; padding: 3px 10px; }
.mv-promo { background: color-mix(in srgb, var(--mv-accent) 16%, var(--mv-bg)); padding: 14px 16px; margin: 16px 0; text-align: center; border-radius: var(--mv-radius); }

.single-product table.variations { border: 0; margin-bottom: 8px; }
.single-product table.variations tr { display: block; margin-bottom: 14px; }
.single-product table.variations th, .single-product table.variations td { display: block; padding: 0 !important; text-align: left; border: 0; }
.single-product table.variations th label { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; font-weight: 500; }
.mv-guide-link { margin-left: 12px; font-size: 13px; text-transform: none; letter-spacing: 0; }
.mv-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mv-pill { min-width: 48px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--mv-line); background: var(--mv-bg); color: var(--mv-text); cursor: pointer; border-radius: var(--mv-radius); font-size: 14px; }
.mv-pill:hover { border-color: var(--mv-text); }
.mv-pill[aria-pressed="true"] { background: var(--mv-text); color: var(--mv-bg); border-color: var(--mv-text); }
.mv-pill[aria-disabled="true"] { opacity: .4; text-decoration: line-through; }
.mv-has-pills select { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.single-product .reset_variations { font-size: 13px; }
.single-product form.cart { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px !important; }
.single-product form.cart.variations_form { display: block; }
.single-product .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 12px; }
.single-product form.cart .quantity { margin: 0 !important; }
.single-product form.cart .quantity .qty { width: 72px; min-height: 48px; text-align: center; }
.single-product form.cart .single_add_to_cart_button { flex: 1; min-height: 48px; text-transform: uppercase; background: var(--mv-accent) !important; color: var(--mv-accent-text) !important; border-radius: var(--mv-button-radius) !important; }
.mv-buy-now { flex-basis: 100%; min-height: 50px !important; text-transform: uppercase; letter-spacing: .12em; }
.mv-pay { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 6px 0 14px; }
.mv-pay li { border: 1px solid var(--mv-line); padding: 4px 10px; font-size: 13px; font-weight: 600; border-radius: 4px; }
.mv-ptrust { list-style: none; padding: 12px 14px; margin: 0 0 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; border: 1px solid var(--mv-line); border-radius: var(--mv-radius); font-size: 15px; }
.mv-ptrust li { display: flex; gap: 8px; align-items: center; }
@media (max-width: 749px) { .mv-ptrust { grid-template-columns: 1fr; } }
.mv-accordions { grid-column: 1 / -1; border-top: 1px solid var(--mv-line); margin-top: 24px; }
.mv-acc { border-bottom: 1px solid var(--mv-line); }
.mv-acc__head { list-style: none; cursor: pointer; padding: 18px 0; font-size: 18px; display: flex; justify-content: space-between; align-items: center; }
.mv-acc__head::-webkit-details-marker { display: none; }
.mv-acc__head::after { content: "+"; font-size: 24px; line-height: 1; }
.mv-acc[open] > .mv-acc__head::after { content: "–"; }
.mv-acc__body { padding: 0 0 24px; }
.mv-acc__body > h2:first-child { display: none; }
.single-product .related, .single-product .upsells { margin-top: 48px; }
.single-product .related > h2, .single-product .upsells > h2 { text-align: center; font-size: clamp(22px, 2.6vw, 30px); }

/* ------------------------------------------------------------------ content, posts, footer */
.mv-content > * + * { margin-top: 1em; }
.mv-content .alignwide { width: min(100vw - 32px, var(--mv-width)); margin-inline: calc(50% - min(50vw - 16px, var(--mv-width) / 2)); max-width: none; }
.mv-content .alignfull { width: 100vw; margin-inline: calc(50% - 50vw); max-width: none; }
.mv-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px; }
.mv-post-card__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--mv-radius); }
.mv-post-card__title { font-size: 20px; margin: 12px 0 4px; }
.mv-post-card__title a { text-decoration: none; }
.mv-post-card__meta { color: var(--mv-muted); font-size: 14px; margin: 0 0 8px; }

.mv-footer { background: var(--mv-bar); color: var(--mv-bar-text); margin-top: 0; }
.mv-footer a { color: inherit; }
.mv-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-block: 48px 24px; }
@media (max-width: 749px) { .mv-footer__cols { grid-template-columns: 1fr 1fr; } }
.mv-widget__title { font-size: 16px; text-transform: uppercase; letter-spacing: .05em; }
.mv-footer ul { list-style: none; padding: 0; margin: 0; }
.mv-footer li { margin-bottom: 8px; }
.mv-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 18px; border-top: 1px solid rgba(255,255,255,.18); font-size: 14px; }
.mv-footer__bottom p { margin: 0; }
.mv-footer__links { display: flex; flex-wrap: wrap; gap: 18px; }

.woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-color: var(--mv-accent) !important; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--mv-accent) !important; }

/* ---------------------------------------------------------------- Elementor
 * An Elementor kit styles every <button> (.elementor-kit-N button: background, padding, radius).
 * The theme's icon buttons keep their own look: two classes beat a class + element.
 */
.mv-iconbtn.mv-iconbtn { background: none; padding: 0; border: 0; border-radius: 50%; box-shadow: none; color: inherit; min-height: 0; font: inherit; }
.mv-iconbtn.mv-iconbtn:hover, .mv-iconbtn.mv-iconbtn:focus { background: none; color: var(--mv-accent); }
.mv-elementor-header, .mv-elementor-footer { display: block; }
.mv-elementor-empty { padding: 24px; border: 1px dashed var(--mv-line); color: var(--mv-muted); text-align: center; }
.mv-elementor-page .mv-main { padding: 0; }
/* Kits size every h2/h3 (.elementor-kit-N h2); the theme's section and card headings keep theirs. */
.mv-section .mv-section__title { font-size: clamp(24px, 3vw, 36px); line-height: 1.2; }
.mv-section ul.products li.product .woocommerce-loop-product__title { line-height: 1.45; }
.elementor-widget-maravian-section .mv-section { padding-inline: 0; }

/* ---------------------------------------------------------------- cart drawer, bars (1.2) */
.mv-cart { width: min(420px, 100vw) !important; }
.mv-cart .mv-drawer__body { flex: 1; }
.mv-cart--busy .mv-cart__items { opacity: .55; pointer-events: none; }
.mv-cart__free { padding: 12px 20px; background: var(--mv-surface); font-size: 14px; }
.mv-cart__free p { margin: 0 0 8px; }
.mv-cart__msg { margin: 0; padding: 10px 20px; background: var(--mv-text); color: var(--mv-bg); font-size: 14px; }
.mv-cart__bar { display: block; height: 6px; border-radius: 6px; background: var(--mv-line); overflow: hidden; }
.mv-cart__bar i { display: block; height: 100%; width: 0; background: var(--mv-accent); transition: width .4s ease; }
.mv-cart__free--done p { color: var(--mv-accent); font-weight: 600; }
.mv-cart__item { display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--mv-line); align-items: start; }
.mv-cart__pic img { width: 76px; height: 76px; object-fit: cover; border-radius: calc(var(--mv-radius) * .6); background: var(--mv-surface); display: block; }
.mv-cart__name { display: block; font-weight: 500; text-decoration: none; line-height: 1.35; margin-bottom: 2px; }
.mv-cart__meta { display: block; font-size: 13px; color: var(--mv-muted); }
.mv-cart__side { text-align: right; display: grid; gap: 6px; justify-items: end; }
.mv-cart .mv-cart__remove { border: 0; background: none; padding: 0; color: var(--mv-muted); font-size: 13px; text-decoration: underline; cursor: pointer; }
.mv-qty { display: inline-flex; align-items: center; margin-top: 8px; border: 1px solid var(--mv-line); border-radius: 999px; }
.mv-cart .mv-qty button { width: 32px; height: 32px; border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; color: inherit; padding: 0; }
.mv-cart .mv-qty button:disabled { opacity: .35; cursor: default; }
.mv-qty span { min-width: 22px; text-align: center; font-size: 14px; }
.mv-cart__empty { text-align: center; padding: 48px 0; }
.mv-cart__foot { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--mv-line); display: grid; gap: 8px; }
.mv-cart__foot[hidden], .mv-cart__free[hidden], .mv-cart__msg[hidden] { display: none; }
.mv-cart--loading .mv-cart__items:empty::before { content: ""; display: block; height: 72px; margin: 20px 0; border-radius: 8px; background: var(--mv-surface); animation: mv-pulse 1s ease-in-out infinite alternate; }
@keyframes mv-pulse { to { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .mv-cart--loading .mv-cart__items:empty::before { animation: none; } }
.mv-cart__total { display: flex; justify-content: space-between; margin: 0; font-size: 16px; }
.mv-cart__note { margin: 0; font-size: 13px; color: var(--mv-muted); }
.mv-cart__checkout { text-align: center; }
.mv-cart__view { text-align: center; font-size: 14px; }
.mv-cart__n[data-count="0"], .mv-cart__n:empty { display: none; }
.mv-cart__n::before { content: "("; } .mv-cart__n::after { content: ")"; }
.mv-toast { position: fixed; left: 50%; bottom: calc(24px + var(--mv-bottom-bar, 0px)); transform: translateX(-50%); z-index: 1000; background: var(--mv-text); color: var(--mv-bg); padding: 12px 18px; border-radius: 999px; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.mv-toast { transition: opacity .2s; }
.mv-toast:not(.mv-toast--on) { opacity: 0; pointer-events: none; }
.mv-bottom-bar, .mv-sticky { display: none; }
@media (max-width: 749px) {
	.mv-has-bottom-bar { --mv-bottom-bar: 62px; padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
	/* The bars' colours (black and white in Hair; Customize → Maravian → Designs → bar colour). */
	.mv-bottom-bar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--mv-bar); color: var(--mv-bar-text); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 18px rgba(0,0,0,.12); }
	.mv-bottom-bar a { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 0 6px; font-size: 11px; text-decoration: none; color: inherit; opacity: .72; }
	.mv-bottom-bar a[aria-current="page"] { opacity: 1; font-weight: 600; }
	.mv-bottom-bar a[aria-current="page"]::after { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; background: currentColor; }
	.mv-bottom-bar .mv-cart-count { position: absolute; top: 4px; left: calc(50% + 6px); }
	.mv-sticky:not([hidden]) { display: flex; position: fixed; left: 0; right: 0; bottom: var(--mv-bottom-bar, 0px); z-index: 89; align-items: center; gap: 10px; padding: 10px 14px; background: var(--mv-bg); border-top: 1px solid var(--mv-line); box-shadow: 0 -4px 18px rgba(0,0,0,.08); }
	.mv-sticky__img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }
	.mv-sticky__text { flex: 1; min-width: 0; display: grid; font-size: 13px; line-height: 1.3; }
	.mv-sticky__text strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.mv-sticky .mv-button { padding: 10px 16px; white-space: nowrap; }
}

/* Kits colour every link (.elementor-kit-N a); the bars keep their own text colour (1.3). */
/* 1.7.0, phones: the bottom bar can wait below the screen until the visitor has scrolled past the
   hero (html.mv-bar-away, Maravian_Theme_Sections::hero_fit), hidden from the keyboard too. Google's
   reCAPTCHA badge (sign-in, register) rides above the bar instead of covering its Cart, and comes
   down with it. --mv-bar-now is the bar's height while it shows, 0 while it is away. The bar is
   exactly --mv-bottom-bar tall (its content was ~55px), so the room kept for it under the page,
   the sticky add-to-cart bar above it and the hero's measurement all agree. */
@media (max-width: 749px) {
	.mv-has-bottom-bar { --mv-bar-now: calc(var(--mv-bottom-bar, 62px) + env(safe-area-inset-bottom, 0px)); }
	.mv-bar-away .mv-has-bottom-bar { --mv-bar-now: 0px; }
	.mv-bottom-bar { box-sizing: border-box; min-height: calc(var(--mv-bottom-bar, 62px) + env(safe-area-inset-bottom, 0px)); align-content: center; transition: transform .25s ease, visibility 0s linear 0s; }
	.mv-bar-away .mv-bottom-bar { transform: translateY(100%); visibility: hidden; box-shadow: none; transition: transform .25s ease, visibility 0s linear .25s; }
	.mv-has-bottom-bar .grecaptcha-badge { bottom: calc(var(--mv-bar-now) + 14px) !important; transition: right .3s ease, bottom .25s ease !important; }
}
@media (max-width: 749px) and (prefers-reduced-motion: reduce) {
	.mv-bottom-bar, .mv-bar-away .mv-bottom-bar { transition: none; }
	.mv-has-bottom-bar .grecaptcha-badge { transition: none !important; }
}
.mv-bottom-bar.mv-bottom-bar a, .mv-announce.mv-announce a, .mv-trust.mv-trust a, .mv-footer.mv-footer a { color: inherit; }
.mv-footer.mv-footer a:hover, .mv-announce.mv-announce a:hover { color: inherit; opacity: .8; }


/* ---------------------------------------------------------------- header, menus, footer (1.5)
 * The header, the menu drawer and search: the bar colour (black in Hair) on white, lines in grey -
 * whatever colours an Elementor kit gives links, fields and buttons.
 */
.mv-header.mv-header, .mv-drawer.mv-drawer { color: var(--mv-bar); --mv-line: rgba(0,0,0,.1); }
.mv-header.mv-header a, .mv-drawer.mv-drawer a { color: inherit; }
.mv-header .mv-menu a:hover, .mv-drawer .mv-mobile-menu a:hover { color: inherit; opacity: .65; }
.mv-header .mv-iconbtn.mv-iconbtn:hover, .mv-header .mv-iconbtn.mv-iconbtn:focus-visible { color: inherit; opacity: .65; }
.mv-header .mv-cart-count { background: var(--mv-bar); color: var(--mv-bar-text); }
.mv-drawer .mv-drawer__close.mv-drawer__close { color: inherit; background: none; }
.mv-drawer .mv-drawer__close.mv-drawer__close:hover { background: rgba(0,0,0,.06); }
.mv-drawer__logo img, .mv-drawer__logo .custom-logo { display: block; max-height: 48px; width: auto; }
.mv-drawer .mv-mobile-menu a { font-size: 17px; }
.mv-drawer.mv-drawer.mv-drawer--top input[type="search"] { background: #fff; color: var(--mv-bar); border: 1px solid rgba(0,0,0,.25); border-radius: var(--mv-button-radius, 0); padding: 12px 16px; font: inherit; box-shadow: none; }
.mv-drawer.mv-drawer.mv-drawer--top input[type="search"]:focus { outline: 2px solid var(--mv-bar); outline-offset: 1px; }
.mv-drawer.mv-drawer--top form button, .mv-drawer.mv-drawer--top form [type="submit"] { background: var(--mv-bar); color: var(--mv-bar-text); border: 1px solid var(--mv-bar); border-radius: var(--mv-button-radius, 0); padding: 12px 22px; font-family: var(--mv-font); font-weight: 600; text-transform: none; letter-spacing: 0; box-shadow: none; cursor: pointer; }
.mv-drawer--top form button:hover, .mv-drawer--top form [type="submit"]:hover { opacity: .85; }

/* classic: logo left, then the menu, search, account and cart; on phones the logo left, the menu button last. */
.mv-header-classic .mv-header__brand { order: -1; }
.mv-header-classic .mv-header__nav { order: 1; }
.mv-header-classic .mv-header__start { order: 2; }
.mv-header-classic .mv-header__end { order: 3; }
.mv-header-classic .mv-header__bar { grid-template-columns: 1fr auto auto; }
.mv-header-classic .mv-header__start { flex-direction: row-reverse; }
@media (max-width: 989px) {
	.mv-header-classic .mv-header__start { order: 4; }
}
@media (min-width: 990px) {
	.mv-header-classic .mv-header__bar { grid-template-columns: auto 1fr auto auto; min-height: 84px; gap: 24px; }
	.mv-header-classic .mv-header__nav { justify-self: center; }
	.mv-header-classic .mv-menu { gap: 4px clamp(20px, 2.6vw, 44px); }
	.mv-header-classic .mv-menu a { text-transform: uppercase; letter-spacing: .04em; font-size: 15px; }
	.mv-header-classic .mv-header__brand img, .mv-header-classic .mv-header__brand .custom-logo { max-height: 68px; }
}

/* The footer: small white headings, quiet links; the kit's big coloured h3 does not reach it. */
.mv-footer.mv-footer .mv-widget__title { font-family: var(--mv-font); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--mv-bar-text); line-height: 1.4; margin: 0 0 18px; }
.mv-footer.mv-footer .mv-footer__col:first-child .mv-widget__title { font-family: var(--mv-heading-font); font-size: 22px; letter-spacing: .02em; text-transform: none; }
.mv-footer.mv-footer a { text-decoration: none; opacity: .72; transition: opacity .15s; }
.mv-footer.mv-footer a:hover, .mv-footer.mv-footer a:focus-visible { opacity: 1; }
.mv-footer.mv-footer p { opacity: .72; line-height: 1.65; font-size: 15px; margin: 0 0 10px; }
.mv-footer li { font-size: 15px; margin-bottom: 10px; }
.mv-footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-block: 64px 40px; }
@media (max-width: 749px) { .mv-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px 20px; padding-block: 44px 28px; } .mv-footer__col:first-child { grid-column: 1 / -1; } }
.mv-footer.mv-footer .mv-footer__bottom { border-top-color: rgba(255,255,255,.12); padding-block: 22px; }
.mv-footer.mv-footer .mv-footer__bottom p { font-size: 13px; margin: 0; }

/* Hero pictures zoom in slowly while their slide is on screen (Customize → Landing page). */
.mv-hero__slide { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
	.mv-hero-zoom .mv-hero__slide--on .mv-hero__img { animation: mv-hero-zoom calc(var(--mv-slide-ms, 7000ms) + 600ms) ease-out forwards; }
}
@keyframes mv-hero-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
/* Hero button text in the bar colour (black), not the kit's text colour; dots that show on light photos too (1.5). */
.mv-hero .mv-hero__text .mv-button { color: var(--mv-bar); }
.mv-hero .mv-hero__dots button { background: rgba(255,255,255,.6); box-shadow: 0 0 0 1px rgba(0,0,0,.28), 0 1px 4px rgba(0,0,0,.25); }
.mv-hero .mv-hero__dots button[aria-current="true"] { background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.3); }
/* 1.6.1: each dot is a 44 x 28 px button (easy to hit with a mouse or a thumb) drawing its thin bar
   inside; the row sits above the slides' links and shades. */
.mv-hero .mv-hero__dots { z-index: 3; gap: 0; bottom: 4px; }
.mv-hero .mv-hero__dots button,
.mv-hero .mv-hero__dots button[aria-current="true"] { position: relative; width: 44px; height: 28px; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; cursor: pointer; }
.mv-hero .mv-hero__dots button::before { content: ""; position: absolute; left: 8px; right: 8px; top: 12px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.6); box-shadow: 0 0 0 1px rgba(0,0,0,.28), 0 1px 4px rgba(0,0,0,.25); }
.mv-hero .mv-hero__dots button[aria-current="true"]::before { background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.3); }
.mv-hero .mv-hero__dots button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.mv-hero-zoom .mv-hero__img { transform-origin: center top; }
/* The pause button sits with the dots but is not one (its rules outrank the dots'). */
.mv-hero .mv-hero__dots button.mv-hero__pause { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: 0 0 0 6px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.4); box-shadow: none; color: #fff; cursor: pointer; align-self: center; min-height: 0; }
.mv-hero .mv-hero__dots button.mv-hero__pause::before { display: none; }
.mv-hero .mv-hero__dots button.mv-hero__pause:hover { background: rgba(0,0,0,.6); }
.mv-hero .mv-hero__dots button.mv-hero__pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mv-hero .mv-hero__dots button.mv-hero__pause[hidden] { display: none; }
.mv-hero .mv-hero__pause .mv-hero__play-i, .mv-hero--held .mv-hero__pause .mv-hero__pause-i { display: none; }
.mv-hero--held .mv-hero__pause .mv-hero__play-i { display: inline; }
.mv-hero--held .mv-hero__img { animation-play-state: paused !important; }

/* ------------------------------------------------------------------ shop home (1.6) */
/* A short row centres instead of leaving the right side empty; one or two cards keep a card's size. */
:is(.mv-row, .mv-tabs, .mv-picks) ul.products.columns-1 { --mv-cols: 1 !important; max-width: 340px; margin-inline: auto !important; }
:is(.mv-row, .mv-tabs, .mv-picks) ul.products.columns-2 { --mv-cols: 2 !important; max-width: 720px; margin-inline: auto !important; }
@media (min-width: 750px) and (max-width: 989px) { :is(.mv-row, .mv-tabs, .mv-picks) ul.products.columns-4 { --mv-cols: 4 !important; gap: 24px 14px; } }
.mv-home .mv-section__title::after { content: ""; display: block; width: 44px; height: 2px; margin: 14px auto 0; background: var(--mv-accent); }
.mv-home .mv-feature .mv-feature__head::after { display: none; }
.mv-home .mv-section { margin-block: clamp(40px, 5.5vw, 76px); }
/* The hero meets the header (any other first section keeps its space); the last section meets the footer. */
.mv-home .mv-hero { margin-top: 0; }
.mv-home > .mv-section:last-child { margin-bottom: 0; }
.mv-home .mv-cats { margin-top: clamp(36px, 4.5vw, 60px); }
/* On phones a home row is one line to swipe through, the next card peeking in. */
@media (max-width: 749px) {
	.mv-home :is(.mv-row, .mv-tabs, .mv-picks) ul.products:not(.columns-1) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; margin-inline: 0 !important; max-width: none; }
	.mv-home :is(.mv-row, .mv-tabs, .mv-picks) ul.products::-webkit-scrollbar { display: none; }
	.mv-home :is(.mv-row, .mv-tabs, .mv-picks) ul.products li.product { scroll-snap-align: start; }
}
@media (hover: hover) {
	.mv-home ul.products li.product a img { transition: transform .45s ease, box-shadow .45s ease; }
	.mv-home ul.products li.product:hover a img { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.10); }
}
@media (prefers-reduced-motion: reduce) { .mv-home ul.products li.product:hover a img { transform: none; } }

.mv-eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mv-accent); }

/* Product tabs: pills over one grid; without JavaScript each list shows under its name. */
.mv-tabs__list { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; }
.mv-tabs:not(.mv-tabs--ready) .mv-tabs__list { display: none; }
.mv-tabs__tab { min-height: 42px; padding: 8px 22px; border: 1px solid var(--mv-line); border-radius: 999px; background: var(--mv-bg); color: var(--mv-text); font-size: 14px; font-weight: 600; letter-spacing: .03em; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.mv-tabs__tab:hover { border-color: var(--mv-accent); color: var(--mv-accent); }
.mv-tabs__tab[aria-selected="true"] { background: var(--mv-accent); border-color: var(--mv-accent); color: var(--mv-accent-text); }
.mv-tabs__label { font-size: 20px; margin: 28px 0 16px; text-align: center; }
.mv-tabs--ready .mv-tabs__label, .mv-tabs--ready .mv-tabs__panel:not(.is-active) { display: none; }
.mv-tabs__panel:focus-visible { outline-offset: 8px; }

/* Feature band: a picture beside a heading, text and a button, on the design's surface colour. */
/* Feature bands (1.6.1): the picture whole and edge to edge on its side - no frame, no shadow, no
   fade - and the words beside it; sides alternate (Customize → Home page: picture on the left/right). */
.mv-feature { background: var(--mv-surface); padding: 0; overflow: hidden; }
.mv-home .mv-feature { margin-block: clamp(40px, 5.5vw, 76px); }
.mv-feature .mv-feature__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch; width: 100%; max-width: none; padding: 0; }
.mv-feature--flip .mv-feature__media { order: 2; }
.mv-feature__media, .mv-feature__media picture { display: block; height: 100%; }
/* The band is as tall as the picture (at most 720px) or the words, whichever is taller; the picture
   fills its half, cropped from the edges only when the words need more height than it has. */
.mv-feature__media img { display: block; width: 100%; height: 100%; max-height: 720px; object-fit: cover; object-position: center top; border-radius: 0; box-shadow: none; }
.mv-feature__body { align-self: center; padding: clamp(36px, 6vw, 96px); max-width: 660px; }
.mv-feature--flip .mv-feature__body { justify-self: end; }
.mv-feature__head { font-size: clamp(28px, 3.6vw, 48px); line-height: 1.12; margin: 0 0 16px; }
.mv-feature__text { font-size: 17px; line-height: 1.7; color: var(--mv-muted); margin: 0 0 28px; max-width: 520px; }
@media (max-width: 749px) {
	.mv-feature .mv-feature__inner { grid-template-columns: 1fr; }
	.mv-feature--flip .mv-feature__media { order: 0; }
	.mv-feature__media img { height: auto; max-height: none; }
	.mv-feature__body, .mv-feature--flip .mv-feature__body { justify-self: stretch; padding: 28px 20px 36px; }
}

/* Value cards. */
.mv-values__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.mv-values__item { padding: 32px 24px; border: 1px solid var(--mv-line); border-radius: var(--mv-radius); background: var(--mv-bg); text-align: center; transition: border-color .2s, box-shadow .2s; }
.mv-values__item:hover { border-color: var(--mv-accent); box-shadow: 0 12px 28px rgba(0,0,0,.06); }
.mv-values__icon { display: inline-grid; place-items: center; width: 60px; height: 60px; margin-bottom: 16px; border-radius: 50%; background: var(--mv-surface); color: var(--mv-accent); }
.mv-values__icon .mv-icon { width: 28px; height: 28px; }
.mv-values__title { font-size: 18px; margin: 0 0 8px; }
.mv-values__item p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--mv-muted); }
@media (max-width: 989px) { .mv-values__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .mv-values__list { gap: 12px; } .mv-values__item { padding: 22px 14px; } .mv-values__title { font-size: 16px; } }

/* Picked for you: what this browser looked at, under the picks. */
.mv-picks__recent { margin-top: 40px; }
.mv-picks__head { font-size: 20px; margin: 0 0 18px; text-align: center; }