/* ══ Heritage Malaysia — Home v2 (index.html) ══ */

:root {
	--hm-green-900: #0b2417;
	--hm-green-800: #10301f;
	--hm-green-700: #163d28;
	--hm-green-600: #1c4a31;
	--hm-gold: #c9a84c;
	--hm-gold-soft: #e3c77e;
	--hm-gold-deep: #9a7426;
	--hm-cream: #f6f0e3;
	--hm-cream-2: #efe6d3;
	--hm-card: #fffaf0;
	--hm-ink: #1a2a20;
	--hm-ink-soft: #5b6a5f;
	--hm-serif: 'Playfair Display', Georgia, serif;
	--hm-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--hm-script: 'Caveat', cursive;
	--hm-gold-grad: linear-gradient(135deg, #b8912f 0%, #e7cc7f 45%, #f6e6b4 55%, #d5b25a 70%, #b8912f 100%);
	--hm-radius: 14px;
	--hm-shadow: 0 10px 28px rgba(20,36,24,0.12);
	--hm-gutter: clamp(1.25rem, 4vw, 4rem);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body.hm-home2 {
	margin: 0;
	font-family: var(--hm-sans);
	color: var(--hm-ink);
	background: var(--hm-cream);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

:where(.hm-home2) img {
	max-width: 100%;
	display: block;
}

:where(.hm-home2) a {
	color: inherit;
	text-decoration: none;
}

:where(.hm-home2) svg {
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hm-home2 .hm-fill {
	fill: currentColor;
	stroke: none;
}
.for-based-left {
	position: relative;
}
.for-leaft-section{
	position: absolute;
	background-image: url(../img/leaf-hm.png);
	background-repeat: no-repeat;
	background-size: 200px;
	left: 0px;
	width: 410px;
	top: 0px;
	pointer-events: none;
	z-index: 70;
	height: 800px;
}
/* .for-leaft-mask::before{
	content: '';
	background-image: url(../img/leaf-hm.png);
	background-repeat: no-repeat;
	width: 400px;
	height: 400px;
	position: absolute;

} */
.hm-home2 .hm-fill-dark {
	fill: var(--hm-green-900);
	stroke: none;
}

.hm-wrap {
	width: calc(100% - 2 * var(--hm-gutter));
	margin: 0 auto;
}

/* ── Shared atoms ── */

.hm-eyebrow {
	display: block;
	margin-bottom: 0.45rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--hm-gold-deep);
}

.hm-eyebrow--light {
	color: var(--hm-gold-soft);
}

.hm-heading {
	margin: 0;
	font-family: var(--hm-serif);
	font-weight: 700;
	font-size: clamp(1.7rem, 3vw, 2.35rem);
	line-height: 1.12;
	color: var(--hm-green-900);
}

.hm-heading--italic {
	font-style: italic;
}

.hm-heading--light {
	color: #fbf6ea;
}

.hm-heading--sm {
	font-size: clamp(1.45rem, 2.4vw, 1.85rem);
}

.hm-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 1.6rem;
}

.hm-section-head--center {
	align-items: center;
}

.hm-section-head__note {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.45;
	color: #3a3c3a;
}

.hm-viewall {
	flex-shrink: 0;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--hm-green-800);
	white-space: nowrap;
	transition: color 0.2s;
}

.hm-viewall:hover {
	color: var(--hm-gold-deep);
}

.hm-viewall--light {
	color: #f3ead6;
}

.hm-viewall--light:hover {
	color: var(--hm-gold-soft);
}

.hm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.9rem 1.6rem;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-position 0.45s ease, transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s;
}

.hm-btn svg {
	font-size: 1.1rem;
}

.hm-btn__arrow {
	font-style: normal;
	font-size: 1.05rem;
	line-height: 1;
	transition: transform 0.2s;
}

.hm-btn:hover .hm-btn__arrow {
	transform: translateX(3px);
}

.hm-btn--gold {
	background: var(--hm-gold-grad);
	background-size: 200% auto;
	background-position: left center;
	color: #24180a;
	box-shadow: 0 6px 18px rgba(185,145,47,0.32);
}

.hm-btn--gold:hover {
	background-position: right center;
	transform: translateY(-1px);
}

.hm-btn--outline {
	border: 1.5px solid var(--hm-gold);
	color: #fbf3df;
	background: rgba(10,30,20,0.35);
}

.hm-btn--outline:hover {
	background: rgba(201,168,76,0.15);
}

.hm-btn--sm {
	padding: 0.65rem 1.25rem;
	font-size: 0.74rem;
}

.hm-cart-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 1.05rem;
	border: 0;
	border-radius: 999px;
	background: var(--hm-green-800);
	color: #fff;
	font-family: var(--hm-sans);
	font-size: 0.74rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s, transform 0.2s;
}

.hm-cart-btn svg {
	font-size: 1rem;
}

.hm-cart-btn:hover {
	background: var(--hm-green-600);
	transform: translateY(-1px);
}

.hm-cart-btn--sm {
	padding: 0.45rem 0.9rem;
	font-size: 0.68rem;
}

.hm-cart-btn--added {
	background: var(--hm-gold-deep);
}

/* Image is set inline (background-image) so the path resolves from the page; the colour shows if the file is missing */
.hm-media {
	background-color: #2c4a35;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.hm-media--snack {
	background-color: #c98a2c;
}

/* ══ Header ══ */

.hm-topbar {
	position: relative;
	background: rgba(9,30,19,0.96);
}

.hm-topbar__inner {
	display: flex;
	align-items: center;
	gap: 2rem;
	width: calc(100% - 2 * var(--hm-gutter));
	height: 76px;
	margin: 0 auto;
}

.hm-topbar__brand {
	position: absolute;
    top: 0;
    left: 0;
    height: 90px;
    width: 30rem;
    padding-left: 5.5rem;
    display: flex;
    align-items: center;
    z-index: 61;
    background:  linear-gradient(
		85deg, #0a1a0e 0%, #0a1a0e 60%, rgba(10, 26, 14, 0) 100%);
}

.hm-topbar__brand img {
	height: 135px;
    width: auto;
    position: relative;
    z-index: 1;
    left: 5%;
    top: 0;
    margin: 1.8rem 0 -1.5rem;
}

.hm-topbar__nav {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 200;
	display: flex;
	align-items: center;
	gap: 3.1rem;
}

.hm-topbar__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0;
	border: 0;
	background: none;
	font-family: var(--hm-sans);
	font-size: 1.05rem;
	font-weight: 500;
	color: #f3ead6;
	cursor: pointer;
	transition: color 0.2s;
}

.hm-topbar__link svg {
	font-size: 0.6rem;
	stroke-width: 2;
}

.hm-topbar__link:hover,
.hm-topbar__link--active {
	color: var(--hm-gold-soft);
}

.hm-topbar__link--active::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	border-radius: 2px;
	background: var(--hm-gold);
}

.hm-topbar__dropdown {
	position: relative;
}

.hm-topbar__menu {
	position: absolute;
	z-index: 200;
	top: calc(100% + 0.9rem);
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	min-width: 190px;
	padding: 0.5rem;
	border-radius: 12px;
	background: var(--hm-cream);
	box-shadow: var(--hm-shadow);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.hm-topbar__menu a {
	display: block;
	padding: 0.6rem 0.85rem;
	border-radius: 8px;
	font-size: 0.86rem;
	color: var(--hm-green-900);
}

.hm-topbar__menu a:hover {
	background: rgba(28,74,49,0.08);
}

.hm-topbar__dropdown:hover .hm-topbar__menu,
.hm-topbar__dropdown.is-open .hm-topbar__menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.hm-topbar__actions {
	display: flex;
	margin-left: auto;
	align-items: center;
	gap: 1.1rem;
}

.hm-topbar__icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 0;
	background: none;
	color: #f3ead6;
	font-size: 1.25rem;
	cursor: pointer;
}

.hm-topbar__basket {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.55rem 0.5rem 1.05rem;
	border-radius: 999px;
	background: var(--hm-gold-grad);
	background-size: 200% auto;
	color: #24180a;
	font-size: 0.86rem;
	font-weight: 600;
	transition: background-position 0.45s;
}

.hm-topbar__basket:hover {
	background-position: right center;
}

.hm-topbar__basket svg {
	font-size: 1.1rem;
}

.hm-topbar__count {
	display: grid;
	place-items: center;
	min-width: 24px;
	height: 24px;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: var(--hm-green-900);
	color: #fff;
	font-size: 0.74rem;
	transition: transform 0.2s;
}

.hm-topbar__count.is-bump {
	transform: scale(1.3);
}

.hm-topbar__burger {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 0.4rem;
	border: 0;
	background: none;
	cursor: pointer;
}

.hm-topbar__burger span {
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: #f3ead6;
}

/* ══ Hero ══ */

.hm-showcase {
	position: relative;
	overflow: hidden;
	color: #fbf6ea;
	background: url(../img/bg-heritage.png) center / cover no-repeat;
	aspect-ratio: 1568 / 687;
}


.hm-showcase::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(6,20,12,0.85) 0%, rgba(6,20,12,0.55) 35%, rgba(6,20,12,0) 65%),
		radial-gradient(ellipse 45% 70% at 72% 55%, rgba(201,168,76,0.16), transparent 70%);
}

.hm-showcase__inner {
	position: static;
	z-index: auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 2rem;
	width: calc(100% - 2 * var(--hm-gutter));
	min-height: 0;
	margin: 0 auto;
	padding: 3.5rem 0;
}

.hm-showcase__copy {
	max-width: 46%;
	position: relative;
	z-index: 72;
}

.hm-showcase__title {
	margin: 0.35rem 0 0.9rem;
	font-family: var(--hm-serif);
	font-style: italic;
	font-weight: 800;
	font-size: clamp(2.6rem, 5.2vw, 4.1rem);
	line-height: 1.02;
	color: #fffaf0;
}

.hm-showcase__title--gold {
	background: var(--hm-gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hm-showcase__lines {
	margin: 0 0 0.6rem;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--hm-gold-soft);
}

.hm-showcase__lead {
	margin: 0 0 1.4rem;
	font-size: 0.98rem;
	line-height: 1.5;
	color: rgba(251,246,234,0.88);
}

.hm-showcase__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 1.4rem;
	margin: 0 0 1.8rem;
	padding: 0;
	list-style: none;
}

.hm-showcase__badges li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.74rem;
	line-height: 1.3;
	color: rgba(251,246,234,0.88);
}

.hm-showcase__badges svg {
	flex-shrink: 0;
	font-size: 1.6rem;
	color: var(--hm-gold);
	stroke-width: 1.5;
}

