/* ==========================================================================
   Minimal Store Templates — front-end styles
   Every colour / radius / spacing value is a CSS variable set per widget
   from the Elementor "Design" panel. Logical properties keep RTL working.
   ========================================================================== */

.mst {
	--mst-bg: #ffffff;
	--mst-surface: #f3f2ef;
	--mst-text: #151515;
	--mst-muted: color-mix(in srgb, var(--mst-text) 58%, var(--mst-bg));
	--mst-accent: #151515;
	--mst-accent-text: #ffffff;
	--mst-radius: 0px;
	--mst-btn-radius: var(--mst-radius);
	--mst-pad: clamp(48px, 7vw, 96px);
	--mst-max: 1320px;
	--mst-gutter: clamp(16px, 4vw, 48px);
	--mst-gap: clamp(12px, 1.6vw, 24px);
	--mst-cols: 4;
	--mst-ratio: 3/4;
	--mst-line: color-mix(in srgb, var(--mst-text) 14%, transparent);
	--mst-card-radius: min(var(--mst-radius), 24px);

	background: var(--mst-bg);
	color: var(--mst-text);
	padding-block: var(--mst-pad);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
}
.mst *, .mst *::before, .mst *::after { box-sizing: border-box; }
.mst a { color: inherit; text-decoration: none; }
.mst img { display: block; max-width: 100%; }
.mst p { margin: 0; }
.mst ul, .mst ol { list-style: none; margin: 0; padding: 0; }
.mst :where(h1, h2, h3, .mst-h) {
	margin: 0;
	color: inherit;
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -0.015em;
}
.mst :where(.mst-h) em { font-style: italic; }

.mst-wrap {
	width: 100%;
	max-width: calc(var(--mst-max) + var(--mst-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--mst-gutter);
}

/* ---------- Shared bits ---------- */

.mst .mst-eyebrow {
	display: inline-block;
	font-size: 12px;
	letter-spacing: .16em;
	color: var(--mst-eyebrow, var(--mst-muted));
	margin-block-end: 18px;
}
.mst-upper-yes .mst-eyebrow,
.mst-upper-yes .mst-btn,
.mst-upper-yes .mst-more,
.mst-upper-yes .mst-card__cat,
.mst-upper-yes .mst-badge,
.mst-upper-yes .mst-cart span,
.mst-upper-yes .mst-ann--small .mst-ann__item { text-transform: uppercase; }

.mst .mst-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

.mst .mst-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 50px;
	padding: 0 30px;
	border: 1px solid var(--mst-btn-bg, var(--mst-accent));
	border-radius: var(--mst-btn-radius);
	background: var(--mst-btn-bg, var(--mst-accent));
	color: var(--mst-btn-text, var(--mst-accent-text));
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .1em;
	line-height: 1;
	cursor: pointer;
	transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.mst .mst-btn:hover { background: transparent; color: var(--mst-btn-bg, var(--mst-accent)); }
.mst .mst-btn--outline { background: transparent; color: currentColor; border-color: currentColor; }
.mst .mst-btn--outline:hover { background: var(--mst-text); border-color: var(--mst-text); color: var(--mst-bg); }
.mst .mst-btn--inverse { background: var(--mst-accent-text); color: var(--mst-accent); border-color: var(--mst-accent-text); }
.mst .mst-btn--inverse:hover { background: transparent; color: var(--mst-accent-text); }
.mst .mst-btn--underline {
	min-height: 0;
	padding: 0 0 6px;
	background: none;
	border: 0;
	border-radius: 0;
	color: currentColor;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 100% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .35s;
}
.mst .mst-btn--underline:hover { background-color: transparent; color: currentColor; background-size: 40% 1px; }

.mst .mst-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	letter-spacing: .14em;
	white-space: nowrap;
	padding-block-end: 4px;
	border-block-end: 1px solid currentColor;
}
.mst .mst-more i { font-style: normal; transition: transform .25s; }
.mst .mst-more:hover i { transform: translateX(4px); }
[dir="rtl"] .mst .mst-more i { transform: scaleX(-1); }
[dir="rtl"] .mst .mst-more:hover i { transform: scaleX(-1) translateX(4px); }

.mst-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-block-end: clamp(24px, 3vw, 40px);
}
.mst .mst-head__title { font-size: clamp(26px, 3vw, 40px); }
.mst-head__aside { display: flex; align-items: center; gap: 20px; }

/* Abstract placeholder: shown until you add real images. */
.mst-ph {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	background:
		radial-gradient(circle at var(--x, 70%) var(--y, 35%), color-mix(in srgb, var(--mst-accent) 10%, transparent) 0 18%, transparent 18.5%),
		linear-gradient(160deg, color-mix(in srgb, var(--mst-surface) 100%, var(--mst-text) 0%), color-mix(in srgb, var(--mst-surface) 88%, var(--mst-text) 12%));
}
.mst-ph--1 { --x: 30%; --y: 60%; }
.mst-ph--2 { --x: 50%; --y: 50%; }
.mst-ph--3 { --x: 75%; --y: 75%; }
.mst-ph--4 { --x: 40%; --y: 30%; }
.mst-ph--5 { --x: 65%; --y: 55%; }

.mst-demo-note {
	margin-block-start: 20px !important;
	font-size: 12px;
	color: var(--mst-muted);
	text-align: center;
	opacity: .8;
}

/* ---------- Grid ---------- */

.mst-grid {
	display: grid;
	grid-template-columns: repeat(var(--mst-cols), minmax(0, 1fr));
	gap: clamp(28px, 3vw, 44px) var(--mst-gap);
}

/* ---------- Announcement bar ---------- */

.mst-ann { --mst-pad: 12px; font-size: 12px; letter-spacing: .14em; }
.mst-ann--large { --mst-pad: clamp(20px, 3vw, 36px); letter-spacing: 0; }
.mst-ann--large .mst-ann__item { font-size: clamp(28px, 4.5vw, 64px); }
.mst-ann__track { display: flex; width: max-content; }
.mst-ann__run {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	animation: mst-marquee var(--mst-speed, 30s) linear infinite;
}
.mst-ann:hover .mst-ann__run { animation-play-state: paused; }
.mst-ann__item { white-space: nowrap; }
.mst .mst-sep { font-style: normal; padding-inline: clamp(18px, 3vw, 44px); opacity: .55; }
.mst-ann__static { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; text-align: center; }
.mst-ann__static .mst-sep:last-child { display: none; }
@keyframes mst-marquee { to { transform: translateX(-100%); } }
[dir="rtl"] .mst-ann__run { animation-name: mst-marquee-rtl; }
@keyframes mst-marquee-rtl { to { transform: translateX(100%); } }

/* ---------- Hero ---------- */

.mst-hero { --mst-hero-h: 86vh; --mst-pad: 0px; position: relative; }
.mst .mst-hero__title { font-size: clamp(42px, 6.4vw, 104px); }
.mst .mst-hero__text { max-width: 440px; margin-block-start: 22px; color: var(--mst-muted); font-size: 16px; }
.mst-hero .mst-btns { margin-block-start: 36px; }
.mst-hero__media { position: relative; overflow: hidden; background: var(--mst-surface); }
.mst-hero__media img, .mst-hero__media .mst-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* split + arch */
.mst-hero--split .mst-hero__grid,
.mst-hero--arch .mst-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: var(--mst-hero-h);
}
.mst-hero--split .mst-hero__content,
.mst-hero--arch .mst-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: clamp(40px, 6vw, 96px) var(--mst-gutter);
	padding-inline-start: max(var(--mst-gutter), calc((100vw - var(--mst-max)) / 2));
}
.mst-hero.is-reverse .mst-hero__content { order: 2; padding-inline-start: clamp(40px, 6vw, 96px); padding-inline-end: max(var(--mst-gutter), calc((100vw - var(--mst-max)) / 2)); }

.mst-hero--arch { --mst-pad: clamp(32px, 5vw, 72px); }
.mst-hero--arch .mst-hero__grid { min-height: calc(var(--mst-hero-h) - var(--mst-pad) * 2); align-items: center; }
.mst-hero--arch .mst-hero__media {
	justify-self: center;
	width: min(100%, 520px);
	aspect-ratio: 3/4.2;
	border-radius: 999px 999px 0 0;
	outline: 1px solid var(--mst-line);
	outline-offset: 12px;
}

