/* Myhadya premium home: quiet, generous, serif display + the theme's sans for text. */
/* Colour and type tokens live in chrome.css, which loads on every page. */

/* Woodmart wraps page content in .container/.row; let the page fill the wrapper (which already
   sits right of the category rail) so every left edge lines up with the header and footer */
.mh-home .main-page-wrapper { padding-top: 0; background: var(--mh-bg); }
.mh-home .main-page-wrapper > .container { max-width: none; padding: 0; }
.mh-home .content-layout-wrapper { margin: 0; }
.mh-home .site-content { padding: 0; flex: 1 1 100%; max-width: 100%; }
.mh-home .whb-top-bar { display: none; }
.mh {
	background: var(--mh-bg);
	color: var(--mh-ink);
	-webkit-font-smoothing: antialiased;
}
.mh *, .mh *::before, .mh *::after { box-sizing: border-box; }
.mh img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mh a { color: inherit; text-decoration: none; }

/* type */
.mh-eyebrow {
	margin: 0 0 20px;
	font-size: 12px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--mh-gold-ink);
}
.mh-display {
	margin: 0;
	font-family: var(--mh-serif);
	font-weight: 500;
	font-size: clamp(40px, 4.4vw, 66px);
	line-height: 1.02;
	letter-spacing: -.01em;
	color: inherit;
}
.mh-display--sm { font-size: clamp(32px, 3.2vw, 50px); }
.mh-lead {
	max-width: 30em;
	margin: 24px 0 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--mh-muted);
}
.mh-title {
	margin: 0;
	font-family: var(--mh-serif);
	font-weight: 500;
	font-size: clamp(28px, 2.3vw, 36px);
	line-height: 1.1;
	color: var(--mh-ink);
}

/* actions */
.mh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 40px; }
.mh .mh-btn {
	display: inline-block;
	padding: 17px 34px;
	background: var(--mh-deep);
	color: var(--mh-on-deep);
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: background .25s ease, color .25s ease;
}
.mh .mh-btn:hover { background: var(--mh-gold); color: var(--mh-deep); }
.mh .mh-btn--light { background: var(--mh-gold); color: var(--mh-deep); }
.mh .mh-btn--light:hover { background: var(--mh-on-deep); color: var(--mh-deep); }
.mh .mh-link {
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding-bottom: 4px;
	border-bottom: 1px solid currentColor;
	transition: color .2s ease;
}
.mh .mh-link:hover { color: var(--mh-gold-ink); }
.mh a:focus-visible { outline: 2px solid var(--mh-gold); outline-offset: 4px; }

/* hero slider: stacked slides that crossfade; text rises once per slide, photo settles slowly */
/* hero and feature sit in the same centred container as every other block */
.mh-hero { position: relative; display: grid; background: var(--mh-surface); } /* full bleed; its text keeps the page edge */
.mh-feature { margin-left: var(--mh-pad) !important; margin-right: var(--mh-pad) !important; }
.mh-slide {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: min(calc(100vh - 150px), 720px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .9s ease, visibility 0s linear .9s;
}
.mh-slide.is-active { opacity: 1; visibility: visible; transition: opacity .9s ease; }
.mh-slide__text { align-self: center; padding: 64px clamp(24px, 4vw, 64px) 140px var(--mh-pad); }
.mh-slide__text > * { opacity: 0; transform: translateY(14px); transition: opacity .7s ease .3s, transform .8s cubic-bezier(.2, .7, .2, 1) .3s; }
.mh-slide.is-active .mh-slide__text > * { opacity: 1; transform: none; }
.mh-slide__media { position: relative; overflow: hidden; background: var(--mh-surface); }
/* taller than the frame so the "myhadya.in" watermark at the photo's foot is cropped off */
/* absolute so the square photo never sets the banner height; the slide does */
.mh-slide__media img { position: absolute; top: 0; left: 0; height: 114%; object-position: 50% 0; transform: scale(1.06); transition: transform 7s cubic-bezier(.2, .7, .2, 1); }
.mh-slide.is-active .mh-slide__media img { transform: scale(1); }

.mh-hero__ui {
	position: absolute;
	z-index: 2;
	left: var(--mh-pad);
	bottom: 48px;
	width: calc(50% - var(--mh-pad) - clamp(24px, 4vw, 64px));
	display: flex;
	align-items: center;
	gap: 18px;
}
.mh-count { font-family: var(--mh-serif); font-size: 19px; letter-spacing: .08em; color: var(--mh-ink); white-space: nowrap; }
.mh-count__total { color: var(--mh-muted); }
.mh-progress { position: relative; flex: 1; height: 1px; background: var(--mh-line); overflow: hidden; }
.mh-progress span { position: absolute; inset: 0; background: var(--mh-gold-ink); transform-origin: left; transform: scaleX(0); animation: mh-progress 6s linear forwards; }
.mh-hero.is-paused .mh-progress span { animation-play-state: paused; }
@keyframes mh-progress { to { transform: scaleX(1); } }
.mh .mh-ctrl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--mh-line);
	border-radius: 50%;
	background: transparent;
	color: var(--mh-ink);
	cursor: pointer;
	transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.mh .mh-ctrl:hover { background: var(--mh-deep); border-color: var(--mh-deep); color: var(--mh-gold); }