.hm-showcase__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.hm-showcase__visual {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.hm-showcase__play {
	position: absolute;
	top: 55%;
	left: 70%;
	display: grid;
	place-items: center;
	width: 74px;
	height: 74px;
	border: 2px solid rgba(255,255,255,0.85);
	border-radius: 50%;
	background: rgba(10,24,16,0.45);
	color: #fff;
	font-size: 1.7rem;
	transform: translate(-50%, -50%);
	cursor: pointer;
	pointer-events: auto;
	transition: transform 0.2s, background 0.2s;
}

.hm-showcase__play svg {
	fill: currentColor;
	stroke: none;
	margin-left: 4px;
}

.hm-showcase__play:hover {
	background: rgba(201,168,76,0.85);
	transform: translate(-50%, -50%) scale(1.07);
}

.hm-showcase__watch {
	position: absolute;
	right: 3%;
	bottom: 8%;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 0.9rem 0.55rem 0.55rem;
	border: 0;
	border-radius: 10px;
	background: rgba(8,22,14,0.8);
	color: #fffaf0;
	font-family: var(--hm-sans);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.25;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
	pointer-events: auto;
}

.hm-showcase__watch small {
	font-weight: 500;
	opacity: 0.8;
}

.hm-showcase__watch-icon {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--hm-gold);
	color: var(--hm-green-900);
}

.hm-showcase__watch-icon svg {
	fill: currentColor;
	stroke: none;
	margin-left: 2px;
}

/* ══ Three ways ══ */

.hm-ways {
	padding: 3rem 0 3.2rem;
	background: var(--hm-cream);
}

.hm-ways__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.4rem;
}

.hm-ways-card {
	overflow: hidden;
	border-radius: var(--hm-radius);
	background: var(--hm-card);
	box-shadow: var(--hm-shadow);
	transition: transform 0.25s, box-shadow 0.25s;
}

.hm-ways-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(20,36,24,0.16);
}

.hm-ways-card__media {
	height: 170px;
}

.hm-media--trio {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 0.3rem;
	padding: 0.8rem 1rem 0;
	background: radial-gradient(ellipse at 50% 80%, #6d8a4a 0%, #2e4a2c 70%);
}

.hm-media--trio img {
	width: 30%;
	height: 92%;
	object-fit: contain;
	object-fit: cover;
	border-radius: 8px 8px 0 0;
	box-shadow: 0 -4px 12px rgba(0,0,0,0.25);
}

.hm-ways-card__body {
	padding: 1.1rem 1.25rem 1.3rem;
}

.hm-ways-card__body h3 {
	margin: 0 0 0.3rem;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--hm-green-900);
}

.hm-ways-card__body p {
	margin: 0 0 1rem;
	font-size: 0.86rem;
	line-height: 1.4;
	color: var(--hm-ink-soft);
}

/* ══ Signature drinks ══ */

.hm-sig {
	position: relative;
	padding: 3rem 0 3.4rem;
	background:
		radial-gradient(ellipse 60% 80% at 15% 20%, rgba(46,98,62,0.45), transparent 60%),
		radial-gradient(ellipse 60% 80% at 90% 90%, rgba(46,98,62,0.35), transparent 60%),
		var(--hm-green-800);
}

.hm-sig .hm-eyebrow {
	color: var(--hm-gold-soft);
}

.hm-sig__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.4rem;
}

.hm-sig-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--hm-radius);
	background: var(--hm-card);
	box-shadow: 0 14px 30px rgba(0,0,0,0.3);
	transition: transform 0.25s;
}

.hm-sig-card:hover {
	transform: translateY(-4px);
}

.hm-sig-card__seal {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	z-index: 2;
	display: grid;
	place-items: center;
	align-content: center;
	width: 64px;
	height: 64px;
	border: 2px solid #fff3cf;
	border-radius: 50%;
	background: var(--hm-gold-grad);
	color: #2a1c08;
	font-family: var(--hm-serif);
	font-size: 1.1rem;
	font-weight: 800;
	line-height: 1;
	text-align: center;
	box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

.hm-sig-card__seal small {
	margin-top: 0.15rem;
	font-family: var(--hm-sans);
	font-size: 0.48rem;
	font-weight: 700;
	line-height: 1.15;
}

.hm-sig-card__media {
	height: 230px;
}

.hm-sig-card__body {
	padding: 1.1rem 1.25rem 1.2rem;
}

.hm-sig-card__body h3 {
	margin: 0 0 0.35rem;
	font-size: 1.12rem;
	font-weight: 700;
	color: var(--hm-green-900);
}

.hm-sig-card__body p {
	min-height: 2.6em;
	margin: 0 0 0.9rem;
	font-size: 0.8rem;
	line-height: 1.35;
	color: var(--hm-ink-soft);
}

.hm-sig-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
}

.hm-sig-card__foot strong {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--hm-green-900);
}

/* ══ Heritage Café ══ */

.hm-cafe {
	padding: 3rem 0 1.2rem;
	background: var(--hm-cream);
}

.hm-cafe__tools {
	display: flex;
	align-items: center;
	gap: 1.1rem;
}

.hm-cafe__tabs {
	display: flex;
	gap: 0.4rem;
}

.hm-cafe__tab {
	padding: 0.45rem 1.05rem;
	border: 0;
	border-radius: 999px;
	background: var(--hm-cream-2);
	color: var(--hm-green-900);
	font-family: var(--hm-sans);
	font-size: 0.78rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.hm-cafe__tab:hover {
	background: #e4d9c1;
}

.hm-cafe__tab--active,
.hm-cafe__tab--active:hover {
	background: var(--hm-green-800);
	color: #fff;
}

.hm-cafe__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.4rem;
}

.hm-cafe-card {
	overflow: hidden;
	border-radius: var(--hm-radius);
	background: var(--hm-card);
	box-shadow: var(--hm-shadow);
	animation: hm-fade-up 0.35s ease both;
}

.hm-cafe-card[hidden] {
	display: none;
}

.hm-cafe-card__media {
	height: 250px;
	background-color: #4a3424;
	background-position: center 35%;
}

.hm-cafe-card__body {
	padding: 0.9rem 1.1rem 1.05rem;
}

.hm-cafe-card__body h3 {
	margin: 0 0 0.2rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--hm-green-900);
}

.hm-cafe-card__body p {
	margin: 0 0 0.8rem;
	font-size: 0.78rem;
	color: var(--hm-ink-soft);
}

.hm-cafe-card__foot {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.hm-cafe-card__price {
	font-size: 0.62rem;
	color: var(--hm-ink-soft);
	white-space: nowrap;
}

.hm-cafe-card__price b {
	font-size: 0.78rem;
	color: var(--hm-green-900);
}

.hm-cafe-card__foot .hm-cart-btn {
	margin-left: auto;
}

@keyframes hm-fade-up {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/* ══ Heritage Snacks ══ */

.hm-crunch {
	padding: 2.4rem 0 3rem;
	background: var(--hm-cream);
}

.hm-crunch__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.2rem;
}

.hm-crunch-card {
	overflow: hidden;
	border-radius: var(--hm-radius);
	background: var(--hm-card);
	box-shadow: var(--hm-shadow);
	transition: transform 0.25s;
}

.hm-crunch-card:hover {
	transform: translateY(-4px);
}

.hm-crunch-card__media {
	height: 240px;
}

.hm-crunch-card__body {
	padding: 0.85rem 1rem 1rem;
}

.hm-crunch-card__body h3 {
	margin: 0 0 0.45rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--hm-green-900);
}

.hm-crunch-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.hm-crunch-card__foot strong {
	font-size: 0.95rem;
	color: var(--hm-green-900);
}

/* ══ Promo + testimonials ══ */

.hm-duo {
	padding: 0 0 2.6rem;
	background: var(--hm-cream);
}

.hm-duo__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: 2rem;
	width: calc(100% - 2 * var(--hm-gutter));
	margin: 0 auto;
}

.hm-promo {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.5rem;
	min-height: 220px;
	padding: 1.4rem 1.6rem;
	overflow: hidden;
	border-radius: var(--hm-radius);
	background:
		radial-gradient(ellipse 70% 90% at 40% 60%, rgba(70,120,70,0.55), transparent 70%),
		var(--hm-green-800);
	color: #fffaf0;
}

.hm-promo__script {
	margin: 0;
	font-family: var(--hm-script);
	font-size: 1.9rem;
	line-height: 0.95;
	transform: rotate(-8deg);
}

.hm-promo__cups {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 100%;
}

.hm-promo__cups img {
	width: 33%;
	max-height: 190px;
	object-fit: contain;
	margin: 0 -6%;
	object-fit: cover;
	aspect-ratio: 3 / 4;
	border-radius: 10px;
	border: 2px solid rgba(255,250,240,0.85);
	box-shadow: 0 12px 20px rgba(0,0,0,0.4);
}

.hm-promo__cups img:nth-child(2) {
	position: relative;
	z-index: 1;
	transform: translateY(-6px) scale(1.08);
}

.hm-promo__offer {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.hm-promo__ribbon {
	padding: 0.35rem 1rem;
	border-radius: 4px;
	background: var(--hm-gold-grad);
	color: #2a1c08;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transform: rotate(-3deg);
}

.hm-promo__headline {
	margin: 0.55rem 0 0.2rem;
	font-family: var(--hm-serif);
	font-size: 1.85rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.hm-promo__sub {
	margin: 0 0 0.9rem;
	font-size: 0.95rem;
	color: rgba(255,250,240,0.85);
}

.hm-loved {
	padding-top: 0.4rem;
}

.hm-loved .hm-section-head {
	margin-bottom: 1rem;
}

.hm-loved__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.8rem;
}

.hm-review {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 0.9rem 0.75rem 0.85rem;
	border-radius: 12px;
	background: var(--hm-card);
	box-shadow: 0 6px 16px rgba(20,36,24,0.08);
	text-align: center;
}

.hm-review__avatar {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 0.55rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--hm-green-600), var(--hm-green-900));
	color: var(--hm-gold-soft);
	font-family: var(--hm-serif);
	font-size: 1.1rem;
	font-weight: 700;
}

.hm-review blockquote {
	flex: 1;
	margin: 0 0 0.55rem;
	font-size: 0.72rem;
	line-height: 1.4;
	color: var(--hm-ink);
}

.hm-review figcaption {
	font-size: 0.66rem;
	color: var(--hm-ink-soft);
}

.hm-review__stars {
	margin-top: 0.2rem;
	font-size: 0.9rem;
	letter-spacing: 0.08em;
	color: var(--hm-gold);
}

/* ══ Find us ══ */

.hm-visit {
	background: var(--hm-cream-2) url(../img/kios-before-footer.png) center / cover no-repeat;
}

.hm-visit__inner {
	display: grid;
	grid-template-columns: 1fr 1.05fr 0.95fr;
	align-items: stretch;
	min-height: 260px;
}

.hm-visit__copy {
	padding: 2.4rem 1.5rem 2.4rem var(--hm-gutter);
}

.hm-visit__place {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0.9rem 0 0.45rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--hm-green-900);
}

.hm-visit__place svg {
	font-size: 1.4rem;
	color: var(--hm-gold-deep);
}

.hm-visit__note {
	margin: 0 0 1.2rem;
	font-size: 0.85rem;
	color: var(--hm-ink-soft);
}

.hm-visit__photo {
	min-height: 260px;
}

.hm-visit__map {
	position: relative;
	min-height: 260px;
	padding: 1rem;
	background: var(--hm-cream);
}