/* overlay */
.mst-hero--overlay { min-height: var(--mst-hero-h); display: flex; align-items: flex-end; color: #fff; --mst-scrim: .38; }
.mst-hero--overlay .mst-hero__media { position: absolute; inset: 0; }
.mst-hero--overlay .mst-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, var(--mst-scrim)) 0%, rgba(0, 0, 0, calc(var(--mst-scrim) * .25)) 55%, transparent 100%);
}
.mst-hero--overlay .mst-wrap { position: relative; z-index: 1; padding-block: clamp(40px, 6vw, 88px); }
.mst-hero--overlay .mst-hero__title { max-width: 14ch; }
.mst-hero--overlay .mst-eyebrow, .mst-hero--overlay .mst-hero__text { color: rgba(255, 255, 255, .82); }
.mst-hero--overlay .mst-btn--solid { background: #fff; color: #111; border-color: #fff; }
.mst-hero--overlay .mst-btn--solid:hover { background: transparent; color: #fff; }

/* centered */
.mst-hero--centered { --mst-pad: clamp(56px, 8vw, 120px); text-align: center; }
.mst-hero--centered .mst-hero__content { display: flex; flex-direction: column; align-items: center; }
.mst.mst-hero--centered .mst-hero__title { font-size: clamp(48px, 8.4vw, 148px); max-width: 15ch; }
.mst-hero--centered .mst-hero__text { margin-inline: auto; }
.mst-hero--centered .mst-btns { justify-content: center; }
.mst-hero--centered .mst-hero__media { margin-block-start: clamp(40px, 6vw, 80px); aspect-ratio: 21/9; border-radius: var(--mst-card-radius); }

/* editorial */
.mst-hero--editorial { --mst-pad: clamp(40px, 6vw, 88px); }
.mst-hero--editorial .mst-hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 1.3fr 1fr;
	grid-template-areas: "title title title" "copy main side";
	gap: clamp(20px, 3vw, 44px);
	align-items: start;
}
.mst-hero--editorial .mst-hero__content { display: contents; }
.mst-hero--editorial .mst-eyebrow { display: none; }
.mst.mst-hero--editorial .mst-hero__title { grid-area: title; font-size: clamp(56px, 11.5vw, 200px); line-height: .9; letter-spacing: -.035em; }
.mst-hero--editorial .mst-hero__text, .mst-hero--editorial .mst-btns { grid-area: copy; }
.mst-hero--editorial .mst-hero__text { margin: 0; align-self: start; }
.mst-hero--editorial .mst-btns { align-self: end; margin: 0; }
.mst-hero--editorial .mst-hero__media { grid-area: main; aspect-ratio: 4/5; border-radius: var(--mst-card-radius); }
.mst-hero--editorial .mst-hero__media--2 { grid-area: side; aspect-ratio: 3/4; margin-block-start: clamp(40px, 8vw, 140px); }

/* frame */
.mst-hero--frame { --mst-pad: clamp(16px, 2vw, 28px); }
.mst-hero--frame .mst-hero__grid { position: relative; display: grid; }
.mst-hero--frame .mst-hero__media { min-height: var(--mst-hero-h); border-radius: var(--mst-card-radius); grid-area: 1/1; }
.mst-hero--frame .mst-hero__content {
	grid-area: 1/1;
	z-index: 1;
	align-self: end;
	justify-self: start;
	margin: clamp(16px, 3vw, 40px);
	padding: clamp(28px, 3.4vw, 52px);
	max-width: 520px;
	background: var(--mst-bg);
	border-radius: var(--mst-card-radius);
}
.mst.mst-hero--frame .mst-hero__title { font-size: clamp(36px, 4.4vw, 68px); }
.mst-hero--frame .mst-btns { margin-block-start: 28px; }

/* ---------- Product cards ---------- */

.mst-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.mst-card__media {
	position: relative;
	aspect-ratio: var(--mst-ratio);
	overflow: hidden;
	background: var(--mst-surface);
	border-radius: var(--mst-card-radius);
}
.mst-card__link { position: absolute; inset: 0; display: block; }
.mst-card__media img, .mst-card__media .mst-ph {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .5s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.mst-card:hover .mst-card__img { transform: scale(1.04); }
.mst-card__img--alt { opacity: 0; }
.mst-card.has-alt:hover .mst-card__img--alt { opacity: 1; }

.mst .mst-badge {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	padding: 5px 10px;
	background: var(--mst-bg);
	color: var(--mst-text);
	font-size: 10px;
	letter-spacing: .14em;
	border-radius: min(var(--mst-radius), 99px);
	pointer-events: none;
}

.mst-card__body {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 16px;
	align-items: baseline;
	padding-block-start: 14px;
}
.mst .mst-card__cat { grid-column: 1 / -1; font-size: 11px; letter-spacing: .14em; color: var(--mst-muted); }
.mst .mst-card__title { font-family: inherit; font-size: 15px; line-height: 1.35; letter-spacing: 0; font-weight: 400; }
.mst .mst-card__price { font-size: 14px; white-space: nowrap; color: var(--mst-text); }
.mst .mst-card__price del, .mst .mst-rank__price del, .mst .mst-spot__price del { color: var(--mst-muted); opacity: .8; margin-inline-end: 6px; }
.mst .mst-card__price ins, .mst .mst-rank__price ins, .mst .mst-spot__price ins { text-decoration: none; }

/* add to cart */
.mst .mst-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 12px;
	letter-spacing: .1em;
	line-height: 1;
	color: var(--mst-btn-text, var(--mst-accent-text));
	background: var(--mst-btn-bg, var(--mst-accent));
	transition: transform .3s, opacity .3s, background .25s;
}
.mst .mst-cart i { font-style: normal; font-size: 20px; font-weight: 300; line-height: 1; }
.mst .mst-cart.loading { opacity: .5; pointer-events: none; }
.mst .mst-cart.added i { font-size: 0; }
.mst .mst-cart.added i::before { content: "\2713"; font-size: 15px; }
.mst .added_to_cart { display: none; }

.mst-card__cart--icon { position: absolute; inset-block-end: 12px; inset-inline-end: 12px; z-index: 2; }
.mst-card__cart--icon .mst-cart { width: 40px; height: 40px; border-radius: 50%; }
.mst-card__cart--icon .mst-cart span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (hover: hover) {
	.mst-card__cart--icon .mst-cart { opacity: 0; transform: translateY(8px) scale(.9); }
	.mst-card:hover .mst-card__cart--icon .mst-cart, .mst-card__cart--icon .mst-cart:focus-visible { opacity: 1; transform: none; }
}

.mst-card__cart--bar { position: absolute; inset-inline: 10px; inset-block-end: 10px; z-index: 2; }
.mst-card__cart--bar .mst-cart { width: 100%; height: 46px; border-radius: min(var(--mst-btn-radius), 99px); }
.mst-card__cart--bar .mst-cart i { display: none; }
@media (hover: hover) {
	.mst-card__cart--bar .mst-cart { opacity: 0; transform: translateY(12px); }
	.mst-card:hover .mst-card__cart--bar .mst-cart, .mst-card__cart--bar .mst-cart:focus-visible { opacity: 1; transform: none; }
}

.mst-card__cart--text { grid-column: 1 / -1; margin-block-start: 6px; }
.mst-card__cart--text .mst-cart, .mst-spot__cart .mst-cart { background: none; color: var(--mst-text); padding: 0 0 4px; border-block-end: 1px solid currentColor; }
.mst-card__cart--text .mst-cart i { font-size: 15px; }

.mst-spot__cart .mst-cart {
	min-height: 50px;
	padding: 0 30px;
	background: var(--mst-accent);
	color: var(--mst-accent-text);
	border: 0;
	border-radius: var(--mst-btn-radius);
}
.mst-spot__cart .mst-cart:hover { opacity: .88; }

/* card styles */
.mst-card-boxed .mst-card { background: var(--mst-surface); border-radius: var(--mst-card-radius); padding: 10px; }
.mst-card-boxed .mst-card__media { background: color-mix(in srgb, var(--mst-surface) 70%, var(--mst-bg)); border-radius: calc(var(--mst-card-radius) * .7); }
.mst-card-boxed .mst-card__body { padding: 14px 6px 8px; }
.mst-card-centered .mst-card__body { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.mst-card-centered .mst-card__price { color: var(--mst-muted); }

/* horizontal scroll */
.mst-products--scroll { --mst-cols: 4; }
.mst-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - var(--mst-gap) * (var(--mst-cols) - 1)) / var(--mst-cols) * .94);
	gap: var(--mst-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	padding-block-end: 4px;
}
.mst-track::-webkit-scrollbar { display: none; }
.mst-track > * { scroll-snap-align: start; }
.mst-arrows { display: flex; gap: 8px; }
.mst .mst-arrow {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--mst-line);
	border-radius: 50%;
	background: transparent;
	color: var(--mst-text);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s;
}
.mst .mst-arrow:hover { background: var(--mst-text); color: var(--mst-bg); border-color: var(--mst-text); }
.mst .mst-arrow[disabled] { opacity: .3; pointer-events: none; }
[dir="rtl"] .mst .mst-arrow { transform: scaleX(-1); }

/* ranked list */
.mst-rank { counter-reset: none; border-block-start: 1px solid var(--mst-line); }
.mst-rank__row {
	display: grid;
	grid-template-columns: 56px 64px 1fr auto auto;
	align-items: center;
	gap: clamp(12px, 2vw, 32px);
	padding-block: 14px;
	border-block-end: 1px solid var(--mst-line);
	transition: background .25s;
}
.mst-rank__row:hover { background: var(--mst-surface); }
.mst .mst-rank__n { font-size: clamp(22px, 2.4vw, 32px); color: var(--mst-muted); padding-inline-start: 8px; }
.mst-rank__media { position: relative; display: block; aspect-ratio: var(--mst-ratio); overflow: hidden; background: var(--mst-surface); border-radius: min(var(--mst-card-radius), 8px); }
.mst-rank__media img, .mst-rank__media .mst-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mst-rank__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mst .mst-rank__title { font-family: inherit; font-size: 16px; letter-spacing: 0; line-height: 1.3; }
.mst-rank__price { font-size: 15px; white-space: nowrap; }
.mst-rank__cart .mst-cart { height: 40px; padding: 0 18px; border-radius: min(var(--mst-btn-radius), 99px); }
.mst-rank__cart .mst-cart i { display: none; }

/* ---------- Categories ---------- */

.mst-cat { display: flex; flex-direction: column; gap: 14px; position: relative; }
.mst-cat__media { position: relative; display: block; overflow: hidden; aspect-ratio: 4/5; background: var(--mst-surface); border-radius: var(--mst-card-radius); }
.mst-cat__media img, .mst-cat__media .mst-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.mst-cat:hover .mst-cat__media img, .mst-cat:hover .mst-cat__media .mst-ph { transform: scale(1.05); }
.mst-cat__label { display: flex; flex-direction: column; gap: 2px; }
.mst .mst-cat__name { font-size: 16px; }
.mst .mst-cat__count { font-size: 12px; color: var(--mst-muted); }

.mst-cats--tiles .mst-cat__label {
	position: absolute;
	inset-inline-start: 14px;
	inset-block-end: 14px;
	flex-direction: row;
	align-items: baseline;
	gap: 10px;
	padding: 10px 16px;
	background: var(--mst-bg);
	border-radius: min(var(--mst-radius), 99px);
	transition: padding .3s;
}
.mst-cats--tiles .mst-cat:hover .mst-cat__label { padding-inline-end: 26px; }
.mst-cats--tiles .mst-cat__name { font-size: 14px; }

.mst-cats--circles .mst-cat, .mst-cats--arches .mst-cat { align-items: center; text-align: center; }
.mst-cats--circles .mst-cat__media { aspect-ratio: 1; border-radius: 50%; width: 100%; }
.mst-cats--arches .mst-cat__media { aspect-ratio: 3/4.4; border-radius: 999px 999px 0 0; width: 100%; }
.mst-cats--circles .mst-head, .mst-cats--arches .mst-head { justify-content: center; text-align: center; flex-direction: column; align-items: center; }

