/**
 * Umeed Mega Mall — homepage and marketing templates.
 *
 * Hero, trust strip, category rail, brand story, "why shop with us",
 * newsletter, deals, brands and contact.
 */

/* -------------------------------------------------------------------------
 * 1. Carousel (shared by categories and product rows)
 * ---------------------------------------------------------------------- */

.umm-carousel {
	position: relative;
}

.umm-carousel__track {
	display: flex;
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-block: 4px;
	margin-inline: -4px;
	padding-inline: 4px;
}

.umm-carousel__track::-webkit-scrollbar {
	display: none;
}

.umm-carousel__track > * {
	scroll-snap-align: start;
	flex: 0 0 auto;
}

.umm-carousel__nav {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	transform: translateY(-50%);
	background: var(--umm-bg);
	border: 1px solid var(--umm-border);
	border-radius: var(--umm-radius-pill);
	color: var(--umm-text);
	box-shadow: var(--umm-shadow-md);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--umm-dur) var(--umm-ease), background-color var(--umm-dur) var(--umm-ease),
		color var(--umm-dur) var(--umm-ease), border-color var(--umm-dur) var(--umm-ease);
}

.umm-carousel__nav--prev {
	inset-inline-start: -20px;
}

.umm-carousel__nav--next {
	inset-inline-end: -20px;
}

.umm-carousel:hover .umm-carousel__nav,
.umm-carousel__nav:focus-visible {
	opacity: 1;
	pointer-events: auto;
}

.umm-carousel__nav:hover {
	background: var(--umm-gold);
	border-color: var(--umm-gold);
	color: var(--umm-on-gold);
}

.umm-carousel__nav[disabled] {
	opacity: 0 !important;
	pointer-events: none;
}