.hm-visit__map iframe {
	width: 100%;
	height: 100%;
	min-height: 228px;
	border: 0;
	border-radius: 12px;
	box-shadow: var(--hm-shadow);
}

.hm-visit__pin {
	position: absolute;
	top: 1.8rem;
	left: 1.8rem;
	padding: 0.5rem 0.75rem;
	border-radius: 8px;
	background: #fff;
	box-shadow: var(--hm-shadow);
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--hm-green-900);
	pointer-events: none;
}

/* ══ Footer ══ */

.hm-foot {
	background: var(--hm-green-900);
	color: rgba(243,234,214,0.85);
	border-top: 1px solid rgba(201,168,76,0.4);
}

.hm-foot__inner {
	display: grid;
	grid-template-columns: 1.1fr 2fr 1fr;
	align-items: start;
	gap: 2rem;
	width: calc(100% - 2 * var(--hm-gutter));
	margin: 0 auto;
	padding: 2.6rem 0 2rem;
}

.hm-foot__brand img {
	height: 84px;
	width: auto;
}

.hm-foot__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.hm-foot h4 {
	margin: 0 0 0.6rem;
	font-size: 0.82rem;
	font-weight: 700;
	color: #fffaf0;
}

.hm-foot__cols a {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.8rem;
	transition: color 0.2s;
}

.hm-foot__cols a:hover {
	color: var(--hm-gold-soft);
}

.hm-foot__social {
	padding-left: 2rem;
	border-left: 1px solid rgba(243,234,214,0.25);
}

.hm-foot__social div {
	display: flex;
	gap: 1rem;
}

.hm-foot__social a {
	font-size: 1.45rem;
	color: #fffaf0;
	transition: color 0.2s;
}

.hm-foot__social a:hover {
	color: var(--hm-gold-soft);
}

.hm-foot__base {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	width: calc(100% - 2 * var(--hm-gutter));
	margin: 0 auto;
	padding: 1rem 0 1.4rem;
	font-size: 0.72rem;
	color: rgba(243,234,214,0.6);
}

.hm-foot__base p {
	margin: 0;
}

/* ══ Video modal ══ */

.hm-vmodal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: 1rem;
	background: rgba(4,12,8,0.82);
}

.hm-vmodal[hidden] {
	display: none;
}

.hm-vmodal__box {
	position: relative;
	width: min(820px, 100%);
}

.hm-vmodal__box video {
	width: 100%;
	max-height: 80vh;
	border-radius: 12px;
	background: #000;
}

.hm-vmodal__close {
	position: absolute;
	top: -2.6rem;
	right: 0;
	border: 0;
	background: none;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}

/* ══ Responsive ══ */

@media (max-width: 1100px) {
	.hm-topbar__nav {
		gap: 1.4rem;
	}

	.hm-duo__inner {
		grid-template-columns: 1fr;
	}

	.hm-visit__inner {
		grid-template-columns: 1fr 1fr;
	}

	.hm-visit__copy {
		padding-left: 1.5rem;
	}

	.hm-visit__map {
		grid-column: 1 / -1;
		min-height: 300px;
	}
}

@media (max-width: 900px) {
	.hm-showcase {
		aspect-ratio: auto;
		min-height: 0;
	}

	.hm-showcase__copy {
		max-width: 100%;
	}

	.hm-showcase__visual {
		position: relative;
		inset: auto;
		height: 260px;
		margin-top: 1.5rem;
	}

	.hm-showcase__play {
		top: 50%;
		left: 50%;
	}

	.hm-showcase__watch {
		right: 0;
		bottom: 0;
	}

	.hm-topbar__burger {
		display: flex;
	}

	.hm-topbar__icon {
		display: none;
	}

	.hm-topbar__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: 0.5rem 1.5rem 1.2rem;
		background: var(--hm-green-900);
		border-bottom: 1px solid rgba(201,168,76,0.4);
	}

	.hm-topbar__nav.is-open {
		display: flex;
	}

	.hm-topbar__link {
		width: 100%;
		padding: 0.7rem 0;
	}

	.hm-topbar__link--active::after {
		display: none;
	}

	.hm-topbar__dropdown {
		width: 100%;
	}

	.hm-topbar__menu {
		position: static;
		display: none;
		min-width: 0;
		margin-bottom: 0.4rem;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.hm-topbar__dropdown.is-open .hm-topbar__menu {
		display: block;
		transform: none;
	}

	.hm-topbar__dropdown:hover .hm-topbar__menu {
		transform: none;
	}

	.hm-showcase__inner {
		grid-template-columns: 1fr;
		padding: 2.5rem 0 3rem;
	}

	.hm-showcase__visual {
		min-height: 360px;
	}

	.hm-ways__grid,
	.hm-sig__grid,
	.hm-cafe__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.hm-crunch__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.hm-section-head,
	.hm-section-head--center {
		flex-direction: column;
		align-items: flex-start;
	}

	.hm-cafe__tools {
		flex-wrap: wrap;
	}

	.hm-foot__inner {
		grid-template-columns: 1fr;
	}

	.hm-foot__social {
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 600px) {

	.hm-topbar__inner {
		height: 64px;
		gap: 0.8rem;
	}

	.hm-topbar__brand img {
		height: 44px;
	}

	.hm-topbar__basket span {
		display: none;
	}

	.hm-showcase__ctas .hm-btn {
		width: 100%;
	}

	.hm-showcase__script {
		font-size: 1.5rem;
	}

	.hm-ways__grid,
	.hm-sig__grid,
	.hm-cafe__grid,
	.hm-loved__grid {
		grid-template-columns: 1fr;
	}

	.hm-promo {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.hm-promo__script {
		transform: none;
	}

	.hm-promo__cups {
		height: 170px;
	}

	.hm-visit__inner {
		grid-template-columns: 1fr;
	}

	.hm-visit__photo {
		min-height: 220px;
	}

	.hm-foot__cols {
		grid-template-columns: repeat(2, 1fr);
	}

	.hm-foot__base {
		flex-direction: column;
	}
}

@media (max-width: 600px) {
	.hm-showcase__inner {
		padding: 2.25rem 0 2.5rem;
		width: calc(100% - 2 * 1.25rem);
	}

	.hm-showcase__visual {
		display: none;
	}

	.hm-showcase__eyebrow,
	.hm-showcase .hm-eyebrow {
		font-size: 0.66rem;
		letter-spacing: 0.18em;
	}

	.hm-showcase__title {
		font-size: clamp(2rem, 9.4vw, 2.6rem);
		margin: 0.5rem 0 0.7rem;
	}

	.hm-showcase__lines {
		font-size: 1.05rem;
		margin-bottom: 0.5rem;
	}

	.hm-showcase__lead {
		font-size: 0.85rem;
		margin-bottom: 1.1rem;
	}

	.hm-showcase__badges {
		gap: 0.9rem;
		margin-bottom: 1.4rem;
	}

	.hm-showcase__badges li {
		font-size: 0.66rem;
		gap: 0.4rem;
	}

	.hm-showcase__badges svg {
		font-size: 1.25rem;
	}

	.hm-showcase__ctas {
		gap: 0.5rem;
		flex-wrap: wrap;
	}

	.hm-showcase__ctas .hm-btn {
		width: auto;
		padding: 0.7rem 0.75rem;
		letter-spacing: 0.03em;
		font-size: 0.62rem;
	}
}

@media (min-width: 901px) {
	.hm-showcase .hm-eyebrow {
		font-size: 1rem;
        letter-spacing: .6rem;
        margin-bottom: 0.5rem;
	}

	.hm-showcase__title {
		font-size: clamp(3.2rem, 4.8vw, 4.5rem);
	}

	.hm-showcase__lines {
		font-size: 1.5rem;
	}

	.hm-showcase__lead {
		font-size: 1.7rem;
        margin-top: 20px;
        line-height: 1.6;
	}

	.hm-showcase__badges {
		gap: 1.8rem;
	}

	.hm-showcase__badges li {
		font-size: 0.9rem;
	}

	.hm-showcase__badges svg {
		font-size: 2rem;
	}

	.hm-showcase__ctas {
		gap: 1.3rem;
		position: relative;
        top: 30px;
	}

	.hm-showcase__ctas .hm-btn {
		min-height: 62px;
		padding: 1rem 2.2rem;
		font-size: 1rem;
		letter-spacing: 0.08em;
	}

	.hm-showcase__play {
		width: 96px;
		height: 96px;
		font-size: 2.2rem;
	}

	.hm-showcase__watch {
		padding: 0.8rem 1.2rem 0.8rem 0.8rem;
		font-size: 0.85rem;
		gap: 0.8rem;
	}

	.hm-showcase__watch-icon {
		width: 42px;
		height: 42px;
	}
}

@media (min-width: 901px) {
	.hm-showcase__inner {
		align-items: center;
		padding: 3.5rem 0 3rem;
	}

	.hm-showcase__title {
		font-size: clamp(3.6rem, 5.6vw, 5.4rem);
		margin-bottom: 30px;
	}

	.hm-showcase__badges { 
		gap: 2.4rem;
        margin: 1.6rem 0 1.2rem;
        zoom: 1.2;
    
	}

	.hm-showcase__badges li {
		font-size: 1.05rem;
	}

	.hm-showcase__badges svg {
		font-size: 2.4rem;
	}

	.hm-showcase__watch {
		bottom: 5rem;
	}
}

@media (min-width: 901px) {
	.hm-showcase {
		aspect-ratio: auto;
		min-height: 43.8vw;
	}
}







.hm-topbar::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: #d4b15a;
	pointer-events: none;
	z-index: 0;
}


@media (min-width: 901px) {
	.hm-showcase__copy {
		position: relative;
	}
}

.hm-topbar__brand::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50%;
	background: transparent;
	pointer-events: none;
}


.hm-showcase__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}

.hm-showcase.is-playing .hm-showcase__play {
	display: none;
}

@media (max-width: 900px) {
	.hm-topbar__inner {
		position: relative;
		height: 64px;
		gap: 0.8rem;
	}

	.hm-topbar__brand {
		position: static;
		width: auto;
		height: auto;
		padding-left: 0;
		margin-left: 0;
		background: none;
	}

	.hm-topbar__brand::after {
		display: none;
	}

	.hm-topbar__brand img {
		height: 46px;
		top: 0;
		margin: 0;
	}

	.hm-topbar__nav {
		transform: none;
		left: 0;
		top: 100%;
	}

	.hm-topbar__actions {
		margin-left: auto;
	}

	.hm-topbar::after {
		bottom: -2px;
	}

	.for-leaft-section {
		width: 45vw;
		background-size: 140px;
	}

	.hm-showcase {
		background-position: 72% center;
	}
}

@media (max-width: 900px) {
	.hm-topbar__inner {
		width: calc(100% - 2 * 1.25rem);
		justify-content: space-between;
	}

	.hm-topbar__actions {
		gap: 0.6rem;
	}

	.for-leaft-section {
		top: 64px;
		height: calc(100% - 64px);
		z-index: 1;
	}
}

@media (max-width: 900px) {
	.hm-topbar__brand img {
		height: 38px;
	}

	.hm-topbar__basket {
		padding: 0.4rem 0.5rem 0.4rem 0.7rem;
	}

	.for-leaft-section {
		display: none;
	}
}