/* big type list */
.mst-catlist { border-block-start: 1px solid var(--mst-line); }
.mst-catlist__row {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 40px);
	padding-block: clamp(16px, 2.2vw, 28px);
	border-block-end: 1px solid var(--mst-line);
}
.mst .mst-catlist__n { font-size: 12px; color: var(--mst-muted); width: 2.5em; }
.mst .mst-catlist__name { font-size: clamp(32px, 5.4vw, 84px); line-height: 1; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.mst-catlist__row:hover .mst-catlist__name { transform: translateX(14px); }
[dir="rtl"] .mst-catlist__row:hover .mst-catlist__name { transform: translateX(-14px); }
.mst-catlist__arrow { margin-inline-start: auto; font-style: normal; font-size: 22px; transition: transform .3s; }
[dir="rtl"] .mst-catlist__arrow { transform: scaleX(-1); }
.mst-catlist__img {
	position: absolute;
	inset-inline-end: 14%;
	top: 50%;
	width: clamp(140px, 15vw, 220px);
	aspect-ratio: 4/5;
	overflow: hidden;
	border-radius: var(--mst-card-radius);
	transform: translateY(-50%) rotate(-4deg) scale(.85);
	opacity: 0;
	pointer-events: none;
	z-index: 2;
	transition: opacity .3s, transform .5s cubic-bezier(.2, .7, .2, 1);
}
.mst-catlist__img img, .mst-catlist__img .mst-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mst-catlist__row:hover .mst-catlist__img { opacity: 1; transform: translateY(-50%) rotate(3deg) scale(1); }

/* pills */
.mst-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.mst .mst-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	border: 1px solid var(--mst-line);
	border-radius: 999px;
	font-size: 15px;
	transition: background .25s, color .25s, border-color .25s;
}
.mst .mst-pill:hover { background: var(--mst-text); color: var(--mst-bg); border-color: var(--mst-text); }
.mst .mst-pill:hover .mst-cat__count { color: inherit; opacity: .7; }

/* ---------- Spotlight ---------- */

.mst-spot__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 110px); align-items: center; }
.mst-spot.is-reverse .mst-spot__media { order: 2; }
.mst-spot__media { position: relative; display: block; aspect-ratio: 4/5; overflow: hidden; background: var(--mst-surface); border-radius: var(--mst-card-radius); }
.mst-spot__media img, .mst-spot__media .mst-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.mst-spot__media:hover img { transform: scale(1.03); }
.mst .mst-spot__title { font-size: clamp(34px, 4.4vw, 68px); }
.mst-spot__price { margin-block-start: 18px; font-size: 18px; }
.mst .mst-spot__text { margin-block-start: 20px; max-width: 420px; color: var(--mst-muted); }
.mst-spot .mst-btns { margin-block-start: 34px; }

/* ---------- Banner ---------- */

.mst-banner__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: var(--mst-surface); border-radius: var(--mst-card-radius); overflow: hidden; }
.mst-banner.is-reverse .mst-banner__media { order: 2; }
.mst-banner__media { position: relative; min-height: clamp(320px, 38vw, 560px); }
.mst-banner__media img, .mst-banner__media .mst-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mst-banner--split .mst-banner__content { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(32px, 6vw, 96px); }
.mst .mst-banner__title { font-size: clamp(32px, 4.2vw, 64px); }
.mst .mst-banner__text { margin-block-start: 18px; max-width: 420px; color: var(--mst-muted); }
.mst-banner__content > .mst-btn { margin-block-start: 32px; }

.mst-banner--band { background: var(--mst-accent); color: var(--mst-accent-text); text-align: center; }
.mst-banner--band .mst-banner__content { display: flex; flex-direction: column; align-items: center; }
.mst-banner--band .mst-eyebrow, .mst-banner--band .mst-banner__text { color: inherit; opacity: .78; }
.mst.mst-banner--band .mst-banner__title { font-size: clamp(44px, 8vw, 132px); max-width: 16ch; line-height: .95; }
.mst-banner--band .mst-banner__text { margin-inline: auto; }

.mst-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mst-gap); }
.mst-tile { position: relative; display: block; aspect-ratio: 5/6; overflow: hidden; border-radius: var(--mst-card-radius); color: #fff; background: var(--mst-surface); }
.mst-tile__media { position: absolute; inset: 0; }
.mst-tile__media img, .mst-tile__media .mst-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.mst-tile:hover .mst-tile__media img, .mst-tile:hover .mst-tile__media .mst-ph { transform: scale(1.04); }
.mst-tile__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .45), transparent 55%); }
.mst-tile__content { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 3.4vw, 48px); }
.mst-tile .mst-eyebrow { color: rgba(255, 255, 255, .8); margin-block-end: 10px; }
.mst .mst-tile__title { font-size: clamp(28px, 3.4vw, 52px); margin-block-end: 22px; }

/* ---------- Statement ---------- */

.mst-statement { --mst-pad: clamp(72px, 11vw, 160px); }
.mst-statement--center { text-align: center; }
.mst .mst-statement__text { font-size: clamp(30px, 4.6vw, 72px); line-height: 1.12; max-width: 22ch; }
.mst-statement--center .mst-statement__text { margin-inline: auto; }
.mst-statement .mst-more { margin-block-start: 40px; }

/* ---------- Features row ---------- */

.mst-usp { --mst-pad: clamp(28px, 4vw, 52px); }
.mst-usp__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.mst-usp__item { display: flex; align-items: center; gap: 16px; padding: 10px clamp(12px, 2vw, 28px); }
.mst-usp--row .mst-usp__item + .mst-usp__item { border-inline-start: 1px solid var(--mst-line); }
.mst-usp--row { border-block: 1px solid var(--mst-line); }
.mst-usp__icon { width: 28px; height: 28px; flex-shrink: 0; color: var(--mst-accent); }
.mst-usp__text { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.mst-usp__text strong { font-weight: 500; font-size: 14px; }
.mst-usp__text span { font-size: 13px; color: var(--mst-muted); }
.mst-usp--centered .mst-usp__item { flex-direction: column; text-align: center; gap: 14px; }
.mst-usp--centered .mst-usp__icon { width: 34px; height: 34px; }

/* ---------- Lookbook ---------- */

.mst-gallery__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.mst-gallery__item { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--mst-surface); border-radius: min(var(--mst-card-radius), 12px); }
.mst-gallery__item img, .mst-gallery__item .mst-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s, filter .4s; }
.mst-gallery__item:hover img { transform: scale(1.05); }
.mst-gallery--mosaic .mst-gallery__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }
.mst-gallery--mosaic .mst-gallery__item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

/* ---------- Newsletter ---------- */

.mst-news__grid { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.mst .mst-news__title { font-size: clamp(30px, 4vw, 56px); }
.mst .mst-news__text { margin-block-start: 12px; color: var(--mst-muted); }
.mst-news__form { width: 100%; max-width: 520px; }
.mst-news__row { display: flex; gap: 0; border-block-end: 1px solid var(--mst-text); }
.mst .mst-news__row input[type="email"] {
	flex: 1;
	min-width: 0;
	height: 54px;
	padding: 0 4px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--mst-text);
	font: inherit;
	font-size: 16px;
	box-shadow: none;
	outline: none;
}
.mst .mst-news__row input::placeholder { color: var(--mst-muted); }
.mst .mst-news__row .mst-btn { min-height: 54px; background: transparent; color: var(--mst-text); border: 0; padding-inline: 8px 0; }
.mst .mst-news__row .mst-btn:hover { color: var(--mst-accent); }
.mst .mst-hp { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); opacity: 0; pointer-events: none; }
.mst-news__msg { font-size: 15px; }
.mst-news__msg.is-error { color: #b42318; margin-block-end: 10px; }
.mst-news--split .mst-news__grid { flex-direction: row; justify-content: space-between; text-align: start; align-items: flex-end; gap: 40px; }
.mst-news .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.mst-hero--editorial .mst-hero__grid { grid-template-columns: 1fr 1fr; grid-template-areas: "title title" "main side" "copy copy"; }
	.mst-hero--editorial .mst-btns { margin-block-start: 8px; }
	.mst-rank__row { grid-template-columns: 40px 56px 1fr auto; }
	.mst-rank__cart { display: none; }
	.mst-gallery__grid { grid-template-columns: repeat(3, 1fr); }
	.mst-usp__list { grid-template-columns: repeat(2, 1fr); }
	.mst-usp--row .mst-usp__item:nth-child(odd) { border-inline-start: 0; }
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.mst { font-size: 14px; }
	.mst-head { align-items: flex-end; }
	.mst-head__aside .mst-arrows { display: none; }

	.mst-hero--split .mst-hero__grid, .mst-hero--arch .mst-hero__grid { grid-template-columns: 1fr; min-height: 0; }
	.mst-hero--split .mst-hero__media { aspect-ratio: 4/5; order: -1; }
	.mst-hero--split .mst-hero__content,
	.mst-hero.is-reverse .mst-hero__content { order: 2; padding: 36px var(--mst-gutter) 48px; }
	.mst-hero--arch .mst-hero__media { width: 82%; order: -1; margin-block-end: 36px; }
	.mst-hero--arch .mst-hero__content, .mst-hero--arch.is-reverse .mst-hero__content { padding: 0 var(--mst-gutter); align-items: center; text-align: center; }
	.mst-hero--arch .mst-hero__content .mst-btns { justify-content: center; }
	.mst-hero--overlay { min-height: min(var(--mst-hero-h), 88vh); }
	.mst-hero--centered .mst-hero__media { aspect-ratio: 4/5; }
	.mst-hero--editorial .mst-hero__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
	.mst-hero--editorial .mst-hero__media--2 { margin-block-start: 48px; }
	.mst-hero--frame .mst-hero__media { min-height: 0; aspect-ratio: 4/5; }
	.mst-hero--frame .mst-hero__content { margin: 10px; padding: 24px; max-width: none; }
	.mst-hero--frame .mst-hero__text { display: none; }

	.mst-track { grid-auto-columns: 68%; margin-inline: calc(var(--mst-gutter) * -1); padding-inline: var(--mst-gutter); scroll-padding-inline: var(--mst-gutter); }
	.mst-card__body { grid-template-columns: 1fr; }
	.mst-card__cart--icon .mst-cart { width: 34px; height: 34px; }
	.mst-rank__row { grid-template-columns: 32px 52px 1fr; }
	.mst-rank__price { grid-column: 3; margin-block-start: -10px; }
	.mst-rank__info { grid-row: 1; grid-column: 3; }

	.mst-cats--circles .mst-grid, .mst-cats--arches .mst-grid { grid-auto-flow: column; grid-auto-columns: 38%; grid-template-columns: none; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--mst-gutter) * -1); padding-inline: var(--mst-gutter); }
	.mst-catlist__img { display: none; }
	.mst-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--mst-gutter) * -1); padding-inline: var(--mst-gutter); }
	.mst .mst-pill { white-space: nowrap; }

	.mst-spot__grid, .mst-banner__grid { grid-template-columns: 1fr; }
	.mst-spot.is-reverse .mst-spot__media, .mst-banner.is-reverse .mst-banner__media { order: 0; }
	.mst-banner__media { min-height: 0; aspect-ratio: 4/3; }
	.mst-duo { grid-template-columns: 1fr; }
	.mst-tile { aspect-ratio: 4/5; }

	.mst-usp__list { grid-template-columns: 1fr 1fr; gap: 18px 0; }
	.mst-usp__item { flex-direction: column; align-items: flex-start; gap: 10px; }
	.mst-usp--row .mst-usp__item + .mst-usp__item { border-inline-start: 0; }
	.mst-gallery--mosaic .mst-gallery__grid { grid-template-columns: repeat(2, 1fr); }
	.mst-news--split .mst-news__grid { flex-direction: column; align-items: stretch; text-align: start; }
}