@media (max-width: 900px) {
	.umm-carousel__nav {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * 2. Hero
 * ---------------------------------------------------------------------- */

.umm-hero {
	position: relative;
	background: var(--umm-hero-bg, var(--umm-surface-alt));
	color: var(--umm-hero-text, var(--umm-text));
	border: 1px solid var(--umm-border);
	border-radius: var(--umm-radius-xl);
	overflow: hidden;
}

[data-umm-scheme="dark"] .umm-hero {
	border-color: rgba(var(--umm-gold-rgb), 0.24);
	background: var(--umm-hero-bg, linear-gradient(135deg, #100f0c 0%, #1a1712 100%));
}

.umm-hero__slides {
	position: relative;
	display: grid;
}

.umm-hero__slide {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: clamp(1rem, 3vw, 3rem);
	padding: clamp(1.75rem, 4.5vw, 3.75rem);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.7s var(--umm-ease), visibility 0.7s;
}

.umm-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
}

.umm-hero--compact .umm-hero__slide { min-height: clamp(320px, 40vw, 400px); }
.umm-hero--standard .umm-hero__slide { min-height: clamp(380px, 46vw, 500px); }
.umm-hero--tall .umm-hero__slide { min-height: clamp(440px, 54vw, 610px); }

.umm-hero__text {
	position: relative;
	z-index: 2;
	/* Wide enough that "Quality You Trust, / Everything You Love" stays on two
	   lines at every desktop width. */
	max-width: 37rem;
}

.umm-hero__slide.is-active .umm-hero__text > * {
	animation: umm-hero-in 0.75s var(--umm-ease) both;
}

.umm-hero__slide.is-active .umm-hero__eyebrow { animation-delay: 0.05s; }
.umm-hero__slide.is-active .umm-hero__heading { animation-delay: 0.14s; }
.umm-hero__slide.is-active .umm-hero__lede { animation-delay: 0.24s; }
.umm-hero__slide.is-active .umm-hero__actions { animation-delay: 0.34s; }

@keyframes umm-hero-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.umm-hero__eyebrow {
	margin-bottom: var(--umm-space-4);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--umm-gold-deep);
}

[data-umm-scheme="dark"] .umm-hero__eyebrow {
	color: var(--umm-gold);
}

.umm-hero__heading {
	font-size: clamp(2rem, 4.6vw, 3.4rem);
	line-height: 1.1;
	color: inherit;
}

.umm-hero__heading-line {
	display: block;
}

.umm-hero__accent {
	color: var(--umm-gold);
}

.umm-hero__lede {
	margin-top: var(--umm-space-4);
	max-width: 44ch;
	color: var(--umm-muted);
	font-size: clamp(0.875rem, 1.3vw, 1rem);
	line-height: 1.75;
}

.umm-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--umm-space-4);
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.umm-hero__media {
	position: relative;
	align-self: stretch;
	display: grid;
	place-items: center;
	min-height: 220px;
}

.umm-hero__picture {
	display: block;
	width: 100%;
	height: 100%;
}

.umm-hero__media img {
	width: 100%;
	height: 100%;
	max-height: clamp(280px, 40vw, 460px);
	object-fit: contain;
	object-position: center;
	will-change: transform;
	transition: transform 0.9s var(--umm-ease);
}

.umm-hero__slide.is-active .umm-hero__media img {
	animation: umm-hero-float 7s ease-in-out infinite alternate;
}

@keyframes umm-hero-float {
	from { transform: translateY(0); }
	to { transform: translateY(-10px); }
}

.umm-hero__placeholder {
	display: grid;
	place-items: center;
	gap: var(--umm-space-3);
	width: 100%;
	min-height: 260px;
	border: 1px dashed var(--umm-border-strong);
	border-radius: var(--umm-radius-lg);
	color: var(--umm-muted);
}

.umm-hero__placeholder-link {
	font-size: 0.8125rem;
	color: var(--umm-gold-deep);
	text-decoration: underline;
}

.umm-hero__nav {
	position: absolute;
	top: 50%;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	transform: translateY(-50%);
	background: rgba(var(--umm-bg-rgb), 0.86);
	border: 1px solid var(--umm-border);
	border-radius: var(--umm-radius-pill);
	color: var(--umm-text);
	opacity: 0;
	transition: opacity var(--umm-dur) var(--umm-ease), background-color var(--umm-dur) var(--umm-ease), color var(--umm-dur) var(--umm-ease);
}

.umm-hero__nav--prev { inset-inline-start: 1rem; }
.umm-hero__nav--next { inset-inline-end: 1rem; }

.umm-hero:hover .umm-hero__nav,
.umm-hero__nav:focus-visible {
	opacity: 1;
}

.umm-hero__nav:hover {
	background: var(--umm-gold);
	color: var(--umm-on-gold);
}

.umm-hero__dots {
	position: absolute;
	bottom: clamp(1rem, 2.5vw, 1.75rem);
	inset-inline-end: clamp(1.75rem, 4.5vw, 3.75rem);
	z-index: 4;
	display: flex;
	gap: 0.45rem;
}

.umm-hero--with-trust .umm-hero__dots {
	bottom: calc(clamp(1rem, 2.5vw, 1.75rem) + 74px);
}

.umm-hero__dot {
	width: 8px;
	height: 8px;
	border-radius: var(--umm-radius-pill);
	background: var(--umm-border-strong);
	transition: width var(--umm-dur) var(--umm-ease), background-color var(--umm-dur) var(--umm-ease);
}

.umm-hero__dot.is-active {
	width: 24px;
	background: var(--umm-gold);
}

@media (max-width: 900px) {
	.umm-hero__slide {
		grid-template-columns: minmax(0, 1fr);
		text-align: center;
	}

	.umm-hero__text {
		max-width: none;
		order: 2;
	}

	.umm-hero__lede {
		margin-inline: auto;
	}

	.umm-hero__actions {
		justify-content: center;
	}

	.umm-hero__media {
		order: 1;
		min-height: 0;
	}

	.umm-hero__media img {
		max-height: 240px;
	}

	.umm-hero__dots {
		inset-inline: 0;
		justify-content: center;
	}

	.umm-hero__nav {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * 3. Trust strip
 * ---------------------------------------------------------------------- */

.umm-trust {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 3vw, 3rem);
}

.umm-trust--attached {
	position: relative;
	z-index: 3;
	padding: var(--umm-space-4) clamp(1.75rem, 4.5vw, 3.75rem);
	border-top: 1px solid var(--umm-border);
	background: rgba(var(--umm-bg-rgb), 0.35);
}

.umm-trust--standalone {
	justify-content: space-between;
	padding: var(--umm-space-5);
	background: var(--umm-surface-alt);
	border: 1px solid var(--umm-border);
	border-radius: var(--umm-radius-lg);
}

.umm-trust__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 1 1 200px;
}

.umm-trust__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border: 1px solid var(--umm-border-strong);
	border-radius: var(--umm-radius-pill);
	color: var(--umm-gold);
}

.umm-trust__text {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
	min-width: 0;
}

.umm-trust__title {
	font-size: 0.8125rem;
	font-weight: 600;
}