@media (max-width: 900px) {
	.hm-topbar__actions {
		flex-shrink: 0;
	}

	.hm-topbar__brand {
		flex-shrink: 1;
		min-width: 0;
	}

	.hm-topbar__icon {
		display: none;
	}
}

@media (min-width: 1280px) {
	.hm-showcase__title {
		font-size: 5.2rem;
	}

	.hm-showcase__lines {
		font-size: 1.5rem;
	}

	.hm-showcase__lead {
		font-size: 1.1rem;
	}

	.hm-showcase__ctas .hm-btn {
		min-height: 62px;
		font-size: 1rem;
	}
}

@media (min-width: 901px) and (max-width: 1279px) {
	.hm-showcase__title {
		font-size: clamp(3.2rem, 5vw, 4.4rem);
	}

	.hm-showcase__copy {
	}
}

@media (min-width: 1280px) {
	.hm-showcase__copy {
	}

	.hm-showcase__title {
		font-size: 4.5rem;
	}
}

@media (min-width: 1920px) {
	.hm-showcase__copy {
	}

	.hm-showcase__title {
		font-size: 5.5rem;
	}

	.hm-showcase__lines {
		font-size: 1.75rem;
	}

	.hm-showcase__lead {
		font-size: 1.25rem;
	}

	.hm-showcase__badges li {
		font-size: 1.1rem;
	}
}

@media (min-width: 1280px)  {
	.hm-showcase__copy {
	}

	.hm-showcase__title {
		font-size: 4.2rem;
	}

	.hm-showcase__lines {
		font-size: 1.3rem;
	}

	.hm-showcase__lead {
		font-size: 0.95rem;
	}

	.hm-showcase__badges li {
		font-size: 0.85rem;
	}

	.hm-showcase__ctas .hm-btn {
		min-height: 52px;
		font-size: 0.9rem;
	}
}
@media (min-width: 1500px) {
	.hm-showcase__copy {
		zoom: 1;
	}
	.hm-showcase__copy {
        top: 1.5vh;
    }
}
@media (min-width: 1280px)  {
	.hm-showcase__title {
		margin: 0.2rem 0 0.5rem;
	}

	.hm-showcase__lead {
		margin-bottom: 1rem;
	}

	.hm-showcase__badges {
		margin: 0.8rem 0 1.2rem;
	}
}

@media (min-width: 901px) {
	.hm-showcase__title {
		margin: 0.2rem 0 0.5rem;
	}

	.hm-showcase__lead {
		margin-bottom: 1rem;
	}

	.hm-showcase__badges {
		margin: 0.8rem 0 1.2rem;
	}
}

@media (min-width: 901px)  {
	.hm-showcase__copy {
	}

	.hm-showcase__title {
		font-size: 3.8rem;
	}

	.hm-showcase__lines {
		font-size: 1.15rem;
	}

	.hm-showcase__lead {
		font-size: 0.85rem;
	}

	.hm-showcase__badges li {
		font-size: 0.78rem;
	}

	.hm-showcase__badges svg {
		font-size: 1.6rem;
	}

	.hm-showcase__ctas .hm-btn {
		min-height: 46px;
		font-size: 0.8rem;
	}
}

@media (min-width: 1920px) {
	.hm-showcase__copy {
	}
}

@media (min-width: 901px)  {
	.hm-showcase__copy {
	}
}

@media (min-width: 901px) and (max-width: 1279px) {
	.hm-showcase__copy {
		zoom: 0.9;
	}
}

@media (min-width: 1280px)  {
	.hm-showcase__copy {
		zoom: 1.1;
	}
}

@media (min-width: 1920px) {
	.hm-showcase__copy {
		zoom: 1;
	}
}

@media (min-width: 901px) and (max-width: 1279px) {
	.hm-showcase__copy {
		top: 2vh;
	}
}

@media (min-width: 1280px)  {
	.hm-showcase__copy {
		top: 5vh;
	}
}

@media (min-width: 1920px) {
	.hm-showcase__copy {
		top: 6vh;
	}
}

@media (max-width: 1279px) {
	.hm-showcase__copy {
		top: 2vh;
	}
}

@media (min-width: 901px) and (max-width: 1279px) {
	.hm-showcase__copy {
		max-width: 55%;
	}
}

@media (min-width: 1280px)  {
	.hm-showcase__copy {
		max-width: 50%;
	}
}

@media (min-width: 1920px) {
	.hm-showcase__copy {
		max-width: 46%;
	}
}

@media (max-width: 900px) {
	.hm-showcase__copy {
		max-width: 100%;
	}
}

.hm-showcase__ctas {
	position: relative;
	top: 30px;
}

@media (max-width: 900px) {
	.hm-showcase__ctas {
		top: 2vh;
	}
}

@media (min-width: 901px) and (max-width: 1279px) {
	.hm-showcase__ctas {
		top: 3vh;
	}
}

@media (min-width: 1280px)  {
	.hm-showcase__ctas {
		top: 4vh;
	}
}

@media (min-width: 1920px) {
	.hm-showcase__ctas {
		top: 5vh;
	}
}

.hm-ways-card__media {
	height: 240px;
	background-size: cover;
	background-position: center;
}

.hm-ways-card__media.hm-media--trio {
	height: 240px;
}

.hm-ways-card {
	border-radius: 16px;
	background: #fffdf8;
	box-shadow: 0 12px 28px rgba(45,38,20,0.14);
}

.hm-ways-card__body {
	padding: 1.2rem 1.25rem 1.4rem;
}

.hm-ways-card__body h3 {
	font-family: var(--hm-sans);
	font-size: 1.4rem;
	font-weight: 700;
	color: #15110a;
	margin: 0 0 0.4rem;
}

.hm-ways-card__body p {
	font-family: var(--hm-sans);
	font-size: 0.95rem;
	line-height: 1.45;
	color: #4f4a40;
	margin: 0 0 1.25rem;
}

.hm-ways .hm-btn--sm {
	min-height: 44px;
	padding: 0.7rem 1.5rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: #1f1606;
	box-shadow: 0 6px 16px rgba(185,145,47,0.3);
}

.hm-ways-card {
	background: #ffffff;
	border: 1px solid rgba(0,0,0,0.04);
	box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

.hm-ways {
	background: #faf5ec;
}

.hm-ways-card {
	background: #f7f2e7;
}

.hm-ways-card {
	box-shadow: 0 6px 22px rgba(120,90,40,0.10), 0 1px 3px rgba(0,0,0,0.03);
}

.hm-ways-card__body h3 {
	font-weight: 600;
	color: #161616;
}

.hm-ways-card__body p {
	font-weight: 500;
	font-size: 1rem;
	color: #3d3b36;
	line-height: normal;
}

.hm-ways .hm-btn--sm {
	font-weight: 600;
	color: #161616;
}

.hm-sig::before,
.hm-sig::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 180px;
	background-image: url(../img/leaf-hm-left.png);
	background-repeat: no-repeat;
	background-size: 180px auto;
	pointer-events: none;
	opacity: 0.9;
}

.hm-sig::before {
	left: 0;
	background-position: left top;
}

.hm-sig::after {
	right: 0;
	background-position: right bottom;
	transform: scaleX(-1);
}

.hm-sig .hm-wrap {
	position: relative;
	z-index: 1;
}

.hm-sig::before,
.hm-sig::after {
	top: -160px;
	bottom: -160px;
	background-size: 180px auto;
}

.hm-sig::before,
.hm-sig::after {
	width: 260px;
	top: -160px;
	bottom: -160px;
	background-size: contain;
}

.hm-sig::before {
	background-position: left center;
}

.hm-sig::after {
	background-position: right center;
}

.hm-sig::after {
	background-image: url(../img/leaf-hm-right.png);
	transform: none;
}
@media (min-width: 1500px) {
	.hm-showcase__copy {
		zoom: 1.1;
		top: 1.5vh;
	}
}
 
@media (min-width: 1920px) {
	.hm-showcase__copy {
		zoom: 1.3;
		top: 10.5vh;
	}
}


@media (min-width: 1600px) {
	.hm-showcase__copy {
		zoom: 1.2;
		top: 1.5vh;
	}
}
@media (min-width: 1300px) {
	.hm-showcase__copy {
		zoom: .95;
		top: 5vh;
	}
}
@media (min-width: 1400px) {
	.hm-showcase__copy {
		zoom: 1;
		top: 5vh;
	}
}
@media (min-width: 1900px) {
	.hm-showcase__copy {
		zoom: 1.2;
		top: 10vh;
	}
}
.hm-sig::before,
.hm-sig::after {
	z-index: 1;
}

.hm-ways .hm-wrap,
.hm-cafe .hm-wrap,
.hm-snacks .hm-wrap {
	position: relative;
	z-index: 2;
}

.hm-sig::after {
	z-index: 0;
}

.hm-sig::after {
	top: -200px;
	bottom: auto;
	height: calc(100% + 400px);
}

.hm-sig::after {
	z-index: 1;
}

.hm-sig .hm-wrap {
	z-index: 2;
}

.hm-sig::after {
	top: -200px;
	bottom: 0;
	height: auto;
}

.hm-ways .hm-wrap {
	z-index: 0;
}

.hm-sig::after {
	background-size: 45% auto;
}

.hm-sig::after {
	background-size: 35% auto;
}

.hm-sig::after {
	background-position: right bottom;
}

.hm-sig::after {
	background-size: 40% auto;
}

.hm-foot {
	background: #0d1d0a;
	border-top: 5px solid rgba(201,168,76,0.35);
}

.hm-foot__inner {
	grid-template-columns: 1.1fr 2fr 1fr;
	padding: 2.8rem 0 2rem;
}

.hm-foot__brand img {
	height: 120px;
}

.hm-foot h4 {
	font-size: 0.95rem;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 0.8rem;
}

.hm-foot__cols a {
	font-size: 0.9rem;
	color: rgba(255,255,255,0.8);
	margin-bottom: 0.45rem;
}

.hm-foot__cols {
	grid-template-columns: repeat(3, 1fr);
	gap: 2.2rem;
}

.hm-foot__social {
	border-left: 1px solid rgba(201,168,76,0.45);
	padding-left: 2.2rem;
}

.hm-foot__social a {
	font-size: 1.6rem;
	color: #ffffff;
}

.hm-foot__base {
	font-size: 0.8rem;
	color: rgba(255,255,255,0.75);
	padding: 1.2rem 0 1.6rem;
	border-top: 1px solid rgba(255,255,255,0.08);
}

.hm-foot__brand img {
	height: 160px;
}

.hm-foot h4 {
	font-size: 1rem;
}

.hm-foot__cols a {
	font-size: 0.95rem;
}

.hm-foot__base {
	font-size: 0.85rem;
}

.hm-topbar::after {
	height: 3px;
}

.hm-foot__social a {
	font-size: 2.2rem;
}

.hm-foot__social div {
	gap: 1.4rem;
}

.hm-foot__brand {
	height: fit-content;
	display: block;
	margin-top: -30px !important;
}