@media (prefers-reduced-motion: reduce) {
	.mst *, .mst *::before, .mst *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
	.mst-ann__run { animation: none; }
}

/* ==========================================================================
   v1.1 — creative layouts
   ========================================================================== */

/* ---------- Rotating badge ---------- */
.mst-rot {
	position: absolute;
	inset-block-start: 24px;
	inset-inline-end: 24px;
	z-index: 3;
	width: clamp(96px, 9vw, 136px);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--mst-accent);
	color: var(--mst-accent-text);
	pointer-events: none;
}
.mst-rot svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: mst-spin 16s linear infinite; overflow: visible; }
.mst-rot text { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; fill: currentColor; font-family: inherit; }
.mst-rot i { font-style: normal; font-size: 22px; line-height: 1; }
.mst-rot--center { inset: 50% auto auto 50%; transform: translate(-50%, -50%); }
@keyframes mst-spin { to { transform: rotate(360deg); } }

/* ---------- Hero: panels ---------- */
.mst-hero--panels { display: grid; min-height: var(--mst-hero-h); color: #fff; --mst-scrim: .32; }
.mst-hero__panels { grid-area: 1 / 1; position: relative; display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 4px; }
.mst-hero__panels::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--mst-scrim)); pointer-events: none; }
.mst-hero--panels > .mst-wrap { grid-area: 1 / 1; z-index: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding-block: 64px; }
.mst-hero--panels .mst-hero__content { display: flex; flex-direction: column; align-items: center; }
.mst.mst-hero--panels .mst-hero__title { font-size: clamp(48px, 7.4vw, 128px); max-width: 13ch; }
.mst-hero--panels .mst-hero__text { margin-inline: auto; }
.mst-hero--panels .mst-eyebrow, .mst-hero--panels .mst-hero__text { color: rgba(255, 255, 255, .85); }
.mst-hero--panels .mst-btns { justify-content: center; }
.mst-hero--panels .mst-btn--solid, .mst-hero--panels .mst-btn--solid:hover { background: #fff; color: #111; border-color: #fff; }
.mst-hero--panels .mst-btn--solid:hover { background: transparent; color: #fff; }

/* ---------- Hero: collage ---------- */
.mst-hero--collage { --mst-pad: clamp(48px, 7vw, 104px); }
.mst-hero--collage .mst-hero__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.mst-hero__collage { position: relative; aspect-ratio: 1 / 1.02; }
.mst-hero__collage .mst-hero__media {
	position: absolute;
	border-radius: var(--mst-card-radius);
	box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .45);
	transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.mst-hero__collage .mst-hero__media:nth-child(1) { width: 56%; height: 76%; inset-inline-start: 0; inset-block-start: 7%; transform: rotate(-5deg); }
.mst-hero__collage .mst-hero__media:nth-child(2) { width: 46%; height: 58%; inset-inline-end: 0; inset-block-start: 0; transform: rotate(4deg); }
.mst-hero__collage .mst-hero__media:nth-child(3) { width: 44%; height: 50%; inset-inline-start: 34%; inset-block-end: 0; transform: rotate(-1.5deg); z-index: 2; }
.mst-hero__collage:hover .mst-hero__media { transform: rotate(0); }
.mst-hero__collage .mst-rot { inset-block: auto 6%; inset-inline: auto 2%; }

/* ---------- Hero: giant type ---------- */
.mst-hero--giant { --mst-pad: clamp(32px, 5vw, 72px); }
.mst-hero--giant .mst-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: auto 1fr auto auto;
	column-gap: var(--mst-gap);
	min-height: calc(var(--mst-hero-h) - var(--mst-pad) * 2);
}
.mst-hero--giant .mst-hero__content { display: contents; }
.mst-hero--giant .mst-eyebrow { grid-column: 1 / 5; grid-row: 1; }
.mst-hero--giant .mst-hero__media { grid-column: 5 / 13; grid-row: 1 / 5; min-height: 480px; border-radius: var(--mst-card-radius); }
.mst.mst-hero--giant .mst-hero__title {
	grid-column: 1 / 13;
	grid-row: 2;
	align-self: center;
	z-index: 2;
	font-size: clamp(64px, 13.5vw, 236px);
	line-height: .86;
	letter-spacing: -.045em;
	pointer-events: none;
}
.mst-hero--giant .mst-hero__text { grid-column: 1 / 4; grid-row: 3; margin: 0 0 24px; }
.mst-hero--giant .mst-btns { grid-column: 1 / 5; grid-row: 4; margin: 0; }
.mst-hero--giant .mst-rot { inset-block: auto 8%; inset-inline: auto 4%; }

/* ---------- Hero: bento ---------- */
.mst-hero--bento { --mst-pad: clamp(16px, 2vw, 28px); }
.mst-hero--bento .mst-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1.5fr;
	grid-template-rows: 1.25fr 1fr;
	gap: 12px;
	min-height: calc(var(--mst-hero-h) - var(--mst-pad) * 2);
}
.mst-hero--bento .mst-hero__content {
	grid-column: 1 / 3;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	padding: clamp(28px, 4vw, 60px);
	background: var(--mst-surface);
	border-radius: var(--mst-card-radius);
}
.mst.mst-hero--bento .mst-hero__title { font-size: clamp(40px, 5.4vw, 92px); }
.mst-hero__main { grid-column: 3; grid-row: 1 / 3; position: relative; border-radius: var(--mst-card-radius); overflow: hidden; }
.mst-hero__main .mst-hero__media { position: absolute; inset: 0; }
.mst-hero__tile { grid-column: 1; grid-row: 2; position: relative; display: block; overflow: hidden; border-radius: var(--mst-card-radius); min-height: 200px; }
.mst-hero__tile .mst-hero__media { position: absolute; inset: 0; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.mst-hero__tile:hover .mst-hero__media { transform: scale(1.04); }
.mst .mst-hero__tilelabel {
	position: absolute;
	inset-inline-start: 14px;
	inset-block-end: 14px;
	z-index: 1;
	padding: 10px 16px;
	background: var(--mst-bg);
	color: var(--mst-text);
	border-radius: min(var(--mst-btn-radius), 99px);
	font-size: 13px;
}
.mst .mst-hero__tilelabel i { font-style: normal; }
.mst-hero--bento .mst-hero__media--3 { grid-column: 2; grid-row: 2; border-radius: var(--mst-card-radius); }

/* ---------- Products: bento / staggered / card styles ---------- */
.mst-products--bento .mst-grid { grid-auto-flow: dense; }
.mst-products--bento .mst-card:first-child { grid-column: span 2; grid-row: span 2; }
.mst-products--bento .mst-card:first-child .mst-card__media { aspect-ratio: auto; flex: 1; min-height: 340px; }
.mst .mst-products--bento .mst-card:first-child .mst-card__title,
.mst-products--bento .mst-card:first-child .mst-card__title { font-size: 19px; }
@media (min-width: 768px) {
	.mst-products--offset .mst-grid { padding-block-end: 90px; }
	.mst-products--offset .mst-card:nth-child(even) { transform: translateY(90px); }
}

.mst-card-overlay .mst-card__body {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 1;
	padding: 48px 18px 18px;
	color: #fff;
	pointer-events: none;
	background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
	border-radius: 0 0 var(--mst-card-radius) var(--mst-card-radius);
}
.mst-card-overlay .mst-card__body a { pointer-events: auto; }
.mst .mst-card-overlay .mst-card__price, .mst-card-overlay .mst-card__price { color: #fff; }
.mst .mst-card-overlay .mst-card__cat, .mst-card-overlay .mst-card__cat { color: rgba(255, 255, 255, .75); }
.mst-card-overlay .mst-card__price del { color: rgba(255, 255, 255, .7) !important; }
.mst-card-overlay .mst-card__cart--icon { inset-block: 12px auto; }

.mst-card-outline .mst-card { border: 1px solid var(--mst-line); border-radius: var(--mst-card-radius); overflow: hidden; transition: border-color .3s; }
.mst-card-outline .mst-card:hover { border-color: var(--mst-text); }
.mst-card-outline .mst-card__media { border-radius: 0; }
.mst-card-outline .mst-card__body { padding: 14px 16px 16px; }

/* ---------- Categories: bento ---------- */
.mst-cats--bento .mst-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(180px, 19vw, 290px); }
.mst-cats--bento .mst-cat { display: block; }
.mst-cats--bento .mst-cat:first-child { grid-column: span 2; grid-row: span 2; }
.mst-cats--bento .mst-cat__media { aspect-ratio: auto; height: 100%; }
.mst-cats--bento .mst-cat__label {
	position: absolute;
	inset-inline-start: 14px;
	inset-block-end: 14px;
	flex-direction: row;
	align-items: baseline;
	gap: 10px;
	padding: 10px 16px;
	background: var(--mst-bg);
	border-radius: min(var(--mst-radius), 99px);
	transition: padding .3s;
}
.mst-cats--bento .mst-cat:hover .mst-cat__label { padding-inline-end: 26px; }
.mst-cats--bento .mst-cat:first-child .mst-cat__name { font-size: 20px; }

/* ---------- Categories: big scrolling names ---------- */
.mst-cats--marquee .mst-head { margin-block-end: 8px; }
.mst-cm { padding-block: 12px; }
.mst-cm .mst-ann__run { animation-duration: var(--mst-speed, 45s); }
.mst-cm:hover .mst-ann__run { animation-play-state: paused; }
.mst-cm__item { display: inline-flex; align-items: center; gap: clamp(16px, 2vw, 28px); padding-inline: clamp(16px, 2.4vw, 36px); }
.mst-cm__img { position: relative; display: block; flex-shrink: 0; width: clamp(64px, 7vw, 110px); aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--mst-surface); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.mst-cm__img img, .mst-cm__img .mst-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mst .mst-cm__name { font-size: clamp(44px, 7vw, 116px); line-height: 1.05; white-space: nowrap; transition: color .3s; }
.mst-cm__item:nth-child(even) .mst-cm__name { color: transparent; -webkit-text-stroke: 1.2px var(--mst-text); }
.mst-cm__item:hover .mst-cm__name { color: var(--mst-accent); -webkit-text-stroke-color: var(--mst-accent); }
.mst-cm__item:hover .mst-cm__img { transform: rotate(-10deg) scale(1.12); }

/* ---------- Banner: countdown ---------- */
.mst-banner--countdown { background: var(--mst-accent); color: var(--mst-accent-text); }
.mst-banner--countdown .mst-banner__grid { grid-template-columns: 1fr auto; align-items: center; gap: clamp(32px, 5vw, 80px); background: none; border-radius: 0; overflow: visible; }
.mst-banner--countdown .mst-banner__content { display: flex; flex-direction: column; align-items: flex-start; }
.mst-banner--countdown .mst-eyebrow, .mst-banner--countdown .mst-banner__text { color: inherit; opacity: .78; }
.mst.mst-banner--countdown .mst-banner__title { font-size: clamp(38px, 5.4vw, 88px); line-height: .95; }
.mst-cd { display: flex; gap: clamp(8px, 1.2vw, 16px); }
.mst-cd__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: clamp(68px, 8vw, 124px);
	padding: clamp(16px, 2vw, 26px) 8px;
	border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
	border-radius: var(--mst-card-radius);
}
.mst .mst-cd__unit b { font-size: clamp(34px, 4.8vw, 78px); line-height: 1; font-weight: inherit; font-variant-numeric: tabular-nums; }
.mst-cd__unit small { margin-block-start: 10px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.mst-banner .mst-banner__media { overflow: hidden; }
.mst-duo { position: relative; }

/* ---------- Shop the look ---------- */
.mst-look__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 6vw, 100px); align-items: center; }
.mst-look.is-reverse .mst-look__media { order: 2; }
.mst-look__media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--mst-surface); border-radius: var(--mst-card-radius); }
.mst-look__media > img, .mst-look__media > .mst-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mst .mst-dot {
	position: absolute;
	left: var(--x);
	top: var(--y);
	z-index: 2;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--mst-bg);
	color: var(--mst-text);
	font-size: 12px;
	font-weight: 600;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
	transition: transform .25s, background .25s, color .25s;
}
.mst-dot::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid var(--mst-bg); animation: mst-pulse 2.2s ease-out infinite; }
.mst .mst-dot:hover, .mst .mst-dot.is-on { transform: scale(1.18); background: var(--mst-accent); color: var(--mst-accent-text); }
@keyframes mst-pulse { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
.mst .mst-look__title { font-size: clamp(32px, 4vw, 58px); margin-block-end: 28px; }
.mst-look__list { border-block-start: 1px solid var(--mst-line); }
.mst-look__row { display: grid; grid-template-columns: 26px 64px 1fr auto; gap: 16px; align-items: center; padding: 14px 8px; border-block-end: 1px solid var(--mst-line); transition: background .25s; }
.mst-look__row.is-on { background: var(--mst-surface); }
.mst-look__n { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--mst-line); border-radius: 50%; font-size: 11px; color: var(--mst-muted); }
.mst-look__thumb { position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; border-radius: min(var(--mst-card-radius), 8px); background: var(--mst-surface); }
.mst-look__thumb img, .mst-look__thumb .mst-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mst-look__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 15px; }
.mst-look__price { font-size: 14px; color: var(--mst-muted); }
.mst-look__price del { margin-inline-end: 6px; }
.mst-look__price ins { text-decoration: none; }
.mst-look__cart { position: static; }
.mst .mst-look__cart .mst-cart { opacity: 1; transform: none; }