.mh .mh-ctrl:focus-visible { outline: 2px solid var(--mh-gold-ink); outline-offset: 3px; }
.mh-ctrl svg { width: 16px; height: 16px; }
.mh-ctrl .mh-i-play, .mh-hero.is-stopped .mh-ctrl .mh-i-pause { display: none; }
.mh-hero.is-stopped .mh-ctrl .mh-i-play { display: block; }

/* sections */
.mh-section { padding: clamp(64px, 7vw, 112px) var(--mh-pad) 0; }
.mh-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 44px;
}

/* categories */
.mh-cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.mh-cat__img { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--mh-surface); }
.mh-cat__img img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.mh-cat:hover .mh-cat__img img { transform: scale(1.04); }
.mh-cat__name { display: block; margin-top: 14px; font-family: var(--mh-serif); font-size: 20px; }

/* product cards */
.mh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 28px; }
.mh-card { display: flex; flex-direction: column; }
.mh-card__link { display: block; }
.mh-card__img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #fff; }
.mh-card__img img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.mh-card__link:hover .mh-card__img img { transform: scale(1.04); }
.mh-card__name { display: block; margin-top: 16px; font-size: 14px; line-height: 1.45; }
.mh-card__price { display: block; margin: 6px 0 16px; font-size: 14px; color: var(--mh-muted); }
.mh-card__price ins { text-decoration: none; color: var(--mh-ink); }
.mh-card__price del { margin-right: 8px; opacity: .6; }
.mh-card__price .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mh .mh-card__buy {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--mh-deep);
	background: var(--mh-deep);
	color: var(--mh-on-deep);
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.mh .mh-card__buy:hover { background: var(--mh-gold); border-color: var(--mh-gold); color: var(--mh-deep); }
.mh .mh-card__buy--options { background: transparent; color: var(--mh-deep); }
.mh .mh-card__buy--options:hover { background: var(--mh-deep); border-color: var(--mh-deep); color: var(--mh-on-deep); }

/* feature */
.mh-feature {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: clamp(64px, 7vw, 112px);
	background: var(--mh-deep);
	color: #f3efe6;
}
.mh-feature__media { min-height: 460px; max-height: 620px; }
.mh-feature__text { align-self: center; padding: 64px clamp(24px, 4vw, 64px); }
.mh-feature .mh-lead { color: var(--mh-on-deep-muted); margin-bottom: 40px; }
.mh-feature .mh-eyebrow { color: var(--mh-gold); }


@media (max-width: 1024px) {
	.mh-cats { grid-template-columns: repeat(3, 1fr); }
	.mh-grid { grid-template-columns: repeat(3, 1fr); }

}
@media (max-width: 900px) {
	.mh-slide, .mh-feature { grid-template-columns: 1fr; }
	.mh-slide { min-height: 0; }
	.mh-slide__media { order: -1; aspect-ratio: 4 / 5; } /* portrait banner on phones */
	.mh-slide__media img { top: -18px; } /* trims the white frame on the wall-art photo */
	.mh-slide__text { padding: 36px var(--mh-pad) 108px; }
	.mh-hero__ui { bottom: 36px; width: calc(100% - 2 * var(--mh-pad)); }
	.mh-feature__media { min-height: 0; aspect-ratio: 1; }
	.mh-feature__text { padding: 48px 24px 56px; }
}
@media (max-width: 700px) {
	.mh-cats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.mh-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 16px; }
	.mh-head { margin-bottom: 28px; }
	.mh-lead { font-size: 16px; }
	.mh-card__name, .mh-card__price { font-size: 14px; }
	.mh .mh-card__buy { font-size: 11px; letter-spacing: .1em; white-space: nowrap; padding: 0 8px; }
	.mh-cat__name { font-size: 19px; }

}
@media (prefers-reduced-motion: reduce) {
	.mh *, .mh .mh-slide__text > *, .mh .mh-slide__media img { transition: none !important; transform: none !important; }
	.mh-progress { visibility: hidden; }
}

/* breathing room before the theme footer */
.mh-end { height: clamp(64px, 7vw, 112px); }