.hm-foot__brand img {
	display: block;
}

.hm-topbar::after {
	background: #c9a84c;
}

.hm-foot {
	border-top: 1px solid #c9a84c;
}

.hm-topbar::after {
	background: linear-gradient(90deg, #7a5c1e 0%, #c9a84c 30%, #f5e9b8 50%, #c9a84c 70%, #7a5c1e 100%);
}

.hm-foot {
	border-top: none;
	position: relative;
}

.hm-foot::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #7a5c1e 0%, #c9a84c 30%, #f5e9b8 50%, #c9a84c 70%, #7a5c1e 100%);
}

@media (max-width: 900px) {
	.hm-foot__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
		padding: 2.2rem 0 1.6rem;
	}

	.hm-foot__cols {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}

	.hm-foot__social {
		border-left: none;
		padding-left: 0;
	}

	.hm-foot__base {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0.5rem;
	}
}

@media (max-width: 560px) {
	.hm-foot__cols {
		grid-template-columns: repeat(2, 1fr);
	}

	.hm-foot__brand img {
		height: 80px;
	}

	.hm-foot__social a {
		font-size: 1.8rem;
	}
}

.hm-foot__brand {
	text-align: center;
}

.hm-foot__brand img {
	height: 140px;
	margin: 0 auto;
}

@media (max-width: 900px) {
	.hm-sig-card__foot,
	.hm-cafe-card__foot,
	.hm-crunch-card__foot {
		flex-wrap: wrap;
		gap: 0.6rem;
	}

	.hm-sig-card__foot .hm-cart-btn,
	.hm-cafe-card__foot .hm-cart-btn,
	.hm-crunch-card__foot .hm-cart-btn {
		width: 100%;
		justify-content: center;
		margin-left: 0;
	}
}

/* ══ Shop page ══ */
.hm-shop {
	position: relative;
	padding: 0 0 5rem;
	background: #faf5ec;
	color: #161616;
}

.hm-shop::before,
.hm-shop::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
    aspect-ratio: 1000 / 444;
	pointer-events: none;
}

.hm-shop::before {
	background: url('../img/bg-shop-1.png') center top / 100% auto no-repeat;
	background-position-y: -120px;
}

.hm-shop::after {
	background:
		linear-gradient(to bottom, rgba(250, 245, 236, 0) 30%, #faf5ec 100%),
		linear-gradient(to bottom, rgba(9, 30, 19, 0.25) 0%, rgba(9, 30, 19, 0.12) 15%, rgba(9, 30, 19, 0.02) 32%, rgba(9, 30, 19, 0) 50%);
}

.hm-shop .hm-wrap {
	position: relative;
	z-index: 1;
}

.hm-shop__head {
	max-width: 46rem;
	margin-bottom: 2.25rem;
	padding-top: calc(8.94vw * 0.85);
}

.hm-shop__title {
	margin: 0.6rem 0 0.8rem;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(2.2rem, 4vw, 3.4rem);
	font-weight: 700;
	line-height: 1.08;
	color: var(--hm-cream);
}

.hm-shop__title--gold {
	background: linear-gradient(135deg, #7a5c1e 0%, #c9a84c 30%, #f5e9b8 50%, #c9a84c 70%, #7a5c1e 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hm-shop__lead {
	margin: 0;
	font-family: 'DM Sans', sans-serif;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--hm-cream);
}

.hm-shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	margin-bottom: 1.25rem;
}

.hm-shop__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.hm-shop__search {
	position: relative;
	display: flex;
	align-items: center;
	width: min(100%, 320px);
}

.hm-shop__search svg {
	position: absolute;
	left: 0.9rem;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: #7a5c1e;
	stroke-width: 2;
	stroke-linecap: round;
	pointer-events: none;
}

.hm-shop__search input {
	width: 100%;
	height: 46px;
	padding: 0 1rem 0 2.6rem;
	border: 1px solid rgba(201, 168, 76, 0.55);
	border-radius: 999px;
	background: #fffdf8;
	font-family: 'DM Sans', sans-serif;
	font-size: 1rem;
	color: #161616;
	outline: none;
}

.hm-shop__search input:focus {
	border-color: #c9a84c;
	box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18);
}

.hm-shop__count {
	margin: 0 0 1.25rem;
	font-family: 'DM Sans', sans-serif;
	font-size: 0.95rem;
	color: var(--hm-cream);
}

.hm-shop__grid {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 1.5rem;
}

.hm-shop-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 16px;
	background: #f7f2e7;
	box-shadow: 0 6px 22px rgba(120, 90, 40, 0.10), 0 1px 3px rgba(0, 0, 0, 0.03);
}

.hm-shop-card__media {
	aspect-ratio: 3 / 2;
	background-color: #efe7d4;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hm-shop-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.1rem 1.2rem 1.25rem;
}

.hm-shop-card__tag {
	align-self: flex-start;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	background: rgba(201, 168, 76, 0.18);
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.72rem;
	color: #7a5c1e;
}

.hm-shop-card h3 {
	margin: 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.2rem;
	font-weight: 600;
	color: #161616;
}

.hm-shop-card p {
	margin: 0;
	font-family: 'DM Sans', sans-serif;
	font-size: 0.95rem;
	line-height: 1.5;
	color: #3d3b36;
}

.hm-shop-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 0.6rem;
}

.hm-shop-card__foot strong {
	font-family: 'DM Sans', sans-serif;
	font-size: 1.05rem;
	color: #161616;
}

.hm-shop__empty {
	margin: 2rem 0 0;
	text-align: center;
	font-family: 'DM Sans', sans-serif;
	font-size: 1rem;
	color: #6b6558;
}

.hm-shop__empty[hidden] {
	display: none;
}

@media (max-width: 600px) {
	.hm-shop {
		padding: 0rem 0 4rem;
	}

	.hm-shop__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 0.9rem;
	}

	.hm-shop-card__body {
		padding: 0.8rem 0.85rem 0.95rem;
	}

	.hm-shop-card h3 {
		font-size: 1rem;
	}

	.hm-shop-card p {
		display: none;
	}

	.hm-shop__search {
		width: 100%;
	}
}

/* ══ Shop page header: widen logo background to the left, logo and gradient fade unchanged ══ */

/* ══ Shop page: category section title ══ */
.hm-shop__group {
	margin-bottom: 0rem;
}

.hm-shop__group:last-child {
	margin-bottom: 0;
}

.hm-shop__group-title {
	margin: 0 0 1.25rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid rgba(201, 168, 76, 0.35);
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.6rem;
	font-weight: 700;
	color: #161616;
}

/* ══ Shop page: full-width background behind the product sections ══ */
.hm-page-shop {
	overflow-x: hidden;
}

#hm-shop-grid {
	width: 100vw;
	margin-left: calc(-1 * var(--hm-gutter));
	padding: 3rem var(--hm-gutter) 1rem;
	background: #f7f2e7;
}

/* ══ Shop page: .hm-wrap spans the full viewport; content keeps the side gutter ══ */
.hm-page-shop .hm-shop .hm-wrap {
	width: 100%;
}

.hm-page-shop .hm-shop__head,
.hm-page-shop .hm-shop__toolbar,
.hm-page-shop .hm-shop__count,
.hm-page-shop .hm-shop__empty {
	padding-left: var(--hm-gutter);
	padding-right: var(--hm-gutter);
}

.hm-page-shop #hm-shop-grid {
	width: 100%;
	margin-left: 0;
}

.hm-page-shop #hm-shop-grid {
	padding: 0;
}

.hm-page-shop .hm-shop__group--drinks {
	padding: 2rem var(--hm-gutter);
}

.hm-page-shop .hm-shop__coffee {
	padding: 2rem var(--hm-gutter);
}

.hm-page-shop .hm-shop__group--non-coffee {
	margin-bottom: 0;
}

.hm-page-shop .hm-shop__switch {
	flex-basis: 100%;
}

.hm-page-shop .hm-shop__coffee .hm-coffee__header {
	display: block;
}

.hm-page-shop .hm-shop__coffee .hm-shop__group-tabs {
	margin-top: 1.25rem;
	margin-bottom: 0;
}

.hm-page-shop .hm-shop__coffee .hm-coffee__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.hm-page-shop .hm-shop__coffee .hm-shop__group-tabs--sub {
	margin-top: 1.25rem;
	margin-bottom: 0;
}

.hm-page-shop .hm-shop__coffee .hm-shop__group-tabs--main {
	flex-shrink: 0;
	margin: 0;
}

.hm-page-shop .hm-shop__group--snacks {
	padding: 2rem var(--hm-gutter);
	padding-top: 0px;
}





.hm-page-shop .hm-shop .hm-wrap {
	z-index: 4;
}

/* Shop header layering: header < leaf < logo. Logo background sits under the leaf via ::before. */



/* Shop page leaf decoration (shop.html) */

/* Find Us: kios-before-footer.png as the section background, photo column hidden */
.hm-visit__photo {
	display: none;
}

.hm-visit__map {
	background: transparent;
	position: absolute;
    right: 0;
}

@media (min-width: 901px) {
	.hm-visit__inner {
		grid-template-columns: 1fr 0.95fr;
	}
}

/* Promo banner image (promo-1.png) replaces the promo card content */
.hm-promo--banner {
	display: block;
	min-height: 0;
	padding: 0;
	background: none;
	border-radius: var(--hm-radius);
}

.hm-promo__banner {
	display: block;
}

.hm-promo__banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--hm-radius);
}

/* Find Us map: fixed 480px width, aligned to the right of its column */
.hm-visit__map iframe {
	width: 580px;
	max-width: 100%;
	margin-left: auto;
}

/* Loved by Students: card layout matched to reference (avatar left, quote right, name and stars centered below) */
.hm-loved__grid {
	gap: 1rem;
}

.hm-review {
	display: grid;
	grid-template-columns: 56px 1fr;
	grid-template-areas:
		"avatar quote"
		"name name"
		"stars stars";
	align-items: center;
	column-gap: 0.8rem;
	padding: 1rem 1.1rem 0.9rem;
	text-align: left;
	border-radius: 14px;
}

.hm-review__avatar {
	grid-area: avatar;
	width: 56px;
	height: 56px;
	margin: 0;
	font-size: 1.3rem;
}

.hm-review blockquote {
	grid-area: quote;
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.45;
}

.hm-review figcaption {
	grid-area: name;
	margin-top: 0.7rem;
	text-align: center;
	font-size: 0.72rem;
}

.hm-review__stars {
	grid-area: stars;
	margin-top: 0.25rem;
	text-align: center;
	font-size: 0.85rem;
}

/* Loved by Students: title, quote, name and star sizes */
.hm-loved .hm-heading--sm {
	font-size: 2.75rem;
}

.hm-review blockquote {
	font-size: 0.9rem;
}

.hm-review figcaption {
	font-size: 0.8rem;
}

.hm-review__stars {
	font-size: 2.5rem;
}

/* Loved by Students: review cards fill the column so their bottom matches the promo banner */
@media (min-width: 901px) {
	.hm-loved {
		display: flex;
		flex-direction: column;
	}

	.hm-loved__grid {
		flex: 1;
		grid-template-rows: 1fr;
		min-height: 0;
	}

	.hm-review {
		height: 100%;
	}
}