/* ---------- v1.1 tablet & mobile ---------- */
@media (max-width: 1024px) {
	.mst-hero--bento .mst-hero__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
	.mst-hero--bento .mst-hero__content { grid-column: 1 / 3; grid-row: 1; }
	.mst-hero__main { grid-column: 1 / 3; grid-row: 2; aspect-ratio: 4/3; }
	.mst-hero__tile { grid-column: 1; grid-row: 3; aspect-ratio: 1; min-height: 0; }
	.mst-hero--bento .mst-hero__media--3 { grid-column: 2; grid-row: 3; aspect-ratio: 1; }
}
@media (max-width: 767px) {
	.mst-rot { width: 92px; }
	.mst-hero--panels { min-height: min(var(--mst-hero-h), 86vh); }
	.mst-hero__panels { grid-template-columns: .6fr 1fr .6fr; }
	.mst-hero--collage .mst-hero__grid { grid-template-columns: 1fr; }
	.mst-hero__collage { order: -1; width: 92%; margin-inline: auto; }
	.mst-hero--giant .mst-hero__grid { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; }
	.mst-hero--giant .mst-hero__media { grid-column: 1; grid-row: 1; min-height: 0; aspect-ratio: 4/5; }
	.mst.mst-hero--giant .mst-hero__title { grid-column: 1; grid-row: 2; margin-block-start: -.5em; font-size: clamp(44px, 14.5vw, 110px); overflow-wrap: anywhere; }
	.mst-hero--giant .mst-eyebrow { grid-column: 1; grid-row: 3; margin-block: 20px 8px; }
	.mst-hero--giant .mst-hero__text { grid-column: 1; grid-row: 4; }
	.mst-hero--giant .mst-btns { grid-column: 1; grid-row: 5; }
	.mst-hero--giant .mst-rot { inset-block: 16px auto; inset-inline: auto 16px; }
	.mst-products--bento .mst-card:first-child .mst-card__media { min-height: 380px; }
	.mst-cats--bento .mst-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; }
	.mst-banner--countdown .mst-banner__grid { grid-template-columns: 1fr; }
	.mst-cd__unit { min-width: 0; flex: 1; }
	.mst-look__grid { grid-template-columns: 1fr; }
	.mst-look.is-reverse .mst-look__media { order: 0; }
}

/* ==========================================================================
   v1.2 — "Look" skins (Design → Look). One click restyles a whole section.
   ========================================================================== */

.mst-usp__ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---------- Fantasy / RPG ---------- */
.mst-skin-fantasy .mst {
	--mst-glow: color-mix(in srgb, var(--mst-accent) 45%, transparent);
	--mst-frame: color-mix(in srgb, var(--mst-accent) 28%, transparent);
	background-image: radial-gradient(circle, color-mix(in srgb, var(--mst-text) 9%, transparent) 1px, transparent 1.6px);
	background-size: 26px 26px;
}
.mst-skin-fantasy .mst .mst-eyebrow { color: var(--mst-eyebrow, var(--mst-accent)); text-shadow: 0 0 12px var(--mst-glow); letter-spacing: .22em; }
.mst-skin-fantasy .mst-eyebrow::before { content: "[ "; }
.mst-skin-fantasy .mst-eyebrow::after { content: " ]"; }
.mst-skin-fantasy .mst-h { text-shadow: 0 2px 22px rgba(0, 0, 0, .55); }
.mst-skin-fantasy .mst-h em { color: var(--mst-accent); }
.mst-skin-fantasy .mst-head { padding-block-end: 16px; border-block-end: 1px solid var(--mst-frame); }
.mst-skin-fantasy .mst-btn--solid,
.mst-skin-fantasy .mst-news__row .mst-btn { box-shadow: 0 0 18px var(--mst-glow); }
.mst-skin-fantasy .mst-btn--solid:hover { box-shadow: 0 0 28px var(--mst-glow); }
.mst-skin-fantasy .mst-badge { background: var(--mst-accent); color: var(--mst-accent-text); box-shadow: 0 0 14px var(--mst-glow); }
.mst-skin-fantasy .mst-badge::before { content: "[ "; }
.mst-skin-fantasy .mst-badge::after { content: " ]"; }
.mst-skin-fantasy .mst-card { padding: 10px; background: var(--mst-surface); border: 1px solid var(--mst-frame); transition: border-color .4s, box-shadow .4s; }
.mst-skin-fantasy .mst-card:hover { border-color: var(--mst-accent); box-shadow: 0 0 26px -6px var(--mst-glow); }
.mst-skin-fantasy .mst-card__body { padding-inline: 4px; }
.mst-skin-fantasy .mst-card__price { color: var(--mst-accent); }
.mst-skin-fantasy .mst-cart { box-shadow: 0 0 14px var(--mst-glow); }
.mst-skin-fantasy .mst-cd__unit { position: relative; border-color: var(--mst-frame); background: color-mix(in srgb, var(--mst-bg) 30%, transparent); }
.mst-skin-fantasy .mst-hero--arch .mst-hero__media { outline-color: var(--mst-accent); box-shadow: 0 0 60px -10px var(--mst-glow); }
.mst-skin-fantasy .mst-pill { border-color: var(--mst-frame); }
.mst-skin-fantasy .mst-pill:hover { background: var(--mst-accent); color: var(--mst-accent-text); border-color: var(--mst-accent); }
.mst-skin-fantasy .mst-news__row { border-color: var(--mst-accent); }
/* corner brackets */
.mst-skin-fantasy :is(.mst-card__media, .mst-cat__media, .mst-spot__media, .mst-banner__media, .mst-tile, .mst-look__media, .mst-hero__media, .mst-cd__unit, .mst-gallery__item)::before {
	content: "";
	position: absolute;
	inset: 8px;
	z-index: 3;
	pointer-events: none;
	--c: var(--mst-accent);
	background:
		linear-gradient(var(--c), var(--c)) top left / 16px 1.5px,
		linear-gradient(var(--c), var(--c)) top left / 1.5px 16px,
		linear-gradient(var(--c), var(--c)) top right / 16px 1.5px,
		linear-gradient(var(--c), var(--c)) top right / 1.5px 16px,
		linear-gradient(var(--c), var(--c)) bottom left / 16px 1.5px,
		linear-gradient(var(--c), var(--c)) bottom left / 1.5px 16px,
		linear-gradient(var(--c), var(--c)) bottom right / 16px 1.5px,
		linear-gradient(var(--c), var(--c)) bottom right / 1.5px 16px;
	background-repeat: no-repeat;
	opacity: .85;
}
.mst-skin-fantasy .mst-cd__unit::before { inset: -1px; }
/* diamond icons */
.mst-skin-fantasy .mst-usp__ico {
	width: 54px;
	height: 54px;
	margin: 8px;
	border: 1px solid var(--mst-frame);
	background: var(--mst-surface);
	transform: rotate(45deg);
	box-shadow: 0 0 16px -4px var(--mst-glow);
	transition: background .3s, color .3s;
}
.mst-skin-fantasy .mst-usp__ico .mst-usp__icon { transform: rotate(-45deg); width: 24px; height: 24px; }
.mst-skin-fantasy .mst-usp__item:hover .mst-usp__ico { background: var(--mst-accent); }
.mst-skin-fantasy .mst-usp__item:hover .mst-usp__icon { color: var(--mst-accent-text); }
.mst-skin-fantasy .mst-usp--centered .mst-usp__ico { margin-block-end: 14px; }
.mst-skin-fantasy .mst-usp--row { border-color: var(--mst-frame); }