.umm-trust__sub {
	font-size: 0.75rem;
	color: var(--umm-muted);
}

@media (max-width: 640px) {
	.umm-trust {
		gap: var(--umm-space-4);
	}

	.umm-trust__item {
		flex-basis: 100%;
	}
}

/* -------------------------------------------------------------------------
 * 4. Category rail
 * ---------------------------------------------------------------------- */

.umm-cats {
	--umm-cat-size: clamp(84px, 9vw, 118px);
}

.umm-cats__item {
	/* The gap supplies the spacing; padding here costs a whole tile per row. */
	width: var(--umm-cat-size);
}

.umm-cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	text-align: center;
}

.umm-cat__media {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--umm-cat-size);
	height: var(--umm-cat-size);
	border-radius: var(--umm-radius-pill);
	overflow: hidden;
	background: var(--umm-image-bg);
	border: 1px solid var(--umm-border);
	transition: border-color var(--umm-dur) var(--umm-ease), box-shadow var(--umm-dur) var(--umm-ease), transform var(--umm-dur) var(--umm-ease);
}

.umm-cat__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--umm-ease);
}

.umm-cat:hover .umm-cat__media {
	border-color: var(--umm-gold);
	box-shadow: 0 0 0 3px rgba(var(--umm-gold-rgb), 0.14);
	transform: translateY(-3px);
}

.umm-cat:hover .umm-cat__media img {
	transform: scale(1.07);
}

.umm-cat__media--more {
	background: var(--umm-surface-alt);
}

.umm-cat__dots {
	display: flex;
	gap: 5px;
}

.umm-cat__dots span {
	width: 7px;
	height: 7px;
	border-radius: var(--umm-radius-pill);
	background: var(--umm-muted);
}

.umm-cat__name {
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	transition: color var(--umm-dur) var(--umm-ease);
}

.umm-cat:hover .umm-cat__name {
	color: var(--umm-gold-deep);
}

.umm-cat__sub {
	font-size: 0.6875rem;
	color: var(--umm-muted);
	line-height: 1.3;
}

/* -------------------------------------------------------------------------
 * 5. Brand story
 * ---------------------------------------------------------------------- */

.umm-story {
	display: grid;
	grid-template-columns: 0.9fr 1fr 1.4fr;
	align-items: stretch;
	background: #0e0d0b;
	color: #f3eee5;
	border: 1px solid rgba(var(--umm-gold-rgb), 0.28);
	border-radius: var(--umm-radius-xl);
	overflow: hidden;
}

.umm-story:not(.umm-story--has-image) {
	grid-template-columns: 1fr 1.4fr;
}

.umm-story__media {
	position: relative;
	min-height: 220px;
	background: #16140f;
}

.umm-story__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.9;
}

.umm-story__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(14, 13, 11, 0) 55%, rgba(14, 13, 11, 0.95) 100%);
}

.umm-story__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--umm-space-3);
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

.umm-story__title {
	font-family: var(--umm-font-script);
	font-size: clamp(2rem, 4vw, 3.125rem);
	font-weight: 400;
	line-height: 1.1;
	color: var(--umm-gold);
}

.umm-story__text {
	max-width: 30ch;
	font-size: 0.875rem;
	line-height: 1.75;
	color: #b9b0a2;
}

.umm-story__cta {
	align-self: flex-start;
	margin-top: var(--umm-space-2);
}

.umm-story__features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	align-items: center;
	border-inline-start: 1px solid rgba(var(--umm-gold-rgb), 0.2);
}

.umm-story__feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	padding: clamp(1.25rem, 2.5vw, 2rem) 0.75rem;
	text-align: center;
}

.umm-story__feature + .umm-story__feature {
	border-inline-start: 1px solid rgba(var(--umm-gold-rgb), 0.16);
}

.umm-story__feature-icon {
	color: var(--umm-gold);
	margin-bottom: 0.2rem;
}

.umm-story__feature-title {
	font-size: 0.8125rem;
	font-weight: 600;
}

.umm-story__feature-text {
	font-size: 0.6875rem;
	color: #a09585;
}

@media (max-width: 1024px) {
	.umm-story,
	.umm-story:not(.umm-story--has-image) {
		grid-template-columns: minmax(0, 1fr);
	}

	.umm-story__media {
		min-height: 200px;
	}

	.umm-story__media::after {
		background: linear-gradient(180deg, rgba(14, 13, 11, 0) 40%, rgba(14, 13, 11, 0.95) 100%);
	}

	.umm-story__features {
		border-inline-start: 0;
		border-top: 1px solid rgba(var(--umm-gold-rgb), 0.2);
	}

	.umm-story__feature + .umm-story__feature {
		border-inline-start: 0;
	}
}