/* Review card: keep name and stars close together instead of stretching the rows apart */
.hm-review {
	align-content: center;
}

.hm-review figcaption {
	margin-top: 0.4rem;
}

.hm-review__stars {
	margin-top: 0.1rem;
}

/* Find Us: section height follows the kios-before-footer.png ratio (2232 x 464) on desktop */
@media (min-width: 901px) {
	.hm-visit {
		aspect-ratio: 2232 / 464;
		background-size: 100% auto;
		background-position: center;
	}
}

/* Find Us copy: larger text, column height follows the section (and background image) on desktop */
.hm-visit__copy .hm-heading--sm {
	font-size: 2.2rem;
}

.hm-visit__place {
	font-size: 1.15rem;
}

.hm-visit__note {
	font-size: 1.05rem;
}

@media (min-width: 901px) {
	.hm-visit__inner {
		height: 100%;
		min-height: 0;
	}

	.hm-visit__copy {
		height: 100%;
	}
}

/* Find Us copy: centered horizontally and vertically within its column */
.hm-visit__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

/* Find Us copy: right-aligned */
.hm-visit__copy {
	align-items: flex-end;
	text-align: right;
}

/* Find Us copy: left-aligned */
.hm-visit__copy {
	align-items: flex-start;
	text-align: left;
}

/* Find Us copy: slightly larger text */
.hm-visit__copy .hm-heading--sm {
	font-size: 2.5rem;
}

.hm-visit__place {
	font-size: 1.25rem;
}

.hm-visit__note {
	font-size: 1.15rem;
}

/* Find Us map: 480px tall, centered vertically in its column; section grows with the map on desktop */
@media (min-width: 901px) {
	.hm-visit {
		aspect-ratio: auto;
		background-size: cover;
	}
}