/* ---------- Bold outlines & hard shadows ---------- */
.mst-skin-brutal .mst { --mst-b: 2px solid var(--mst-text); --mst-sh: 5px 5px 0 var(--mst-text); }
.mst-skin-brutal :is(.mst-card__media, .mst-cat__media, .mst-spot__media, .mst-banner__grid, .mst-tile, .mst-look__media, .mst-cd__unit, .mst-gallery__item, .mst-rank__media, .mst-look__thumb, .mst-cm__img),
.mst-skin-brutal .mst-hero:not(.mst-hero--overlay):not(.mst-hero--panels) .mst-hero__media,
.mst-skin-brutal :is(.mst-hero--frame, .mst-hero--bento) .mst-hero__content {
	border: var(--mst-b);
	box-shadow: var(--mst-sh);
}
.mst-skin-brutal .mst-banner__grid .mst-banner__media { border: 0; border-inline-end: var(--mst-b); }
.mst-skin-brutal :is(.mst-card__media, .mst-cat__media, .mst-tile, .mst-gallery__item) { transition: transform .2s, box-shadow .2s; }
.mst-skin-brutal :is(.mst-card:hover .mst-card__media, .mst-cat:hover .mst-cat__media, .mst-tile:hover, .mst-gallery__item:hover) { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--mst-text); }
.mst-skin-brutal .mst-btn:not(.mst-btn--underline),
.mst-skin-brutal .mst-cart,
.mst-skin-brutal .mst-pill,
.mst-skin-brutal .mst-arrow {
	border: var(--mst-b) !important;
	box-shadow: 3px 3px 0 var(--mst-text);
	transition: transform .15s, box-shadow .15s, background .2s, color .2s;
}
.mst-skin-brutal .mst-btn:not(.mst-btn--underline):hover,
.mst-skin-brutal .mst-cart:hover,
.mst-skin-brutal .mst-pill:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--mst-text); }
.mst-skin-brutal .mst-btn--solid:hover { background: var(--mst-accent); color: var(--mst-accent-text); }
.mst-skin-brutal .mst-btn { font-weight: 700; }
.mst-skin-brutal .mst-badge { border: var(--mst-b); background: var(--mst-accent); color: var(--mst-accent-text); transform: rotate(-4deg); font-weight: 700; }
.mst-skin-brutal .mst-h em { font-style: normal; padding: 0 .12em; background: var(--mst-accent); color: var(--mst-accent-text); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mst-skin-brutal .mst-ann { border-block: var(--mst-b); }
.mst-skin-brutal .mst-cats--tiles .mst-cat__label, .mst-skin-brutal .mst-cats--bento .mst-cat__label { border: var(--mst-b); }
.mst-skin-brutal .mst-news__row { border: var(--mst-b); box-shadow: var(--mst-sh); padding-inline-start: 12px; background: var(--mst-bg); }
.mst-skin-brutal .mst-news__row .mst-btn { border-width: 0 0 0 2px !important; box-shadow: none; background: var(--mst-accent); color: var(--mst-accent-text); padding-inline: 22px; }
.mst-skin-brutal .mst-usp__ico { width: 50px; height: 50px; border: var(--mst-b); background: var(--mst-accent); box-shadow: 3px 3px 0 var(--mst-text); }
.mst-skin-brutal .mst-usp__ico .mst-usp__icon { color: var(--mst-accent-text); width: 24px; height: 24px; }
.mst-skin-brutal .mst-rot { border: var(--mst-b); }

/* ---------- Glass ---------- */
.mst-skin-glass .mst {
	--mst-glass: color-mix(in srgb, var(--mst-bg) 42%, transparent);
	--mst-glass-line: color-mix(in srgb, #ffffff 50%, transparent);
	background:
		radial-gradient(55% 60% at 8% 12%, color-mix(in srgb, var(--mst-accent) 30%, transparent), transparent 70%),
		radial-gradient(50% 55% at 96% 88%, color-mix(in srgb, var(--mst-surface) 95%, transparent), transparent 70%),
		var(--mst-bg);
}
.mst-skin-glass :is(.mst-card, .mst-banner__grid, .mst-cd__unit, .mst-pill, .mst-badge, .mst-hero__tilelabel, .mst-usp__item, .mst-look__side, .mst-news__grid, .mst-rank__row),
.mst-skin-glass :is(.mst-hero--frame, .mst-hero--bento) .mst-hero__content,
.mst-skin-glass :is(.mst-cats--tiles, .mst-cats--bento) .mst-cat__label {
	background: var(--mst-glass);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
	border: 1px solid var(--mst-glass-line);
	box-shadow: 0 18px 50px -28px rgba(0, 0, 0, .45);
}
.mst-skin-glass .mst-card { padding: 10px; border-radius: max(var(--mst-card-radius), 18px); }
.mst-skin-glass .mst-card__media { border-radius: max(calc(var(--mst-card-radius) * .7), 12px); }
.mst-skin-glass .mst-card__body { padding-inline: 6px; padding-block-end: 4px; }
.mst-skin-glass .mst-usp__item { border-radius: 18px; margin: 6px; padding: 18px; }
.mst-skin-glass .mst-usp--row { border: 0; }
.mst-skin-glass .mst-usp--row .mst-usp__item + .mst-usp__item { border-inline-start: 1px solid var(--mst-glass-line); }
.mst-skin-glass .mst-look__side { padding: clamp(24px, 3vw, 44px); border-radius: max(var(--mst-card-radius), 20px); }
.mst-skin-glass .mst-news__grid { padding: clamp(32px, 5vw, 64px); border-radius: max(var(--mst-card-radius), 24px); }
.mst-skin-glass .mst-rank__row { border-radius: 14px; margin-block-end: 8px; }
.mst-skin-glass .mst-rank { border: 0; }
.mst-skin-glass .mst-btn--solid {
	background: linear-gradient(135deg, var(--mst-accent), color-mix(in srgb, var(--mst-accent) 55%, #ffffff));
	border-color: transparent;
	box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--mst-accent) 70%, transparent);
}
.mst-skin-glass .mst-btn--solid:hover { color: var(--mst-accent-text); filter: brightness(1.08); }
.mst-skin-glass .mst-h em {
	background: linear-gradient(90deg, var(--mst-accent), color-mix(in srgb, var(--mst-accent) 40%, var(--mst-text)));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------- Hand-drawn ---------- */
.mst-skin-paper .mst { --mst-wob: 255px 15px 225px 15px / 15px 225px 15px 255px; }
.mst-skin-paper :is(.mst-card__media, .mst-cat__media, .mst-spot__media, .mst-banner__grid, .mst-tile, .mst-look__media, .mst-gallery__item, .mst-cd__unit),
.mst-skin-paper .mst-hero:not(.mst-hero--overlay):not(.mst-hero--panels) .mst-hero__media,
.mst-skin-paper :is(.mst-hero--frame, .mst-hero--bento) .mst-hero__content {
	border: 2px solid var(--mst-text);
	border-radius: var(--mst-wob);
}
.mst-skin-paper .mst-cats--circles .mst-cat__media { border-radius: 50% 48% 52% 47% / 49% 53% 47% 51%; border: 2px solid var(--mst-text); }
.mst-skin-paper .mst-card { position: relative; }
.mst-skin-paper .mst-card:nth-child(odd) .mst-card__media { transform: rotate(-1.2deg); }
.mst-skin-paper .mst-card:nth-child(even) .mst-card__media { transform: rotate(1deg); }
.mst-skin-paper .mst-card__media { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.mst-skin-paper .mst-card:hover .mst-card__media { transform: rotate(0) scale(1.03); }
.mst-skin-paper .mst-card::before {
	content: "";
	position: absolute;
	top: -9px;
	left: 50%;
	z-index: 4;
	width: 72px;
	height: 22px;
	background: color-mix(in srgb, var(--mst-accent) 45%, transparent);
	transform: translateX(-50%) rotate(-3deg);
	pointer-events: none;
}
.mst-skin-paper .mst-card:nth-child(even)::before { transform: translateX(-50%) rotate(4deg); }
.mst-skin-paper .mst-btn:not(.mst-btn--underline), .mst-skin-paper .mst-pill, .mst-skin-paper .mst-cart {
	border: 2px solid var(--mst-text) !important;
	border-radius: var(--mst-wob) !important;
}
.mst-skin-paper .mst-btn:not(.mst-btn--underline):hover { transform: rotate(-2deg); }
.mst-skin-paper .mst-btn--solid:hover { background: var(--mst-accent); color: var(--mst-accent-text); }
.mst-skin-paper .mst-card__cart--icon .mst-cart { border-radius: 50% 45% 55% 48% !important; }
.mst-skin-paper .mst-h em { font-style: normal; text-decoration: underline wavy var(--mst-accent); text-decoration-thickness: 3px; text-underline-offset: .18em; }
.mst-skin-paper .mst-badge { background: var(--mst-accent); color: var(--mst-accent-text); transform: rotate(-6deg); border-radius: 4px; }
.mst-skin-paper .mst-usp__ico { width: 52px; height: 52px; border: 2px solid var(--mst-text); border-radius: 50% 44% 56% 47% / 52% 47% 53% 48%; background: color-mix(in srgb, var(--mst-accent) 30%, var(--mst-bg)); }
.mst-skin-paper .mst-usp__ico .mst-usp__icon { width: 24px; height: 24px; color: var(--mst-text); }
.mst-skin-paper .mst-news__row { border: 2px solid var(--mst-text); border-radius: var(--mst-wob); padding-inline: 14px 6px; }
.mst-skin-paper .mst-ann { border-block: 2px dashed currentColor; }

/* Arch hero: badge sits outside the arch so it is never clipped. */
.mst-hero__archwrap { position: relative; justify-self: center; width: min(100%, 520px); }
.mst-hero--arch .mst-hero__archwrap .mst-hero__media { width: 100%; }
.mst-hero__archwrap .mst-rot { inset-block: auto 12%; inset-inline: auto -40px; }
@media (max-width: 767px) {
	.mst-hero__archwrap { order: -1; width: 82%; margin-inline: auto; margin-block-end: 36px; }
	.mst-hero--arch .mst-hero__archwrap .mst-hero__media { width: 100%; margin: 0; }
	.mst-hero__archwrap .mst-rot { inset-inline: auto -18px; }
}

/* ==========================================================================
   v1.3 — colour controls + more styles
   ========================================================================== */

/* Colours: our own settings beat Elementor's Site Settings (global heading / link colours). */
body .mst a { color: inherit; }
.mst .mst-h { color: var(--mst-heading, inherit); }

/* Text sitting on photos */
.mst-hero--overlay, .mst-hero--panels, .mst-hero--slider, .mst-hero--video, .mst-tile, .mst-banner__ov { color: var(--mst-on-image, #ffffff); }
body :is(.mst-hero--overlay, .mst-hero--panels, .mst-hero--slider, .mst-hero--video, .mst-tile, .mst-banner__ov, .mst-cats--overlay .mst-cat__label) .mst-h { color: var(--mst-on-image, #ffffff); }
body :is(.mst-hero--overlay, .mst-hero--panels, .mst-hero--slider, .mst-hero--video, .mst-tile, .mst-banner__ov) :is(.mst-eyebrow, .mst-hero__text, .mst-banner__text) { color: var(--mst-on-image, #ffffff); opacity: .85; }
body :is(.mst-hero--overlay, .mst-hero--panels, .mst-hero--slider, .mst-hero--video, .mst-banner__ov) .mst-btn--solid { background: var(--mst-btn-bg, var(--mst-on-image, #ffffff)); border-color: var(--mst-btn-bg, var(--mst-on-image, #ffffff)); color: var(--mst-btn-text, #111111); }
body :is(.mst-hero--overlay, .mst-hero--panels, .mst-hero--slider, .mst-hero--video, .mst-banner__ov) .mst-btn--solid:hover { background: transparent; color: var(--mst-on-image, #ffffff); }
/* Text sitting on the accent colour */
body :is(.mst-banner--band, .mst-banner--countdown, .mst-banner--marquee, .mst-news--band) .mst-h { color: inherit; }
body :is(.mst-banner--band, .mst-banner--countdown, .mst-banner--marquee, .mst-news--band) .mst-eyebrow { color: inherit; opacity: .8; }

/* ---------- Hero: slideshow / video / card ---------- */
.mst-hero--slider, .mst-hero--video, .mst-hero--card { min-height: var(--mst-hero-h); display: flex; align-items: flex-end; --mst-scrim: .35; }
:is(.mst-hero--slider, .mst-hero--video, .mst-hero--card) .mst-hero__media { position: absolute; inset: 0; }
:is(.mst-hero--slider, .mst-hero--video) .mst-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, var(--mst-scrim)), rgba(0, 0, 0, calc(var(--mst-scrim) * .3)) 60%, transparent);
}
:is(.mst-hero--slider, .mst-hero--video, .mst-hero--card) > .mst-wrap { position: relative; z-index: 2; padding-block: clamp(40px, 6vw, 96px); }
.mst-hero--slider .mst-hero__title, .mst-hero--video .mst-hero__title { max-width: 14ch; }
.mst-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.mst-slide.is-on { opacity: 1; }
.mst-slide > img, .mst-slide > .mst-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7s ease-out; }
.mst-slide.is-on > img, .mst-slide.is-on > .mst-ph { transform: scale(1); }
.mst-dots { position: absolute; z-index: 3; inset-inline-end: var(--mst-gutter); inset-block-end: 28px; display: flex; gap: 8px; }
.mst-dots i { width: 26px; height: 2px; background: var(--mst-on-image, #fff); opacity: .4; transition: opacity .4s; }
.mst-dots i.is-on { opacity: 1; }
.mst-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* text position */
.mst-hero.is-pos-center { align-items: center; text-align: center; }
.mst-hero.is-pos-center .mst-hero__content { display: flex; flex-direction: column; align-items: center; margin-inline: auto; }
.mst-hero.is-pos-center .mst-hero__title { margin-inline: auto; }
.mst-hero.is-pos-center .mst-hero__text { margin-inline: auto; }
.mst-hero.is-pos-center .mst-btns { justify-content: center; }
.mst-hero.is-pos-end .mst-hero__content { display: flex; flex-direction: column; align-items: flex-end; text-align: end; margin-inline-start: auto; }
.mst-hero.is-pos-end .mst-btns { justify-content: flex-end; }
/* card */
.mst-hero--card { align-items: center; }
.mst-hero--card .mst-hero__content {
	max-width: 560px;
	margin-inline: auto;
	padding: clamp(32px, 4vw, 64px);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--mst-bg);
	border-radius: var(--mst-card-radius);
	box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .5);
}
.mst.mst-hero--card .mst-hero__title { font-size: clamp(36px, 4.6vw, 72px); }
.mst-hero--card .mst-hero__text { margin-inline: auto; }
.mst-hero--card .mst-btns { justify-content: center; }

/* ---------- Categories: overlay / stories / cards ---------- */
.mst-cats--overlay .mst-cat__media { aspect-ratio: 3/4; }
.mst-cats--overlay .mst-cat__media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .28); transition: background .4s; }
.mst-cats--overlay .mst-cat:hover .mst-cat__media::after { background: rgba(0, 0, 0, .42); }
.mst-cats--overlay .mst-cat__label { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--mst-on-image, #fff); padding: 16px; }
.mst.mst-cats--overlay .mst-cat__name, .mst-cats--overlay .mst-cat__name { font-size: clamp(24px, 2.6vw, 40px); }
.mst-cats--overlay .mst-cat__count { color: inherit; opacity: .85; }
.mst-cats--overlay .mst-cat__label::after { content: ""; width: 0; height: 1px; margin-block-start: 12px; background: currentColor; transition: width .4s; }
.mst-cats--overlay .mst-cat:hover .mst-cat__label::after { width: 48px; }

.mst-cats--stories { --mst-cols: 7; }
.mst-cats--stories .mst-grid { gap: 18px 12px; }
.mst-cats--stories .mst-cat { align-items: center; text-align: center; gap: 10px; }
.mst-cats--stories .mst-cat__media {
	aspect-ratio: 1;
	border-radius: 50%;
	padding: 3px;
	background: conic-gradient(from 210deg, var(--mst-accent), color-mix(in srgb, var(--mst-accent) 35%, var(--mst-surface)), var(--mst-accent));
	width: 100%;
	max-width: 120px;
	margin-inline: auto;
}
.mst-cats--stories .mst-cat__media img, .mst-cats--stories .mst-cat__media .mst-ph { inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 50%; border: 3px solid var(--mst-bg); }
.mst-cats--stories .mst-cat__name { font-size: 13px; }
.mst-cats--stories .mst-head { justify-content: center; text-align: center; }

.mst-cats--cards .mst-cat { padding: 14px; gap: 14px; background: var(--mst-surface); border-radius: max(var(--mst-card-radius), 14px); transition: transform .35s, box-shadow .35s; }
.mst-cats--cards .mst-cat:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(0, 0, 0, .4); }
.mst-cats--cards .mst-cat__label { order: -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-inline: 4px; }
.mst.mst-cats--cards .mst-cat__name, .mst-cats--cards .mst-cat__name { font-size: 20px; }
.mst-cats--cards .mst-cat__count { order: 3; flex-basis: 100%; }
.mst-cat__go { font-style: normal; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--mst-bg); transition: background .3s, color .3s; }
.mst-cat:hover .mst-cat__go { background: var(--mst-accent); color: var(--mst-accent-text); }
[dir="rtl"] .mst-cat__go { transform: scaleX(-1); }
.mst-cats--cards .mst-cat__media { aspect-ratio: 1; border-radius: max(calc(var(--mst-card-radius) * .7), 10px); }

/* ---------- Products: lift / price tag / wide rows ---------- */
.mst-card-lift .mst-card { padding: 10px; background: var(--mst-bg); border-radius: max(var(--mst-card-radius), 14px); box-shadow: 0 2px 14px -6px rgba(0, 0, 0, .12); transition: transform .35s, box-shadow .35s; }
.mst-card-lift .mst-card:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -28px rgba(0, 0, 0, .4); }
.mst-card-lift .mst-card__media { border-radius: max(calc(var(--mst-card-radius) * .7), 10px); }
.mst-card-lift .mst-card__body { padding-inline: 6px; padding-block-end: 6px; }

.mst-card-tag .mst-card__body { grid-template-columns: 1fr; text-align: center; }
.mst.mst-card-tag .mst-card__price, .mst-card-tag .mst-card__price {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	z-index: 2;
	padding: 6px 12px;
	background: var(--mst-bg);
	border-radius: 999px;
	font-size: 13px;
	box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .25);
}
.mst-card-tag .mst-card__price del { display: none; }

.mst-products--rows .mst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mst-gap); }
.mst-products--rows .mst-card { flex-direction: row; align-items: center; gap: clamp(14px, 2vw, 28px); padding: 12px; background: var(--mst-surface); border-radius: var(--mst-card-radius); }
.mst-products--rows .mst-card__media { width: 40%; flex-shrink: 0; }
.mst-products--rows .mst-card__body { grid-template-columns: 1fr; padding: 0; gap: 8px; }
.mst.mst-products--rows .mst-card__title, .mst-products--rows .mst-card__title { font-size: clamp(16px, 1.6vw, 22px); }
.mst-products--rows .mst-card__cart--icon { position: static; margin-block-start: 6px; }
.mst-products--rows .mst-card__cart--icon .mst-cart { opacity: 1; transform: none; }

/* ---------- Banner: overlay / outline / marquee ---------- */
.mst-banner__ov { position: relative; display: flex; align-items: center; min-height: clamp(360px, 42vw, 620px); overflow: hidden; border-radius: var(--mst-card-radius); }
.mst-banner__ov .mst-banner__media { position: absolute; inset: 0; min-height: 0; }
.mst-banner__ov .mst-banner__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .5), transparent 70%); }
[dir="rtl"] .mst-banner__ov .mst-banner__media::after { background: linear-gradient(-90deg, rgba(0, 0, 0, .5), transparent 70%); }
.mst-banner__ov .mst-banner__content { position: relative; z-index: 1; max-width: 560px; padding: clamp(32px, 6vw, 88px); display: flex; flex-direction: column; align-items: flex-start; }
.mst-banner__ov .mst-banner__content > .mst-btn { margin-block-start: 28px; }

.mst-banner__box {
	position: relative;
	padding: clamp(48px, 7vw, 110px) clamp(24px, 5vw, 80px);
	text-align: center;
	border: 1px solid var(--mst-line);
	outline: 1px solid var(--mst-line);
	outline-offset: -12px;
	background: var(--mst-surface);
	border-radius: var(--mst-card-radius);
}
.mst-banner__box .mst-banner__content { display: flex; flex-direction: column; align-items: center; }
.mst-banner__box .mst-banner__text { margin-inline: auto; }

.mst-banner--marquee { background: var(--mst-accent); color: var(--mst-accent-text); }
.mst-banner--marquee .mst-ann__run { animation-duration: 28s; align-items: center; }
.mst-banner--marquee:hover .mst-ann__run { animation-play-state: paused; }
.mst.mst-banner--marquee .mst-banner__title { font-size: clamp(48px, 9vw, 150px); white-space: nowrap; line-height: 1.1; }
.mst-banner__mhead { text-align: center; }
.mst-banner__mfoot { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-block-start: 18px; text-align: center; }
.mst-banner__mfoot .mst-banner__text { margin: 0; opacity: .8; color: inherit; }

/* ---------- Newsletter: photo panel / band / form styles ---------- */
.mst-news__panel { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; background: var(--mst-surface); border-radius: var(--mst-card-radius); }
.mst-news__media { position: relative; min-height: clamp(300px, 34vw, 480px); }
.mst-news__media img, .mst-news__media .mst-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mst-news--image .mst-news__grid { padding: clamp(32px, 5vw, 80px); align-items: flex-start; justify-content: center; text-align: start; }
.mst-news--image .mst-news__form { max-width: none; }

.mst-news--band { background: var(--mst-accent); color: var(--mst-accent-text); --mst-pad: clamp(36px, 5vw, 64px); }
.mst-news--band .mst-news__grid { flex-direction: row; justify-content: space-between; align-items: center; text-align: start; gap: 32px; }
.mst-news--band .mst-news__text { color: inherit; opacity: .8; }
.mst-news--band .mst-news__row { border-color: currentColor; }
.mst.mst-news--band .mst-news__row input[type="email"], .mst-news--band .mst-news__row input[type="email"] { color: inherit; }
.mst-news--band .mst-news__row input::placeholder { color: inherit; opacity: .65; }
.mst.mst-news--band .mst-news__row .mst-btn { color: inherit; background: transparent; }

.mst-form-pill .mst-news__row { padding: 5px; border: 1px solid var(--mst-line); border-radius: 999px; background: var(--mst-bg); }
.mst.mst-form-pill .mst-news__row input[type="email"] { height: 48px; padding-inline: 18px; }
.mst.mst-form-pill .mst-news__row .mst-btn { min-height: 48px; padding-inline: 26px; border-radius: 999px; background: var(--mst-btn-bg, var(--mst-accent)); color: var(--mst-btn-text, var(--mst-accent-text)); }
.mst-form-box .mst-news__row { gap: 10px; border: 0; }
.mst.mst-form-box .mst-news__row input[type="email"] { padding-inline: 16px; border: 1px solid var(--mst-line); border-radius: var(--mst-btn-radius); background: var(--mst-bg); }
.mst.mst-form-box .mst-news__row .mst-btn { padding-inline: 28px; border-radius: var(--mst-btn-radius); background: var(--mst-btn-bg, var(--mst-accent)); color: var(--mst-btn-text, var(--mst-accent-text)); }
.mst-news--band.mst-form-pill .mst-news__row, .mst-news--band.mst-form-box .mst-news__row input[type="email"] { background: transparent; border-color: currentColor; }

@media (max-width: 767px) {
	.mst-hero--slider, .mst-hero--video, .mst-hero--card { min-height: min(var(--mst-hero-h), 86vh); }
	.mst-hero--card .mst-hero__content { margin-block: 24px; }
	.mst-cats--overlay .mst-grid, .mst-cats--cards .mst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mst-cats--stories .mst-grid { grid-auto-flow: column; grid-auto-columns: 22%; grid-template-columns: none; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--mst-gutter) * -1); padding-inline: var(--mst-gutter); }
	.mst-products--rows .mst-grid { grid-template-columns: 1fr; }
	.mst-news__panel { grid-template-columns: 1fr; }
	.mst-news__media { min-height: 240px; }
	.mst-news--band .mst-news__grid { flex-direction: column; align-items: stretch; }
	.mst-banner__ov .mst-banner__media::after { background: rgba(0, 0, 0, .4); }
}