/* -------------------------------------------------------------------------
 * 6. Why shop with us
 * ---------------------------------------------------------------------- */

.umm-why {
	display: grid;
	grid-template-columns: repeat(var(--umm-why-cols, 5), minmax(0, 1fr));
	gap: clamp(1rem, 2.5vw, 2rem);
}

.umm-why__item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.umm-why__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border: 1px solid var(--umm-border);
	border-radius: var(--umm-radius-pill);
	color: var(--umm-gold);
	transition: border-color var(--umm-dur) var(--umm-ease), transform var(--umm-dur) var(--umm-ease);
}

.umm-why__item:hover .umm-why__icon {
	border-color: var(--umm-gold);
	transform: translateY(-2px);
}

.umm-why__text {
	display: flex;
	flex-direction: column;
	line-height: 1.4;
}

.umm-why__title {
	font-size: 0.875rem;
	font-weight: 600;
}

.umm-why__sub {
	font-size: 0.75rem;
	color: var(--umm-muted);
}

@media (max-width: 1080px) {
	.umm-why {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.umm-why {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 460px) {
	.umm-why {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * 7. Newsletter
 * ---------------------------------------------------------------------- */

.umm-newsletter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	background: var(--umm-surface-alt);
	border: 1px solid var(--umm-border);
	border-radius: var(--umm-radius-lg);
}

[data-umm-scheme="dark"] .umm-newsletter {
	border-color: rgba(var(--umm-gold-rgb), 0.24);
}

.umm-newsletter__intro {
	display: flex;
	align-items: center;
	gap: var(--umm-space-4);
	flex: 1 1 320px;
}

.umm-newsletter__icon {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	flex-shrink: 0;
	border: 1px solid var(--umm-border-strong);
	border-radius: var(--umm-radius-md);
	color: var(--umm-gold);
}

.umm-newsletter__title {
	font-size: clamp(1.125rem, 2vw, 1.375rem);
}

.umm-newsletter__text {
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	color: var(--umm-muted);
}

.umm-newsletter__form {
	flex: 1 1 380px;
	max-width: 520px;
}

.umm-subscribe {
	display: flex;
	gap: 0.6rem;
}

.umm-subscribe__input {
	flex: 1;
	min-width: 0;
	border-radius: var(--umm-radius-md);
}

.umm-subscribe__btn {
	flex-shrink: 0;
	border-radius: var(--umm-radius-md);
	padding-inline: 1.6rem;
}

.umm-newsletter__note {
	margin-top: 0.6rem;
	font-size: 0.75rem;
	color: var(--umm-muted);
}

/* Style whatever a newsletter plugin renders. */
.umm-newsletter__form input[type="email"],
.umm-newsletter__form input[type="text"] {
	border-radius: var(--umm-radius-md);
}

.umm-newsletter__form input[type="submit"],
.umm-newsletter__form button[type="submit"] {
	padding: 0.7rem 1.6rem;
	background: var(--umm-gold);
	border: 1px solid var(--umm-gold);
	border-radius: var(--umm-radius-md);
	color: var(--umm-on-gold);
	font-weight: 600;
	cursor: pointer;
}

@media (max-width: 640px) {
	.umm-subscribe {
		flex-direction: column;
	}
}

/* -------------------------------------------------------------------------
 * 8. Countdown
 * ---------------------------------------------------------------------- */

.umm-countdown {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.umm-countdown__label {
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--umm-muted);
}

.umm-countdown__units {
	display: flex;
	gap: 0.5rem;
}

.umm-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	min-width: 62px;
	padding: 0.65rem 0.5rem;
	background: var(--umm-invert-bg);
	color: var(--umm-invert-text);
	border-radius: var(--umm-radius-md);
}

.umm-countdown__value {
	font-family: var(--umm-font-display);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--umm-gold);
}

.umm-countdown__unit-label {
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.75;
}

.umm-countdown.is-ended .umm-countdown__units {
	opacity: 0.5;
}

/* -------------------------------------------------------------------------
 * 9. Deals page
 * ---------------------------------------------------------------------- */

.umm-page-header--deals {
	display: grid;
	gap: var(--umm-space-4);
}

.umm-deals__countdown {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--umm-space-4);
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--umm-surface-alt);
	border: 1px solid var(--umm-border);
	border-radius: var(--umm-radius-lg);
}