.hm-visit__map {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hm-visit__map iframe {
	height: 480px;
	min-height: 0;
}

/* Find Us: section height locked to the kios-before-footer.png ratio on desktop; map fits inside */
@media (min-width: 901px) {
	.hm-visit {
		aspect-ratio: 2232 / 464;
		background-size: 100% auto;
		background-position: center;
	}

	.hm-visit__map {
		height: 100%;
		box-sizing: border-box;
	}

	.hm-visit__map iframe {
		height: 100%;
		min-height: 0;
	}
}

/* Find Us map: 350px tall. The section grows to fit it, so the background uses cover on desktop. */
@media (min-width: 901px) {
	.hm-visit {
		aspect-ratio: auto;
		background-size: cover;
	}

	.hm-visit__map {
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.hm-visit__map iframe {
		height: inherit;
		min-height: 0;
	}
}

/* Find Us: section height is locked to the background ratio; the 350px map is clipped inside and does not change the section height */
@media (min-width: 901px) {
	.hm-visit {
		aspect-ratio: 2232 / 464;
		background-size: 100% auto;
		overflow: hidden;
	}

	.hm-visit__inner {
		min-height: 0;
	}

	.hm-visit__map {
		height: 100%;
        min-height: 120px;
        overflow: hidden;
        max-height: 410px;
	}
}

/* Find Us map: vertically centered inside its column on desktop */
@media (min-width: 901px) {
	.hm-visit__map {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.hm-visit__map iframe {
		flex: none;
	}
}

/* Find Us map: true vertical centering. The section is the containing block for the absolutely positioned map. */
@media (min-width: 901px) {
	.hm-visit {
		position: relative;
	}

	.hm-visit__map {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}
}

/* Find Us map: right edge matches the section above (same side gutter as .hm-duo__inner) */
@media (min-width: 901px) {
	.hm-visit__map {
		right: var(--hm-gutter);
	}
}

/* Find Us copy: larger heading and button */
.hm-visit__copy .hm-heading--sm {
	font-size: 2.8rem;
}

.hm-visit__copy .hm-btn {
	font-size: 1.05rem;
	padding: 0.9rem 1.6rem;
}

/* Find Us copy: larger heading and button (second step) */
.hm-visit__copy .hm-heading--sm {
	font-size: 3.2rem;
}

.hm-visit__copy .hm-btn {
	font-size: 1.25rem;
	padding: 1.1rem 2rem;
}

/* Find Us copy: smaller button */
.hm-visit__copy .hm-btn {
	font-size: 0.95rem;
	padding: 0.75rem 1.4rem;
}

/* Find Us copy: spacing between elements and line height */
.hm-visit__copy > * + * {
	margin-top: 1rem;
}

.hm-visit__copy .hm-heading--sm {
	line-height: 1.15;
}

.hm-visit__place,
.hm-visit__note {
	line-height: 1.6;
}

/* Find Us copy: tighter spacing between elements */
.hm-visit__copy > * + * {
	margin-top: 0.5rem;
}

/* Find Us copy: button slightly larger */
.hm-visit__copy .hm-btn {
	font-size: 1.05rem;
	padding: 0.85rem 1.6rem;
}

/* Find Us eyebrow label: larger */
.hm-visit__copy .hm-eyebrow {
	font-size: 1.1rem;
}

/* Product buttons: one consistent size (Add to basket, See detail / Read More) */
.hm-cart-btn,
.hm-cart-btn--sm,
.hm-shop-card__add,
.hm-coffee-card .hm-coffee-card__read-more {
	padding: 0.7rem 1.35rem;
	font-size: 0.95rem;
}

.hm-coffee-card .hm-coffee-card__read-more {
	letter-spacing: 0.12em;
}

/* Product buttons: slightly larger (second step) */
.hm-cart-btn,
.hm-cart-btn--sm,
.hm-shop-card__add,
.hm-coffee-card .hm-coffee-card__read-more {
	padding: 0.8rem 1.5rem;
	font-size: 1.02rem;
}

/* Section headings and eyebrow labels: larger across all sections */
.hm-eyebrow,
.hm-coffee .hm-coffee__label {
	font-size: 0.95rem;
}

.hm-heading {
	font-size: clamp(2.1rem, 3.6vw, 2.9rem);
}

.hm-heading--sm {
	font-size: clamp(1.75rem, 2.9vw, 2.3rem);
}

.hm-coffee .hm-coffee__heading {
	font-size: clamp(2.6rem, 4.8vw, 3.9rem);
}

/* View all links and product titles: larger across all sections */
.hm-viewall,
.hm-viewall--light {
	font-size: 1.05rem;
}

.hm-sig-card h3,
.hm-cafe-card h3,
.hm-crunch-card h3,
.hm-shop-card h3,
.hm-coffee-card .hm-coffee-card__name {
	font-size: 1.4rem;
}

/* Product descriptions: one consistent size across all sections */
.hm-sig-card__body p,
.hm-cafe-card__body p,
.hm-crunch-card__body p,
.hm-shop-card p,
.hm-coffee-card .hm-coffee-card__desc {
	font-size: 1.05rem;
	line-height: 1.5;
}

/* Prices: larger and one consistent size across all sections */
.hm-sig-card__foot strong,
.hm-crunch-card__foot strong,
.hm-shop-card__foot strong,
.hm-cafe-card__price b {
	font-size: 1.2rem;
}

.hm-cafe-card__price {
	font-size: 0.9rem;
}

/* Filter tabs: larger and consistent across all sections */
.hm-cafe__tab {
	padding: 0.6rem 1.3rem;
	font-size: 1rem;
}

/* Find Us: people.png shown as the middle column; three-column layout (copy | photo | map) on desktop */
@media (min-width: 901px) {
	.hm-visit__inner {
		grid-template-columns: 1fr 1.05fr 0.95fr;
	}

	.hm-visit__photo {
		display: block;
		height: 100%;
		background-size: cover;
		background-position: center;
	}
}

/* Find Us photo: 55% width, centered horizontally in its column */
@media (min-width: 901px) {
	.hm-visit__photo {
		width: 65%;
        justify-self: center;
		background-position: center center;
	}
}

/* Find Us map column: transparent background, 60% width */
@media (min-width: 901px) {
	.hm-visit__map {
		background-color: transparent;
		 
	}
}

/* Find Us photo column: transparent background color */
@media (min-width: 901px) {
	.hm-visit__photo {
		background-color: transparent;
	}
}

/* Product descriptions: smaller, consistent across all sections */
.hm-sig-card__body p,
.hm-cafe-card__body p,
.hm-crunch-card__body p,
.hm-shop-card p,
.hm-coffee-card .hm-coffee-card__desc {
	font-size: 0.92rem;
}

/* Product prices, titles and buttons: smaller, consistent across all sections */
.hm-sig-card__foot strong,
.hm-crunch-card__foot strong,
.hm-shop-card__foot strong,
.hm-cafe-card__price b {
	font-size: 1rem;
}

.hm-cafe-card__price {
	font-size: 0.8rem;
}

.hm-sig-card h3,
.hm-cafe-card h3,
.hm-crunch-card h3,
.hm-shop-card h3,
.hm-coffee-card .hm-coffee-card__name {
	font-size: 1.2rem;
}

.hm-cart-btn,
.hm-cart-btn--sm,
.hm-shop-card__add,
.hm-coffee-card .hm-coffee-card__read-more {
	padding: 0.6rem 1.15rem;
	font-size: 0.85rem;
}

/* Section headings: smaller and consistent across all sections */
.hm-heading {
	font-size: clamp(1.7rem, 2.8vw, 2.25rem);
}

.hm-heading--sm,
.hm-loved .hm-heading--sm,
.hm-visit__copy .hm-heading--sm {
	font-size: clamp(1.4rem, 2.2vw, 1.8rem);
}

.hm-coffee .hm-coffee__heading {
	font-size: clamp(2rem, 3.6vw, 2.9rem);
}

/* Loved by Students: avatar moved to the center top, smaller avatar and stars */
.hm-review {
	grid-template-columns: 1fr;
	grid-template-areas:
		"avatar"
		"quote"
		"name"
		"stars";
	justify-items: center;
	row-gap: 0.4rem;
	text-align: center;
}

.hm-review__avatar {
	width: 44px;
	height: 44px;
	font-size: 1rem;
}

.hm-review blockquote {
	font-size: 0.85rem;
}

.hm-review__stars {
	font-size: 0.8rem;
	letter-spacing: 0.04em;
}

/* Loved by Students: card layout matched to reference (avatar left, quote right, name and stars centered below) */
.hm-review {
	grid-template-columns: 52px 1fr;
	grid-template-areas:
		"avatar quote"
		"name name"
		"stars stars";
	justify-items: stretch;
	align-items: center;
	column-gap: 0.8rem;
	row-gap: 0.3rem;
	padding: 0.9rem 1rem;
	text-align: center;
}

.hm-review__avatar {
	width: 52px;
	height: 52px;
	justify-self: start;
	font-size: 1.1rem;
}

.hm-review blockquote {
	text-align: left;
	font-size: 0.82rem;
	line-height: 1.4;
}

.hm-review figcaption {
	margin-top: 0.2rem;
	font-size: 0.75rem;
}

.hm-review__stars {
	margin-top: 0.1rem;
	font-size: 1rem;
	letter-spacing: 0.05em;
	color: var(--hm-gold);
}

/* Loved by Students: avatar slightly smaller */
.hm-review__avatar {
	width: 44px;
	height: 44px;
	font-size: 0.95rem;
}

/* Loved by Students: larger stars */
.hm-review__stars {
	font-size: 1.25rem;
	letter-spacing: 0.06em;
}

/* Loved by Students: star color and tighter caption-to-stars spacing */
.hm-review__stars {
	color: #ecb519;
	margin-top: 0;
}

.hm-review figcaption {
	margin-bottom: 0;
}

/* Loved by Students: stars sit right under the caption */
.hm-review {
	row-gap: 0;
}

.hm-review__stars {
	line-height: 1;
	margin-top: -0.25rem;
}

/* Loved by Students: stars slightly apart from the caption */
.hm-review__stars {
	margin-top: 0.1rem;
}

/* Loved by Students: small gap between quote and caption */
.hm-review blockquote {
	margin-bottom: 0.45rem;
}

/* Find Us: keep the three-column composition on smaller screens; content scales down proportionally */
@media (min-width: 601px) and (max-width: 900px) {
	.hm-visit {
		aspect-ratio: 2232 / 464;
		background-size: 100% auto;
		overflow: hidden;
	}

	.hm-visit__inner {
		display: grid;
		grid-template-columns: 1fr 1.05fr 0.95fr;
		height: 100%;
		min-height: 0;
		zoom: 0.6;
	}

	.hm-visit__copy {
		height: 100%;
		padding: 2.4rem 1.5rem 2.4rem var(--hm-gutter);
	}

	.hm-visit__photo {
		display: block;
		height: 100%;
		width: 55%;
		justify-self: center;
		background-color: transparent;
		background-size: cover;
		background-position: center center;
	}

	.hm-visit__map {
		position: absolute;
		top: 50%;
		right: var(--hm-gutter);
		width: 60%;
		height: auto;
		transform: translateY(-50%);
		background-color: transparent;
		overflow: hidden;
	}

	.hm-visit__map iframe {
		width: 100%;
		height: 350px;
		min-height: 0;
	}
}


/* Find Us (desktop): proportions matched to the 1980x1080 reference. Photo at 33%-63%, map at the right ~29% width. */
@media (min-width: 901px) {
	.hm-visit__photo {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 33%;
		width: 30%;
		height: 100%;
		justify-self: auto;
		background-size: cover;
		background-position: center center;
	}

	.hm-visit__map {
		width: 29%;
		right: var(--hm-gutter);
	}

	.hm-visit__map iframe {
		width: 100%;
		max-width: 100%;
		height: 350px;
		min-height: 0;
		margin-left: 0;
	}
}

/* Find Us (desktop): background ratio is the minimum height; the section grows so the map and button are not clipped */
@media (min-width: 901px) {
	.hm-visit {
		aspect-ratio: auto;
		min-height: calc(100vw * 464 / 2232);
		overflow: visible;
		background-size: cover;
	}

	.hm-visit__map {
		overflow: visible;
	}

	.hm-visit__map iframe {
		height: 300px;
	}
}

/* Find Us copy (desktop): proportional sizes with vw so text and button shrink with the screen */
@media (min-width: 901px) {
	.hm-visit__copy .hm-eyebrow {
		font-size: clamp(0.7rem, 0.8vw, 1rem);
	}

	.hm-visit__copy .hm-heading--sm {
		font-size: clamp(1.8rem, 2.4vw, 3.2rem);
	}

	.hm-visit__place {
		font-size: clamp(0.9rem, 0.95vw, 1.25rem);
	}

	.hm-visit__note {
		font-size: clamp(0.9rem, 0.95vw, 1.15rem);
	}

	.hm-visit__copy .hm-btn {
		font-size: clamp(0.8rem, 0.85vw, 1.1rem);
		padding: 0.7em 1.5em;
	}
}

/* Product cards at 1280px and below: add-to-basket button moves below the price */
@media (max-width: 1280px) {
	.hm-sig-card__foot,
	.hm-cafe-card__foot,
	.hm-crunch-card__foot,
	.hm-shop-card__foot {
		flex-direction: column;
		align-items: stretch;
		gap: 0.6rem;
	}

	.hm-sig-card__foot .hm-cart-btn,
	.hm-cafe-card__foot .hm-cart-btn,
	.hm-crunch-card__foot .hm-cart-btn,
	.hm-shop-card__foot .hm-cart-btn,
	.hm-shop-card__add {
		width: 100%;
		margin-left: 0;
		justify-content: center;
	}
}

/* Header: mobile layout (burger + collapsible menu) at 1080px and below */
@media (max-width: 1080px) {
	.hm-topbar__inner {
		position: relative;
		width: calc(100% - 2 * 1.25rem);
		height: 64px;
		gap: 0.8rem;
		justify-content: space-between;
	}

	.hm-topbar__brand {
		position: static;
		width: auto;
		height: auto;
		padding-left: 0;
		margin-left: 0;
		background: none;
		flex-shrink: 1;
		min-width: 0;
	}

	.hm-topbar__brand::after,
	.hm-topbar__brand::before {
		display: none;
	}

	.hm-topbar__brand img {
		height: 46px;
		top: 0;
		margin: 0;
	}

	.hm-topbar__burger {
		display: flex;
	}

	.hm-topbar__icon {
		display: none;
	}

	.hm-topbar__actions {
		margin-left: auto;
		flex-shrink: 0;
		gap: 0.6rem;
	}

	.hm-topbar__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		transform: none;
		display: none;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: 0.5rem 1.5rem 1.2rem;
		background: var(--hm-green-900);
		border-bottom: 1px solid rgba(201,168,76,0.4);
	}

	.hm-topbar__nav.is-open {
		display: flex;
	}

	.hm-topbar__link {
		width: 100%;
		padding: 0.7rem 0;
	}

	.hm-topbar__link--active::after {
		display: none;
	}

	.hm-topbar__dropdown {
		width: 100%;
	}

	.hm-topbar__menu {
		position: static;
		display: none;
		min-width: 0;
		margin-bottom: 0.4rem;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.hm-topbar__dropdown.is-open .hm-topbar__menu {
		display: block;
		transform: none;
	}

	.hm-topbar__dropdown:hover .hm-topbar__menu {
		transform: none;
	}

	.hm-topbar::after {
		bottom: -2px;
	}


}

/* Find Us: at 1080px and below the three blocks stack vertically (copy, photo, map) */
@media (max-width: 1080px) {
	.hm-visit {
		position: relative;
		aspect-ratio: auto;
		min-height: 0;
		overflow: visible;
		background-size: cover;
	}

	.hm-visit__inner {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.5rem;
		height: auto;
		min-height: 0;
		zoom: 1;
		padding: 2rem 0;
	}

	.hm-visit__copy {
		height: auto;
		padding: 0 var(--hm-gutter);
		align-items: flex-start;
		text-align: left;
	}

	.hm-visit__photo {
		display: block;
		position: relative;
		top: auto;
		bottom: auto;
		left: auto;
		width: 100%;
		height: 320px;
		justify-self: stretch;
		background-color: transparent;
		background-size: cover;
		background-position: center center;
	}

	.hm-visit__map {
		position: relative;
		top: auto;
		right: auto;
		transform: none;
		width: auto;
		height: auto;
		min-height: 0;
		margin: 0 var(--hm-gutter);
		padding: 0;
		overflow: visible;
		background-color: transparent;
	}

	.hm-visit__map iframe {
		width: 100%;
		height: 320px;
		min-height: 0;
	}
}

/* Find Us: photo column hidden at 1080px and below */
@media (max-width: 1080px) {
	.hm-visit__photo {
		display: none;
	}
}

/* Find Us: solid #f4eee2 background at 1080px and below; kios image stays above 1080px */
@media (max-width: 1080px) {
	.hm-visit {
		background: #f4eee2;
	}
}

/* Shop header: search panel that drops down under the header */




/* Header search bar: drops down under the header on every page; Enter submits to the shop page */
.hm-topbar__search {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 250;
	padding: 0.9rem 1.25rem;
	background: var(--hm-green-900);
	border-bottom: 1px solid rgba(201,168,76,0.4);
}

.hm-topbar__search[hidden] {
	display: none;
}

.hm-topbar__search form {
	margin: 0;
}

.hm-topbar__search input {
	width: 100%;
	height: 46px;
	padding: 0 1rem;
	border: 1px solid rgba(201,168,76,0.55);
	border-radius: 999px;
	background: #fffdf8;
	font-family: 'DM Sans', sans-serif;
	font-size: 1rem;
	color: #161616;
	outline: none;
}

.hm-topbar__search input:focus {
	border-color: #c9a84c;
	box-shadow: 0 0 0 3px rgba(201,168,76,0.18);
}

/* Header search bar position: right side under the search icon, so it does not cover the logo */
.hm-topbar__search {
	top: calc(100% + 8px);
	left: auto;
	right: var(--hm-gutter);
	width: min(440px, calc(100% - 2 * var(--hm-gutter)));
	padding: 0;
	background: none;
	border: 0;
}

/* Header Shop dropdown: opens on hover (and on click via is-open) */
.hm-topbar__dropdown.is-open .hm-topbar__menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* Shop: keep the left leaf visible below the product band (band is transparent on the left strip) */
.hm-page-shop #hm-shop-grid {
	background: linear-gradient(to right, transparent 0, transparent 260px, #f7f2e7 260px);
}

/* Shop (phone/tablet): leaf decoration stops at the bottom edge of the hero image */
@media (max-width: 900px) {
	.hm-page-shop .for-leaft-section {
		height: 100vw;
	}
}

/* Shop: leaves above the header (z 62, above logo z 61) while the shop content stays above the leaves (z 63) */
.hm-page-shop .for-leaft-section {
	z-index: 62;
}

.hm-page-shop .hm-shop .hm-wrap {
	z-index: 63;
}

/* Café cards: "See detail" button styled like the sm cart button, opens the coffee modal */
.hm-cafe-card__detail {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 0.9rem;
	border: 0;
	border-radius: 999px;
	background: var(--hm-green-800);
	color: #fff;
	font-family: var(--hm-sans);
	font-size: 0.68rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	margin-left: auto;
	transition: background 0.2s, transform 0.2s;
}

.hm-cafe-card__detail:hover {
	background: var(--hm-green-600);
	transform: translateY(-1px);
}

/* Café cards: larger Read More button */
.hm-cafe-card__detail {
	padding: 0.7rem 1.25rem;
	font-size: 0.85rem;
	gap: 0.4rem;
}

/* Café cards: Read More button matches the Add to basket button (same size, cart icon) */
.hm-cafe-card__detail {
	gap: 0.45rem;
	padding: 0.6rem 1.15rem;
	font-size: 0.85rem;
	font-weight: 600;
}

.hm-cafe-card__detail svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Success popup (Add to basket): styled with the index-1 template tokens */
.swal2-popup.hm-swal {
	padding: 1.6rem 1.8rem;
	border-radius: var(--hm-radius);
	background: var(--hm-card);
	border: 1px solid rgba(201, 168, 76, 0.45);
	box-shadow: var(--hm-shadow);
	font-family: var(--hm-sans);
}

.swal2-popup.hm-swal .swal2-title {
	font-family: var(--hm-serif);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--hm-green-900);
}

.swal2-popup.hm-swal .swal2-html-container {
	font-size: 0.95rem;
	color: var(--hm-ink-soft);
}

.swal2-popup.hm-swal .swal2-icon.swal2-success {
	border-color: var(--hm-gold);
	color: var(--hm-gold);
}

.swal2-popup.hm-swal .swal2-success-ring {
	border-color: rgba(201, 168, 76, 0.35);
}

.swal2-popup.hm-swal .swal2-success-line-tip,
.swal2-popup.hm-swal .swal2-success-line-long {
	background-color: var(--hm-gold);
}

/* Footer: layered radial green background (all pages) */
.hm-foot {
	background:
		radial-gradient(ellipse 60% 80% at 15% 20%, rgba(46, 98, 62, 0.45), transparent 60%),
		radial-gradient(ellipse 60% 80% at 90% 90%, rgba(46, 98, 62, 0.35), transparent 60%),
		var(--hm-green-800);
}

/* Shop product band: solid cream edge to edge so the left edge lines up with the content */
.hm-page-shop #hm-shop-grid {
	background: #f7f2e7;
}

/* Home hero on phones: height follows its content so the buttons are never cut off */
@media (max-width: 900px) {
	.hm-showcase {
		aspect-ratio: auto;
		min-height: 0;
		height: auto;
		overflow: hidden;
	}

	.hm-showcase__inner {
		padding-bottom: 2.5rem;
	}

	.hm-showcase__ctas {
		flex-wrap: wrap;
		margin-bottom: 0.5rem;
	}
}

/* Home hero badges on phones: solid strip so the feature row stays readable over the logo artwork */
@media (max-width: 900px) {
	.hm-showcase__badges {
		position: relative;
		z-index: 2;
		padding: 0.7rem 0.9rem;
		border-radius: 10px;
		background: rgba(9, 30, 19, 0.82);
	}
}

/* Mobile header: Shop submenu opens inline inside the dark menu (no cream box, readable links) */
@media (max-width: 1080px) {
	.hm-topbar__dropdown.is-open .hm-topbar__menu {
		display: flex;
		flex-direction: column;
		width: 100%;
		min-width: 0;
		padding: 0 0 0.4rem 1rem;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		transform: none;
	}

	.hm-topbar__menu a {
		width: 100%;
		padding: 0.5rem 0;
		border-radius: 0;
		font-size: 0.95rem;
		color: #f3ead6;
	}

	.hm-topbar__menu a:hover {
		color: var(--hm-gold-soft);
		background: none;
	}
}

/* Mobile logo: same icon + name artwork as index-rev.html (shown at 1080px and below) */
.hm-brand-mob {
	display: none;
}

@media (max-width: 1080px) {
	.hm-brand-desk {
		display: none;
	}

	.hm-brand-mob {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
	}

	.hm-brand-mob__icon {
		height: 44px;
		width: auto;
	}

}

/* Mobile logo images ignore the desktop brand image offsets */
.hm-brand-mob img {
	position: static;
	left: auto;
	top: auto;
	margin: 0;
	z-index: auto;
	max-width: none;
}

/* Mobile logo sizes win over the generic brand image rules */
.hm-topbar__brand .hm-brand-mob__icon {
	height: 44px;
	width: auto;
}


/* Mobile logo fits beside the basket, login and burger on phones; burger stays at the far right */
@media (max-width: 600px) {
	.hm-topbar__brand .hm-brand-mob__icon {
		height: 30px;
	}


	.hm-brand-mob {
		gap: 0.35rem;
	}

	.hm-topbar__actions {
		gap: 0.35rem;
	}

	.hm-topbar__basket span {
		display: none;
	}

	.hm-topbar__basket {
		padding: 0.45rem 0.5rem;
	}

	.hm-topbar__login {
		padding: 0.4rem 0.6rem;
		font-size: 0.75rem;
	}

	.hm-topbar__burger {
		padding: 0.3rem 0.2rem;
	}
}

.hm-topbar__brand {
	min-width: 0;
	flex-shrink: 1;
}

/* Sticky compact header: after scrolling the header fixes to the top with a smaller logo (double header) */
.hm-topbar.is-sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 300;
	background: rgba(9, 30, 19, 0.97);
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
}