/* ==========================================================================
   v1.4 — banner fixes + new banner styles
   ========================================================================== */

/* Mobile fix: the photo in "Wide photo, text over" now always covers all the text. */
.mst-banner__ov .mst-banner__media { aspect-ratio: auto !important; height: 100%; }
@media (max-width: 767px) {
	.mst-banner__ov { min-height: 420px; align-items: flex-end; }
	.mst-banner__ov .mst-banner__content { max-width: none; padding: 28px 22px 32px; }
	.mst-banner__ov .mst-banner__media::after { background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, .25) 70%, rgba(0, 0, 0, .1)); }
	.mst-banner__ov .mst-banner__text { font-size: 14px; line-height: 1.7; }
}

/* ---------- Three tiles ---------- */
.mst-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mst-trio .mst-tile { aspect-ratio: 3/4; }
.mst.mst-banner--trio .mst-tile__title { font-size: clamp(24px, 2.6vw, 40px); }

/* ---------- Coupon ticket ---------- */
.mst-coupon { display: grid; grid-template-columns: 1.5fr 1fr; background: var(--mst-surface); border-radius: max(var(--mst-card-radius), 12px); }
.mst-coupon__info { padding: clamp(28px, 4.5vw, 64px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.mst-coupon__info .mst-banner__text { margin-block-start: 14px; }
.mst-coupon__code {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: clamp(28px, 4vw, 56px) 24px;
	text-align: center;
	border-inline-start: 2px dashed color-mix(in srgb, var(--mst-text) 25%, transparent);
}
.mst-coupon__code::before, .mst-coupon__code::after {
	content: "";
	position: absolute;
	inset-inline-start: -14px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--mst-bg);
}
.mst-coupon__code::before { top: -13px; }
.mst-coupon__code::after { bottom: -13px; }
.mst-coupon__label { font-size: 12px; letter-spacing: .14em; color: var(--mst-muted); }
.mst-upper-yes .mst-coupon__label { text-transform: uppercase; }
.mst .mst-code {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 10px 10px 10px 22px;
	border: 1.5px dashed var(--mst-text);
	border-radius: min(max(var(--mst-btn-radius), 10px), 60px);
	background: var(--mst-bg);
	color: var(--mst-text);
	font: inherit;
	cursor: pointer;
	transition: transform .2s;
}
[dir="rtl"] .mst .mst-code { padding: 10px 22px 10px 10px; }
.mst .mst-code:hover { transform: scale(1.03); }
.mst .mst-code b { font-size: clamp(20px, 2.4vw, 30px); letter-spacing: .14em; font-weight: 700; }
.mst .mst-code span { padding: 8px 14px; font-size: 12px; border-radius: 999px; background: var(--mst-btn-bg, var(--mst-accent)); color: var(--mst-btn-text, var(--mst-accent-text)); }
.mst .mst-code.is-copied span { background: #2e7d32; color: #fff; }

/* ---------- Text between two photos ---------- */
.mst-flank { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: clamp(20px, 4vw, 64px); align-items: center; }
.mst-flank__img { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--mst-card-radius); transform: translateY(-6%); }
.mst-flank__img--2 { transform: translateY(6%); }
.mst-flank__img img, .mst-flank__img .mst-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mst-flank .mst-banner__content { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 24px; }
.mst-flank .mst-banner__text { margin-inline: auto; }
.mst-flank .mst-banner__content > .mst-btn { margin-block-start: 28px; }

/* ---------- Round photo ---------- */
.mst-banner__circ { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 100px); align-items: center; }
.mst-banner__circ.is-reverse .mst-banner__cimg { order: 2; }
.mst-banner__cimg { position: relative; width: min(100%, 520px); aspect-ratio: 1; justify-self: center; }
.mst-banner__cimg::before { content: ""; position: absolute; inset: -16px; border: 1.5px dashed var(--mst-accent); border-radius: 50%; animation: mst-spin 40s linear infinite; }
.mst-banner__cmask { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; background: var(--mst-surface); }
.mst-banner__cmask img, .mst-banner__cmask .mst-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mst-banner__cimg .mst-rot { inset-block: auto 4%; inset-inline: auto 2%; }
.mst-banner__circ .mst-banner__content { display: flex; flex-direction: column; align-items: flex-start; }
.mst-banner__circ .mst-banner__content > .mst-btn { margin-block-start: 30px; }