.umm-deals__countdown-title {
	font-size: clamp(1.25rem, 2.4vw, 1.625rem);
}

.umm-deals__countdown-text {
	margin-top: 0.3rem;
	color: var(--umm-muted);
	font-size: 0.875rem;
}

.umm-deal-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: center;
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--umm-surface);
	border: 1px solid var(--umm-border);
	border-radius: var(--umm-radius-lg);
}

.umm-deal-hero__media {
	position: relative;
	display: block;
	border-radius: var(--umm-radius-md);
	overflow: hidden;
	background: var(--umm-image-bg);
}

.umm-deal-hero__media img {
	width: 100%;
	height: auto;
	transition: transform 0.7s var(--umm-ease);
}

.umm-deal-hero__media:hover img {
	transform: scale(1.04);
}

.umm-deal-hero__badge {
	position: absolute;
	top: var(--umm-space-3);
	inset-inline-start: var(--umm-space-3);
	font-size: 0.8125rem;
	padding: 0.4rem 0.75rem;
}

.umm-deal-hero__body {
	display: grid;
	gap: var(--umm-space-3);
	align-content: start;
}

.umm-deal-hero__title {
	font-size: clamp(1.375rem, 3vw, 2rem);
}

.umm-deal-hero__price {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--umm-gold-deep);
}

.umm-deal-hero__price del {
	color: var(--umm-muted);
	font-weight: 400;
	font-size: 0.9375rem;
	margin-inline-end: 0.5rem;
}

.umm-deal-hero__excerpt {
	color: var(--umm-muted);
	font-size: 0.875rem;
}

.umm-deal-hero__body .umm-btn {
	justify-self: start;
	margin-top: var(--umm-space-2);
}

@media (max-width: 860px) {
	.umm-deal-hero {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * 10. New arrivals toolbar
 * ---------------------------------------------------------------------- */

.umm-arrivals__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--umm-space-4);
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
	padding-bottom: var(--umm-space-4);
	border-bottom: 1px solid var(--umm-border);
}

.umm-arrivals__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* -------------------------------------------------------------------------
 * 11. Brands page
 * ---------------------------------------------------------------------- */

.umm-brands__index {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.umm-brands__group + .umm-brands__group {
	margin-top: clamp(2rem, 4vw, 3rem);
}

.umm-brands__letter {
	margin-bottom: var(--umm-space-4);
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--umm-border);
	font-size: 1.25rem;
	color: var(--umm-gold-deep);
}

.umm-brands__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
	gap: clamp(0.75rem, 2vw, 1.25rem);
}

.umm-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding: var(--umm-space-4);
	background: var(--umm-surface);
	border: 1px solid var(--umm-border);
	border-radius: var(--umm-radius-lg);
	text-align: center;
	transition: border-color var(--umm-dur) var(--umm-ease), transform var(--umm-dur) var(--umm-ease), box-shadow var(--umm-dur) var(--umm-ease);
}

.umm-brand:hover {
	border-color: var(--umm-gold);
	transform: translateY(-3px);
	box-shadow: var(--umm-shadow-md);
}

.umm-brand__media {
	display: grid;
	place-items: center;
	width: 100%;
	height: 72px;
	margin-bottom: 0.35rem;
}

.umm-brand__media img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
}

.umm-brand__initial {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: var(--umm-radius-pill);
	background: var(--umm-surface-alt);
	color: var(--umm-gold-deep);
	font-family: var(--umm-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	text-transform: uppercase;
}

.umm-brand__name {
	font-size: 0.875rem;
	font-weight: 600;
}

.umm-brand__count {
	font-size: 0.6875rem;
	color: var(--umm-muted);
}

/* -------------------------------------------------------------------------
 * 12. Contact page
 * ---------------------------------------------------------------------- */

.umm-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

.umm-contact__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--umm-space-4);
}

.umm-contact-card {
	display: grid;
	gap: 0.5rem;
	align-content: start;
	padding: var(--umm-space-5);
	background: var(--umm-surface);
	border: 1px solid var(--umm-border);
	border-radius: var(--umm-radius-lg);
}

.umm-contact-card__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 0.35rem;
	border: 1px solid var(--umm-border);
	border-radius: var(--umm-radius-pill);
	color: var(--umm-gold);
}

.umm-contact-card__title {
	font-size: 1rem;
}