.hm-topbar.is-sticky .hm-topbar__inner {
	height: 60px;
}

.hm-topbar.is-sticky .hm-topbar__brand {
	height: 60px;
	padding-top: 0;
	padding-bottom: 0;
}

.hm-topbar.is-sticky .hm-topbar__brand .hm-brand-desk {
	height: 50px;
	top: 0;
	margin: 0;
}

.hm-topbar.is-sticky .hm-topbar__brand .hm-brand-mob__icon {
	height: 32px;
}


.hm-topbar.is-sticky .hm-topbar__link {
	font-size: 0.95rem;
}

.hm-topbar.is-sticky .hm-topbar__nav {
	top: 50%;
}

.hm-topbar.is-sticky .hm-topbar__brand::after {
	display: none;
}

/* Sticky compact header: desktop logo forced so no earlier brand image rule can enlarge it again */
.hm-topbar.is-sticky .hm-topbar__brand .hm-brand-desk {
	height: 50px !important;
	top: 0 !important;
	margin: 0 !important;
}

/* Login button in the header, next to the basket */
.hm-topbar__login {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1.05rem;
	border: 1.5px solid var(--hm-gold);
	border-radius: 999px;
	background: transparent;
	color: #f3ead6;
	font-family: var(--hm-sans);
	font-size: 0.86rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s;
}

.hm-topbar__login:hover {
	background: rgba(201, 168, 76, 0.15);
	color: #f3ead6;
}

.hm-topbar__login[hidden] {
	display: none;
}

/* Avatar shown instead of Login when a user is logged in */
.hm-topbar__avatar {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--hm-gold-grad);
	color: #24180a;
	font-family: var(--hm-serif);
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 4px 12px rgba(185, 145, 47, 0.35);
}

/* Logged-in user: avatar button with dropdown (My Profile, Logout) */
.hm-topbar__user {
	position: relative;
}

.hm-topbar__avatar {
	cursor: pointer;
	border: 0;
	padding: 0;
}

.hm-topbar__usermenu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 260;
	min-width: 170px;
	padding: 0.4rem;
	border-radius: 12px;
	background: var(--hm-card);
	box-shadow: var(--hm-shadow);
}

.hm-topbar__usermenu[hidden] {
	display: none;
}

.hm-topbar__usermenu a,
.hm-topbar__usermenu button {
	display: block;
	width: 100%;
	padding: 0.6rem 0.85rem;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--hm-ink);
	font-family: var(--hm-sans);
	font-size: 0.9rem;
	font-weight: 600;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.hm-topbar__usermenu a:hover,
.hm-topbar__usermenu button:hover {
	background: rgba(201, 168, 76, 0.15);
}

/* Dropdown arrow to the right of the avatar; rotates when the menu is open */
.hm-topbar__user {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.hm-topbar__caret {
	display: inline-grid;
	place-items: center;
	width: 14px;
	height: 14px;
	transition: transform 0.2s;
}

.hm-topbar__caret svg {
	width: 12px;
	height: 8px;
	fill: none;
	stroke: var(--hm-gold);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hm-topbar__user.is-open .hm-topbar__caret {
	transform: rotate(180deg);
}

/* Header basket panel: cart list with Checkout button */
.hm-basket-panel {
	position: absolute;
	top: calc(100% + 10px);
	right: var(--hm-gutter);
	z-index: 280;
	width: min(340px, calc(100% - 2 * var(--hm-gutter)));
	padding: 1rem 1.1rem 1.1rem;
	border-radius: 14px;
	background: var(--hm-card);
	box-shadow: var(--hm-shadow);
	color: var(--hm-ink);
	font-family: var(--hm-sans);
}

.hm-basket-panel[hidden] {
	display: none;
}

.hm-basket-panel__head {
	margin-bottom: 0.7rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid rgba(201, 168, 76, 0.35);
	font-size: 1rem;
	font-weight: 700;
}

.hm-basket-panel__head span {
	color: var(--hm-ink-soft);
	font-weight: 500;
}

.hm-basket-panel__list {
	margin: 0 0 0.9rem;
	padding: 0;
	max-height: 280px;
	overflow-y: auto;
	list-style: none;
}

.hm-basket-panel__list li {
	display: flex;
	justify-content: space-between;
	gap: 0.8rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	font-size: 0.92rem;
}

.hm-basket-panel__name {
	font-weight: 600;
}

.hm-basket-panel__qty {
	color: var(--hm-ink-soft);
	white-space: nowrap;
}

.hm-basket-panel__empty {
	margin: 0 0 0.9rem;
	color: var(--hm-ink-soft);
	font-size: 0.9rem;
}

.hm-basket-panel__checkout {
	display: block;
	width: 100%;
	padding: 0.8rem 1rem;
	border-radius: 999px;
	background: var(--hm-gold-grad);
	color: #24180a;
	font-weight: 700;
	font-size: 0.95rem;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(185, 145, 47, 0.32);
}

.hm-basket-panel__checkout:hover {
	color: #24180a;
	filter: brightness(1.05);
}

/* Added-to-basket popup buttons: Checkout (gold) and Continue Shopping (ghost) */
.swal2-popup.hm-swal .hm-swal__btn {
	display: inline-block;
	min-width: 150px;
	margin: 0.4rem;
	padding: 0.75rem 1.3rem;
	border-radius: 999px;
	font-family: var(--hm-sans);
	font-size: 0.92rem;
	font-weight: 700;
	cursor: pointer;
}

.swal2-popup.hm-swal .hm-swal__btn--gold {
	background: var(--hm-gold-grad);
	color: #24180a;
	border: 0;
	box-shadow: 0 6px 18px rgba(185, 145, 47, 0.32);
}

.swal2-popup.hm-swal .hm-swal__btn--ghost {
	background: transparent;
	color: var(--hm-green-900);
	border: 1.5px solid var(--hm-gold);
}

/* Basket panel: price highlighted in bold */
.hm-basket-panel__qty {
	font-weight: 700;
	color: var(--hm-ink);
}

/* Below 1028px: hide the leaf decoration in every hero section, on all pages */
@media (max-width: 1027px) {
	.for-leaft-section {
		display: none !important;
	}
}

/* Header Shop link: opens the menu on hover, click goes to shop.html (All tab) */
.hm-topbar__link--toggle {
	text-decoration: none;
}


/* ── WhatsApp Float Button ── */
.hm-wa-float {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	z-index: 9000;
	width: 3.5rem;
	height: 3.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
	transition: transform 0.2s, filter 0.2s;
}

.hm-wa-float:hover {
	transform: scale(1.1);
	filter: drop-shadow(0 6px 18px rgba(0,0,0,0.4));
}

.hm-wa-float img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}