/* ---------- Polaroid ---------- */
.mst-banner__pol { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 100px); align-items: center; }
.mst-banner__pol.is-reverse .mst-polaroid { order: 2; }
.mst .mst-polaroid {
	position: relative;
	justify-self: center;
	width: min(100%, 440px);
	margin: 0;
	padding: 14px 14px 64px;
	background: #ffffff;
	box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .45);
	transform: rotate(-4deg);
	transition: transform .5s cubic-bezier(.3, 1.4, .5, 1);
}
.mst .mst-polaroid:hover { transform: rotate(0) scale(1.02); }
.mst-polaroid::before { content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 28px; background: color-mix(in srgb, var(--mst-accent) 40%, rgba(255, 255, 255, .6)); transform: translateX(-50%) rotate(3deg); z-index: 2; }
.mst-polaroid__img { position: relative; display: block; aspect-ratio: 4/5; overflow: hidden; background: var(--mst-surface); }
.mst-polaroid__img img, .mst-polaroid__img .mst-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mst-polaroid__cap { position: absolute; inset-inline: 0; bottom: 18px; text-align: center; color: #333333; font-size: 20px; font-style: italic; }
.mst-banner__pol .mst-banner__content { display: flex; flex-direction: column; align-items: flex-start; }
.mst-banner__pol .mst-banner__content > .mst-btn { margin-block-start: 30px; }

@media (max-width: 767px) {
	.mst-trio { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--mst-gutter) * -1); padding-inline: var(--mst-gutter); }
	.mst-trio > * { scroll-snap-align: start; }
	.mst-coupon { grid-template-columns: 1fr; }
	.mst-coupon__info { align-items: center; text-align: center; }
	.mst-coupon__code { border-inline-start: 0; border-block-start: 2px dashed color-mix(in srgb, var(--mst-text) 25%, transparent); }
	.mst-coupon__code::before { top: -13px; inset-inline-start: -13px; }
	.mst-coupon__code::after { top: -13px; bottom: auto; inset-inline: auto -13px; }
	.mst-flank { grid-template-columns: 1fr 1fr; gap: 14px; }
	.mst-flank .mst-banner__content { grid-column: 1 / -1; order: -1; padding-block: 0 20px; }
	.mst-flank__img, .mst-flank__img--2 { transform: none; }
	.mst-flank__img--2 { margin-block-start: 32px; }
	.mst-banner__circ, .mst-banner__pol { grid-template-columns: 1fr; text-align: center; }
	.mst-banner__circ.is-reverse .mst-banner__cimg, .mst-banner__pol.is-reverse .mst-polaroid { order: 0; }
	.mst-banner__cimg { width: 78%; margin-block: 16px; }
	.mst-banner__circ .mst-banner__content, .mst-banner__pol .mst-banner__content { align-items: center; }
	.mst .mst-polaroid { width: 82%; }
}
/* Spinning badge text must run left-to-right along its circle, even on Arabic pages. */
.mst-rot svg, .mst-rot text { direction: ltr; unicode-bidi: plaintext; }
.mst-rot.is-arabic text { letter-spacing: 0; font-size: 12px; font-weight: 700; text-transform: none; }