.umm-contact-card__text {
	font-size: 0.875rem;
	color: var(--umm-muted);
	line-height: 1.7;
}

.umm-contact-card__text a:hover {
	color: var(--umm-gold-deep);
}

.umm-contact-card__meta {
	font-size: 0.75rem;
	color: var(--umm-muted);
}

.umm-contact-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--umm-gold-deep);
}

.umm-contact-card .umm-btn {
	justify-self: start;
	margin-top: var(--umm-space-2);
}

.umm-contact__form {
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--umm-surface-alt);
	border: 1px solid var(--umm-border);
	border-radius: var(--umm-radius-lg);
}

@media (max-width: 900px) {
	.umm-contact__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * 13. Brands row
 * ---------------------------------------------------------------------- */

.umm-section--brands .umm-brands {
	position: relative;
	padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
}

/* Hairline gold rules above and below turn the strip into a framed band
   without adding another boxed card to a page that already has several. */
.umm-brands::before,
.umm-brands::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(var(--umm-gold-rgb), 0.45) 18%,
		rgba(var(--umm-gold-rgb), 0.45) 82%,
		transparent
	);
}

.umm-brands::before { top: 0; }
.umm-brands::after { bottom: 0; }

.umm-brands .umm-section__header {
	margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.umm-brands__marquee {
	overflow: hidden;
	/* Fade the ends so tiles slide out of view rather than being cut off. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.umm-brands__track {
	--umm-brand-gap: clamp(0.75rem, 1.6vw, 1.25rem);
	display: flex;
	align-items: stretch;
	gap: var(--umm-brand-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.umm-brands__track--marquee {
	width: max-content;
	/* The two halves must tile exactly. Flex gap only sits *between* items, so
	   a track of 2n tiles is 2n tiles + (2n-1) gaps wide and -50% lands half a
	   gap short, jumping once per loop. The trailing pad restores the missing
	   gap so the seam is invisible. */
	padding-inline-end: var(--umm-brand-gap);
	animation: umm-brand-drift 46s linear infinite;
}

.umm-brands__marquee:hover .umm-brands__track--marquee,
.umm-brands__marquee:focus-within .umm-brands__track--marquee {
	animation-play-state: paused;
}

@keyframes umm-brand-drift {
	from { transform: translateX(0); }
	/* The track holds two identical halves, so -50% is one seamless loop. */
	to { transform: translateX(-50%); }
}

.umm-brands__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr));
	gap: clamp(0.75rem, 1.6vw, 1.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.umm-brands__item {
	flex: 0 0 auto;
}

.umm-brands__track .umm-brands__item {
	width: clamp(148px, 15vw, 190px);
}

.umm-brand-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 100%;
	min-height: 124px;
	padding: 1.15rem 1rem;
	background: var(--umm-surface);
	border: 1px solid var(--umm-border);
	border-radius: var(--umm-radius-lg);
	text-align: center;
	transition: border-color var(--umm-dur) var(--umm-ease), transform var(--umm-dur) var(--umm-ease),
		box-shadow var(--umm-dur) var(--umm-ease), background-color var(--umm-dur) var(--umm-ease);
}

.umm-brand-tile:hover {
	border-color: rgba(var(--umm-gold-rgb), 0.6);
	transform: translateY(-3px);
	box-shadow: var(--umm-shadow-md);
}

[data-umm-scheme="dark"] .umm-brand-tile:hover {
	box-shadow: 0 0 0 1px rgba(var(--umm-gold-rgb), 0.3), var(--umm-shadow-md);
}

.umm-brand-tile__media {
	display: grid;
	place-items: center;
	width: 100%;
	height: 46px;
}

.umm-brand-tile__media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	object-fit: contain;
	transition: filter 0.4s var(--umm-ease), opacity 0.4s var(--umm-ease);
}

/* A row of mixed logos fights itself; muting them until hover keeps the
   band calm and makes the hovered brand the only thing in colour. */
.umm-brands--mono .umm-brand-tile__media img {
	filter: grayscale(1);
	opacity: 0.62;
}

.umm-brands--mono .umm-brand-tile:hover .umm-brand-tile__media img {
	filter: none;
	opacity: 1;
}

.umm-brand-tile__monogram {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(var(--umm-gold-rgb), 0.4);
	border-radius: var(--umm-radius-pill);
	font-family: var(--umm-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--umm-gold-deep);
	transition: background-color var(--umm-dur) var(--umm-ease), color var(--umm-dur) var(--umm-ease), border-color var(--umm-dur) var(--umm-ease);
}

[data-umm-scheme="dark"] .umm-brand-tile__monogram {
	color: var(--umm-gold);
}

.umm-brand-tile:hover .umm-brand-tile__monogram {
	background: var(--umm-gold);
	border-color: var(--umm-gold);
	color: var(--umm-on-gold);
}

.umm-brand-tile__name {
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--umm-text);
	transition: color var(--umm-dur) var(--umm-ease);
}

.umm-brand-tile:hover .umm-brand-tile__name {
	color: var(--umm-gold-deep);
}

[data-umm-scheme="dark"] .umm-brand-tile:hover .umm-brand-tile__name {
	color: var(--umm-gold);
}

.umm-brand-tile__count {
	font-size: 0.6875rem;
	color: var(--umm-muted);
}

@media (prefers-reduced-motion: reduce) {
	/* No drift; the row becomes an ordinary horizontal scroller instead. */
	.umm-brands__track--marquee {
		animation: none;
		width: auto;
	}

	.umm-brands__marquee {
		overflow-x: auto;
	}

	.umm-brands__track--marquee .umm-brands__item[aria-hidden="true"] {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * 14. Ambient depth
 * ---------------------------------------------------------------------- */

/* In dark mode a flat black hero looks unlit. A very soft gold wash behind the
   product composition gives the card the feel of a display window. */
[data-umm-scheme="dark"] .umm-hero::before {
	content: "";
	position: absolute;
	top: -30%;
	inset-inline-end: -10%;
	width: 60%;
	height: 130%;
	background: radial-gradient(
		ellipse at center,
		rgba(var(--umm-gold-rgb), 0.13),
		transparent 62%
	);
	pointer-events: none;
	z-index: 0;
}

[data-umm-scheme="dark"] .umm-hero__slides,
[data-umm-scheme="dark"] .umm-hero__dots,
[data-umm-scheme="dark"] .umm-trust--attached {
	position: relative;
	z-index: 1;
}

/* The dark mockup carries a fine dot field at the end of the newsletter card;
   it keeps a wide, mostly-empty band from feeling unfinished. */
.umm-newsletter {
	position: relative;
	overflow: hidden;
}

.umm-newsletter::after {
	content: "";
	position: absolute;
	inset-inline-end: -40px;
	top: 50%;
	width: 190px;
	height: 190px;
	transform: translateY(-50%);
	background-image: radial-gradient(rgba(var(--umm-gold-rgb), 0.5) 1.4px, transparent 1.4px);
	background-size: 13px 13px;
	-webkit-mask-image: radial-gradient(ellipse at 100% 50%, #000, transparent 72%);
	mask-image: radial-gradient(ellipse at 100% 50%, #000, transparent 72%);
	opacity: 0.5;
	pointer-events: none;
}

.umm-newsletter__intro,
.umm-newsletter__form {
	position: relative;
	z-index: 1;
}

@media (max-width: 780px) {
	.umm-newsletter::after {
		display: none;
	}
}

/* The story band gets the same treatment from the opposite corner. */
.umm-story {
	position: relative;
}

.umm-story__features {
	position: relative;
}

.umm-story__features::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse at 70% 0%,
		rgba(var(--umm-gold-rgb), 0.1),
		transparent 65%
	);
	pointer-events: none;
}

/* -------------------------------------------------------------------------
 * 15. Hero slide transitions
 * ---------------------------------------------------------------------- */

/* Fade is the default and lives in section 2. These two are alternatives the
   owner picks in the Customizer; each slide still occupies the same grid cell,
   so nothing reflows as they change. */

.umm-hero--slide .umm-hero__slide {
	transform: translateX(6%);
	transition: opacity 0.6s var(--umm-ease-entrance), transform 0.7s var(--umm-ease-entrance), visibility 0.7s;
}

.umm-hero--slide .umm-hero__slide.is-active {
	transform: none;
}

.umm-hero--zoom .umm-hero__slide {
	transform: scale(1.04);
	transition: opacity 0.7s var(--umm-ease-entrance), transform 0.9s var(--umm-ease-entrance), visibility 0.9s;
}

.umm-hero--zoom .umm-hero__slide.is-active {
	transform: none;
}

/* The hero picture drifts with the scroll; the image inside keeps its own
   float, so the two never write to the same transform. */
.umm-hero__picture {
	transform: translate3d(0, var(--umm-parallax-y, 0), 0);
	will-change: transform;
}

.umm-motion-off .umm-hero__slide.is-active .umm-hero__media img,
.umm-motion-subtle .umm-hero__slide.is-active .umm-hero__media img {
	animation: none;
}

.umm-motion-off .umm-hero__slide.is-active .umm-hero__text > * {
	animation: none;
}

/* -------------------------------------------------------------------------
 * 16. Category tile motion
 * ---------------------------------------------------------------------- */

.umm-cat__media::after {
	content: "";
	position: absolute;
	inset: -3px;
	border: 1px solid var(--umm-gold);
	border-radius: inherit;
	opacity: 0;
	transform: scale(0.88);
	transition: opacity var(--umm-dur) var(--umm-ease), transform var(--umm-dur) var(--umm-ease);
	pointer-events: none;
}

.umm-cat:hover .umm-cat__media::after,
.umm-cat:focus-visible .umm-cat__media::after {
	opacity: 1;
	transform: scale(1);
}

.umm-cat__name,
.umm-cat__sub {
	transition: transform var(--umm-dur) var(--umm-ease), color var(--umm-dur) var(--umm-ease);
}

.umm-cat:hover .umm-cat__name {
	transform: translateY(-1px);
}

.umm-motion-off .umm-cat__media::after {
	transition: none;
}

/* -------------------------------------------------------------------------
 * 17. Hero artwork: light / dark pair, and the full-bleed layout
 * ---------------------------------------------------------------------- */

/* Only the artwork matching the active scheme is shown. Both are in the DOM
   because the scheme is a visitor toggle, not just an OS preference — a
   <picture> media query cannot follow a button. */
.umm-hero__picture--dark {
	display: none;
}

[data-umm-scheme="dark"] .umm-hero__picture--light {
	display: none;
}

[data-umm-scheme="dark"] .umm-hero__picture--dark {
	display: block;
}

/* --------------------------------------------------------- Full-bleed slide */

.umm-hero__slide--background {
	position: relative;
	display: block;
	padding: 0;
}

.umm-hero__slide--background .umm-hero__media {
	position: absolute;
	inset: 0;
	min-height: 0;
	display: block;
	z-index: 0;
}

.umm-hero__slide--background .umm-hero__picture,
.umm-hero__slide--background .umm-hero__media img {
	width: 100%;
	height: 100%;
	max-height: none;
}

.umm-hero__slide--background .umm-hero__media img {
	/* The composition sits on the right of the artwork, so hold that edge as
	   the card gets narrower and let the empty left side crop instead. */
	object-fit: cover;
	object-position: right center;
}

.umm-hero__slide--background .umm-hero__text {
	position: relative;
	z-index: 2;
	/* Wide enough to hold "Quality You Trust, / Everything You Love" on two
	   lines, narrow enough to stay clear of the composition on the artwork's
	   right-hand side. Tighter padding than the split layout buys the width. */
	max-width: min(54%, 40rem);
	padding: clamp(1.5rem, 3.4vw, 3rem);
}

/* A scrim only on the text side, so the artwork stays untouched where it
   matters and the headline keeps its contrast at every width. */
.umm-hero__slide--background::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgba(var(--umm-bg-rgb), 0.92) 0%,
		rgba(var(--umm-bg-rgb), 0.7) 34%,
		rgba(var(--umm-bg-rgb), 0) 62%
	);
	pointer-events: none;
}

.umm-hero--with-trust .umm-hero__slide--background {
	padding-bottom: 0;
}

@media (max-width: 900px) {
	/* Stacked artwork would crop to nothing useful, so the background slide
	   becomes a text panel over a dimmed full-width image. */
	.umm-hero__slide--background {
		display: flex;
		align-items: flex-end;
		min-height: clamp(420px, 78vw, 560px);
	}

	.umm-hero__slide--background .umm-hero__text {
		max-width: none;
		width: 100%;
		text-align: start;
	}

	.umm-hero__slide--background .umm-hero__media img {
		object-position: center right;
	}

	.umm-hero__slide--background::before {
		background: linear-gradient(
			0deg,
			rgba(var(--umm-bg-rgb), 0.95) 18%,
			rgba(var(--umm-bg-rgb), 0.75) 46%,
			rgba(var(--umm-bg-rgb), 0.1) 82%
		);
	}

	.umm-hero__slide--background .umm-hero__lede {
		margin-inline: 0;
	}

	.umm-hero__slide--background .umm-hero__actions {
		justify-content: flex-start;
	}
}